@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:#1E3A34;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}