/* Hello Millionaire — Resonance skin
   Return to nature. Flow. Abundance frequency, love frequency.
   Technology riding music like mythology.
   Same class names as every skin before it, so the pages inherit without markup changes. */

:root{
  /* the living palette */
  --obsidian:#06130E; --moss:#0C2119; --forest:#113026;
  --jade:#2FBF8F; --aurora:#39D8C8; --gold:#E8A33D; --bloom:#E2789F; --cream:#F4F1E6;

  /* light: warm paper, sun through leaves */
  --bg:#F5F2E8; --surface:#FFFDF7; --surface-2:#EBE7D8;
  --ink:#122018; --ink-dim:#4F6358; --line:#D6D2C0;
  --accent:#17876A; --accent-2:#B5781B; --accent-3:#C25B86;
  --halo:0 18px 50px -22px rgba(23,135,106,.55);
  --grain:.035;
  --maxw:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--obsidian); --surface:#0B1E17; --surface-2:#102A21;
    --ink:var(--cream); --ink-dim:#96AFA2; --line:#1E4234;
    --accent:var(--jade); --accent-2:var(--gold); --accent-3:var(--bloom);
    --halo:0 20px 60px -24px rgba(47,191,143,.6);
    --grain:.055;
  }
}
:root[data-theme="dark"]{
  --bg:var(--obsidian); --surface:#0B1E17; --surface-2:#102A21;
  --ink:var(--cream); --ink-dim:#96AFA2; --line:#1E4234;
  --accent:var(--jade); --accent-2:var(--gold); --accent-3:var(--bloom);
  --halo:0 20px 60px -24px rgba(47,191,143,.6);
  --grain:.055;
}

*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17.5px; line-height:1.65; letter-spacing:-.005em;
  padding-left:16px; padding-right:16px; padding-bottom:48px;
  position:relative; overflow-x:hidden;
}
/* aurora blooms + organic grain, fixed behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(45rem 32rem at 12% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(38rem 30rem at 92% 8%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 70%),
    radial-gradient(50rem 40rem at 60% 108%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 72%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>");
}
.wrap{max-width:var(--maxw); margin:0 auto; position:relative}
.narrow{max-width:700px; margin:0 auto}
img{max-width:100%}

/* ---- type ---- */
h1,h2,h3{font-family:"Fraunces","Georgia",serif; font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1; letter-spacing:-.018em; text-wrap:balance}
h1{font-size:clamp(44px,8.6vw,86px); line-height:1; margin:0; color:var(--ink)}
h2{font-size:clamp(28px,4.4vw,44px); line-height:1.1; margin:0 0 16px; color:var(--ink)}
h3{font-size:clamp(21px,2.8vw,27px); line-height:1.22; margin:0 0 8px; color:var(--accent)}
p{margin:0 0 16px}
a{color:var(--accent); text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness:1.5px; text-underline-offset:4px}
a:hover{color:var(--accent-3)}
.lead{font-size:clamp(18px,2.3vw,21.5px); color:var(--ink-dim); line-height:1.6}
.eyebrow{font-family:"Manrope",sans-serif; text-transform:uppercase;
  letter-spacing:.3em; font-weight:700; font-size:11px; color:var(--accent-2); margin:0 0 12px}
.big-quote{font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:clamp(23px,3.7vw,35px); line-height:1.24; margin:0;
  background:linear-gradient(104deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---- nav ---- */
.topbar{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; padding-block:22px}
.logo{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:21px;
  color:var(--ink); text-decoration:none; line-height:1; display:inline-flex; align-items:center; gap:10px}
.logo::before{content:""; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 70%);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent)}
.topbar nav{display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto}
.topbar nav a{font-family:"Manrope",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-weight:600; font-size:11.5px; color:var(--ink-dim); text-decoration:none}
.topbar nav a:hover{color:var(--accent)}

/* ---- waveform divider: the music running under everything ---- */
.topbar, .hero, section{position:relative}
.topbar::after, .hero::after, section::after{
  content:""; position:absolute; left:-16px; right:-16px; bottom:0; height:10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px,
      color-mix(in srgb, var(--accent) 55%, transparent) 7px 8px, transparent 8px 15px);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'><path d='M0 5 Q 15 -3 30 5 T 60 5 T 90 5 T 120 5' fill='none' stroke='black' stroke-width='3'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'><path d='M0 5 Q 15 -3 30 5 T 60 5 T 90 5 T 120 5' fill='none' stroke='black' stroke-width='3'/></svg>");
  -webkit-mask-size:120px 10px; mask-size:120px 10px; mask-repeat:repeat-x;
  opacity:.5; pointer-events:none}
section:last-of-type::after{display:none}

/* ---- hero ---- */
.hero{padding-block:64px 54px}
.hero .sun{position:absolute; right:-70px; top:-70px; width:380px; height:380px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-2) 42%, transparent) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 28px,
      color-mix(in srgb, var(--accent) 34%, transparent) 28px 30px);
  filter:blur(.4px); opacity:.5; pointer-events:none;
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.45} 50%{transform:scale(1.045); opacity:.62}}
.hero h1 span{display:block; font-size:.46em; font-weight:400; font-style:italic;
  font-variation-settings:"SOFT" 70,"WONK" 1; color:var(--ink-dim); margin-top:14px; letter-spacing:0}
.hero .lead{max-width:44ch; margin-top:22px}

/* ---- sections ---- */
section{padding-block:56px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px}

.card{position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:34px 6px 34px 6px;
  padding:30px; display:flex; flex-direction:column; gap:13px; overflow:hidden;
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease}
.card::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(22rem 10rem at 18% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%)}
.card:hover{box-shadow:var(--halo); border-color:color-mix(in srgb, var(--accent) 45%, transparent); transform:translateY(-2px)}
.card .num{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:15px;
  letter-spacing:.22em; color:var(--accent-2); line-height:1}
.card p{margin:0}
.card .spacer{flex:1 1 auto}

.panel{background:var(--surface); border:1px solid var(--line);
  border-radius:28px 6px 28px 6px; padding:28px}
.panel + .panel{margin-top:20px}
.tint{background:var(--surface-2)}

/* ---- buttons: river stones ---- */
.btn{display:inline-block; font-family:"Manrope",sans-serif; text-transform:uppercase;
  letter-spacing:.18em; font-weight:700; font-size:12px; padding:16px 28px;
  border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:box-shadow .25s ease, transform .25s ease, background .25s ease}
.btn-go{background:linear-gradient(104deg,var(--accent),var(--accent-2)); color:#07130E}
.btn-go:hover{box-shadow:var(--halo); transform:translateY(-2px); color:#07130E}
.btn-alt{background:transparent; border-color:color-mix(in srgb, var(--accent-3) 60%, transparent); color:var(--accent-3)}
.btn-alt:hover{background:color-mix(in srgb, var(--accent-3) 14%, transparent); color:var(--accent-3)}
.btn-quiet{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-quiet:hover{border-color:var(--accent); color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px}

/* ---- forms ---- */
label{display:block; font-family:"Manrope",sans-serif; text-transform:uppercase;
  letter-spacing:.2em; font-weight:700; font-size:11px; color:var(--accent-2); margin-bottom:8px}
input[type=text], textarea, select{width:100%; font-family:inherit; font-size:17px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px 4px 16px 4px;
  padding:13px 15px; line-height:1.55}
input[type=text]:focus, textarea:focus{border-color:var(--accent)}
textarea{resize:vertical; min-height:94px}
.field{margin-bottom:22px}
.hint{font-size:14.5px; color:var(--ink-dim); margin:7px 0 0}

/* ---- misc ---- */
.pill{display:inline-block; font-family:"Manrope",sans-serif; text-transform:uppercase;
  letter-spacing:.2em; font-weight:700; font-size:10.5px; padding:7px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--accent-2) 16%, transparent); color:var(--accent-2);
  border:1px solid color-mix(in srgb, var(--accent-2) 42%, transparent)}
.pill.free{background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.callout{border-left:2px solid var(--accent-3); background:var(--surface-2);
  padding:20px 24px; border-radius:0 22px 22px 0; margin:24px 0}
.callout p:last-child{margin-bottom:0}
.rule{height:12px; width:190px; margin:26px 0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'><path d='M0 6 Q 15 -2 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='black' stroke-width='2.5'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'><path d='M0 6 Q 15 -2 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='black' stroke-width='2.5'/></svg>");
  -webkit-mask-size:120px 12px; mask-size:120px 12px; mask-repeat:repeat-x}
.disclaimer{font-size:14.5px; color:var(--ink-dim)}
footer{padding-block:42px 14px; margin-top:28px; position:relative}
footer::before{content:""; position:absolute; left:-16px; right:-16px; top:0; height:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'><path d='M0 6 Q 15 -2 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='black' stroke-width='2.5'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'><path d='M0 6 Q 15 -2 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='black' stroke-width='2.5'/></svg>");
  -webkit-mask-size:120px 12px; mask-size:120px 12px; mask-repeat:repeat-x; opacity:.75}
footer .foot-links{display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:16px}
footer a{font-family:"Manrope",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-weight:600; font-size:11.5px; text-decoration:none; color:var(--ink-dim)}
footer a:hover{color:var(--accent)}

.progress{height:12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; overflow:hidden}
.progress > span{display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); transition:width .4s ease}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

@media print{
  body{background:#fff; color:#000; font-size:12pt}
  body::before, body::after{display:none}
  .topbar,.hero .sun,footer,.no-print,.btn{display:none!important}
  .topbar::after,.hero::after,section::after{display:none}
  .panel,.card{border:1px solid #999; break-inside:avoid; border-radius:10px}
  .big-quote{-webkit-text-fill-color:#000; color:#000}
  a{color:#000; text-decoration:none}
}

/* ---- the yeti ---- */
.yeti{width:156px; height:156px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid color-mix(in srgb, var(--accent-2) 60%, transparent);
  box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 12%, transparent), var(--halo);
  margin-bottom:24px}
@media (min-width:860px){
  .hero{padding-right:260px}
  .yeti{position:absolute; right:20px; bottom:46px; width:220px; height:220px; margin:0}
}

/* ---- labs ---- */
.labbox{background:var(--surface); border:1px solid var(--line);
  border-radius:30px 6px 30px 6px; padding:28px; margin-top:24px}
.labhead{margin-bottom:8px}
.labtag{display:inline-block; font-family:"Manrope",sans-serif; text-transform:uppercase;
  letter-spacing:.2em; font-weight:700; font-size:10.5px;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:999px; padding:6px 14px; margin-bottom:12px}
.labhead p{margin:0; color:var(--ink-dim); font-size:16px}
.labbox canvas{display:block; width:100%; margin-top:18px; touch-action:pan-y; border-radius:18px 4px 18px 4px}
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:13px; margin-top:20px}
.stat{background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px 4px 16px 4px; padding:14px 16px}
.stat .sl{font-family:"Manrope",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-weight:700; font-size:10px; color:var(--ink-dim)}
.stat .sv{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:23px; line-height:1.15;
  margin-top:5px; color:var(--ink); font-variant-numeric:tabular-nums}
.stat .sn{font-size:12.5px; color:var(--ink-dim); margin-top:4px}
.stat.good .sv{color:var(--accent)}
.stat.bad .sv{color:var(--accent-3)}
.chain{font-size:14.5px; font-variant-numeric:tabular-nums}
.chain td,.chain th{padding:8px 10px; text-align:right; white-space:nowrap}
.chain td.k,.chain th.k{text-align:center; font-weight:700; background:var(--surface-2)}
.chain tbody tr{cursor:pointer}
.chain tbody tr:hover{background:var(--surface-2)}
.chain tr.atm td.k{background:color-mix(in srgb, var(--accent-2) 26%, transparent); color:var(--accent-2)}
.chain tr.picked{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--accent)}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px}
.formgrid .field{margin-bottom:0}
.noterow{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--line)}
.noterow .pl{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:20px; margin-left:auto}
.noterow .pl.good{color:var(--accent)} .noterow .pl.bad{color:var(--accent-3)}