:root {
  --bg: #06120d; --panel: rgba(10, 26, 19, .78); --line: rgba(160, 230, 190, .14); --line2: rgba(160, 230, 190, .28);
  --text: #e8f3ec; --muted: #9fb8aa; --faint: #6f8a7c; --green: #6ee7a0; --green-d: #34c27a; --amber: #f5c26b;
  --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, sans-serif;
  --glow: #6ee7a0; --pend: #ffd36b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--green); }

.app { display: grid; height: 100vh; min-height: 640px; overflow: hidden;
  grid-template: "top top top" auto "intro stage side" 1fr "time time time" auto / minmax(280px, 25vw) 1fr minmax(320px, 26vw); }

/* ---------- header ---------- */
.top { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px 0; position: relative; z-index: 3; }
.brand { font: 700 30px/1 var(--serif); color: #f3e2b8; text-decoration: none; letter-spacing: .01em; }
.net { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); }
.net i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.net[data-state="live"] i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.net[data-state="off"] i { background: #e5484d; }

/* ---------- left ---------- */
.intro { grid-area: intro; padding: 24px 12px 16px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; min-height: 0; }
.kicker { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font: 700 clamp(28px, 2.6vw, 46px)/1.08 var(--serif); }
h1 em { font-style: normal; color: var(--green); }
.lede { margin: 0; color: var(--muted); max-width: 34em; }
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: baseline; }
.steps b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.steps span { color: var(--muted); font-size: 13px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 6px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stats div { background: var(--panel); padding: 10px 14px; }
.stats dt { font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.stats dd { margin: 2px 0 0; font: 600 20px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.grow { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- the stage ---------- */
.stage { grid-area: 1 / 1 / 4 / 4; position: relative; overflow: hidden; z-index: 0; }
.sky { position: absolute; inset: 0; transition: background 1.2s ease; background: var(--sky); }
.stage[data-sky="night"] { --sky: radial-gradient(60% 45% at 62% 18%, rgba(190, 220, 255, .22), transparent 70%), radial-gradient(4% 4% at 64% 12%, #f4f1dc, rgba(244, 241, 220, .15) 60%, transparent), linear-gradient(#081a22, #0a2218 55%, #06120d); }
.stage[data-sky="dusk"] { --sky: radial-gradient(70% 50% at 50% 55%, rgba(255, 170, 90, .35), transparent 70%), linear-gradient(#2a1838, #5b2d3a 40%, #2b2a14 70%, #0b130c); }
.stage[data-sky="dawn"] { --sky: radial-gradient(70% 50% at 50% 40%, rgba(255, 190, 210, .35), transparent 70%), linear-gradient(#1b2850, #6d4a78 45%, #2c3a2a 75%, #0b130c); }
.stage[data-sky="aurora"] { --sky: radial-gradient(80% 30% at 40% 15%, rgba(110, 231, 160, .35), transparent 70%), radial-gradient(60% 25% at 70% 25%, rgba(167, 139, 250, .3), transparent 70%), linear-gradient(#050d1c, #0b1a28 50%, #06120d); }
.stage[data-sky="deep"] { --sky: radial-gradient(50% 40% at 50% 50%, rgba(80, 160, 90, .25), transparent 70%), linear-gradient(#0a1f12, #0d2a17 50%, #050f09); }
.stage[data-sky="storm"] { --sky: radial-gradient(60% 40% at 30% 10%, rgba(200, 210, 230, .16), transparent 70%), linear-gradient(#141a22, #1d2630 45%, #10161a 75%, #07090b); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: radial-gradient(45% 60% at 50% 100%, rgba(30, 60, 40, .9), transparent 70%), linear-gradient(transparent, rgba(4, 10, 7, .9)); }

.creature { position: absolute; left: 50%; bottom: 14vh; margin: 0; width: min(30vw, 42vh); transform: translateX(-50%) scale(var(--scale, .84)); transform-origin: 50% 100%; transition: transform 1.2s ease; }
/* the creature is a puppet cut from one picture: the head (with eyelids and a mouth) moves on the trunk */
.puppet { position: relative; filter: var(--fur, none) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); transition: filter 1.2s ease; }
.creature img { display: block; width: 100%; height: auto; }
/* the feet and the rock stay put: only the body above the hips moves, pivoting where it meets them */
.legs { position: absolute; left: 0; top: 0; width: 100%; -webkit-mask-image: linear-gradient(transparent 78%, #000 82%); mask-image: linear-gradient(transparent 78%, #000 82%); }
/* the trunk is the picture with its head area filled by soft dark fur (tools/rig.py), so a turning head never shows a second head */
.trunk { -webkit-mask-image: linear-gradient(#000 80%, transparent 84%); mask-image: linear-gradient(#000 80%, transparent 84%); }
/* the head: events play on .head (CSS), the idle life steers .gaze through --ht/--hx/--hy (app.js, "life") */
.head { position: absolute; inset: 0; transform-origin: 59.2% 50.9%;
  -webkit-mask-image: radial-gradient(39.5% 25% at 55.3% 26.3%, #000 96%, transparent 100%); mask-image: radial-gradient(39.5% 25% at 55.3% 26.3%, #000 96%, transparent 100%); }
.gaze { position: absolute; inset: 0; transform-origin: 59.2% 50.9%; transform: rotate(var(--ht, 0deg)) translate(var(--hx, 0%), var(--hy, 0%)); transition: transform var(--hd, .8s) cubic-bezier(.45, 0, .2, 1); }
.gaze > img { display: block; width: 100%; height: auto; }
/* eyes: each eye's inside (tools/rig.py) slides within a fixed eye shape; the eyes lead, the head follows */
@property --lid { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --blink { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --squint { syntax: "<number>"; inherits: true; initial-value: 0; }
.creature { --lid: 0; --squint: 0; transition: transform 1.2s ease, bottom .8s ease, --lid .45s ease, --squint .35s ease; }
.eye, .lid { position: absolute; -webkit-mask-image: radial-gradient(31.5% 31.5% at 50% 50%, #000 86%, transparent 98%); mask-image: radial-gradient(31.5% 31.5% at 50% 50%, #000 86%, transparent 98%); }
.eye.l, .lid.l { left: 41.97%; top: 25.88%; width: 21.18%; height: 14.39%; }
.eye.r, .lid.r { left: 68.03%; top: 21.49%; width: 18.82%; height: 13.77%; }
.eye img { display: block; width: 100%; height: 100%; transform: translate(var(--ex, 0%), var(--ey, 0%)); transition: transform var(--ed, .09s) cubic-bezier(.3, 0, .2, 1); }
.lid { -webkit-mask-image: radial-gradient(34.5% 34.5% at 50% 50%, #000 92%, transparent 100%); mask-image: radial-gradient(34.5% 34.5% at 50% 50%, #000 92%, transparent 100%); }
/* the upper lid: skin with a lash line that slides down; the lower lid rises a little for a smile */
.lid b { position: absolute; left: 0; right: 0; top: 0; height: 84%; border-radius: 0 0 50% 50% / 0 0 26% 26%;
  background: radial-gradient(42% 22% at 50% 74%, rgba(255, 236, 244, .22), transparent 75%), linear-gradient(#5c4853, #7c6672 48%, #846e7a 70%, #6a5561);
  box-shadow: inset 0 -5px 1px -2px rgba(34, 16, 22, .95), inset 0 -9px 6px -6px rgba(34, 16, 22, .5), 0 3px 3px rgba(0, 0, 0, .4);
  transform: translateY(calc(-78% + 62% * max(var(--lid), var(--blink)))); }
.lid s { position: absolute; left: -6%; right: -6%; bottom: 0; height: 50%; border-radius: 50% 50% 0 0 / 44% 44% 0 0;
  background: radial-gradient(40% 30% at 50% 40%, rgba(255, 236, 244, .14), transparent 80%), linear-gradient(#6a5561, #85707c 35%, #8d7783);
  box-shadow: inset 0 3px 2px -1px rgba(36, 18, 24, .75);
  transform: translateY(calc(63% - max(var(--squint) * 30%, max(var(--lid), var(--blink)) * 46%))); }
.creature.blink { animation: blink .28s linear; }
.creature.blink2 { animation: blink .28s linear, blink .26s linear .36s; }
@keyframes blink { 0% { --blink: 0; animation-timing-function: cubic-bezier(.5, 0, 1, 1); } 30%, 42% { --blink: 1; animation-timing-function: cubic-bezier(0, 0, .3, 1); } 100% { --blink: 0; } }
.mouth { position: absolute; left: 69.1%; top: 39.4%; width: 8%; height: 2.6%; transform: translate(-50%, -50%) scaleY(0); border-radius: 40% 40% 50% 50%; background: radial-gradient(60% 70% at 50% 75%, #b4504a, #3a0f0d 70%); }
.stage[data-mood="sleepy"] .creature { --lid: .88; }
.stage[data-mood="sleepy"] .head { animation: doze 6.5s ease-in-out infinite; }
@keyframes doze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg) translateY(.8%); } }
.zzz { position: absolute; left: 82%; top: 12%; display: none; font: 600 20px var(--serif); color: #cfe9ff; }
.zzz b { position: absolute; opacity: 0; animation: zz 3.6s ease-out infinite; } .zzz b:nth-child(2) { animation-delay: 1.2s; } .zzz b:nth-child(3) { animation-delay: 2.4s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(26px, -60px) scale(1.3); } }
.stage[data-mood="sleepy"] .zzz { display: block; }

/* eating: the head leans to the food and the mouth chews */
.creature.eat .head { animation: munch 2.6s ease-in-out; }
.creature.eat .mouth { animation: chew .32s ease-in-out 8 .25s; }
.creature.eat { --lid: .42; --squint: .5; }
@keyframes munch { 0% { transform: rotate(0); } 12% { transform: rotate(-2.6deg) translate(-1.4%, 1.2%); } 20%, 85% { transform: rotate(-1.2deg) translateY(.6%); } 30%, 40%, 50%, 60%, 70% { transform: rotate(-1.6deg) translateY(1.1%); } 100% { transform: rotate(0); } }
@keyframes chew { 0%, 100% { transform: translate(-50%, -50%) scaleY(.15); } 50% { transform: translate(-50%, -50%) scaleY(1); } }
.snack { position: absolute; width: 4.5%; aspect-ratio: 1; border-radius: 50%; z-index: 4; pointer-events: none; box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .25); animation: snack .9s cubic-bezier(.3, -.3, .6, 1) forwards; }
@keyframes snack { 0% { left: -14%; top: 70%; transform: scale(1.3); } 100% { left: 66.8%; top: 37.5%; transform: scale(.5); opacity: .4; } }

/* the kitchen: while a meal waits for its block, Agorzilla's food is made in front of it */
.kitchen { --gx: 330px; --gy: -300px; position: absolute; left: -40%; bottom: -3%; width: 62%; z-index: 3; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.kitchen svg { display: block; width: 100%; height: auto; overflow: visible; }
.kitchen[data-k] { opacity: 1; transform: none; }
.kitchen .slices circle, .kitchen .glass { opacity: 0; }
.kitchen .knife { transform-box: fill-box; transform-origin: 50% 0; }
.kitchen .blade { transform-box: fill-box; transform-origin: center; }
.kitchen .juice { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.05); }
.kitchen[data-k="prep"] .knife { animation: chop .5s ease-in-out infinite; }
.kitchen[data-k="prep"] .slices circle { animation: slice 8s steps(1) infinite; }
.kitchen[data-k="prep"] .slices circle:nth-child(2) { animation-delay: .8s; } .kitchen[data-k="prep"] .slices circle:nth-child(3) { animation-delay: 1.6s; }
.kitchen[data-k="prep"] .slices circle:nth-child(4) { animation-delay: 2.4s; } .kitchen[data-k="prep"] .slices circle:nth-child(5) { animation-delay: 3.2s; } .kitchen[data-k="prep"] .slices circle:nth-child(6) { animation-delay: 4s; }
.kitchen[data-k="prep"] .whole { animation: shrink 8s linear infinite; transform-box: fill-box; transform-origin: 0 100%; }
.kitchen[data-k="prep"] .blade { animation: whirl .18s linear infinite; }
.kitchen[data-k="prep"] .juice { animation: fill 8s ease-in infinite; }
.kitchen[data-k="prep"] .blender { animation: rattle .12s linear infinite; }
.kitchen[data-k="wait"] .knife, .kitchen[data-k="serve"] .knife, .kitchen[data-k="wait"] .whole, .kitchen[data-k="serve"] .whole { opacity: 0; }
.kitchen[data-k="wait"] .slices circle { opacity: 1; }
.kitchen[data-k="wait"] .juice, .kitchen[data-k="serve"] .juice { transform: scaleY(.2); }
.kitchen[data-k="wait"] .glass { opacity: 1; animation: ready 1.4s ease-in-out infinite; }
.kitchen[data-k="serve"] .glass { opacity: 1; animation: serve 1.1s cubic-bezier(.4, 0, .3, 1) forwards; }
.kitchen[data-k="serve"] .slices circle { opacity: 1; animation: gone .6s .2s forwards; }
@keyframes chop { 0%, 100% { transform: translateY(-10px); } 45% { transform: translateY(8px); } }
@keyframes slice { 0% { opacity: 1; } }
@keyframes shrink { 0% { transform: scaleX(1); } 60%, 100% { transform: scaleX(.25); opacity: .7; } }
@keyframes whirl { to { transform: rotate(360deg); } }
@keyframes fill { 0% { transform: scaleY(.05); } 70%, 100% { transform: scaleY(1); } }
@keyframes rattle { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.8px, -.6px); } 75% { transform: translate(-.8px, .4px); } }
@keyframes ready { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* --gx, --gy: from the glass to the mouth, in the drawing's units (set for each layout) */
@keyframes serve { 0% { transform: translate(0, 0); } 60% { transform: translate(calc(var(--gx) * .75), calc(var(--gy) * .9)) rotate(-12deg) scale(.8); opacity: 1; } 100% { transform: translate(var(--gx), var(--gy)) rotate(-28deg) scale(.5); opacity: 0; } }
@keyframes gone { to { opacity: 0; } }
.chef { position: absolute; left: 0; bottom: 100%; margin: 0 0 6px; padding: 7px 12px; max-width: 18em; width: max-content; border-radius: 12px 12px 12px 2px; background: rgba(255, 248, 225, .95); color: #2c2412; font: 500 13px/1.35 var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.chef:empty { display: none; }
.body { position: relative; transform-origin: 50% 82%; animation: breathe var(--breath, 4.2s) ease-in-out infinite; }
.aura { position: absolute; inset: -12% -22% 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 45%, transparent), transparent); opacity: .7; animation: pulse 5s ease-in-out infinite; transition: background 1.2s ease; }
.pendant { position: absolute; left: 66.6%; top: 59.6%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--pend), transparent); mix-blend-mode: screen; opacity: .8; animation: pulse 3s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.022); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

.stage[data-aura="emerald"] { --glow: #6ee7a0; } .stage[data-aura="gold"] { --glow: #fbbf24; } .stage[data-aura="violet"] { --glow: #a78bfa; }
.stage[data-aura="ice"] { --glow: #7dd3fc; } .stage[data-aura="ember"] { --glow: #fb7185; } .stage[data-aura="pearl"] { --glow: #f1f5f9; }
.stage[data-pendant="gold"] { --pend: #ffd36b; } .stage[data-pendant="green"] { --pend: #6ee7a0; } .stage[data-pendant="blue"] { --pend: #7dd3fc; }
.stage[data-pendant="rose"] { --pend: #fda4af; } .stage[data-pendant="white"] { --pend: #ffffff; }
.stage[data-fur="copper"] { --fur: sepia(.55) saturate(1.7) hue-rotate(-12deg) brightness(1.05); }
.stage[data-fur="silver"] { --fur: grayscale(.85) brightness(1.25) contrast(1.05); }
.stage[data-fur="midnight"] { --fur: sepia(.3) hue-rotate(180deg) saturate(1.6) brightness(.9); }
.stage[data-fur="moss"] { --fur: sepia(.4) hue-rotate(50deg) saturate(1.5); }
.stage[data-fur="honey"] { --fur: sepia(.7) saturate(2) brightness(1.15); }

.stage[data-mood="happy"] { --breath: 2.6s; }
.stage[data-mood="hungry"] .puppet { filter: var(--fur, none) saturate(.8) brightness(.9) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.stage[data-mood="sleepy"] { --breath: 6.5s; }
.stage[data-mood="sleepy"] .puppet { filter: var(--fur, none) saturate(.6) brightness(.7) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }

.moodbox { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 46vw; }
.mood { margin: 0; font: 500 15px/1.3 var(--serif); color: #f3e2b8; text-align: center; white-space: nowrap; }
.sense { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.sense b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sense i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 0; }
.sense i.beat { animation: beat .6s ease-out; }
.sense.stall i { background: var(--amber); }
@keyframes beat { 0% { transform: scale(2.2); box-shadow: 0 0 12px var(--green); } 100% { transform: scale(1); } }
.xbtn { white-space: nowrap; border: 1px solid var(--line2); background: rgba(6, 18, 13, .92); border-radius: 99px; padding: 5px 14px; min-height: 32px; font-size: 12px; color: var(--muted); }
.xbtn[aria-pressed="true"] { color: #062014; background: var(--green); border-color: var(--green); }
.past { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); margin: 0; padding: 6px 8px 6px 14px; border-radius: 99px; background: rgba(40, 30, 6, .8); border: 1px solid rgba(245, 194, 107, .5); color: var(--amber); font-size: 12px; z-index: 2; display: flex; gap: 10px; align-items: center; }
.past[hidden] { display: none; }
.past button { border: 0; border-radius: 99px; padding: 4px 10px; background: var(--amber); color: #2a1d02; font-weight: 600; font-size: 12px; }

/* particles: each a dot drifting on its own path */
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; animation: drift var(--d, 9s) linear var(--delay, 0s) infinite; }
.stage[data-particles="fireflies"] .particles i { background: #d9ff8a; box-shadow: 0 0 10px 2px rgba(217, 255, 138, .7); animation-name: float; }
.stage[data-particles="petals"] .particles i { width: 9px; height: 6px; border-radius: 80% 0; background: #f9a8d4; animation-name: fall; }
.stage[data-particles="snow"] .particles i { background: #f8fafc; animation-name: fall; }
.stage[data-particles="stars"] .particles i { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 6px #fff; animation-name: twinkle; }
.stage[data-particles="embers"] .particles i { width: 4px; height: 4px; background: #fb923c; box-shadow: 0 0 8px #f97316; animation-name: rise; }
.stage[data-particles="bubbles"] .particles i { width: 10px; height: 10px; background: transparent; border: 1px solid rgba(186, 230, 253, .7); animation-name: rise; }
@keyframes float { 0% { opacity: 0; transform: translate(0, 0); } 20%, 80% { opacity: .9; } 50% { transform: translate(30px, -40px); } 100% { opacity: 0; transform: translate(-10px, -80px); } }
@keyframes fall { 0% { opacity: 0; transform: translate(0, -20vh) rotate(0); } 15%, 85% { opacity: .85; } 100% { opacity: 0; transform: translate(40px, 60vh) rotate(260deg); } }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 30vh); } 20%, 80% { opacity: .85; } 100% { opacity: 0; transform: translate(-20px, -40vh); } }
@keyframes twinkle { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }

/* a meal's reaction */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx b { position: absolute; left: 50%; top: 40%; font-size: 22px; color: var(--glow); animation: pop 1.6s ease-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -120%) scale(1.2); } }
.creature.r-bounce .body { animation: bounce .9s ease 2; }
.creature.r-spin .body { animation: spin 1.2s ease; }
.creature.r-wiggle .body, .creature.r-dance .body { animation: wiggle .5s ease 3; }
.creature.r-nod .body { animation: nod .6s ease 2; }
.creature.r-glow .aura, .creature.r-sparkle .aura, .creature.r-hearts .aura { animation: flare 1.6s ease; }
/* anticipation (a dip), action (a stretch), overshoot, settle; always from the hips */
@keyframes bounce { 0%, 100% { transform: scale(1, 1); } 18% { transform: scale(1.04, .95); } 45% { transform: scale(.97, 1.07); } 70% { transform: scale(1.02, .98); } 85% { transform: scale(.995, 1.01); } }
@keyframes spin { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(1.5deg) scale(1.02, .97); } 50% { transform: rotate(-5deg) scale(.99, 1.03); } 78% { transform: rotate(1.2deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@keyframes nod { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, .975); } }
@keyframes flare { 0% { opacity: .6; transform: scale(1); } 40% { opacity: 1; transform: scale(1.25); } 100% { opacity: .6; transform: scale(1); } }

/* ---------- right ---------- */
.side { grid-area: side; padding: 20px 28px 16px 12px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; min-height: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(8px); }
.card h2 { margin: 0; font: 600 18px/1.25 var(--serif); }
.ballot header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hint { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.options { display: grid; gap: 8px; }
.opt { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); overflow: hidden; min-height: 44px; }
.opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: rgba(110, 231, 160, .1); transition: width .6s ease; }
.opt > * { position: relative; }
.opt .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line2); box-shadow: inset 0 0 0 3px var(--panel); }
.opt[aria-checked="true"] { border-color: var(--green); }
.opt[aria-checked="true"] .dot { background: var(--green); border-color: var(--green); }
.opt .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--sw); box-shadow: 0 0 6px var(--sw); }
.options[aria-disabled="true"] .opt { cursor: default; }

.feed { display: grid; gap: 10px; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.amounts button { padding: 9px 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; }
.amounts button[aria-checked="true"] { border-color: var(--green); background: rgba(110, 231, 160, .1); }
.go { min-height: 48px; border: 0; border-radius: 12px; background: linear-gradient(#7ff0ad, #3ccf84); color: #062014; font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(60, 207, 132, .25); }
.go:disabled { opacity: .5; cursor: default; }
.status { margin: 0; min-height: 1.5em; font-size: 13px; color: var(--muted); }
.status.bad { color: #f2a5a5; } .status.ok { color: var(--green); } .status.wait { color: var(--amber); }
.wallet { margin: 0; font-size: 12px; color: var(--muted); }
.wallet button { background: none; border: 0; padding: 0; color: var(--green); text-decoration: underline; font-size: 12px; }
.fine { margin: 0; font-size: 11px; color: var(--faint); line-height: 1.45; }
.recent { flex: 1; min-height: 0; overflow: hidden; }
.recent ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.recent li { display: flex; justify-content: space-between; gap: 8px; }
.recent li b { color: var(--text); font-weight: 500; font-family: ui-monospace, monospace; font-size: 11px; }
.recent .empty { color: var(--faint); }

/* ---------- the timeline ---------- */
.timeline { grid-area: time; position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "prev scrub next" "event event replay" "proof proof proof"; gap: 6px 10px; align-items: center; padding: 10px 28px 14px; background: linear-gradient(transparent, rgba(4, 10, 7, .92) 30%); }
#prev { grid-area: prev; } #next { grid-area: next; } #scrub { grid-area: scrub; width: 100%; accent-color: var(--green); }
#prev, #next { width: 36px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.event { grid-area: event; margin: 0; font-size: 13px; color: var(--text); }
#replayBtn { grid-area: replay; }
.ghost { border: 1px solid var(--line2); background: transparent; border-radius: 10px; padding: 7px 14px; font-size: 13px; }
.proof { grid-area: proof; margin: 0; font-size: 11px; color: var(--faint); }
.proof span { font-family: ui-monospace, monospace; }

/* ---------- key sheet ---------- */
.sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 10; padding: 16px; }
.sheet[hidden] { display: none; }
.sheet-in { width: min(520px, 100%); background: #0b1d15; border: 1px solid var(--line2); border-radius: 16px; padding: 20px; display: grid; gap: 10px; }
.sheet-in h2 { margin: 0; font: 600 20px var(--serif); }
.sheet-in p { margin: 0; color: var(--muted); font-size: 13px; }
.addr, .sheet-in code { font: 12px ui-monospace, monospace; word-break: break-all; color: var(--text); }
.sheet-in code { background: rgba(255, 255, 255, .05); padding: 10px; border-radius: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row button { border: 1px solid var(--line2); background: transparent; border-radius: 10px; padding: 9px 14px; min-height: 44px; }
.row input { flex: 1; min-width: 200px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 9px 12px; font: 12px ui-monospace, monospace; }

/* ---------- small screens: one column, scrolling is fine ---------- */
@media (max-width: 960px), (max-height: 600px) {
  .app { height: auto; overflow: visible; grid-template: "top" auto "stagebox" auto "side" auto "intro" auto "time" auto / 1fr; }
  .stage { grid-area: stagebox; height: 72vh; min-height: 440px; }
  .creature { width: min(70vw, 46vh); bottom: 9vh; }
  .kitchen { left: -22%; width: 48%; --gx: 333px; --gy: -404px; }
  .chef { font-size: 12px; max-width: 14em; }
  .top { padding: 14px 16px 0; position: absolute; left: 0; right: 0; }
  .intro { padding: 20px 16px; }
  .side { padding: 0 16px; }
  .timeline { padding: 16px; background: none; }
  .moodbox { top: auto; bottom: 2vh; max-width: calc(100vw - 32px); }
  .mood { font-size: 14px; }
  .past { top: 64px; }
  .blocks { right: -12%; bottom: 46%; width: 15%; }
  .mood { white-space: normal; }
  .moodbox { transition: opacity .3s ease; }
  .stage:has(.kitchen[data-k]) .moodbox { opacity: 0; }
  .away, .xray, .ceremony { width: calc(100vw - 32px); }
  .fine, .wallet, .stats dt, .proof { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* very wide screens: the same layout, a size up */
@media (min-width: 2200px) and (min-height: 1100px) { .app { zoom: 1.25; height: 80vh; } }

/* ---------- header chip and About ---------- */
.topr { display: flex; align-items: center; gap: 8px; }
.unoff { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); text-decoration: none; }
.unoff:hover { color: var(--text); border-color: var(--line2); }
.proof a { color: var(--muted); }
.sheet-in.about { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.sheet-in h3 { margin: 6px 0 0; font: 600 16px var(--serif); }
.sheet-in h3 small { font: 400 12px var(--sans); color: var(--faint); margin-left: 6px; }
.sheet-in .note { font-size: 12px; color: var(--faint); }
.sheet-in .small { font-size: 12px; }
.donate { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.donate .qr { width: 112px; height: 112px; border-radius: 8px; flex: none; }
.addrbox { display: grid; gap: 8px; flex: 1; min-width: 220px; }
.addrbox code { background: rgba(255, 255, 255, .05); padding: 10px; border-radius: 8px; font: 12px ui-monospace, monospace; word-break: break-all; }
.addrbox button { justify-self: start; border: 1px solid var(--line2); background: transparent; border-radius: 10px; padding: 8px 16px; min-height: 44px; }
@media (max-width: 960px), (max-height: 600px) { .unoff { font-size: 11px; } }

/* ---------- the testnet, felt: blocks, weather, the evening, under the fur ---------- */
/* 1 heartbeat: each new block of Tau Testnet Alpha drops beside it */
.blocks { position: absolute; right: -9%; bottom: 1%; width: 15%; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; z-index: 3; }
.blk { width: 100%; aspect-ratio: 2.2; border-radius: 5px; display: grid; place-items: center; font: 600 11px ui-monospace, monospace; color: #cfe9dc; background: linear-gradient(rgba(160, 230, 190, .22), rgba(160, 230, 190, .08)); border: 1px solid rgba(160, 230, 190, .4); box-shadow: 0 0 10px rgba(110, 231, 160, .15); animation: drop .7s cubic-bezier(.3, 1.4, .6, 1); }
.blk.fed { background: linear-gradient(rgba(110, 231, 160, .7), rgba(52, 194, 122, .5)); color: #062014; border-color: var(--green); box-shadow: 0 0 16px rgba(110, 231, 160, .5); }
.blk.old { opacity: .45; }
@keyframes drop { 0% { transform: translateY(-60vh) rotate(-8deg); opacity: 0; } 70% { transform: translateY(4%) rotate(1deg); opacity: 1; } 100% { transform: none; } }
.creature.perk .head { animation: perk .45s ease-out; }
@keyframes perk { 0% { transform: rotate(0); } 35% { transform: rotate(2.5deg) translateY(-.8%); } 100% { transform: rotate(0); } }

/* 2 the order slip: what the testnet did with your meal, step by step */
.kcap { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kcap .chef { position: static; margin: 0; }
.bon { width: 19em; padding: 8px 10px 9px; background: #fbf6e4; color: #2c2412; border-radius: 3px; font: 11px/1.45 ui-monospace, monospace; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transform: rotate(-1.5deg);
  -webkit-mask-image: radial-gradient(circle at 4px 100%, transparent 3px, #000 3.5px); -webkit-mask-size: 8px 100%; mask-image: radial-gradient(circle at 4px 100%, transparent 3px, #000 3.5px); mask-size: 8px 100%; }
.bon b { display: block; font-weight: 700; letter-spacing: .12em; margin-bottom: 2px; }
.bon .st { color: #8a7d5a; } .bon .st.ok { color: #1f7a45; } .bon .st.ok::before { content: "✓ "; } .bon .st.now { color: #9a6b00; } .bon .st.now::before { content: "… "; }

/* 3 weather from the network */
.aurora { position: absolute; inset: 0 0 40% 0; opacity: 0; pointer-events: none; transition: opacity 3s ease;
  background: radial-gradient(60% 40% at 30% 20%, rgba(110, 231, 160, .45), transparent 70%), radial-gradient(50% 35% at 70% 15%, rgba(167, 139, 250, .4), transparent 70%), radial-gradient(40% 30% at 50% 30%, rgba(125, 211, 252, .35), transparent 70%); }
.stage[data-weather="aurora"] .aurora { opacity: 1; animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { to { transform: translateX(4%) skewX(-4deg); filter: hue-rotate(30deg); } }
.clouds { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 4s ease; background: linear-gradient(rgba(20, 26, 32, .55), transparent 60%); }
.clouds i { position: absolute; top: 6%; width: 40vw; height: 16vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 82, 92, .8), transparent); animation: cloud 40s linear infinite; }
.clouds i:nth-child(2) { top: 14%; animation-duration: 55s; animation-delay: -20s; } .clouds i:nth-child(3) { top: 2%; animation-duration: 70s; animation-delay: -45s; }
@keyframes cloud { from { left: -40vw; } to { left: 100vw; } }
.stage[data-weather="stall"] .clouds { opacity: 1; }
.stage[data-weather="stall"] .head { animation: uneasy 2.4s ease-in-out infinite; }
@keyframes uneasy { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 45% { transform: rotate(2.5deg); } 70% { transform: rotate(-1deg); } }
.newworld { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; text-align: center; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .18), rgba(6, 18, 13, .96) 55%); animation: dawnin 1.4s ease; }
.newworld > div { max-width: 36em; padding: 22px 26px; border-radius: 16px; background: rgba(6, 18, 13, .9); border: 1px solid var(--line2); }
.newworld h2 { margin: 0 0 8px; font: 700 clamp(26px, 3vw, 40px) var(--serif); color: var(--cream, #f3e2b8); }
.newworld p { margin: 0 auto; max-width: 34em; color: var(--muted); }
@keyframes dawnin { from { opacity: 0; } }

/* 4 the evening ceremony */
.ceremony { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(560px, 44vw); z-index: 5; padding: 16px 18px; border-radius: 16px; background: rgba(6, 18, 13, .88); border: 1px solid var(--line2); text-align: center; }
.ceremony h2 { margin: 0 0 12px; font: 600 20px var(--serif); }
.urns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.urn { display: grid; gap: 6px; justify-items: center; font-size: 12px; color: var(--muted); }
.jar { position: relative; width: 70%; height: 120px; border: 2px solid rgba(200, 240, 255, .5); border-top: 0; border-radius: 4px 4px 16px 16px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 3px; padding: 4px; overflow: hidden; }
.jar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sw, var(--green)); box-shadow: 0 0 6px var(--sw, var(--green)); animation: token .5s cubic-bezier(.4, 1.6, .6, 1) both; }
@keyframes token { from { transform: translateY(-140px); opacity: 0; } }
.urn.win .jar { border-color: var(--green); box-shadow: 0 0 24px rgba(110, 231, 160, .45); }
.urn.win b { color: var(--green); }
.urn b { color: var(--text); font-weight: 600; }
.ceremony .verdict { margin: 12px 0 0; font: 500 15px var(--serif); color: #f3e2b8; min-height: 1.3em; }
.creature.transform .puppet { animation: transform 1.6s ease; }
@keyframes transform { 0% { filter: var(--fur, none) brightness(1); } 40% { filter: var(--fur, none) brightness(2.4) saturate(.2); } 100% { filter: var(--fur, none) brightness(1); } }

/* 5 under the fur: the transactions and the hash chain behind what you see */
.stage.xrayed .puppet { filter: grayscale(1) brightness(.68) contrast(1.4) drop-shadow(0 0 1px var(--green)) drop-shadow(0 0 8px rgba(110, 231, 160, .6)); }
.stage.xrayed .particles, .stage.xrayed .aura, .stage.xrayed .pendant { opacity: .2; }
/* x-ray: the list lies over its upper body but never reaches into the bottom third of the creature, so the glowing
   legs and feet always show beneath it (that third is its width x 1.5 x stage scale / 3, at most .52 x its width) */

.xray { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: min(620px, 46vw); max-height: calc(100% - 150px - 14vh - min(30vw, 42vh) * .52 - 10px); overflow: auto; z-index: 4; padding: 12px 14px; border-radius: 14px; background: rgba(4, 12, 9, .9); border: 1px solid rgba(110, 231, 160, .35); font: 11px/1.5 ui-monospace, monospace; color: #bfe8d0; }
.xray h3 { margin: 0 0 4px; font: 600 13px var(--sans); color: var(--text); }
.xray p { margin: 0 0 8px; font: 12px/1.45 var(--sans); color: var(--muted); }
.xray ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.xray li { display: grid; grid-template-columns: 4.5em 1fr; gap: 8px; padding: 6px 0 6px 10px; border-left: 2px solid rgba(110, 231, 160, .35); cursor: pointer; position: relative; }
.xray li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.xray li:hover { background: rgba(110, 231, 160, .06); }
.xray li .k { color: var(--faint); }
.xray li .h { color: #f3e2b8; word-break: break-all; }

/* while you were away */
.away { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: min(520px, 44vw); z-index: 4; padding: 14px 16px; border-radius: 14px; background: rgba(10, 26, 19, .94); border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.away h2 { margin: 0 0 8px; font: 600 17px var(--serif); }
.away ul { margin: 0 0 10px; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }
.away ul b { color: var(--text); font-weight: 500; }
.away .won { color: var(--green); } .away .lost { color: var(--muted); }
.away .row button { min-height: 40px; }
.away .row .go2 { background: var(--green); color: #062014; border-color: var(--green); font-weight: 600; }
.cool { margin: 0; font-size: 12px; color: var(--amber); }
.cool[hidden] { display: none; }

/* tuned by feel: answer at once, anticipate, overshoot, settle */
.today { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pips { display: inline-flex; gap: 4px; flex: none; }
.pips i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); transition: background .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.pips i.on { background: var(--green); border-color: var(--green); transform: scale(1.12); }
.creature.expect .head { animation: expect 1.8s ease-in-out infinite; }
.creature.expect .mouth { transform: translate(-50%, -50%) scaleY(.35); transition: transform .12s ease-out; }
@keyframes expect { 0%, 100% { transform: rotate(-2.4deg) translate(-1.2%, .5%); } 50% { transform: rotate(-1.6deg) translate(-.9%, 0); } }
.creature.eat .body > .puppet { animation: bite 2.6s ease-in-out; transform-origin: 50% 82%; }
@keyframes bite { 0% { transform: scale(1, 1); } 8% { transform: scale(1.025, .97); } 14% { transform: scale(.985, 1.025); } 22%, 100% { transform: scale(1, 1); } }
.fx b.bit { width: 9px; height: 9px; border-radius: 50%; font-size: 0; animation: burst 1.1s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } }
.fx b.rare { color: #fbbf24; font-size: 28px; text-shadow: 0 0 12px rgba(251, 191, 36, .8); }
.stats dd.tick { animation: tick .6s cubic-bezier(.3, 1.6, .5, 1); color: var(--green); }
@keyframes tick { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.blk.mine { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .creature *, .creature, .fx b, .blk, .pips i { animation: none !important; transition: none !important; } }
/* follow-through: the head lags a beat behind the body and settles after it */
.creature.r-bounce .head, .creature.r-spin .head { animation: lag .9s ease-out 2; }
@keyframes lag { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 60% { transform: rotate(1.2deg); } 80% { transform: rotate(-.4deg); } }

/* ---------- tour and FAQ links, Chain core, tomorrow's question ---------- */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 2px 0 0; }
.cta { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px; min-height: 34px; border: 1px solid rgba(110, 231, 160, .6); border-radius: 99px; background: transparent; color: var(--green); font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cta:hover, .cta:focus-visible { background: var(--green); color: #062014; outline: none; }
.cta i { font-style: normal; font-size: 10px; }
.cta2 { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.cta2:hover { color: var(--text); }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.follow .fl { color: var(--muted); margin-right: 2px; }
.follow a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); text-decoration: none; }
.follow a:hover { border-color: rgba(110, 231, 160, .6); color: var(--green); }
.follow svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.xrow { display: inline-flex; gap: 8px; }
.ask { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.askt { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.askt b { color: var(--text); font-weight: 600; }
.askrow { display: flex; flex-wrap: wrap; gap: 6px; }
.askrow button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; min-height: 36px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--text); font-size: 13px; cursor: pointer; }
.askrow button span { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 12px; }
.askrow button[aria-checked="true"] { border-color: var(--green); color: var(--green); }
.askrow button:disabled { opacity: .45; cursor: default; }
.faq .why { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.faq .why b { color: var(--text); font-weight: 600; }
.faq details { border-top: 1px solid var(--line); padding: 8px 0; }
.faq summary { cursor: pointer; font-size: 14px; color: var(--text); min-height: 28px; }
.faq details p { margin-top: 6px; }
.faq .can { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; }
.faq .can dt { color: var(--text); } .faq .can dd { margin: 0; color: var(--muted); }
.tt-card { position: fixed; z-index: 30; width: min(400px, calc(100% - 32px)); background: #0b1d15; border: 1px solid rgba(110, 231, 160, .55); border-radius: 14px; padding: 12px 14px 10px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9); }
.tt-card .t1 { display: flex; justify-content: space-between; align-items: baseline; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.tt-card .t1 button { background: transparent; border: 0; color: var(--muted); font-size: 14px; min-width: 32px; min-height: 32px; cursor: pointer; }
.tt-card h3 { margin: 2px 0 4px; font: 600 17px var(--serif); color: #f3e2b8; }
.tt-card p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text); }
.tt-card .bar { height: 2px; background: rgba(255, 255, 255, .1); margin: 8px 0; border-radius: 1px; overflow: hidden; }
.tt-card .bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.tt-card .t3 { display: flex; justify-content: flex-end; gap: 8px; }
.tt-card .t3 button { min-height: 36px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.tt-card .t3 .primary { background: var(--green); border-color: var(--green); color: #062014; font-weight: 600; }
.tt-card .t3 button:disabled { opacity: .35; }
.tt-ring { position: fixed; z-index: 29; pointer-events: none; border: 1px solid var(--green); border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55), 0 0 30px -4px rgba(110, 231, 160, .6); transition: left .25s, top .25s, width .25s, height .25s; }
@media (max-width: 899px) {
  .tt-card { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
  .tt-card .t3 button, .cta, .follow a { min-height: 44px; }
}

/* Tau HUD's Chain core as the sky behind it: the same testnet, faint, never in the way */
.corebg { position: absolute; left: 50%; top: 46%; width: min(92vh, 44vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.corebg.on { opacity: .3; }
.corebg iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; mix-blend-mode: screen; filter: sepia(.3) hue-rotate(80deg) saturate(1.4); }
.corepulse { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; border: 2px solid rgba(160, 255, 200, .9); box-shadow: 0 0 24px rgba(110, 231, 160, .6); opacity: 0; }
.corepulse.go { animation: corepulse 1.4s ease-out; }
@keyframes corepulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
.coreh { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%); font: 600 13px ui-monospace, monospace; color: rgba(200, 255, 220, .9); opacity: 0; }
.coreh.go { animation: coreh 1.6s ease-out; }
@keyframes coreh { 0% { opacity: 0; transform: translate(-50%, 40%); } 20%, 60% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.stage.xrayed .corebg.on { opacity: .12; }
@media (max-width: 899px) { .corebg { width: 120vw; top: 34%; } .corebg.on { opacity: .22; } }

/* people here now, from the relay's presence count for agorzilla.com */
.net.here i { background: var(--green); }
.net.here b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .net.here { display: none; } }
.here-m { display: none; }
@media (max-width: 599px) { .here-m { display: inline; } }
@media (max-width: 600px) { .follow .fl { flex-basis: 100%; } }
/* phones: the list starts under the header, and the same bottom third stays free */
@media (max-width: 960px), (max-height: 600px) {
  .xray { top: 64px; width: calc(100vw - 32px); max-height: calc(100% - 64px - 9vh - min(70vw, 46vh) * .52 - 10px); }
}
/* info marks: one short explanation per area, on hover, focus or tap */
.info { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; padding: 0; vertical-align: 1px; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--faint); font: italic 600 10px/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; }
.info::after { content: ""; position: absolute; inset: -14px; }
.info:hover, .info:focus-visible, .info[aria-expanded="true"] { color: var(--green); border-color: rgba(110, 231, 160, .6); outline: none; }
.tip { position: fixed; z-index: 40; width: max-content; max-width: min(360px, calc(100vw - 32px)); padding: 9px 12px; border-radius: 10px; background: #0b1d15; border: 1px solid rgba(110, 231, 160, .45); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8); font-size: 12px; line-height: 1.45; color: var(--muted); pointer-events: none; }
.tip b { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.tip b i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
/* short wide screens: the three steps give their room to the numbers (the tour and the FAQ say the same) */
@media (min-width: 961px) and (max-height: 860px) { .steps { display: none; } }
.ballot h2 { display: flex; align-items: baseline; gap: 6px; }
.ballot h2 .info { flex: none; margin-left: 0; }
.stats { flex-shrink: 0; }
@media (min-width: 961px) and (max-height: 860px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats div { padding: 8px 10px; }
  .stats dd { font-size: 17px; }
}
/* petting: no chain, no wallet; it leans into the hand and purrs, the ground stays put */
.body .puppet:not(.legs) { cursor: grab; }
.creature.petting .puppet:not(.legs) { cursor: grabbing; }
.creature.purr .body > .puppet { animation: purr .11s linear infinite; transform-origin: 50% 82%; }
@keyframes purr { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.003, .996); } }
.fx b.pet { left: var(--px); top: var(--py); font-size: 24px; color: var(--glow); animation: petheart 1.5s ease-out forwards; }
@keyframes petheart { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(.8); } }
.xbtn.pet { color: var(--text); border-color: rgba(110, 231, 160, .6); animation: petcall 2.4s ease-in-out 3; }
@keyframes petcall { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); } 50% { box-shadow: 0 0 0 5px rgba(110, 231, 160, .18); } }
@media (prefers-reduced-motion: reduce) { .creature.purr .body > .puppet { animation: none; } }