Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| PixelLock — neon "pixel lab" UI (matches the product mockup) | |
| dark navy base · violet + cyan neon · crisp pixels | |
| ============================================================ */ | |
| :root{ | |
| --bg:#06060d; --bg2:#0a0a16; | |
| --panel:rgba(18,18,32,.72); --panel2:rgba(26,26,44,.6); | |
| --line:rgba(150,140,210,.16); --line2:rgba(150,140,210,.34); | |
| --ink:#eceaff; --dim:#a8a3c8; --faint:#6d688d; | |
| --violet:#a06bff; --violet-hi:#c4a3ff; --cyan:#00e5d4; --cyan-hi:#6ff5ea; | |
| --amber:#ffd166; --lime:#7dff6a; --rose:#ff5ab3; | |
| --ok:#39e08a; --warn:#ffb347; --err:#ff5d6c; | |
| --radius:14px; --mono:"JetBrains Mono",ui-monospace,monospace; --sans:"Space Grotesk",system-ui,sans-serif; | |
| } | |
| *{box-sizing:border-box} | |
| [hidden]{display:none} /* author display rules must not override the hidden attribute */ | |
| html,body{margin:0;padding:0} | |
| body{ | |
| font-family:var(--sans); color:var(--ink); background:var(--bg); | |
| min-height:100vh; overflow-x:hidden; line-height:1.45; | |
| } | |
| .bg-glow{position:fixed;inset:0;z-index:-2;pointer-events:none; | |
| background: | |
| radial-gradient(60% 50% at 18% 0%, rgba(160,107,255,.20), transparent 70%), | |
| radial-gradient(55% 45% at 92% 8%, rgba(0,229,212,.16), transparent 70%), | |
| radial-gradient(80% 60% at 50% 110%, rgba(160,107,255,.10), transparent 70%), | |
| var(--bg);} | |
| .scanlines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35; | |
| background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);} | |
| .pixelated{image-rendering:pixelated;image-rendering:crisp-edges} | |
| /* ───── header ───── */ | |
| .appbar{display:flex;align-items:center;gap:18px;padding:14px 22px; | |
| border-bottom:1px solid var(--line); | |
| background:linear-gradient(180deg,rgba(12,12,22,.9),rgba(12,12,22,.55)); | |
| backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;flex-wrap:wrap} | |
| .brand{display:flex;align-items:center;gap:12px} | |
| .logo{display:grid;grid-template-columns:repeat(2,11px);grid-auto-rows:11px;gap:3px; | |
| padding:6px;border:1px solid var(--line2);border-radius:9px;background:#0c0c18} | |
| .logo i{width:11px;height:11px;border-radius:2px} | |
| .logo i:nth-child(1){background:var(--violet)} .logo i:nth-child(2){background:var(--cyan)} | |
| .logo i:nth-child(3){background:var(--cyan)} .logo i:nth-child(4){background:var(--violet); | |
| animation:blink 2.4s steps(1) infinite} | |
| @keyframes blink{0%,80%{opacity:1}90%{opacity:.25}} | |
| .wordmark{font-size:24px;font-weight:700;margin:0;letter-spacing:.5px} | |
| .wordmark b{color:var(--cyan);text-shadow:0 0 18px rgba(0,229,212,.5)} | |
| .brand-div{color:var(--faint)} | |
| .brand-sub{font-family:var(--mono);font-size:12.5px;color:var(--dim)} | |
| .fp-pill{display:inline-flex;align-items:center;gap:7px;margin-left:6px; | |
| font-family:var(--mono);font-size:12.5px;color:var(--cyan-hi); | |
| padding:7px 14px;border-radius:999px;border:1px solid rgba(0,229,212,.4); | |
| background:rgba(0,229,212,.07);box-shadow:0 0 22px rgba(0,229,212,.18) inset} | |
| .appbar-right{margin-left:auto;display:flex;align-items:center;gap:12px} | |
| .server-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); | |
| font-size:12px;color:var(--dim);padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel2)} | |
| .dot{width:8px;height:8px;border-radius:50%} | |
| .dot.up{background:var(--ok);box-shadow:0 0 10px var(--ok)} .dot.down{background:var(--err);box-shadow:0 0 10px var(--err)} | |
| .ghost-btn{font-family:var(--mono);font-size:12px;color:var(--dim);text-decoration:none; | |
| padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);transition:.15s} | |
| .ghost-btn:hover{color:var(--ink);border-color:var(--line2)} | |
| /* ───── how-it-works strip + "see the LLM output" reveal ───── */ | |
| .howbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 22px;border-bottom:1px solid var(--line); | |
| background:rgba(160,107,255,.045);font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.5} | |
| .how-tag{color:var(--violet-hi);font-weight:700;border:1px solid rgba(160,107,255,.4);border-radius:999px;padding:4px 11px;background:rgba(160,107,255,.08);white-space:nowrap} | |
| .how-steps b{color:var(--cyan-hi)} .how-steps em{color:var(--ink);font-style:normal;font-weight:700} | |
| .proofbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; | |
| max-width:1480px;margin:14px auto 0;padding:0 22px} | |
| .proof-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px; | |
| background:linear-gradient(180deg,rgba(20,20,34,.82),rgba(10,10,18,.72));padding:13px 16px} | |
| .proof-card::before{content:"";position:absolute;inset:0 0 auto;height:2px; | |
| background:linear-gradient(90deg,var(--violet),var(--cyan),var(--amber))} | |
| .proof-card:nth-child(2)::before{background:linear-gradient(90deg,var(--amber),var(--rose),var(--violet))} | |
| .proof-card:nth-child(3)::before{background:linear-gradient(90deg,var(--lime),var(--cyan),var(--violet))} | |
| .proof-k{display:block;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink); | |
| letter-spacing:.8px;text-transform:uppercase} | |
| .proof-v{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--faint)} | |
| .wire-reveal{background:#08080f;border:1px solid var(--line);border-radius:12px;overflow:hidden} | |
| .wire-reveal summary{cursor:pointer;list-style:none;padding:11px 16px;font-family:var(--mono);font-size:12.5px;color:var(--cyan-hi);user-select:none} | |
| .wire-reveal summary::-webkit-details-marker{display:none} | |
| .wire-reveal summary b{color:var(--ink)} | |
| .wire-reveal summary:hover{background:rgba(0,229,212,.05)} | |
| .wire-reveal[open] summary{border-bottom:1px solid var(--line)} | |
| .wire{margin:0;padding:14px 16px;max-height:300px;overflow:auto;font-family:var(--mono);font-size:11px;line-height:1.5;color:#9fe6dd;white-space:pre-wrap;word-break:break-word} | |
| /* ───── layout ───── */ | |
| .layout{display:grid;grid-template-columns:372px 1fr;gap:20px;padding:20px 22px;max-width:1480px;margin:0 auto;align-items:start} | |
| /* ───── controls ───── */ | |
| .controls{display:flex;flex-direction:column;gap:16px;min-width:0; | |
| background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px} | |
| .step h2{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:13px;font-weight:600; | |
| text-transform:uppercase;letter-spacing:1.2px;color:var(--dim)} | |
| .step .num{font-family:var(--mono);font-size:11px;color:var(--violet-hi); | |
| border:1px solid rgba(160,107,255,.4);border-radius:6px;padding:2px 6px;background:rgba(160,107,255,.08)} | |
| .step .opt{font-family:var(--mono);font-size:10px;color:var(--faint);text-transform:none;letter-spacing:0} | |
| .dropzone{border:1.5px dashed var(--line2);border-radius:12px;padding:22px 14px;text-align:center; | |
| cursor:pointer;transition:.15s;background:rgba(160,107,255,.03)} | |
| .dropzone:hover,.dropzone.dragover{border-color:var(--violet);background:rgba(160,107,255,.08);box-shadow:0 0 26px rgba(160,107,255,.14) inset} | |
| .dz-ico{font-size:26px;color:var(--violet-hi);margin-bottom:6px} | |
| .dz-main{margin:0;font-size:14px} .dz-main .link{color:var(--cyan-hi)} | |
| .dz-hint{margin:4px 0 0;font-family:var(--mono);font-size:11px;color:var(--faint)} | |
| .dz-tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;color:var(--violet-hi); | |
| border:1px solid rgba(160,107,255,.4);border-radius:6px;padding:2px 9px} | |
| .dz-loaded{display:flex;flex-direction:column;align-items:center;gap:8px} | |
| #dz-preview{width:96px;height:96px;object-fit:contain;background:#0c0c18;border:1px solid var(--line);border-radius:8px} | |
| .dz-meta{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--dim)} | |
| .link-btn{background:none;border:none;color:var(--cyan-hi);cursor:pointer;font-family:var(--mono);font-size:11px;padding:0;text-decoration:underline} | |
| .starter-step{margin-top:-2px} | |
| .asset-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} | |
| .asset-tile{min-width:0;border:1px solid var(--line);border-radius:10px;background:rgba(10,10,20,.7); | |
| padding:7px 6px 6px;color:var(--dim);cursor:pointer;transition:.14s} | |
| .asset-tile:hover,.asset-tile:focus{border-color:var(--cyan);transform:translateY(-1px); | |
| box-shadow:0 0 18px rgba(0,229,212,.14);outline:none} | |
| .asset-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:8px; | |
| border:1px solid rgba(150,140,210,.12);overflow:hidden} | |
| .asset-img img{width:100%;height:100%;object-fit:contain;padding:10%;image-rendering:pixelated} | |
| .asset-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px; | |
| font-family:var(--mono);font-size:9.5px;text-align:center;color:var(--faint)} | |
| .asset-empty{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center;padding:8px} | |
| .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px} | |
| .chip{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--ink); | |
| padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer;transition:.13s} | |
| .chip:hover{border-color:var(--line2);transform:translateY(-1px)} | |
| .chip .swatch{width:11px;height:11px;border-radius:3px;box-shadow:0 0 8px currentColor} | |
| .chip.active{border-color:var(--violet);background:rgba(160,107,255,.14);box-shadow:0 0 18px rgba(160,107,255,.2)} | |
| .prompt{width:100%;resize:vertical;min-height:76px;font-family:var(--mono);font-size:12.5px;line-height:1.5; | |
| color:var(--ink);background:#0a0a16;border:1px solid var(--line);border-radius:10px;padding:11px} | |
| .prompt:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(160,107,255,.16)} | |
| .toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#0a0a16;border:1px solid var(--line);border-radius:10px;padding:4px} | |
| .toggle-glider{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px); | |
| border-radius:7px;background:linear-gradient(135deg,rgba(160,107,255,.9),rgba(0,229,212,.7));transition:transform .22s cubic-bezier(.4,1.3,.5,1);z-index:0} | |
| .toggle-glider.right{transform:translateX(100%)} | |
| .toggle-opt{position:relative;z-index:1;background:none;border:none;cursor:pointer;color:var(--dim); | |
| font-family:var(--mono);font-size:12.5px;padding:9px 4px;transition:.15s} | |
| .toggle-opt.active{color:#0a0712;font-weight:700} | |
| .run-btn{position:relative;margin-top:2px;border:none;cursor:pointer;border-radius:12px;padding:15px; | |
| font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:1px;color:#0a0712; | |
| background:linear-gradient(135deg,var(--violet) 0%,#c14bff 35%,var(--cyan) 72%,var(--amber) 100%); | |
| box-shadow:0 0 30px rgba(160,107,255,.4),0 6px 18px rgba(0,0,0,.4);transition:.15s} | |
| .run-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)} | |
| .run-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)} | |
| .run-btn .run-spinner{display:none;width:15px;height:15px;border:2px solid rgba(10,7,18,.4);border-top-color:#0a0712;border-radius:50%;vertical-align:-2px;margin-left:8px;animation:spin .7s linear infinite} | |
| .run-btn.busy .run-spinner{display:inline-block} .run-btn.busy .run-label{opacity:.8} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| .hint{margin:0;text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint)} | |
| .hint.error{color:var(--err)} | |
| /* ───── stage ───── */ | |
| .stage{display:flex;flex-direction:column;gap:16px;min-width:0} | |
| .compare{display:grid;grid-template-columns:1fr auto 1fr 232px;gap:14px;align-items:stretch; | |
| background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px} | |
| .frame{margin:0;display:flex;flex-direction:column;gap:9px;min-width:0} | |
| .frame figcaption{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink)} | |
| .frame figcaption span{color:var(--faint);font-weight:400;text-transform:none;margin-left:6px} | |
| .canvas{position:relative;border-radius:12px;border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center} | |
| .canvas img:not([src]), .cell img:not([src]), #dz-preview:not([src]){display:none} | |
| .checker{background-color:#11111c; | |
| background-image:linear-gradient(45deg,#1a1a2a 25%,transparent 25%),linear-gradient(-45deg,#1a1a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a2a 75%),linear-gradient(-45deg,transparent 75%,#1a1a2a 75%); | |
| background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0} | |
| #img-in,#img-out{width:100%;height:100%;object-fit:contain;padding:6%} | |
| .arrow{align-self:center;color:var(--violet-hi);font-size:18px;text-shadow:0 0 12px var(--violet);animation:pulse 1.8s ease-in-out infinite} | |
| @keyframes pulse{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}} | |
| .frame-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center; | |
| font-family:var(--mono);font-size:12px;color:var(--faint)} | |
| .frame-empty::before{content:"";position:absolute;width:96px;height:96px;border-radius:18px; | |
| border:1px solid rgba(0,229,212,.24);background: | |
| linear-gradient(90deg,transparent 48%,rgba(0,229,212,.18) 49% 51%,transparent 52%), | |
| linear-gradient(transparent 48%,rgba(160,107,255,.18) 49% 51%,transparent 52%); | |
| box-shadow:0 0 34px rgba(0,229,212,.1)} | |
| .frame-empty p{position:relative;z-index:1;margin:0;padding-top:128px} | |
| .frame-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(8,8,18,.78);backdrop-filter:blur(2px)} | |
| .loader-grid{display:grid;grid-template-columns:repeat(3,12px);grid-auto-rows:12px;gap:4px} | |
| .loader-grid span{background:var(--violet);border-radius:2px;animation:lg 1.1s ease-in-out infinite} | |
| .loader-grid span:nth-child(2){animation-delay:.1s;background:var(--cyan)} .loader-grid span:nth-child(3){animation-delay:.2s} | |
| .loader-grid span:nth-child(4){animation-delay:.1s} .loader-grid span:nth-child(5){animation-delay:.2s;background:var(--cyan)} .loader-grid span:nth-child(6){animation-delay:.3s} | |
| .loader-grid span:nth-child(7){animation-delay:.2s} .loader-grid span:nth-child(8){animation-delay:.3s} .loader-grid span:nth-child(9){animation-delay:.4s;background:var(--cyan)} | |
| @keyframes lg{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1)}} | |
| .frame-loader p{margin:0;font-family:var(--mono);font-size:12px;color:var(--dim)} | |
| /* silhouette panel */ | |
| .sil-panel{display:flex;flex-direction:column;gap:9px;border:1px solid rgba(0,229,212,.28);border-radius:12px; | |
| padding:12px;background:linear-gradient(180deg,rgba(0,229,212,.05),rgba(8,8,18,.2))} | |
| .sil-head{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1px;color:var(--cyan-hi)} | |
| .sil-art{border-radius:9px;border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden} | |
| #sil-canvas{image-rendering:pixelated;width:84%;height:84%;object-fit:contain} | |
| .sil-note{margin:0;font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--faint)} | |
| /* statusbar (chips) */ | |
| .statusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 4px} | |
| .badge{font-family:var(--mono);font-size:12px;padding:7px 13px;border-radius:999px;border:1px solid;} | |
| .badge.ok{color:var(--ok);border-color:rgba(57,224,138,.4);background:rgba(57,224,138,.08)} | |
| .badge.warn{color:var(--warn);border-color:rgba(255,179,71,.4);background:rgba(255,179,71,.08)} | |
| .status{font-family:var(--mono);font-size:12.5px;color:var(--dim)} .status.error{color:var(--err)} | |
| .dl-btn{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:700;color:#0a0712;text-decoration:none; | |
| padding:9px 18px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--cyan-hi));box-shadow:0 0 20px rgba(0,229,212,.35)} | |
| .dl-btn:hover{filter:brightness(1.08)} | |
| /* gallery */ | |
| .gallery-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px} | |
| .gallery-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px} | |
| .gallery-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink)} | |
| .hint-sm{font-family:var(--mono);font-size:11px;color:var(--faint)} | |
| .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} | |
| .card{cursor:pointer;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel2);transition:.15s} | |
| .card:hover,.card:focus{border-color:var(--violet);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 22px rgba(160,107,255,.18);outline:none} | |
| .card-imgs{display:grid;grid-template-columns:1fr 1fr;position:relative} | |
| .card-imgs::after{content:"";position:absolute;top:6%;bottom:6%;left:50%;width:1px;background:linear-gradient(var(--violet),var(--cyan));transform:translateX(-.5px)} | |
| .cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; | |
| background-color:#11111c;background-image:linear-gradient(45deg,#1a1a2a 25%,transparent 25%),linear-gradient(-45deg,#1a1a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a2a 75%),linear-gradient(-45deg,transparent 75%,#1a1a2a 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0} | |
| .cell img{width:100%;height:100%;object-fit:contain;padding:9%;image-rendering:pixelated} | |
| .cell::before{content:attr(data-tag);position:absolute;top:5px;left:5px;font-family:var(--mono);font-size:8px;color:var(--faint);background:rgba(8,8,18,.7);padding:1px 4px;border-radius:4px} | |
| .card-title{margin:8px 9px 2px;font-size:12.5px;font-weight:600;color:var(--ink)} | |
| .card-prompt{margin:0 9px 10px;font-family:var(--mono);font-size:10px;line-height:1.45;color:var(--faint); | |
| display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} | |
| .gallery-empty{color:var(--faint);font-family:var(--mono);font-size:12px;grid-column:1/-1;text-align:center;padding:20px} | |
| /* footer */ | |
| .site-foot{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:22px; | |
| border-top:1px solid var(--line);margin-top:8px;font-size:12.5px} | |
| .foot-strong{color:var(--dim)} .foot-dim{font-family:var(--mono);font-size:11px;color:var(--faint)} .sep{color:var(--faint)} | |
| /* responsive */ | |
| @media(max-width:1080px){ | |
| .layout{grid-template-columns:1fr} | |
| .proofbar{grid-template-columns:1fr} | |
| .compare{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto} | |
| .sil-panel{grid-column:1/-1;flex-direction:row;align-items:center} | |
| .sil-art{width:90px;height:90px;flex:0 0 auto} | |
| .gallery{grid-template-columns:repeat(3,1fr)} | |
| } | |
| @media(max-width:900px){ | |
| .appbar{align-items:flex-start;gap:10px;padding:12px 14px} | |
| .brand{min-width:0;flex-wrap:wrap} | |
| .brand-div,.brand-sub{display:none} | |
| .fp-pill{margin-left:0} | |
| .appbar-right{width:100%;margin-left:0;justify-content:flex-start;gap:8px;flex-wrap:wrap} | |
| .ghost-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} | |
| .howbar{display:block;padding:10px 14px} | |
| .how-tag{display:inline-flex;margin-bottom:8px} | |
| .how-steps{display:block;overflow-wrap:anywhere} | |
| .proofbar{padding:0 14px} | |
| .layout{padding:16px 14px} | |
| } | |
| @media(max-width:620px){ | |
| .wordmark{font-size:22px} | |
| .server-pill{font-size:11px;padding:5px 10px} | |
| .compare{grid-template-columns:1fr;grid-template-rows:auto} | |
| .arrow{transform:rotate(90deg)} | |
| .gallery{grid-template-columns:repeat(2,1fr)} | |
| .asset-strip{grid-template-columns:repeat(4,minmax(0,1fr))} | |
| .chips{grid-template-columns:1fr 1fr} | |
| } | |
| @media(prefers-reduced-motion:reduce){*{animation:none;transition:none}} | |