:root{ --bg:#0a0a0b; --panel:#0f0f12; --surface:#141418; --border:#24242c;
  --border-hi:#32323c; --text:#ececf1; --dim:#a0a0ab; --mute:#6b6b76;
  --accent:#3b82f6; --accent2:#60a5fa; --radius:12px;
  --sans:Inter,-apple-system,system-ui,sans-serif; --mono:"JetBrains Mono",monospace; }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:baseline;gap:10px}
.brand-mark{font-weight:800;letter-spacing:-.01em}
.brand-sub{font-size:12px;color:var(--mute);font-family:var(--mono)}
.status{font-size:12px;color:var(--dim);font-family:var(--mono)}
.screen{display:none}.screen.active{display:block;animation:in .4s cubic-bezier(.22,.61,.36,1) both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Step 1 */
#screenInput.active{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:40px}
.hero{max-width:680px;width:100%;text-align:center}
.eyebrow-tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(59,130,246,.14);padding:6px 14px;border-radius:999px}
.hero h1{font-size:40px;font-weight:800;letter-spacing:-.025em;margin:18px 0 10px}
.hero .sub{color:var(--dim);font-size:16px;line-height:1.6;max-width:560px;margin:0 auto 24px}
.prompt-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px -28px rgba(0,0,0,.8);transition:border-color .15s}
.prompt-card:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
#prompt{width:100%;background:transparent;border:none;color:var(--text);padding:18px;font-size:16px;
  line-height:1.6;resize:none;font-family:var(--sans);display:block;outline:none}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;text-align:left}
.opts label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.opts input,.opts select{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:10px 12px;font-size:14px;font-family:var(--sans);outline:none}
.opts input:focus,.opts select:focus{border-color:var(--accent)}
.opts .chk{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500}
.opts .chk input{width:auto}
.btn{border:none;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:var(--sans);transition:transform .15s,background .15s,box-shadow .15s,border-color .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(59,130,246,.6)}
.btn-primary:hover:not(:disabled){background:#2f6fe0;transform:translateY(-1px)}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--dim)}
.btn-ghost:hover{border-color:var(--border-hi);color:var(--text)}
.hint{font-size:12px;color:var(--mute);margin-top:14px;min-height:16px}

/* Step 2 */
#screenDeck.active{display:flex;flex-direction:column;height:calc(100vh - 56px)}
.buildbar{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--panel)}
.buildbar .btn{padding:8px 14px;font-size:13px}
.spacer{flex:1}
.build-info{font-size:12px;color:var(--dim);font-family:var(--mono)}
.stage{flex:1;overflow-y:auto;padding:36px;background:radial-gradient(1200px 600px at 50% -10%,#15151c 0%,var(--bg) 60%)}
.deck{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.slide-wrap{position:relative}
.slide-wrap .n{position:absolute;left:-30px;top:6px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.deck .slide{box-shadow:0 8px 40px rgba(0,0,0,.45)}
.slide.entering{animation:su .45s ease both}
@keyframes su{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}