@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/assets/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:Nunito;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/assets/fonts/nunito-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/assets/fonts/nunito-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF}

:root{
  --bg:#E4F5EF;--bg2:#D3EDE4;--card:#FFFFFF;--ink:#1E3A34;--muted:#557269;
  --jungle:#1F6B52;--lava:#FF6A3D;--sun:#FFC93C;--leaf:#5CC27A;--sky:#4F9BE8;--berry:#9C7BE0;
  --line:#1E3A34;--shadow:4px 4px 0 #1E3A34;--r:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10221E;--bg2:#163029;--card:#1B3A33;--ink:#EAF7F2;--muted:#A9C8BE;--line:#0A1613;--shadow:4px 4px 0 #0A1613;--jungle:#6FD3A6}}
:root[data-theme="dark"]{--bg:#10221E;--bg2:#163029;--card:#1B3A33;--ink:#EAF7F2;--muted:#A9C8BE;--line:#0A1613;--shadow:4px 4px 0 #0A1613;--jungle:#6FD3A6}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 Nunito,system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:-1;
  background-image:radial-gradient(circle at 20% 30%,rgba(92,194,122,.10) 0 120px,transparent 121px),radial-gradient(circle at 85% 70%,rgba(255,201,60,.12) 0 160px,transparent 161px)}
a{color:inherit}
h1,h2,h3,.f{font-family:Fredoka,Nunito,sans-serif;font-weight:700;letter-spacing:.2px;line-height:1.1}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--sun);padding:8px;z-index:9}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 24px Fredoka,sans-serif;white-space:nowrap}
.brand svg{width:38px;height:38px;flex:none}
.nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav a{text-decoration:none;font-weight:800;padding:7px 12px;border-radius:999px}
.nav a:hover{background:var(--bg2)}
.nav .pill{background:var(--sun);border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);color:#1E3A34}
@media (max-width:640px){.nav .hide-s{display:none}.brand{font-size:21px}}

/* buttons, chips, cards */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 17px Fredoka,sans-serif;text-decoration:none;padding:12px 20px;border-radius:14px;border:2.5px solid var(--line);box-shadow:var(--shadow);background:var(--lava);color:#fff;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.btn.alt{background:var(--card);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;padding:4px 11px;border-radius:999px;border:2px solid var(--line);background:var(--card)}
.chip.meat{background:#FFD3CC;color:#1E3A34}.chip.plant{background:#D9F2C4;color:#1E3A34}.chip.fish{background:#D2E6FB;color:#1E3A34}.chip.mix{background:#FFF1C2;color:#1E3A34}
.chip.cousin{background:var(--sun);color:#1E3A34}
.card{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* hero */
.hero{padding:44px 0 26px;text-align:center}
.hero h1{font-size:clamp(38px,7vw,74px);margin:10px 0 12px}
.hero h1 em{font-style:normal;color:var(--lava)}
.hero p.lead{font-size:clamp(18px,2.4vw,22px);max-width:720px;margin:0 auto 22px;color:var(--muted);font-weight:700}
.parade{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:6px auto 4px;max-width:900px}
.parade a{display:block;width:clamp(64px,10vw,104px);transition:transform .15s}
.parade a:hover{transform:translateY(-6px) rotate(-3deg)}
.parade img{width:100%;height:auto;display:block}
.search{display:flex;max-width:560px;margin:0 auto;position:relative}
.search input{width:100%;font:700 18px Nunito,sans-serif;padding:15px 18px 15px 50px;border-radius:16px;border:2.5px solid var(--line);box-shadow:var(--shadow);background:var(--card);color:var(--ink)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.results{position:absolute;top:100%;left:0;right:0;margin-top:8px;z-index:30;text-align:left;max-height:360px;overflow:auto;display:none}
.results a{display:flex;align-items:center;gap:10px;padding:6px 12px;text-decoration:none;font-weight:800}
.results a:hover,.results a.on{background:var(--bg2)}
.results img{width:44px;height:44px}
.results small{color:var(--muted);font-weight:700;margin-left:auto}

.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:28px 0 6px}
.stat{padding:12px 18px;text-align:center;min-width:150px}
.stat b{display:block;font:700 30px Fredoka,sans-serif;color:var(--jungle)}
.stat span{font-weight:800;color:var(--muted);font-size:14px}

section{padding:34px 0}
.sec-h{text-align:center;margin-bottom:22px}
.sec-h h2{font-size:clamp(28px,4.4vw,42px);margin:0 0 6px}
.sec-h p{margin:0;color:var(--muted);font-weight:700}
.kicker{display:inline-block;font:700 15px Fredoka,sans-serif;background:var(--leaf);color:#123;border:2px solid var(--line);padding:3px 12px;border-radius:999px;transform:rotate(-2deg)}

/* group tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{text-decoration:none;padding:10px 10px 12px;text-align:center;transition:transform .12s,box-shadow .12s;position:relative;cursor:pointer;font:inherit;color:inherit}
.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.tile img{width:96px;height:96px;display:block;margin:0 auto}
.tile b{display:block;font:700 18px Fredoka,sans-serif}
.tile span{font-size:13px;font-weight:800;color:var(--muted)}
.tile.on{background:var(--sun);color:#1E3A34}.tile.on span{color:#1E3A34}
.tile .cz{position:absolute;top:-10px;right:-6px;font-size:11px;padding:2px 8px}

/* timeline */
.eras{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.eras{grid-template-columns:1fr}}
.era{padding:18px;position:relative;overflow:hidden}
.era h3{font-size:28px;margin:0 0 2px}
.era .ma{font-weight:800;color:var(--muted)}
.era p{margin:8px 0 10px}
.era .row{display:flex;gap:2px}
.era .row img{width:56px;height:56px}
.era.t{background:#FFE0B8}.era.j{background:#D9F2C4}.era.k{background:#D2E6FB}
.era.t,.era.j,.era.k{color:#1E3A34}.era.t .ma,.era.j .ma,.era.k .ma{color:#3d5a52}

.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.promise .card{padding:18px}
.promise h3{margin:0 0 6px;font-size:22px}
.promise p{margin:0;color:var(--muted);font-weight:700}

/* atlas */
.filterbar{position:sticky;top:62px;z-index:10;background:var(--bg);padding:12px 0;border-bottom:2px dashed color-mix(in srgb,var(--line) 30%,transparent)}
.filterbar .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filterbar input{flex:1;min-width:200px;font:700 16px Nunito,sans-serif;padding:10px 14px;border-radius:12px;border:2.5px solid var(--line);background:var(--card);color:var(--ink)}
.filterbar select{font:700 15px Nunito,sans-serif;padding:10px;border-radius:12px;border:2.5px solid var(--line);background:var(--card);color:var(--ink)}
@media (max-width:640px){.filterbar{position:static}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
.dc{display:block;text-decoration:none;padding:8px 10px 12px;text-align:center;transition:transform .12s,box-shadow .12s}
.dc:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.dc img{width:110px;height:110px;display:block;margin:0 auto}
.dc b{display:block;font:700 17px Fredoka,sans-serif;word-break:break-word}
.dc span{font-size:13px;font-weight:800;color:var(--muted)}
.more{display:block;margin:20px auto 0}
.count{font-weight:800;color:var(--muted);margin:10px 0 0}

/* dino page */
.crumbs{font-weight:800;font-size:14px;color:var(--muted);padding-top:16px}
.crumbs a{text-decoration:none}
.dhero{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:28px;align-items:center;padding:16px 0 10px}
@media (max-width:760px){.dhero{grid-template-columns:1fr;text-align:center}.dhero .chips{justify-content:center}}
.dhero .pic{background:var(--card);border:2.5px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:10px;aspect-ratio:1;display:grid;place-items:center;position:relative}
.dhero .pic img{width:100%;height:100%}
.dhero h1{font-size:clamp(36px,6vw,64px);margin:6px 0 4px;word-break:break-word}
.say{font-weight:800;color:var(--muted);font-size:18px}
.say b{color:var(--jungle)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.intro{font-size:19px;font-weight:700;max-width:640px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0}
.q{padding:14px 16px}
.q .lab{font:700 14px Fredoka,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.q .val{font:700 22px Fredoka,sans-serif;margin-top:2px}
.q small{display:block;font-weight:700;color:var(--muted);margin-top:2px}
.tl{padding:18px}
.tlbar{position:relative;height:42px;border-radius:12px;overflow:hidden;display:flex;border:2px solid var(--line);margin:12px 0 8px}
.tlbar div{display:grid;place-items:center;font:700 13px Fredoka,sans-serif;color:#1E3A34}
.tlbar .t{background:#FFE0B8}.tlbar .j{background:#D9F2C4}.tlbar .k{background:#D2E6FB}
.tlbar .me{position:absolute;top:0;bottom:0;background:var(--lava);opacity:.85;border-left:2px solid var(--line);border-right:2px solid var(--line);min-width:6px}
.tlaxis{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--muted)}
.size{padding:18px}
.size svg{width:100%;height:auto;display:block}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.fact{padding:16px 18px;position:relative}
.fact:nth-child(3n+1){transform:rotate(-.6deg)}.fact:nth-child(3n+2){transform:rotate(.5deg)}
.fact .n{font:700 34px Fredoka,sans-serif;color:var(--lava);line-height:1}
.fact p{margin:6px 0 0;font-weight:700}
.src{display:inline-block;font:800 11px Nunito,sans-serif;vertical-align:super;text-decoration:none;background:var(--bg2);border:1.5px solid var(--line);border-radius:6px;padding:0 5px;margin-left:3px;color:var(--ink)}
.myth{background:var(--sun);color:#1E3A34;padding:18px}
.myth h3{margin:0 0 6px}
.nerd{padding:20px}
.nerd h2{margin:0 0 10px}
.nerd dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.nerd dt{font-weight:800;color:var(--muted)}
.nerd dd{margin:0;font-weight:700;word-break:break-word}
@media (max-width:560px){.nerd dl{grid-template-columns:1fr}.nerd dd{margin-bottom:8px}}
.sources ol{padding-left:22px;margin:8px 0}
.sources li{margin:4px 0;font-weight:700;word-break:break-word}
.sorry{font-weight:700;color:var(--muted);font-size:15px}
.kin{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.kin .dc img{width:84px;height:84px}
.note{border:2px dashed var(--line);border-radius:14px;padding:12px 16px;font-weight:700;background:color-mix(in srgb,var(--card) 60%,transparent)}
.soon{padding:22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--jungle);color:#fff}
.soon h2{margin:0 0 4px;color:#fff}.soon p{margin:0;font-weight:700;opacity:.9}

footer{margin-top:40px;padding:30px 0 50px;border-top:2px solid var(--line);font-weight:700;color:var(--muted);font-size:15px}
footer .wrap{display:grid;gap:8px}
footer a{font-weight:800}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== v2: make it fun ===== */
.scene{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B2E26 0%,#124A3A 55%,#1B6B4F 100%);color:#fff;border-bottom:4px solid #1E3A34}
.scene .stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 10% 20%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 30% 12%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 70% 18%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 8%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 6%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 92% 30%,#fff6 50%,transparent 51%);animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.4}}
.scene .moon{position:absolute;right:8%;top:40px;width:70px;height:70px;border-radius:50%;background:#FFF1C2;box-shadow:0 0 40px #FFE08A88}
.scene .volcano{position:absolute;left:-40px;bottom:70px;width:min(46vw,520px);opacity:.95}
.scene .volcano .glow{animation:lava 2.4s ease-in-out infinite alternate}
@keyframes lava{from{opacity:.55}to{opacity:1}}
.scene .smoke{animation:smoke 6s ease-in-out infinite}
@keyframes smoke{0%{transform:translateY(0);opacity:.0}30%{opacity:.5}100%{transform:translateY(-60px) scale(1.4);opacity:0}}
.scene .ferns{position:absolute;right:-20px;bottom:60px;width:min(40vw,420px)}
.scene .wrap{position:relative;z-index:2}
.scene .hero{padding:56px 0 30px}
.scene .hero h1{color:#FFC93C;text-shadow:3px 3px 0 #1E3A34,6px 6px 0 #FF6A3D;font-size:clamp(42px,8vw,92px);transform:rotate(-1.5deg)}
.scene .hero h1 em{color:#fff;text-shadow:3px 3px 0 #1E3A34,6px 6px 0 #5CC27A}
.scene .hero p.lead{color:#D9F2C4}
.scene .kicker{background:#FFC93C;color:#1E3A34}
.bubble{display:inline-block;background:#fff;color:#1E3A34;font:700 18px Fredoka,sans-serif;padding:8px 16px;border-radius:18px;border:3px solid #1E3A34;position:relative;transform:rotate(3deg);margin-bottom:8px}
.bubble:after{content:"";position:absolute;left:30px;bottom:-12px;border:10px solid transparent;border-top-color:#1E3A34}
.ground{position:relative;height:120px;margin-top:10px;z-index:2}
.ground:before{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:#3B2A1E;border-top:4px solid #1E3A34;background-image:radial-gradient(circle at 20px 18px,#4E3828 6px,transparent 7px);background-size:60px 34px}
.walk{position:absolute;bottom:26px;left:0;display:flex;gap:30px;width:max-content;animation:walk 60s linear infinite}
.walk a{display:block;width:96px;height:96px;flex:none}
.walk img{width:100%;height:100%}
@keyframes walk{from{transform:translateX(-50%)}to{transform:translateX(100vw)}}
.walk:hover{animation-play-state:paused}
.scene .search input{border-color:#1E3A34;box-shadow:5px 5px 0 #FF6A3D}
.scene .stats .stat{background:#ffffff14;border-color:#FFC93C;box-shadow:4px 4px 0 #0008;color:#fff}
.scene .stats .stat b{color:#FFC93C}.scene .stats .stat span{color:#D9F2C4}
.tile{background:var(--c,var(--card));color:#1E3A34}
.tile span{color:#1E3A34;opacity:.75}
.tile:nth-child(4n+1){transform:rotate(-1.2deg)}.tile:nth-child(4n+3){transform:rotate(1deg)}
.tile:hover img{animation:wig .5s ease-in-out}
@keyframes wig{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.prints{height:28px;background-image:radial-gradient(ellipse 7px 9px at 12px 14px,#1E3A3422 98%,transparent),radial-gradient(circle 3px at 5px 4px,#1E3A3422 98%,transparent),radial-gradient(circle 3px at 12px 2px,#1E3A3422 98%,transparent),radial-gradient(circle 3px at 19px 4px,#1E3A3422 98%,transparent);background-size:70px 28px;margin:10px 0}

/* dino page: trading card */
.dcard{position:relative;margin-top:14px;border:4px solid #1E3A34;border-radius:30px;box-shadow:8px 8px 0 #1E3A34;overflow:hidden;background:var(--c);color:#1E3A34}
.dcard:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff22 0 18px,transparent 18px 36px);pointer-events:none}
.dcard .in{position:relative;display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:24px;align-items:center;padding:22px}
@media (max-width:760px){.dcard .in{grid-template-columns:1fr;text-align:center}.dcard .chips{justify-content:center}}
.dcard .pic{background:#fff;border:4px solid #1E3A34;border-radius:26px;aspect-ratio:1;display:grid;place-items:center;padding:8px;box-shadow:inset 0 -18px 0 #E4F5EF}
.dcard .pic img{width:100%;height:100%}
.dcard h1{font-size:clamp(38px,6.5vw,72px);margin:4px 0;color:#fff;text-shadow:3px 3px 0 #1E3A34;word-break:break-word}
.dcard .no{display:inline-block;font:700 15px Fredoka,sans-serif;background:#1E3A34;color:#FFC93C;padding:4px 12px;border-radius:999px}
.dcard .say,.dcard .say b{color:#1E3A34}
.dcard .intro{color:#1E3A34}
.dcard .note{background:#ffffffaa;color:#1E3A34}
.photo{background:#fff;border:4px solid #1E3A34;border-radius:8px;padding:12px 12px 16px;box-shadow:8px 8px 0 #1E3A34;transform:rotate(-1.2deg);max-width:760px;margin:0 auto;color:#1E3A34}
.photo img{width:100%;height:auto;display:block;border-radius:4px;background:#eee}
.photo figcaption{font-weight:700;font-size:14px;color:#557269;margin-top:10px}
.photo .tag{position:absolute;margin:-26px 0 0 -26px;background:#FF6A3D;color:#fff;font:700 15px Fredoka,sans-serif;padding:5px 12px;border-radius:999px;border:3px solid #1E3A34;transform:rotate(-8deg)}
.q{border-width:3px}
.q:nth-child(4n+1){background:#FFE0B8}.q:nth-child(4n+2){background:#D9F2C4}.q:nth-child(4n+3){background:#D2E6FB}.q:nth-child(4n+4){background:#FFE0EC}
.q,.q .val{color:#1E3A34}.q .lab,.q small{color:#3d5a52}
.fact:nth-child(4n+1){background:#FFF1C2}.fact:nth-child(4n+2){background:#D9F2C4}.fact:nth-child(4n+3){background:#D2E6FB}.fact:nth-child(4n+4){background:#FFE0EC}
.fact,.fact p{color:#1E3A34}
.tlbar{height:54px}
.tlbar .me{background:none;border:none;opacity:1;display:flex;justify-content:center}
.tlbar .me:before{content:"";position:absolute;inset:0;background:#FF6A3D;opacity:.85;border-left:2px solid #1E3A34;border-right:2px solid #1E3A34}
.tlbar .me img{position:relative;width:46px;height:46px;margin-top:2px;flex:none}

.search svg{color:var(--muted);z-index:1}

/* quiz */
.qz-hero{max-width:760px;margin:40px auto 10px;padding:clamp(22px,4vw,44px);color:var(--ink);position:relative;z-index:2}
.qz-hero h1{font-size:clamp(40px,7vw,72px);margin:12px 0 6px;color:#FF6A3D;text-shadow:3px 3px 0 #1E3A34}
.qz-hero .lead{font-size:clamp(17px,2.2vw,20px);font-weight:700;margin:10px 0 16px}
.qz-faces{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 22px}
.qz-faces img{width:64px;height:64px}
.qz-faces img:nth-child(odd){transform:rotate(-6deg)}.qz-faces img:nth-child(even){transform:rotate(5deg) translateY(4px)}
.qz-go{font-size:20px;padding:16px 32px;border-radius:999px}
.fine{font-weight:700;color:var(--muted);font-size:15px}
.qz-dlg{font-family:Nunito,system-ui,sans-serif;border:3px solid #1E3A34;border-radius:26px;box-shadow:8px 8px 0 #1E3A34;padding:22px 24px 20px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:#1E3A34}
.qz-dlg::backdrop{background:rgba(7,31,25,.7)}
.qz-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#557269;font-size:15px}
.qz-x{width:42px;height:42px;border:2.5px solid #1E3A34;border-radius:12px;background:#E4F5EF;font-size:24px;line-height:1;cursor:pointer;color:#1E3A34;padding:0}
.qz-bar{height:12px;background:#D9F2C4;border:2px solid #1E3A34;border-radius:999px;margin:12px 0 18px;overflow:hidden}
.qz-bar i{display:block;height:100%;background:#FF6A3D;transition:width .25s}
.qz-dlg h2{font:700 clamp(24px,5vw,32px)/1.15 Fredoka,sans-serif;margin:0 0 16px}
.qz-opts{display:grid;gap:12px}
.qz-opts button{font:800 18px/1.25 Nunito,sans-serif;text-align:left;color:#1E3A34;background:#FFF1C2;border:2.5px solid #1E3A34;border-radius:16px;padding:16px 18px;box-shadow:3px 3px 0 #1E3A34;cursor:pointer}
.qz-opts button:nth-child(2){background:#D9F2C4}.qz-opts button:nth-child(3){background:#D2E6FB}
@media (hover:hover){.qz-opts button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #1E3A34}}
.qz-opts button.on{background:#FF6A3D;color:#fff}
.qz-back{margin-top:16px;border:0;background:none;color:#557269;font:800 16px Nunito,sans-serif;cursor:pointer;text-decoration:underline;padding:6px 0}
.qz-results{max-width:900px;margin:30px auto}
#pm-top{display:flex;gap:22px;align-items:center;background:var(--card);border:3px solid var(--line);border-radius:24px;box-shadow:6px 6px 0 var(--line);padding:20px;margin:6px 0 26px}
#pm-top img{width:140px;height:140px;flex:0 0 auto}
#pm-top h3{font:700 clamp(30px,6vw,48px)/1.05 Fredoka,sans-serif;margin:0 0 6px}
#pm-top p{margin:0 0 12px;font-size:18px;font-weight:700}
#pm-share{display:grid;grid-template-columns:minmax(0,400px) minmax(0,420px);gap:28px;align-items:start;justify-content:center;margin:0 0 32px}
#pm-canvas{width:100%;height:auto;border:3px solid #1E3A34;border-radius:18px;box-shadow:6px 6px 0 #1E3A34;background:#0E3B2E}
.pm-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.pm-btns #pm-native{grid-column:1/-1;justify-content:center}
.pm-more{grid-column:1/-1}.pm-more summary{list-style:none;cursor:pointer;letter-spacing:2px}.pm-more summary::-webkit-details-marker{display:none}
.pm-more-g{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.pm-btns #pm-msg{grid-column:1/-1;margin:0}
.pm-b{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;box-sizing:border-box;font:800 16px Nunito,sans-serif;color:#1E3A34;background:#fff;border:2.5px solid #1E3A34;border-radius:999px;padding:11px 18px;box-shadow:3px 3px 0 #1E3A34;cursor:pointer;text-decoration:none}
#pm-friend{background:#FFC93C;color:#1E3A34;border:2.5px solid #1E3A34;border-radius:16px;padding:12px 16px;font-weight:800;margin:0 0 16px;display:flex;gap:12px;align-items:center}
#pm-friend img{width:56px;height:56px}
@media (max-width:760px){#pm-top{flex-direction:column;text-align:center}#pm-share{grid-template-columns:1fr;justify-items:center}#pm-canvas{max-width:360px}.pm-btns{width:100%;max-width:420px}}
@media (max-width:600px){.qz-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0;box-shadow:none;padding:18px 18px 28px}}
.quizband{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:22px;background:#FF6A3D;color:#fff}
.quizband h2{margin:0 0 4px;color:#fff;text-shadow:2px 2px 0 #1E3A34}.quizband p{margin:0;font-weight:700}
.quizband .imgs{display:flex}.quizband .imgs img{width:70px;height:70px;margin-right:-10px}
#pm-friend[hidden],[hidden]{display:none!important}

.q .val.sm{font-size:17px;line-height:1.25}

/* tip jar: Feed the T. rex */
.tipjar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:24px;background:#FFF1C2;color:#1E3A34}
.tipjar h2{font-size:clamp(28px,4vw,40px);margin:8px 0 6px;color:#1E3A34}.tipjar p{font-weight:700;margin:0 0 14px}
.tj-pic{position:relative;width:200px;flex:none;margin:0 auto}.tj-pic img{display:block;width:150px;height:150px}
.tj-pic .lunch{position:absolute;right:0;bottom:-6px;width:90px;animation:jiggle 2.4s ease-in-out infinite}
@keyframes jiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
.tj-txt{flex:1;min-width:240px}
.tipmini{display:flex;gap:14px;align-items:center;padding:14px 18px;text-decoration:none;background:#FFF1C2;color:#1E3A34;font-weight:700;flex-wrap:wrap}
.tipmini span:nth-child(2){flex:1;min-width:200px}.tipmini .btn{padding:8px 16px;font-size:16px}
.tipfloat{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;align-items:center;gap:4px;background:#FFC93C;color:#1E3A34;border:2.5px solid #1E3A34;border-radius:999px;box-shadow:3px 3px 0 #1E3A34;padding:2px 14px 2px 4px;font:700 15px Fredoka,sans-serif;text-decoration:none}
.tipfloat img{width:40px;height:40px}
.tipfloat:hover{transform:translate(-1px,-1px)}
@media print{.tipfloat{display:none}}

.photo{position:relative}.photo .tag{position:absolute;top:-14px;left:-10px;margin:0;z-index:2}.photo.ai{transform:rotate(1deg)}.photo.ai .tag{background:#9C7BE0}

/* phone header: one line, no wrapping */
.nav a{white-space:nowrap}
.nav .pill .sm{display:none}
@media (max-width:640px){
  .top .wrap{gap:8px}
  .brand{font-size:19px;gap:6px}.brand svg{width:30px;height:30px}
  .nav{gap:2px}.nav a{font-size:15px;padding:6px 8px}
  .nav .pill{padding:5px 11px;box-shadow:2px 2px 0 var(--line)}
  .nav .pill .lg{display:none}.nav .pill .sm{display:inline}
}
@media (max-width:360px){.brand{font-size:0}.brand svg{width:32px;height:32px}}
.scene .search input{background:#fff;color:#1E3A34}.scene .search svg{color:#557269}
@media (max-width:640px){.tipfloat{font-size:13px;padding:1px 10px 1px 2px;right:10px;bottom:10px}.tipfloat img{width:32px;height:32px}}

/* three-stripe menu (same idea as Furry Diary): phones and tablets get the button, everything is in the panel */
#dwm-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;margin-left:auto;background:#FFC93C;color:#1E3A34;border:2.5px solid #1E3A34;border-radius:14px;box-shadow:3px 3px 0 #1E3A34;cursor:pointer;padding:0}
#dwm-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1E3A34}
#dwm-btn:focus-visible,#dwm a:focus-visible,#dwm button:focus-visible,#dwm summary:focus-visible{outline:3px solid #FF6A3D;outline-offset:2px}
#dwm{position:fixed;top:10px;left:10px;right:10px;z-index:10000;max-height:calc(100dvh - 20px);overflow:auto;display:none;background:#fff;color:#1E3A34;border:3px solid #1E3A34;border-radius:24px;box-shadow:6px 6px 0 #1E3A34;padding:14px 16px 18px;font:700 18px/1.3 Nunito,system-ui,sans-serif}
#dwm.open{display:block;animation:dwmIn .16s ease-out}
@keyframes dwmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#dwm-shade{position:fixed;inset:0;z-index:9999;background:rgba(7,31,25,.55);display:none}#dwm-shade.open{display:block}
#dwm .dwm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#dwm .dwm-brand{display:flex;align-items:center;gap:8px;font:700 22px Fredoka,sans-serif;text-decoration:none;color:inherit}
#dwm .dwm-brand svg{width:32px;height:32px}
#dwm .dwm-x{width:44px;height:44px;border:2.5px solid #1E3A34;border-radius:12px;background:#E4F5EF;font-size:26px;line-height:1;cursor:pointer;color:#1E3A34}
#dwm .dwm-links{display:flex;flex-direction:column}
#dwm .dwm-links>a,#dwm .dwm-groups summary{display:block;text-decoration:none;color:inherit;padding:13px 6px;border-bottom:2px dashed #D9F2C4;font:700 21px Fredoka,sans-serif;cursor:pointer}
#dwm .dwm-links>a:hover,#dwm .dwm-groups summary:hover{background:#E4F5EF}
#dwm .dwm-groups summary{list-style:none}#dwm .dwm-groups summary::-webkit-details-marker{display:none}
#dwm .dwm-groups summary::after{content:" \25BE";font-size:.8em}#dwm .dwm-groups[open] summary::after{content:" \25B4"}
#dwm .dwm-groups div{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px 0 10px}
#dwm .dwm-sub{text-decoration:none;color:#3d5a52;padding:8px 10px;border-radius:10px;font-size:16px}
#dwm .dwm-sub:hover{background:#E4F5EF}
#dwm .dwm-cta{display:block;text-align:center;text-decoration:none;margin:16px 0 4px;background:#FF6A3D;color:#fff;padding:14px;border-radius:999px;font:700 18px Fredoka,sans-serif;border:2.5px solid #1E3A34;box-shadow:3px 3px 0 #1E3A34}
@media (min-width:600px){#dwm{left:auto;width:420px}}
@media (max-width:1024px){header.top .nav{display:none!important}#dwm-btn{display:inline-flex}}
.dcard .chip{background:#fff;color:#1E3A34;border-color:#1E3A34}.dcard .chip.meat{background:#FFD3CC}.dcard .chip.plant{background:#D9F2C4}.dcard .chip.fish{background:#D2E6FB}.dcard .chip.mix,.dcard .chip.cousin{background:#FFF1C2}

.tlbar .p{background:#E6DCFB}

/* language picker (desktop nav) */
.langpick{position:relative}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;font-weight:800;padding:7px 10px;border-radius:999px}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{background:var(--bg2)}
.langlist{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#fff;color:#1E3A34;border:3px solid #1E3A34;border-radius:16px;box-shadow:5px 5px 0 #1E3A34;padding:8px;display:grid;grid-template-columns:repeat(3,max-content);gap:2px;max-height:70vh;overflow:auto}
.langlist a{text-decoration:none;padding:7px 10px;border-radius:10px;font-weight:700;font-size:15px;white-space:nowrap}
.langlist a:hover,.langlist a[aria-current]{background:#E4F5EF}
.footlang{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}.footlang a{font-weight:700;font-size:14px}

/* AI sticker icons (webp): they can't blink like the drawn SVGs, so they bob and wiggle instead */
.dcard .pic img[src*=".webp"]{object-fit:contain;transform-origin:50% 90%;animation:dwbob 3.4s ease-in-out infinite}
@keyframes dwbob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-1.5deg)}60%{transform:translateY(0) rotate(1deg)}}
.dcard .pic:hover img[src*=".webp"]{animation:wig .5s ease-in-out}
.dc:hover img[src*=".webp"],.parade a:hover img,.quizband:hover .imgs img{animation:wig .5s ease-in-out}
.walk img[src*=".webp"]{animation:dwstep .6s ease-in-out infinite alternate}
@keyframes dwstep{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(2deg)}}
img[src*=".webp"]{object-fit:contain}

/* Most asked questions (accordion) */
.faq{display:grid;gap:12px;max-width:860px;margin:0 auto}
.qa{padding:0;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;font-family:var(--fh,inherit);font-weight:800;font-size:1.12rem;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";margin-left:auto;font-size:1.6rem;line-height:1;color:var(--lava);transition:transform .2s}
.qa[open] summary:after{transform:rotate(45deg)}
.qa .qm{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun);border:3px solid #1E3A34;color:#1E3A34;font-weight:900;font-size:1.1rem}
.qa:nth-child(3n+2) .qm{background:var(--leaf)}.qa:nth-child(3n) .qm{background:var(--sky);color:#fff}
.qa p{margin:0;padding:0 18px 16px 64px;font-size:1.05rem;line-height:1.55}
.qa[open]{box-shadow:6px 6px 0 var(--lava)}
@media (max-width:600px){.qa p{padding-left:18px}}

/* size in kid terms */
.kidmath{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kidmath span{display:flex;align-items:center;gap:8px;background:#FFF6D8;color:#1E3A34;border:3px solid #1E3A34;border-radius:999px;padding:7px 14px 7px 8px;font-weight:800;box-shadow:3px 3px 0 #1E3A34}
.kidmath span:nth-child(2){background:#E6DCFB}.kidmath span:nth-child(3){background:#D9F2C4}
.kidmath i{font-style:normal;font-size:1.35rem;line-height:1}

/* compare with me */
.cmpme{margin-top:18px;background:#FFF6D8;color:#1E3A34;border:3px dashed #1E3A34;border-radius:20px;padding:16px 18px}
.cmpme h3{margin:0 0 10px;font-size:1.25rem}
.cmpme form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cmpme label{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.95rem}
.cmpme label span{display:flex;align-items:center;gap:6px}
.cmpme input{width:96px;font:inherit;font-size:1.1rem;padding:8px 10px;border:3px solid #1E3A34;border-radius:12px;background:#fff;color:#1E3A34}
.cmpme .btn{margin:0}
.cm-out{margin-top:12px}
.cm-out p{margin:6px 0;font-weight:800;font-size:1.1rem}
.cm-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.cm-row span{flex:none;width:110px;font-weight:800;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-bar{height:22px;border:2.5px solid #1E3A34;border-radius:11px}
.cm-bar.me{background:#9C7BE0}.cm-bar.it{background:#FF6A3D}
.cmpme .fine{margin:10px 0 0;font-size:.85rem;opacity:.75}
.cm-units{display:inline-flex;border:3px solid #1E3A34;border-radius:999px;overflow:hidden;margin:0 0 10px}
.cm-units button{font:inherit;font-weight:800;font-size:.9rem;padding:6px 14px;border:0;background:#fff;color:#1E3A34;cursor:pointer}
.cm-units button[aria-pressed="true"]{background:#1E3A34;color:#FFF6D8}
.cmpme input[name=ft],.cmpme input[name=in]{width:64px}

/* Ask Rex */
.askrex{padding:18px 20px;background:linear-gradient(135deg,#E6F7EE,#FFF6D8);color:#1E3A34}
.ar-head{display:flex;gap:14px;align-items:center}
.ar-head img{flex:none;animation:dwbob 3.4s ease-in-out infinite}
.ar-head h2{margin:0;font-size:1.4rem}.ar-head p{margin:4px 0 0;font-size:.95rem;opacity:.8}
.askrex form{display:flex;gap:10px;margin-top:14px}
.askrex input{flex:1;min-width:0;font:inherit;font-size:1.05rem;padding:10px 14px;border:3px solid #1E3A34;border-radius:14px;background:#fff;color:#1E3A34}
.askrex .btn{margin:0}
.ar-out:empty{display:none}
.ar-out{margin-top:12px}
.ar-q{margin:0 0 8px auto;max-width:85%;width:fit-content;background:#1E3A34;color:#fff;padding:8px 14px;border-radius:16px 16px 4px 16px;font-weight:700}
.ar-a{margin:0;max-width:90%;width:fit-content;background:#fff;border:3px solid #1E3A34;padding:10px 14px;border-radius:16px 16px 16px 4px;font-weight:700;font-size:1.05rem;line-height:1.5}
.ar-left{margin:6px 0 0;font-size:.85rem;opacity:.7}
.askrex .fine{margin:12px 0 0;font-size:.82rem;opacity:.72}

/* floating buttons: Ask Rex (AI helper) + Feed Rex (tip jar) */
.tipfloat{display:none}
.fabs{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fab{display:flex;align-items:center;gap:8px;border:2.5px solid #1E3A34;border-radius:999px;box-shadow:3px 3px 0 #1E3A34;padding:3px 16px 3px 4px;color:#1E3A34;text-decoration:none;font-family:Fredoka,sans-serif;line-height:1.05}
.fab b{display:block;font-weight:700;font-size:15px}
.fab small{display:block;font:600 11px Nunito,sans-serif;opacity:.75}
.fab:hover{transform:translate(-1px,-1px)}
.fab-feed{background:#FFC93C}
.fab-feed img{width:36px;height:36px}
.fab-ask{background:#B9F0D2}
.fab-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #1E3A34;font-size:18px}
@media print{.fabs{display:none}}
@media (max-width:640px){.fabs{right:10px;bottom:10px;gap:6px}.fab{padding:2px 12px 2px 3px}.fab b{font-size:13px}.fab small{font-size:10px}.fab-feed img,.fab-ic{width:30px;height:30px}}

/* Oskar 4 Oct: centre things on wide screens, incl. the last row of tiles (tip jar stays left) */
.tiles{display:flex;flex-wrap:wrap;justify-content:center}
.tiles>*{flex:0 0 calc((100% - 70px)/6);min-width:0}
@media (max-width:1000px){.tiles>*{flex-basis:calc((100% - 42px)/4)}}
@media (max-width:720px){.tiles>*{flex-basis:calc((100% - 28px)/3)}}
@media (max-width:480px){.tiles>*{flex-basis:calc((100% - 14px)/2)}}
.era{text-align:center}.era .row{justify-content:center}
.promise .card{text-align:center}
.soon{text-align:center;justify-content:center;flex-direction:column}
.soon>div{flex:none!important}
.kin{display:flex;flex-wrap:wrap;justify-content:center}
.kin>*{flex:0 0 calc((100% - 50px)/6);min-width:0}
@media (max-width:1000px){.kin>*{flex-basis:calc((100% - 30px)/4)}}
@media (max-width:720px){.kin>*{flex-basis:calc((100% - 20px)/3)}}
@media (max-width:480px){.kin>*{flex-basis:calc((100% - 10px)/2)}}
footer .wrap{text-align:center}
footer .footlang{justify-content:center}
.size .szh{margin:18px 0 8px;font-size:1.15rem}
.size .szh:first-of-type{margin-top:4px}
.hnote{margin:4px 0 0;font-size:.85rem;opacity:.7;text-align:center}
.wrow{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.wicons{font-size:34px;line-height:1.1;text-align:center;letter-spacing:2px;max-width:560px}
.wicons .half{font-style:normal;opacity:.45}
.wrow b{font-family:Fredoka,sans-serif;font-size:1.1rem}

/* quiz result: big card on desktop, centred (Oskar: at least 600 px) */
@media (min-width:761px){.qz-results{max-width:1060px}#pm-share{grid-template-columns:minmax(0,620px);justify-content:center}.pm-btns{width:100%}}
#pm-top{max-width:1030px;margin-left:auto;margin-right:auto}
.qz-results>.kicker{text-align:center}
.brand img{width:44px;height:44px;flex:none;object-fit:contain;transform:scaleX(-1)}
.dwm-brand img{width:36px;height:36px;object-fit:contain;transform:scaleX(-1)}
@media (max-width:640px){.brand img{width:36px;height:36px}}
@media (max-width:360px){.brand{font-size:0}}
.cm-ex{font-size:.9rem!important;font-weight:700!important;opacity:.75;font-style:italic}
.qz-results h2{text-align:center}
.fab-ask{background:#E6DCFB}
.fab-ask img,.fab-feed img{width:36px;height:36px;object-fit:contain}
@media (max-width:640px){.fab-ask img,.fab-feed img{width:30px;height:30px}}
.tj-pic img{object-fit:contain}
/* long names never break mid-word: the font shrinks with the name length */
.dcard h1{word-break:normal;overflow-wrap:normal;font-size:clamp(26px,calc(6.5vw / var(--k,1)),calc(72px / var(--k,1)))}
/* Fula: one entry, opens a second choice of variants */
.langlist details.llgroup{grid-column:1/-1}
.langlist details.llgroup>summary{list-style:none;cursor:pointer;padding:7px 10px;border-radius:10px;font-weight:700;font-size:15px;white-space:nowrap}
.langlist details.llgroup>summary::-webkit-details-marker{display:none}
.langlist details.llgroup>summary:hover,.langlist details.llgroup[open]>summary{background:#E4F5EF}
.langlist details.llgroup a{display:inline-block;margin-left:14px}

/* ===== quiz v2 (4 Oct): Yes/No answers, "My 5 superpowers" + "My top 5 NO-NOs" lists, play again button ===== */
.qz-opts.qz-yn{grid-template-columns:1fr 1fr}
.qz-opts.qz-yn button{text-align:center;font-size:22px;padding:20px 12px}
.qz-lists{display:grid;grid-template-columns:1fr;gap:18px;max-width:1030px;margin:0 auto 22px}
@media (min-width:700px){.qz-lists{grid-template-columns:1fr 1fr}}
.qz-list{background:#fff;color:#1E3A34;border:3px solid #1E3A34;border-radius:22px;box-shadow:5px 5px 0 #1E3A34;padding:18px 18px 12px}
.qz-list h3{font:700 22px/1.2 Fredoka,sans-serif;margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}
.qz-good{background:#EAF8DF}.qz-good h3{color:#1F6B52}
.qz-bad{background:#FFEDE8}.qz-bad h3{color:#D9483B}
.qz-list ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qz-list li{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #1E3A34;border-radius:16px;padding:8px 12px;font-weight:800;font-size:17px;line-height:1.25}
.qz-list li .e{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:24px;border-radius:50%;background:#FFF1C2;border:2px solid #1E3A34}
.qz-bad li:first-child{background:#FF6A3D;color:#fff}
.qz-list li em{display:block;font:700 12px Fredoka,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.5px;color:#FFF1C2}
.qz-again-top{text-align:center;margin:0 0 30px}

/* ===== Top speed + Dino TOP lists (agent "tops", Oskar 4 Oct) ===== */
.spd{display:grid;gap:8px;margin:6px 0 4px}
.spd-r{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"i t" "i b";column-gap:10px;align-items:center}
.spd-i{grid-area:i;font-size:30px;line-height:1;text-align:center}.spd-i img{width:44px;height:44px;object-fit:contain;display:block}
.spd-t{grid-area:t;font-weight:700;font-size:15px}.spd-t>span{white-space:nowrap}.spd-t b{font-family:Fredoka,sans-serif}
.spd-b{grid-area:b;height:16px;background:var(--bg2);border-radius:999px;overflow:hidden;border:2px solid var(--line)}
.spd-b i{display:block;height:100%;background:#4F9BE8;border-radius:999px}
.spd-r.me .spd-b i{background:#FF6A3D}.spd-r.me .spd-t b{color:#FF6A3D}
.topband{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:22px;background:#4F9BE8;color:#fff}
.topband h2{margin:0 0 4px;color:#fff;text-shadow:2px 2px 0 #1E3A34}.topband p{margin:0;font-weight:700}
.topband .imgs{display:flex}.topband .imgs img{width:70px;height:70px;margin-right:-10px}
.topband:hover .imgs img{animation:wig .5s ease-in-out}
.tp-pic{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.tp-lt{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:20px;background:#FFF1C2;color:#1E3A34}
.tp-lt>div:first-child{flex:1;min-width:240px}.tp-lt h2{margin:0 0 6px}.tp-lt p{margin:0;font-weight:700}
.tp-lt-pics{display:flex;gap:10px;flex:1;min-width:260px}.tp-lt-pics svg{background:#fff;border:2px solid #1E3A34;border-radius:14px;padding:6px}
.tp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tp-card{display:flex;flex-direction:column;gap:4px;padding:14px;text-decoration:none;transition:transform .12s,box-shadow .12s}
.tp-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.tp-card .tp-pic{max-width:180px;background:#fff;border-radius:12px}
.tp-card>b{font-size:24px;margin-top:6px}.tp-card>span{font-weight:700;color:var(--muted)}
.tp-card small{font-weight:700;color:var(--muted)}
.tp-3{display:flex;margin-top:4px}.tp-3 img{width:52px;height:52px;object-fit:contain;margin-right:-6px}
.tp-hero{padding:20px 0 6px}
.tp-ex{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px;background:#FFF1C2;color:#1E3A34}
.tp-ex .tp-pic{flex:0 1 230px;background:#fff;border:2px solid #1E3A34;border-radius:14px;padding:6px}
.tp-ex>div{flex:1;min-width:230px}.tp-ex h1{font-size:clamp(30px,5.5vw,52px);margin:8px 0}.tp-ex p{margin:0;font-weight:700}
.tp-more{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.tp-more .chip{text-decoration:none}.tp-more .chip.on{background:var(--sun);color:#1E3A34}
.tp-h2{font-size:clamp(24px,4vw,34px);margin:22px auto 10px;max-width:860px}
.tp-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;max-width:860px}
.tp-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"r n v" "r b b";column-gap:10px;row-gap:4px;align-items:center;
  background:var(--card);border:2.5px solid var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--line);padding:8px 12px}
.tp-rk{grid-area:r;font:700 22px Fredoka,sans-serif;text-align:center;color:var(--muted)}
.tp-top .tp-rk{color:#1E3A34;background:var(--sun);border:2px solid var(--line);border-radius:999px;width:36px;height:36px;line-height:32px}
.tp-n{grid-area:n;display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.tp-n img{width:52px;height:52px;object-fit:contain;flex:none}
.tp-n span{min-width:0}.tp-n b{display:block;font:700 18px Fredoka,sans-serif;overflow-wrap:break-word}.tp-n small{display:block;font-weight:700;color:var(--muted);font-size:13px}
.tp-c{font-size:11px;padding:0 7px;margin-left:4px;vertical-align:1px;white-space:nowrap;display:inline-block;line-height:1.5}
.tp-v{grid-area:v;text-align:right;font-weight:700}.tp-v b{font-family:Fredoka,sans-serif;font-size:16px;white-space:nowrap}.tp-v small{display:block;color:var(--muted);font-size:13px}
.tp-est{display:block;font-size:12px;color:var(--muted)}
.tp-bar{grid-area:b;height:14px;background:var(--bg2);border-radius:999px;overflow:hidden;border:2px solid var(--line)}
.tp-bar i{display:block;height:100%;background:#FF6A3D;border-radius:999px}
.tp-ratio .tp-row{grid-template-columns:40px minmax(0,1fr) 132px;grid-template-areas:"r n s" "r v s"}.tp-ratio .tp-v{text-align:left}
.tp-lh{grid-area:s;width:132px;height:auto;max-height:140px;align-self:end}
.tp-ev{columns:2;column-gap:24px;padding-left:18px}@media (max-width:560px){.tp-ev{columns:1}}
.tp-fine{text-align:center;max-width:720px;margin:20px auto}
@media (max-width:520px){
  .tp-row{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"r n" "r v" "r b";row-gap:2px;padding:7px 10px}
  .tp-v{text-align:left;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}.tp-v b{white-space:normal;font-size:15px}.tp-est{display:inline}
  .tp-ratio .tp-row{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"r n" "r v" "r s"}
  .tp-ratio .tp-v{display:block}.tp-lh{width:150px;max-height:110px;justify-self:start}
  .tp-n b{font-size:16px}.tp-rk{font-size:17px}.tp-top .tp-rk{width:28px;height:28px;line-height:24px;font-size:16px}
  .tp-n img{width:44px;height:44px}
}

/* Ask Rex picker on pages without a dino (Oskar 5 Oct) */
.askpick{position:fixed;inset:0;z-index:60;background:rgba(20,30,28,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.askpick[hidden]{display:none}
.askpick-box{position:relative;width:100%;max-width:520px;max-height:85vh;overflow:auto;padding:20px 18px 18px;border-radius:22px}
.askpick-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:inherit}
.askpick .ar-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.askpick .ar-head h2{margin:0}.askpick .ar-head p{margin:2px 0 0;opacity:.75}
.askpick-q{width:100%;box-sizing:border-box;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid #1E3A34}
.askpick-res a,.askpick-fam a{display:flex;align-items:center;gap:10px;padding:8px 6px;font-weight:700;text-decoration:none;color:inherit}
.askpick-res a img{width:40px;height:40px}
.askpick-fam{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.askpick-fam a{flex-direction:column;text-align:center;font-size:14px;border-radius:14px}.askpick-fam a:hover,.askpick-res a:hover{background:rgba(255,201,60,.25)}
@media(min-width:700px){.askpick{align-items:center}}
.askpick-fam span{overflow-wrap:anywhere;font-size:13px;max-width:100%}
/* one size card: length, weight, height, top speed (Oskar 5 Oct) */
.qsize{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-content:start}
.qsize .qrow{min-width:0}
.qsize .qrow+.qrow{border:0}
.qsize .val{font-size:20px}
@media(max-width:520px){.qsize{grid-column:1/-1}}
/* What did it eat? (Oskar 5 Oct) + clickable Ate chip */
.qeat{grid-column:1/-1;display:flex;gap:16px;align-items:center}
.qeat .eat-em{font-size:34px;line-height:1.1;letter-spacing:2px;flex:0 0 auto;max-width:40%}
.qeat .eat-a{font-weight:700;font-size:17px;line-height:1.4;margin-top:4px}
a.chip{text-decoration:none;color:inherit;cursor:pointer}a.chip:hover{filter:brightness(.95);transform:translateY(-1px)}
@media(max-width:520px){.qeat{flex-direction:column;align-items:flex-start}.qeat .eat-em{max-width:none}}
/* search results readable in the dark hero and above the dino parade (Oskar 5 Oct) */
.search{z-index:40}.results{z-index:50;background:#fff}.results,.results a{color:#1E3A34}
/* quick facts: 3 tidy columns on desktop (Lived, Fossils, Length / Weight, Height, Speed) */
@media(min-width:860px){.quick{grid-template-columns:repeat(3,1fr)}}
.imp2{font-weight:700;opacity:.75;font-size:.8em}