/* The Rewire Academy. Look matched to the coming-soon page. */
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/jost-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2')}

:root{
  --navy:#0B1530; --navy-2:#13214A; --champagne:#E8D5A8; --gold:#C9A961; --ivory:#F7F2E8; --silver:#C5CCDA;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --nav-h:68px;
}
html[data-theme="dark"]{
  --bg:var(--navy); --page:radial-gradient(ellipse at 50% 22%, var(--navy-2) 0%, var(--navy) 70%);
  --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.09); --line:rgba(232,213,168,.22);
  --text:var(--ivory); --muted:rgba(247,242,232,.78); --accent:var(--gold); --accent-text:var(--champagne);
  --btn-bg:var(--gold); --btn-text:var(--navy); --nav-bg:rgba(11,21,48,.94); --body-weight:300;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:var(--ivory); --page:linear-gradient(180deg,#FBF8F1 0%, var(--ivory) 60%);
  --surface:#FFFDF8; --surface-2:#F1E9D8; --line:rgba(11,21,48,.16);
  --text:var(--navy); --muted:#3B4563; --accent:#7A5C16; --accent-text:#6B5013;
  --btn-bg:var(--navy); --btn-text:var(--ivory); --nav-bg:rgba(255,253,248,.96); --body-weight:400;
  color-scheme:light;
}
html[data-text="smaller"]{font-size:93.75%}
html[data-text="normal"]{font-size:106.25%}
html[data-text="bigger"]{font-size:125%}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  min-height:100vh;min-height:100dvh;background:var(--page) fixed;color:var(--text);
  font-family:var(--sans);font-weight:var(--body-weight);line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
#app:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn-bg);color:var(--btn-text);padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* Twinkling stars behind everything (dark mode only). */
.starfield{position:fixed;inset:0;pointer-events:none;z-index:0}
html[data-theme="light"] body > .starfield{display:none}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--champagne);opacity:.2;
  animation:twinkle var(--d,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.star.big{width:3px;height:3px;box-shadow:0 0 8px var(--gold)}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

#app{position:relative;z-index:1;max-width:560px;margin:0 auto;
  padding:calc(var(--safe-t) + 22px) 20px calc(var(--safe-b) + 32px)}
body.has-nav #app{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 28px)}
.screen{animation:rise .7s ease-out both}
.screen.center{min-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 54px);display:flex;flex-direction:column;justify-content:center;text-align:center}
.screen.flow{min-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 54px);display:flex;flex-direction:column}
.screen.flow .grow{flex:1}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:.01em}
h1{font-size:clamp(2.5rem,11vw,3.6rem)}
h2{font-size:clamp(1.9rem,7.6vw,2.4rem)}
h3{font-size:1.4rem;font-weight:500}
p{font-size:1rem}
.lead{font-size:1.06rem;line-height:1.7;color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:.86rem;line-height:1.55;font-weight:400}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;font-weight:400;color:var(--accent-text)}
.by{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);font-weight:400;margin-top:10px}
.rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:30px auto}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,5.4vw,1.7rem);color:var(--accent-text)}
.tagline span{display:inline-block;margin:0 .3em}
.mark{width:44px;height:44px;margin:0 auto 26px;color:var(--accent)}
.stack > * + *{margin-top:16px}
.stack-lg > * + *{margin-top:26px}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:14px 22px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-text);font-weight:500;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;transition:transform .15s ease, opacity .2s ease}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent-text);border:1px solid var(--line)}
.btn.text{background:transparent;color:var(--accent-text);min-height:48px;text-transform:none;letter-spacing:.02em;font-weight:400;font-size:.98rem;text-decoration:underline;text-underline-offset:4px}
.actions{margin-top:28px;display:grid;gap:10px}
.row{display:flex;gap:10px}
.row .btn{flex:1}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
html[data-theme="light"] .card{box-shadow:0 1px 2px rgba(11,21,48,.05), 0 8px 24px rgba(11,21,48,.05)}
.card h3{margin-bottom:6px}
.note{border-left:2px solid var(--accent);padding:4px 0 4px 16px;font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--accent-text);text-align:left}
.pill{display:inline-block;flex:none;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--accent-text);white-space:nowrap}
.pill.on{background:var(--btn-bg);color:var(--btn-text);border-color:transparent}

/* Tick box */
.tick{display:flex;gap:14px;align-items:center;text-align:left;min-height:56px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font-weight:400}
.tick input{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--accent);display:grid;place-items:center;background:transparent}
.tick input:checked{background:var(--btn-bg)}
.tick input:checked::after{content:'';width:7px;height:13px;border:solid var(--btn-text);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}

/* Numbered steps (add to Home Screen guide) */
.steps{list-style:none;counter-reset:s;text-align:left}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;padding:10px 0}
.steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--accent);color:var(--accent-text);display:grid;place-items:center;font-family:var(--serif);font-size:1.15rem;line-height:1}
.steps li span{padding-top:3px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.seg button{min-height:46px;border-radius:999px;font-size:.92rem;font-weight:400;color:var(--muted);padding:0 8px}
.seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text);font-weight:500}

/* Progress dots */
.dots{display:flex;gap:7px;justify-content:center;margin-bottom:26px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}

/* Wheel of Life quiz */
.score{font-family:var(--serif);font-size:6.2rem;line-height:1;color:var(--accent-text);text-align:center;margin:18px 0 6px}
.range-wrap{padding:6px 2px 0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:48px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--fill,50%),var(--line) var(--fill,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-14px;border-radius:50%;background:var(--champagne);border:2px solid var(--gold);box-shadow:0 0 16px rgba(201,169,97,.55)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--champagne);border:2px solid var(--gold);box-shadow:0 0 16px rgba(201,169,97,.55)}
.range-ends{display:flex;justify-content:space-between;font-size:.84rem;font-weight:400;color:var(--muted);margin-top:2px}

.wheel{width:100%;max-width:400px;margin:6px auto 0;display:block;overflow:visible}
.wheel .ring{fill:none;stroke:var(--line);stroke-width:.6}
.wheel .spoke{stroke:var(--line);stroke-width:.6}
.wheel .wedge{fill:var(--gold);fill-opacity:.5;stroke:var(--gold);stroke-width:1;transform-origin:0 0;transform:scale(0);animation:grow .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .22s + .3s)}
html[data-theme="light"] .wheel .wedge{fill:#B8944A;fill-opacity:.55;stroke:#8A6A1F}
.wheel .wedge.low{fill:var(--champagne);fill-opacity:.95;stroke:var(--champagne)}
html[data-theme="light"] .wheel .wedge.low{fill:var(--navy);fill-opacity:.9;stroke:var(--navy)}
.wheel text{font-family:var(--sans);font-size:9.5px;font-weight:400;fill:var(--muted)}
.wheel text.low{fill:var(--accent-text);font-weight:500}
.wheel.still .wedge{animation:none;transform:none}
@keyframes grow{to{transform:scale(1)}}
.scores{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;text-align:left;font-size:.92rem;font-weight:400}
.scores li{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:6px 0}
.scores b{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--accent-text)}

/* The sky */
.sky{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(232,213,168,.22);
  background:radial-gradient(ellipse at 50% 35%, #1A2B5E 0%, var(--navy-2) 38%, var(--navy) 78%);aspect-ratio:1/1.04;color:var(--ivory)}
html[data-theme="light"] .sky{box-shadow:0 14px 40px rgba(11,21,48,.22)}
.sky .starfield{position:absolute;z-index:0}
.sky svg.cons{position:absolute;inset:7%;width:86%;height:86%;overflow:visible}
.sky .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:.72rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);opacity:.9}
.cons .dim{fill:var(--champagne);opacity:.3}
.cons .lit{fill:var(--gold);filter:drop-shadow(0 0 2.4px rgba(232,213,168,.95))}
.cons .lit.skipped{fill:var(--silver);filter:drop-shadow(0 0 2.2px rgba(197,204,218,.9))}
.cons .lit.new{animation:pop 1s ease-out both;transform-box:fill-box;transform-origin:center}
.cons line{stroke:var(--gold);stroke-width:.55;stroke-linecap:round;opacity:.9}
.cons.draw line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s ease-out forwards;animation-delay:calc(var(--i) * .07s + .2s)}
.cons .ring2{fill:none;stroke:var(--gold);stroke-width:.4;opacity:.55;stroke-dasharray:.8 2}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.9);opacity:1}100%{transform:scale(1)}}

.grid-sky{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(232,213,168,.2);
  background:radial-gradient(ellipse at 50% 35%, var(--navy-2) 0%, var(--navy) 80%);color:var(--ivory);padding:12px 12px 14px;text-align:center}
.mini svg.cons{width:74%;margin:4px auto 8px;display:block;overflow:visible}
.mini .name{font-family:var(--serif);font-size:1.12rem;line-height:1.2;color:var(--ivory)}
.mini .meta{font-size:.68rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);opacity:.85;margin-top:5px}
.mini.rest svg.cons{opacity:.55}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{text-align:center;margin-bottom:20px}
.brand .n{font-family:var(--serif);font-size:1.3rem;letter-spacing:.02em}
.brand .b{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);font-weight:400}

.list{display:grid;gap:12px}
.item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:64px}
.item .t{flex:1}
.item .t b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:500;line-height:1.2}
.item .t span{font-size:.86rem;font-weight:400;color:var(--muted)}
.item .num{flex:none;font-family:var(--serif);font-size:1.7rem;color:var(--accent-text);min-width:1.4em;text-align:center}
.setting{display:grid;gap:12px}
.setting + .setting{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.setting label,.setting .lab{font-weight:500;font-size:.98rem}

/* Bottom navigation */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--nav-bg);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);display:flex;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav[hidden]{display:none}
.nav .in{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:560px;height:var(--nav-h)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:400;letter-spacing:.04em;min-height:48px}
.nav a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--accent-text);font-weight:500}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);transform:translate(-50%,20px);z-index:20;
  background:var(--btn-bg);color:var(--btn-text);padding:12px 20px;border-radius:999px;font-size:.92rem;font-weight:500;opacity:0;pointer-events:none;transition:all .3s ease;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.test{border-style:dashed}
.hide{display:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .wheel .wedge{transform:none}
  .cons.draw line{stroke-dashoffset:0}
}