:root{
  /* surfaces */
  --paper:#f3efe6; --paper-2:#ece6da; --card:#fbf8f2;
  --edge:rgba(30,27,21,0.12); --edge-strong:rgba(30,27,21,0.22);
  /* ink */
  --ink:#1e1b15; --ink-soft:rgba(30,27,21,0.66); --ink-muted:rgba(30,27,21,0.42); --ink-faint:rgba(30,27,21,0.26);
  /* accent */
  --accent:#2f5963; --accent-soft:#cddcdd;
  /* verdict states (the only meaningful color) */
  --okay:#4f7d5e; --okay-soft:#dbe6da;
  --tight:#c0883a; --tight-soft:#ecdfc4;
  --wait:#b06a52; --wait-soft:#ecd8cd;
  --unsure:#8c867b;
  /* type + motion */
  --serif:'Spectral', Georgia, serif;
  --ui:'Hanken Grotesk', system-ui, sans-serif;
  --ease:cubic-bezier(0.22, 1, 0.30, 1);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--paper);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(47,89,99,0.05), transparent 60%);
}
#root{min-height:100%;}
.num{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent-soft);}
input{font-family:inherit;}
button{font-family:inherit;cursor:pointer;}
@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---- layout ---- */
.app{min-height:100vh;display:flex;justify-content:center;padding:0 22px;}
.col{width:100%;max-width:440px;min-height:100vh;display:flex;flex-direction:column;
  padding-top:max(28px, env(safe-area-inset-top));padding-bottom:40px;}
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;animation:stepIn .5s var(--ease) both;}
.step{display:flex;flex-direction:column;}
.step.center{align-items:center;text-align:center;}
.step.center.fill{justify-content:center;}

/* ---- brand chrome ---- */
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand .back{border:none;background:transparent;color:var(--ink-muted);font-size:22px;line-height:1;padding:4px 8px 4px 0;margin-left:-4px;}
.brand .mark-mini{width:30px;}
.brand .word{border:none;background:transparent;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-0.02em;color:var(--ink);padding:0;}
.brand .privacy{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint);}

/* ---- type ---- */
.kicker{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}
.q{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.18;margin-top:12px;letter-spacing:-0.01em;}
.hint{font-size:15px;color:var(--ink-soft);margin-top:12px;line-height:1.5;max-width:34ch;}

/* ---- inputs ---- */
.field{position:relative;margin-top:34px;}
.field .dollar{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:40px;color:var(--ink-muted);}
.input-money{width:100%;border:none;border-bottom:2px solid var(--edge-strong);background:transparent;font-family:var(--serif);font-size:40px;color:var(--ink);padding:8px 8px 10px 28px;outline:none;}
.input-text{width:100%;border:none;border-bottom:2px solid var(--edge-strong);background:transparent;font-family:var(--serif);font-style:italic;font-size:26px;color:var(--ink);padding:8px 4px 10px;outline:none;margin-top:30px;}
.input-date{width:100%;border:1px solid var(--edge-strong);border-radius:14px;background:var(--card);font-family:var(--ui);font-size:18px;color:var(--ink);padding:16px 18px;outline:none;margin-top:30px;}
.err{font-size:14px;color:var(--wait);margin-top:14px;font-weight:500;}

/* ---- buttons ---- */
.btn-primary{margin-top:34px;width:100%;border:none;border-radius:14px;background:var(--accent);color:#eef5f5;font-size:16px;font-weight:600;padding:16px;letter-spacing:0.01em;}
.btn-primary[disabled]{opacity:.4;cursor:default;}
.btn-ghost{border:1px solid var(--edge-strong);border-radius:14px;background:transparent;color:var(--ink-soft);font-size:15px;font-weight:600;padding:16px 20px;}
.btn-skip{margin-top:16px;border:none;background:transparent;color:var(--ink-muted);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px;align-self:center;}

/* ---- welcome ---- */
.welcome-q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:34px;margin-top:40px;line-height:1.2;}
.welcome-sub{font-size:17px;color:var(--ink-soft);margin-top:18px;max-width:34ch;line-height:1.55;}
.welcome .btn-primary{max-width:320px;}
.welcome-fine{font-size:13px;color:var(--ink-faint);margin-top:18px;}

/* ---- reading ---- */
.reading-label{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-muted);margin-top:36px;}

/* ---- answer ---- */
.answer-asked{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink-soft);margin-top:8px;line-height:1.3;}
.answer-level{margin:34px 0 6px;}
.verdict{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.14;margin-top:30px;}
.reason{font-size:16.5px;color:var(--ink-soft);margin-top:13px;line-height:1.55;}
.meta-row{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap;}
.cushion{font-size:14.5px;color:var(--ink-soft);}
.chip{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--edge);border-radius:999px;padding:7px 12px;color:var(--ink-soft);white-space:nowrap;}
.chip .dot{width:7px;height:7px;border-radius:50%;}
.math-wrap{margin-top:18px;}
.math-toggle{border:none;background:transparent;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px;}
.math-toggle .caret{transition:transform .25s ease;}
.math-toggle.open .caret{transform:rotate(90deg);}
.ledger{overflow:hidden;max-height:0;transition:max-height .4s var(--ease);}
.ledger.open{max-height:260px;}
.ledger-inner{border-top:1px solid var(--edge);margin-top:16px;padding-top:14px;display:flex;flex-direction:column;gap:9px;}
.row{display:flex;justify-content:space-between;font-size:15px;color:var(--ink-muted);}
.row .v{font-weight:600;color:var(--ink);}
.actions{display:flex;gap:12px;margin-top:30px;}
.actions .btn-primary{margin-top:0;flex:1;}
.actions .btn-ghost{margin-top:0;}

/* ---- the Level mark ---- */
.lv{position:relative;width:100%;}
.lv .track{position:relative;height:var(--bub,44px);}
.lv .line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--ink);opacity:.38;transform:translateY(-50%);border-radius:2px;}
.lv.unsure .line{opacity:.18;}
.lv .seat{position:absolute;top:50%;left:50%;width:calc(var(--bub,44px) * 1.6);height:7px;transform:translate(-50%,-50%);border-radius:999px;background:var(--okay-soft);}
.lv.unsure .seat{display:none;}
.lv .bub{position:absolute;top:50%;left:var(--pos,50%);width:var(--bub,44px);height:var(--bub,44px);border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--c) 16%, #fff), var(--c) 74%);
  box-shadow:0 3px 9px rgba(30,27,21,0.22), inset 0 1px 1px rgba(255,255,255,0.55);
  transition:left 1.15s var(--ease), background .6s ease;}
.lv.unsure .bub{background:transparent;border:2px dashed var(--c);box-shadow:none;opacity:.6;}
.lv.okay{--c:var(--okay);}
.lv.tight{--c:var(--tight);}
.lv.wait{--c:var(--wait);}
.lv.unsure{--c:var(--unsure);}

@media (prefers-reduced-motion:reduce){
  .stage{animation-duration:.01ms;}
  .lv .bub{transition:none;}
}