:root{
  /* OOG brand standard (matches oog.life) */
  --bg:#06070d; --bg2:#0e1019; --card:#ffffff0a; --line:#ffffff26; --line2:#ffffff14;
  --ink:#eef1f8; --muted:#aab2c6; --dim:#7c8499;
  --accent:#8b9bff; --accent2:#9fb0ff; --cy:#22d3ee; --vi:#a855f7; --good:#46e3a0; --warn:#ffb15a;
  --chip-on:rgba(139,155,255,.13); --radius:14px;
  --display:"Sora",system-ui,-apple-system,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --grad:linear-gradient(100deg,#8b9bff,#22d3ee 60%,#a855f7);
  --grad-btn:linear-gradient(100deg,#9fb0ff,#8b9bff);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(820px 520px at 50% -12%, rgba(91,108,255,.22), transparent 60%),
    radial-gradient(680px 520px at 110% 4%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(760px 600px at -12% 104%, rgba(34,211,238,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
#app{max-width:680px;margin:0 auto;min-height:100dvh;padding:0 18px}

/* progress */
#bar{position:fixed;top:0;left:0;right:0;height:6px;background:rgba(255,255,255,.07);z-index:50}
#bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--cy));transition:width .35s ease}

/* screens fill the phone */
.screen{display:none;flex-direction:column;min-height:100dvh;padding:26px 0 22px;animation:rise .3s ease}
.screen.active{display:flex}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* brand + intro */
.brand{display:flex;align-items:center;gap:10px;margin:10px 0 24px;font-size:15px}
.brand-logo{height:30px;width:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand-sub{color:var(--dim);margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-family:var(--mono)}
.kicker{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.18em;margin:0 0 12px;font-family:var(--mono)}
h1{font-family:var(--display);font-size:31px;line-height:1.12;margin:0 0 16px;font-weight:700;letter-spacing:-.02em}
.lede{color:var(--muted);font-size:16px;margin:0 0 14px;line-height:1.6}
.lede strong{color:var(--ink);font-weight:600}
.field-label{display:block;color:var(--muted);font-size:13px;margin:16px 0 7px;font-weight:600}
.fineprint{color:var(--dim);font-size:12.5px;margin-top:18px}
#intro .grow,#q .grow{flex:1}

/* question header */
.section-tag{display:inline-block;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin:2px 0 12px;font-weight:600;font-family:var(--mono)}
.q-title{font-family:var(--display);font-size:26px;line-height:1.18;margin:0 0 9px;font-weight:700;letter-spacing:-.02em}
.q-help{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.q-body{flex:0 0 auto}
.q-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:safe center;padding-bottom:6px}

/* inputs */
.text-input{width:100%;background:#ffffff08;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:15px;font-size:16px;outline:none;font-family:var(--sans);transition:border-color .15s,box-shadow .15s}
textarea.text-input{min-height:120px;resize:vertical;line-height:1.5}
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,155,255,.22)}
.text-input::placeholder{color:rgba(238,241,248,.34)}

/* chips — full width, big taps */
.chips{display:flex;flex-direction:column;gap:11px}
.chip{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:13px;padding:15px 16px;min-height:54px;font-size:16.5px;text-align:left;cursor:pointer;transition:border-color .12s,background .12s,transform .04s;width:100%}
.chip:hover{border-color:var(--line)}
.chip:active{transform:scale(.99)}
.chip .mark{width:23px;height:23px;border-radius:7px;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;font-size:13px;color:transparent}
.chip.round .mark{border-radius:50%}
.chip.on{border-color:var(--accent);background:var(--chip-on)}
.chip.on .mark{background:var(--accent);border-color:var(--accent);color:#0a0b14}
.none-chip{margin-top:4px;border-style:dashed;color:var(--muted)}
.none-chip.on{color:var(--ink)}

.sub-note{margin-top:14px}
.maxnote{color:var(--warn);font-size:13px;margin-top:10px;opacity:0;transition:opacity .2s}
.maxnote.show{opacity:1}

/* single follow-up reveal */
.reveal{margin-top:6px;display:none}
.reveal.show{display:block;order:-1;margin-bottom:14px}

/* color picker */
.slider-row{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.slider-label{color:var(--muted);font-size:14px}
.range{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--line);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--grad-btn);cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg)}
.slider-out{color:var(--ink);font-weight:700;font-size:18px;min-width:18px;text-align:center}
.swatches{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:6px}
.swatch input[type=color]{-webkit-appearance:none;appearance:none;width:62px;height:62px;border:none;border-radius:50%;background:none;padding:0;cursor:pointer}
.swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.swatch input[type=color]::-webkit-color-swatch{border:3px solid rgba(255,255,255,.22);border-radius:50%}
.swatch input[type=color]::-moz-color-swatch{border:3px solid rgba(255,255,255,.22);border-radius:50%}

/* fonts */
.font-grid{display:flex;flex-direction:column;gap:11px}
.font-chip{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:13px;padding:14px 18px;cursor:pointer;transition:border-color .12s,background .12s;text-align:left}
.font-chip.on{border-color:var(--accent);background:var(--chip-on)}
.font-sample{font-size:30px;line-height:1;min-width:46px}
.font-name{font-size:14px;color:var(--muted)}
.font-chip.on .font-name{color:var(--ink)}

/* nav pinned to bottom */
.nav{display:flex;align-items:center;gap:14px;margin-top:14px;padding:10px 0 calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);position:sticky;bottom:0;background:rgba(6,7,13,.86);backdrop-filter:blur(10px)}
.counter{color:var(--muted);font-size:13px;margin:0 auto;font-family:var(--mono)}
.btn{font:inherit;font-family:var(--sans);border:none;border-radius:12px;padding:15px 22px;cursor:pointer;font-weight:600;transition:transform .05s,box-shadow .2s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--grad-btn);color:#0a0b14;box-shadow:0 10px 30px rgba(102,117,255,.32)}
.btn.primary:hover{box-shadow:0 14px 40px rgba(102,117,255,.45)}
.btn.primary.big{width:100%;padding:17px;font-size:17px;margin-top:8px}
.btn.ghost{background:#ffffff0a;border:1px solid var(--line);color:#dfe4f5}
.btn.ghost:hover{background:#ffffff16;border-color:#ffffff45}
.btn.ghost.wide{width:100%;margin-top:12px}
.btn#back{padding:15px 17px}
.btn#start{width:100%;margin-top:8px;padding:17px;font-size:17px}

/* review */
.review-list{display:flex;flex-direction:column;margin:18px 0 24px}
.rev-row{background:var(--card);border:1px solid var(--line2);padding:13px 15px;cursor:pointer;border-radius:11px;margin-bottom:9px;transition:border-color .12s}
.rev-row:hover{border-color:var(--accent)}
.rev-q{color:var(--muted);font-size:12px;margin-bottom:4px}
.rev-a{color:var(--ink);font-size:15px;white-space:pre-wrap;word-break:break-word}
.rev-a.empty{color:rgba(238,241,248,.4);font-style:italic}
.rev-section{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:20px 0 8px;font-weight:600;font-family:var(--mono)}
.rev-swatches{display:flex;gap:8px}
.rev-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.22);display:inline-block}

/* done */
.confetti{font-size:48px;text-align:center;margin:8px 0}
.done-actions{margin-top:20px}
.raw{margin-top:24px;color:var(--muted)}
.raw summary{cursor:pointer;font-size:13px}
#raw-json{width:100%;min-height:160px;margin-top:10px;background:var(--bg2);border:1px solid var(--line2);color:var(--muted);border-radius:10px;padding:12px;font:12px/1.5 var(--mono)}
a.btn{display:block;text-align:center;text-decoration:none}