static/styles.css

/* ============================================================
   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!important}   /* 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!important}
.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!important;transition:none!important}}