/* The playful layer is optional; the static page is always the baseline. */
body{--accent:#79cdff;--earth:#bed16d;--water:#79cdff;--fire:#ffa06c;--air:#d4c6ff}
body[data-secret-theme=neon]{--ink:#eefff9;--muted:#a7c9bd;--line:#36554e;--accent:#7cf7cd}
body[data-secret-theme=pastel]{--ink:#fff0f9;--muted:#c7afc7;--line:#514250;--accent:#e8b7df}
body[data-secret-mode=party]{--accent:#eda7df;--line:#644361}
body[data-secret-mode=retro]{--bg:#101910;--surface:#182418;--ink:#e4f4ca;--muted:#abc28f;--line:#4b6242;--accent:#c0e88d}
body[data-secret-mode=matrix]{--bg:#08130d;--surface:#102119;--ink:#d1f9dd;--muted:#8cbca0;--line:#294d39;--accent:#7ee8a1}
body[data-secret-mode=retro]::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#0002 3px 4px)}
body[data-motion=on] .art-card{animation:family-arrive .7s both, family-float 5.5s .7s ease-in-out infinite}
body[data-motion=on] .art-girl{animation-delay:.12s,.82s}
body[data-motion=on] .art-kid{animation-delay:.24s,.94s}
.family-art.motion-paused .art-card{animation-play-state:paused!important}
@keyframes family-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes family-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
body[data-motion=on] .art-card img,body[data-motion=on] .collection-image{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .2s ease-out}
body[data-motion=on][data-secret-mode=party] .art-card,body[data-motion=on][data-secret-mode=party] .element-preview{animation-name:party-border;animation-duration:6s;animation-iteration-count:infinite}
@keyframes party-border{0%,100%{border-color:#eda7df;box-shadow:0 0 18px #eda7df25}33%{border-color:#79cdff;box-shadow:0 0 18px #79cdff25}66%{border-color:#bed16d;box-shadow:0 0 18px #bed16d25}}
.element-lab{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:center;margin-block:0 74px;padding-top:28px}
.element-preview{padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;position:relative}
.element-preview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;image-rendering:pixelated}
.element-preview figcaption{text-align:center;font-size:14px;margin-top:8px;color:var(--muted)}
.element-copy h2{font-size:68px;line-height:.92;margin-bottom:16px}
.element-copy>p{color:var(--muted);font-size:16px}
.element-picker{display:flex;flex-wrap:wrap;gap:10px;margin-block:22px 16px}
.element-picker button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:10px 16px;min-height:46px;cursor:pointer}
.element-picker button[aria-pressed=true]{border-color:var(--element-color);background:color-mix(in srgb,var(--element-color) 12%,var(--bg))}
.element-picker button span{width:8px;height:8px;background:var(--element-color);box-shadow:3px -3px 0 color-mix(in srgb,var(--element-color) 45%,transparent)}
[data-element=Earth]{--element-color:var(--earth)}[data-element=Water]{--element-color:var(--water)}[data-element=Fire]{--element-color:var(--fire)}[data-element=Air]{--element-color:var(--air)}
.element-copy .element-note{font-size:14px;max-width:48ch}.element-note a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.playful-settings{display:flex;gap:24px;margin-top:20px}.playful-settings button{font-size:13px;color:var(--muted);background:none;border:0;border-bottom:1px dotted var(--muted);padding:8px 0;min-height:44px;cursor:pointer}.playful-settings button:hover{color:var(--ink)}.motion-control:disabled{cursor:default;opacity:.75}
.nav-secrets{background:none;color:var(--accent);border:1px dashed var(--accent);border-radius:8px;min-height:44px;padding:8px 14px;cursor:pointer;font-size:14px;white-space:nowrap}.nav-secrets:hover{background:var(--surface);color:var(--ink)}
.secret-console{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:28px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 100px #0008}
.secret-console::backdrop{background:#000b}
.console-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.console-heading h2{font-size:52px;line-height:.9}.secret-console button{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;min-height:44px;padding:10px 14px;cursor:pointer}.secret-console button:hover{border-color:var(--accent)}.console-close{font-size:26px;line-height:1;width:44px;flex:none}
.console-intro{font-size:15px;color:var(--muted);margin-bottom:20px}.code-form label{font-size:14px;display:block;margin-bottom:6px}.code-form>div{display:flex;gap:8px}.code-form input{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;min-width:0;width:100%;padding:10px 12px;min-height:46px;font:18px/1.4 var(--body)}
.code-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-block:18px}.code-grid button{font-size:13px;padding-inline:5px}.code-grid .is-found{border-color:var(--accent);color:var(--accent)}
.console-feedback{font-size:14px;min-height:44px;color:var(--accent);margin-bottom:14px}.console-progress{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid var(--line);padding-top:14px}.console-progress>span:last-child{color:var(--muted)}.console-hint{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}.console-actions{display:flex;justify-content:space-between;gap:8px;margin-top:20px}.console-actions button{font-size:14px}
#pixel-stage{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:45;contain:strict}
.pixel-particle{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity;image-rendering:pixelated}.pixel-particle.nft{width:64px;height:64px;border:2px solid #fff9;border-radius:5px;object-fit:cover}.pixel-particle.spark{width:7px;height:7px;background:var(--particle-color,#79cdff)}.pixel-particle.glyph{font:24px/1.15 var(--pixel);color:#79efc9;white-space:pre;text-shadow:0 0 8px #79efc944}.pixel-particle.matrix-stream{opacity:.13;animation:matrix-stream 9s linear infinite}
@keyframes matrix-stream{from{translate:0 -100%}to{translate:0 100vh}}
.egg-toast{position:fixed;z-index:46;left:50%;top:96px;translate:-50% 0;max-width:calc(100% - 32px);width:max-content;background:#101011ed;color:#f7f5ed;border:1px solid #626166;border-radius:8px;padding:10px 16px;font-size:13px;pointer-events:none;box-shadow:0 5px 20px #0004}
html[data-motion=off]{scroll-behavior:auto!important}
body[data-motion=off] *,body[data-motion=off] *::before,body[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:820px){.element-lab{grid-template-columns:180px minmax(0,1fr);gap:32px;margin-bottom:56px}.element-copy h2{font-size:60px}.element-picker{gap:8px}.element-picker button{padding-inline:12px}.egg-toast{top:82px}}
@media(max-width:600px){.element-lab{grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:start;padding-top:8px;margin-bottom:42px}.element-preview{padding:5px;border-radius:8px}.element-preview figcaption{font-size:12px;margin-top:5px}.element-copy h2{font-size:42px;line-height:1;margin-bottom:10px}.element-copy>p{font-size:14px}.element-picker{display:grid;grid-template-columns:1fr 1fr;margin-block:14px}.element-picker button{font-size:13px;padding:9px 7px;gap:7px}.element-copy .element-note{font-size:12px}.secret-console{padding:20px}.console-heading h2{font-size:44px}.console-progress{flex-wrap:wrap;gap:6px}.egg-toast{top:76px;font-size:12px}.pixel-particle.nft{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#pixel-stage{display:none}}