/* The home page: Onion Board and Onion Watch on one page, a tab each.
   html[data-product] picks the colours; everything big moves only when the
   visitor hasn't asked Windows for less motion. */

@property --a1 { syntax: "<color>"; inherits: true; initial-value: #7c5cff; }
@property --a2 { syntax: "<color>"; inherits: true; initial-value: #ff5c8a; }
@property --a3 { syntax: "<color>"; inherits: true; initial-value: #ffcf40; }

:root {
  --bg: #0b0b12; --bg2: #11111b; --card: rgba(255, 255, 255, .035); --card-solid: #15151f;
  --edge: rgba(255, 255, 255, .08); --edge2: rgba(255, 255, 255, .14);
  --text: #f1f0f7; --muted: #a6a5ba; --dim: #75748a;
  --a1: #7c5cff; --a2: #ff5c8a; --a3: #ffcf40; --link: #b3a3ff;
  --ink: #2b2340;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 22px;
  color-scheme: dark;
  transition: --a1 .7s ease, --a2 .7s ease, --a3 .7s ease;
}
html[data-product="watch"] { --a1: #1fb6a6; --a2: #2a6fdb; --a3: #ffc53d; --link: #5fd8cb; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden;
       font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; }
code { font: 14.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; background: rgba(255,255,255,.06);
       border: 1px solid var(--edge); border-radius: 7px; padding: 1px 6px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3, summary { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A quiet highlight: the old loud one drew blocky purple boxes across the big headline. */
::selection { background: rgba(255, 255, 255, .2); color: #fff; }
h1 ::selection, h2 ::selection, h1::selection, h2::selection { background: rgba(255, 255, 255, .12); }
/* Poking Bun, mashing pads or double-clicking a button never selects the text around it. */
.stage, .switch, .ctas, .icon-btn, .mini-dl, .dl, .small-btn { -webkit-user-select: none; user-select: none; }

/* ---------- background: aurora, grid, grain ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
      background: var(--tex, none) 0 0 / var(--tex-size, auto) repeat; }   /* a picked theme's texture */
html.textured .bg::before { display: none; }   /* its own pattern stands in for the grid */
.bg i { position: absolute; border-radius: 50%; filter: blur(110px); }
.bg i:nth-child(1) { width: 70vmax; height: 70vmax; top: -38vmax; left: -22vmax; background: var(--a1); opacity: .22;
                     animation: drift 28s ease-in-out infinite alternate; }
.bg i:nth-child(2) { width: 55vmax; height: 55vmax; top: -30vmax; right: -28vmax; background: var(--a2); opacity: .15;
                     animation: drift 34s ease-in-out -12s infinite alternate-reverse; }
.bg i:nth-child(3) { width: 40vmax; height: 40vmax; bottom: -30vmax; left: 20vw; background: var(--a1); opacity: .08;
                     animation: drift 40s ease-in-out -5s infinite alternate; }
.bg::before { content: ""; position: absolute; inset: 0;
              background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                                linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
              background-size: 56px 56px;
              mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
              -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }
.bg::after { content: ""; position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift { to { transform: translate(9vw, 7vh) scale(1.12); } }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; padding: 12px 0; transition: padding .25s, background .25s, border-color .25s;
       border-bottom: 1px solid transparent; }
.top.stuck { padding: 8px 0; background: color-mix(in srgb, var(--bg) 72%, transparent); border-color: var(--edge);
             backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.top .wrap { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none;
         font: 700 18px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand .logo { width: 34px; height: 34px; flex: none; overflow: visible; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.brand .logo .ears { transform-origin: 50% 40%; }
.brand:hover .logo { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.brand:hover .logo .ears { animation: brand-ears .6s ease-in-out; }
.brand .logo[hidden] { display: none; }
@keyframes brand-ears { 30% { transform: rotate(-5deg); } 65% { transform: rotate(4deg); } }
.switch { position: relative; display: flex; margin: 0 auto; padding: 4px; border-radius: 999px;
          background: rgba(255,255,255,.05); border: 1px solid var(--edge); }
.switch button { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px;
                 padding: 7px 16px 7px 10px; border: 0; border-radius: 999px; background: none; cursor: pointer;
                 color: var(--muted); font: 600 15px/1 var(--display); white-space: nowrap; transition: color .25s; }
.switch button svg { width: 26px; height: 26px; flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.switch button:hover { color: var(--text); }
.switch button:hover svg { transform: translateY(-2px) rotate(-6deg); }
.switch button[aria-selected="true"] { color: #fff; }
.switch .pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px;
                background: linear-gradient(135deg, var(--a1), color-mix(in srgb, var(--a1) 55%, var(--a2)));
                box-shadow: 0 6px 24px color-mix(in srgb, var(--a1) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
                transition: transform .45s cubic-bezier(.5,1.4,.4,1), width .45s cubic-bezier(.5,1.4,.4,1); }
.switch:not(.ready) .pill { transition: none; }
html:not(.js) .switch { display: none; }
.tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(255,255,255,.04);
            color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 17px; transition: background .2s; }
.icon-btn:hover { background: rgba(255,255,255,.1); }
.top .mini-dl { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .25s;
                padding: 9px 16px; font-size: 14.5px; }
.top.past .mini-dl { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .icon-btn { display: none; }
/* same glass circle as its neighbours, holding Discord's own blue disc (like the look button's dot); never themed */
.icon-btn.discord { color: #fff; }
.icon-btn.discord svg { box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 50%;
                        background: #5865f2; transition: background .2s, transform .2s; }
.icon-btn.discord:hover svg { background: #4752c4; transform: scale(1.06); }
html:not(.js) .icon-btn.discord { display: grid; }
/* the look switcher: the apps' own themes, pictures and page colours together */
.looks { position: relative; }
html:not(.js) .looks { display: none; }
#look i { width: 18px; height: 18px; border-radius: 50%;
          background: conic-gradient(from 200deg, var(--a1), var(--a2), var(--a1));
          box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
#look:hover i, #look[aria-expanded="true"] i { transform: rotate(-30deg) scale(1.08); }
.look-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; gap: 2px;
             width: 210px; padding: 8px; border-radius: 16px; border: 1px solid var(--edge2);
             background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.5);
             backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.look-menu[hidden] { display: none; }
.look-menu b { padding: 4px 10px 6px; color: var(--dim); font: 600 13px/1.3 var(--body); }
.look-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0;
                    border-radius: 10px; background: none; color: var(--muted); cursor: pointer; text-align: left;
                    font: 600 15px/1.2 var(--display); }
.look-menu button:hover, .look-menu button:focus-visible { background: rgba(255,255,255,.07); color: var(--text); outline: none; }
.look-menu button[aria-pressed="true"] { color: var(--text); }
.look-menu button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--a1); font-weight: 800; }
.look-menu button i { flex: none; width: 22px; height: 22px; border-radius: 50%;
                      background: linear-gradient(135deg, var(--s1) 0 50%, var(--s2) 50%);
                      box-shadow: 0 0 0 3px var(--s0), 0 0 0 4px rgba(255,255,255,.2); }

/* ---------- buttons ---------- */
.dl { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 28px; border-radius: 16px; color: #fff; text-decoration: none; white-space: nowrap;
      font: 700 18px/1 var(--display); letter-spacing: -.005em;
      background: linear-gradient(135deg, var(--a1), color-mix(in srgb, var(--a1) 50%, var(--a2)));
      box-shadow: 0 10px 34px color-mix(in srgb, var(--a1) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
      transition: transform .2s, box-shadow .2s; }
.dl:hover { transform: translateY(-2px); box-shadow: 0 16px 44px color-mix(in srgb, var(--a1) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.dl:active { transform: translateY(0) scale(.98); }
.dl svg { width: 20px; height: 20px; }
.ghost { display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; border-radius: 16px;
         border: 1px solid var(--edge2); color: var(--text); text-decoration: none; font: 600 17px/1 var(--display);
         background: rgba(255,255,255,.03); transition: background .2s, border-color .2s; }
.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }

/* ---------- panels (one per app) ---------- */
html.js[data-product="board"] .panel[data-panel="watch"],
html.js[data-product="watch"] .panel[data-panel="board"] { display: none; }
html:not(.js) .panel + .panel { border-top: 1px solid var(--edge); margin-top: 60px; }

/* ---------- hero ---------- */
/* Both columns start at the top (not centred), and the intro keeps three lines' room, so
   the Download button sits at the same height on both tabs. */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start;
        padding: 56px 0 40px; min-height: min(760px, calc(100vh - 70px)); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 9px; border-radius: 999px;
        border: 1px solid var(--edge2); background: rgba(255,255,255,.04); color: var(--muted); font-size: 14px; }
h1 { margin: 18px 0 18px; font: 800 clamp(44px, 6.6vw, 88px)/.98 var(--display); letter-spacing: -.035em; }
h1 .name { display: block; margin-bottom: 14px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: .01em;
           color: var(--muted); text-transform: none; }
h1 em, h2 em { font-style: normal; background: linear-gradient(100deg, var(--a1), var(--a2) 55%, var(--a1));
               background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
               animation: shimmer 9s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.lede { margin: 0 0 30px; max-width: 560px; color: var(--muted); font-size: clamp(17px, 1.5vw, 19.5px); }
@media (min-width: 981px) { .lede { min-height: 3lh; } }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta { margin: 18px 0 0; color: var(--dim); font-size: 14px; line-height: 1.7; }
.meta a { color: var(--muted); }
.meta p { margin: 0; }

/* the mascot's stage */
.stage { position: relative; display: grid; justify-items: center; gap: 18px; }
.stage .halo { position: absolute; top: 2%; left: 50%; width: min(440px, 92%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
               background: radial-gradient(circle, color-mix(in srgb, var(--a1) 34%, transparent), transparent 66%); filter: blur(10px); }
.mascot { position: relative; width: min(260px, 60vw); aspect-ratio: 112 / 140; border: 0; padding: 0; background: none;
          cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mascot:focus-visible { outline: 2px solid var(--a1); outline-offset: 8px; border-radius: 24px; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot .shadow { fill: rgba(0,0,0,.45); transform-box: fill-box; transform-origin: center; animation: shadow 3.6s ease-in-out infinite; }
.mascot .whole { transform-box: view-box; transform-origin: 50px 120px; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
/* The poke bounces the whole picture, not .whole, so the bob underneath never jumps. */
.mascot svg { transform-origin: 50% 92%; }
.mascot.boing svg { animation: boing .62s cubic-bezier(.3,1.6,.5,1); }
@keyframes boing { 0% { transform: scale(1); } 25% { transform: scale(1.12, .86); } 55% { transform: scale(.92, 1.12) translateY(-9px); }
                   100% { transform: scale(1); } }
.bubble { position: absolute; z-index: 2; top: -4px; left: calc(50% + 60px); max-width: 220px; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
          background: #fffaf0; color: var(--ink); font: 650 14.5px/1.35 var(--display); box-shadow: 0 10px 30px rgba(0,0,0,.35);
          opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 0 100%; transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1);
          pointer-events: none; }
.bubble.on { opacity: 1; transform: none; }
.floaty { position: absolute; z-index: 3; pointer-events: none; font-size: 22px; color: var(--a1);
          animation: floaty 1.4s ease-out forwards; }
@keyframes floaty { 0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(0); }
                    15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 20px), -90px) scale(1.1) rotate(var(--rot, 20deg)); } }

/* Bun and Hoot are the apps' own drawings (bunny.py, owl.py), written into index.html by
   scripts/pictures/site_mascots.py: each part once, in the hidden <defs>, used by the big
   one and the small copies. Their ink outline: */
.k { stroke: #2b2340; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Bun's moving parts. Defaults hang off .bun-g / .hoot-g (not #bun / #hoot) so the
   copies in the tab switch, the footer and the cross-promo card draw right too. */
.bun-g .ear { transform-box: view-box; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.bun-g .ear.l { transform-origin: 37px 48px; } .bun-g .ear.r { transform-origin: 63px 48px; }
#bun.perk .ear.l { transform: rotate(-12deg); } #bun.perk .ear.r { transform: rotate(12deg); }
#bun.flick .ear.r { transform: rotate(22deg); }
.bun-g .eyes { transition: transform .12s ease-out; }
.bun-g .eye .open { transform-box: fill-box; transform-origin: center; transition: transform .07s; }
.bun-g .eye .shut, .bun-g .talk, .bun-g .vein, .bun-g .brows, .bun-g .frown, .bun-g .cap,
.bun-g .cheeks-angry { opacity: 0; }
#bun.blink .eye .open { transform: scaleY(.08); }
#bun.asleep .eye .open, #bun.happy .eye .open { opacity: 0; }
#bun.asleep .eye .shut, #bun.happy .eye .shut { opacity: 1; }
#bun.talking .talk { opacity: 1; } #bun.talking .smile { opacity: 0; }
.bun-g .vein, .bun-g .brows, .bun-g .rest-brows, .bun-g .cheeks, .bun-g .cheeks-angry { transition: opacity .2s; }
#bun.angry .vein, #bun.angry .brows, #bun.angry .cheeks-angry { opacity: 1; }
#bun.angry .rest-brows, #bun.angry .cheeks { opacity: 0; }
#bun.angry .smile { opacity: 0; } #bun.angry:not(.talking) .frown { opacity: 1; }
.bun-g .vein { animation: throb .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes throb { to { transform: scale(1.2); } }
.bun-g .cap { transform: translateY(-14px); transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
#bun.asleep .cap { opacity: 1; transform: none; }
#bun.asleep .whole { animation-duration: 6s; }
/* Their theme outfits, like in the apps (the looks below pick them). The nightcap
   replaces hats and glasses while Bun naps: through a variable, which reaches into the
   <use> copies where #bun.asleep can't. */
.fit.hat, .fit.eyewear { opacity: var(--nap-off, 1); transition: opacity .3s; }
#bun.asleep { --nap-off: 0; }
.bun-g .mic { transform-box: view-box; transform-origin: 79px 98px; transition: transform .2s; }
#bun.talking .mic { transform: rotate(-14deg) translate(-3px, -2px); }

/* Hoot's moving parts */
.hoot-g .body-turn { transform-box: view-box; transform-origin: 50px 112px; transition: transform .35s ease-out; }
.hoot-g .pupils { transition: transform .1s ease-out; }
.hoot-g .eye .shut, .hoot-g .beak-open { opacity: 0; }
#hoot.blink .pupils { opacity: 0; } #hoot.blink .eye .shut { opacity: 1; }
.hoot-g .tuft { transform-box: view-box; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.hoot-g .tuft.l { transform-origin: 25px 38px; } .hoot-g .tuft.r { transform-origin: 75px 38px; }
#hoot.alert .tuft.l { transform: rotate(-14deg); } #hoot.alert .tuft.r { transform: rotate(14deg); }
.hoot-g .wing { transform-box: fill-box; transform-origin: 50% 15%; }
#hoot.alert .wing.l { animation: flapL .32s ease-in-out infinite alternate; }
#hoot.alert .wing.r { animation: flapR .32s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: rotate(10deg); } to { transform: rotate(70deg) translateY(-3px); } }
@keyframes flapR { from { transform: rotate(-10deg); } to { transform: rotate(-70deg) translateY(-3px); } }
#hoot.alert .beak { opacity: 0; } #hoot.alert .beak-open { opacity: 1; }
.hoot-g .glow { opacity: 0; transition: opacity .2s; }
#hoot.alert .glow { opacity: 1; animation: glow .5s ease-in-out infinite alternate; }
/* looks: written by scripts/pictures/site_mascots.py from the apps' bunny.py and
   owl.py. Each look's colours, and which copy of a part it shows (a floppy ear,
   markings, an outfit). Variables, so the small copies (<use>) follow too. */
.bun1 { display: var(--bun1, none); } .bun2 { display: var(--bun2, none); } .bun3 { display: var(--bun3, none); } .bun4 { display: var(--bun4, none); } .bun5 { display: var(--bun5, none); } .bun6 { display: var(--bun6, none); } .bun7 { display: var(--bun7, none); } .bun8 { display: var(--bun8, none); } .bun9 { display: var(--bun9, none); } .bun10 { display: var(--bun10, none); } .bun11 { display: var(--bun11, none); } .bun12 { display: var(--bun12, none); } .bun13 { display: var(--bun13, none); } .bun14 { display: var(--bun14, none); } .bun15 { display: var(--bun15, none); } .bun16 { display: var(--bun16, none); } .bun17 { display: var(--bun17, none); } .bun18 { display: var(--bun18, none); } .bun19 { display: var(--bun19, none); } .bun20 { display: var(--bun20, none); } .bun21 { display: var(--bun21, none); } .bun22 { display: var(--bun22, none); } .bun23 { display: var(--bun23, none); } .bun24 { display: var(--bun24, none); } .bun25 { display: var(--bun25, none); } .bun26 { display: var(--bun26, none); } .bun27 { display: var(--bun27, none); } .bun28 { display: var(--bun28, none); } .bun29 { display: var(--bun29, none); } .bun30 { display: var(--bun30, none); } .bun31 { display: var(--bun31, none); } .bun32 { display: var(--bun32, none); } .bun33 { display: var(--bun33, none); } .bun34 { display: var(--bun34, none); } .bun35 { display: var(--bun35, none); } .bun36 { display: var(--bun36, none); } .bun37 { display: var(--bun37, none); } .bun38 { display: var(--bun38, none); } .bun39 { display: var(--bun39, none); } .bun40 { display: var(--bun40, none); } .bun41 { display: var(--bun41, none); } .bun42 { display: var(--bun42, none); } .bun43 { display: var(--bun43, none); } .bun44 { display: var(--bun44, none); } .bun45 { display: var(--bun45, none); } .bun46 { display: var(--bun46, none); } .bun47 { display: var(--bun47, none); } .bun48 { display: var(--bun48, none); } .bun49 { display: var(--bun49, none); } .bun50 { display: var(--bun50, none); } .bun51 { display: var(--bun51, none); } .bun52 { display: var(--bun52, none); } .bun53 { display: var(--bun53, none); } .bun54 { display: var(--bun54, none); } .bun55 { display: var(--bun55, none); } .bun56 { display: var(--bun56, none); } .bun57 { display: var(--bun57, none); } .bun58 { display: var(--bun58, none); } .bun59 { display: var(--bun59, none); } .bun60 { display: var(--bun60, none); } .bun61 { display: var(--bun61, none); } .hoot1 { display: var(--hoot1, none); } .hoot2 { display: var(--hoot2, none); } .hoot3 { display: var(--hoot3, none); } .hoot4 { display: var(--hoot4, none); } .hoot5 { display: var(--hoot5, none); } .hoot6 { display: var(--hoot6, none); } .hoot7 { display: var(--hoot7, none); } .hoot8 { display: var(--hoot8, none); } .hoot9 { display: var(--hoot9, none); } .hoot10 { display: var(--hoot10, none); } .hoot11 { display: var(--hoot11, none); } .hoot12 { display: var(--hoot12, none); } .hoot13 { display: var(--hoot13, none); } .hoot14 { display: var(--hoot14, none); } .hoot15 { display: var(--hoot15, none); } .hoot16 { display: var(--hoot16, none); } .hoot17 { display: var(--hoot17, none); } .hoot18 { display: var(--hoot18, none); } .hoot19 { display: var(--hoot19, none); } .hoot20 { display: var(--hoot20, none); } .hoot21 { display: var(--hoot21, none); } .hoot22 { display: var(--hoot22, none); } .hoot23 { display: var(--hoot23, none); } .hoot24 { display: var(--hoot24, none); }
:root, html[data-look="dark"] { --bun-fur: #fdf8f1; --bun-shade: #efe3d6; --bun-inner: #ffb3c7; --bun-iris: #8a5cc7; --bun-nose: #ff8fae; --bun-nose-edge: #e0708f; --bun-marks: #a57a52; --bun-belly: #efe3d6; --bun-pads: #ffb3c7; --bun-face: #2b2340; --bun-phones: #7859f7; --bun-phones-hi: #cfc3ff; --bun-phones-lo: #5e46c1; --bun-cap-star: #ede8ff; --bun-cap-fold: #6047c6; --hoot-feather: #2fbfae; --hoot-wing: #1f9a8c; --hoot-light: #3befda; --hoot-face: #fdf8ee; --hoot-belly: #fbf3e3; --hoot-shade: #e2cfae; --hoot-iris: #5d4560; --hoot-mark: #e2cfae; --hoot-beak: #ffb43c; --hoot-beak-dark: #e8892a; --hoot-toes: #ffb43c; --bun1: inline; --bun2: none; --bun3: inline; --bun4: none; --bun5: inline; --bun6: none; --bun7: inline; --bun8: none; --bun9: none; --bun10: inline; --bun11: none; --bun12: none; --bun13: none; --bun14: inline; --bun15: none; --bun16: none; --bun17: inline; --bun18: none; --bun19: none; --bun20: none; --bun21: inline; --bun22: none; --bun23: inline; --bun24: none; --bun25: none; --bun26: none; --bun27: none; --bun28: inline; --bun29: none; --bun30: none; --bun31: none; --bun32: inline; --bun33: none; --bun34: none; --bun35: none; --bun36: inline; --bun37: none; --bun38: inline; --bun39: none; --bun40: none; --bun41: none; --bun42: none; --bun43: none; --bun44: none; --bun45: inline; --bun46: none; --bun47: inline; --bun48: none; --bun49: none; --bun50: none; --bun51: inline; --bun52: none; --bun53: inline; --bun54: none; --bun55: inline; --bun56: none; --bun57: none; --bun58: none; --bun59: none; --bun60: none; --bun61: none; --hoot1: none; --hoot2: none; --hoot3: inline; --hoot4: none; --hoot5: none; --hoot6: inline; --hoot7: none; --hoot8: none; --hoot9: inline; --hoot10: none; --hoot11: none; --hoot12: inline; --hoot13: none; --hoot14: none; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: none; --hoot20: none; --hoot21: none; --hoot22: none; --hoot23: none; --hoot24: none; }
html[data-look="halloween"] { --bun-fur: #3a3140; --bun-shade: #362e3c; --bun-inner: #a259ff; --bun-iris: #ff8a1f; --bun-nose: #ff7518; --bun-nose-edge: #cc5e13; --bun-marks: #5c4a66; --bun-belly: #483d50; --bun-pads: #a259ff; --bun-face: #f4ecf6; --bun-phones: #ff7518; --bun-phones-hi: #ffba8b; --bun-phones-lo: #c75b13; --bun-cap-star: #ffd0b1; --bun-cap-fold: #cc5e13; --hoot-feather: #4a3a56; --hoot-wing: #2c2233; --hoot-light: #5d486b; --hoot-face: #efe0ef; --hoot-belly: #ffb066; --hoot-shade: #d89556; --hoot-iris: #ff8a1f; --hoot-mark: #ff7518; --hoot-beak: #ffcf40; --hoot-beak-dark: #d1aa34; --hoot-toes: #ff8a1f; --bun1: none; --bun2: inline; --bun3: none; --bun4: inline; --bun5: none; --bun6: inline; --bun7: none; --bun8: inline; --bun9: none; --bun10: none; --bun11: inline; --bun12: none; --bun13: none; --bun14: none; --bun15: inline; --bun16: none; --bun17: none; --bun18: inline; --bun19: none; --bun20: none; --bun21: none; --bun22: inline; --bun23: none; --bun24: inline; --bun25: none; --bun26: none; --bun27: none; --bun28: none; --bun29: inline; --bun30: none; --bun31: none; --bun32: none; --bun33: inline; --bun34: none; --bun35: none; --bun36: none; --bun37: inline; --bun38: none; --bun39: inline; --bun40: none; --bun41: inline; --bun42: none; --bun43: none; --bun44: none; --bun45: inline; --bun46: none; --bun47: none; --bun48: inline; --bun49: none; --bun50: none; --bun51: none; --bun52: inline; --bun53: none; --bun54: inline; --bun55: none; --bun56: inline; --bun57: inline; --bun58: none; --bun59: none; --bun60: none; --bun61: none; --hoot1: none; --hoot2: none; --hoot3: none; --hoot4: inline; --hoot5: none; --hoot6: none; --hoot7: inline; --hoot8: none; --hoot9: none; --hoot10: inline; --hoot11: none; --hoot12: none; --hoot13: inline; --hoot14: none; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: inline; --hoot20: none; --hoot21: none; --hoot22: none; --hoot23: none; --hoot24: none; }
html[data-look="blood-moon"] { --bun-fur: #433b4c; --bun-shade: #3f3747; --bun-inner: #c4505a; --bun-iris: #ff3b2f; --bun-nose: #241d29; --bun-nose-edge: #1d1721; --bun-marks: #7a4652; --bun-belly: #544a5f; --bun-pads: #c4505a; --bun-face: #f4ecf6; --bun-phones: #d91f35; --bun-phones-hi: #ff6073; --bun-phones-lo: #aa1829; --bun-cap-star: #ff8190; --bun-cap-fold: #ae192a; --hoot-feather: #4a3b4c; --hoot-wing: #2e2430; --hoot-light: #5c4a5f; --hoot-face: #e6d6d8; --hoot-belly: #c4a0a6; --hoot-shade: #a6888d; --hoot-iris: #ff3b2f; --hoot-mark: #7a4652; --hoot-beak: #ff8a3d; --hoot-beak-dark: #d17132; --hoot-toes: #ff8a3d; --bun1: none; --bun2: inline; --bun3: none; --bun4: inline; --bun5: none; --bun6: inline; --bun7: none; --bun8: inline; --bun9: inline; --bun10: none; --bun11: none; --bun12: inline; --bun13: none; --bun14: none; --bun15: none; --bun16: inline; --bun17: none; --bun18: inline; --bun19: none; --bun20: none; --bun21: none; --bun22: inline; --bun23: none; --bun24: none; --bun25: inline; --bun26: none; --bun27: none; --bun28: none; --bun29: inline; --bun30: none; --bun31: none; --bun32: none; --bun33: inline; --bun34: none; --bun35: none; --bun36: inline; --bun37: none; --bun38: none; --bun39: none; --bun40: inline; --bun41: none; --bun42: inline; --bun43: none; --bun44: inline; --bun45: inline; --bun46: none; --bun47: none; --bun48: inline; --bun49: none; --bun50: none; --bun51: none; --bun52: inline; --bun53: none; --bun54: inline; --bun55: none; --bun56: inline; --bun57: none; --bun58: none; --bun59: none; --bun60: none; --bun61: none; --hoot1: inline; --hoot2: none; --hoot3: none; --hoot4: inline; --hoot5: none; --hoot6: none; --hoot7: inline; --hoot8: none; --hoot9: none; --hoot10: inline; --hoot11: none; --hoot12: inline; --hoot13: none; --hoot14: none; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: none; --hoot20: inline; --hoot21: none; --hoot22: none; --hoot23: none; --hoot24: none; }
html[data-look="synthwave"] { --bun-fur: #f6d9ef; --bun-shade: #e6cbdf; --bun-inner: #ff7ad9; --bun-iris: #ff3fb4; --bun-nose: #ff4fa0; --bun-nose-edge: #cc3f80; --bun-marks: #9b5de5; --bun-belly: #e6cbdf; --bun-pads: #6ee7ff; --bun-face: #2b2340; --bun-phones: #e5155a; --bun-phones-hi: #ff6498; --bun-phones-lo: #b31046; --bun-cap-star: #ff87af; --bun-cap-fold: #b71148; --hoot-feather: #ff3f8e; --hoot-wing: #9b5de5; --hoot-light: #ff7fb4; --hoot-face: #fdf8ee; --hoot-belly: #ffe6f4; --hoot-shade: #d8c3cf; --hoot-iris: #36f9f6; --hoot-mark: #ff7ad9; --hoot-beak: #ffcf40; --hoot-beak-dark: #d1aa34; --hoot-toes: #36f9f6; --bun1: inline; --bun2: none; --bun3: inline; --bun4: none; --bun5: inline; --bun6: none; --bun7: inline; --bun8: none; --bun9: none; --bun10: none; --bun11: none; --bun12: none; --bun13: inline; --bun14: inline; --bun15: none; --bun16: none; --bun17: none; --bun18: inline; --bun19: none; --bun20: none; --bun21: inline; --bun22: none; --bun23: none; --bun24: none; --bun25: none; --bun26: inline; --bun27: none; --bun28: none; --bun29: none; --bun30: inline; --bun31: none; --bun32: none; --bun33: none; --bun34: inline; --bun35: none; --bun36: inline; --bun37: none; --bun38: none; --bun39: none; --bun40: inline; --bun41: none; --bun42: none; --bun43: none; --bun44: none; --bun45: none; --bun46: inline; --bun47: none; --bun48: none; --bun49: inline; --bun50: none; --bun51: inline; --bun52: none; --bun53: inline; --bun54: none; --bun55: inline; --bun56: none; --bun57: none; --bun58: inline; --bun59: none; --bun60: none; --bun61: none; --hoot1: none; --hoot2: none; --hoot3: none; --hoot4: none; --hoot5: inline; --hoot6: none; --hoot7: none; --hoot8: inline; --hoot9: none; --hoot10: inline; --hoot11: none; --hoot12: none; --hoot13: inline; --hoot14: none; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: none; --hoot20: none; --hoot21: inline; --hoot22: none; --hoot23: none; --hoot24: none; }
html[data-look="hacker"] { --bun-fur: #45424d; --bun-shade: #403e48; --bun-inner: #7fbf8f; --bun-iris: #39ff7a; --bun-nose: #1e1c22; --bun-nose-edge: #18161b; --bun-marks: #a57a52; --bun-belly: #565260; --bun-pads: #7fbf8f; --bun-face: #f4ecf6; --bun-phones: #00ff41; --bun-phones-hi: #73ff96; --bun-phones-lo: #00c733; --bun-cap-star: #99ffb3; --bun-cap-fold: #00cc34; --hoot-feather: #2e3a32; --hoot-wing: #1e2620; --hoot-light: #39483e; --hoot-face: #cfe8d6; --hoot-belly: #d4ecd9; --hoot-shade: #b4c8b8; --hoot-iris: #39ff7a; --hoot-mark: #e2cfae; --hoot-beak: #39ff7a; --hoot-beak-dark: #2fd164; --hoot-toes: #39ff7a; --bun1: none; --bun2: inline; --bun3: none; --bun4: inline; --bun5: none; --bun6: inline; --bun7: none; --bun8: inline; --bun9: none; --bun10: none; --bun11: none; --bun12: none; --bun13: inline; --bun14: none; --bun15: none; --bun16: inline; --bun17: none; --bun18: none; --bun19: inline; --bun20: none; --bun21: inline; --bun22: none; --bun23: none; --bun24: none; --bun25: none; --bun26: none; --bun27: inline; --bun28: none; --bun29: inline; --bun30: none; --bun31: inline; --bun32: inline; --bun33: none; --bun34: none; --bun35: none; --bun36: inline; --bun37: none; --bun38: none; --bun39: none; --bun40: inline; --bun41: none; --bun42: none; --bun43: none; --bun44: none; --bun45: none; --bun46: inline; --bun47: none; --bun48: none; --bun49: none; --bun50: inline; --bun51: none; --bun52: inline; --bun53: none; --bun54: inline; --bun55: none; --bun56: inline; --bun57: none; --bun58: none; --bun59: inline; --bun60: inline; --bun61: none; --hoot1: none; --hoot2: inline; --hoot3: none; --hoot4: inline; --hoot5: none; --hoot6: none; --hoot7: inline; --hoot8: none; --hoot9: none; --hoot10: none; --hoot11: inline; --hoot12: none; --hoot13: inline; --hoot14: none; --hoot15: none; --hoot16: inline; --hoot17: none; --hoot18: inline; --hoot19: none; --hoot20: none; --hoot21: none; --hoot22: inline; --hoot23: none; --hoot24: none; }
html[data-look="ocean"] { --bun-fur: #fdf8f1; --bun-shade: #efe3d6; --bun-inner: #ffc0ae; --bun-iris: #1aa0c8; --bun-nose: #ff8a73; --bun-nose-edge: #cc6e5c; --bun-marks: #8fbcd6; --bun-belly: #efe3d6; --bun-pads: #ffc0ae; --bun-face: #2b2340; --bun-phones: #1fb6ff; --bun-phones-hi: #92dbff; --bun-phones-lo: #188ec7; --bun-cap-star: #b8e8ff; --bun-cap-fold: #1992cc; --hoot-feather: #2fa8e8; --hoot-wing: #1a78b8; --hoot-light: #57c5ff; --hoot-face: #fdf8ee; --hoot-belly: #eef8ff; --hoot-shade: #cad2d8; --hoot-iris: #1aa0c8; --hoot-mark: #a8d4ee; --hoot-beak: #ffb43c; --hoot-beak-dark: #e8892a; --hoot-toes: #ff8a73; --bun1: inline; --bun2: none; --bun3: inline; --bun4: none; --bun5: inline; --bun6: none; --bun7: inline; --bun8: none; --bun9: none; --bun10: none; --bun11: none; --bun12: none; --bun13: inline; --bun14: inline; --bun15: none; --bun16: none; --bun17: inline; --bun18: none; --bun19: none; --bun20: none; --bun21: inline; --bun22: none; --bun23: inline; --bun24: none; --bun25: none; --bun26: none; --bun27: none; --bun28: none; --bun29: inline; --bun30: none; --bun31: none; --bun32: none; --bun33: none; --bun34: none; --bun35: inline; --bun36: inline; --bun37: none; --bun38: inline; --bun39: none; --bun40: none; --bun41: none; --bun42: none; --bun43: inline; --bun44: none; --bun45: inline; --bun46: none; --bun47: inline; --bun48: none; --bun49: none; --bun50: none; --bun51: inline; --bun52: none; --bun53: inline; --bun54: none; --bun55: inline; --bun56: none; --bun57: none; --bun58: none; --bun59: none; --bun60: none; --bun61: none; --hoot1: none; --hoot2: none; --hoot3: none; --hoot4: none; --hoot5: inline; --hoot6: none; --hoot7: none; --hoot8: inline; --hoot9: none; --hoot10: inline; --hoot11: none; --hoot12: none; --hoot13: none; --hoot14: inline; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: none; --hoot20: none; --hoot21: none; --hoot22: none; --hoot23: inline; --hoot24: none; }
html[data-look="light"] { --bun-fur: #fdf8f1; --bun-shade: #efe3d6; --bun-inner: #ffb3c7; --bun-iris: #3d8fe0; --bun-nose: #ff8fae; --bun-nose-edge: #e0708f; --bun-marks: #a57a52; --bun-belly: #efe3d6; --bun-pads: #ffb3c7; --bun-face: #2b2340; --bun-phones: #6a4cff; --bun-phones-hi: #cabfff; --bun-phones-lo: #533bc7; --bun-cap-star: #e9e5ff; --bun-cap-fold: #553dcc; --hoot-feather: #8f7bff; --hoot-wing: #6a4cff; --hoot-light: #c5bbff; --hoot-face: #fdf8ee; --hoot-belly: #fbf3e3; --hoot-shade: #e2cfae; --hoot-iris: #3d8fe0; --hoot-mark: #b8a8ff; --hoot-beak: #ffb43c; --hoot-beak-dark: #e8892a; --hoot-toes: #ffb3c7; --bun1: inline; --bun2: none; --bun3: inline; --bun4: none; --bun5: inline; --bun6: none; --bun7: inline; --bun8: none; --bun9: none; --bun10: inline; --bun11: none; --bun12: none; --bun13: none; --bun14: inline; --bun15: none; --bun16: none; --bun17: none; --bun18: none; --bun19: none; --bun20: inline; --bun21: inline; --bun22: none; --bun23: inline; --bun24: none; --bun25: none; --bun26: none; --bun27: none; --bun28: none; --bun29: inline; --bun30: none; --bun31: none; --bun32: inline; --bun33: none; --bun34: none; --bun35: none; --bun36: inline; --bun37: none; --bun38: inline; --bun39: none; --bun40: none; --bun41: none; --bun42: none; --bun43: none; --bun44: none; --bun45: inline; --bun46: none; --bun47: inline; --bun48: none; --bun49: none; --bun50: none; --bun51: inline; --bun52: none; --bun53: inline; --bun54: none; --bun55: inline; --bun56: none; --bun57: none; --bun58: none; --bun59: none; --bun60: none; --bun61: inline; --hoot1: none; --hoot2: none; --hoot3: inline; --hoot4: none; --hoot5: none; --hoot6: inline; --hoot7: none; --hoot8: none; --hoot9: none; --hoot10: inline; --hoot11: none; --hoot12: none; --hoot13: none; --hoot14: inline; --hoot15: inline; --hoot16: none; --hoot17: inline; --hoot18: none; --hoot19: none; --hoot20: none; --hoot21: none; --hoot22: none; --hoot23: none; --hoot24: inline; }
/* /looks */
@keyframes glow { to { opacity: .35; } }
.pulse { position: absolute; top: 34%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
         border: 3px solid var(--a3); pointer-events: none; animation: pulse 1.1s ease-out forwards; }
@keyframes pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* ---------- the try-it soundboard ---------- */
.tryit { position: relative; z-index: 1; width: min(440px, 100%); padding: 14px; border-radius: var(--r);
         background: color-mix(in srgb, var(--bg2) 66%, transparent); border: 1px solid var(--edge); box-shadow: 0 24px 60px rgba(0,0,0,.4);
         backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tryit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px;
              font-size: 13.5px; color: var(--muted); }
.tryit-head b { color: var(--text); font: 700 14px/1 var(--display); }
.meter { flex: 1; max-width: 120px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
           background: linear-gradient(90deg, #3ddc84, var(--a3), var(--a2)); }
.pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto; place-items: center; gap: 2px;
       padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--edge); cursor: pointer;
       background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); color: var(--text);
       font: 600 13.5px/1.2 var(--display); transition: transform .08s, border-color .2s, background .2s;
       -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pad .e { font-size: 24px; line-height: 1; }
.pad kbd { position: absolute; top: 5px; left: 7px; font: 600 10.5px/1 ui-monospace, Consolas, monospace; color: var(--dim); }
.pad::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left; transform: scaleX(var(--p, 0));
               background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 45%, transparent), color-mix(in srgb, var(--a2) 35%, transparent)); }
.pad:hover { border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.pad:active, .pad.hit { transform: scale(.95); }
.pad.on { border-color: var(--a1); box-shadow: 0 0 0 1px var(--a1), 0 0 26px color-mix(in srgb, var(--a1) 45%, transparent); }
.tryit-foot { margin: 10px 2px 0; font-size: 13px; color: var(--dim); text-align: center; }
html:not(.js) .tryit { display: none; }

/* ---------- the Watch demo ---------- */
.gamewin { position: relative; z-index: 1; width: min(460px, 100%); border-radius: 16px; overflow: hidden;
           border: 1px solid var(--edge2); background: #0d1117; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.gamewin .bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #161b22; color: var(--muted);
                font-size: 12.5px; border-bottom: 1px solid var(--edge); }
.gamewin .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f4b; }
.gamewin .bar span { margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gamewin .bar em { margin-left: auto; font-style: normal; color: var(--dim); white-space: nowrap; }
.watchbox { position: absolute; top: 17%; left: 30.4%; width: 39.2%; height: 25%; border-radius: 8px;
            border: 2px dashed color-mix(in srgb, var(--a1) 75%, transparent); background: color-mix(in srgb, var(--a1) 6%, transparent);
            transition: border-color .2s, background .2s, box-shadow .2s; }
.watchbox > span { position: absolute; top: -11px; left: 10px; padding: 2px 8px; border-radius: 6px; background: #0d1117;
                   color: var(--a1); font: 600 11.5px/1.4 var(--display); }
.watchbox .spawn { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6);
                   font: 900 clamp(11px, 3.7cqw, 18px)/1 var(--display); letter-spacing: .06em; white-space: nowrap; color: var(--a3); text-shadow: 0 0 18px rgba(255,197,61,.6);
                   transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.gamewin.fired .watchbox { border-style: solid; border-color: var(--a3); background: rgba(255,197,61,.1); box-shadow: 0 0 30px rgba(255,197,61,.35); }
.gamewin.fired .spawn { opacity: 1; transform: none; }
/* the pretend game: one SVG, and the dashed box sits over its name plate */
.scene { position: relative; aspect-ratio: 460 / 200; height: auto; overflow: hidden; container-type: inline-size; background: #140f33; }
.scene .world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .world * { transform-box: fill-box; }
.scene .stars circle { animation: twinkle 3.2s ease-in-out infinite alternate; }
.scene .stars circle:nth-child(3n) { animation-delay: -1.1s; } .scene .stars circle:nth-child(3n+1) { animation-delay: -2.3s; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .9; } }
.scene .portal { transform-origin: center; animation: portal 2.6s ease-in-out infinite alternate; }
@keyframes portal { from { opacity: .75; transform: scale(.94, .97); } to { opacity: 1; transform: none; } }
.scene .halo { transform-origin: center; animation: portal 2.6s ease-in-out infinite alternate; }
.scene .knight { animation: patrol 9s ease-in-out infinite alternate; }
@keyframes patrol { 0%, 15% { transform: none; } 85%, 100% { transform: translateX(26px); } }
.scene .kb { transform-origin: 50% 100%; animation: step .9s ease-in-out infinite; }
@keyframes step { 50% { transform: translateY(-1.5px); } }
.scene .sword { transform-origin: 0% 100%; animation: sway 2.4s ease-in-out infinite alternate; }
@keyframes sway { to { transform: rotate(-8deg); } }
.scene .flies circle { animation: fly 4s ease-in-out infinite alternate; }
.scene .flies circle:nth-child(2n) { animation-duration: 5.2s; animation-delay: -2s; }
.scene .flies circle:nth-child(3n) { animation-duration: 3.4s; animation-delay: -1s; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(8px, -10px); opacity: .3; } }
.scene .plate rect { transition: stroke .2s, fill-opacity .2s; }
.scene .runes { transition: opacity .2s; }
.gamewin.fired .plate rect { stroke: var(--a3); fill-opacity: .88; }
.gamewin.fired .runes { opacity: 0; }
.scene .rare { transform-origin: 50% 100%; transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.gamewin[data-what="rare"] .rare { transform: none; opacity: 1; }
.scene .rare .sparks { animation: twinkle .6s ease-in-out infinite alternate; }
.scene .kb { transition: rotate .4s ease-in; }
.gamewin[data-what="died"] .kb { rotate: 84deg; translate: 4px 2px; animation: none; }
.gamewin[data-what="died"] .knight { animation-play-state: paused; }
.scene .dead { opacity: 0; transition: opacity .4s; pointer-events: none; }
.gamewin[data-what="died"] .dead { opacity: 1; }
.gamewin[data-what="died"] .spawn { color: #ff4d5e; text-shadow: 0 0 18px rgba(255,60,80,.7); }
.gamewin .ctl { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 18px; background: #11161d; border-top: 1px solid var(--edge); }
.gamewin .status { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.gamewin .status b { color: var(--text); }
.gamewin .status i { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; color: var(--a1);
                     background: currentColor; animation: dot 2s ease-out infinite; vertical-align: 1px; }
.gamewin.fired .status i { color: var(--a3); }
@keyframes dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.small-btn { flex: none; padding: 9px 14px; border-radius: 11px; border: 0; cursor: pointer; color: #fff;
             font: 700 13.5px/1 var(--display); background: linear-gradient(135deg, var(--a1), var(--a2)); white-space: nowrap; }
.small-btn:hover { filter: brightness(1.1); }
.small-btn.back { background: var(--a3); color: #241a00; }
html:not(.js) .gamewin { display: none; }

/* ---------- marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--edge);
           mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
           -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee div { display: flex; gap: 48px; width: max-content; animation: marquee 38s linear infinite; will-change: transform; }
.marquee span { color: var(--muted); font: 650 17px/1 var(--display); white-space: nowrap; letter-spacing: -.005em; }
.marquee span::before { content: "✦"; margin-right: 48px; color: var(--a1); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section.sec { padding: 96px 0 0; }
h2 { margin: 0 auto 14px; max-width: 820px; text-align: center; font: 800 clamp(32px, 4.4vw, 54px)/1.04 var(--display); letter-spacing: -.03em; }
.sub { margin: 0 auto 44px; max-width: 640px; text-align: center; color: var(--muted); font-size: 18px; }

/* the big screenshot */
.showcase { position: relative; margin: 8px auto 0; max-width: 1080px; perspective: 1600px; }
.showcase::before { content: ""; position: absolute; inset: 8% 6% -4%; border-radius: 40px; z-index: -1; filter: blur(80px); opacity: .32;
                    background: linear-gradient(90deg, var(--a1), var(--a2)); }
.showcase .frame { width: fit-content; max-width: 100%; margin: 0 auto; border-radius: 18px; padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
                   border: 1px solid var(--edge2); box-shadow: 0 40px 100px rgba(0,0,0,.55); transform-origin: 50% 0; }
.showcase img { border-radius: 12px; }
/* the clickable app took the screenshot's place (board-demo.js) */
.showcase.live { max-width: 1240px; }
.showcase .frame.live { width: 100%; }
.showcase .frame.live > img { display: none; }
@supports (animation-timeline: view()) {
  .showcase .frame { animation: flatten linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes flatten { from { transform: rotateX(24deg) scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
}

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile { position: relative; overflow: hidden; grid-column: span 2; padding: 24px; border-radius: var(--r);
        background: var(--card); border: 1px solid var(--edge); transition: border-color .25s, transform .25s; }
.tile.w { grid-column: span 3; }
.tile:hover { border-color: color-mix(in srgb, var(--a1) 40%, transparent); transform: translateY(-3px); }
.tile .ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; font-size: 23px;
             background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 22%, transparent));
             border: 1px solid color-mix(in srgb, var(--a1) 35%, transparent); }
.tile h3 { margin: 0 0 6px; font: 700 20px/1.25 var(--display); letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--muted); font-size: 15.5px; }
.viz { margin-top: 20px; height: 92px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.node { padding: 8px 13px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--edge2);
        font: 650 13.5px/1 var(--display); white-space: nowrap; }
.node.hot { background: color-mix(in srgb, var(--a1) 22%, transparent); border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.flow { position: relative; flex: 1; max-width: 120px; height: 2px; background: repeating-linear-gradient(90deg, var(--edge2) 0 6px, transparent 6px 12px); }
.flow i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--a2);
          box-shadow: 0 0 12px var(--a2); animation: flow 1.8s linear infinite; }
.flow i + i { animation-delay: -.9s; background: var(--a1); box-shadow: 0 0 12px var(--a1); }
@keyframes flow { from { left: 0; } to { left: calc(100% - 10px); } }
@keyframes flowY { from { top: 0; } to { top: calc(100% - 10px); } }
.search { flex-direction: column; align-items: stretch; gap: 8px; height: auto; }
.search .q { padding: 9px 12px; border-radius: 11px; background: rgba(0,0,0,.25); border: 1px solid var(--edge2); font-size: 14px; color: var(--text); }
.search .q b::after { content: "▍"; color: var(--a1); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.search .res { display: flex; gap: 8px; flex-wrap: wrap; }
.search .res span { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--edge); font-size: 13px; color: var(--muted); }
.search .res span b { color: var(--a1); margin-left: 6px; }
.wave { gap: 4px; }
.wave i { width: 5px; height: 20%; border-radius: 3px; background: linear-gradient(180deg, var(--a2), var(--a1)); animation: eq 1.1s ease-in-out infinite alternate; }
@keyframes eq { to { height: 90%; } }
.checks { flex-direction: column; align-items: stretch; gap: 7px; height: auto; }
.checks span { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.checks span::before { content: "✓"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800;
                       color: #0b0b12; background: #3ddc84; animation: tick 4.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tick { 0%, 8% { transform: scale(0); } 16%, 100% { transform: scale(1); } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.stat { padding: 22px 16px; border-radius: var(--r); text-align: center; background: var(--card); border: 1px solid var(--edge); }
.stat b { display: block; font: 800 clamp(34px, 4vw, 48px)/1 var(--display); letter-spacing: -.03em;
          background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--a1) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* screenshots */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shots figure { margin: 0; padding: 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--edge); transition: transform .25s, border-color .25s; }
.shots figure:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a1) 40%, transparent); }
.shots img { border-radius: 15px; width: 100%; }
.shots figcaption { padding: 12px 10px 6px; color: var(--muted); font-size: 15px; }
.shots figcaption b { display: block; color: var(--text); font: 700 16.5px/1.3 var(--display); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 26px 24px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--edge);
            color: var(--muted); font-size: 15.5px; }
.steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
                    border-radius: 50%; color: #fff; font: 800 19px/1 var(--display);
                    background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a1) 14%, transparent); }
.steps li b, .steps li strong { color: var(--text); }
.steps li h3 { margin: 0 0 6px; color: var(--text); font: 700 19px/1.25 var(--display); }

/* questions */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--card); border: 1px solid var(--edge); transition: border-color .2s, background .2s; }
.faq details[open] { border-color: color-mix(in srgb, var(--a1) 40%, transparent); background: rgba(255,255,255,.05); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer;
               list-style: none; font: 700 17.5px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
                      background: rgba(255,255,255,.07); color: var(--a1); font-size: 20px; font-weight: 500; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--muted); font-size: 16px; }
.faq details > div p { margin: 0; } .faq details > div p + p { margin-top: .7em; }

.term { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 22px auto 0; padding: 12px 12px 12px 18px; border-radius: 16px;
        background: #07070c; border: 1px solid var(--edge); font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.term code { background: none; border: 0; padding: 0; color: var(--text); }
.term code::before { content: "> "; color: var(--a1); }
.term button { margin-left: auto; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--edge2); background: rgba(255,255,255,.05);
               color: var(--text); font: 600 13.5px/1 var(--display); cursor: pointer; }
.term button:hover { background: rgba(255,255,255,.1); }

/* the other app */
.cross { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-top: 96px; padding: 28px 32px;
         border-radius: 28px; border: 1px solid var(--edge2); overflow: hidden; position: relative;
         background: linear-gradient(120deg, color-mix(in srgb, var(--other1) 20%, transparent), color-mix(in srgb, var(--other2) 12%, transparent) 60%, transparent); }
.cross .pic { width: 92px; height: 110px; }
.cross h3 { margin: 0 0 4px; font: 800 26px/1.15 var(--display); letter-spacing: -.02em; }
.cross p { margin: 0; color: var(--muted); }
.cross a.go { padding: 13px 20px; border-radius: 14px; color: #fff; text-decoration: none; white-space: nowrap; font: 700 16px/1 var(--display);
              background: linear-gradient(135deg, var(--other1), var(--other2)); }
.panel[data-panel="board"] .cross { --other1: #1fb6a6; --other2: #2a6fdb; }
.panel[data-panel="watch"] .cross { --other1: #7c5cff; --other2: #ff5c8a; }

/* big closing call */
.final { margin-top: 110px; padding: 64px 24px; text-align: center; border-radius: 32px; position: relative; overflow: hidden;
         border: 1px solid var(--edge2); background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--a1) 40%, transparent), transparent 65%), var(--card); }
.final h2 { margin-bottom: 26px; }
.final .meta { margin-top: 16px; }

footer { padding: 70px 0 44px; color: var(--dim); font-size: 14px; text-align: center; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-bottom: 18px; font-size: 15px; }
footer nav a { color: var(--muted); text-decoration: none; } footer nav a:hover { color: var(--text); }
footer .guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; max-width: 900px; margin: 0 auto 22px; font-size: 13.5px; }
footer .guides a { color: var(--dim); }
footer p { max-width: 760px; margin: 0 auto; }
footer .pals { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 26px; }
footer .pals svg { width: 52px; height: 64px; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
footer .pals svg:hover { transform: translateY(-6px) rotate(-6deg); }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

/* the tab swap: the colours blend over (:root) and the new mascot drops in. The page
   itself doesn't fade: fading it from nothing flashed the screen dark. */
.panel.enter .mascot { animation: dropIn .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes dropIn { from { transform: translateY(-70px) scale(.6) rotate(8deg); opacity: 0; } }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 30px; min-height: 0; gap: 34px; }
  .lede { margin-left: auto; margin-right: auto; }
  .ctas { justify-content: center; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile.w { grid-column: span 1; }
  .tile.w { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .brand span { display: none; }
}
@media (max-width: 680px) {
  .top .mini-dl { display: none; }
  .switch button { padding: 6px 12px 6px 7px; font-size: 14px; }
  .switch button svg { width: 22px; height: 22px; }
  .bento, .shots { grid-template-columns: 1fr; }
  .tile, .tile.w { grid-column: span 1; }
  .viz.cable { flex-direction: column; height: auto; gap: 4px; }
  .viz.cable .flow { flex: none; width: 2px; height: 24px; max-width: none;
                     background: repeating-linear-gradient(180deg, var(--edge2) 0 5px, transparent 5px 10px); }
  .viz.cable .flow i { left: -4px; animation-name: flowY; }
  .cross { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 26px 20px; }
  section.sec { padding-top: 72px; }
  .bubble { left: auto; right: 0; top: -14px; max-width: 170px; font-size: 13.5px; }
  .dl { padding: 15px 22px; font-size: 17px; }
}
@media (max-width: 480px) {
  .top .wrap { gap: 8px; }
  .tools { gap: 5px; }
  .icon-btn { width: 32px; height: 32px; font-size: 15px; }
  .icon-btn.discord svg { width: 24px; height: 24px; padding: 4px; }
}
@media (max-width: 420px) { .icon-btn.discord { display: none; } }   /* no room: the footer has it */
@media (max-width: 400px) {
  .switch button { gap: 4px; padding: 6px 9px 6px 6px; font-size: 13px; }
  .brand .logo { width: 30px; height: 30px; }
  .pad { padding: 10px 4px 8px; font-size: 12.5px; }
}

/* Asked for less motion (Windows' "Animation effects" off, which plenty of gamers do):
   drop what moves the page itself (drifting light, the scrolling strip, the tilt, the
   slide-ins, the hop between tabs); Bun, Hoot and the little loops stay alive. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand .logo, .brand .logo .ears { transition: none; animation: none !important; }
  .bg i, .marquee div { animation: none !important; }
  /* Still strip: one copy of the words in centred rows, no edge fade (a faded strip
     that doesn't move looks cut off, and the mask flickered on fast scrolls). */
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee div { flex-wrap: wrap; justify-content: center; width: auto;
                 padding: 0 16px; gap: 12px 28px; will-change: auto; }
  .marquee span::before { margin-right: 28px; }
  .marquee span:first-child::before { content: none; }
  .marquee span.d { display: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .showcase .frame { animation: none !important; }
  .panel.enter .mascot { animation-name: fadeIn; }
}