@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:optional;src:url(/assets/fonts/hanken-grotesk-latin-300.9155894646.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/hanken-grotesk-latin-400.787b3fdd0b.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:optional;src:url(/assets/fonts/hanken-grotesk-latin-500.31f666af7b.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:optional;src:url(/assets/fonts/hanken-grotesk-latin-600.58f23b7ae3.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:optional;src:url(/assets/fonts/hanken-grotesk-latin-700.d85de6e272.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:optional;src:url(/assets/fonts/fredoka-latin-500.7d76e44a94.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:optional;src:url(/assets/fonts/fredoka-latin-600.b62f2898de.woff2) format('woff2')}
:root{--ground:#F4F6F8;--surface:#FFFFFF;--paper:#FFF7EB;--ink:#15273F;--text:#4A5866;--muted:#56718B;--line:#DCE4EC;--line-strong:#AEC4D6;
--navy:#0B1E3D;--navy-2:#13294A;--on-navy:#FFFFFF;--on-navy-muted:#8FA6C6;--gold:#F2C84D;--gold-ink:#3B2E06;--gold-soft:rgba(242,200,77,.18);
--grass:#6BAD6B;--grass-soft:rgba(107,173,107,.16);--amber:#B07A3E;--amber-soft:rgba(176,122,62,.14);--sky-soft:rgba(181,225,249,.35);
--display:"Fredoka","Hanken Grotesk","Segoe UI",system-ui,sans-serif;--body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}a{color:inherit}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance}
.fm-bar{background:#0B1E3D;color:#C9D8E8;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.fm-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fm-back{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}.fm-back:hover{text-decoration:underline;text-underline-offset:3px}
.fm-tag{flex:1;color:#8FA6C6;min-width:0}
.fm-cta{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:6px 14px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}.fm-cta:hover{background:#fff;color:#0B1E3D}
.top{position:sticky;top:0;z-index:40;background:var(--navy);color:var(--on-navy);border-bottom:1px solid rgba(255,255,255,.08)}
.top-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top .lockup{display:inline-flex;align-items:center;flex-shrink:0}.top .lockup img{height:26px;width:auto;display:block}
.top .sep{width:1px;height:22px;background:currentColor;opacity:.3}
.top .pt{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.01em}.top .pt small{font-family:var(--body);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-right:10px}
.top .spacer{flex:1}.top .aud{font-size:.78rem;color:var(--on-navy-muted);white-space:nowrap}
.shell{max-width:860px;margin:0 auto;padding:22px 20px 80px;display:grid;gap:16px}
.hero{background:var(--navy);color:var(--on-navy);border-radius:24px;padding:clamp(28px,5vw,52px) clamp(22px,5vw,56px);position:relative;overflow:hidden;box-shadow:0 18px 40px -24px rgba(11,30,61,.35)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 85% 90%,rgba(242,200,77,.14),transparent 60%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:10px}
.hero .eyebrow{color:var(--gold)}.hero .eyebrow .num{background:var(--gold);color:var(--gold-ink);border-radius:6px;padding:3px 8px;letter-spacing:.08em}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.08;margin:16px 0 14px;color:#fff}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:#DCE6F2;margin:0;max-width:60ch;line-height:1.55}.hero .lede b{color:#fff;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.tags span{font-size:.78rem;font-weight:600;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 11px;color:#DCE6F2}
.beat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3.5vw,30px)}
.beat h2{font-family:var(--display);font-weight:500;font-size:1.45rem;letter-spacing:.005em;margin-top:6px}
.beat h2.mt{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.beat p{margin:12px 0 0;max-width:66ch}.beat p:first-of-type{margin-top:12px}.beat b{color:var(--ink);font-weight:600}
.beat.paper{background:var(--paper)}
.rule{border-left:3px solid var(--gold);padding:4px 0 4px 16px;margin-top:16px;font-family:var(--display);font-weight:500;font-size:1.12rem;color:var(--ink);line-height:1.35}
.scenes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.scenes li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--ground);border-radius:12px;padding:12px 14px}
.scenes li i{font-style:normal;font-family:var(--display);font-weight:600;color:var(--muted);font-size:.85rem;padding-top:2px;letter-spacing:.06em}
.steps{counter-reset:s;list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.steps li{position:relative;padding-left:40px}.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--display);font-weight:600;color:var(--gold-ink);background:var(--gold);border-radius:8px;font-size:.8rem;padding:2px 7px}
.steps li b{display:block;color:var(--ink)}
.hint{font-size:.86rem;color:var(--muted);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font:inherit;font-size:.92rem;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s,color .15s}
.chip .st{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--ground);color:var(--muted);display:none}
.chip[data-state]:not([data-state=""]){background:var(--navy);color:#fff;border-color:var(--navy)}.chip[data-state]:not([data-state=""]) .st{display:inline;background:var(--gold);color:var(--gold-ink)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.sorter{display:grid;gap:10px;margin-top:14px}
.card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--ground);display:grid;gap:10px}
.card .q{color:var(--ink);font-weight:500}
.card .opts{display:flex;gap:8px;flex-wrap:wrap}
.card .opts button{font:inherit;font-size:.9rem;font-weight:600;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.card.right{border-color:var(--grass);background:var(--grass-soft)}.card.wrong{border-color:var(--amber);background:var(--amber-soft)}
.card .why{display:none;font-size:.92rem;color:var(--text)}.card.right .why,.card.wrong .why{display:block}
.card.right .opts button.pick{background:var(--grass);border-color:var(--grass);color:#fff}.card.wrong .opts button.pick{background:var(--amber);border-color:var(--amber);color:#fff}
.ladder{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ladder li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.ladder li span{color:var(--ink)}
.ladder button{font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 11px;cursor:pointer}
.ladder li.here{border-color:var(--navy)}.ladder li.here .b-here{background:var(--navy);border-color:var(--navy);color:#fff}
.ladder li.next{border-color:var(--gold);background:var(--gold-soft)}.ladder li.next .b-next{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.plan{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--paper);border:1px solid #F0E2C6;color:var(--ink);font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.45;min-height:56px}
.plan small{display:block;font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.groups{display:grid;gap:14px;margin-top:14px}.group .lbl{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.group .chips{margin-top:8px}
label.field{display:block;margin-top:14px}label.field span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
textarea,input[type=text]{font:inherit;font-size:1rem;width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--surface);color:var(--ink);line-height:1.5;resize:vertical;min-height:88px}
input[type=text]{min-height:0}
textarea:focus,input:focus{outline:2px solid var(--navy);outline-offset:2px}
.saved{font-size:.8rem;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.saved button{font:inherit;font-size:.8rem;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
.end{background:var(--navy);color:#DCE6F2;border-color:var(--navy)}.end h2{color:#fff}.end p{color:#DCE6F2}.end .eyebrow{color:var(--gold)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{font:inherit;font-size:.95rem;font-weight:600;text-decoration:none;border-radius:999px;padding:12px 20px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:var(--gold);color:var(--gold-ink)}.btn.line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.beat:not(.end) .btn.line{border-color:var(--line-strong);color:var(--ink)}
.foot{max-width:860px;margin:0 auto;padding:0 20px 60px;font-size:.84rem;color:var(--muted);line-height:1.55}.foot p{max-width:70ch;margin:0}
@media (max-width:640px){.fm-tag{display:none}.fm-cta .long{display:none}.fm-in{flex-wrap:nowrap;justify-content:space-between}.top .aud{display:none}.top-in{flex-wrap:nowrap}.top .pt{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ladder li{grid-template-columns:1fr;gap:6px}.ladder li div{display:flex;gap:6px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}