@font-face{font-family:"Bricolage";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/Bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/Bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2")}

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme:light;
  --bg:#eef4f2; --bg-2:#e1ebe8; --surface:#fbfdfc; --surface-2:#e6efed;
  --text:#051a24; --text-2:#17323e; --muted:#243f4b;
  --line:#9fb9bd; --line-soft:#cadcdc;
  --accent:#05505e; --accent-ink:#ffffff; --accent-soft:#d2e8ea;
  --hot:#8a230d; --hot-soft:#f7ddd3;
  --gold:#573b00; --gold-soft:#f3e4bb;
  --ok:#14532d; --ok-soft:#d7eedd; --no:#8a1c1c; --no-soft:#f7d9d6;
  --w-0:#e4f6f6; --w-1:#aee0e6; --w-2:#5fb2c3; --w-3:#23748f; --w-4:#0d4460; --w-5:#062a40;
  --ray:rgba(255,255,255,.34); --snow:rgba(255,255,255,.55);
  --shark:#12384a; --shark-belly:#8fb3bf; --shark-line:#0a2230;
  --you:#8a230d; --bus:#b7791f; --whale:#2e5566; --white:#51717e; --spine:#f3ead7; --spine-line:#5b4a2c;
  --stage-grid:rgba(255,255,255,.28); --stage-label:#ffffff; --stage-halo:#062a40;
  --shadow:0 1px 2px rgba(5,30,40,.08),0 10px 30px rgba(5,30,40,.12);
  --bar-h:3.25rem;
  --display:"Bricolage","Atkinson Next",system-ui,sans-serif;
  --sans:"Atkinson Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#03131d; --bg-2:#061b28; --surface:#0a2433; --surface-2:#0f2e3f;
  --text:#e9f4f6; --text-2:#cfe1e6; --muted:#b0c8cf;
  --line:#2c5566; --line-soft:#1b3e4e;
  --accent:#78dbe6; --accent-ink:#022029; --accent-soft:#113c4a;
  --hot:#ffa588; --hot-soft:#3a1d16;
  --gold:#f5c96b; --gold-soft:#3a2e12;
  --ok:#9be7b4; --ok-soft:#133528; --no:#ffb0a8; --no-soft:#3d1c1a;
  --w-0:#0c3d52; --w-1:#0a3346; --w-2:#072838; --w-3:#051e2c; --w-4:#031621; --w-5:#010b12;
  --ray:rgba(150,230,240,.10); --snow:rgba(190,240,250,.42);
  --shark:#1f4b5e; --shark-belly:#4d7c8c; --shark-line:#062030;
  --you:#ffa588; --bus:#f0b44c; --whale:#5d8797; --white:#7e9ea9; --spine:#e8dcbf; --spine-line:#b9a57a;
  --stage-grid:rgba(160,220,235,.18); --stage-label:#e9f4f6; --stage-halo:#010b12;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#03131d; --bg-2:#061b28; --surface:#0a2433; --surface-2:#0f2e3f;
    --text:#e9f4f6; --text-2:#cfe1e6; --muted:#b0c8cf;
    --line:#2c5566; --line-soft:#1b3e4e;
    --accent:#78dbe6; --accent-ink:#022029; --accent-soft:#113c4a;
    --hot:#ffa588; --hot-soft:#3a1d16;
    --gold:#f5c96b; --gold-soft:#3a2e12;
    --ok:#9be7b4; --ok-soft:#133528; --no:#ffb0a8; --no-soft:#3d1c1a;
    --w-0:#0c3d52; --w-1:#0a3346; --w-2:#072838; --w-3:#051e2c; --w-4:#031621; --w-5:#010b12;
    --ray:rgba(150,230,240,.10); --snow:rgba(190,240,250,.42);
    --shark:#1f4b5e; --shark-belly:#4d7c8c; --shark-line:#062030;
    --you:#ffa588; --bus:#f0b44c; --whale:#5d8797; --white:#7e9ea9; --spine:#e8dcbf; --spine-line:#b9a57a;
    --stage-grid:rgba(160,220,235,.18); --stage-label:#e9f4f6; --stage-halo:#010b12;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5);
  }
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.125rem;line-height:1.62;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0}
.skip:focus{left:0}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.5rem,7.4vw,5.6rem);font-variation-settings:"opsz" 96}
h2{font-weight:750;font-size:clamp(2rem,5vw,3.5rem);font-variation-settings:"opsz" 72}
h3{font-weight:700;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.15}
p{margin:0 0 1.1em}
em,i{font-style:italic}
.wrap{width:min(100% - 2.5rem,41rem);margin-inline:auto}
.wide{width:min(100% - 2.5rem,76rem);margin-inline:auto}
section{scroll-margin-top:calc(var(--bar-h) + .75rem)}
.chapter{padding:clamp(4rem,10vw,8rem) 0 clamp(2rem,5vw,4rem)}
.chapter-head{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.chapter-head h2 a.perma{color:inherit;text-decoration:none}
.kicker{text-wrap:balance;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin:0 0 .9rem}
.lede{font-size:clamp(1.2rem,2.2vw,1.42rem);line-height:1.5;color:var(--text-2)}
.note{font-size:.95rem;color:var(--muted)}
strong{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.unknown{border-left:4px solid var(--gold);background:var(--gold-soft);padding:.9rem 1.1rem;border-radius:0 .9rem .9rem 0;color:var(--text)}
.unknown strong{color:var(--gold)}

/* ------------------------------------------------------------------ top bar */
.topbar{position:sticky;top:0;z-index:50;height:var(--bar-h);display:flex;align-items:center;gap:.4rem;padding:0 max(.75rem,env(safe-area-inset-right)) 0 max(.9rem,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.topbar .home{font-weight:700;font-size:.95rem;color:var(--text);text-decoration:none;white-space:nowrap;padding:.7rem .3rem}
.topnav{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto;margin-left:.5rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;text-decoration:none;color:var(--text-2);font-size:.95rem;padding:.7rem .6rem;border-radius:.5rem}
.topnav a[aria-current="true"]{color:var(--accent);font-weight:700}
.spacer{flex:1 1 0}
.chip{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .8rem;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;flex:none}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}

/* ------------------------------------------------------------------ reading rail */
.rail{display:none}
@media (min-width:76rem){
  .rail{display:flex;flex-direction:column;gap:.15rem;position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:40}
  .rail-dot{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;min-height:1.6rem;text-decoration:none;color:var(--text)}
  .rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:transform .2s,background .2s}
  .rail-dot[aria-current="true"] .dot{background:var(--hot);transform:scale(1.6)}
  .rail-label{font-size:.8rem;font-weight:600;opacity:0;transform:translateX(6px);transition:opacity .15s,transform .15s;background:var(--surface);border:1px solid var(--line-soft);padding:.1rem .5rem;border-radius:.4rem;pointer-events:none}
  .rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:none}
}

/* ------------------------------------------------------------------ water, shared by the hero and the stages */
.water{background:linear-gradient(180deg,var(--w-0) 0%,var(--w-1) 12%,var(--w-2) 34%,var(--w-3) 60%,var(--w-4) 82%,var(--w-5) 100%)}
.rays{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rays i{position:absolute;top:-10%;height:95%;width:9%;background:linear-gradient(180deg,var(--ray),transparent 85%);transform-origin:50% 0;filter:blur(6px);animation:sway 11s ease-in-out infinite alternate}
.rays i:nth-child(1){left:6%;transform:rotate(14deg);width:6%}
.rays i:nth-child(2){left:22%;transform:rotate(9deg);animation-delay:-3s;width:11%}
.rays i:nth-child(3){left:41%;transform:rotate(5deg);animation-delay:-6s;width:5%}
.rays i:nth-child(4){left:58%;transform:rotate(-2deg);animation-delay:-2s;width:10%}
.rays i:nth-child(5){left:76%;transform:rotate(-8deg);animation-delay:-8s;width:7%}
.rays i:nth-child(6){left:90%;transform:rotate(-13deg);animation-delay:-5s;width:5%}
@keyframes sway{from{opacity:.55;margin-left:-1.5%}to{opacity:1;margin-left:1.5%}}
.snow{position:absolute;inset:0;pointer-events:none;opacity:.9;background-image:
  radial-gradient(1.6px 1.6px at 8% 18%,var(--snow) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 19% 71%,var(--snow) 50%,transparent 52%),
  radial-gradient(2px 2px at 31% 42%,var(--snow) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 44% 86%,var(--snow) 50%,transparent 52%),
  radial-gradient(1.5px 1.5px at 57% 27%,var(--snow) 50%,transparent 52%),radial-gradient(1.1px 1.1px at 66% 63%,var(--snow) 50%,transparent 52%),
  radial-gradient(1.8px 1.8px at 78% 12%,var(--snow) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 88% 52%,var(--snow) 50%,transparent 52%),
  radial-gradient(1.4px 1.4px at 95% 81%,var(--snow) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 3% 93%,var(--snow) 50%,transparent 52%);
  background-size:100% 100%;animation:drift 24s linear infinite}
.snow.s2{background-size:61% 57%;opacity:.6;animation-duration:37s}
@keyframes drift{from{background-position:0 0}to{background-position:0 100vh}}
.shark-fill{fill:url(#countershade)}
.cs-top{stop-color:var(--shark)}.cs-bottom{stop-color:var(--shark-belly)}
.shark-line{fill:none;stroke:var(--shark-line);stroke-linecap:round}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:calc(100svh - var(--bar-h));display:grid;align-items:end;overflow:clip;isolation:isolate}
.hero .scene{position:absolute;inset:0;z-index:-1}
.hero .surface{position:absolute;left:0;right:0;top:0;height:3.2rem;width:100%}
.hero .surface path{fill:var(--w-0);opacity:.9}
.hero-shark{position:absolute;left:0;top:30%;width:min(118vw,92rem);animation:cruise 46s linear infinite;animation-delay:-14s}
.hero-shark svg{display:block;width:100%;height:auto;overflow:visible}
.hero-shark .body{animation:swim 4.6s ease-in-out infinite;transform-origin:30% 50%}
@keyframes cruise{from{transform:translateX(105vw)}to{transform:translateX(-125%)}}
@keyframes swim{0%,100%{transform:rotate(-.6deg) translateY(0)}50%{transform:rotate(.6deg) translateY(10px)}}
.hero-you{position:absolute;right:12%;top:18%;width:clamp(1.6rem,2.6vw,2.4rem)}
.hero-you svg{display:block;width:100%;height:auto;fill:var(--you)}
.hero-you .lab{position:absolute;left:115%;top:10%;white-space:nowrap;font-weight:700;font-size:.85rem;color:var(--text);background:var(--surface);padding:.1rem .5rem;border-radius:.4rem;border:1px solid var(--line-soft)}
.school{position:absolute;right:6%;top:60%;width:min(34vw,24rem);opacity:.55}
.school svg{width:100%;height:auto;display:block;fill:var(--w-4)}
.hero-copy{position:relative;padding:clamp(1.5rem,5vw,4rem) 0 clamp(2rem,6vw,4.5rem);width:min(100% - 2.5rem,76rem);margin-inline:auto}
.hero-copy .panel{max-width:40rem;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-soft);border-radius:1.4rem;padding:clamp(1.2rem,3vw,2.2rem);box-shadow:var(--shadow)}
.hero h1{margin-bottom:.9rem}
.hero h1 .big{display:block;color:var(--hot)}
.hero .deck{font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.45;color:var(--text-2);margin:0 0 1.3rem;max-width:36rem}
.byline{font-size:.92rem;color:var(--muted);margin:1rem 0 0}
.cta{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.2rem 1.3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border:0;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
.cta svg{transition:transform .2s}
.cta:hover svg{transform:translateY(3px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.2rem 1.15rem;border-radius:999px;border:2px solid var(--accent);background:var(--surface);color:var(--accent);font-weight:700;text-decoration:none;cursor:pointer}
.btn[aria-pressed="true"],.btn.solid{background:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:default}

/* ------------------------------------------------------------------ share */
.share{padding:1.2rem 0 0}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.share-row .lab{font-size:.92rem;color:var(--muted);margin-right:.2rem}
.share-row a,.share-row button{display:inline-flex;align-items:center;min-height:3rem;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer}
.share-status{font-size:.92rem;color:var(--ok);min-height:1.2em;margin:.4rem 0 0}
.share-field{width:100%;margin-top:.5rem;padding:.6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:var(--text);font:inherit;font-size:.9rem}

/* ------------------------------------------------------------------ guess chips */
.guess{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0}
.guess button{min-height:3rem;min-width:4.6rem;padding:0 1rem;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:1.05rem;cursor:pointer;font-variant-numeric:tabular-nums}
.guess button:hover:not(:disabled){border-color:var(--accent)}
.guess button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.guess button.truth{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.guess-out{margin:.7rem 0 0;font-weight:600;min-height:1.4em}

/* ------------------------------------------------------------------ the pass: the shark swims past the reader */
.pass{position:relative}
.pass-sticky{position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h));overflow:clip;isolation:isolate}
.pass-sticky .water{position:absolute;inset:0;z-index:-2}
.pass-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pass-meter{position:absolute;left:50%;top:1rem;transform:translateX(-50%);text-align:center;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line-soft);border-radius:1rem;padding:.45rem 1.1rem .55rem;box-shadow:var(--shadow);min-width:12rem}
.pass-meter .m{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,7vw,4rem);line-height:1;margin:0;font-variant-numeric:tabular-nums;color:var(--text)}
.pass-meter .lab{margin:.15rem 0 0;font-size:.9rem;color:var(--text-2);font-weight:600}
.pass-steps{position:relative;list-style:none;margin:0;padding:0 0 30vh;margin-top:calc(-100svh + var(--bar-h))}
.pass-steps li{min-height:78svh;display:grid;align-items:end;padding:0 1.25rem 12svh}
.pass-steps li:first-child{min-height:92svh}
.card{width:min(100%,29rem);margin:0 auto;background:var(--surface);border:1px solid var(--line-soft);border-radius:1.1rem;padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.card p:last-child{margin-bottom:0}
.card .when{font-weight:700;color:var(--hot);font-size:.95rem;margin-bottom:.3rem}
@media (min-width:60rem){.pass-steps li{justify-items:start;padding-left:max(1.25rem,calc((100vw - 76rem)/2))}.pass-steps .card{margin:0}}
.p-grid line{stroke:var(--stage-grid);stroke-width:1}
.p-tick{font-family:var(--sans);font-weight:700;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:4px;stroke-linejoin:round}
.p-you{fill:var(--you)}
.p-you-lab{font-family:var(--sans);font-weight:800;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:5px;stroke-linejoin:round}
.p-nose{stroke:var(--you);stroke-width:2;stroke-dasharray:6 6;opacity:.8}

/* ------------------------------------------------------------------ the backbone, three readings */
.spine-box{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.6rem;box-shadow:var(--shadow);overflow:clip}
.spine-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:1rem 1rem .4rem;scrollbar-width:thin}
.spine-tabs button{flex:none;display:grid;justify-items:start;gap:.05rem;min-height:3.6rem;padding:.45rem .95rem;border:2px solid var(--line-soft);border-radius:1rem;background:var(--bg);cursor:pointer;text-align:left}
.spine-tabs button b{font-family:var(--display);font-size:1.25rem;line-height:1.1}
.spine-tabs button span{font-size:.85rem;color:var(--muted);font-weight:600}
.spine-tabs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.spine-view{position:relative}
.spine-svg{display:block;width:100%;height:auto}
.spine-hud{display:grid;gap:1rem;padding:1rem 1.2rem 1.4rem}
@media (min-width:56rem){.spine-hud{grid-template-columns:1.3fr 1fr;gap:2rem;padding:1.2rem 1.8rem 1.8rem}}
.spine-hud h3{margin-bottom:.4rem}
.spine-hud p{margin:0 0 .7rem}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem}
.stats li{background:var(--bg);border:1px solid var(--line-soft);border-radius:.9rem;padding:.6rem .8rem}
.stats .v{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.05;font-variant-numeric:tabular-nums}
.stats .k{display:block;font-size:.88rem;color:var(--muted);font-weight:600}
.vert{fill:var(--spine);stroke:var(--spine-line);stroke-width:.6}
.s-ghost{fill:none;stroke:var(--stage-label);stroke-width:2;stroke-dasharray:7 6;opacity:.85}
.s-brace{fill:none;stroke:var(--stage-label);stroke-width:2.5}
.s-lab{font-family:var(--sans);font-weight:800;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:5px;stroke-linejoin:round}
.s-lab.hot{fill:var(--gold)}

/* ------------------------------------------------------------------ line-up at true scale */
.lineup{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.6rem;box-shadow:var(--shadow);overflow:clip}
.lineup-view{position:relative}
.lineup-svg{display:block;width:100%;height:auto}
.lineup-hud{padding:1rem 1.2rem 1.4rem;display:grid;gap:1rem}
@media (min-width:56rem){.lineup-hud{grid-template-columns:1.2fr 1fr;gap:2rem;padding:1.2rem 1.8rem 1.8rem}}
.toggles{display:flex;flex-wrap:wrap;gap:.5rem}
.toggles button{min-height:2.9rem;padding:0 .95rem;border-radius:999px;border:2px solid var(--line);background:var(--bg);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.toggles button i{width:.8rem;height:.8rem;border-radius:50%;display:inline-block}
.toggles button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.sw-mega{background:var(--shark)}.sw-white{background:var(--white)}.sw-bus{background:var(--bus)}.sw-whale{background:var(--whale)}.sw-wshark{background:var(--w-3)}.sw-you{background:var(--you)}
.slider label{display:flex;justify-content:space-between;gap:1rem;font-weight:700;margin-bottom:.3rem}
.slider output{font-variant-numeric:tabular-nums;color:var(--hot)}
input[type=range]{width:100%;height:2.75rem;accent-color:var(--accent);cursor:pointer;margin:0}
.l-row .obj-mega{fill:url(#countershade)}.l-row .obj-white{fill:var(--white)}.l-row .obj-bus{fill:var(--bus)}.l-row .obj-whale{fill:var(--whale)}.l-row .obj-wshark{fill:var(--w-3)}.l-row .obj-you{fill:var(--you)}
.l-lab{font-family:var(--sans);font-weight:800;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:4px;stroke-linejoin:round}
.l-sub{font-family:var(--sans);font-weight:600;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:4px;stroke-linejoin:round}
.l-axis line{stroke:var(--stage-grid)}
.l-axis text{font-family:var(--sans);font-weight:700;fill:var(--stage-label);paint-order:stroke;stroke:var(--stage-halo);stroke-width:3px}

/* ------------------------------------------------------------------ true size (tooth, vertebra) */
.truesize{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.6rem;box-shadow:var(--shadow);padding:clamp(1rem,3vw,1.8rem);overflow:clip}
.ts-stage{position:relative;overflow-x:auto;overflow-y:hidden;border-radius:1rem;background:var(--bg);border:1px solid var(--line-soft);scrollbar-width:thin;overscroll-behavior-x:contain}
.ts-stage svg{display:block;max-width:none}
.ts-tooth{fill:var(--spine);stroke:var(--spine-line);stroke-width:1.2}
.ts-root{fill:color-mix(in srgb,var(--spine) 70%,var(--gold));stroke:var(--spine-line);stroke-width:1.2}
.ts-guess{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:8 6}
.ts-white{fill:var(--white);opacity:.9}
.ts-lab{font-family:var(--sans);font-weight:700;fill:var(--text);font-size:14px}
.ts-rule line{stroke:var(--muted)}.ts-rule text{font-family:var(--sans);font-size:11px;fill:var(--muted);font-weight:700}
.ts-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1rem}
.calib{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.calib-card{width:calc(85.6mm * var(--k,1));height:calc(53.98mm * var(--k,1));border-radius:calc(3.2mm * var(--k,1));border:2px dashed var(--accent);background:var(--accent-soft);display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--accent);margin:.6rem 0;flex:none}
.calib-wrap{overflow-x:auto;padding-bottom:.3rem}

/* ------------------------------------------------------------------ vote */
.vote{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.4rem;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow)}
.vote .q{margin-bottom:.8rem}
.vote-answer{margin-top:1rem}

/* ------------------------------------------------------------------ figures */
figure{margin:clamp(1.8rem,4vw,3rem) 0}
figure img{border-radius:1rem;border:1px solid var(--line-soft);background:var(--surface-2);width:100%;height:auto}
figcaption{font-size:.93rem;line-height:1.5;color:var(--text-2);margin-top:.7rem}
figcaption .credit{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem}
.fig-wide{width:min(100% - 2.5rem,62rem);margin-inline:auto}
.fig-full{width:min(100% - 1.5rem,88rem);margin-inline:auto}
.fig-narrow{width:min(100% - 2.5rem,32rem);margin-inline:auto}
.duo{display:grid;gap:1.2rem}
@media (min-width:52rem){.duo{grid-template-columns:1fr 1fr;align-items:start}}
.duo figure{margin:0}

/* ------------------------------------------------------------------ timeline of estimates (chart) */
.chart{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.4rem;padding:1rem 1rem .6rem;box-shadow:var(--shadow)}
.chart svg{display:block;width:100%;height:auto}
.c-axis line{stroke:var(--line)}.c-axis text{font-family:var(--sans);font-size:13px;fill:var(--muted);font-weight:700}
.c-bar{fill:var(--accent)}.c-bar.tooth{fill:var(--gold)}.c-bar.max{fill:var(--hot)}
.c-range{stroke:var(--text-2);stroke-width:2}
.c-lab{font-family:var(--sans);font-size:14px;fill:var(--text);font-weight:700}
.c-sub{font-family:var(--sans);font-size:12.5px;fill:var(--muted);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;padding:0;margin:.4rem .3rem .4rem;font-size:.9rem;color:var(--text-2)}
.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;margin-right:.35rem;vertical-align:-.05rem}
.lg-bone{background:var(--accent)}.lg-tooth{background:var(--gold)}.lg-max{background:var(--hot)}

/* ------------------------------------------------------------------ game */
.game{background:var(--surface);border:1px solid var(--line-soft);border-radius:1.6rem;box-shadow:var(--shadow);padding:clamp(1.2rem,3vw,2.2rem)}
.game-progress{display:flex;gap:.35rem;margin:0 0 1.2rem;padding:0;list-style:none}
.game-progress li{flex:1;height:.5rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-soft)}
.game-progress li.ok{background:var(--ok);border-color:var(--ok)}
.game-progress li.no{background:var(--no);border-color:var(--no)}
.game-progress li.now{border-color:var(--text)}
.q{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.1vw,2rem);line-height:1.15;margin:0 0 1.2rem;text-wrap:balance}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:30rem}
.answers button{min-height:3.6rem;border-radius:1rem;border:2px solid var(--line);background:var(--bg);font-weight:800;font-size:1.1rem;cursor:pointer}
.answers button:hover:not(:disabled){border-color:var(--accent)}
.answers button.picked.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.answers button.picked.no{background:var(--no-soft);border-color:var(--no);color:var(--no)}
.answers button.truth{border-color:var(--ok)}
.explain{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:1rem;background:var(--bg);border:1px solid var(--line-soft)}
.explain .tag{font-weight:800}
.explain .tag.ok{color:var(--ok)}.explain .tag.no{color:var(--no)}
.explain p{margin:.2rem 0 .8rem}
.result h3{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.5rem}
.result .score{font-weight:800;color:var(--hot);font-size:1.2rem}
.all-answers{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.all-answers li{padding:.9rem 1.1rem;border:1px solid var(--line-soft);border-radius:1rem;background:var(--surface)}
.all-answers .tag{font-weight:800;margin-right:.4rem}
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:80}

/* ------------------------------------------------------------------ sources + footer */
.sources{font-size:.97rem}
.sources h3{margin:2rem 0 .6rem;font-size:1.25rem}
.sources ul{padding-left:1.1rem;margin:0}
.sources li{margin-bottom:.55rem;overflow-wrap:anywhere}
.site-footer{border-top:1px solid var(--line-soft);padding:2rem 1.25rem 3rem;text-align:center;font-size:.95rem;color:var(--text-2);margin-top:4rem}
.site-footer p{margin:0}
.places{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.places li{padding:1rem 1.2rem;border-left:5px solid var(--accent);background:var(--surface);border-radius:0 1rem 1rem 0}
.places b{display:block;font-size:1.08rem}

/* ------------------------------------------------------------------ reveal on scroll (only when scripts run) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

.nf{min-height:100svh;display:grid;place-items:center;text-align:center}
.nf-main h1{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:1rem}

@media (max-width:40rem){
  .hero-copy{padding:44svh 0 1.2rem}
  .hero-copy .panel{padding:1.1rem 1.1rem 1.2rem;border-radius:1.2rem}
  .hero h1{font-size:clamp(2rem,9.4vw,2.7rem)}
  .hero .deck{font-size:1.04rem;margin-bottom:1rem}
  .hero-shark{top:14%;width:190vw}
  .hero-you{top:9%;right:18%}
  .school{top:34%;width:50vw}
  .byline{font-size:.85rem}
  .pass-meter{top:.6rem;padding:.35rem .9rem .45rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rays i,.snow,.hero-shark,.hero-shark .body{animation:none !important}
  .hero-shark{transform:translateX(-8%)}
  .js .reveal,.js .reveal.in{opacity:1 !important;transform:none !important;transition:none !important}
  .pop{animation:none}
  .cta svg{transition:none}
}
@media print{.topbar,.rail,.share,.scene,.bubbles,.rays,.snow{display:none}}

/* ------------------------------------------------------------------ additions: shark details, facts, Romania map */
.eye{fill:var(--shark-line)}
.p-tickline{stroke:var(--stage-label);stroke-width:2}
.pass-h2{font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 .6rem}
.bus-win{fill:var(--bg);opacity:.75}
.obj-you{fill:var(--you)}.obj-bus{fill:var(--bus)}.obj-white{fill:var(--white)}.obj-wshark{fill:var(--w-3)}.obj-whale{fill:var(--whale)}
.obj-mega path,.obj-mega{fill:url(#countershade)}
.lineup-svg use,.lineup-svg path{vector-effect:none}
.facts-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.facts-grid li{background:var(--surface);border:1px solid var(--line-soft);border-top:5px solid var(--accent);border-radius:1.1rem;padding:1.1rem 1.2rem}
.facts-grid h3{font-size:1.25rem;margin-bottom:.4rem}
.facts-grid p{margin:0;font-size:1.02rem}
.rmap{display:block;width:100%;height:auto;border-radius:1.2rem;border:1px solid var(--line-soft);background:var(--w-1)}
.m-sea{fill:var(--w-1)}.m-land{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.m-ro{fill:var(--surface);stroke:var(--text-2);stroke-width:1.6}
.m-river{fill:none;stroke:var(--w-2);stroke-width:1.4;opacity:.8}
.r-city{fill:var(--text-2)}
.r-clab{font-family:var(--sans);font-size:17px;font-weight:600;fill:var(--text-2);paint-order:stroke;stroke:var(--surface);stroke-width:4px}
.r-site .core{fill:var(--hot);stroke:var(--surface);stroke-width:3}
.r-site .halo{fill:var(--hot);opacity:.25}
.r-lab{font-family:var(--display);font-weight:800;font-size:24px;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
.r-sub{font-family:var(--sans);font-weight:600;font-size:17px;fill:var(--text-2);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.chapter-head h2 a.perma:hover{text-decoration:underline;text-decoration-thickness:.06em}
.hero-you{width:calc(min(118vw,92rem) * .0274)}
@media (max-width:40rem){.hero-you{width:calc(190vw * .0274)}}
.calib summary{cursor:pointer;font-weight:700;min-height:2.75rem;display:flex;align-items:center}
.truesize .q{margin-bottom:.6rem}
.ts-stage{margin-top:1rem;max-height:none}
.chart .chart-narrow{display:none}
@media (max-width:40rem){.chart .chart-wide{display:none}.chart .chart-narrow{display:block}.chart{padding:.8rem .6rem .4rem}}
.r-clab{font-size:10px;stroke-width:3px}
.r-lab{font-size:15px;stroke-width:4px}
.r-sub{font-size:12px;stroke-width:3.5px}
.r-site .core{stroke-width:1.6}
.m-ro{stroke-width:1}.m-land{stroke-width:.7}.m-river{stroke-width:.9}
.map-fig{max-width:56rem}
.r-salt{fill:var(--surface);stroke:var(--accent);stroke-width:1.8}
.r-slab{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--accent);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.r-kdot{fill:var(--hot)}
.r-lab{font-size:13px}.r-sub{font-size:10.5px}
.no-js .pass-meter{display:none}

.ts-stage:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vote-answer:focus{outline:none}.ts-result:focus{outline:none}
.q:focus,.rank:focus{outline:none}
.game .q,.game .rank,.vote-answer,.ts-result{scroll-margin-top:calc(var(--bar-h) + 1rem)}
.map-scroll{overflow-x:auto;border-radius:1.2rem;overscroll-behavior-x:contain}
.map-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:40rem){.map-scroll .rmap{width:640px;max-width:none}}
.r-lab{font-size:14px}.r-sub{font-size:11.5px}.r-clab{font-size:11px}.r-slab{font-size:11.5px}