/* Layout: one soft pastel column; glossy sugar cards; charts as framed 'postcards' */
@font-face{font-family:"Cherry Bomb One";src:url(/fonts/cherrybomb.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Quicksand";src:url(/fonts/quicksand.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{color-scheme:light;--bg:#fff6fb;--bg2:#ffe6f2;--paper:#ffffff;--ink:#4b1f45;--muted:#8d5b84;--line:#f6cfe3;
--pink:#ff5fa2;--rose:#ff9cc8;--lilac:#b58cff;--peach:#ffb48f;--mint:#6fd8bd;--sky:#86c3ff;--butter:#ffd76e;
--deep:#d6337f;--shadow:rgba(214,51,127,.18);
--display:"Cherry Bomb One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;--body:"Quicksand","Nunito","Avenir Next",system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);font:500 17px/1.7 var(--body);
background-image:radial-gradient(circle at 10% 6%,#ffd9ec 0 160px,transparent 161px),radial-gradient(circle at 94% 22%,#eadcff 0 130px,transparent 131px),radial-gradient(circle at 4% 70%,#ffe3d4 0 150px,transparent 151px),radial-gradient(circle at 96% 88%,#d9f6ee 0 140px,transparent 141px);background-attachment:fixed}
a{color:var(--deep);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--lilac);outline-offset:3px;border-radius:10px}
header,main,footer{max-width:860px;margin:0 auto;padding-inline:20px}
header{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding-block:22px 6px}
.brand{display:flex;align-items:center;gap:10px;font:26px/1 var(--display);color:var(--ink);text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
header nav{display:flex;flex-wrap:wrap;gap:8px}
header nav a{font-size:15px;text-decoration:none;color:var(--ink);padding:6px 14px;border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--line);transition:transform .15s}
header nav a:hover,header nav a[aria-current]{transform:translateY(-2px);color:var(--deep);background:#fff0f7}
h1,h2,h3{text-wrap:balance;font-weight:400}
h1{font:clamp(34px,6vw,56px)/1.08 var(--display);margin:28px 0 12px;background:linear-gradient(92deg,var(--pink),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font:27px/1.2 var(--display);margin:40px 0 10px;color:var(--deep)}
h2::before{content:"\2726";color:var(--butter);margin-right:10px;font-size:.8em;vertical-align:.1em}
h3{font:700 19px/1.3 var(--body);margin:24px 0 6px}
p,li{max-width:68ch}
.lede{color:var(--muted);font-size:20px;margin-top:0}
.meta{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 0}
.hero{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:center}
.hero>div{min-width:0}
.hero svg{width:100%;height:auto;max-width:220px}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-2deg)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:18px;margin:20px 0}
.card{--c:var(--pink);position:relative;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:28px;text-decoration:none;color:var(--ink);overflow:hidden;
background:linear-gradient(165deg,#fff 0%,color-mix(in srgb,var(--c) 22%,#fff) 60%,color-mix(in srgb,var(--c) 38%,#fff) 100%);
box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 35%,#fff),0 10px 22px color-mix(in srgb,var(--c) 25%,transparent);transition:transform .2s,box-shadow .2s}
.card::after{content:"";position:absolute;right:-18px;top:-18px;width:80px;height:80px;border-radius:50%;background:color-mix(in srgb,var(--c) 30%,transparent)}
.card:hover{transform:translateY(-4px) rotate(-.7deg);box-shadow:inset 0 0 0 2px var(--c),0 16px 30px color-mix(in srgb,var(--c) 35%,transparent)}
.card strong{font:22px/1.15 var(--display);font-weight:400;color:color-mix(in srgb,var(--c) 70%,var(--ink))}
.card span{font-size:15px;line-height:1.5;color:var(--muted);font-weight:600}
.card em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.c-pink{--c:var(--pink)}.c-lilac{--c:var(--lilac)}.c-peach{--c:var(--peach)}.c-mint{--c:var(--mint)}.c-sky{--c:var(--sky)}.c-butter{--c:#f2b81c}.c-rose{--c:var(--rose)}
.box{background:var(--paper);border-radius:22px;padding:14px 20px;margin:24px 0;font-size:15px;color:var(--muted);box-shadow:inset 0 0 0 2px var(--line)}
code,.formula{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:var(--bg2);padding:1px 6px;border-radius:8px}
.formula{display:block;padding:12px 16px;margin:16px 0;overflow-x:auto;border-radius:16px}
.tw{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;margin:16px 0;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--line);font-variant-numeric:tabular-nums}
th{background:var(--bg2);font-weight:700}th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:0}
figure.chart{margin:24px 0;padding:16px 16px 10px;background:var(--paper);border-radius:26px;box-shadow:inset 0 0 0 2px var(--line),0 8px 20px var(--shadow)}
figure.chart svg{display:block;width:100%;height:auto}
figure.chart figcaption{font-size:14px;color:var(--muted);margin-top:6px;font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 6px}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
dl.gl dt{font:21px/1.3 var(--display);color:var(--deep);margin-top:18px}dl.gl dd{margin:2px 0 0}
form.calc{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--paper);border-radius:26px;padding:20px;box-shadow:inset 0 0 0 2px var(--line)}
form.calc label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--muted)}
input{font:600 17px var(--body);padding:10px 14px;border:2px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.out{grid-column:1/-1;font-size:16px;padding:12px 16px;border-radius:18px;background:var(--bg2)}.out b{color:var(--deep)}
.btn{font:700 16px var(--body);border:0;border-radius:999px;padding:11px 22px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#ff7db3,var(--pink));box-shadow:0 4px 0 var(--deep);transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--deep)}
.btn.alt{background:linear-gradient(180deg,#c9a9ff,var(--lilac));box-shadow:0 4px 0 #7b52d6}
.btn.ghost{background:var(--paper);color:var(--deep);box-shadow:0 4px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:default}
.panel{background:var(--paper);border-radius:28px;padding:20px;box-shadow:inset 0 0 0 2px var(--line),0 10px 24px var(--shadow);margin:20px 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.score{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.score b{color:var(--deep)}
canvas{display:block;width:100%;height:auto;border-radius:18px;background:#fffafd}
.msg{min-height:1.7em;font-weight:700;color:var(--deep)}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.quiz-opts button{font:700 15px var(--body);text-align:left;padding:12px 16px;border-radius:18px;border:2px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.quiz-opts button.ok{background:#dcf7ee;border-color:var(--mint)}.quiz-opts button.no{background:#ffe0ea;border-color:var(--pink)}
.flash{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:14px}
.fc{perspective:900px;height:170px;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:inherit}
.fc>div{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.fc[aria-pressed=true]>div{transform:rotateY(180deg)}
.fc section{position:absolute;inset:0;backface-visibility:hidden;border-radius:24px;padding:16px;display:flex;align-items:center;justify-content:center;text-align:center}
.fc .front{background:linear-gradient(160deg,#fff,#ffe1ef);box-shadow:inset 0 0 0 2px var(--rose);font:20px/1.2 var(--display);color:var(--deep)}
.fc .back{background:linear-gradient(160deg,#fff,#efe5ff);box-shadow:inset 0 0 0 2px var(--lilac);transform:rotateY(180deg);font-size:14px;font-weight:600;line-height:1.45}
footer{margin-top:60px;padding-block:18px 40px;font-size:14px;color:var(--muted);border-top:3px dotted var(--line)}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero svg{max-width:150px}form.calc,.quiz-opts{grid-template-columns:1fr}.brand{font-size:22px}}
@media (prefers-reduced-motion:reduce){.float{animation:none}.card,.fc>div,header nav a{transition:none}}

figure.chart{position:relative}
figure.chart svg[data-s]{touch-action:pan-y;cursor:crosshair}
.hint{position:absolute;right:18px;top:14px;margin:0;font-size:12px;font-weight:700;color:var(--muted);opacity:.8}
.tip{position:absolute;pointer-events:none;background:rgba(75,31,69,.92);color:#fff;border-radius:14px;padding:8px 12px;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;transform:translate(-50%,-100%);box-shadow:0 6px 16px rgba(75,31,69,.25);z-index:2;font-variant-numeric:tabular-nums}
.tip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.tip b{display:block;font-size:12px;opacity:.8;margin-bottom:2px}
.ex{margin-top:36px}.ex h2{margin-top:0}
.exq{padding-block:6px 14px;border-bottom:2px dotted var(--line)}.exq:last-of-type{border-bottom:0}
.exq details{font-size:15px;color:var(--muted)}.exq summary{cursor:pointer;font-weight:700;color:var(--deep)}
@media (max-width:640px){.hint{position:static;margin:0 0 4px}}