/* ============================================================
   Duo · base — reset, canvas, typography, form controls
   ============================================================ */
*{box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent;}
html{background:var(--bg);}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* premium surface: a whisper of paper grain + soft ambient light.
   Not a pattern or a gradient shape — a near-imperceptible texture. */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(1100px 640px at 50% -10%, rgba(255,251,244,0.55), transparent 60%);
}
.aurora::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:0.5; mix-blend-mode:soft-light;
}

#app{
  width:100%; max-width:452px; min-height:100vh;
  padding:max(26px, env(safe-area-inset-top)) 22px 120px;
  position:relative; z-index:1;
}
@media (min-width:960px){
  #app{max-width:1080px; padding:48px 40px 132px;}
}

/* ---- type scale — Bricolage display, Hanken body ---- */
h1{font-family:var(--font-display); font-size:31px; font-weight:700; letter-spacing:-0.025em; line-height:1.05;}
h2{font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
p{line-height:1.58;}
.muted{color:var(--ink-2); font-size:14.5px;}
.tiny{color:var(--ink-3); font-size:12px; letter-spacing:0.005em;}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-3);}

/* numbers: grotesque, tabular, for dense data */
.num{font-family:var(--font-ui); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
/* figures: Bricolage display, bold, for the hero numbers */
.fig{font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1; letter-spacing:-0.035em;}
.serif{font-family:var(--font-display); font-weight:700; letter-spacing:-0.025em;}

.center{text-align:center;}
.row{display:flex; gap:10px; align-items:center;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

/* ---- motion ---- */
.view{animation:rise .42s var(--spring);}
@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes pop{0%{transform:scale(.7); opacity:0;} 70%{transform:scale(1.04);} 100%{transform:scale(1); opacity:1;}}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}
@keyframes spinin{from{opacity:0; transform:scale(.82) rotate(-14deg);} to{opacity:1; transform:none;}}
@keyframes floaty{from{transform:translateY(0);} to{transform:translateY(-4px);}}
@keyframes shimmer{to{background-position:200% 0;}}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ---- form controls ---- */
input[type=text], input[type=number], input[type=date]{
  width:100%; padding:15px 16px; font-size:16px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--ink);
  outline:none; font-family:inherit; transition:border-color .16s, box-shadow .16s, background .16s;
  -webkit-appearance:none; appearance:none;
}
input:focus{border-color:var(--mint); background:var(--surface); box-shadow:0 0 0 4px var(--mint-dim);}
input::placeholder{color:var(--ink-3);}
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:17px 0 7px; letter-spacing:0.01em;}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:var(--surface-3);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--mint); margin-top:-11px; box-shadow:0 2px 10px rgba(14,122,84,0.35), 0 0 0 4px #fff; border:none;}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--surface-3);}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--mint); border:4px solid #fff; box-shadow:0 2px 10px rgba(14,122,84,0.35);}

::selection{background:var(--mint-dim); color:var(--mint-deep);}

/* keyboard focus rings — visible only for keyboard users, never on tap */
:focus{outline:none;}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
.chip:focus-visible, .seg button:focus-visible, .react:focus-visible,
.stepper button:focus-visible, .nav button:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--mint-dim), 0 0 0 1.5px var(--mint);
  border-radius:var(--r-md);
}
.nav button:focus-visible{border-radius:14px;}