@font-face{font-family:Plex;src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Plex;src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'),url('/assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500 900;font-display:swap}
:root{--paper:#0B1020;--ink:#F7FAFF;--muted:#AAB4C8;--line:#34405a;--accent:#58D6E8;--gold:#FFD166;--pink:#FF4D9D;--shadow:#05070F;--mono:Plex,ui-monospace,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}a{color:inherit}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,h2{text-wrap:balance}p{text-wrap:pretty}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.card{max-width:1600px;margin:auto}.masthead{display:flex;align-items:center;justify-content:space-between;padding:24px 5%;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:24px;font-weight:700}.brand img{width:38px;height:38px;object-fit:cover;border-radius:0;filter:none}.brand small{font:11px var(--mono);color:var(--muted);margin-left:16px}.lang{display:flex;align-items:center;gap:4px}.lang a,.lang span{display:grid;place-items:center;min-width:44px;min-height:44px;font:12px var(--mono);text-decoration:none;border-radius:0}.lang [aria-current]{background:var(--ink);color:var(--paper)}.lang a:hover{background:#1c2940}.eyebrow,.section-kicker,.portrait-caption,.hero-bottom,.footer-meta{font:11px/1.6 var(--mono);text-transform:uppercase}.hero{padding:36px 5% 0}.eyebrow{display:flex;justify-content:space-between;color:var(--muted)}.eyebrow span:first-child{color:var(--ink)}.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:5%;align-items:center;padding:64px 0}.hero-copy h1{font-size:clamp(54px,6.4vw,100px);line-height:1.04;font-weight:500;max-width:850px}.hero-copy h1 em{font-style:normal;color:var(--accent)}.intro{max-width:480px;margin-top:32px;font-size:16px;line-height:1.7;color:var(--muted)}.portrait{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.portrait-frame{position:relative;background:#131d32;overflow:hidden;aspect-ratio:1/1.08;border-radius:0}.portrait-frame img{display:block;width:100%;height:100%;object-fit:cover}.portrait-caption{display:flex;justify-content:space-between;margin-top:16px;color:var(--muted)}.hero-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-bottom a{color:var(--accent);text-decoration:none;min-height:44px;display:flex;align-items:center}.index-section{padding:80px 5%;display:grid;grid-template-columns:1fr 2fr;gap:8%}.section-heading h2{font-size:clamp(32px,4vw,56px);font-weight:400;line-height:1.1;margin-top:20px}.section-kicker{color:var(--muted)}.links{display:flex;flex-direction:column;border-top:1px solid var(--line);counter-reset:links}.link{display:flex;gap:20px;align-items:center;min-height:78px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;counter-increment:links}.link:before{content:counter(links,decimal-leading-zero);font:11px var(--mono);color:var(--muted)}.link .icon{width:21px;height:21px;flex-shrink:0}.link .label{flex:1;font-size:clamp(18px,2vw,27px);font-weight:400}.link .chev{font-size:28px;color:var(--muted)}.link:hover{color:var(--accent)}.link:hover .chev{color:var(--accent)}#shop{margin:0 5% 80px;padding-top:40px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;column-gap:8%;align-items:start}.shop-title{font-size:28px;font-weight:400;grid-column:1;line-height:1.3}.shop-sub{grid-column:1;margin-top:16px;color:var(--muted);font-size:14px;line-height:1.6}.products{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.product{border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;max-width:340px}.product:hover{border-color:var(--accent)}.product .thumb{width:100%;aspect-ratio:1;object-fit:cover;background:#1c2940}.product .body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}.product .name{font-size:16px;line-height:1.4}.product .rating{display:flex;flex-wrap:wrap;gap:8px;font:11px var(--mono);color:var(--muted)}.product .meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.product .buy{font-size:12px;background:var(--accent);color:var(--shadow);border-radius:0;padding:10px 16px}.product .mall{color:var(--ink)}.disclosure{grid-column:1;margin-top:24px;max-width:300px;color:var(--muted);font-size:12px;line-height:1.6}.closing{background:var(--shadow);color:var(--ink);padding:56px 5% 24px}.closing-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:40px}.closing h2{font-size:clamp(38px,6vw,80px);font-weight:400;line-height:1.1}.closing h2 span{color:var(--pink)}.stickers{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:260px}.stickers img{width:68px;height:68px;object-fit:contain}.footer-meta{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #484848;padding-top:24px;color:#aaa}.footer-meta a{text-decoration:none;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.hero-copy h1{font-size:100px}}
@media(max-width:760px){.masthead{padding:16px 6%}.brand small{display:none}.hero{padding:24px 6% 0}.eyebrow{font-size:9px;gap:16px}.hero-grid{grid-template-columns:1fr;padding:40px 0;gap:32px}.hero-copy h1{font-size:clamp(48px,10.5vw,76px)}.intro{font-size:15px;margin-top:24px}.portrait{width:100%;max-width:420px;margin:auto}.portrait-frame{aspect-ratio:1.15}.portrait-caption{font-size:9px}.hero-bottom{font-size:9px;gap:20px}.index-section{grid-template-columns:1fr;padding:48px 6%;gap:32px}.section-heading h2{margin-top:12px;font-size:38px}.link{min-height:72px;gap:14px}.link .label{font-size:20px}#shop{margin:0 6% 48px;display:block;padding-top:32px}.shop-title{font-size:26px}.products{margin-top:24px;grid-template-columns:1fr}.product{max-width:none;display:grid;grid-template-columns:110px 1fr;align-items:center}.product .body{padding:14px}.product .name{font-size:14px}.product .thumb{height:100%;min-height:160px}.disclosure{max-width:none}.closing{padding:40px 6% 24px}.closing-top{align-items:flex-start;flex-direction:column;gap:32px}.stickers{max-width:none;justify-content:flex-start}.stickers img{width:46px;height:46px}.footer-meta{font-size:9px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Unity overlay contract: square 4px frames, 8px hard shadows, cyan/gold/magenta tiers. */
.masthead{border-bottom:4px solid var(--shadow)}.brand{color:var(--ink)}.brand img{border:2px solid var(--accent)}.lang [aria-current]{background:var(--accent);color:var(--shadow);box-shadow:4px 4px 0 var(--shadow)}.eyebrow span:first-child{color:var(--accent)}.hero-copy h1{font-size:clamp(44px,5.3vw,80px);font-weight:500;line-height:1.15;text-shadow:4px 4px 0 var(--shadow)}.hero-copy h1 em{color:var(--gold)}.portrait-frame{border:4px solid var(--shadow);outline:2px solid var(--accent);box-shadow:8px 8px 0 var(--shadow);border-radius:0;aspect-ratio:1}.portrait-caption{padding:12px 0;color:var(--accent)}.portrait-caption span:last-child{color:var(--gold)}.hero-bottom{border-top:2px solid var(--line);border-bottom:2px solid var(--line)}.section-kicker{color:var(--accent)}.section-heading h2{font-weight:500;font-size:clamp(30px,3.5vw,48px)}.link .label{font-size:clamp(16px,1.7vw,23px)}.link:before{color:var(--gold)}.link .chev{color:var(--accent)}.link{border-bottom:2px solid var(--line)}.links{border-top:2px solid var(--line)}.product{border:4px solid var(--shadow);box-shadow:6px 6px 0 var(--shadow);background:#131d32}.product .mall{color:var(--gold)}.product .buy{background:var(--gold);color:var(--shadow);font-weight:500}.closing{border-top:4px solid var(--accent)}.closing h2{font-size:clamp(32px,4.8vw,64px)}.footer-meta{color:var(--muted)}.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}.cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:16px 20px;min-height:52px;border:2px solid var(--accent);text-decoration:none;font-size:14px;font-weight:500;box-shadow:5px 5px 0 var(--shadow);transition:transform 120ms steps(3),box-shadow 120ms steps(3)}.cta-primary{background:var(--gold);border-color:var(--gold);color:var(--shadow)}.cta-secondary{color:var(--accent)}.cta:hover{transform:translate(-2px,-2px)}.cta:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--shadow)}.cta-note{color:var(--muted);font-size:11px;line-height:1.6;margin-top:16px}.about-co{margin:0 5% 64px;padding:32px;border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow)}.about-co h2{font-size:24px;color:var(--gold);margin-bottom:24px}.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.fact-grid h3{font-size:16px;color:var(--accent);margin-bottom:12px}.fact-grid p{font-size:13px;line-height:1.8;color:var(--muted)}.portrait-frame:after{content:'';position:absolute;inset:8px;border:2px solid #F7FAFF66;pointer-events:none}.brand small{color:var(--accent)}
@media(max-width:760px){.hero-copy h1{font-size:clamp(34px,8.8vw,62px)}.hero-actions{flex-direction:column}.cta{width:100%;font-size:13px}.hero-grid{padding-top:32px}.portrait{max-width:360px}.link .label{font-size:16px}.closing h2{font-size:32px}.about-co{margin:0 6% 48px;padding:24px 20px}.fact-grid{grid-template-columns:1fr;gap:24px}.intro{font-size:14px}.product .name{font-size:12px}.product .rating{font-size:10px}.product .buy{font-size:11px;padding:8px}.section-heading h2{font-size:32px}}

.portrait-frame{aspect-ratio:9/16;max-height:680px;margin-inline:auto;width:min(100%,382px)}.portrait-frame>img{object-position:center 25%}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}.video-toggle{position:absolute;bottom:18px;right:18px;z-index:2;min-height:44px;padding:10px 14px;background:var(--shadow);border:2px solid var(--accent);color:var(--ink);font:12px var(--mono);cursor:pointer}.video-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.hero{position:relative;isolation:isolate;overflow:hidden;background:#174766;margin:24px 2% 56px;border:2px solid #529BC0;padding-bottom:160px;--muted:#C3D9DE}.hero-copy{background:transparent;box-shadow:none}.hero-grid{padding-top:80px;padding-bottom:40px}.hero-bottom{border-color:#76A6B6}.hero .eyebrow{color:#C3D9DE}.hero .eyebrow span:first-child{color:#BEE5DC}@media(max-width:760px){.hero{margin:12px 3% 40px;padding-bottom:140px}.hero-grid{padding-top:64px}.hero .portrait{margin-top:8px}}.hero-copy h1 em{text-shadow:3px 0 var(--pink),-2px 0 var(--accent),4px 4px var(--shadow)}.portrait-frame{box-shadow:6px 6px 0 var(--shadow),8px 0 0 #FF4D9D55,-5px 0 0 #58D6E855}.portrait-frame:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,#05070F33 5px 6px);opacity:.4}.hero-copy h1 em:hover{display:inline-block;animation:signal-jump 180ms steps(3) 1}@keyframes signal-jump{25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(1px)}}@media(prefers-reduced-motion:reduce){.hero-copy h1 em:hover{animation:none}}

/* One compact information sheet rises over the stage using native document scrolling. */
.masthead{padding:12px 3%}.hero{margin:0; border-inline:0;padding:20px 3% 90px}.hero-grid{padding:28px 0 18px;gap:4%}.hero-grid{animation:none}.portrait-frame{width:min(100%,250px);max-height:445px}.portrait-caption{margin-top:6px;padding:4px 0}.intro{margin-top:20px}.hero-bottom{padding:4px 0}.info-sheet{position:relative;z-index:2;background:var(--paper);border-top:3px solid var(--accent);display:grid;grid-template-columns:1fr 1.2fr;gap:0;padding:24px 3%;box-shadow:0 -16px 36px #05070F33}.info-sheet .about-co{margin:0;padding:16px 24px 16px 0;border:0;box-shadow:none}.fact-grid{grid-template-columns:1fr;gap:16px}.about-co h2{margin-bottom:18px}.info-sheet .index-section{display:block;padding:16px 24px;border-left:1px solid var(--line)}.section-heading{margin-bottom:16px}.section-heading h2{font-size:28px;margin-top:8px}.section-heading h2 br{display:none}.link{min-height:48px;padding:8px 0;gap:10px}.link .label{font-size:15px}.link .chev{font-size:20px}.info-sheet #shop{display:block;margin:0;padding:16px 0 16px 24px;border:0}.shop-title{font-size:22px}.shop-sub{margin-top:12px}.products{display:block;margin-top:16px}.product{display:grid;grid-template-columns:80px 1fr;max-width:none;margin-bottom:12px}.product .thumb{height:100%;min-height:100px}.product .body{padding:12px}.product .name{font-size:12px}.product .rating{font-size:10px}.product .buy{padding:8px}.disclosure{margin-top:16px;font-size:10px}.closing{position:relative;z-index:2;padding:20px 3% 16px}.closing-top{padding-bottom:16px}.closing h2{font-size:28px}.footer-meta{padding-top:12px}.cta{transition:transform 160ms ease-out,box-shadow 160ms ease-out}
@media(min-width:761px){.hero{position:relative;min-height:calc(100dvh - 70px);padding:0;overflow:hidden;background:#05070F}.hero-grid{display:block;padding:clamp(32px,7vh,80px) 0;min-height:calc(100dvh - 70px)}.hero-copy{position:relative;z-index:2;width:50%;min-width:0;padding:clamp(32px,7vh,80px) 6vw clamp(36px,7vh,84px) 3vw;background:#05070FCC}.hero .portrait{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;z-index:0;pointer-events:none}.hero .portrait-frame{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;outline:0;box-shadow:none;margin:0;background:#05070F}.hero .portrait-frame::before{background:#05070F33;opacity:1}.hero .portrait-frame::after{display:none}.hero .hero-video{object-fit:cover;object-position:center;width:100%;height:100%;background:#05070F;pointer-events:none}.hero .video-toggle{pointer-events:auto;z-index:3}.hero .hero-copy h1{font-size:clamp(40px,4.8vw,80px)}}
@media(min-width:1000px) and (min-height:700px){.hero-grid{min-height:490px}.info-sheet{min-height:520px}}
@media(max-width:999px){.info-sheet{grid-template-columns:1fr 1fr}.info-sheet #shop{grid-column:1/-1;padding:20px 0 0;border-top:1px solid var(--line);margin-top:20px}.products{max-width:500px}.info-sheet .index-section{border-right:0}}
@media(max-width:760px){.hero{padding:0 0 56px;min-height:calc(100dvh - 70px);background:#05070F}.hero-grid{display:block;padding:0;min-height:calc(100dvh - 70px)}.hero-copy{position:relative;z-index:2;width:100%;padding:40px 6% 48px;background:#05070FCC}.hero .portrait{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;z-index:0;pointer-events:none}.hero .portrait-frame{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;outline:0;box-shadow:none;margin:0;background:#05070F}.hero .portrait-frame::before,.hero .portrait-frame::after{display:none}.hero .hero-video{object-fit:cover;object-position:center;width:100%;height:100%;background:#05070F}.hero .video-toggle{pointer-events:auto;z-index:3;bottom:16px;right:16px}.hero-actions{gap:10px;margin-top:20px}.intro{margin-top:16px}.info-sheet{display:block;padding:16px 6%}.info-sheet .about-co,.info-sheet .index-section,.info-sheet #shop{padding:16px 0;margin:0;border:0}.info-sheet .index-section,.info-sheet #shop{border-top:1px solid var(--line)}.fact-grid{gap:12px}.fact-grid p{line-height:1.6}.about-co h2{margin-bottom:12px}.section-heading h2{font-size:26px}.closing{padding:20px 6%}.closing h2{font-size:24px}.closing-top{gap:12px}.hero-bottom{gap:8px}}
@media(prefers-reduced-motion:reduce){.hero{position:relative}.cta{transition:none}}

/* Compact closing card: facts, community invitations, then a small sign-off. */
.info-sheet{display:block;padding:24px 3% 20px;min-height:0}.info-sheet .about-co{padding:0 0 20px;margin:0}.about-co h2{font-size:20px;margin-bottom:16px}.fact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.fact-grid h3{font-size:14px;margin-bottom:8px}.fact-grid p{font-size:12px;line-height:1.65}.info-sheet .index-section{border:0;border-top:1px solid var(--line);padding:20px 0 0;display:grid;grid-template-columns:190px 1fr;gap:24px}.section-heading{margin:0}.section-heading h2{font-size:24px;line-height:1.25;margin-top:8px}.links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;border:0}.link{min-width:0;min-height:46px;border-bottom:1px solid var(--line);padding:8px 0;gap:10px}.link:before{display:none}.link .label{font-size:13px}.link .icon{width:18px;height:18px}.link.fb-group,.link.discord{grid-row:1;grid-column:span 1;color:var(--accent);border:1px solid var(--accent);padding:10px 12px;margin-bottom:8px;background:#132335}.link.fb-group{grid-column:1}.link.discord{grid-column:2}.link.zypage{grid-column:3;grid-row:1;margin-bottom:8px}.closing{padding:14px 3% 12px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 24px}.closing-top{display:contents}.closing h2{font-size:20px;line-height:1.35}.closing h2 br{display:none}.closing h2 span{margin-left:8px}.stickers{flex-wrap:nowrap;max-width:none;gap:2px}.stickers img{width:42px;height:42px}.footer-meta{grid-column:1/-1;font-size:9px;padding-top:10px;gap:12px}
@media(max-width:760px){.info-sheet{padding:20px 6% 16px}.fact-grid{grid-template-columns:1fr;gap:12px}.fact-grid>div{display:grid;grid-template-columns:110px 1fr;gap:12px}.fact-grid h3{font-size:12px;margin:0}.fact-grid p{font-size:11px}.info-sheet .index-section{display:block;padding:16px 0 0}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.section-heading h2{font-size:20px;margin:0}.section-kicker{font-size:9px}.links{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.link .label{font-size:11px}.link.fb-group,.link.discord{padding:10px 8px;gap:6px}.link.zypage{grid-column:auto;grid-row:auto;margin:0}.closing{padding:12px 6%;gap:8px}.closing h2{font-size:14px}.closing h2 br{display:block}.closing h2 span{margin-left:0}.stickers img{width:26px;height:30px}.footer-meta{font-size:8px;gap:8px}}


/* Pixel sprites stay peripheral so the loading phrase remains readable. */
.opening-field{position:absolute;inset:4% 3%;pointer-events:none;overflow:hidden}.field-clover{transition:translate 220ms cubic-bezier(.22,1,.36,1);position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:.38;transform:rotate(var(--angle));animation:clover-drift 3200ms steps(8,end) var(--delay) infinite}.field-clover img{width:100%;height:100%;image-rendering:pixelated;animation:clover-signal 3100ms steps(1,end) var(--delay) infinite}.clover-noise{position:absolute;inset:0;display:grid;place-content:center;white-space:pre;color:#9bce66;text-align:center;font:16px/1 monospace;opacity:0;animation:clover-noise 3100ms steps(1,end) var(--delay) infinite}.landing-opening-label{background:#0f0f0f;padding:18px 20px!important}.opening-clover img{display:block;width:1.2em;height:1.2em;image-rendering:pixelated}@keyframes clover-drift{50%{transform:translateY(-10px) rotate(var(--angle))}}@keyframes clover-signal{0%,87%,94%,100%{opacity:1;transform:translateX(0)}89%,92%{opacity:.25;transform:translateX(5px)}90%{opacity:0;transform:translateX(-4px)}}@keyframes clover-noise{0%,87%,94%,100%{opacity:0}89%,92%{opacity:.65}90%{opacity:1}}@media(max-width:540px){.field-clover{width:calc(var(--size)*.7);height:calc(var(--size)*.7);opacity:.3}.field-clover:nth-child(2n){display:none}.landing-opening-label{padding:14px 4px!important}}

/* Low meadow horizon and rooted foreground plants replace floating decoration. */
.landing-opening .landing-opening-screen{background:#8bd8ef url('/assets/opening-landscape.webp?v=20260919-1') center/100% 100% no-repeat;image-rendering:auto}.landing-opening .opening-field{inset:46% -2% -8%;overflow:hidden}.landing-opening .field-clover{opacity:1;transform-origin:50% 100%;transition:rotate 280ms cubic-bezier(.22,1,.36,1);animation:meadow-sway 3600ms steps(8,end) var(--delay) infinite}.field-clover::before{content:'';position:absolute;left:49%;top:45%;width:5%;height:55%;background:#235c36}.field-clover img{position:relative;height:72%;object-fit:contain}.landing-opening .landing-opening-label{top:25%;background:transparent;color:#153c37;text-shadow:1px 1px #d7ecda;font-family:var(--mono)}.landing-opening .landing-opening-curve{background:#54873d}@keyframes meadow-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}@media(max-width:540px){.landing-opening .field-clover{width:calc(var(--size)*.8);height:calc(var(--size)*.8)}.landing-opening .field-clover:nth-child(2n){display:block}.landing-opening .landing-opening-label{top:25%;font-size:26px}}

/* Optical depth is static; only rooted sway and cursor rotation animate. */
.landing-opening .opening-field{inset:41% -3% -12%}.landing-opening .field-clover{filter:blur(var(--focus)) brightness(var(--tone));width:var(--size);height:var(--size)}
/* The handoff scales seventy-two sprites up to 4x at once; a per-plant blur/brightness filter makes
   every one of them re-rasterise per frame, which is what froze the wall. The grading is for the
   resting field, so the lift and the float run without it. The pixel-crisp hint costs the same
   re-raster at every step of that scale, and the compositor can otherwise reuse one raster for the
   whole flight, so the wall drops it too while it is airborne; the rooted meadow keeps both. */
.landing-opening.is-lifting .field-clover{filter:none;animation:none;transition:none}
.landing-opening.is-lifting .field-clover:nth-child(37n) img{animation:none}
.landing-opening.is-lifting .clover-noise{display:none!important}
.landing-opening.is-lifting .field-clover img{image-rendering:auto}.landing-opening .field-clover::before{display:none}.landing-opening .field-clover img{height:100%;animation:none;transform:rotate(var(--angle))}.landing-opening .clover-noise{display:none}.landing-opening .field-clover:nth-child(37n) .clover-noise{display:grid}.landing-opening .field-clover:nth-child(37n) img{animation:clover-signal 3100ms steps(1,end) var(--delay) infinite}.landing-opening .landing-opening-label{top:23%;color:#173d36}.landing-opening .landing-opening-curve{background:#274e34}@media(max-width:540px){.landing-opening .field-clover{width:calc(var(--size)*.7);height:calc(var(--size)*.7)}.landing-opening .opening-field{inset:43% -8% -8%}}

/* The opening curtain borrows the reference motion, not its page identity. */
.landing-opening{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:transparent;color:#fdfdfd}.landing-opening::backdrop{background:transparent}.landing-opening-screen{position:absolute;inset:0;background:#0f0f0f}.landing-opening-curve{position:absolute;top:100%;left:-25%;width:150%;height:20vh;border-radius:0 0 50% 50%;background:#0f0f0f;transform-origin:top}.landing-opening-label{position:absolute;top:calc(50% - 50px);left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:.5em;width:min(90vw,1100px);margin:0;text-align:center;font:400 clamp(28px,4.6vw,64px)/1.2 Arial,sans-serif;letter-spacing:-.025em}.opening-grass-gif{width:1.15em;height:1.15em;object-fit:cover;flex:0 0 auto}.opening-phrase{min-width:0}.opening-clover{display:inline-block;flex:0 0 auto;font-size:.85em;transform-origin:50% 70%}@media(max-width:540px){.landing-opening-label{top:calc(50% - 30px)}.landing-opening-curve{height:10vh}}

.hero-drawn-arrow{position:absolute;left:43%;top:75px;width:30%;height:300px;z-index:3;pointer-events:none;overflow:visible}.hero-drawn-arrow path{fill:none;stroke:#ff8088;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw-invitation 1300ms cubic-bezier(.22,1,.36,1) both}.hero-drawn-arrow path+path{animation-delay:850ms;animation-duration:450ms}@keyframes draw-invitation{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:760px){.hero-drawn-arrow{left:auto;right:3%;top:310px;width:110px;height:120px;transform:rotate(90deg)}}@media(prefers-reduced-motion:reduce){.hero-drawn-arrow path{animation:none}}

.opening-header-space{height:var(--header-height)}
.landing-opening::before{content:'';position:absolute;inset:0 0 auto;height:var(--header-height);background:var(--paper)}
.landing-opening>.masthead{width:min(100%,1600px);margin-inline:auto}
.landing-opening>.landing-opening-screen{top:var(--header-height)}
/* Center the greeting above the compact foreground, with equal image columns. */
.landing-opening .landing-opening-label{top:40%;display:grid;grid-template-columns:1.15em minmax(0,auto) 1.15em 1.35em;width:min(95vw,1320px);gap:.5em;line-height:1.5;text-shadow:none}.landing-opening .opening-clover{justify-self:center}.opening-glyph{display:inline-block;font-weight:500;text-shadow:0 1px 0 #fff,1px 0 0 #ffffffcc,-1px 0 0 #ffffffcc,0 -1px 0 #ffffffcc;animation:greeting-wave 1800ms steps(6,end) var(--wave-delay) infinite}.opening-word{display:inline-block;white-space:nowrap}@keyframes greeting-wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-.09em)}75%{transform:translateY(.09em)}}@media(prefers-reduced-motion:reduce){.opening-glyph{animation:none}}@media(max-width:540px){.landing-opening .landing-opening-screen{background-size:auto 100%;background-position:35% center}.landing-opening .landing-opening-label{top:38%;font-size:25px;gap:.35em}}

.landing-opening .landing-opening-label{z-index:5;top:calc(50% + var(--header-height)/2);grid-template-columns:1.3em minmax(0,auto) 2.35em;width:min(94vw,980px);gap:.4em}.landing-opening .opening-phrase{display:grid;justify-items:start;gap:.16em;min-width:0}.landing-opening .opening-line{display:block;width:max-content;max-width:100%;padding:.06em .24em;line-height:1.28;color:#16334b;background:#fffffff0;border:2px solid #16334b;box-shadow:.12em .12em 0 #16334b;text-shadow:none;opacity:0}.opening-friends{display:flex;align-items:center;gap:.08em;justify-self:start}.opening-friends .opening-clover{font-size:.92em}.opening-chibi-gif{width:1.35em;height:1.35em;object-fit:contain;align-self:center}.opening-wipes{position:absolute;z-index:8;inset:var(--header-height) 0 0;overflow:hidden;pointer-events:none;transform:translateY(0)}@media(max-width:540px){.landing-opening .landing-opening-label{grid-template-columns:.9em minmax(0,auto) 1.75em;width:min(96vw,380px);gap:.22em;font-size:23px}.landing-opening .opening-phrase{gap:.2em}.landing-opening .opening-line{padding:.08em .2em;border-width:1px;box-shadow:.1em .1em 0 currentColor}.opening-grass-gif{width:.9em;height:.9em}.opening-friends .opening-clover{font-size:.72em}.opening-chibi-gif{width:1em;height:1em}}
.landing-opening .opening-field{translate:0 -6vh}
/* Handwritten invitation and an interactive pixel companion frame the video. */
.hero .hero-copy h1{font-family:'Segoe Print','Comic Sans MS',cursive;font-weight:400!important;line-height:1.5!important;color:#ff99ab!important;text-shadow:none!important;font-size:clamp(44px,5.5vw,82px)!important}.hero .hero-copy{background:transparent;padding-top:90px}.hero .hero-copy .intro{position:static;width:auto;height:auto;overflow:visible;clip-path:none;max-width:43ch;margin-top:20px;color:#fff5e9;font:500 16px/1.7 var(--mono);text-shadow:1px 2px 0 #101925}.co-social{position:absolute;z-index:4;right:6%;top:40px;width:300px;color:#f4f7ef}.co-social summary{list-style:none;cursor:pointer;text-align:center;outline-offset:6px}.co-social summary::-webkit-details-marker{display:none}.co-social summary img{display:block;width:240px;height:280px;margin:auto;image-rendering:pixelated;transition:transform 200ms ease-out}.co-hint{display:inline-block;padding:10px 14px;background:#153e56;border:1px solid #94ccda;font:13px var(--mono)}.co-social[open] summary img{width:120px;height:140px}.hero:has(.co-social[open]){min-height:740px}.co-social nav{padding:12px;margin-top:10px;background:#123347;border:1px solid #94ccda;display:grid;grid-template-columns:1fr 1fr;gap:4px}.co-social nav a{padding:10px 8px;min-height:44px;font:12px var(--mono);text-decoration:none}.co-social nav a:hover,.co-social nav a:focus-visible{background:#27546a}.co-preview{display:none;position:absolute;top:300px;width:100%;padding:14px;background:#123347;border:1px solid #94ccda;font-size:12px;text-align:center}.co-social:not([open]):hover .co-preview,.co-social:not([open]):focus-within .co-preview{display:block}.co-social summary:hover img{transform:translateY(-5px) rotate(-2deg)}@media(max-width:760px){.hero .hero-copy{padding:38px 6% 10px}.co-social{position:relative;top:auto;right:auto;margin:0 auto 70px;width:min(88%,320px)}.co-social summary img{width:192px;height:224px}.co-preview{top:265px}.hero .hero-copy h1{font-size:44px!important}.hero .hero-actions{flex-direction:row}.hero .cta{font-size:10px;padding:10px;min-height:44px}}@media(prefers-reduced-motion:reduce){.co-social summary img{transition:none}.co-social summary:hover img{transform:none}}

.hero-meadow{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;background:transparent}.hero-meadow .opening-field{inset:41% -3% -12%;overflow:hidden}.hero-meadow .field-clover{opacity:1;width:var(--size);height:var(--size);filter:blur(var(--focus)) brightness(var(--tone));transform-origin:50% 100%;animation:meadow-sway 3600ms steps(8,end) var(--delay) infinite}.hero-meadow .field-clover::before{display:none}.hero-meadow .field-clover img{height:100%;animation:none;transform:rotate(var(--angle))}.hero-meadow .clover-noise{display:none}.hero:has(.hero-meadow) .hero-copy{z-index:3}.hero:has(.hero-meadow) .video-toggle{z-index:5}@media(max-width:540px){.hero-meadow .field-clover{width:calc(var(--size)*.7);height:calc(var(--size)*.7)}.hero-meadow .field-clover:nth-child(2n){display:block}}@media(prefers-reduced-motion:reduce){.hero-meadow .field-clover{animation:none}}

.hero-meadow .opening-field{inset:0;overflow:visible}.hero-meadow .field-clover{top:auto;bottom:calc(30% - 75px);width:220px;height:220px;filter:none}.hero-meadow .field-clover:nth-child(1){left:-65px;filter:blur(1.2px);width:280px;height:280px}.hero-meadow .field-clover:nth-child(2){left:48%;width:170px;height:170px;bottom:calc(30% - 85px)}.hero-meadow .field-clover:nth-child(3){left:auto;right:-80px;filter:blur(1.5px);width:300px;height:300px}@media(max-width:540px){.hero-meadow .field-clover:nth-child(1){left:-80px;width:210px;height:210px}.hero-meadow .field-clover:nth-child(2){left:45%;width:110px;height:110px;bottom:calc(30% - 45px)}.hero-meadow .field-clover:nth-child(3){right:-100px;width:220px;height:220px}}

@media(hover:hover) and (pointer:fine){html,body,.landing-opening{cursor:url('/assets/co-cursor.svg') 4 4,auto}a,button,summary,[role=button],.co-social summary{cursor:url('/assets/co-pointer.svg') 17 3,pointer}input,textarea,[contenteditable=true]{cursor:text}}

/* Native scroll keeps the stage behind the two reading chapters. */
.hero .cta-note{display:none}.hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero .hero-actions .cta-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;width:auto;padding:12px 18px;border:2px solid #FFDF81;border-radius:0;background:#FFDF81;color:#292334;box-shadow:4px 4px 0 #201b25;font:500 13px/1.4 var(--mono);text-decoration:none;white-space:nowrap}.hero .hero-actions .cta-primary:hover{background:#ffebad}.hero .hero-actions .cta-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #201b25}.hero .hero-copy h1 em{font-family:inherit;font-style:normal;color:inherit;text-shadow:none}.hero .cta-secondary{background:transparent;border:0;box-shadow:none;color:#f5e9e8;font-size:16px;padding:12px 0;text-decoration:underline;text-underline-offset:8px}.hero-drawn-arrow path{animation-delay:350ms}.hero-drawn-arrow path+path{animation-delay:1150ms}.info-sheet .about-co{padding:64px 3% 72px}.info-sheet .index-section{padding:48px 3% 56px}.about-co h2{font-size:clamp(28px,3vw,42px);margin-bottom:32px}.fact-grid p{font-size:14px;line-height:1.8}.fact-grid h3{font-size:16px}.info-sheet{border-radius:28px 28px 0 0;scroll-margin-top:24px}.about-co{scroll-margin-top:32px}@media(min-width:761px) and (prefers-reduced-motion:no-preference){.hero{position:sticky;top:0}.info-sheet{margin-top:0}}@media(max-width:760px){.info-sheet .about-co{padding:36px 0 40px}.info-sheet .index-section{padding:32px 0}.fact-grid>div{display:block}.fact-grid{gap:24px}.fact-grid h3{margin-bottom:8px}.hero .cta-secondary{font-size:15px;text-align:left;width:auto}.hero .hero-copy{padding-bottom:24px}}

/* Daylight sky carries across the page; deep blue ink keeps small copy readable. */
:root{--paper:#8BCFF0;--ink:#092A45;--muted:#174361;--line:#357BA4;--accent:#083D64;--gold:#FFDF81;--pink:#C83B62;--shadow:#073859}
body{background:#8BCFF0}.masthead{background:#A5DDF5;border-bottom:1px solid #357BA4}.brand small{color:#174361}.lang [aria-current]{background:#093E65;color:#F2FBFF;box-shadow:3px 3px 0 #5EACD4}.lang a:hover{background:#C3E9FA}.hero{background:#05070F;--muted:#D9E6F2;border-color:#8BDAF6}.hero-copy h1{color:#F5FCFF;text-shadow:3px 3px 0 #174B71}.hero-copy h1 em{text-shadow:2px 0 #C83B62,-1px 0 #E4FAFF,3px 3px #174B71}.hero .eyebrow,.hero .eyebrow span:first-child{color:#082F4C}.hero-copy{position:relative}.hero .intro{color:#D9E6F2}.hero .cta-note{color:#B9C8D8}.cta-secondary{color:#082F4C;background:#AEE3F5;border-color:#093E65}.cta-primary{color:#16384B}.hero-bottom{border-color:#075681;color:#082F4C}.hero-bottom a,.portrait-caption,.portrait-caption span:last-child{color:#082F4C}.video-toggle,.ascii-toggle{background:#073859;color:#F1FBFF;border-color:#BDEFFF}.ascii-toggle[aria-pressed=true]{background:#BDEFFF;color:#073859}.info-sheet{background:#A5DDF5;border-top-color:#E0F7FF;box-shadow:0 -12px 24px #07568122}.about-co h2{color:#093E65}.link.fb-group,.link.discord{background:#C2EBFA;color:#093E65}.closing{background:#8BCFF0;color:#092A45}.footer-meta{color:#174361}.footer-meta a{color:#092A45}.portrait-frame{outline-color:#BDEFFF}

/* Keep the playful stage separate from the quieter reading surface. */
/* White reading surfaces and sky-blue accents keep the video stage distinct. */
:root{--paper:#ffffff;--ink:#16334b;--muted:#405d75;--line:#a9cde5;--accent:#c8eaff;--shadow:#739ab8;--surface:#eff8ff;--surface-hover:#dcefff;--cyan:#dcefff;--rose:#eff8ff}
body{background:var(--paper)}
.masthead{height:68px;min-height:68px;padding:10px 7%;background:var(--paper);border:0;border-bottom:2px solid var(--line);color:var(--ink);font-family:var(--mono)}
.masthead .brand{color:var(--ink);font-size:24px;font-weight:500;gap:12px;flex-shrink:0}
/* The mark is the stemless, 30°-leaning clover (scripts/gen_logo_mark.py --no-stem
   --tilt-deg 30 --tileless). The ink frame + sky tile are drawn HERE rather than in the
   SVG, so the clover can spin inside a frame that itself never moves. */
.masthead .brand>span.brand-mark{position:relative;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:#A5DDF5;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);transition:transform 160ms ease-out}
.masthead .brand-mark>img{position:relative;z-index:1;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;object-fit:contain;transform-origin:50% 50%;will-change:transform;animation:brand-clover-spin 8s linear infinite}
/* Motion blur = two lagging, softly blurred copies of the same mark, hidden while it rests. */
.masthead .brand-mark::before,.masthead .brand-mark::after{content:'';position:absolute;inset:0;background:url(/assets/logo-mark.svg) center/contain no-repeat;opacity:0;pointer-events:none;transform-origin:50% 50%;animation:brand-clover-spin 8s linear infinite,brand-clover-trail 8s linear infinite}
.masthead .brand-mark::before{animation-delay:-.22s;filter:blur(.6px)}
.masthead .brand-mark::after{animation-delay:-.44s;filter:blur(1.1px)}
@keyframes brand-clover-spin{0%,55%{transform:rotate(0deg)}67%{transform:rotate(46deg)}79%{transform:rotate(196deg)}89%{transform:rotate(332deg)}94%,100%{transform:rotate(360deg)}}
@keyframes brand-clover-trail{0%,55%{opacity:0}62%{opacity:.34}84%{opacity:.26}95%,100%{opacity:0}}
.masthead .brand-clover{display:inline-block;width:20px;height:20px;vertical-align:baseline;margin-left:5px;image-rendering:pixelated;background:url(/assets/clover-pixel.svg) center/contain no-repeat;transition:transform 180ms ease-out}.masthead .brand>span{display:block;line-height:1.1;white-space:nowrap}.masthead .brand small{display:block;color:var(--muted);font:500 11px/1.4 var(--mono);margin-top:3px}
.masthead .lang{font-family:var(--mono);gap:0;flex-shrink:0;padding:3px;border:1px solid var(--line);background:var(--surface)}.masthead .lang a,.masthead .lang span{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:2px solid transparent;border-radius:0;box-shadow:none;color:var(--ink)}.masthead .lang [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:none}.masthead .lang a:hover{background:var(--surface);border-color:var(--line)}.masthead a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.hero{border:0;min-height:calc(100dvh - var(--header-height))}.hero .hero-grid{min-height:calc(100dvh - var(--header-height));padding:0}.hero .hero-copy{width:55%;padding:clamp(32px,6vh,64px) 0 40px 7%}.hero .hero-copy h1{font-family:var(--mono);font-weight:500!important;font-size:clamp(30px,3.1vw,46px)!important;line-height:1.2!important;color:#F7FAFF!important;text-shadow:4px 4px 0 #201b25!important;text-wrap:balance}.hero .hero-copy h1 em{font-style:normal;color:#FFDF81;text-shadow:3px 0 #C83B62,-2px 0 #58D6E8,4px 4px #201b25}.hero .hero-actions{margin-top:26px}.hero .cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:2px solid #a5eeff;border-radius:0;background:#a5eeff;color:#103e48;box-shadow:4px 4px 0 #201b25;text-decoration:none;font:500 13px/1.4 var(--mono);white-space:nowrap;transition:background 160ms ease-out,transform 160ms ease-out}.hero .cta-secondary:hover{background:#d2f8ff}.hero .cta-secondary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #201b25}.hero .cta-secondary:focus-visible{outline:2px solid #fff1f3;outline-offset:5px}.co-social{right:8%;top:64px;width:280px}.co-hint{background:#e7f4f7;color:#173e50;border-color:#bfd5dd;padding:12px 16px}.co-social nav{background:#e7f4f7;color:#173e50;border-color:#bfd5dd;gap:4px}.co-social nav a:hover,.co-social nav a:focus-visible{background:#cce5eb}.co-preview{background:#e7f4f7;color:#173e50;border-color:#bfd5dd}.hero-drawn-arrow{left:44%;width:23%;top:130px;height:210px}.hero-meadow .field-clover{bottom:-90px}.hero-meadow .field-clover:nth-child(2){bottom:-90px}
.info-sheet{background:var(--paper);color:var(--ink);border-top:4px solid var(--accent);border-radius:0;padding:0 7%;box-shadow:0 -4px 0 var(--shadow)}
.info-sheet .about-co{padding:56px 0}.about-co h2{color:var(--ink);font-size:clamp(28px,3vw,40px);margin-bottom:32px;text-shadow:2px 2px 0 #dcefff}.fact-grid{gap:32px}.fact-grid h3{font:500 16px/1.6 var(--mono);color:var(--ink);margin-bottom:12px}.fact-grid p{font:400 14px/1.85 var(--mono);color:var(--muted);max-width:38ch}
.info-sheet .index-section{padding:40px 0 56px;grid-template-columns:200px minmax(0,1fr);gap:32px;border-top:2px solid var(--line)}.section-heading h2{font-size:28px;line-height:1.3;color:var(--ink);text-shadow:2px 2px 0 #dcefff}
.links{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-sheet .link{min-width:0;min-height:60px;padding:14px 16px;margin:0;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:0;box-shadow:4px 4px 0 var(--shadow);gap:12px;transform:none;transition:transform 100ms steps(2,end)}.link .label{font:500 13px/1.5 var(--mono)}.link .icon{flex-shrink:0;width:20px;height:20px;color:var(--muted)}.info-sheet .link.fb-group,.info-sheet .link.discord{border-color:var(--ink);background:var(--cyan);color:var(--ink)}.info-sheet .link.discord{background:var(--rose)}.info-sheet .link.zypage{background:var(--accent)}.info-sheet .link .chev{color:var(--ink)}.link.zypage{grid-column:auto;grid-row:auto;margin:0}.info-sheet .link:hover{color:var(--ink);border-color:var(--ink);background:var(--surface-hover)}.info-sheet .link:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}.info-sheet .link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.link .chev{transition:none}.link:hover .chev{transform:translateX(2px)}

@media(max-width:760px){.masthead{padding:12px 6%}.hero,.hero .hero-grid{min-height:calc(100dvh - var(--header-height))}.hero{padding-bottom:0}.hero .hero-copy{width:100%;padding:36px 6% 24px}.hero .hero-copy h1{font-size:clamp(25px,7.2vw,32px)!important;line-height:1.35!important}.hero .hero-actions{margin-top:18px}.hero .cta-secondary{font-size:13px;width:auto;padding:12px 16px}.co-social{position:relative;right:auto;top:auto;width:min(88%,320px);margin:12px auto 96px}.co-social summary img{width:168px;height:196px}.co-social[open] summary img{width:96px;height:112px}.co-preview{top:240px}.hero-drawn-arrow{display:none}.hero:has(.co-social[open]){min-height:850px}.hero-meadow .field-clover:nth-child(1),.hero-meadow .field-clover:nth-child(2),.hero-meadow .field-clover:nth-child(3){bottom:-95px}.info-sheet{padding:0 6%;border-radius:0}.info-sheet .about-co{padding:40px 0}.about-co h2{font-size:28px;margin-bottom:28px}.fact-grid{gap:28px}.fact-grid h3{font-size:15px;margin-bottom:8px}.fact-grid p{font-size:14px;max-width:none}.info-sheet .index-section{display:block;padding:32px 0 40px}.section-heading{margin-bottom:24px}.section-heading h2{font-size:28px}.section-heading h2 br{display:none}.links{gap:12px}.link .label{font-size:12px}.link.fb-group,.link.discord{order:-1;grid-column:1/-1;grid-row:auto;min-height:60px;margin-bottom:10px;padding:14px 16px}.link.zypage{grid-column:1/-1}.hero .video-toggle{bottom:18px;right:6%}}
/* Navigation swaps and button presses use the same short, discrete cadence. */
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:steps(4,end)}
.hero .hero-actions .cta,.masthead .lang a{transition:transform 100ms steps(2,end)}
.masthead .lang a:active{transform:translate(2px,2px)}
@media(prefers-reduced-motion:reduce){.hero .hero-actions .cta,.info-sheet .link,.masthead .lang a{transition:none}.hero .hero-actions .cta:active,.info-sheet .link:active,.masthead .lang a:active,.link:hover .chev{transform:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Protect copy from changing video luminance without darkening the whole portrait. */
.hero .portrait-frame::before{content:'';display:block;position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;background:linear-gradient(90deg,#101925ed 0%,#101925ba 32%,#10192540 58%,transparent 78%)}
.hero .hero-copy h1{text-shadow:2px 2px 0 #101925,-1px -1px 0 #101925!important}
@media(max-width:760px){.hero .portrait-frame::before{background:linear-gradient(180deg,#101925df 0%,#101925b8 25%,#10192566 50%,transparent 88%)}.hero .hero-copy .intro{font-size:14px;margin-top:16px;line-height:1.6}.hero .follower-milestone{margin-top:20px}}
/* The garden keeps the portrait open; type and actions carry the left side. */
.hero.garden-hero{overflow:clip}
.hero.garden-hero .hero-copy{width:57%;padding:clamp(48px,9vh,100px) 0 110px 7%;max-width:820px}
.hero.garden-hero .hero-copy h1{font:500 clamp(30px,3.1vw,46px)/1.2 var(--mono)!important;color:#F7FAFF!important;text-shadow:2px 2px 0 #101925,-1px -1px 0 #101925!important;text-wrap:balance}
.hero.garden-hero .hero-copy h1 em{color:#FFDF81;text-shadow:3px 0 #C83B62,-2px 0 #58D6E8,4px 4px #201b25}
.hero.garden-hero .hero-copy .intro{max-width:43ch;font:500 16px/1.7 var(--mono);color:#fff5e9;margin-top:20px;text-shadow:1px 2px 0 #101925}
.hero.garden-hero .hero-actions{gap:12px;margin-top:30px;flex-direction:row}
.hero.garden-hero .hero-actions .cta{font-size:12px;min-height:50px;padding:14px 18px;border-width:1px;box-shadow:none;transition:transform 160ms ease-out,background-color 160ms ease-out}
.hero.garden-hero .hero-actions .cta-primary{background:#ffe0a0;border-color:#ffe0a0;color:#241c28;box-shadow:0 3px 0 #a87b52}
.hero.garden-hero .hero-actions .cta-secondary{background:#10192566;border-color:#fff5e966;color:#fff5e9}
.hero.garden-hero .hero-actions .cta:active{transform:translateY(2px)}
.hero.garden-hero .follower-milestone{margin-top:34px;padding:18px 0 0;border:0;border-top:1px solid #fff5e933;background:transparent;box-shadow:none;max-width:620px;color:#e4dce2}
.hero.garden-hero .follower-milestone h2{font-size:18px;line-height:1.5;color:#FFDF81;margin-bottom:8px}
.hero.garden-hero .follower-milestone p{font-size:13px;line-height:1.7;margin-bottom:8px}
.hero.garden-hero .follower-milestone .milestone-count{color:#fff4cd;font-variant-numeric:tabular-nums}
.milestone-interactive{margin-top:20px}
/* Hero neural network. Every node is the brand's own pixel clover - the same
   clover-pixel.svg that draws the o in the wordmark and grows in the calendar - drawn as
   it is, with the light laid over the art as a filter so the pixel shading survives:
   gold = a milestone that is really reached, cyan = the forward pass sweeping the layers,
   gold again on hover = the wiring of the node you point at. */
.nn{--nn-node:24px;--nn-col-last:74%;position:relative;height:176px;margin:0 0 6px}
.nn-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nn-edge{stroke:#a5eeff;stroke-width:3;opacity:.2;vector-effect:non-scaling-stroke;transition:opacity 200ms ease-out,stroke 200ms ease-out}
.nn-node{position:absolute;width:var(--nn-node);height:var(--nn-node);transform:translate(-50%,-50%);transition:opacity 200ms ease-out}
.nn-node::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.nn-dot{position:relative;display:block;width:100%;height:100%;border-radius:50%;transition:box-shadow 240ms ease-out}
.nn-dot::before{content:'';position:absolute;inset:0;background:url(/assets/clover-pixel.svg) center/contain no-repeat;image-rendering:pixelated;filter:var(--nn-light,none);transition:filter 240ms ease-out}
.nn-layer-label{position:absolute;top:0;transform:translateX(-50%);font:500 9px/1 var(--mono);letter-spacing:.06em;color:#8fb6c9;white-space:nowrap;text-transform:uppercase}
.nn-out{position:absolute;left:calc(var(--nn-col-last) - var(--nn-node) / 2);right:0;transform:translateY(-50%);display:flex;align-items:center;padding:0 8px 0 0;border:0;background:none;color:#8fb6c9;cursor:pointer;font:inherit;text-align:left;transition:color 200ms ease-out,opacity 200ms ease-out}
.nn-out .nn-dot{flex:none;width:var(--nn-node);height:var(--nn-node)}
/* The two numbers at the end of the pass are the prizes the graph is aiming at, so they are
   chips rather than bare digits - cool until their milestone is real, gold and glowing once it is. */
.nn-out-num{position:relative;flex:none;margin-left:auto;padding:1px 6px 2px;overflow:hidden;border:1px solid #a5eeff80;background:#0d1620cc;font:500 11px/1.35 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color 200ms ease-out,background 200ms ease-out,box-shadow 200ms ease-out}
.nn-arrow{position:relative;flex:1 1 auto;min-width:14px;max-width:64px;height:2px;margin:0 6px;background:currentColor;opacity:.75}
.nn-arrow::after{content:'';position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.nn[data-phase="0"] .nn-node[data-layer="0"] .nn-dot,
.nn[data-phase="1"] .nn-node[data-layer="1"] .nn-dot,
.nn[data-phase="2"] .nn-node[data-layer="2"] .nn-dot,
.nn[data-phase="3"] .nn-node[data-layer="3"] .nn-dot,
.nn[data-phase="4"] .nn-node[data-layer="4"] .nn-dot{--nn-light:hue-rotate(88deg) saturate(1.3) brightness(1.14);box-shadow:0 0 12px #a5eeffaa}
.nn[data-phase="1"] .nn-edge[data-bound="0"],
.nn[data-phase="2"] .nn-edge[data-bound="1"],
.nn[data-phase="3"] .nn-edge[data-bound="2"],
.nn[data-phase="4"] .nn-edge[data-bound="3"]{opacity:.8;stroke:#cdf3ff}
.nn[data-phase="4"] .nn-out .nn-dot{--nn-light:hue-rotate(88deg) saturate(1.3) brightness(1.14);box-shadow:0 0 14px #a5eeffaa}
/* Dynamic light for the two numbers the graph is aiming at. Cool light is the pass arriving, gold
   is a prize that is genuinely reached: the plates and their digits take a sweep the moment the
   forward pass lands on the output layer, and a reached milestone keeps breathing rather than
   sitting on one static glow. */
.nn-out-num::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 36%,#eafcffb8 50%,transparent 64%)}
@keyframes nn-num-sweep{0%{transform:translateX(-130%);opacity:0}18%{opacity:1}100%{transform:translateX(130%);opacity:0}}
@keyframes nn-num-lit{0%,100%{filter:none}38%{filter:brightness(1.5)}}
@keyframes nn-num-breathe{50%{box-shadow:0 0 20px -1px #FFDF81;border-color:#fff3cf}}
.nn[data-phase="4"] .nn-out-num{animation:nn-num-lit 420ms ease-out}
.nn[data-phase="4"] .nn-out-num::after{animation:nn-num-sweep 420ms ease-out}
.nn-out[data-reached=true] .nn-out-num{animation:nn-num-breathe 2600ms ease-in-out infinite}
.nn-out[data-reached=true]{color:#FFDF81}
.nn-out[data-reached=true] .nn-dot{--nn-light:sepia(.92) saturate(2.6) hue-rotate(-16deg) brightness(1.05);box-shadow:0 0 12px #FFDF8177}
.nn-out[data-reached=true] .nn-out-num{border-color:#FFDF81;background:#101925;box-shadow:0 0 14px -2px #FFDF81;text-shadow:0 0 8px #FFDF8188}
.nn-edge[data-reached=true]{stroke:#FFDF81;opacity:.85}
.nn-out[aria-pressed=true]{color:#fff4cd}
.nn-out[aria-pressed=true] .nn-out-num{border-color:#fff4cd;background:#16283a}
.nn-out[aria-pressed=true] .nn-dot{box-shadow:0 0 0 3px #FFDF8166}
.nn[data-inspect="1"] .nn-node{opacity:.15}
.nn[data-inspect="1"] .nn-edge{opacity:.05}
.nn[data-inspect="1"] .nn-out{opacity:.2}
.nn[data-inspect="1"] .nn-node[data-on=true],
.nn[data-inspect="1"] .nn-node[data-near=true],
.nn[data-inspect="1"] .nn-out[data-on=true],
.nn[data-inspect="1"] .nn-out[data-near=true]{opacity:1}
.nn[data-inspect="1"] .nn-node[data-near=true] .nn-dot,
.nn[data-inspect="1"] .nn-out[data-on=true] .nn-dot{--nn-light:sepia(.92) saturate(2.6) hue-rotate(-16deg) brightness(1.05)}
.nn[data-inspect="1"] .nn-edge[data-on="1"]{opacity:1;stroke:#FFDF81}
.milestone-progress{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The sentence is gone from the screen - the rewards below say it with pictures - but the
   selection still has to be announced, so it stays for assistive tech only. */
.milestone-detail{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The giveaway itself, sitting under the graph the way the output layer hands it over. */
.milestone-reward-row{margin:0 0 8px;padding:8px;border:1px solid #fff5e933;background:#0d1620aa;transition:border-color 200ms ease-out,background 200ms ease-out}
.milestone-reward-row[data-reached=true]{border-color:#FFDF8188;background:#101925}
.milestone-reward-row ul{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;margin:0;padding:0;list-style:none}
/* Rarity is a gacha pull, so the tier reads as colour and glow before it reads as a letter:
   R runs cool blue, SR runs the same gold the milestones already use. */
.milestone-reward-row li{position:relative;display:block;min-width:0;--rarity:#a5eeff;--rarity-ink:#e6f7ff}
.milestone-reward-row li[data-rarity=r]{--rarity:#63b3ff;--rarity-ink:#dcecff}
.milestone-reward-row li[data-rarity=sr]{--rarity:#FFDF81;--rarity-ink:#fff3cf}
.reward-art{position:relative;display:block;padding:3px;border:1px solid var(--rarity);box-shadow:0 0 10px -3px var(--rarity);transition:box-shadow 180ms ease-out,transform 180ms ease-out}
.reward-art img{display:block;width:64px;height:64px;object-fit:contain;background:#fff}
.reward-tag{position:absolute;left:5px;top:5px;z-index:1;padding:1px 4px;background:#0b1119e6;border:1px solid var(--rarity);color:var(--rarity-ink);font:600 9px/1.4 var(--mono);letter-spacing:.06em;text-shadow:0 0 6px var(--rarity)}
.reward-count{position:absolute;right:-6px;bottom:-6px;padding:2px 6px;background:var(--rarity);color:#1b1526;font:500 12px/1.2 var(--mono);font-variant-numeric:tabular-nums;box-shadow:2px 2px 0 #201b25}
/* The SR is the pull worth chasing, so it keeps breathing even when nothing points at it. */
.milestone-reward-row li[data-rarity=sr] .reward-art{animation:reward-sr 2600ms ease-in-out infinite}
@keyframes reward-sr{50%{box-shadow:0 0 18px -1px var(--rarity)}}
/* Sixty-four pixels cannot sell a tier, so hovering opens the piece at a size worth looking at. */
.reward-peek{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;width:max-content;padding:10px 12px 8px;background:#0b1119f2;border:1px solid var(--rarity);box-shadow:0 0 24px -8px var(--rarity),4px 4px 0 #201b25;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity 160ms ease-out,transform 160ms ease-out,visibility 0s linear 160ms;pointer-events:none}
/* The prize card is the one surface where colour is allowed to run: a rainbow chases its rim like a
   gacha reveal, using the same seven hues the greeting already spells its question in. Browsers
   without registered custom properties simply keep the flat rarity border below. */
@property --reward-chase{syntax:'<angle>';inherits:false;initial-value:0deg}
.reward-peek::before{content:'';position:absolute;inset:-1px;z-index:0;padding:2px;pointer-events:none;background:conic-gradient(from var(--reward-chase),#ff2866 0deg,#ff791b 51deg,#ffc400 103deg,#35c943 154deg,#00bdd9 206deg,#3975ff 257deg,#ba39ed 309deg,#ff2866 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:reward-chase 2600ms linear infinite}
@keyframes reward-chase{to{--reward-chase:360deg}}
.reward-peek img{display:block;width:148px;height:148px;object-fit:contain;background:#fff}
.reward-peek-name{font:500 13px/1.4 var(--mono);color:#fff5e9}
.reward-peek-tier{font:500 10px/1.4 var(--mono);letter-spacing:.04em;color:var(--rarity-ink);text-shadow:0 0 8px var(--rarity)}
.milestone-reward-row li:focus-visible{outline:2px solid var(--rarity);outline-offset:4px}
.milestone-reward-row li:focus-visible .reward-peek{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.milestone-reward-row li:focus-visible .reward-art{box-shadow:0 0 20px -2px var(--rarity);transform:translateY(-2px)}
@media(hover:hover){
.milestone-reward-row li:hover .reward-peek{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.milestone-reward-row li:hover .reward-art{box-shadow:0 0 20px -2px var(--rarity);transform:translateY(-2px)}
}
.nn-out:focus-visible{outline:2px solid #FFDF81;outline-offset:3px}
@media(hover:hover){.nn-out:hover{color:#FFDF81}}
@media(prefers-reduced-motion:reduce){.nn-edge,.nn-dot,.nn-node,.nn-out,.nn-out-num,.nn-out-num::after,.milestone-reward-row{transition:none}.nn[data-phase="4"] .nn-out-num,.nn[data-phase="4"] .nn-out-num::after,.nn-out[data-reached=true] .nn-out-num{animation:none}.milestone-reward-row li[data-rarity=sr] .reward-art{animation:none}.reward-peek::before{animation:none;background:var(--rarity)}}
.hero-garden{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
/* The drifting motes are gone (papa, 2026-09-18: too busy over the hero); the click bloom is what
   is left of the garden. */
.garden-bloom{position:absolute;top:0;left:0;width:20px;height:20px;opacity:0;pointer-events:none;background:url('/assets/clover-pixel.svg') center/contain no-repeat;image-rendering:pixelated}
.garden-invitation{position:absolute;z-index:4;bottom:24px;right:5%;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid #fff5e94d;color:#fff5e9;background:#101925b8;font:11px/1.5 var(--mono);cursor:pointer}
.garden-invitation::before{content:'';width:18px;height:18px;background:url('/assets/clover-pixel.svg') center/contain no-repeat;image-rendering:pixelated}
.garden-invitation:focus-visible{outline:2px solid #ffe0a0;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.hero.garden-hero .cta-primary:hover{background:#ffebc4}.hero.garden-hero .cta-secondary:hover,.garden-invitation:hover{background:#322536cc}}
@media(max-width:1000px) and (min-width:761px){.hero.garden-hero .hero-copy{width:65%;padding-left:6%}.hero.garden-hero .hero-copy h1{font-size:clamp(30px,3.1vw,46px)!important}}
@media(max-width:760px){.hero.garden-hero .hero-grid{min-height:max(760px,calc(100dvh - var(--header-height)))}.hero.garden-hero .hero-copy{width:100%;max-width:none;padding:36px 6% 180px}.hero.garden-hero .hero-copy h1{font-size:clamp(25px,7.2vw,32px)!important;line-height:1.35!important}.hero.garden-hero .hero-copy .intro{font-size:14px;margin-top:16px;line-height:1.6;max-width:43ch}.hero.garden-hero .hero-actions{gap:10px;margin-top:22px}.hero.garden-hero .hero-actions .cta{font-size:11px;padding:12px;min-height:46px;white-space:normal}.hero.garden-hero .follower-milestone{margin-top:26px;padding:16px 0 0;max-width:none}.garden-invitation{bottom:20px;right:6%}}
@media(prefers-reduced-motion:reduce){.hero-garden{display:none}.hero.garden-hero .hero-actions .cta{transition:none}.hero.garden-hero .hero-actions .cta:active{transform:none}}

/* Section links remain native anchors; the header offset also applies to deep links. */
:root{--header-height:80px}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
.masthead{position:sticky;top:0;z-index:10;gap:24px;height:var(--header-height);min-height:var(--header-height)}
.section-nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:0 1 auto;min-width:0;padding:4px;border:1px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--line)}
.section-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;font:500 13px/1.4 var(--mono);text-decoration:none;white-space:nowrap;border:0;transition:transform 160ms ease-out,background-color 160ms ease-out}
.section-nav a[aria-current]{background:var(--accent);box-shadow:inset 0 -2px var(--ink)}
.section-nav a:focus-visible{background:var(--accent)}
@media(hover:hover) and (pointer:fine){.section-nav a:hover{background:var(--surface-hover);transform:translateY(-2px)}.masthead .brand:hover>span.brand-mark{transform:translateY(-2px)}.masthead .brand:hover .brand-clover{transform:rotate(18deg) translateY(-2px)}}
.section-nav a:active{transform:translateY(1px);background:var(--accent)}
@media(prefers-reduced-motion:reduce){.section-nav a,.masthead .brand-clover{transition:none}.masthead .brand-mark>img,.masthead .brand-mark::before,.masthead .brand-mark::after{animation:none}.masthead .brand-mark::before,.masthead .brand-mark::after{opacity:0}.section-nav a:hover,.section-nav a:active,.masthead .brand:hover>span.brand-mark,.masthead .brand:hover .brand-clover{transform:none}}
.info-sheet #about-title,.info-sheet #showcase,.info-sheet #connect{scroll-margin-top:0}
.stream-schedule,.creator-credits{padding:40px 0;border-top:2px solid var(--line);scroll-margin-top:12px}.credits-link{padding:24px 0 40px;border-top:2px solid var(--line);font:500 13px/1.6 var(--mono)}.credits-link a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px}.credits-link a:hover{background:var(--accent)}.stream-schedule h2,.creator-credits h2{font:500 clamp(24px,3vw,34px)/1.4 var(--mono);margin-bottom:20px}.schedule-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.schedule-list>div{border-top:1px solid var(--line);padding-top:16px}.schedule-list dt,.credits-list dt{font:500 14px/1.6 var(--mono);margin-bottom:8px}.schedule-list dd,.credits-list dd{margin:0;font:14px/1.8 var(--mono)}.schedule-list a,.credits-list a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px}.credits-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:20px}.credits-list strong,.credits-list a{display:block}.creator-credits>p{max-width:70ch;font:13px/1.8 var(--mono);color:var(--muted)}@media(max-width:760px){.schedule-list,.credits-list{grid-template-columns:1fr;gap:20px}.stream-schedule,.creator-credits{padding-block:32px}.section-nav{gap:10px}}
.work-section{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:center;gap:48px;padding:44px 0;border-top:2px solid var(--line);scroll-margin-top:12px}.work-section h2{font:500 clamp(26px,3vw,34px)/1.4 var(--mono);margin-bottom:16px}.work-section p{max-width:57ch;color:var(--muted);font:14px/1.85 var(--mono)}.work-contact{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:var(--accent);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);text-decoration:none;transition:transform 120ms ease-out}.work-contact small{display:block;font:12px/1.5 var(--mono);margin-bottom:8px}.work-contact strong{display:block;font:500 25px/1.4 var(--mono)}.work-contact>span:last-child{font-size:26px}.work-contact:active{transform:translate(2px,2px)}@media(hover:hover) and (pointer:fine){.work-contact:hover{transform:translateY(-2px)}}@media(max-width:760px){.work-section{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 0}.work-contact{padding:20px}}@media(prefers-reduced-motion:reduce){.work-contact{transition:none}.work-contact:hover,.work-contact:active{transform:none}}
.co-chibi{display:block;width:128px;height:128px;object-fit:contain;pointer-events:none;flex-shrink:0}.content-invite>.co-chibi{float:right;width:144px;height:144px;margin:0 0 16px 24px}.content-invite{display:flow-root}.index-section .section-heading>.co-chibi{width:140px;height:140px;margin:0 0 12px}.work-intro>.co-chibi{float:left;margin:0 20px 4px 0}.work-intro{display:flow-root}.work-contact{gap:16px;padding:20px}.work-contact>span:nth-child(2){flex:1;min-width:0}.work-contact .work-avatar{width:80px;height:80px;object-fit:cover;flex-shrink:0;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow)}.work-contact strong{font-size:23px}.donation-section{display:grid;grid-template-columns:minmax(0,1fr) 256px;align-items:center;gap:48px;padding:40px 0;border-top:2px solid var(--line);scroll-margin-top:12px}.donation-kicker{font:12px/1.5 var(--mono);color:var(--muted);margin-bottom:10px}.donation-section h2{font:500 clamp(26px,3vw,34px)/1.4 var(--mono);margin-bottom:16px}.donation-section p:not(.donation-kicker){max-width:52ch;font:14px/1.8 var(--mono);color:var(--muted)}.donation-section p:not(.donation-kicker)+p{margin-top:12px}.donation-open{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;padding:10px 16px;background:var(--accent);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);font:13px/1.5 var(--mono);text-decoration:none}.donation-code{margin:0;text-align:center}.donation-code img{display:block;width:256px;max-width:100%;height:auto;background:white}.donation-code figcaption a{display:inline-flex;align-items:center;min-height:44px;font:12px/1.5 var(--mono);text-underline-offset:4px}@media(max-width:760px){.content-invite>.co-chibi{width:96px;height:96px;margin-left:12px}.index-section .section-heading{display:flex;align-items:center;gap:16px}.index-section .section-heading>.co-chibi{width:88px;height:88px;margin:0}.work-intro>.co-chibi{width:96px;height:96px;margin-right:14px}.donation-section{grid-template-columns:1fr;gap:24px;padding-block:32px}.donation-code{justify-self:center}}@media(max-width:380px){.work-contact{padding:14px;gap:12px}.work-contact .work-avatar{width:64px;height:64px}.work-contact strong{font-size:20px}}
.content-calendar{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);margin:32px 0 36px;background:var(--paper);font:14px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.calendar-main{min-width:0;padding:24px}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.calendar-toolbar h3{font:500 clamp(19px,2vw,27px)/1.35 var(--mono);text-transform:capitalize;text-wrap:balance}.calendar-controls{display:flex;gap:6px;flex-shrink:0}.calendar-controls button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 12px var(--mono);cursor:pointer;transition:transform 120ms ease-out}.calendar-controls button[data-today]{background:var(--surface)}
.content-calendar button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;position:relative;z-index:2}.calendar-controls button:active{transform:translateY(2px)}.calendar-hint{margin:8px 0 24px;font-size:12px;color:var(--muted)}
.calendar-table{width:100%;table-layout:fixed;border-spacing:3px;border-collapse:separate;margin:-3px}.calendar-table th{height:34px;color:var(--muted);font-size:11px;font-weight:500;text-align:center}.calendar-table td{padding:0;vertical-align:top}.calendar-date{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;gap:6px;width:100%;min-width:0;height:72px;padding:8px 4px 6px;background:var(--paper);border:1px solid transparent;color:var(--ink);font:500 14px/1.2 var(--mono);cursor:pointer;transition:transform 120ms ease-out}.calendar-date[data-outside=true]{color:var(--muted);background:var(--surface)}.calendar-date-number{display:grid;place-items:center;min-width:24px;min-height:24px}.calendar-date[aria-current=date] .calendar-date-number{border-bottom:2px solid currentColor}.calendar-date[aria-pressed=true]{background:var(--accent);border-color:var(--ink);box-shadow:2px 2px 0 var(--shadow);color:var(--ink)}.calendar-date-caption{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px}.calendar-date-marks{height:5px;display:flex;gap:3px}.calendar-date-marks i{width:5px;height:5px;background:var(--ink)}.calendar-date-marks i[data-kind=live]{border-radius:50%}.calendar-date-marks i[data-kind=short]{transform:rotate(45deg)}
.calendar-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.calendar-legend{display:flex;flex-wrap:wrap;gap:16px}.calendar-legend span{display:inline-flex;align-items:center;gap:6px}.calendar-legend span::before{content:'';width:6px;height:6px;background:var(--ink)}.calendar-legend [data-kind=live]::before{border-radius:50%}.calendar-legend [data-kind=short]::before{transform:rotate(45deg)}
.calendar-day-panel{min-width:0;border-left:1px solid var(--line);padding:28px;background:var(--surface)}.calendar-eyebrow{font-size:11px;color:var(--muted);margin-bottom:12px}.calendar-day-panel>h3{font:500 clamp(18px,1.7vw,24px)/1.5 var(--mono);text-wrap:balance}.calendar-timezone{font-size:11px;color:var(--muted);margin:8px 0 24px}.calendar-day-content{border-top:1px solid var(--line);padding-top:24px}.calendar-plant{position:relative;display:block;width:112px;height:136px;margin:0 0 24px;isolation:isolate}.calendar-plant-reaction,.calendar-plant-sway{position:absolute;inset:0;transform-origin:50% 130px}.calendar-plant-sway{animation:calendar-stem-sway 4800ms ease-in-out infinite;animation-play-state:paused}.calendar-plant-sway>img{position:absolute;left:12px;top:0;width:88px;height:88px;image-rendering:pixelated;transform-origin:50% 70%;animation:calendar-canopy-sway 4800ms ease-in-out -300ms infinite;animation-play-state:paused}.calendar-plant-ground{position:absolute;left:36px;bottom:1px;width:40px;height:5px;background:var(--shadow);opacity:.22;z-index:-1;animation:calendar-ground-sway 4800ms ease-in-out infinite;animation-play-state:paused}.calendar-plant[data-running=true] .calendar-plant-sway,.calendar-plant[data-running=true] .calendar-plant-sway>img,.calendar-plant[data-running=true] .calendar-plant-ground{animation-play-state:running}@keyframes calendar-stem-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}@keyframes calendar-canopy-sway{0%,100%{transform:rotate(4deg) translateY(1px)}50%{transform:rotate(-5deg) translateY(-2px)}}@keyframes calendar-ground-sway{0%,100%{transform:scaleX(.88);opacity:.18}50%{transform:scaleX(1.06);opacity:.26}}@media(prefers-reduced-motion:reduce){.calendar-plant-sway,.calendar-plant-sway>img,.calendar-plant-ground{animation:none}}.calendar-empty h4,.calendar-event h4{font:500 20px/1.5 var(--mono);text-wrap:balance;margin:0 0 12px}.calendar-empty p,.calendar-event-description{font-size:13px;line-height:1.85;color:var(--muted)}.calendar-empty a,.calendar-event-link{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-size:12px;text-underline-offset:5px}.calendar-events{list-style:none}.calendar-event+.calendar-event{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.calendar-event-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--ink);margin-bottom:20px}.calendar-event-kind{font-size:11px;color:var(--muted);margin-bottom:10px}.calendar-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.calendar-controls button:hover{background:var(--accent);transform:translateY(-2px)}.calendar-date:hover{border-color:var(--line);background:var(--surface-hover);transform:translateY(-2px)}.calendar-date[aria-pressed=true]:hover{background:var(--accent)}}
@media(max-width:1000px){.calendar-main{padding:18px}.calendar-day-panel{padding:24px}.calendar-controls button{padding-inline:8px}.calendar-legend{gap:12px}}
@media(max-width:760px){.content-calendar{grid-template-columns:minmax(0,1fr);box-shadow:4px 4px 0 var(--shadow)}.calendar-main{padding:18px 10px}.calendar-toolbar{gap:10px;padding-inline:4px;flex-wrap:wrap}.calendar-toolbar h3{font-size:20px}.calendar-controls{gap:4px}.calendar-hint{margin:12px 4px 18px;font-size:11px}.calendar-date{height:48px;padding:4px 2px;gap:2px}.calendar-date-caption{display:none}.calendar-footer{margin:16px 4px 0;font-size:10px}.calendar-day-panel{border-left:0;border-top:1px solid var(--line);padding:24px}.calendar-day-panel>h3{font-size:20px}.calendar-day-content{padding-top:20px}.calendar-event-image{max-width:400px}}
@media(prefers-reduced-motion:reduce){.content-calendar button{transition:none}.content-calendar button:hover,.content-calendar button:active{transform:none}}
.showcase{padding:48px 0 56px;border-top:2px solid var(--line)}
.showcase h2{font-size:clamp(26px,3vw,38px);line-height:1.3;text-shadow:2px 2px 0 #dcefff;margin:0 0 16px}
.section-intro{font:14px/1.8 var(--mono);color:var(--muted);max-width:65ch;margin-bottom:28px}
.shorts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.short-embed{min-width:0;border:2px solid var(--ink);background:var(--surface);box-shadow:5px 5px 0 var(--shadow)}
.short-embed iframe{display:block;width:100%;aspect-ratio:9/16;border:0;background:#103e48}
.short-embed figcaption{padding:14px;font:12px/1.5 var(--mono);border-top:2px solid var(--ink)}
.content-invite{margin-top:36px;max-width:760px}.content-invite h3{font:500 clamp(22px,2.4vw,30px)/1.4 var(--mono);margin-bottom:16px}.content-invite p{font:15px/1.8 var(--mono);max-width:65ch;margin-bottom:12px}.info-sheet .content-invite .links{margin-top:24px;max-width:640px}.info-sheet .content-invite .link:first-child{background:var(--accent)}
.hero .follower-milestone{margin-top:32px;padding:16px;border:2px solid #a5eeff;background:#143c50;color:#f4fbff;box-shadow:4px 4px 0 #201b25;max-width:500px}
.hero .follower-milestone h2{font:500 18px/1.5 var(--mono);margin:0 0 8px;text-shadow:none;color:#FFDF81}
.follower-milestone p{font:13px/1.7 var(--mono);margin:0 0 8px}.follower-milestone .milestone-count{color:#fff4cd;font-variant-numeric:tabular-nums}
@media(max-width:1200px){.masthead{padding-inline:4%;gap:16px}.section-nav a{padding-inline:8px;font-size:12px}.masthead .brand{font-size:22px;gap:8px}}
@media(max-width:1000px){
 :root{--header-height:132px}
 .masthead{display:grid;grid-template-columns:1fr auto;grid-template-rows:50px 54px;column-gap:12px;row-gap:6px;padding:10px 6%}
 .masthead .brand{grid-column:1;grid-row:1}.masthead .lang{grid-column:2;grid-row:1;gap:4px}
 .section-nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:2px}.section-nav a{min-height:44px;font-size:12px;padding-inline:8px}
}
@media(max-width:760px){
 .showcase{padding:36px 0 40px}.shorts-grid{grid-template-columns:1fr;gap:24px;max-width:360px;margin-inline:auto}
 .hero .follower-milestone{margin-top:24px;padding:12px}.hero .follower-milestone h2{font-size:16px}
}
/* Phones: one swipeable chip strip, not a 3x3 grid - the sticky header stays 132px instead of
   eating 180px of every screen. The edge fade says "there is more"; the active chip scrolls in. */
@media(max-width:600px){
 .masthead{padding-inline:5%}
 .masthead .section-nav{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:24px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .masthead .section-nav::-webkit-scrollbar{display:none}
 .masthead .section-nav a{flex:0 0 auto;scroll-snap-align:start;padding-inline:12px}}

/* Page mascot — floating companion (2026-09-15): a sticky `position:fixed` chibi the user can
   drag anywhere; a click (not a drag) pops the follow-the-socials speech bubble. The sprite
   itself is the vanilla port of the `page-mascot` skill: two 3x3 atlases (head directions +
   expressions) swapped by background-position. left/top are owned by the script. */
.page-mascot{position:fixed;z-index:1200;line-height:0;transform-origin:0 0}
.page-mascot-button{position:relative;display:block;flex-shrink:0;padding:0;border:0;background:transparent;appearance:none;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.page-mascot-button:active{cursor:grabbing}
.page-mascot-squash{position:relative;display:block;width:100%;height:100%;transform-origin:50% 78%}
.page-mascot-layer{position:absolute;inset:0;background-size:300% 300%;background-repeat:no-repeat;transition:opacity 90ms linear;pointer-events:none}
.page-mascot[data-waiting]{opacity:0;pointer-events:none}
.page-mascot-button:hover .page-mascot-squash{translate:0 -3px}.page-mascot-squash{transition:translate 160ms ease-out}
.page-mascot-button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* The bubble speaks the site's frame language: square, 2px ink, hard offset shadow, gold primary. */
.page-mascot-speech{position:absolute;bottom:calc(100% + 14px);right:0;z-index:5;width:max-content;max-width:min(292px,72vw);padding:14px 16px;background:#fff;color:#16334b;border:2px solid #16334b;box-shadow:4px 4px 0 #739ab8;opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transform-origin:100% 100%;transition:opacity 160ms ease-out,transform 220ms cubic-bezier(.22,1,.36,1),visibility 0s linear 160ms;pointer-events:none}
.page-mascot-speech::after{content:"";position:absolute;top:100%;right:22px;width:12px;height:12px;margin-top:-5px;background:inherit;border-right:2px solid #16334b;border-bottom:2px solid #16334b;transform:rotate(45deg)}
.page-mascot-speech.open{opacity:1;visibility:visible;transform:none;transition:opacity 160ms ease-out,transform 220ms cubic-bezier(.22,1,.36,1),visibility 0s;pointer-events:auto}
.page-mascot-speech.below{bottom:auto;top:calc(100% + 14px);transform-origin:100% 0}
.page-mascot-speech.flip{right:auto;left:0;transform-origin:0 100%}
.page-mascot-speech.below.flip{transform-origin:0 0}
.page-mascot-speech.below::after{top:auto;bottom:100%;margin:0 0 -5px;border:0;border-left:2px solid #16334b;border-top:2px solid #16334b}
.page-mascot-speech.flip::after{right:auto;left:22px}
.page-mascot-speech-text{margin:0 0 12px;font:500 13px/1.6 var(--mono);color:#16334b;text-wrap:pretty}
.page-mascot-speech-links{display:flex;gap:8px;flex-wrap:wrap}
.page-mascot-speech-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;background:#FFDF81;color:#16334b;border:2px solid #16334b;box-shadow:3px 3px 0 #16334b;font:500 12px/1 var(--mono);text-decoration:none;transition:transform 120ms ease-out,box-shadow 120ms ease-out}
.page-mascot-speech-links a.page-mascot-speech-secondary{background:#fff;box-shadow:3px 3px 0 #a9cde5}
.page-mascot-speech-links a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #16334b}
@media(hover:hover) and (pointer:fine){.page-mascot-speech-links a:hover{background:#ffebc4}.page-mascot-speech-links a.page-mascot-speech-secondary:hover{background:#eff8ff}}
.page-mascot-speech-links a:focus-visible{outline:2px solid #16334b;outline-offset:3px}
@media(max-width:760px){.page-mascot-speech{max-width:min(260px,70vw)}}
@media(prefers-reduced-motion:reduce){.page-mascot-layer,.page-mascot-squash,.page-mascot-speech,.page-mascot-speech.open,.page-mascot-speech-links a{transition:none}}

/* FAQ — added 2026-09-15 (SEO: visible Q&A that the FAQPage JSON-LD mirrors) */
.landing-faq{padding:40px 0;border-top:2px solid var(--line);scroll-margin-top:12px}
.landing-faq h2{font:500 clamp(24px,3vw,34px)/1.4 var(--mono);margin-bottom:20px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:14px 0;font:500 15px/1.6 var(--mono);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex-shrink:0;color:var(--ink);font-size:22px;line-height:1;transition:rotate 220ms cubic-bezier(.22,1,.36,1)}
.faq-item[open] summary::after{rotate:45deg}
.faq-item[open] p{animation:faq-open 220ms cubic-bezier(.22,1,.36,1)}
@keyframes faq-open{from{opacity:0;translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}.faq-item[open] p{animation:none}}
.faq-item summary:focus-visible{background:var(--surface-hover)}
.faq-item p{margin:0 0 18px;max-width:78ch;font:14px/1.85 var(--mono);color:var(--muted)}
.faq-item a{text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){.faq-item summary:hover{background:var(--surface-hover)}}
@media(max-width:760px){.landing-faq{padding-block:32px}.faq-item summary{font-size:14px}.faq-item p{font-size:13px}}

/* Narrow screens: the same five columns, just tighter - the graph keeps its shape. */
@media(max-width:760px){.nn{--nn-node:20px;height:164px}.nn-out-num{font-size:10px;padding:0 4px 1px}.nn-arrow{min-width:10px;margin:0 4px}.nn-arrow::after{border-left-width:5px;border-top-width:3.5px;border-bottom-width:3.5px}.nn-layer-label{font-size:8px}.milestone-reward-row{padding:6px 8px}.milestone-reward-row ul{gap:10px}.milestone-reward-row .reward-art img{width:56px;height:56px}.milestone-reward-row .reward-peek img{width:116px;height:116px}}

/* Community (2026-09-25): the Facebook group and Discord are where people actually talk to Cỏ, so
   they read as the two things to press - gold fill (DESIGN.md: gold = press me), ink frame, taller
   row, ink icon - while the follow-only channels below stay quiet surface tiles. */
.info-sheet .link.fb-group,.info-sheet .link.discord{min-height:76px;background:var(--gold);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.info-sheet .link.fb-group .label,.info-sheet .link.discord .label{font-size:15px}
.info-sheet .link.fb-group .icon,.info-sheet .link.discord .icon{width:24px;height:24px;color:var(--ink)}
.info-sheet .link.fb-group:active,.info-sheet .link.discord:active{box-shadow:2px 2px 0 var(--ink)}
@media(hover:hover) and (pointer:fine){.info-sheet .link.fb-group:hover,.info-sheet .link.discord:hover{background:#ffebc4}}
/* A deep link (QR, go.waifu.vn/follow, FAQ) lands here: nudge the eye to the two doors once. */
#connect:target .link.fb-group,#connect:target .link.discord{animation:community-call 900ms cubic-bezier(.22,1,.36,1) 400ms 2}
@keyframes community-call{50%{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
@media(prefers-reduced-motion:reduce){#connect:target .link.fb-group,#connect:target .link.discord{animation:none}}

@media (min-width:900px){.work-intro>p{overflow:hidden}}

/* Current event pinned on the open right side of the stage, the way a game lobby surfaces its
   live banner: a tab that says "now", the loot up front, then the quest track. Square frame, hard
   offset shadow, gold = the thing to press; rarity colours are the ones the reward row already uses.
   Default = the compact card for 1001-1439px, where the free column beside the standing mascot is
   narrow; >=1440px it grows into the full banner (below). */
.event-pin{position:absolute;z-index:3;top:clamp(56px,11vh,112px);right:4%;width:min(360px,34%);border:3px solid #FFDF81;background:#0b1119f2;box-shadow:8px 8px 0 #201b25;color:#fff5e9}
.event-tab{position:absolute;left:-3px;bottom:100%;display:flex;align-items:center;gap:8px;padding:7px 14px 6px;background:#FFDF81;color:#241c28;font:600 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.event-dot{width:8px;height:8px;background:#C83B62;animation:event-blink 1800ms steps(1,end) infinite}
@keyframes event-blink{50%{opacity:.2}}
/* The loot, fanned like two pulled cards over a dotted stage floor; the caption is the honesty line
   (DESIGN.md: say what is drawn vs real) because these are mockups, not the final products. */
.event-art{display:none;margin:0;border-bottom:3px solid #FFDF81;background:#101925 radial-gradient(#fff5e924 1px,transparent 1.5px) 0 0/12px 12px}
.event-loot{display:flex;justify-content:center;align-items:center;gap:28px;padding:26px 16px 18px}
.event-prize{position:relative;display:block;padding:5px;background:#0b1119;border:2px solid var(--rarity);box-shadow:5px 5px 0 #201b25;--rarity:#63b3ff;transform:rotate(3deg)}
.event-prize[data-rarity=sr]{--rarity:#FFDF81;transform:rotate(-4deg) translateY(-3px)}
.event-prize img{display:block;width:104px;height:104px;object-fit:contain;background:#fff}
.event-prize i{position:absolute;left:9px;top:9px;padding:0 6px;background:#0b1119;border:1px solid var(--rarity);color:var(--rarity);font:600 11px/1.5 var(--mono);font-style:normal;letter-spacing:.06em}
.event-prize b{position:absolute;right:-10px;bottom:-10px;padding:3px 8px;background:var(--rarity);color:#1b1526;font:600 15px/1.3 var(--mono);font-variant-numeric:tabular-nums;box-shadow:2px 2px 0 #201b25}
.event-note{padding:0 16px 10px;text-align:center;font-size:11px;line-height:1.4;color:#AAB4C8}
.event-body{padding:16px 18px 18px}
.event-pin h2{font:500 21px/1.3 var(--mono);color:#F7FAFF;text-wrap:balance}
.event-sub{margin-top:4px;font-size:12px;line-height:1.5;color:#AAB4C8}
.event-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #fff5e926}
.event-count{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:12px;color:#AAB4C8}
.event-count strong{font:500 40px/1 var(--mono);color:#FFDF81;font-variant-numeric:tabular-nums;text-shadow:3px 3px 0 #201b25}
.event-reacts{flex:none;font-size:12px;color:#AAB4C8}.event-reacts b{font:600 15px/1 var(--mono);color:#fff5e9;font-variant-numeric:tabular-nums}
/* Milestones are nodes ON the track (column centres = 0, 1/3, 2/3, 1 of it), so "where am I" reads
   at a glance instead of from a bar and a separate legend. */
.event-quest{position:relative;margin-top:14px}
.event-track{position:absolute;top:5px;left:12.5%;right:12.5%;height:6px;background:#fff5e926;border:1px solid #fff5e940}
.event-fill{display:block;height:100%;background:#FFDF81;transform:scaleX(0);transform-origin:left;transition:transform 450ms cubic-bezier(.22,1,.36,1)}
.event-tiers{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.event-tiers li{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 2px;text-align:center;font-size:10px;line-height:1.35;color:#AAB4C8}
.event-tiers li::before{content:'';width:14px;height:14px;margin-bottom:6px;background:#0b1119;border:2px solid #fff5e966}
.event-tiers li[data-reached]::before{background:#FFDF81;border-color:#FFDF81}
.event-tiers li[aria-current]::before{outline:2px solid #FFDF81;outline-offset:2px}
.event-tiers b{font:600 13px/1.4 var(--mono);color:#e4dce2;font-variant-numeric:tabular-nums}
.event-tiers li[data-reached] b{color:#FFDF81}
.event-tiers li[aria-current] span{color:#fff5e9}
.event-left{margin-top:14px;padding:8px 12px;background:#FFDF811a;border-left:3px solid #FFDF81;font-size:13px;color:#fff5e9}
.event-actions{display:flex;align-items:center;gap:16px;margin-top:16px}
.event-share{flex:1;display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:12px 16px;background:#FFDF81;border:2px solid #FFDF81;color:#241c28;box-shadow:4px 4px 0 #201b25;font:600 14px/1.4 var(--mono);text-decoration:none;white-space:nowrap;transition:transform 100ms steps(2,end),box-shadow 100ms steps(2,end)}
.event-share:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #201b25}
.event-more{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1.4 var(--mono);color:#fff5e9;text-underline-offset:4px;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.event-share:hover{background:#ffebad}.event-more:hover{color:#FFDF81}}
.event-pin a:focus-visible{outline:2px solid #58D6E8;outline-offset:4px}
/* >=1440px the stage has a real free column right of the mascot (she stands at graph edge + 24px,
   i.e. 7% + 908px), so the pin fills it: bigger loot, bigger numbers, full width up to 500px. */
@media(min-width:1440px){.event-pin{top:clamp(64px,10vh,112px);right:3%;width:min(500px,calc(90% - 940px))}.event-art{display:block}.event-body{padding:20px 24px 24px}.event-pin h2{font-size:26px}.event-sub{font-size:13px}.event-count strong{font-size:52px}.event-tiers li{font-size:11px}.event-tiers b{font-size:15px}.event-share{min-height:58px;font-size:15px}}
@media(min-width:1440px) and (max-height:700px){.event-art{display:none}}
@media(min-width:1440px) and (min-height:860px){.event-prize img{width:124px;height:124px}.event-loot{padding:30px 16px 20px;gap:36px}}
@media(max-width:1000px) and (min-width:761px){.event-pin{width:min(300px,32%)}.event-body{padding:14px}.event-pin h2{font-size:17px}.event-sub,.event-tiers li span,.event-reacts{display:none}.event-count strong{font-size:34px}.event-actions{gap:12px}.event-share{padding-inline:10px;font-size:12px}}
/* Phones stack the pin under the hero copy instead of covering Cỏ; the copy's 180px floor exists to
   clear the garden button, so the pin sits in that gap and keeps the clearance below itself. The pin
   carries the loot here, so the reward row above it (same two items) steps aside. */
@media(max-width:760px){.hero.garden-hero .hero-copy:has(+.event-pin){padding-bottom:44px}.hero.garden-hero .hero-copy:has(+.event-pin) .milestone-reward-row{display:none}.hero.garden-hero .hero-grid:has(.event-pin){padding-bottom:92px}.event-pin{position:relative;z-index:2;top:auto;right:auto;width:auto;margin:0 6%;box-shadow:5px 5px 0 #201b25}.event-art{display:block}.event-loot{gap:24px;padding:22px 12px 14px}.event-prize img{width:92px;height:92px}.event-pin h2{font-size:22px}.event-count strong{font-size:46px}.event-actions{flex-direction:column;align-items:stretch;gap:6px}.event-share{min-height:54px;font-size:14px}.event-more{justify-content:center}}
@media(prefers-reduced-motion:reduce){.event-dot{animation:none}.event-fill,.event-share{transition:none}.event-share:active{transform:none;box-shadow:4px 4px 0 #201b25}}
/* Live pin = the event pin's frame, shown instead of it while Cỏ is streaming (live-pin.js). Pink is
   the signal ("on air", DESIGN.md), gold stays the thing to press. The player is always shown, even
   on the compact card: watching IS the action here. Long stream titles stop at two lines. */
.live-pin .event-tab{background:#C83B62;color:#fff5e9}.live-pin .event-dot{background:#fff5e9}
/* On air the card is the loudest thing on the stage: pink frame (the "on air" signal), a bigger tab,
   and a wider player than the event card gets. Gold stays on the watch button. */
.live-pin{border-color:#C83B62;box-shadow:10px 10px 0 #201b25}
.live-pin .event-tab{padding:9px 16px 8px;font-size:13px}
@media(min-width:1001px){.live-pin{width:min(460px,40%)}}
@media(min-width:1440px){.live-pin{width:min(620px,calc(92% - 900px))}}
/* The hero's primary button turns into the way in while live (live-pin.js swaps its copy/link). */
.hero.garden-hero .hero-actions .cta-primary.is-live{background:#C83B62;border-color:#C83B62;color:#fff5e9;box-shadow:0 3px 0 #7a2340;font-weight:600}
.hero-actions .cta-primary.is-live .icon{width:18px;height:18px;margin-right:8px}
/* Several platforms live = one button each; they sit side by side and wrap/stack when the column is narrow. */
.hero-actions .cta-primary.hero-live-extra{flex:0 1 auto}
@media(max-width:760px){.hero.garden-hero .hero-actions:has(.hero-live-extra){flex-direction:column;align-items:stretch}}
.hero-actions .cta-primary.is-live::before{content:'';flex:none;width:8px;height:8px;margin-right:10px;background:#fff5e9;animation:event-blink 1800ms steps(1,end) infinite}
@media(hover:hover) and (pointer:fine){.hero.garden-hero .hero-actions .cta-primary.is-live:hover{background:#d8537a}}
@media(prefers-reduced-motion:reduce){.hero-actions .cta-primary.is-live::before{animation:none}}
.live-art{margin:0;border-bottom:3px solid #C83B62;background:#05070F}.live-art iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.live-pin h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.live-meta{margin-top:6px;font-size:12px;line-height:1.6;color:#AAB4C8;font-variant-numeric:tabular-nums}
.live-meta::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:1px;background:#C83B62;animation:event-blink 1800ms steps(1,end) infinite}
.live-pin .event-actions{flex-direction:column;align-items:stretch;gap:10px}
.live-also{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;color:#AAB4C8}
.live-also a{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1.4 var(--mono);color:#fff5e9;text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){.live-also a:hover{color:#FFDF81}}
/* Header LIVE chip: the only live cue once the hero has scrolled away; it jumps back to the pin. */
.masthead .brand-group{display:flex;align-items:center;gap:14px;flex-shrink:0;min-width:0}
.live-chip{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 4px;background:#C83B62;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);color:#fff5e9;font:600 12px/1.3 var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:transform 100ms steps(2,end),box-shadow 100ms steps(2,end)}
.live-chip::after{content:'';position:absolute;inset:-8px -4px}
.live-chip-dot{width:7px;height:7px;background:#fff5e9;animation:event-blink 1800ms steps(1,end) infinite}
.live-chip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow)}
.masthead .live-chip:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:1000px){.masthead .brand-group{grid-column:1;grid-row:1;gap:10px}}
@media(max-width:1000px) and (min-width:761px){.live-meta{font-size:11px}.live-also{gap:0 10px;line-height:1.4}.live-also a{min-height:36px}}
/* Narrow phones: the header row is brand + chip + VI/EN/JA, so the chip keeps only its signal (its
   aria-label still says Cỏ is live); the extra platforms drop under their label instead of splitting. */
@media(max-width:400px){.masthead .brand-group{gap:8px}.masthead .brand-group:has(.live-chip:not([hidden])) .brand small{display:none}.live-chip{padding:9px}.live-chip-label{display:none}.live-also-label{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.live-meta::before,.live-chip-dot{animation:none}.live-chip{transition:none}.live-chip:active{transform:none;box-shadow:2px 2px 0 var(--shadow)}}