
@font-face{font-family:Nunito;src:url(/fonts/nunito-v1.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--paper:#FBF8F1;--card:#FFFFFF;--ink:#16212E;--heading:#0B2545;--muted:#5E6875;--line:#E7DFCF;
--line-soft:#F0EADD;--primary:#0B2545;--on-primary:#FFFFFF;--link:#137F7A;--teal:#1FA7A0;--foam:#E8F7F5;--sun:#FFC145;
--sun-soft:#FFF4E0;--pill-bg:#FFE9B8;--pill-ink:#7A4A00;--turn:#C2412D;--danger:#A3321F;--danger-line:#E9B4A9;
--code-bg:#0B2545;--code-ink:#FFFFFF;--font:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--paper:#101826;--card:#172233;--ink:#ECEFF3;--heading:#F4F1EA;--muted:#A7B1BE;
--line:#2A3A52;--line-soft:#22314A;--primary:#FFC145;--on-primary:#0B2545;--link:#6FD3C9;--foam:#163B3E;--sun-soft:#3A3018;
--pill-bg:#4A3A12;--pill-ink:#FFE2A0;--turn:#FF8A73;--danger:#FF8A80;--danger-line:#6B2A22;--code-bg:#0A111C}}
@media (prefers-color-scheme:dark){.brand .front{fill:#F4F1EA}.brand .play{fill:#0B2545}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.55 var(--font);color:var(--ink);background:var(--paper)}
a{color:var(--link)}a:hover{color:var(--heading)}
h1,h2,h3{color:var(--heading);text-wrap:balance;overflow-wrap:anywhere;margin:0}
h1{font-size:2.35rem;line-height:1.1;font-weight:800}
h2{font-size:1.5rem;line-height:1.2;font-weight:800}
h3{font-size:1.15rem;font-weight:800}
h4{margin:0;font-size:1rem}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bar{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
header.site{border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--heading)}
.brand svg{width:36px;height:30px;flex:none}
.wm{font-weight:800;font-size:1.25rem;letter-spacing:-.01em;white-space:nowrap}
.wm b{display:inline-block;width:1.3em;height:1.3em;line-height:1.3em;text-align:center;border-radius:50%;background:var(--sun);color:#0B2545;margin:0 2px}
header nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-left:auto;font-weight:700}
header nav a{color:var(--muted);text-decoration:none;padding-bottom:2px;border-bottom:3px solid transparent}
header nav a:hover{color:var(--heading)}
header nav a[aria-current=page]{color:var(--heading);border-bottom-color:var(--sun)}
header nav a.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--primary);color:var(--on-primary)}
footer.site{margin-top:48px;border-top:1px solid var(--line)}
footer.site .bar{font-size:.9rem;color:var(--muted);gap:8px 24px;padding-bottom:40px}
footer.site .bar a.ai{display:inline-flex;align-items:center;gap:6px}footer.site .bar a.ai svg{width:1em;height:1em;fill:currentColor}
main.page{max-width:1120px;margin:0 auto;padding:28px 24px 24px;display:flex;flex-direction:column;gap:24px}
main.page.narrow{max-width:760px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.between{justify-content:space-between}
.grow{flex:999 1 420px;min-width:0}
.split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.split>.main{flex:999 1 520px;min-width:0}
.split>.side{flex:1 1 280px;min-width:0}
.title{display:flex;flex-direction:column;gap:4px}
.back{font-size:.9rem;font-weight:700;text-decoration:none}
.meta,.muted{color:var(--muted)}
.small{font-size:.9rem}
.step-time{margin:0 0 6px}
.label{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.label.you{color:var(--turn)}.label.making{color:var(--link)}
.turn-note{font-weight:800;color:var(--turn)}
span.turn-note{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 3px 0 var(--line);padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0;overflow-wrap:anywhere}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.notice{background:var(--foam);border-radius:12px;padding:14px 16px}
.notice.sun{background:var(--sun-soft);border:2px solid var(--sun)}
.warn,.error{color:var(--danger);font-weight:700}
.ok{color:var(--link);font-weight:700}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;min-height:48px;padding:0 20px;border-radius:12px;border:2px solid var(--primary);background:var(--card);color:var(--heading);cursor:pointer;text-decoration:none}
button.primary,.button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);min-height:52px;font-size:1.05rem}
button.danger,.button.danger{border-color:var(--danger-line);color:var(--danger)}
button.danger.solid{background:var(--danger);border-color:var(--danger);color:var(--paper)}
.button.gallery{border-color:var(--teal);background:var(--foam);color:var(--link)}
details.gallery-add>summary{list-style:none}details.gallery-add>summary::-webkit-details-marker{display:none}
details.gallery-add[open]{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
details.gallery-add[open]>form{align-self:stretch}
button.link{min-height:44px;padding:0 8px;border:0;background:none;color:var(--link)}
button:disabled{opacity:.6;cursor:wait}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--heading)}
.hint{font-weight:600;font-size:.9rem;color:var(--muted)}
input,textarea{font:inherit;font-weight:400;width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
textarea{resize:vertical}
input[type=radio],input[type=checkbox]{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--heading)}
input[type=file]{border:0;padding:0}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px;min-width:0}
legend{padding:0 0 10px;font-weight:800;font-size:1.1rem;color:var(--heading)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
label.choice{flex:1 1 240px;flex-direction:row;align-items:flex-start;gap:10px;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-weight:400;cursor:pointer}
label.choice:has(input:checked){border-color:var(--heading);background:var(--sun-soft)}
label.choice strong{color:var(--heading)}
fieldset.choices label.choice{flex:none}
.detail{display:block;font-size:.9rem;font-weight:400;color:var(--muted)}
label.check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;color:var(--ink)}
.tag{display:inline-block;margin-left:6px;font-size:.78rem;font-weight:800;padding:1px 8px;border-radius:99px;background:var(--foam);color:var(--link);vertical-align:middle}
fieldset.issue{padding:16px;border:2px dashed var(--sun);border-radius:14px;background:var(--sun-soft)}
fieldset.issue legend{padding:0 8px}
input.own{max-width:520px}
.steps-line{overflow-x:auto;position:relative}
.steps-line ol{list-style:none;margin:0;padding:4px 0;display:flex;min-width:560px}
.steps-line li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.95rem;font-weight:700;color:var(--muted);text-align:center}
.steps-line .dot{width:22px;height:22px;border-radius:50%;border:3px dashed var(--line)}
.steps-line .done{color:var(--link)}
.steps-line .done .dot{border:0;background:var(--link)}
.steps-line .done .dot::after{content:"✓";display:block;color:var(--card);font-size:13px;font-weight:800;line-height:22px}
.steps-line .now{color:var(--turn)}
.steps-line .now .dot{border:3px solid var(--turn);background:var(--sun)}
.pill{display:inline-flex;align-self:flex-start;font-size:.85rem;font-weight:800;padding:2px 10px;border-radius:99px;background:var(--pill-bg);color:var(--pill-ink)}
.pill.making{background:var(--foam);color:var(--link)}
.project-cards{display:flex;flex-wrap:wrap;gap:16px}
a.project-card{flex:1 1 360px;min-width:0;display:flex;gap:16px;align-items:center;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 3px 0 var(--line);text-decoration:none;color:var(--ink)}
a.project-card:hover{border-color:var(--heading)}
.project-card .body{min-width:0;display:flex;flex-direction:column;gap:4px}
.project-card .name{font-weight:800;font-size:1.15rem;color:var(--heading);overflow-wrap:anywhere}
.project-card .go{font-size:.9rem;font-weight:800;color:var(--link)}
.thumb{flex:none;width:112px;aspect-ratio:16/9;border-radius:8px;object-fit:cover;display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#FFFFFF}
.tint-0{background:#0F4C75}.tint-1{background:#137F7A}.tint-2{background:#1E5B3A}.tint-3{background:#7A4A00}.tint-4{background:#5B3A8C}.tint-5{background:#A3321F}
.rows{background:var(--card);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column}
.rows>.item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:16px 20px;border-top:1px solid var(--line-soft)}
.rows>.item:first-child{border-top:0}
.rows .name{flex:1 1 220px;min-width:0;font-weight:800;color:var(--heading);overflow-wrap:anywhere}
.rows .name .meta{display:block;font-weight:600;font-size:.9rem}
.rows .what{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
progress{display:block;width:100%;height:12px;border:0;border-radius:99px;background:var(--foam);overflow:hidden;appearance:none;-webkit-appearance:none}
progress::-webkit-progress-bar{background:var(--foam);border-radius:99px}
progress::-webkit-progress-value{background:var(--teal);border-radius:99px}
progress::-moz-progress-bar{background:var(--teal);border-radius:99px}
.card.working h2{display:flex;align-items:center;gap:12px}
.card.working h2::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--teal);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.busy-bar{height:12px;border-radius:99px;background:var(--foam);overflow:hidden;position:relative}
.busy-bar::after{content:"";position:absolute;top:0;bottom:0;width:30%;border-radius:99px;background:var(--teal);animation:slide 1.8s ease-in-out infinite}
@keyframes slide{0%{left:-30%}100%{left:100%}}
.notes{border-top:1px solid var(--line-soft);padding-top:12px}
.notes ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.new-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:99px;background:var(--primary);color:var(--on-primary);font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:10}
.new-bar button{padding:6px 14px;border-radius:99px;white-space:nowrap}
.empty{flex-direction:row;flex-wrap:wrap;gap:32px;align-items:center}
.empty svg,.art{flex:none;width:220px;max-width:100%;height:auto}
.art.small{width:56px}
ol.numbered{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:n}
ol.numbered>li{display:flex;gap:14px;align-items:flex-start;counter-increment:n}
ol.numbered>li::before{content:counter(n);flex:none;width:34px;height:34px;border-radius:50%;background:var(--sun);color:#0B2545;font-weight:800;text-align:center;line-height:34px}
ol.numbered>li.done::before{content:"✓";background:var(--link);color:var(--card)}
ol.numbered>li>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
ol.numbered.ruled>li{padding:14px 0;border-top:1px solid var(--line-soft)}
ol.numbered.ruled>li:first-child{border-top:0}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 20px;border:3px dashed var(--teal);border-radius:16px;background:var(--card);text-align:center;font-weight:600;color:var(--muted);cursor:pointer}
.drop.small{padding:14px 16px;border-width:2px;border-color:var(--line);flex-direction:row;text-align:left}
.drop.over{background:var(--foam)}
.drop strong{font-size:1.15rem;color:var(--heading)}
.drop .pick{color:var(--link);font-weight:800;text-decoration:underline}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.file-row .what{flex:1;min-width:0;display:flex;flex-direction:column}
.aside{background:var(--foam);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px}
.cost{border:2px solid var(--heading);border-radius:16px;background:var(--card);padding:24px;display:flex;flex-direction:column;gap:14px}
.cost .total{font-size:2.6rem;font-weight:800;line-height:1;color:var(--heading);font-variant-numeric:tabular-nums}
.cost dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:.95rem;font-variant-numeric:tabular-nums}
.cost dd{margin:0;text-align:right}
.video video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
img{max-width:100%;height:auto}
.downloads{display:flex;flex-direction:column;gap:6px;font-weight:700;border-top:1px solid var(--line);padding-top:14px}
pre.code{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:.9rem/1.5 var(--mono);background:var(--code-bg);color:var(--code-ink);padding:12px 14px;border-radius:10px}
code{font-family:var(--mono);font-size:.9em;background:var(--foam);padding:1px 6px;border-radius:4px}
pre.code code{background:none;padding:0;color:inherit}
input.code-box{width:220px;max-width:100%;font:1.9rem var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;border:3px solid var(--heading);background:var(--sun-soft);color:var(--heading)}
.danger-zone{border:2px solid var(--danger-line);border-radius:16px;background:var(--card);padding:24px;display:flex;flex-direction:column;gap:12px}
.danger-zone h2{color:var(--danger)}
details{min-width:0}
summary{cursor:pointer;font-weight:800;color:var(--link);min-height:44px;display:flex;align-items:center;gap:8px}
details.past{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 16px}
details.past[open]{padding-bottom:16px}
details.past summary{color:var(--heading)}
details.add-device{gap:0}
details.rename[open]{flex-basis:100%}
details.add-device[open]{gap:16px}
details.add-device>summary{list-style:none;color:var(--heading)}
details.add-device>summary::-webkit-details-marker{display:none}
details.add-device>summary::after{content:"Show steps";margin-left:auto;color:var(--link);font-weight:800}
details.add-device[open]>summary::after{content:"Hide steps"}
.past-list{display:flex;flex-direction:column;gap:10px}
ol.answers{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:12px}
.said{display:block;width:fit-content;max-width:100%;margin-top:4px;padding:4px 12px;border-left:4px solid var(--sun);border-radius:0 8px 8px 0;background:var(--sun-soft);color:var(--pill-ink);font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-style:italic;white-space:pre-wrap}
.said+.tag{margin:6px 0 0}
.reply{display:flex;flex-direction:column;gap:4px}
.reply-label{font-weight:800;color:var(--heading)}
ol.chapter-picker{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chapter-picker a{display:flex;flex-direction:column;min-width:0;max-width:260px;padding:8px 14px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--heading);text-decoration:none;overflow-wrap:anywhere}
.chapter-picker a:hover{border-color:var(--heading)}
.chapter-picker a[aria-current]{border-color:var(--heading);background:var(--sun-soft)}
pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:.85rem/1.5 var(--mono);background:var(--paper);padding:10px;border-radius:8px}
.scroll{overflow-x:auto}
.scroll.always{overflow-x:scroll;padding-bottom:2px}
.scroll.always::-webkit-scrollbar{height:10px;-webkit-appearance:none}
.scroll.always::-webkit-scrollbar-track{background:var(--line-soft);border-radius:5px}
.scroll.always::-webkit-scrollbar-thumb{background:var(--muted);border-radius:5px}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line-soft);overflow-wrap:anywhere}
th{color:var(--heading)}
ul{margin:0;padding-left:22px}
ul.list{display:flex;flex-direction:column;gap:8px}
form.inline{display:inline}
.intro{max-width:68ch}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:12px}
.prose h2{margin-top:16px}
.plan-text{display:flex;flex-direction:column;gap:10px}
p[data-msg]{font-weight:700}
.skip{position:absolute;left:8px;top:-60px;z-index:10;padding:8px 14px;border-radius:8px;background:var(--card);color:var(--heading);font-weight:700}
.skip:focus{top:8px}
main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.landing{display:flex;flex-direction:column;gap:48px;min-width:0}
.landing section{min-width:0}
.landing .hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0 0;text-align:center}
.landing h1{font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.02em}
.landing .lead{font-size:1.2rem;max-width:620px;color:var(--muted)}
.landing .hero .actions{justify-content:center}
.landing h2{font-size:2.2rem}
.landing .label{margin:0 0 12px}
.landing .pairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:36px 16px}
@media (min-width:520px){.landing .pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.landing .show>.label,.landing .show>.arrow{display:none}
.landing .pair-arrow{margin:12px 0;text-align:center;font-weight:800;font-size:.9rem;color:var(--link)}
.landing .pair-arrow span{display:block;font-size:1.3rem;line-height:1}
@media (min-width:900px){.landing .show{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
.landing .show>.label,.landing .show>.arrow{display:block;grid-column:1/-1}
.landing .show>.l-slides{grid-row:1}.landing .show>.arrow{grid-row:3}.landing .show>.l-video{grid-row:4}
.landing .pairs,.landing .pair{display:contents}
.landing .pair .slide{grid-row:2}
.landing .pair .video{grid-row:5}
.landing .pair-arrow{display:none}}
.landing .cap{margin-top:8px;font-size:.9rem;color:var(--muted);text-align:center}
.landing .cap strong{color:var(--ink)}
.landing .arrow{margin:28px 0 20px;text-align:center;font-weight:800;color:var(--link)}
.landing .arrow span{display:block;font-size:1.75rem;line-height:1}
.landing .frame{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#FFFFFF;color:#16212E;
border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 0 var(--line-soft);line-height:1.25}
.landing .frame p{margin:0}
.landing .st{position:absolute;inset:0;padding:7% 8%;display:flex;flex-direction:column}
.landing .frame .t{margin:0 0 5%;font-size:6.5cqw;font-weight:800;color:#0B2545}
.landing .cols{flex:1;position:relative;display:flex;align-items:flex-end;gap:9%;padding:0 4%;border-bottom:2px solid #E7DFCF}
.landing .cols>span{flex:1;position:relative;background:#C9D3DE;border-radius:3px 3px 0 0}
.landing .c1{height:35%;--to:1200}.landing .c2{height:52%;--to:1800}.landing .c3{height:64%;--to:2200}.landing .c4{height:88%;--to:3000}
.landing .chart.alive{background:radial-gradient(120% 90% at 85% 0%,#1E5A7A 0%,#0B2545 55%,#071729 100%)}
.landing .chart.alive::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:100% 18%}
.landing .chart.alive .st{padding-bottom:14%}
.landing .chart.alive .t{color:#FFFFFF}
.landing .chart.alive .cols{border-color:rgba(255,255,255,.25)}
.landing .chart.alive .cols>span{background:linear-gradient(#5EE6DC,#1FA7A0);box-shadow:0 0 12px rgba(94,230,220,.35);transform-origin:bottom;animation:s2vRise 3s cubic-bezier(.34,1.56,.64,1) infinite both}
.landing .chart.alive .cols>.c4{background:linear-gradient(#FFE08A,#FFB020);box-shadow:0 0 18px rgba(255,193,69,.6)}
@property --s2v-n{syntax:"<integer>";inherits:false;initial-value:0}
.landing .cols em{position:absolute;top:-1.6em;left:-20%;right:-20%;text-align:center;font-style:normal;font-size:4.2cqw;font-weight:900;color:#FFFFFF;counter-reset:s2v var(--s2v-n);animation:s2vCount 3s ease-out infinite both}
.landing .cols em::after{content:counter(s2v)}
.landing .cols .c4 em{color:#FFE08A}
.landing .chart.alive .cols>.c2,.landing .cols .c2 em{animation-delay:.12s}
.landing .chart.alive .cols>.c3,.landing .cols .c3 em{animation-delay:.24s}
.landing .chart.alive .cols>.c4,.landing .cols .c4 em{animation-delay:.36s}
@keyframes s2vRise{0%{transform:scaleY(0)}28%,88%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes s2vCount{0%{--s2v-n:0;opacity:0}14%{opacity:0}20%{opacity:1}35%,88%{--s2v-n:var(--to);opacity:1}100%{--s2v-n:var(--to);opacity:0}}
.landing .trend{position:absolute;left:4%;top:0;width:92%;height:100%;overflow:visible;pointer-events:none}
.landing .trend path{fill:none;stroke:#FFFFFF;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;vector-effect:non-scaling-stroke;animation:s2vDraw 3s ease-in-out infinite}
@keyframes s2vDraw{0%,30%{stroke-dashoffset:120}60%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.landing .gain{position:absolute;right:6%;top:6%;padding:1% 4%;border-radius:20px;background:#FFC145;color:#0B2545;font-weight:900;font-size:4.6cqw;transform:scale(0);animation:s2vPop 3s infinite}
@keyframes s2vPop{0%,55%{transform:scale(0) rotate(-10deg)}63%{transform:scale(1.25) rotate(4deg)}70%,88%{transform:scale(1) rotate(0)}100%{transform:scale(0)}}
.landing .spark{position:absolute;right:12%;top:30%;width:2.2%;aspect-ratio:1;border-radius:50%;background:#FFE08A;opacity:0;animation:s2vBurst 3s infinite}
.landing .spark.p2{--dx:-9cqw;--dy:-6cqw}.landing .spark.p3{--dx:7cqw;--dy:-8cqw}.landing .spark.p4{--dx:9cqw;--dy:2cqw}.landing .spark.p5{--dx:-6cqw;--dy:5cqw;background:#5EE6DC}
@keyframes s2vBurst{0%,58%{opacity:0;transform:none}62%{opacity:1}80%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.4)}100%{opacity:0}}
.landing .cc{position:absolute;left:8%;right:8%;bottom:4%;padding:1.2% 3%;border-radius:5px;background:rgba(0,0,0,.45);color:#FFFFFF;font-size:3.4cqw;text-align:center}
.landing .quiz .st{padding:5% 7% 8%}
.landing .quiz .t{margin-bottom:2%;font-size:5.6cqw}
.landing .q{margin-bottom:3%;font-size:4.4cqw;font-weight:800;color:#16212E}
.landing .opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.6cqw}
.landing .opts li{display:flex;align-items:center;gap:3%;font-size:3.8cqw}
.landing .quiz:not(.alive) .opts li::before{content:"•"}
.landing .quiz.alive{background:linear-gradient(135deg,#3B2A8F 0%,#6A3FC1 60%,#A04FC9 100%)}
.landing .quiz.alive .t,.landing .quiz.alive .q{color:#FFFFFF}
.landing .quiz.alive .opts li{padding:1.1cqw 3cqw;border-radius:7px;box-shadow:0 3px 0 rgba(0,0,0,.25);color:#FFFFFF;font-weight:800;opacity:0;animation:s2vOptIn 12s infinite}
.landing .quiz.alive .opts b{flex:none;display:inline-grid;place-items:center;width:5.6cqw;height:5.6cqw;border-radius:50%;background:rgba(255,255,255,.25);font-size:3.4cqw}
.landing .quiz.alive .opts span{flex:1}
.landing .quiz.alive .opts .oa{background:#E85D4A}
.landing .quiz.alive .opts .ob{background:#1FA7A0;animation-delay:.2s}
.landing .quiz.alive .opts .oc{background:#F2A516;animation-delay:.4s}
@keyframes s2vOptIn{0%{opacity:0;transform:translateX(-12px)}4%,96%{opacity:1;transform:none}100%{opacity:0}}
.landing .quiz.alive .t{font-size:4.8cqw}
.landing .quiz.alive .tag{position:absolute;right:3%;top:5.5%;padding:.4cqw 2cqw;border-radius:20px;background:#FFFFFF;color:#3B2A8F;font-style:normal;font-weight:800;font-size:2.6cqw;line-height:1.4;opacity:0;animation:s2vTagIn 12s infinite}
@keyframes s2vTagIn{0%,32%{opacity:0;transform:translateY(6px)}36%,100%{opacity:1;transform:none}}
.landing .quiz.alive .extra{position:absolute;left:4%;right:4%;top:34%;bottom:0;border-radius:10px 10px 0 0;background:#0B2545;box-shadow:0 -6px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(105%);animation:s2vExtraIn 12s infinite}
.landing .quiz.alive .extra .st{padding:2.4% 6% 2%}
.landing .quiz.alive .extra .badge{display:inline-block;align-self:flex-start;padding:.5cqw 2.4cqw;border-radius:20px;background:#FFC145;color:#0B2545;font-weight:900;font-size:2.6cqw;line-height:1.4;margin-bottom:1.2%}
.landing .quiz.alive .extra .q{font-size:3.6cqw;margin-bottom:1.4%}
.landing .quiz.alive .extra .opts{gap:.9cqw}.landing .quiz.alive .extra .opts li{padding:.55cqw 2.4cqw;font-size:3.1cqw}
@keyframes s2vExtraIn{0%,48%{opacity:0;transform:translateY(105%)}54%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(105%)}}
.landing .ring{position:absolute;right:5%;top:6%;width:13cqw;height:13cqw;animation:s2vRingIn 12s infinite}
.landing .ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.landing .ring circle{fill:none;stroke-width:4}
.landing .ring .rbg{stroke:rgba(255,255,255,.2)}
.landing .ring .rfg{stroke:#FFC145;stroke-linecap:round;stroke-dasharray:100;animation:s2vCountdown 12s linear infinite}
.landing .ring .n{position:absolute;inset:0;display:grid;place-items:center;color:#FFFFFF;font-weight:900;font-size:6.5cqw}
.landing .ring .n span{grid-area:1/1;opacity:0}
.landing .ring .n span:nth-child(1){animation:s2vN1 12s infinite}.landing .ring .n span:nth-child(2){animation:s2vN2 12s infinite}.landing .ring .n span:nth-child(3){animation:s2vN3 12s infinite}
.landing .quiz.alive .extra .ring,.landing .quiz.alive .extra .ring *{animation-delay:-6s}
@keyframes s2vCountdown{0%,6%{stroke-dashoffset:0}31%,100%{stroke-dashoffset:100}}
@keyframes s2vRingIn{0%,4%{opacity:0;transform:scale(.6)}6%,31%{opacity:1;transform:scale(1)}33%,100%{opacity:0;transform:scale(1.3)}}
@keyframes s2vN1{0%,6%{opacity:0}6.5%,14%{opacity:1}14.5%,100%{opacity:0}}
@keyframes s2vN2{0%,14.5%{opacity:0}15%,22.5%{opacity:1}23%,100%{opacity:0}}
@keyframes s2vN3{0%,23%{opacity:0}23.5%,30.5%{opacity:1}31%,100%{opacity:0}}
.landing .sea{position:absolute;inset:0;background:linear-gradient(#9FD8F0 0%,#CFEFF7 48%,#2E9CC0 49%,#126E95 100%)}
.landing .photo:not(.alive) .sea{filter:saturate(.85)}
.landing .dol{position:absolute;left:22%;top:20%;width:30%;fill:#38586E;transform:rotate(-18deg)}
.landing .dol.d2{left:54%;top:30%;width:24%;fill:#4A6C82;transform:rotate(-8deg)}
.landing .photo.alive .dol{z-index:1;transform-origin:50% 50%;animation:s2vJump1 3.6s linear infinite}
.landing .photo.alive .dol.d2{animation:s2vJump2 3.6s linear 1s infinite}
@keyframes s2vJump1{0%{left:2%;top:62%;transform:rotate(-50deg)}12%{left:10%;top:30%;transform:rotate(-32deg)}25%{left:20%;top:14%;transform:rotate(-8deg)}38%{left:31%;top:22%;transform:rotate(22deg)}50%{left:40%;top:50%;transform:rotate(48deg)}51%,100%{left:40%;top:70%;transform:rotate(48deg)}}
@keyframes s2vJump2{0%{left:44%;top:62%;transform:rotate(-50deg)}12%{left:52%;top:34%;transform:rotate(-30deg)}25%{left:61%;top:20%;transform:rotate(-6deg)}38%{left:71%;top:28%;transform:rotate(24deg)}50%{left:79%;top:52%;transform:rotate(48deg)}51%,100%{left:79%;top:70%;transform:rotate(48deg)}}
.landing .water{position:absolute;left:0;right:0;top:49%;bottom:0;z-index:2;background:linear-gradient(#2E9CC0,#126E95)}
.landing .wv{position:absolute;left:-50%;right:-50%;z-index:3;animation:s2vDrift 2.5s linear infinite}
.landing .wv.w1{top:45%;height:5%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6 V12 H0Z' fill='%232E9CC0'/%3E%3C/svg%3E") 0 100%/20px 100% repeat-x}
.landing .wv.w2,.landing .wv.w3{height:6%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12'%3E%3Cpath d='M0 6 Q15 1 30 6 T60 6' fill='none' stroke='white' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/40px 100% repeat-x}
.landing .wv.w2{top:60%;animation-duration:4s}
.landing .wv.w3{top:76%;background-size:56px 100%;animation-duration:5s;animation-direction:reverse}
@keyframes s2vDrift{to{transform:translateX(40px)}}
.landing .splash{position:absolute;z-index:4;top:45%;width:12%;height:6%;border:2px solid rgba(255,255,255,.9);border-radius:50%;opacity:0;animation:s2vSplash 3.6s infinite}
.landing .splash.sp1{left:4%}.landing .splash.sp2{left:40%;animation-delay:1.8s}.landing .splash.sp3{left:46%;animation-delay:1s}.landing .splash.sp4{left:82%;animation-delay:2.8s}
@keyframes s2vSplash{0%{opacity:0;transform:scale(.3)}4%{opacity:1}30%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
.landing .ptitle{position:absolute;z-index:5;left:6%;bottom:8%;padding:1.6% 4%;border-radius:6px;background:rgba(255,255,255,.92);color:#0B2545;font-weight:800;font-size:4.4cqw}
.landing .flow{flex:1;display:flex;align-items:center;justify-content:space-between;gap:2%}
.landing .step{flex:1;padding:9% 2% 7%;border:2px solid #C9D3DE;border-radius:10px;background:#FFFFFF;color:#0B2545;text-align:center;font-size:4cqw;font-weight:800}
.landing .step .ic{display:block;margin-bottom:6%;font-size:8cqw;line-height:1;filter:grayscale(1);opacity:.6}
.landing .ar{flex:none;position:relative;width:8%;height:2px;background:#C9D3DE}
.landing .ar::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:#C9D3DE;border-right:0}
.landing .diagram.alive{background:linear-gradient(160deg,#FFF4E0 0%,#E8F7F5 100%)}
.landing .diagram.alive .step{border-color:transparent;box-shadow:0 4px 14px rgba(11,37,69,.12)}
.landing .diagram.alive .ic{filter:none;opacity:1}
.landing .diagram.alive .k1{animation:s2vStep1 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
.landing .diagram.alive .k2{animation:s2vStep2 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
.landing .diagram.alive .k3{animation:s2vStep3 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes s2vStep1{0%{transform:scale(0);opacity:1}8%,90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes s2vStep2{0%,18%{transform:scale(0);opacity:1}26%,90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes s2vStep3{0%,36%{transform:scale(0);opacity:1;background:#FFFFFF}44%,52%{transform:scale(1);opacity:1;background:#FFFFFF}56%{transform:scale(1.12);background:#FFC145}60%,90%{transform:scale(1);opacity:1;background:#FFC145}100%{transform:scale(1);opacity:0;background:#FFC145}}
.landing .diagram.alive .ar{background:transparent}
.landing .diagram.alive .ar::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:#1FA7A0;transform-origin:left;transform:scaleX(0);animation:s2vArrow1 4.5s infinite}
.landing .diagram.alive .ar::after{border-left-color:#1FA7A0;opacity:0;animation:s2vHead1 4.5s infinite}
.landing .diagram.alive .a2::before{animation-name:s2vArrow2}.landing .diagram.alive .a2::after{animation-name:s2vHead2}
@keyframes s2vArrow1{0%,9%{transform:scaleX(0);opacity:1}16%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes s2vHead1{0%,15%{opacity:0}16%,90%{opacity:1}100%{opacity:0}}
@keyframes s2vArrow2{0%,27%{transform:scaleX(0);opacity:1}34%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes s2vHead2{0%,33%{opacity:0}34%,90%{opacity:1}100%{opacity:0}}
.landing .made-for{display:flex;flex-direction:column;align-items:center;text-align:center}
.landing .made-for .lead{margin-bottom:16px}
.landing .kinds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.landing .kind{display:flex;flex-direction:column;max-width:100%;padding:12px 18px;border:1px solid var(--line);border-radius:8px;background:var(--card);text-align:left}
@media (max-width:519px){.landing .kind{flex:1 1 100%}}
.landing .kind strong{color:var(--heading);font-size:1.05rem}
.landing .kind span{color:var(--muted);font-size:.9rem}
.landing .how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;counter-reset:n}
.landing .how li{counter-increment:n;display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.landing .how li::before{content:counter(n);width:36px;height:36px;border-radius:50%;background:var(--sun);color:#0B2545;font-weight:800;text-align:center;line-height:36px}
.landing .how strong{color:var(--heading)}.landing .how span{font-size:.95rem}
.landing .example{margin-top:16px}
.trip-panel{background:#FFFFFF;color:#16212E;border:1px solid #E7DFCF;border-radius:20px;box-shadow:0 3px 0 #E7DFCF;padding:24px 16px 8px}
.trip{display:block;width:100%;height:auto;font-family:var(--font)}
.trip .lane{stroke:#CFC5B0;stroke-width:3;stroke-dasharray:8 8}
.trip .screen{fill:#FBF8F1;stroke:#0B2545;stroke-width:4}
.trip .navy{fill:#0B2545}.trip .teal{fill:#1FA7A0}.trip .sun{fill:#FFC145}.trip .white{fill:#FFFFFF}.trip .vid{fill:#0F4C75}
.trip .cloud{fill:#E8F7F5}.trip .track{fill:#16355C}.trip .fill{fill:#1FA7A0}
.trip .arrow{fill:none;stroke:#137F7A;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.trip .rule{stroke:#CFC5B0;stroke-width:6;stroke-linecap:round}
.trip .spark-lines{stroke:#FFC145;stroke-width:6;stroke-linecap:round}
.trip .slide-card{fill:#FFFFFF;stroke:#0B2545;stroke-width:3}.trip .slide-lines{stroke:#C2412D;stroke-width:4;stroke-linecap:round}
.trip .vid-card{fill:#0F4C75;stroke:#FFFFFF;stroke-width:3}.trip .note-lines{stroke:#0B2545;stroke-width:4;stroke-linecap:round}
.trip .st{font-size:22px;font-weight:800;fill:#0B2545}.trip .sub{font-size:17px;fill:#5E6875}.trip .note-text{font-size:14px;font-weight:800;fill:#0B2545}
.trip .tk{opacity:0;animation-duration:14s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.trip .tk-slide{animation-name:s2vSlide}.trip .tk-video{animation-name:s2vVideo}.trip .tk-note{animation-name:s2vNote}
.trip .spark{animation:s2vWork 14s linear infinite}
.trip .fill{transform-box:fill-box;transform-origin:left center;animation:s2vFill 14s linear infinite}
.trip .rv{opacity:0;animation:s2vReview 14s linear infinite}
.trip .up{animation:s2vUpload 14s linear infinite}
@keyframes s2vSlide{0%{transform:translate(160px,128px);opacity:0}3%{opacity:1}14%{transform:translate(500px,128px)}17%{transform:translate(500px,128px)}28%{transform:translate(840px,128px);opacity:1}31%,100%{transform:translate(840px,128px);opacity:0}}
@keyframes s2vVideo{0%,44%{transform:translate(840px,128px);opacity:0}47%{opacity:1}56%{transform:translate(500px,128px)}59%{transform:translate(500px,128px)}68%{transform:translate(160px,128px);opacity:1}71%,100%{transform:translate(160px,128px);opacity:0}}
@keyframes s2vNote{0%,84%{transform:translate(160px,128px);opacity:0}86%{opacity:1}92%{transform:translate(500px,128px)}98%{transform:translate(840px,128px);opacity:1}100%{transform:translate(840px,128px);opacity:0}}
@keyframes s2vWork{0%,29%{opacity:.25}31%{opacity:1}34%{opacity:.45}37%{opacity:1}40%{opacity:.45}43%{opacity:1}46%,100%{opacity:.25}}
@keyframes s2vFill{0%,29%{transform:scaleX(0)}45%{transform:scaleX(1)}47%,100%{transform:scaleX(0)}}
@keyframes s2vReview{0%,70%{opacity:0}72%,88%{opacity:1}90%,100%{opacity:0}}
@keyframes s2vUpload{0%,70%{opacity:1}72%,88%{opacity:0}90%,100%{opacity:1}}
.trip-steps{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:.95rem;font-weight:700}
.trip-steps li{flex:1 1 170px;padding:8px 12px;border:2px solid #E7DFCF;border-radius:12px;background:#FFFFFF}
.trip-steps li{animation-duration:14s;animation-timing-function:step-end;animation-iteration-count:infinite}
.trip-steps .hi1{animation-name:s2vH1}.trip-steps .hi2{animation-name:s2vH2}.trip-steps .hi3{animation-name:s2vH3}.trip-steps .hi4{animation-name:s2vH4}.trip-steps .hi5{animation-name:s2vH5}
@keyframes s2vH1{0%{background:#FFF4E0;border-color:#FFC145}14%,100%{background:#FFFFFF;border-color:#E7DFCF}}
@keyframes s2vH2{0%{background:#FFFFFF;border-color:#E7DFCF}14%{background:#FFF4E0;border-color:#FFC145}46%,100%{background:#FFFFFF;border-color:#E7DFCF}}
@keyframes s2vH3{0%{background:#FFFFFF;border-color:#E7DFCF}46%{background:#FFF4E0;border-color:#FFC145}70%,100%{background:#FFFFFF;border-color:#E7DFCF}}
@keyframes s2vH4{0%{background:#FFFFFF;border-color:#E7DFCF}70%{background:#FFF4E0;border-color:#FFC145}86%,100%{background:#FFFFFF;border-color:#E7DFCF}}
@keyframes s2vH5{0%{background:#FFFFFF;border-color:#E7DFCF}86%{background:#FFF4E0;border-color:#FFC145}100%{background:#FFFFFF;border-color:#E7DFCF}}
@media (prefers-reduced-motion:reduce){.trip .rv{opacity:1}.trip .up{opacity:0}}
.landing .schools-link{display:flex;flex-direction:column;gap:4px;max-width:560px;padding:14px 20px;border:2px solid var(--sun);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;text-decoration:none}
.landing .schools-link strong{color:var(--heading);font-size:1.1rem}
.landing .schools-link:hover strong,.landing .schools-link:focus-visible strong{text-decoration:underline}
.schools .how pre.code{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (prefers-reduced-motion: reduce){
.landing *,.landing *::before,.landing *::after{animation: none !important}
.landing .cols em{--s2v-n:var(--to)}
.landing .trend path{stroke-dashoffset:0}
.landing .gain{transform:none}
.landing .quiz.alive .opts li,.landing .quiz.alive .tag{opacity:1}
.landing .quiz.alive .extra{opacity:1;transform:none}
.landing .ring{display:none}
.landing .diagram.alive .k3{background:#FFC145}
.landing .diagram.alive .ar::before{transform:none}
.landing .diagram.alive .ar::after{opacity:1}
}
.from-to{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:start}
.from-to h4{margin:0;font-size:1.15rem;color:var(--heading)}
.sample-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);background:#0B2545}
.deck-tabs{display:flex;gap:6px}
.deck-tabs{flex-wrap:wrap;justify-content:center}
.deck-tabs label{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:2px solid var(--line);background:var(--card);cursor:pointer}
.deck-panel{display:none}
.deck>input:nth-of-type(1):checked~.deck-frame>.deck-panel:nth-child(1),
.deck>input:nth-of-type(2):checked~.deck-frame>.deck-panel:nth-child(2),
.deck>input:nth-of-type(3):checked~.deck-frame>.deck-panel:nth-child(3),
.deck>input:nth-of-type(4):checked~.deck-frame>.deck-panel:nth-child(4),
.deck>input:nth-of-type(5):checked~.deck-frame>.deck-panel:nth-child(5),
.deck>input:nth-of-type(6):checked~.deck-frame>.deck-panel:nth-child(6),
.deck>input:nth-of-type(7):checked~.deck-frame>.deck-panel:nth-child(7),
.deck>input:nth-of-type(8):checked~.deck-frame>.deck-panel:nth-child(8),
.deck>input:nth-of-type(9):checked~.deck-frame>.deck-panel:nth-child(9),
.deck>input:nth-of-type(10):checked~.deck-frame>.deck-panel:nth-child(10),
.deck>input:nth-of-type(11):checked~.deck-frame>.deck-panel:nth-child(11),
.deck>input:nth-of-type(12):checked~.deck-frame>.deck-panel:nth-child(12),
.deck>input:nth-of-type(13):checked~.deck-frame>.deck-panel:nth-child(13),
.deck>input:nth-of-type(14):checked~.deck-frame>.deck-panel:nth-child(14),
.deck>input:nth-of-type(15):checked~.deck-frame>.deck-panel:nth-child(15),
.deck>input:nth-of-type(16):checked~.deck-frame>.deck-panel:nth-child(16),
.deck>input:nth-of-type(17):checked~.deck-frame>.deck-panel:nth-child(17),
.deck>input:nth-of-type(18):checked~.deck-frame>.deck-panel:nth-child(18),
.deck>input:nth-of-type(19):checked~.deck-frame>.deck-panel:nth-child(19),
.deck>input:nth-of-type(20):checked~.deck-frame>.deck-panel:nth-child(20),
.deck>input:nth-of-type(21):checked~.deck-frame>.deck-panel:nth-child(21),
.deck>input:nth-of-type(22):checked~.deck-frame>.deck-panel:nth-child(22),
.deck>input:nth-of-type(23):checked~.deck-frame>.deck-panel:nth-child(23),
.deck>input:nth-of-type(24):checked~.deck-frame>.deck-panel:nth-child(24),
.deck>input:nth-of-type(25):checked~.deck-frame>.deck-panel:nth-child(25),
.deck>input:nth-of-type(26):checked~.deck-frame>.deck-panel:nth-child(26),
.deck>input:nth-of-type(27):checked~.deck-frame>.deck-panel:nth-child(27),
.deck>input:nth-of-type(28):checked~.deck-frame>.deck-panel:nth-child(28),
.deck>input:nth-of-type(29):checked~.deck-frame>.deck-panel:nth-child(29),
.deck>input:nth-of-type(30):checked~.deck-frame>.deck-panel:nth-child(30),
.deck>input:nth-of-type(31):checked~.deck-frame>.deck-panel:nth-child(31),
.deck>input:nth-of-type(32):checked~.deck-frame>.deck-panel:nth-child(32),
.deck>input:nth-of-type(33):checked~.deck-frame>.deck-panel:nth-child(33),
.deck>input:nth-of-type(34):checked~.deck-frame>.deck-panel:nth-child(34),
.deck>input:nth-of-type(35):checked~.deck-frame>.deck-panel:nth-child(35),
.deck>input:nth-of-type(36):checked~.deck-frame>.deck-panel:nth-child(36),
.deck>input:nth-of-type(37):checked~.deck-frame>.deck-panel:nth-child(37),
.deck>input:nth-of-type(38):checked~.deck-frame>.deck-panel:nth-child(38),
.deck>input:nth-of-type(39):checked~.deck-frame>.deck-panel:nth-child(39),
.deck>input:nth-of-type(40):checked~.deck-frame>.deck-panel:nth-child(40){display:block}
.deck-tabs .on{background:var(--sun);border-color:var(--sun);color:#0B2545}
.deck>input:nth-of-type(1):focus-visible~.deck-frame>.deck-panel:nth-child(1) .on,
.deck>input:nth-of-type(2):focus-visible~.deck-frame>.deck-panel:nth-child(2) .on,
.deck>input:nth-of-type(3):focus-visible~.deck-frame>.deck-panel:nth-child(3) .on,
.deck>input:nth-of-type(4):focus-visible~.deck-frame>.deck-panel:nth-child(4) .on,
.deck>input:nth-of-type(5):focus-visible~.deck-frame>.deck-panel:nth-child(5) .on,
.deck>input:nth-of-type(6):focus-visible~.deck-frame>.deck-panel:nth-child(6) .on,
.deck>input:nth-of-type(7):focus-visible~.deck-frame>.deck-panel:nth-child(7) .on,
.deck>input:nth-of-type(8):focus-visible~.deck-frame>.deck-panel:nth-child(8) .on,
.deck>input:nth-of-type(9):focus-visible~.deck-frame>.deck-panel:nth-child(9) .on,
.deck>input:nth-of-type(10):focus-visible~.deck-frame>.deck-panel:nth-child(10) .on,
.deck>input:nth-of-type(11):focus-visible~.deck-frame>.deck-panel:nth-child(11) .on,
.deck>input:nth-of-type(12):focus-visible~.deck-frame>.deck-panel:nth-child(12) .on,
.deck>input:nth-of-type(13):focus-visible~.deck-frame>.deck-panel:nth-child(13) .on,
.deck>input:nth-of-type(14):focus-visible~.deck-frame>.deck-panel:nth-child(14) .on,
.deck>input:nth-of-type(15):focus-visible~.deck-frame>.deck-panel:nth-child(15) .on,
.deck>input:nth-of-type(16):focus-visible~.deck-frame>.deck-panel:nth-child(16) .on,
.deck>input:nth-of-type(17):focus-visible~.deck-frame>.deck-panel:nth-child(17) .on,
.deck>input:nth-of-type(18):focus-visible~.deck-frame>.deck-panel:nth-child(18) .on,
.deck>input:nth-of-type(19):focus-visible~.deck-frame>.deck-panel:nth-child(19) .on,
.deck>input:nth-of-type(20):focus-visible~.deck-frame>.deck-panel:nth-child(20) .on,
.deck>input:nth-of-type(21):focus-visible~.deck-frame>.deck-panel:nth-child(21) .on,
.deck>input:nth-of-type(22):focus-visible~.deck-frame>.deck-panel:nth-child(22) .on,
.deck>input:nth-of-type(23):focus-visible~.deck-frame>.deck-panel:nth-child(23) .on,
.deck>input:nth-of-type(24):focus-visible~.deck-frame>.deck-panel:nth-child(24) .on,
.deck>input:nth-of-type(25):focus-visible~.deck-frame>.deck-panel:nth-child(25) .on,
.deck>input:nth-of-type(26):focus-visible~.deck-frame>.deck-panel:nth-child(26) .on,
.deck>input:nth-of-type(27):focus-visible~.deck-frame>.deck-panel:nth-child(27) .on,
.deck>input:nth-of-type(28):focus-visible~.deck-frame>.deck-panel:nth-child(28) .on,
.deck>input:nth-of-type(29):focus-visible~.deck-frame>.deck-panel:nth-child(29) .on,
.deck>input:nth-of-type(30):focus-visible~.deck-frame>.deck-panel:nth-child(30) .on,
.deck>input:nth-of-type(31):focus-visible~.deck-frame>.deck-panel:nth-child(31) .on,
.deck>input:nth-of-type(32):focus-visible~.deck-frame>.deck-panel:nth-child(32) .on,
.deck>input:nth-of-type(33):focus-visible~.deck-frame>.deck-panel:nth-child(33) .on,
.deck>input:nth-of-type(34):focus-visible~.deck-frame>.deck-panel:nth-child(34) .on,
.deck>input:nth-of-type(35):focus-visible~.deck-frame>.deck-panel:nth-child(35) .on,
.deck>input:nth-of-type(36):focus-visible~.deck-frame>.deck-panel:nth-child(36) .on,
.deck>input:nth-of-type(37):focus-visible~.deck-frame>.deck-panel:nth-child(37) .on,
.deck>input:nth-of-type(38):focus-visible~.deck-frame>.deck-panel:nth-child(38) .on,
.deck>input:nth-of-type(39):focus-visible~.deck-frame>.deck-panel:nth-child(39) .on,
.deck>input:nth-of-type(40):focus-visible~.deck-frame>.deck-panel:nth-child(40) .on{outline:3px solid var(--link);outline-offset:2px}
.deck-slide{container-type:inline-size;aspect-ratio:16/9;display:flex;flex-direction:column;overflow:hidden;padding:3.5% 6%;
background:#FFFFFF;color:#16212E;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(11,37,69,.08)}
.deck-slide.picture{padding:0}
.deck-slide.picture img{display:block;width:100%;height:100%;object-fit:contain}
.deck-slide h4{margin:0 0 3.5cqw;font-size:7cqw;line-height:1.15;text-align:center;font-weight:800;color:#0B2545}
.deck-body{flex:1;display:flex;gap:4cqw;align-items:flex-start}
.deck-body ul{flex:1;margin:0;padding-left:4.5cqw;font-size:4.3cqw;line-height:1.3}
.deck-body ul.plain{list-style:none;padding-left:0}
.deck-body li+li{margin-top:1.8cqw}
.deck-pic{flex:0 0 40%;width:40%;height:auto;margin-top:.5cqw;border-radius:1.5cqw}
.deck-cover{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3cqw;text-align:center}
.deck-cover h4{margin:0;font-size:8.5cqw}.deck-cover p{margin:0;font-size:4cqw;color:#5E6875}
.d-sky{fill:#DFF3FB}.d-sea{fill:#2E86C1}.d-sun{fill:#F7C531}.d-cloud{fill:#FFFFFF}.d-arrow{fill:none;stroke:#1B4F72;stroke-width:12}
.deck-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:.95rem}
.deck-step{font-weight:800;color:var(--link);cursor:pointer;padding:6px 2px}.deck-step.off{color:var(--muted);opacity:.45;cursor:default}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.stats div{background:var(--paper);border-radius:12px;padding:12px 14px}
.stats dt{font-size:.85rem;font-weight:700;color:var(--muted)}
.stats dd{margin:0;font-size:1.6rem;font-weight:800;color:var(--heading);font-variant-numeric:tabular-nums}
.num{text-align:right;font-variant-numeric:tabular-nums}
table.nowrap td,table.nowrap th{white-space:nowrap;overflow-wrap:normal}
details.runs summary{cursor:pointer;color:var(--heading)}
@media (max-width:600px){body{font-size:16px}.bar{padding:12px 16px}main.page{padding:20px 16px}h1{font-size:1.9rem}.deck-tabs{gap:4px}.deck-tabs label{width:30px;height:30px}.landing h2{font-size:1.7rem}
.card,.cost,.danger-zone{padding:18px}.thumb{width:84px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
