: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:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --grad:linear-gradient(100deg,#8b9bff,#22d3ee 60%,#a855f7);
  --grad-btn:linear-gradient(100deg,#9fb0ff,#8b9bff);
}
/* blob animations — matches oog.life */
@keyframes drift1{0%{transform:translate(-16%,-12%) scale(1)}33%{transform:translate(36%,20%) scale(1.28)}66%{transform:translate(-10%,32%) scale(.82)}100%{transform:translate(-16%,-12%) scale(1)}}
@keyframes drift2{0%{transform:translate(14%,8%) scale(1.1)}40%{transform:translate(-38%,28%) scale(.78)}70%{transform:translate(26%,-24%) scale(1.38)}100%{transform:translate(14%,8%) scale(1.1)}}
@keyframes drift3{0%{transform:translate(8%,-18%) scale(.9)}35%{transform:translate(-22%,14%) scale(1.22)}65%{transform:translate(18%,26%) scale(.76)}100%{transform:translate(8%,-18%) scale(.9)}}
@keyframes drift4{0%{transform:translate(-12%,10%) scale(1.05)}45%{transform:translate(28%,-20%) scale(.85)}75%{transform:translate(-8%,18%) scale(1.18)}100%{transform:translate(-12%,10%) scale(1.05)}}
@keyframes drift5{0%{transform:translate(20%,-8%) scale(.95)}30%{transform:translate(-14%,22%) scale(1.15)}70%{transform:translate(10%,-16%) scale(.88)}100%{transform:translate(20%,-8%) scale(.95)}}
@keyframes hue{0%,100%{filter:hue-rotate(0deg) blur(68px)}50%{filter:hue-rotate(18deg) blur(72px)}}

#blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.9}
.b1{width:600px;height:600px;top:-15%;left:-10%;background:radial-gradient(circle at center,rgba(60,86,235,.85) 0%,rgba(60,86,235,.3) 42%,transparent 70%);animation:drift1 7s ease-in-out infinite,hue 4s ease-in-out infinite}
.b2{width:560px;height:560px;top:5%;left:20%;background:radial-gradient(circle at center,rgba(20,190,190,.75) 0%,rgba(20,190,190,.28) 42%,transparent 72%);animation:drift2 9s ease-in-out infinite,hue 5s ease-in-out infinite}
.b3{width:700px;height:700px;bottom:-25%;right:-10%;background:radial-gradient(circle at center,rgba(140,62,245,.82) 0%,rgba(140,62,245,.32) 42%,transparent 70%);animation:drift3 6s ease-in-out infinite,hue 4.5s ease-in-out infinite}
.b4{width:460px;height:460px;top:35%;left:38%;background:radial-gradient(circle at center,rgba(236,98,72,.48) 0%,rgba(236,98,72,.18) 44%,transparent 70%);animation:drift4 8s ease-in-out infinite,hue 5s ease-in-out infinite}
.b5{width:500px;height:500px;top:-8%;right:14%;background:radial-gradient(circle at center,rgba(72,120,255,.6) 0%,rgba(72,120,255,.22) 44%,transparent 72%);animation:drift5 7s ease-in-out infinite,hue 4.5s ease-in-out infinite}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
#app{position:relative;z-index:1;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:80px;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}
/* Mobile: vertically center intro content between the logo and the pinned CTA so
   it stays balanced on tall phones; never clips on short ones (safe center). */
#intro .grow,#q .grow{flex:1;display:flex;flex-direction:column;justify-content:safe center}

/* 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}
/* Mobile: optically center the single question in the space above the thumb-zone
   action bar (Typeform/Tally pattern). `safe` keeps tall content from clipping at
   the top. Desktop overrides this to flex-start + compact below. */
.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:20px;justify-content:center;margin-top:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:9px}
.swatch-circle{display:block;line-height:0}
.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%}
.hex-input{width:84px;background:#ffffff08;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 6px;font:13px/1 var(--mono);text-align:center;letter-spacing:.06em;text-transform:uppercase;outline:none;transition:border-color .15s,box-shadow .15s}
.hex-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,155,255,.22)}
.hex-input::placeholder{color:rgba(238,241,248,.34)}

/* 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)}

/* action bars pinned to bottom (thumb zone on mobile) */
.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);z-index:20}
/* intro + review actions: same thumb-zone treatment */
.screen-actions{position:sticky;bottom:0;margin-top:14px;padding:12px 0 calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);background:rgba(6,7,13,.86);backdrop-filter:blur(10px);z-index:20}
.screen-actions .btn{width:100%}
.screen-actions .fineprint{margin-top:10px;text-align:center}
.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}

/* ============ DESKTOP (pointer + width): top-align, compact, no sticky gap ============
   Mobile keeps min-height:100dvh with sticky action bars so the primary button
   lives in the thumb zone. Desktop has a mouse, so we top-align content and let the
   action buttons sit naturally right under it — kills the centered dead-space. */
@media (min-width:760px){
  .screen{min-height:auto;padding:34px 0 56px;justify-content:flex-start}
  .screen.active{display:flex}
  #intro .grow,#q .grow{flex:0 0 auto;justify-content:flex-start}
  .q-scroll{flex:0 1 auto;min-height:0;overflow:visible;justify-content:flex-start}
  /* unpin the action bars — on desktop they flow right under the content */
  .nav,.screen-actions{position:static;background:transparent;backdrop-filter:none;padding-bottom:0}
  /* keep a comfortable cap so the intro button isn't full-bleed-wide on big screens */
  #app{padding-bottom:40px}
}