/* Jellyn design system: tokens, base, shared components, site chrome and the public pages.
   Colours use light-dark(), so the theme follows color-scheme: the device's by default,
   or the one js/theme.js pins with data-theme. Sizes follow the screen: the root font size
   grows a little on big monitors and panels rearrange with container queries. */

:root{
  color-scheme:light dark;
  /* Surfaces, from the page up: warm paper and charcoal */
  --paper:light-dark(#f6f4f0,#121110);
  --block:light-dark(#ffffff,#1a1917);
  --surface:light-dark(#f3f0eb,#211f1d);
  --surface-2:light-dark(#e9e5de,#2b2926);
  --line:light-dark(#e4dfd6,#2f2d2a);
  --line-2:light-dark(#d2ccc1,#403d38);
  /* Text */
  --ink:light-dark(#1b1916,#f3f0ea);
  --muted:light-dark(#615c54,#aaa398);
  --faint:light-dark(#8d877c,#7b766d);
  /* Brand: the raspberry of the jelly */
  --brand:light-dark(#d2235a,#ff6a8f);
  --accent:var(--brand);
  --accent-ink:light-dark(#ffffff,#230712);
  --accent-soft:color-mix(in oklab,var(--accent) 12%,var(--block));
  --glaze:var(--accent);
  /* Flavours: the tones for icons, tiles and badges */
  --raspberry:light-dark(#c81f53,#ff7a9c);
  --grape:light-dark(#6a45c4,#b69cff);
  --blueberry:light-dark(#2459c4,#7fb0ff);
  --mint:light-dark(#0f7f6e,#52d6bd);
  --lime:light-dark(#44750f,#a5dc6c);
  --tangerine:light-dark(#b0500f,#ffa766);
  --lemon:light-dark(#876200,#f6cf62);
  --slate:light-dark(#5a5750,#aeaaa2);
  /* States */
  --good:light-dark(#18744a,#58d69c);
  --warn:light-dark(#8a5a00,#f5c460);
  --bad:light-dark(#c23030,#ff8080);
  --info:light-dark(#2459c4,#86b4ff);
  --go:light-dark(#18744a,#46c98c);
  --go-ink:light-dark(#ffffff,#07231a);
  --stop:light-dark(#c23030,#ff8080);
  /* Depth: hairlines first, shadows only for things that float */
  --glass:light-dark(rgb(246 244 240 / .86),rgb(18 17 16 / .84));
  --shadow-sm:0 1px 0 light-dark(rgb(27 25 22 / .04),rgb(0 0 0 / .25));
  --shadow-md:0 8px 24px -10px light-dark(rgb(40 30 20 / .18),rgb(0 0 0 / .55));
  --shadow-lg:0 24px 60px -18px light-dark(rgb(40 30 20 / .28),rgb(0 0 0 / .7)),0 0 0 1px light-dark(rgb(27 25 22 / .04),rgb(255 255 255 / .03));
  --glow:none;
  /* Type */
  --font-ui:'Geist','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  /* Shape and motion */
  --r-sm:6px;--r-md:9px;--r-lg:12px;--r-xl:14px;--r-2xl:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.1,1.084 30.6%,1.035 35.4%,.999 40.2%,.985 45.6%,.999 55.1%,1.003 62.6%,1);
  --header-h:60px;
  --gutter:clamp(16px,2.6vw,40px);
  accent-color:var(--accent);
  scrollbar-color:var(--line-2) transparent;
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}

/* ---------- Base ---------- */
/* Text grows gently with the screen: 15px on phones and laptops, up to 17px on big monitors. */
html{font-size:clamp(93.75%,.8rem + .2vw,106.25%);scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font:400 .9375rem/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(*,*::before,*::after){box-sizing:border-box}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,summary{cursor:pointer}
summary{list-style:none}summary::-webkit-details-marker{display:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;line-height:1.12;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.8rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
h4{font-size:1rem;letter-spacing:0}
p{color:var(--muted);margin:0 0 1em;text-wrap:pretty}
em{font-style:normal}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
kbd{display:inline-grid;place-items:center;min-width:1.6em;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--block);color:var(--muted);font:500 .6875rem/1.5 var(--font-mono)}
code{font-family:var(--font-mono);font-size:.9em}
::selection{background:color-mix(in oklab,var(--accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.icon{flex:none;width:18px;height:18px;vertical-align:middle;overflow:visible;pointer-events:none}
button:has(>.icon),a.text-button:has(>.icon){display:inline-flex;align-items:center;justify-content:center;gap:7px}
/* Any link, chip or summary with a Lucide icon and words: the icon sits beside them, with room between. */
:is(a.text-link,a.dash-chip,a.pill,span.pill,summary,a.outline-link,label.pill):has(>.icon){display:inline-flex;align-items:center;gap:6px}
/* Words of an icon button stay on one line beside the icon. */
:is(.button,.save-button,.outline-link)>span:not(.sr-only){white-space:nowrap}
button:has(>.icon):not(.text-button){min-width:32px;min-height:32px}
button:has(>.icon):focus-visible,a:has(>.icon):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1320px,100% - 2 * var(--gutter));margin-inline:auto}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:12px;left:12px;z-index:100;padding:10px 14px;border-radius:var(--r-md);background:var(--block);box-shadow:var(--shadow-md)}
.eyebrow{display:block;color:var(--faint);font-size:.8125rem;font-weight:500}
.help{color:var(--muted);font-size:.8125rem}
[role=status]{font-size:.8125rem;min-height:1em}
[role=status]:empty{min-height:0}

/* ---------- Buttons and links ---------- */
.button{--bg:var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:9px 18px;border:1px solid transparent;border-radius:var(--r-md);background:var(--bg);color:var(--accent-ink);font:600 .9375rem/1.2 var(--font-ui);transition:background-color .15s,transform .15s var(--ease),border-color .15s;cursor:pointer}
.button:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab,var(--bg) 88%,var(--ink))}
.button:active:not(:disabled){transform:translateY(1px)}
.button span{display:inline-block;transition:translate .18s var(--ease)}
.button:hover span{translate:3px 0}
/* The Get started button: a ridged frame whose top and bottom edges open on hover.
   Based on a Uiverse.io button by Navarog21 (MIT licence). --cover is the colour behind it. */
.button-frame{--frame:var(--accent);--cover:var(--paper);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:10em;height:3.2em;padding:0 1.5em;border:3px ridge var(--frame);border-radius:.3em;background:transparent;color:var(--ink);font:700 1rem var(--font-ui);cursor:pointer;transition:box-shadow .8s,color .3s}
.button-frame::before,.button-frame::after{content:'';position:absolute;left:3%;width:94%;height:40%;background:var(--cover);transform-origin:center;transition:transform .5s var(--ease)}
.button-frame::after{top:-10px}
.button-frame::before{top:80%}
.button-frame>span{position:relative;z-index:1}
.button-frame:is(:hover,:focus-visible)::before,.button-frame:is(:hover,:focus-visible)::after{transform:scale(0)}
.button-frame:is(:hover,:focus-visible){box-shadow:inset 0 0 25px color-mix(in oklab,var(--frame) 65%,transparent)}
.button.small{min-height:34px;padding:6px 13px;font-size:.8125rem;border-radius:8px}
.button.ghost{--bg:transparent;border-color:var(--line-2);color:var(--ink)}
.button.ghost:hover:not(:disabled){background:var(--surface)}
.button[aria-disabled=true]{opacity:.55;cursor:default}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:.875rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);transition:text-decoration-color .15s}
.text-link:hover{text-decoration-color:currentColor}
.text-button{margin:0;padding:0;border:0;background:none;color:var(--accent);font-size:.8125rem;font-weight:600;cursor:pointer}
.text-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.icon-button{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;margin:0;padding:0;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.icon-button:hover{background:var(--surface);color:var(--ink)}
button:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Form fields ---------- */
input:not([type=checkbox],[type=radio],[type=range]),textarea,select{width:100%;max-width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--block);color:var(--ink);font-size:.875rem;transition:border-color .15s,box-shadow .15s}
textarea{min-height:auto;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover:not(:disabled,:focus),textarea:hover:not(:disabled,:focus),select:hover:not(:disabled){border-color:var(--faint)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
input:user-invalid,textarea:user-invalid{border-color:var(--bad)}
input[type=checkbox],input[type=radio]{width:17px;height:17px;margin:0;accent-color:var(--accent)}
label{font-size:.8125rem;font-weight:600;color:var(--ink)}
select{cursor:pointer}
/* Browsers without the customizable select (account.css) get Jellyn's arrow on the closed select. */
@supports not (appearance:base-select){select:not([multiple],[size]){appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}}
.checkbox{display:flex!important;align-items:center;gap:10px;font-weight:500}
.preference-row{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);cursor:pointer;transition:border-color .15s,background-color .15s}
.preference-row:hover{border-color:var(--line-2)}
.preference-row:has(input:checked){border-color:color-mix(in oklab,var(--accent) 50%,var(--line))}
.preference-row input{margin-top:2px}
.preference-row{position:relative}
/* Checkboxes: a pink neon box that ticks with a little burst (js/script.js adds the drawing; based on a
   Uiverse.io checkbox, MIT licence). The real checkbox stays, invisible but focusable. */
input.neon-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.neon{--n:var(--accent);--n-dark:color-mix(in oklab,var(--accent) 72%,var(--ink));--size:22px;position:relative;display:block;flex:none;width:var(--size);height:var(--size);margin-top:1px}
.neon span{display:block}
.neon-box{position:absolute;inset:0;border:2px solid var(--n-dark);border-radius:5px;background:light-dark(color-mix(in oklab,var(--accent) 5%,var(--block)),rgb(0 0 0 / .55));transition:all .4s ease}
.neon .neon-check-wrap{position:absolute;inset:2px;display:flex;align-items:center;justify-content:center}
.neon-check{width:80%;height:80%;fill:none;stroke:var(--n);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transform-origin:center;transition:all .4s cubic-bezier(.16,1,.3,1)}
.neon-glow{position:absolute;inset:-2px;border-radius:7px;background:var(--n);opacity:0;filter:blur(8px);transform:scale(1.2);transition:all .4s ease}
.neon-borders{position:absolute;inset:0;border-radius:4px;overflow:hidden}
.neon-borders span{position:absolute;width:30px;height:1px;background:var(--n);opacity:0;transition:opacity .4s ease}
.neon-borders span:nth-child(1){top:0;left:-100%;animation:neon-flow-1 2s linear infinite}
.neon-borders span:nth-child(2){top:-100%;right:0;width:1px;height:30px;animation:neon-flow-2 2s linear infinite}
.neon-borders span:nth-child(3){bottom:0;right:-100%;animation:neon-flow-3 2s linear infinite}
.neon-borders span:nth-child(4){bottom:-100%;left:0;width:1px;height:30px;animation:neon-flow-4 2s linear infinite}
.neon-particles span{position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%;background:var(--n);box-shadow:0 0 6px var(--n);opacity:0;pointer-events:none}
.neon-rings{position:absolute;inset:-14px;pointer-events:none}
.neon-rings .ring{position:absolute;inset:0;border:1px solid var(--n);border-radius:50%;opacity:0;transform:scale(0)}
.neon-sparks span{position:absolute;top:50%;left:50%;width:15px;height:1px;background:linear-gradient(90deg,var(--n),transparent);opacity:0}
label:hover>.neon .neon-box{border-color:var(--n);transform:scale(1.05)}
input.neon-input:checked+.neon .neon-box{border-color:var(--n);background:color-mix(in oklab,var(--n) 12%,transparent)}
input.neon-input:checked+.neon .neon-check{stroke-dashoffset:0;transform:scale(1.1)}
input.neon-input:checked+.neon .neon-glow{opacity:.2}
input.neon-input:checked+.neon .neon-borders span{opacity:1}
input.neon-input:checked+.neon.live .neon-particles span{animation:neon-burst .6s ease-out forwards}
input.neon-input:checked+.neon.live .neon-rings .ring{animation:neon-ring .6s ease-out forwards}
input.neon-input:checked+.neon.live .neon-sparks span{animation:neon-spark .6s ease-out forwards}
input.neon-input:focus-visible+.neon .neon-box{outline:2px solid var(--n);outline-offset:3px}
input.neon-input:disabled+.neon{opacity:.45}
.neon-rings .ring:nth-child(2){animation-delay:.1s!important}
.neon-rings .ring:nth-child(3){animation-delay:.2s!important}
.neon-particles span:nth-child(1){--x:19px;--y:-19px}.neon-particles span:nth-child(2){--x:-19px;--y:-19px}
.neon-particles span:nth-child(3){--x:19px;--y:19px}.neon-particles span:nth-child(4){--x:-19px;--y:19px}
.neon-particles span:nth-child(5){--x:26px;--y:0px}.neon-particles span:nth-child(6){--x:-26px;--y:0px}
.neon-particles span:nth-child(7){--x:0px;--y:26px}.neon-particles span:nth-child(8){--x:0px;--y:-26px}
.neon-particles span:nth-child(9){--x:15px;--y:-22px}.neon-particles span:nth-child(10){--x:-15px;--y:22px}
.neon-particles span:nth-child(11){--x:22px;--y:15px}.neon-particles span:nth-child(12){--x:-22px;--y:-15px}
.neon-sparks span:nth-child(1){--r:0deg}.neon-sparks span:nth-child(2){--r:90deg}.neon-sparks span:nth-child(3){--r:180deg}.neon-sparks span:nth-child(4){--r:270deg}
@keyframes neon-flow-1{to{transform:translateX(200%)}}
@keyframes neon-flow-2{to{transform:translateY(200%)}}
@keyframes neon-flow-3{to{transform:translateX(-200%)}}
@keyframes neon-flow-4{to{transform:translateY(-200%)}}
@keyframes neon-burst{0%{transform:translate(-50%,-50%) scale(1);opacity:0}20%{opacity:1}100%{transform:translate(calc(-50% + var(--x,15px)),calc(-50% + var(--y,15px))) scale(0);opacity:0}}
@keyframes neon-ring{0%{transform:scale(0);opacity:1}100%{transform:scale(2);opacity:0}}
@keyframes neon-spark{0%{transform:rotate(var(--r,0deg)) translateX(0) scale(1);opacity:1}100%{transform:rotate(var(--r,0deg)) translateX(22px) scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.neon-borders span,.neon-particles span,.neon-rings .ring,.neon-sparks span{animation:none!important}}
.preference-row b{display:block;font-size:.875rem}
.preference-row small{display:block;margin-top:2px;color:var(--muted);font-size:.8125rem;font-weight:400}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);view-transition-name:site-header;transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
/* Scrolling: the header tightens once the page moves, and past the first screen folds its links away (nav-collapsed,
   js/navigation.js). Going back up, pointing at it or opening a menu brings them back. */
.site-header .header-inner{transition:height .45s var(--ease)}
.site-header.scrolled{box-shadow:0 14px 30px -22px rgb(0 0 0 / .55)}
.site-header.scrolled .header-inner{height:calc(var(--header-h) - 8px)}
.site-header .main-nav{transition:opacity .3s ease,transform .45s var(--ease),visibility .3s}
.site-header .account-actions{transition:gap .45s var(--ease)}
.site-header .search-launch{transition:padding .45s var(--ease),width .45s var(--ease)}
.site-header.nav-collapsed .main-nav{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97)}
.site-header.nav-collapsed .search-launch{width:34px;padding:0;justify-content:center}
.site-header.nav-collapsed .search-launch span,.site-header.nav-collapsed .search-launch kbd{display:none}
.site-header.nav-collapsed .brand-logo{animation:jelly .8s var(--ease)}
.site-header.nav-collapsed:hover .main-nav,.site-header.nav-collapsed:focus-within .main-nav{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.site-header,.site-header *{transition:none!important;animation:none!important}}
.header-inner{position:relative;display:flex;align-items:center;gap:18px;height:var(--header-h);padding-inline:var(--gutter)}
body[data-layout=site] .header-inner{max-width:calc(1320px + 2 * var(--gutter));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:8px;flex:none;font:800 1.4rem/1 var(--font-display);letter-spacing:-.045em}
.brand-logo{display:block;width:32px;height:32px;object-fit:contain;transform-origin:50% 90%}
.brand:hover .brand-logo{animation:jelly .8s var(--ease)}
@keyframes jelly{0%,100%{transform:none}22%{transform:scale(1.14,.86)}42%{transform:scale(.9,1.1)}62%{transform:scale(1.05,.95)}82%{transform:scale(.98,1.02)}}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:12px;margin-right:auto}
.main-nav>a,.main-nav>span[aria-disabled],.nav-menu>summary{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:8px;color:var(--muted);font-size:.875rem;font-weight:500;white-space:nowrap;transition:color .15s,background-color .15s}
.main-nav>a:hover,.nav-menu>summary:hover,.nav-menu[open]>summary{background:var(--surface);color:var(--ink)}
.main-nav>a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:8px 8px 0 0}
.main-nav>span[aria-disabled]{cursor:default}
.coming-soon{display:inline-block;padding:0 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.6875rem;font-weight:500;line-height:1.6;white-space:nowrap}
.plus-tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:.6875rem;font-weight:700;line-height:1.6;vertical-align:middle;white-space:nowrap}
.nav-menu{position:relative}
.chev{width:14px;height:14px;color:var(--faint);transition:rotate .2s var(--ease)}
.nav-menu[open] .chev{rotate:180deg}
.mega-menu{position:absolute;top:calc(100% + 8px);left:-8px;width:420px;padding:8px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--block);box-shadow:var(--shadow-lg);z-index:60}
.nav-menu[open] .mega-menu{animation:pop-in .18s var(--ease)}
.menu-heading{margin:6px 10px 8px;color:var(--muted);font:600 .75rem/1.4 var(--font-ui)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-grid>a,.mega-grid>span[aria-disabled]{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:11px;padding:10px;border-radius:var(--r-lg);transition:background-color .15s}
.mega-grid>*>.menu-symbol{grid-row:span 2}
.mega-grid>a:hover{background:var(--surface)}
.mega-grid>span[aria-disabled]{opacity:.7;cursor:default}
.mega-grid b{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.mega-grid small:not(.coming-soon){display:block;margin-top:2px;font-size:.75rem;line-height:1.45;color:var(--muted)}
.mega-grid .coming-soon{grid-column:2;justify-self:start;margin-top:6px}
.menu-symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--accent)}
.account-actions{display:flex;align-items:center;gap:4px;flex:none}
.search-launch{display:inline-flex;align-items:center;gap:8px;height:36px;margin:0 4px 0 0;padding:0 6px 0 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--block);color:var(--faint);font-size:.8125rem;cursor:pointer;transition:border-color .15s,color .15s}
.search-launch:hover{border-color:var(--line-2);color:var(--ink)}
.search-launch kbd{margin-left:18px}
.theme-button{position:relative;overflow:hidden}
.theme-button>span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .45s var(--ease),opacity .3s}
:root[data-theme=dark] .theme-sun,:root:not([data-theme=dark]) .theme-moon{transform:translateY(120%) rotate(90deg);opacity:0}
.notification-menu{position:relative}
.notification-link[aria-expanded=true]{background:var(--surface);color:var(--ink)}
.notification-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:340px;max-width:calc(100vw - 24px);padding:12px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--block);box-shadow:var(--shadow-lg);animation:pop-in .18s var(--ease)}
.notification-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 4px 10px}
.notification-head h2{margin:0;font:600 .9375rem var(--font-ui);letter-spacing:0}
.notification-head .text-button{font-size:.75rem}
.notification-link{position:relative}
.notification-link.has-unread::after{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;border:2px solid var(--glass);border-radius:50%;background:var(--accent)}
.notification-preview{display:grid;max-height:min(300px,50vh);overflow-y:auto;overscroll-behavior:contain}
.notification-preview-card{display:flex;align-items:flex-start;gap:4px;padding:6px 4px 6px 10px;border-radius:var(--r-md);transition:background-color .15s,opacity .2s,transform .2s}
.notification-preview-card .notification-body{flex:1;min-width:0;padding:4px 0}
.leaving{opacity:0;transform:translateX(16px)}
/* The three-dot menu on a notification */
.item-menu{position:relative;flex:none}
.item-menu summary{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);color:var(--faint);transition:background-color .15s,color .15s}
.item-menu summary:hover,.item-menu[open] summary{background:var(--surface-2);color:var(--ink)}
.item-menu summary .icon{width:16px;height:16px}
.item-menu>div{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:grid;min-width:160px;padding:4px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-lg);animation:pop-in .15s var(--ease)}
.item-menu button{display:flex;align-items:center;gap:9px;margin:0;padding:7px 9px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer}
.item-menu button:hover:not(:disabled){background:var(--surface)}
.item-menu button .icon{width:15px;height:15px;color:var(--faint)}
.item-menu button.danger{color:var(--bad);border:0}
.item-menu button.danger .icon{color:currentColor}
.notification-preview-card:not(:last-child){border-bottom:1px solid var(--line)}
.notification-preview-card:hover{background:var(--surface)}
.notification-preview-card strong{display:block;font-size:.8125rem;font-weight:500;line-height:1.45}
.notification-preview-card.unread strong::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:1px}
.notification-preview-card time{display:block;margin-top:3px;color:var(--faint);font-size:.75rem}
.notification-preview-card:hover{background:var(--surface)}
.notification-empty{margin:0;padding:18px 8px;color:var(--muted);font-size:.8125rem;text-align:center}
.notification-view-all{display:block;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-size:.8125rem;font-weight:600;text-align:center;transition:background-color .15s}
.notification-view-all:hover{background:var(--surface)}
#account-menu{display:flex;margin-left:4px}
.profile-dropdown{position:relative}
.profile-dropdown summary{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 3px;border:1px solid transparent;border-radius:999px;font-size:.875rem;font-weight:600;transition:background-color .15s,border-color .15s}
.profile-dropdown summary:hover,.profile-dropdown[open] summary{background:var(--surface);border-color:var(--line)}
.profile-dropdown summary>span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-dropdown>div{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;width:240px;padding:6px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--block);box-shadow:var(--shadow-lg);animation:pop-in .18s var(--ease)}
/* Your Roblox link, first in the account menu */
.profile-dropdown>div>a.roblox-status{align-items:flex-start;gap:8px;margin-bottom:4px;padding:8px 10px 10px;border-bottom:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0;color:var(--muted);line-height:1.3}
.profile-dropdown>div>a.roblox-status .icon{width:14px;height:14px;margin-top:2px;color:currentColor}
.profile-dropdown>div>a.roblox-status.linked{color:var(--good)}
/* The name drops to a new line when the sentence does not fit */
.roblox-status span{min-width:0;font-size:.8125rem;font-weight:500;overflow-wrap:anywhere}
.profile-dropdown>div>a,.profile-dropdown>div>.text-button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);color:var(--ink);font-size:.875rem;font-weight:500;text-align:left}
.profile-dropdown>div>a .icon,.profile-dropdown>div>.text-button .icon{width:16px;height:16px;color:var(--faint)}
.profile-dropdown>div>a:hover,.profile-dropdown>div>.text-button:hover{background:var(--surface);text-decoration:none}
.profile-dropdown>div>.text-button{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);color:var(--bad)}
.profile-dropdown>div>.text-button .icon{color:currentColor}
.profile-image{display:block;width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--surface)}
.avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.6875rem;font-weight:700}
.account-actions .menu-toggle{display:none}

/* ---------- Windows and search ---------- */
dialog{padding:24px;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--block);color:var(--ink);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:light-dark(rgb(30 24 18 / .32),rgb(0 0 0 / .6));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog[open]{animation:dialog-in .24s var(--ease)}
dialog[open]::backdrop{animation:fade-in .24s ease}
#site-search{width:min(600px,100% - 24px);max-height:78vh;margin-top:12vh;padding:16px}
#site-search .panel-head{margin-bottom:12px}
#site-search h2{margin:0;font:600 1rem var(--font-ui);letter-spacing:0}
.search-field{position:relative;display:flex;align-items:center}
.search-field>.icon{position:absolute;left:13px;color:var(--faint);pointer-events:none}
#site-query{min-height:48px;padding-left:40px;font-size:1rem}
#site-results{max-height:48vh;margin-top:8px;overflow-y:auto;overscroll-behavior:contain}
#site-results h3{margin:14px 10px 4px;color:var(--muted);font:600 .75rem var(--font-ui)}
#site-results a,.search-unavailable{display:block;padding:9px 11px;border-radius:var(--r-md)}
#site-results a:hover,#site-results a:focus-visible{background:var(--surface);outline:none;box-shadow:inset 2px 0 0 var(--accent)}
#site-results strong{display:block;font-size:.875rem;font-weight:600}
#site-results small{color:var(--muted);font-size:.8125rem}
#site-results>p{padding:18px 10px;color:var(--muted);font-size:.875rem}
.search-unavailable{opacity:.6}
.search-help{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:12px 2px 0;color:var(--faint);font-size:.75rem}

/* ---------- Footers ---------- */
.site-footer{margin-top:48px;border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-block:48px 28px}
.footer-about{display:grid;align-content:start}
.site-footer h2{margin:6px 0 14px;font:600 .8125rem var(--font-ui);letter-spacing:0;color:var(--ink)}
.site-footer>div>div>a:not(.brand),.site-footer>div>div>span[aria-disabled]{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:9px;color:var(--muted);font-size:.875rem;transition:color .15s}
.site-footer>div>div>a:not(.brand):hover{color:var(--ink)}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--line);color:var(--faint);font-size:.75rem}
.app-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:16px var(--gutter);border-top:1px solid var(--line);color:var(--faint);font-size:.75rem}
.app-footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.app-footer a:hover{color:var(--ink)}

/* ---------- Cards, pills and states (shared by every page) ---------- */
.panel{min-width:0;padding:22px;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--block);box-shadow:var(--shadow-sm)}
.panel h2{margin:0 0 6px;font-size:1.2rem}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.panel-head h2{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.75rem;font-weight:600;white-space:nowrap}
.state-pill{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border:1px solid color-mix(in oklab,var(--tone,var(--slate)) 30%,transparent);border-radius:999px;background:color-mix(in oklab,var(--tone,var(--slate)) 10%,transparent);color:var(--tone,var(--muted));font-size:.6875rem;font-weight:700;white-space:nowrap}
.state-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state-pill.good{--tone:var(--good)}.state-pill.warn{--tone:var(--warn)}.state-pill.bad{--tone:var(--bad)}.state-pill.info{--tone:var(--info)}.state-pill.muted{--tone:var(--slate)}
a.state-pill:hover{text-decoration:underline;text-underline-offset:2px}
.empty-state{margin:0;padding:22px 16px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted);font-size:.8125rem;text-align:center}
.tone-raspberry{--tone:var(--raspberry)}.tone-grape{--tone:var(--grape)}.tone-blueberry{--tone:var(--blueberry)}.tone-mint{--tone:var(--mint)}.tone-lime{--tone:var(--lime)}.tone-tangerine{--tone:var(--tangerine)}.tone-lemon{--tone:var(--lemon)}.tone-slate{--tone:var(--slate)}
.tile-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-lg);background:color-mix(in oklab,var(--tone,var(--accent)) 14%,transparent);color:var(--tone,var(--accent))}

/* ---------- Public pages ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px)}
.hero h1{max-width:12em;margin:20px 0 22px;font-size:clamp(2.5rem,1.3rem + 3.4vw,4.2rem);line-height:1.04;letter-spacing:-.018em}
/* The highlighted words are the jelly's colour */
.hero h1 em,.page-intro h1 em,.auth-card h1 em{position:relative;color:var(--accent);font-style:normal;white-space:nowrap}
.lede{max-width:34em;font-size:1.125rem;line-height:1.6}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0}
.hero-copy .hero-note{margin:22px 0 0;color:var(--muted);font-size:.875rem}
/* The product preview: a drawn shift card pinned to the page, not live data */
.hero-visual{position:relative;display:grid;place-items:center;min-height:440px}
.hero-mascot{position:absolute;top:0;right:4%;z-index:2;width:clamp(110px,12vw,160px);height:auto;rotate:8deg;animation:bob 6s ease-in-out infinite}
.note-card{position:relative;width:min(380px,100%);padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-md);rotate:-2.5deg}
.note-card+.note-card{margin-top:-24px;margin-left:30%;rotate:2deg;width:min(280px,80%)}
.tape{position:absolute;top:-12px;left:50%;width:92px;height:24px;translate:-50% 0;rotate:-4deg;background:light-dark(rgb(236 222 190 / .85),rgb(120 108 84 / .55));box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.note-card .tape{left:34%}
.note-card+.note-card .tape{left:62%;rotate:5deg}
.mock-row{display:flex;align-items:center;gap:8px;font-size:.8125rem}
.mock-row small{margin-left:auto;color:var(--faint);font-size:.75rem}
.mock-dot{width:8px;height:8px;border-radius:50%;background:var(--go)}
.mock-clock{display:block;margin:10px 0 4px;font:600 2.3rem/1 var(--font-mono);letter-spacing:-.05em}
.mock-caption{color:var(--muted);font-size:.75rem}
.mock-crew{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.mock-crew small{margin-right:4px;color:var(--faint);font-size:.75rem}
.mock-face{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in oklab,var(--tone) 22%,var(--block));color:var(--tone);font-size:.625rem;font-weight:700;box-shadow:0 0 0 2px var(--block),0 0 0 3.5px var(--go)}
.mock-tag{padding:1px 8px;border:1px solid color-mix(in oklab,var(--tangerine) 35%,transparent);border-radius:999px;color:var(--tangerine);font-size:.6875rem;font-weight:700}
.note-card b{display:block;margin-top:8px;font-size:1rem}
.note-card p{margin:2px 0 0;font-size:.8125rem}
.section{padding-block:clamp(56px,7vw,96px)}
.section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:36px}
.section-heading h2{margin:10px 0 0}
.section-heading>p{max-width:320px;margin:0;font-size:.9375rem}
/* What Jellyn does: a spec sheet with hairlines, not a wall of cards */
.feature{display:grid;align-content:start;gap:10px;padding:28px 28px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .2s}
.feature:hover{background:var(--block)}
.feature h3{margin:6px 0 0;font-size:1.15rem}
.feature p{margin:0;max-width:38ch;font-size:.9375rem}
.feature-number{color:var(--faint);font:500 .6875rem var(--font-mono);letter-spacing:.1em}
/* Quick actions: a few direct ways in, each with its own colour. A soft light follows the pointer. */
.quick{padding-bottom:0}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.qa-card{--tone:var(--accent);position:relative;isolation:isolate;display:grid;align-content:start;justify-items:start;gap:8px;width:100%;margin:0;padding:22px 22px 24px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--block);color:inherit;font:inherit;text-align:left;transition:border-color .2s,transform .25s var(--ease)}
button.qa-card{cursor:pointer}
.qa-card::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--tone) 13%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.qa-card::after{content:'';position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--tone);transform:scaleX(.12);transform-origin:left;transition:transform .45s var(--ease)}
.qa-card:is(:hover,:focus-visible):not([aria-disabled=true]){border-color:color-mix(in oklab,var(--tone) 35%,var(--line));transform:translateY(-2px)}
.qa-card:is(:hover,:focus-visible):not([aria-disabled=true])::before{opacity:1}
.qa-card:is(:hover,:focus-visible):not([aria-disabled=true])::after{transform:scaleX(1)}
.qa-card[aria-disabled=true]{opacity:.6;cursor:default}
.qa-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:var(--r-lg);background:color-mix(in oklab,var(--tone) 14%,transparent);color:var(--tone)}
.qa-card h3{margin:0;font-size:1.1rem}
.qa-card p{margin:0;font-size:.875rem}
.qa-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--tone);font-size:.875rem;font-weight:600}
.qa-link span{display:inline-block;transition:translate .2s var(--ease)}
.qa-card:hover .qa-link span{translate:3px 0}
/* The tour (js/home.cjs): what a staff team gets, each beside a drawing of its screen. Rows take turns left and right. */
/* The JELLYN poster (js/home.cjs): the picture in a frame, with swatches for its three colours. */
.poster{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;gap:clamp(28px,5vw,72px);padding-block:clamp(24px,3vw,40px) clamp(56px,7vw,96px)}
.poster-kicker{display:inline-block;margin-bottom:10px;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.poster-copy h2{margin:0 0 12px;font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);letter-spacing:-.015em}
.poster-copy p{margin:0;max-width:30em;font-size:1.0625rem;line-height:1.6}
.poster-swatches{display:flex;gap:10px;margin-top:22px}
.poster-swatch{flex:none;width:30px;height:30px;min-width:0;margin:0;padding:0;border:2px solid transparent;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 3px var(--bg),0 0 0 1px var(--line);cursor:pointer;transition:transform .2s var(--spring),border-color .15s}
.poster-swatch.s-blue{--swatch:#9fb3cc}.poster-swatch.s-pink{--swatch:#d4b0bf}.poster-swatch.s-sand{--swatch:#d9c2b6}
.poster-swatch:hover{transform:scale(1.08)}
.poster-swatch[aria-pressed=true]{border-color:var(--ink)}
.poster-frame{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2xl);background:#9fb3cc;box-shadow:var(--shadow-lg);aspect-ratio:16/9;transition:background-color .3s}
.poster[data-colour=pink] .poster-frame{background:#d4b0bf}
.poster[data-colour=sand] .poster-frame{background:#d9c2b6}
.poster-frame img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.poster{grid-template-columns:1fr}.poster-frame{order:-1}}
.tour{display:grid;gap:clamp(56px,7vw,104px);padding-block:clamp(32px,4vw,56px) clamp(64px,8vw,112px)}
.tour-head{max-width:620px}
.tour-head h2{margin:0 0 12px;font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);letter-spacing:-.015em}
.tour-head p{margin:0;font-size:1.0625rem}
.tour-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,6vw,96px)}
.tour-row:nth-of-type(even) .tour-words{order:2}
.tour-kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--tone);font-size:.875rem;font-weight:600}
.tour-kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tone)}
.tour-words h3{margin:0 0 12px;font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);letter-spacing:-.01em}
.tour-words p:last-child{margin:0;max-width:30em;font-size:1rem;line-height:1.65}
.tour-shot{display:grid;place-items:center;padding:clamp(22px,3.5vw,40px);border:1px solid var(--line);border-radius:calc(var(--r-lg) + 6px);background:color-mix(in oklab,var(--tone) 5%,var(--surface))}

/* The drawings: small pieces of Jellyn's screens, in its own components' look */
.ui-card{display:grid;gap:14px;width:min(460px,100%);padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-md);font-size:.8125rem}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-head b{display:inline-flex;align-items:center;gap:8px;font-size:.875rem}
.ui-head small{color:var(--muted)}
.ui-big{margin:0;font:600 1.9rem/1 var(--font-display);letter-spacing:-.015em}
.ui-big small{color:var(--muted);font:500 .8125rem var(--font-ui);letter-spacing:0}
.ui-progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ui-progress span{display:block;height:100%;border-radius:inherit;background:var(--mint)}
.ui-progress .w-53{width:53%}
.ui-board{display:grid;gap:2px;margin:0;padding:8px 0 0;border-top:1px solid var(--line);list-style:none}
.ui-board li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
.ui-board li.you{background:var(--surface)}
/* On the leaderboard the faces are just people (the green ring means on shift, in the hero) */
.ui-board .mock-face{box-shadow:none}
.ui-board span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.ui-search{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--faint)}
/* The drawings that can be tried (js/home.js): the log's search, and a person's card on the week's board. */
.ui-demo{position:relative}
.ui-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);color:var(--muted)}
.ui-search input[type=search]{flex:1;width:auto;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:inherit;box-shadow:none;outline:none}
.ui-search input::placeholder{color:var(--faint)}
.ui-demo .ui-cases{max-height:212px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
.ui-demo .ui-cases li[hidden]{display:none}
.ui-demo .ui-cases li:not([hidden])~li:not([hidden]){border-top:1px solid var(--line)}
.ui-demo .ui-cases li{border-top:0}
.ui-cases mark{padding:0 1px;border-radius:3px;background:color-mix(in oklab,var(--accent) 24%,transparent);color:inherit}
.ui-none{margin:4px 2px;color:var(--muted)}
.ui-none b{color:var(--ink)}
.ui-found{margin:-6px 2px 0;color:var(--faint);font-size:.75rem}
.ui-found:empty{display:none}
.ui-person{display:flex;align-items:center;gap:10px;min-width:0;margin:-4px -6px;padding:4px 6px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.ui-person:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.ui-person[aria-expanded=true]{background:color-mix(in oklab,var(--accent) 12%,transparent)}
.ui-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-demo .ui-board li{grid-template-columns:minmax(0,1fr) auto}
.ui-pop{position:absolute;inset:8px;z-index:3;display:grid;align-content:start;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-lg);outline:none;animation:ui-pop-in .18s var(--ease,ease) both}
.ui-pop[hidden]{display:none}
@keyframes ui-pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.ui-pop{animation:none}}
.ui-pop-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px}
.ui-pop-head .mock-face{width:36px;height:36px;font-size:.75rem;box-shadow:none}
.ui-pop-head>div{display:grid;min-width:0}
.ui-pop-head b{font-size:.9375rem}
.ui-pop-head small{color:var(--muted)}
.ui-pop-close{display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer}
.ui-pop-close:hover{color:var(--ink)}
.ui-pop-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ui-pop-stats div{display:grid;padding:6px 9px;border-radius:9px;background:var(--surface)}
.ui-pop-stats strong{font:600 .9375rem/1.2 var(--font-display)}
.ui-pop-stats span{color:var(--muted);font-size:.6875rem}
.ui-pop-facts{display:grid;gap:3px;margin:0}
.ui-pop-facts div{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:8px;min-height:24px}
.ui-pop-facts dt{color:var(--muted);font-size:.75rem}
.ui-pop-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ui-pop-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ui-pop-id code{padding:1px 6px;border-radius:6px;background:var(--surface);font:600 .75rem var(--font-mono)}
.ui-pop-copy{display:inline-flex;align-items:center;gap:4px;margin:0;padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:600 .6875rem var(--font-ui);cursor:pointer}
.ui-pop-copy:hover{border-color:var(--accent);color:var(--accent)}
.ui-pop .role-list{display:flex;flex-wrap:wrap;gap:6px}
.ui-pop .role-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600}
.ui-pop .role-chip i{width:8px;height:8px;border-radius:50%;background:var(--role,var(--muted))}
.ui-pop-note{margin:0;color:var(--faint);font-size:.6875rem}
@media (max-width:520px){.ui-pop-head{grid-template-columns:auto minmax(0,1fr) auto}.ui-pop-head .state-pill{grid-column:2;grid-row:2;justify-self:start}.ui-pop-facts div{grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0}.ui-pop-note{display:none}}
.ui-cases{display:grid;margin:0;padding:0;list-style:none}
.ui-cases li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:11px 2px;border-top:1px solid var(--line)}
.ui-cases li:first-child{border-top:0}
.ui-cases small{grid-column:2/-1;color:var(--muted)}
.ui-cases time{color:var(--faint);font-size:.75rem}
.ui-tag{padding:2px 8px;border-radius:999px;background:color-mix(in oklab,var(--tone) 16%,transparent);color:var(--tone);font-size:.6875rem;font-weight:600}
.ui-teams{display:flex;gap:3px;height:10px}
.ui-teams span{border-radius:3px}
.ui-teams .w-26{flex:26}.ui-teams .w-15{flex:15}.ui-teams .w-12{flex:12}.ui-teams .w-9{flex:9}.ui-teams .w-38{flex:38}
.team-police{background:var(--blueberry)}.team-sheriff{background:var(--lemon)}.team-fire{background:var(--tangerine)}.team-dot{background:var(--lime)}.team-civ{background:var(--slate)}
.ui-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:.75rem}
.ui-legend li{display:inline-flex;align-items:center;gap:6px}
.ui-legend i{width:8px;height:8px;border-radius:2px}
.ui-line{display:flex;align-items:center;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted)}
.ui-line .icon{flex:none;color:var(--accent)}
.ui-line b{color:var(--ink)}
.ui-post{gap:10px}
.ui-post-author{display:flex;align-items:center;gap:8px}
.ui-post-author img{border-radius:50%;background:var(--surface)}
.ui-post-author small{color:var(--faint);font-size:.75rem}
.ui-app{padding:0 5px;border-radius:4px;background:var(--grape);color:#fff;font-size:.625rem;font-weight:700;line-height:1.5}
.ui-embed{display:grid;gap:8px;padding:12px 14px;border-left:3px solid var(--accent);border-radius:6px;background:var(--surface)}
.ui-embed b{font-size:.9375rem}
.ui-embed p{margin:0;color:var(--muted)}
.ui-embed dl{display:flex;flex-wrap:wrap;gap:6px 22px;margin:2px 0 0}
.ui-embed dt{color:var(--faint);font-size:.6875rem;font-weight:600}
.ui-embed dd{margin:0;font-weight:600}
.ui-join{justify-self:start;margin-top:4px;padding:6px 12px;border-radius:6px;background:var(--surface-2);font-weight:600}
.story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);padding-block:40px 96px}
.story p{max-width:460px}
.note-board{position:relative;padding:34px 36px 30px;border:1px solid var(--line);border-radius:var(--r-sm);background:light-dark(#fff8e1,#26231a);box-shadow:var(--shadow-md);rotate:-2deg;transition:rotate .5s var(--spring)}
.note-board:hover{rotate:0deg}
.note-board .tape{top:-12px}
.note-board h3{margin:12px 0 16px;font-size:2rem}
.note-board p{display:flex;align-items:center;gap:12px;margin:0;padding:11px 0;border-bottom:1px solid light-dark(#efe2bd,#3a3526);color:var(--ink);font-size:.9375rem}
.note-board p span{color:var(--good);font-weight:700}
.note-board p.scribble{border:0;padding-bottom:0;color:var(--accent);font:600 1.25rem var(--font-display);rotate:-2deg}
.handwritten{display:block;margin-top:20px;color:var(--muted);font:500 1rem var(--font-display);rotate:-2deg}
/* The closing banner: a 3D card (after a Uiverse.io card, MIT licence). The striped frame tilts on hover;
   the pink panel's words sit at different depths, and the jelly floats above the corner. */
.endnote{padding-block:40px 96px;perspective:1400px}
.endnote-card{position:relative;padding-top:48px;border:3px solid var(--block);background:
  linear-gradient(135deg,#0000 18.75%,var(--surface) 0 31.25%,#0000 0),
  repeating-linear-gradient(45deg,var(--surface) -6.25% 6.25%,var(--block) 0 18.75%);
  background-color:var(--surface);background-size:60px 60px;background-position:0 0,0 0;box-shadow:0 30px 30px -12px light-dark(rgb(90 80 70 / .3),rgb(0 0 0 / .6));transform-style:preserve-3d;transition:transform .6s ease-in-out,background-position .6s ease-in-out}
.endnote-content{padding:clamp(40px,6vw,64px) clamp(24px,4vw,48px) clamp(28px,4vw,40px);background:var(--accent);color:var(--accent-ink);transform-style:preserve-3d;transition:transform .6s ease-in-out}
.endnote h2{display:inline-block;margin:0;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem);color:var(--accent-ink);transform:translate3d(0,0,50px);transition:transform .5s ease-in-out}
.endnote-copy{max-width:520px;margin:12px 0 0;color:color-mix(in oklab,var(--accent-ink) 82%,transparent);font-weight:600;transform:translate3d(0,0,30px);transition:transform .5s ease-in-out}
.endnote .actions{margin-top:22px;transform:translate3d(0,0,20px);transition:transform .5s ease-in-out}
.endnote .button-frame{--frame:var(--accent-ink);--cover:var(--accent);color:var(--accent-ink)}
.endnote .button.ghost{border-color:color-mix(in oklab,var(--accent-ink) 55%,transparent);color:var(--accent-ink)}
.endnote .button.ghost:hover{background:color-mix(in oklab,var(--accent-ink) 12%,transparent)}
.endnote-badge{position:absolute;top:24px;right:30px;display:grid;place-items:center;width:84px;height:84px;border:1px solid var(--accent);background:var(--block);box-shadow:0 17px 10px -10px rgb(0 0 0 / .25);transform:translate3d(0,0,80px)}
.endnote-badge img{width:62px;height:62px;object-fit:contain}
.endnote-badge img.warden-logo{padding:6px;border-radius:10px}
.menu-symbol .warden-logo{width:20px;height:20px;padding:2px;border-radius:5px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .endnote-card:hover{background-position:-100px 100px,-100px 100px;transform:rotate3d(.5,1,0,10deg)}
  .endnote h2:hover,.endnote-copy:hover,.endnote .actions:hover{transform:translate3d(0,0,60px)}
}
.page-intro{padding-block:clamp(48px,6vw,80px) 40px}
.page-intro h1{margin:14px 0 18px;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.6rem);letter-spacing:-.018em}
.page-intro p{max-width:560px;font-size:1.0625rem}
.department-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;padding-bottom:64px}
.department-grid .panel{display:grid;gap:8px;align-content:start;padding:26px}
.department-grid .button{justify-self:start;margin-top:8px}
.guide-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);padding-bottom:80px}
.guide-layout aside{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;display:grid;gap:2px;padding-left:12px;border-left:1px solid var(--line)}
.aside-title{margin-bottom:8px;color:var(--ink);font-size:.8125rem;font-weight:600}
.guide-layout aside a{padding:6px 0;color:var(--muted);font-size:.875rem;transition:color .15s}
.guide-layout aside a:hover{color:var(--accent)}
.guide-content{display:grid;gap:0;max-width:820px;padding-bottom:80px}
.guide-layout .guide-content{padding-bottom:0}
.guide-content article{padding:30px 0;border-top:1px solid var(--line)}
.guide-content article:first-child{border-top:0;padding-top:4px}
.guide-content article>.eyebrow{margin-bottom:10px}
.guide-content h2{margin:0 0 12px;font-size:1.6rem}
.guide-content article>p:last-child{margin-bottom:0}
.callout{margin-top:18px;padding:14px 18px;border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--block);color:var(--ink);font-size:.9375rem}
/* Questions and answers (the field guide) */
.guide-content details{border-top:1px solid var(--line)}
.guide-content details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;font-weight:600;font-size:.9375rem}
.guide-content details>summary::after{content:"+";color:var(--accent);font-size:1.25rem;line-height:1;transition:rotate .25s var(--ease)}
.guide-content details[open]>summary::after{rotate:45deg}
.guide-content details>p{margin-top:0}
.plus-intro{text-align:center}

/* ---------- Account pages: sidebar and content ---------- */
.account-shell{display:grid;grid-template-columns:clamp(220px,17vw,272px) minmax(0,1fr);min-height:calc(100dvh - var(--header-h))}
.account-sidebar{position:sticky;top:var(--header-h);align-self:start;display:flex;flex-direction:column;gap:4px;height:calc(100dvh - var(--header-h));padding:18px 12px;border-right:1px solid var(--line);view-transition-name:account-sidebar}
.sidebar-person{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding:6px 8px 16px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.sidebar-person>span:last-child{display:grid;min-width:0}
.sidebar-person small{overflow:hidden;color:var(--faint);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}
.sidebar-person strong{font-size:.9375rem;line-height:1.3}
/* Jellyn staff: a verified badge after their name (js/account.js jellynVerifiedBadge), wherever names show. */
.verified-badge{display:inline-flex;flex:none;align-items:center;margin-left:.3em;color:var(--accent);line-height:0;vertical-align:-.12em}
.verified-badge svg{width:1em;height:1em;min-width:14px;min-height:14px}
.verified-badge .badge-fill{fill:currentColor;stroke:currentColor}
.verified-badge .badge-tick{stroke:var(--badge-tick,var(--accent-ink));stroke-width:2.6}
.profile-dropdown summary .verified-badge{margin-left:-4px}
.sidebar-avatar .profile-image,.sidebar-avatar .avatar{width:38px;height:38px}
.sidebar-avatar:empty{display:none}
.account-sidebar nav{display:grid;gap:1px}
.account-sidebar nav a,.sidebar-back{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-md);color:var(--muted);font-size:.875rem;font-weight:500;transition:background-color .15s,color .15s}
.account-sidebar nav a:hover,.sidebar-back:hover{background:var(--surface);color:var(--ink)}
.account-sidebar nav a[aria-current=page]{background:var(--block);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.account-sidebar nav a[aria-current=page] .icon{color:var(--accent)}
.sidebar-back{margin-top:auto}
/* The content grows with the screen; panels sit two across when there is room. */
.account-content{min-width:0;padding:30px var(--gutter) 56px;container:account/inline-size}
.account-content>*{max-width:1440px}
.account-page-heading{margin-bottom:22px}
.account-page-heading h1{margin:0;font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem)}
.account-page-heading p{margin:6px 0 0;font-size:.9375rem}
.account-content .wrap{width:100%}
.account-content .panel h2{font-size:1.125rem}
.account-stack{display:grid;gap:16px;align-items:start;padding-bottom:24px}
@container account (min-width:1040px){
  .account-content>.account-stack{grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}
  .account-content>.account-stack>:last-child:nth-child(odd){grid-column:1/-1}
  /* Your profile: who you are on the left, your records beside it */
  .account-content>.account-stack:has(>.profile-overview){grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
  .account-content>.account-stack>.profile-overview{position:sticky;top:calc(var(--header-h) + 24px);flex-direction:column;align-items:flex-start;text-align:left}
  .account-content>.account-stack>.profile-overview .profile-actions{flex-direction:column;align-items:flex-start;margin-left:0}
}
.account-stack label{display:block;margin-top:16px}
.account-stack label.preference-row{display:flex}
.account-stack label>:is(input:not([type=checkbox],[type=radio]),textarea){display:block;margin-top:7px}
.account-stack label>select{margin-top:7px}
.account-stack .button{margin-top:18px}
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;padding-bottom:64px}
.account-grid label{display:block;margin:16px 0 7px}
.account-grid form .button{margin-top:18px}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding-bottom:40px}
@container account (max-width:860px){.settings-layout{grid-template-columns:minmax(0,1fr)}}
.settings-layout aside{display:grid;gap:16px;align-content:start}
.settings-layout label{display:block;margin:16px 0 7px}
.settings-layout form .button{margin-top:18px}
.profile-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 16px}
.full-width{grid-column:1/-1}
.empty-module{display:grid;justify-items:start;gap:8px;padding:36px!important}
.empty-module h2{margin:6px 0 0!important}
.empty-module p{margin:0}
.lilac{background:var(--block)}
.quick-links{display:grid;margin-top:10px}
.quick-links a,.quick-links span[aria-disabled]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem;font-weight:500;transition:color .15s}
.quick-links a:hover{color:var(--accent)}
.notification-entry{display:flex;align-items:flex-start;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);transition:opacity .2s,transform .2s}
.notification-entry .notification-body{flex:1;min-width:0}
.notification-entry time{display:block;margin-top:4px;color:var(--muted);font-size:.75rem}
.notification-entry strong{font-size:.9375rem;font-weight:600}
.notification-entry.unread strong::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--accent);vertical-align:1px}
.notification-entry small{display:block;margin-top:4px;color:var(--muted);font-size:.75rem}
/* The words of a custom notification from the Jellyn team: in full on the page, two lines in the bell. */
.notification-entry small.notification-note{color:var(--ink);font-size:.8125rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.notification-preview-card small.notification-note{display:-webkit-box;overflow:hidden;color:var(--ink);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.danger{border-color:color-mix(in oklab,var(--bad) 45%,var(--line))}

/* ---------- Developer view: the panel, and previews of pages that are not open yet ---------- */
.dev-view{border-style:dashed;border-color:color-mix(in oklab,var(--grape) 45%,var(--line))}
.account-stack>.dev-view{grid-column:1/-1}
.dev-head h2{margin:0}
.dev-head p{margin:3px 0 0;font-size:.8125rem}
.dev-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;margin-top:14px}
.dev-links a{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);transition:border-color .15s}
.dev-links a:hover{border-color:var(--accent)}
.dev-links b{display:block;font-size:.875rem}
.dev-links small{display:block;color:var(--muted);font-size:.75rem}
.dev-banner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:18px;padding:10px 14px;border:1px dashed color-mix(in oklab,var(--grape) 50%,var(--line));border-radius:var(--r-lg);background:color-mix(in oklab,var(--grape) 8%,var(--block));color:var(--muted);font-size:.8125rem}
.dev-banner strong{color:var(--grape)}
.dev-banner a{margin-left:auto;color:var(--accent);font-weight:600}
.hero-note{display:block;margin-top:14px;color:var(--faint);font-size:.8125rem}
.plus-intro .actions{justify-content:center}
.plus-intro p{margin-inline:auto}
.plus-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:center;gap:24px 56px;margin-bottom:56px;padding:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--block)}
.plus-feature-links{display:grid}
.plus-feature-links>a,.plus-feature-links>span[aria-disabled]{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--accent);font:600 .8125rem var(--font-mono)}
.plus-feature-links>a:last-child{border:0}
.plus-feature-links strong{color:var(--ink);font:700 1.1rem var(--font-display)}
.plus-feature-links>a>span{grid-column:2;color:var(--muted);font:400 .875rem var(--font-ui)}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:center;gap:40px 80px;padding-block:24px 80px;scroll-margin-top:calc(var(--header-h) + 20px)}
.checklist{margin:18px 0;padding:0;list-style:none}
.checklist li{display:flex;gap:10px;margin:10px 0;color:var(--muted)}
.checklist li::before{content:"✓";color:var(--good);font-weight:700}
.paper{padding:28px;border:1px solid var(--line);border-radius:var(--r-sm);background:light-dark(#fff8e1,#26231a);box-shadow:var(--shadow-md);rotate:1.5deg}
.paper h3{font-size:1.6rem}
.timeline{margin:10px 0 18px;padding-left:18px;border-left:2px solid var(--line-2)}
.timeline p{margin:0 0 14px;color:var(--ink);font-size:.875rem}
.timeline b{color:var(--faint);font:500 .75rem var(--font-mono)}
.timeline small{color:var(--muted)}
.department{display:grid;align-content:start;gap:10px}
.department-number{color:var(--faint);font:500 .75rem var(--font-mono)}
.department h2{margin:0;font-size:1.4rem}
.department b{font-size:.9375rem}
.department p{margin:0}
.warden-logo{display:inline-block;width:28px;height:28px;padding:3px;border-radius:7px;background:light-dark(transparent,#f3f0ea);object-fit:contain;vertical-align:middle}
.warden-logo-hero{display:block;width:84px;height:84px;margin-bottom:10px;padding:10px;border-radius:18px}
.warden-preview{rotate:1.5deg;box-shadow:var(--shadow-md)}
.warden-preview .panel-head strong{display:flex;align-items:center;gap:8px;font:600 .75rem var(--font-mono);letter-spacing:.08em}
.warden-call{margin:18px 0 10px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.warden-call h2{margin:4px 0}
.warden-unit{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.warden-unit .avatar{width:40px;height:40px;font-size:.6875rem}
.warden-unit strong{display:block;font-size:.875rem}
.warden-unit small{color:var(--muted);font-size:.75rem}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.tool-card{display:grid;align-content:start;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--block)}
.tool-card h3{margin:6px 0 0}
.tool-card p{margin:0}
.card-number{color:var(--faint);font:500 .6875rem var(--font-mono);letter-spacing:.08em}

/* Developer or user: which one you see the site as */
:root:not([data-dev-view=dev]) .dev-link{display:none!important}
:root[data-dev-view=dev] [data-preview]{display:none!important}
/* Departments and Warden are hidden from everyone but developers (who see their previews). */
[data-hidden-soon]{display:none!important}
:root[data-dev-view=user] .dev-links{display:none}
.dev-tag{padding:0 7px;border-radius:999px;background:color-mix(in oklab,var(--grape) 16%,transparent);color:var(--grape);font-size:.625rem;font-weight:700;line-height:1.7;white-space:nowrap}
.mega-grid .dev-tag{grid-column:2;justify-self:start;margin-top:6px}
.dev-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.dev-modes{display:inline-flex;flex:none;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.dev-modes button{margin:0;padding:5px 11px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:.8125rem;font-weight:600;cursor:pointer}
.dev-modes button:hover{color:var(--ink)}
.dev-modes button[aria-pressed=true]{background:var(--block);color:var(--grape);box-shadow:0 0 0 1px var(--line)}
.profile-dropdown>div>.dev-switch{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border:0;border-radius:var(--r-md);background:none;color:var(--ink);font-size:.875rem;font-weight:500;text-align:left;cursor:pointer}
.dev-switch:hover{background:var(--surface)}
.dev-switch .icon{width:16px;height:16px;color:var(--grape)}
.dev-switch .switch{position:relative;width:30px;height:18px;margin-left:auto;border-radius:999px;background:var(--line-2);transition:background-color .2s}
.dev-switch .switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .3);transition:translate .25s var(--spring)}
.dev-switch[aria-checked=true] .switch{background:var(--grape)}
.dev-switch[aria-checked=true] .switch::after{translate:12px 0}

/* "Start today": the button leans toward the pointer and its words jump out above it
   (after a Uiverse.io button, MIT licence). The six zones of the original are worked out from the pointer. */
/* Room above the button for its words to rise into */
.buy-wrap{display:flex;justify-content:center;margin:76px 0 4px}
.buy-button{--rx:0deg;--ry:0deg;--sx:0px;--sy:0px;position:relative;isolation:isolate;width:180px;height:52px;margin:0;padding:0;border:3px solid var(--accent);border-radius:12px;background:transparent;color:var(--accent-ink);font:900 1.05rem var(--font-ui);cursor:pointer;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--sx) var(--sy) 0 color-mix(in oklab,var(--ink) 45%,transparent);transition:transform .3s ease-in-out,box-shadow .3s ease-in-out,scale .45s var(--spring)}
/* The fill is two doors. Opening, they fold away to the sides; closing, they wait for the words to land, then shut. */
.buy-button::before,.buy-button::after{content:"";position:absolute;top:0;bottom:0;z-index:-1;background:var(--accent);transition:scale .32s cubic-bezier(.55,0,.8,.2) .22s}
.buy-button::before{left:0;right:50%;border-radius:9px 0 0 9px;transform-origin:left}
.buy-button::after{left:50%;right:0;border-radius:0 9px 9px 0;transform-origin:right}
/* Closing: the words drop back to their usual height and settle with a small bounce. */
.buy-button span{position:absolute;top:50%;left:50%;translate:-50% -50%;scale:1;white-space:nowrap;transition:translate .65s cubic-bezier(.3,1.5,.5,1),scale .65s cubic-bezier(.3,1.5,.5,1),color .2s ease .2s,text-shadow .3s}
.buy-button:is(:hover,:focus-visible){scale:1.05}
.buy-button:is(:hover,:focus-visible)::before,.buy-button:is(:hover,:focus-visible)::after{scale:0 1;transition:scale .5s cubic-bezier(.16,1,.3,1)}
/* Opening: the words spring up above the button, overshoot a little, then give their little shake. */
.buy-button:is(:hover,:focus-visible) span{translate:-50% calc(-50% - 3.6em);scale:1.9;color:var(--accent);text-shadow:var(--sx) var(--sy) 0 color-mix(in oklab,var(--ink) 45%,transparent);transition:translate .8s var(--spring),scale .8s var(--spring),color .12s,text-shadow .3s;animation:buy-shake .5s ease-in-out .75s}
.buy-button:active{scale:.95}
@keyframes buy-shake{0%{left:45%}25%{left:54%}50%{left:48%}75%{left:52%}100%{left:50%}}
@media (prefers-reduced-motion:reduce){.buy-button,.buy-button span,.buy-button::before,.buy-button::after{transition:none!important;animation:none!important}}

/* ---------- Loading screen: shows only when a page takes a moment (it fades in after 350 ms) ---------- */
/* Skeletons: the shape of what is coming while a page waits for its data (data-wait on <body>, js/script.js).
   They show after a moment, so a quick load does not flash them. */
.skel{display:block;position:relative;overflow:hidden;border-radius:8px;background:color-mix(in oklab,var(--ink) 8%,transparent)}
.skel::after{content:"";position:absolute;inset:0;translate:-100% 0;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ink) 7%,transparent),transparent);animation:skel-sweep 1.5s ease-in-out infinite}
@keyframes skel-sweep{to{translate:100% 0}}
@keyframes skel-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
/* The loading screen: only when a page does not get ready, cannot load, or while files upload (js/script.js). */
.page-loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--paper);pointer-events:auto;opacity:0;animation:loader-in .3s ease forwards}
.page-loader.done{animation:loader-in .3s ease forwards,loader-out .3s ease forwards}
.page-loader .text-link{font-size:.8125rem}
.page-loader p{margin:0;color:var(--muted);font:500 .8125rem var(--font-mono);letter-spacing:.08em}
.loader-art{overflow:visible}
@keyframes loader-in{to{opacity:1}}
@keyframes loader-out{to{opacity:0;visibility:hidden}}
/* The drawing (after a Uiverse.io loader, MIT licence): the node bobs and sparks rise from it */
.loader-line-1,.loader-line-2,.loader-node,.loader-panel,.loader-beams{animation:loader-bob 3s ease-in-out infinite alternate}
.loader-line-2{animation-delay:.2s}
.loader-node,.loader-panel,.loader-beams{animation-delay:.4s}
.loader-particles{animation:loader-bob 3s ease-in-out .4s infinite alternate,loader-fade 5s infinite alternate}
.loader-particle{animation:loader-float linear infinite}
.loader-particle.p1{animation-duration:2.2s}
.loader-particle.p2{animation-duration:2.5s;animation-delay:.3s}
.loader-particle.p3{animation-duration:2s;animation-delay:.6s}
.loader-particle.p4{animation-duration:2.8s;animation-delay:.2s}
.loader-particle.p5{animation-duration:2.3s;animation-delay:.4s}
.loader-particle.p6{animation-duration:3s;animation-delay:.1s}
.loader-particle.p7{animation-duration:2.1s;animation-delay:.5s}
.loader-particle.p8{animation-duration:2.6s;animation-delay:.2s}
.loader-particle.p9{animation-duration:2.4s;animation-delay:.3s}
@keyframes loader-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes loader-fade{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes loader-float{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.loader-art *{animation:none!important}}

/* ---------- The footer's Jellyn card: the jelly in stacked circles, and links to Jellyn's Discord and YouTube.
   After a Uiverse.io card (MIT licence), in Jellyn's pink. ---------- */
.social-card-wrap{width:min(290px,100%);height:330px;perspective:1000px}
.social-card{position:relative;height:100%;border-radius:50px;background:linear-gradient(135deg,#ff8fae 0%,#d2235a 100%);box-shadow:rgb(90 10 40 / 0) 40px 50px 25px -40px,rgb(90 10 40 / .22) 0 25px 25px -5px;transform-style:preserve-3d;transition:all .5s ease-in-out}
.sc-glass{position:absolute;inset:8px;border-left:1px solid #fff;border-bottom:1px solid #fff;border-radius:55px;border-top-right-radius:100%;background:linear-gradient(0deg,rgb(255 255 255 / .35) 0%,rgb(255 255 255 / .82) 100%);transform:translate3d(0,0,25px);transform-style:preserve-3d;transition:all .5s ease-in-out}
.sc-content{position:relative;padding:150px 36px 0 30px;transform:translate3d(0,0,26px)}
.sc-title{display:block;color:#8f1340;font:800 1.45rem/1 var(--font-display);letter-spacing:-.05em}
.sc-text{display:block;margin-top:14px;color:rgb(143 19 64 / .8);font-size:.8125rem;line-height:1.45}
.sc-bottom{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;transform:translate3d(0,0,26px);transform-style:preserve-3d}
.sc-socials{display:flex;gap:10px;transform-style:preserve-3d}
.sc-social{display:grid;place-content:center;width:34px;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:rgb(90 10 40 / .5) 0 7px 5px -5px}
.sc-social svg{width:16px;height:16px;fill:#8f1340}
.sc-social:first-child{transition:transform .2s ease-in-out .4s,box-shadow .2s ease-in-out .4s,background-color .2s}
.sc-social:nth-child(2){transition:transform .2s ease-in-out .6s,box-shadow .2s ease-in-out .6s,background-color .2s}
.sc-social:hover{background:#1b1916}
.sc-social:hover svg{fill:#fff}
.sc-more{display:inline-flex;align-items:center;gap:3px;margin-left:auto;color:#b81b4e;font-size:.8125rem;font-weight:800;transition:transform .2s ease-in-out}
.sc-more:hover{transform:translate3d(0,0,10px)}
.sc-more svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc-logo{position:absolute;top:0;right:0;transform-style:preserve-3d}
.sc-circle{position:absolute;top:0;right:0;display:block;aspect-ratio:1;border-radius:50%;background:rgb(255 210 225 / .25);box-shadow:rgb(100 30 60 / .2) -10px 10px 20px 0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .5s ease-in-out}
.sc-circle.c1{top:8px;right:8px;width:170px;transform:translate3d(0,0,20px)}
.sc-circle.c2{top:10px;right:10px;width:140px;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);transform:translate3d(0,0,40px);transition-delay:.4s}
.sc-circle.c3{top:17px;right:17px;width:110px;transform:translate3d(0,0,60px);transition-delay:.8s}
.sc-circle.c4{top:23px;right:23px;width:80px;transform:translate3d(0,0,80px);transition-delay:1.2s}
.sc-circle.c5{top:30px;right:30px;display:grid;place-content:center;width:50px;transform:translate3d(0,0,100px);transition-delay:1.6s}
.sc-circle.c5 img{width:32px;height:32px;object-fit:contain}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .social-card-wrap:hover .social-card{transform:rotate3d(1,1,0,30deg);box-shadow:rgb(90 10 40 / .3) 30px 50px 25px -40px,rgb(90 10 40 / .1) 0 25px 30px 0}
  .social-card-wrap:hover .sc-social{transform:translate3d(0,0,50px);box-shadow:rgb(90 10 40 / .2) -5px 20px 10px 0}
  .social-card-wrap:hover .sc-circle.c2{transform:translate3d(0,0,60px)}
  .social-card-wrap:hover .sc-circle.c3{transform:translate3d(0,0,80px)}
  .social-card-wrap:hover .sc-circle.c4{transform:translate3d(0,0,100px)}
  .social-card-wrap:hover .sc-circle.c5{transform:translate3d(0,0,120px)}
}
/* The one-line app footer gets the same links, small */
.app-socials{display:inline-flex;gap:6px;margin-left:auto}
.app-social{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--faint);transition:color .15s,background-color .15s}
.app-social:hover{background:var(--surface);color:var(--accent)}
.app-social svg{width:14px;height:14px;fill:currentColor}

/* ---------- Toasts: an action that failed says so in the corner too ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:95;display:grid;gap:8px;width:min(340px,100vw - 32px);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-lg);pointer-events:auto;animation:toast-in .35s var(--ease)}
.toast.leaving{animation:toast-out .25s ease forwards}
.toast-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-md);background:color-mix(in oklab,var(--tone,var(--bad)) 12%,transparent);color:var(--tone,var(--bad))}
.toast.error{--tone:var(--bad)}
.toast.success{--tone:var(--good)}
.toast.info{--tone:var(--info)}
.toast-text{flex:1;min-width:0;font-size:.8125rem;line-height:1.35}
.toast-text p{margin:0;overflow-wrap:anywhere}
.toast-text p:first-child{color:var(--ink);font-weight:600}
.toast-close{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--faint);cursor:pointer;transition:background-color .15s,color .15s}
.toast-close:hover{background:var(--surface);color:var(--ink)}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}

/* ---------- In-game alerts (js/account.js): top right for 10 seconds, then into the bell ---------- */
.game-alerts{position:fixed;top:calc(var(--header-h) + 12px);right:16px;z-index:96;display:grid;gap:8px;width:min(360px,100vw - 32px);pointer-events:none}
.game-alert{position:relative;display:flex;align-items:center;gap:2px;padding:6px 6px 9px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-lg);overflow:hidden;pointer-events:auto;animation:alert-in .4s var(--ease)}
.game-alert.leaving{animation:toast-out .25s ease forwards}
.game-alert-open{display:flex;align-items:center;gap:11px;flex:1;min-width:0;margin:0;padding:6px;border:0;border-radius:var(--r-md);background:none;text-align:left;transition:background-color .15s}
.game-alert-open:hover{background:var(--surface)}
.game-alert-icon,.alert-dialog-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent)}
.game-alert-icon .icon{width:18px;height:18px}
.game-alert-text{display:grid;gap:1px;min-width:0;font-size:.8125rem;line-height:1.35}
.game-alert-text strong{font-weight:600}
.game-alert-text span{color:var(--accent);font-weight:600}
.game-alert-close,.alert-dialog-close{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--faint);transition:background-color .15s,color .15s}
.game-alert-close:hover,.alert-dialog-close:hover{background:var(--surface);color:var(--ink)}
.game-alert-time{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform-origin:left;animation:alert-time 10s linear forwards}
.game-alert:is(:hover,:focus-within) .game-alert-time{animation-play-state:paused}
.notification-link.ringing .icon{transform-origin:50% 2px;animation:bell-ring .7s var(--ease)}
@keyframes alert-in{from{opacity:0;transform:translateX(24px)}}
@keyframes alert-time{to{transform:scaleX(0)}}
@keyframes bell-ring{20%{rotate:14deg}40%{rotate:-11deg}60%{rotate:7deg}80%{rotate:-3deg}}
/* The details: who viewed you, the command, where they were, the server and when */
.alert-dialog{width:min(460px,100% - 28px);padding:0;overflow:hidden}
.alert-dialog-head{display:flex;align-items:flex-start;gap:12px;padding:18px 16px 14px 18px}
.alert-dialog-icon{width:40px;height:40px}
.alert-dialog-head>div{flex:1;min-width:0}
.alert-dialog-head h2{margin:0;font-size:1.125rem;line-height:1.3;overflow-wrap:anywhere}
.alert-dialog-head time{display:block;margin-top:2px;color:var(--muted);font-size:.8125rem}
.alert-person{display:flex;align-items:center;gap:12px;margin:0 18px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.alert-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-2);color:var(--muted);font-size:.8125rem;font-weight:700;object-fit:cover}
.alert-who{display:grid;gap:6px;flex:1;min-width:0}
.alert-who strong{font-size:.9375rem;overflow-wrap:anywhere}
.alert-chips{display:flex;flex-wrap:wrap;gap:5px}
.alert-profile{display:inline-flex;align-items:center;gap:5px;flex:none;color:var(--accent);font-size:.8125rem;font-weight:600}
.alert-profile .icon{width:14px;height:14px}
.alert-facts{display:grid;margin:8px 18px 0}
.alert-facts>div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.alert-facts>div:last-child{border-bottom:0}
.alert-facts dt{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8125rem}
.alert-facts dt .icon{width:15px;height:15px;color:var(--faint)}
.alert-facts dd{margin:0;font-size:.875rem;overflow-wrap:anywhere}
.alert-facts dd small{display:block;margin-top:2px;color:var(--muted);font-size:.75rem}
.alert-facts code{padding:2px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.alert-help{margin:0;padding:12px 18px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.5}
@media (max-width:480px){.alert-facts>div{grid-template-columns:1fr;gap:3px}.alert-person{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.game-alert{animation:none}.notification-link.ringing .icon{animation:none}}
/* An urgent notification (js/account.js, showUrgent): a hard-edged warning card in the middle of the page, black on
   white in both themes so it cannot be missed. "Urgent" also tags it in the bell and the lists. */
.urgent-tag{display:inline-block;justify-self:start;width:max-content;margin-bottom:3px;padding:1px 7px;border:2px solid #000;background:#fff;color:#000;font-size:.625rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:2px 2px 0 #000}
dialog.urgent-dialog{width:min(330px,100% - 42px);max-width:none;padding:0;border:0;border-radius:0;outline:none;background:none;box-shadow:none;overflow:visible}
dialog.urgent-dialog::before,dialog.urgent-dialog::after{content:none}
dialog.urgent-dialog::backdrop{background:rgb(0 0 0 / .5);-webkit-backdrop-filter:none;backdrop-filter:none}
.brutalist-card{padding:1.5rem;border:4px solid #000;background:#fff;color:#000;box-shadow:10px 10px 0 #000;font-family:Arial,Helvetica,sans-serif}
.brutalist-card__header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #000}
.brutalist-card__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:.5rem;background:#000}
.brutalist-card__icon svg{width:1.5rem;height:1.5rem;fill:#fff}
.brutalist-card__alert{color:#000;font-size:1.5rem;font-weight:900;text-transform:uppercase}
.brutalist-card__message{display:grid;gap:.4rem;margin-top:1rem;padding-bottom:1rem;border-bottom:2px solid #000;color:#000;font-size:.9rem;font-weight:600;line-height:1.4}
.brutalist-card__message strong{font-size:1rem;font-weight:900;overflow-wrap:anywhere}
.brutalist-card__message p{margin:0;color:#000;overflow-wrap:anywhere}
.brutalist-card__message small{color:#444;font-size:.75rem;font-weight:700;text-transform:uppercase}
.brutalist-card__link{justify-self:start;color:#296fbb;font-weight:900;text-decoration:underline}
.brutalist-card__actions{margin-top:1rem}
.brutalist-card__button{position:relative;display:block;width:100%;margin:0 0 1rem;padding:.75rem;overflow:hidden;border:3px solid #000;border-radius:0;background:#fff;color:#000;font:700 1rem Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;text-transform:uppercase;box-shadow:5px 5px 0 #000;cursor:pointer;transition:all .2s ease}
.brutalist-card__button:last-child{margin-bottom:0}
.brutalist-card__button--read{background:#000;color:#fff}
.brutalist-card__button::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgb(255 255 255 / .3),transparent);transition:all .6s}
.brutalist-card__button:is(:hover,:focus-visible)::before{left:100%}
.brutalist-card__button:is(:hover,:focus-visible){outline:none;transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.brutalist-card__button--mark:is(:hover,:focus-visible){border-color:#296fbb;background:#296fbb;color:#fff;box-shadow:7px 7px 0 #004280}
.brutalist-card__button--read:is(:hover,:focus-visible){border-color:#f00;background:#f00;color:#fff;box-shadow:7px 7px 0 #800000}
.brutalist-card__button:active{transform:translate(5px,5px);box-shadow:none}
.brutalist-card__button:disabled{cursor:wait;opacity:.7}
.notification-entry.urgent,.notification-preview-card.urgent{box-shadow:inset 4px 0 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.brutalist-card__button,.brutalist-card__button::before{transition:none}}

/* A notification that opens its details */
button.notification-body{display:block;margin:0;padding:0;border:0;background:none;text-align:left}
.notification-preview-card small{display:block;margin-top:2px;color:var(--muted);font-size:.75rem}

/* ---------- Motion ---------- */
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes fade-in{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation-duration:.15s}
  ::view-transition-new(root){animation-duration:.22s}
  main>*:not(.panel-app){animation:rise .45s var(--ease) both}
  .hero-copy>*{animation:rise .6s var(--ease) both}
  .hero-copy>:nth-child(2){animation-delay:.05s}.hero-copy>:nth-child(3){animation-delay:.1s}.hero-copy>:nth-child(4){animation-delay:.15s}.hero-copy>:nth-child(5){animation-delay:.2s}
  .note-card{animation:drop .7s var(--ease) both}
  .note-card+.note-card{animation-delay:.12s}
  /* Sections fade up as they scroll into view, where the browser can drive it from scrolling. */
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .feature,.tour-row,.story>*,.guide-content article{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes drop{from{opacity:0;transform:translateY(-16px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-mascot{animation:none}
  .brand:hover .brand-logo{animation:none}
  :where(*){transition-duration:.01ms!important}
}

/* ---------- Smaller screens ---------- */
@media (max-width:1180px){
  .search-launch span,.search-launch kbd{display:none}
  .search-launch{width:36px;padding:0;justify-content:center}
  .main-nav>a,.main-nav>span[aria-disabled],.nav-menu>summary{padding:0 8px}
}
@media (max-width:980px){
  .account-actions .menu-toggle{display:inline-grid}
  .main-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px var(--gutter) 14px;border-bottom:1px solid var(--line);background:var(--block);box-shadow:var(--shadow-lg);max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .main-nav.open{display:flex;animation:pop-in .18s var(--ease)}
  .main-nav>a,.main-nav>span[aria-disabled],.nav-menu>summary{height:44px;justify-content:space-between;font-size:.9375rem}
  .main-nav>a[aria-current=page]{box-shadow:inset 2px 0 0 var(--accent);border-radius:0 8px 8px 0}
  .mega-menu{position:static;width:auto;margin:2px 0 8px;box-shadow:none;background:var(--surface)}
  .mega-grid{grid-template-columns:1fr}
  .account-actions{margin-left:auto}
  .hero{grid-template-columns:1fr}
  .hero-visual{min-height:380px}
  .story{grid-template-columns:1fr}
  .tour-row{grid-template-columns:1fr}
  .tour-row:nth-of-type(even) .tour-words{order:0}
  .guide-layout{grid-template-columns:1fr}
  .guide-layout aside{position:static;display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 0 14px;border:0;border-bottom:1px solid var(--line)}
  .aside-title{width:100%}
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px}
  .footer-about{grid-column:1/-1}
  .account-shell{grid-template-columns:1fr}
  .account-sidebar{position:static;height:auto;flex-direction:row;align-items:center;padding:8px var(--gutter);border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .sidebar-person,.sidebar-back{display:none}
  .account-sidebar nav{display:flex;gap:4px}
  .account-sidebar nav a{white-space:nowrap}
  .settings-layout{grid-template-columns:1fr}
  .endnote-badge{width:64px;height:64px;right:16px}
  .endnote-badge img{width:46px;height:46px}
}
@media (max-width:640px){
  .brand-word{display:none}
  .header-inner{gap:8px}
  .profile-dropdown summary>span{display:none}
  .profile-dropdown summary{padding:0 3px}
  .hero-visual{min-height:340px}
  .hero-mascot{right:0}
  .note-card+.note-card{margin-left:18%}
  .feature{padding:22px}
  .guide-content article{padding:24px 0}
  .account-content{padding-top:22px}
  .panel{padding:18px}
  .empty-module{padding:24px!important}
}

/* ---------- Delete with undo (js/fuse.js), after React Bits' FuseButton ---------- */
/* The button becomes "Undo" while a fuse burns around its rim; the delete happens when it runs out. */
.fuse-button{--fb-ink:var(--ink);--fb-bg:var(--surface);--fb-fuse:var(--accent);--fb-h:30px;--fb-fs:.8125rem;--fb-px:12px;--fb-fade:200ms;position:relative;display:inline-grid;grid-template-columns:minmax(0,1fr);height:var(--fb-h);border-radius:999px;background:var(--fb-bg);color:var(--fb-ink);font-size:var(--fb-fs);font-weight:600;line-height:1;vertical-align:middle;overflow:hidden;isolation:isolate;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .16s var(--ease),background-color .2s ease,color .2s ease}
.fuse-button.fuse-md{--fb-h:40px;--fb-fs:.875rem;--fb-px:18px}
.fuse-button.fuse-lg{--fb-h:48px;--fb-fs:.9375rem;--fb-px:22px}
.fuse-button.fuse-danger{--fb-ink:var(--stop);--fb-bg:color-mix(in oklab,var(--stop) 9%,var(--block));--fb-fuse:var(--stop)}
.fuse-button.fuse-danger:is([data-phase=armed],[data-phase=settled]){--fb-ink:var(--ink);--fb-bg:var(--surface)}
.fuse-button[data-pressed]{transform:scale(.97)}
.fuse-button:has(:focus-visible){outline:2px solid color-mix(in oklab,var(--fb-fuse) 70%,transparent);outline-offset:3px}
.fuse-button__face{position:relative;grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:100%;min-width:0;margin:0;padding:0 var(--fb-px);border:0;background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;opacity:0;filter:blur(2px);visibility:hidden;transition:opacity var(--fb-fade) ease,filter var(--fb-fade) ease,visibility 0s linear var(--fb-fade),background-color .16s ease}
.fuse-button[data-phase=idle] .fuse-button__idle,.fuse-button[data-phase=armed] .fuse-button__undo,.fuse-button[data-phase=settled] .fuse-button__settled{opacity:1;filter:blur(0);visibility:visible;transition-delay:0s}
.fuse-button[data-instant] .fuse-button__face,.fuse-button[data-instant] .fuse-button__rim{transition-duration:0s}
.fuse-button__idle:focus-visible,.fuse-button__undo:focus-visible{outline:none}
.fuse-button__idle:disabled,.fuse-button__settled{cursor:default}
.fuse-button[data-phase=idle]:has(.fuse-button__idle:disabled){opacity:.55}
.fuse-button__icon{display:inline-flex;flex:none}
.fuse-button__icon--undo{transform:rotate(-70deg);transition:transform var(--fb-fade) var(--ease)}
.fuse-button[data-phase=armed] .fuse-button__icon--undo{transform:rotate(0)}
.fuse-button__fuse{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--fb-fuse);transform-origin:left center;pointer-events:none}
.fuse-button[data-fuse=top] .fuse-button__fuse{top:0;bottom:auto}
.fuse-button__rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity var(--fb-fade) ease}
.fuse-button[data-phase=armed] .fuse-button__rim{opacity:1}
.fuse-button__rim rect{fill:none;stroke:var(--fb-fuse);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1}
.fuse-button__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.fuse-button__idle:not(:disabled):hover,.fuse-button__undo:hover{background:color-mix(in oklab,var(--fb-ink) 8%,transparent)}}
@media (prefers-reduced-motion:reduce){.fuse-button[data-pressed]{transform:none}.fuse-button .fuse-button__face{filter:none;transition:opacity var(--fb-fade) ease,visibility 0s linear var(--fb-fade)}.fuse-button .fuse-button__icon--undo{transform:none;transition:none}}
@media (prefers-contrast:more){.fuse-button{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--fb-ink) 40%,transparent)}}
@media (forced-colors:active){.fuse-button__fuse{background:Highlight}.fuse-button__rim rect{stroke:Highlight}}
/* A row that is going away fades while its fuse burns. */
.fuse-leaving{opacity:.55;transition:opacity .2s ease}
.fuse-leaving .fuse-button{opacity:1}

/* ---------- Unsaved changes (js/unsaved.js) ---------- */
/* Settings save from one bar at the bottom; it shakes when a link is clicked before saving. */
.unsaved-bar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:96;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;width:min(720px,calc(100vw - 32px));padding:10px 10px 10px 18px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--block);box-shadow:var(--shadow-lg);opacity:1;translate:-50% 0;transition:translate .45s var(--spring),opacity .2s ease,background-color .2s ease,border-color .2s ease,display .45s;transition-behavior:allow-discrete}
@starting-style{.unsaved-bar{opacity:0;translate:-50% 130%}}
.unsaved-bar[hidden]{display:none;opacity:0;translate:-50% 130%}
.unsaved-text{flex:1 1 220px;margin:0;color:var(--ink);font-size:.875rem;font-weight:600}
.unsaved-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.unsaved-reset{margin:0;padding:8px 12px;border:0;border-radius:var(--r-md);background:none;color:var(--muted);font-size:.8125rem;font-weight:600;cursor:pointer}
.unsaved-reset:hover:not(:disabled){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.unsaved-save{min-height:36px;margin:0;padding:8px 16px;border:0;border-radius:var(--r-md);background:var(--go);color:var(--go-ink);font-size:.8125rem;font-weight:700;cursor:pointer;transition:background-color .15s,transform .1s}
.unsaved-save:hover:not(:disabled){background:color-mix(in oklab,var(--go) 86%,var(--ink))}
.unsaved-save:active:not(:disabled){transform:translateY(1px)}
.unsaved-bar button:disabled{opacity:.6;cursor:progress}
.unsaved-bar.failed{border-color:color-mix(in oklab,var(--stop) 60%,var(--line));background:color-mix(in oklab,var(--stop) 9%,var(--block))}
.unsaved-bar.failed .unsaved-text{color:var(--stop)}
.unsaved-bar.saved .unsaved-text{color:var(--good)}
.unsaved-bar.nudge{animation:unsaved-nudge .45s var(--ease)}
@keyframes unsaved-nudge{20%{translate:calc(-50% - 10px) 0}40%{translate:calc(-50% + 9px) 0}60%{translate:calc(-50% - 6px) 0}80%{translate:calc(-50% + 4px) 0}}
body.has-unsaved{padding-bottom:88px}
@media (max-width:560px){.unsaved-bar{padding:12px}.unsaved-actions{width:100%}.unsaved-actions button{flex:1}}
@media (prefers-reduced-motion:reduce){.unsaved-bar{transition:opacity .15s ease,display .15s;transition-behavior:allow-discrete}@starting-style{.unsaved-bar{translate:-50% 0}}.unsaved-bar[hidden]{translate:-50% 0}.unsaved-bar.nudge{animation:none}}

/* ---------- Search select (js/combobox.js): Roblox players, ER:LC vehicles ---------- */
.combo{position:relative;width:100%}
.combo-popup{position:fixed;z-index:60;padding:6px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--block);box-shadow:var(--shadow-lg);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.combo-popup[hidden],.combo-list[hidden],.combo-status[hidden]{display:none}
.combo-status{margin:0;padding:10px;color:var(--muted);font-size:.8125rem;font-weight:500}
.combo-group+.combo-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.combo-heading{padding:6px 10px 4px;color:var(--faint);font-size:.75rem;font-weight:600}
.combo-option{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);cursor:pointer}
.combo-option:hover,.combo-option[aria-selected=true]{background:var(--surface)}
.combo-option[aria-selected=true]{box-shadow:inset 2px 0 0 var(--accent)}
.combo-face{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:700}
.combo-face img{width:100%;height:100%;object-fit:cover}
.combo-words{display:grid;min-width:0}
.combo-label{overflow:hidden;font-size:.875rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.combo-detail{overflow:hidden;color:var(--muted);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}
@media (forced-colors:active){.combo-option[aria-selected=true]{outline:2px solid Highlight}}
.account-stack label>.combo{margin-top:7px}

/* ---------- Folder (js/folder.js): adapted from React Bits' Folder (reactbits.dev, MIT licence) ---------- */
.folder-wrap{--folder-scale:1;display:grid;place-items:end center;width:calc(150px * var(--folder-scale));height:calc(150px * var(--folder-scale));padding-bottom:calc(8px * var(--folder-scale))}
.folder{--folder-back-color:color-mix(in oklab,var(--folder-color) 88%,black);--paper-1:#e6e6e6;--paper-2:#f2f2f2;--paper-3:#ffffff;display:block;margin:0;padding:0;border:0;background:none;transform:scale(var(--folder-scale));transform-origin:bottom center;cursor:pointer;transition:translate .2s ease-in}
.folder:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:10px}
.folder:not(.open):hover{translate:0 -8px}
.folder:not(.open):hover .paper{transform:translate(-50%,0%)}
.folder:not(.open):hover .folder__front{transform:skew(15deg) scaleY(.6)}
.folder:not(.open):hover .right{transform:skew(-15deg) scaleY(.6)}
.folder.open{translate:0 -8px}
.folder.open .paper:nth-child(1){transform:translate(calc(-120% + var(--magnet-x,0px)),calc(-70% + var(--magnet-y,0px))) rotateZ(-15deg)}
.folder.open .paper:nth-child(1):hover{transform:translate(calc(-120% + var(--magnet-x,0px)),calc(-70% + var(--magnet-y,0px))) rotateZ(-15deg) scale(1.1)}
.folder.open .paper:nth-child(2){height:80%;transform:translate(calc(10% + var(--magnet-x,0px)),calc(-70% + var(--magnet-y,0px))) rotateZ(15deg)}
.folder.open .paper:nth-child(2):hover{transform:translate(calc(10% + var(--magnet-x,0px)),calc(-70% + var(--magnet-y,0px))) rotateZ(15deg) scale(1.1)}
.folder.open .paper:nth-child(3){height:80%;transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-100% + var(--magnet-y,0px))) rotateZ(5deg)}
.folder.open .paper:nth-child(3):hover{transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-100% + var(--magnet-y,0px))) rotateZ(5deg) scale(1.1)}
.folder.open .folder__front{transform:skew(15deg) scaleY(.6)}
.folder.open .right{transform:skew(-15deg) scaleY(.6)}
.folder__back{position:relative;display:block;width:100px;height:80px;border-radius:0 10px 10px 10px;background:var(--folder-back-color)}
.folder__back::after{content:"";position:absolute;bottom:98%;left:0;z-index:0;width:30px;height:10px;border-radius:5px 5px 0 0;background:var(--folder-back-color)}
/* (The papers in a folder. Named with the folder, so the note card on the product page, also .paper, is left alone.) */
.folder .paper{position:absolute;bottom:10%;left:50%;z-index:2;display:grid;place-items:center;width:70%;height:80%;padding:4px;border-radius:10px;background:var(--paper-1);color:#1b1916;transform:translate(-50%,10%);transition:transform .3s ease-in-out,height .3s ease-in-out}
.folder .paper:nth-child(2){width:80%;height:70%;background:var(--paper-2)}
.folder .paper:nth-child(3){width:90%;height:60%;background:var(--paper-3)}
.paper__text{font:700 7px/1.15 var(--font-ui);text-align:center;opacity:0;transition:opacity .2s}
.folder.open .paper__text{opacity:1}
.folder__front{position:absolute;inset:0;z-index:3;border-radius:5px 10px 10px 10px;background:var(--folder-color);transform-origin:bottom;transition:transform .3s ease-in-out}
@media (prefers-reduced-motion:reduce){.folder,.paper,.folder__front,.paper__text{transition:none}.folder:not(.open):hover{translate:none}}

/* New notifications while the site is open (js/account.js): in from the side, back out after six seconds. */
.notif-toast{animation:notif-in .4s var(--ease)}
.notif-toast.leaving{animation:notif-out .38s ease forwards}
.notif-toast .game-alert-time{animation-duration:6s}
.notif-toast .game-alert-open{color:inherit;text-decoration:none}
.notif-toast .game-alert-text span{color:var(--muted);font-weight:500}
@keyframes notif-in{from{opacity:0;transform:translateX(calc(100% + 24px))}}
@keyframes notif-out{to{opacity:0;transform:translateX(calc(100% + 24px))}}
@media (prefers-reduced-motion:reduce){.notif-toast,.notif-toast.leaving{animation-duration:.01s}}

/* The Jellyn+ icon (assets/jellyn-plus-64.png) wherever Jellyn+ is named. */
.plus-icon{display:inline-block;flex:none;object-fit:contain;vertical-align:middle}
.menu-symbol .plus-icon{width:20px;height:20px}
.state-pill .plus-icon{margin-left:-3px}
/* Departments' and Jellyn Lab's marks (assets/jellyn-departments*, assets/jellyn-lab*) wherever they are named: the
   drawing in black, and in pale blue-white in dark mode. Jellyn Lab's liquid sloshes while its link is pointed at. */
.product-mark{display:inline-block;flex:none;width:20px;height:20px;background:center/contain no-repeat;vertical-align:middle}
.product-mark.departments{background-image:url("../assets/jellyn-departments-128.png")}
.product-mark.lab{background-image:url("../assets/jellyn-lab-128.png")}
:root[data-theme=dark] .product-mark.departments{background-image:url("../assets/jellyn-departments-dark-128.png")}
:root[data-theme=dark] .product-mark.lab{background-image:url("../assets/jellyn-lab-dark-128.png")}
.product-mark.large{width:44px;height:44px}
/* Jellyn Halo's mark (a ring around a dot), in the Products menu and on its page. */
/* The Halo logo (assets/halo-logo.svg, designed in Figma): a phone with its halo, on the raspberry tile */
.halo-mark{display:inline-block;flex:none;width:20px;height:20px;background:url("../assets/halo-logo.svg") center/contain no-repeat}
.server-nav .product-mark{flex:none;width:19px;height:19px;margin:-1px 0}
.page-icon .product-mark{width:24px;height:24px}
.state-pill .product-mark{width:14px;height:14px;margin-left:-3px}
@media (prefers-reduced-motion:no-preference){
  :is(a,button,.lab-intro):is(:hover,:focus-visible) .product-mark.lab{animation:lab-slosh .9s linear infinite}
  :root[data-theme=dark] :is(a,button,.lab-intro):is(:hover,:focus-visible) .product-mark.lab{animation-name:lab-slosh-dark}
}
@keyframes lab-slosh{0%,49.9%{background-image:url("../assets/jellyn-lab-128.png")}50%,100%{background-image:url("../assets/jellyn-lab-2-128.png")}}
@keyframes lab-slosh-dark{0%,49.9%{background-image:url("../assets/jellyn-lab-dark-128.png")}50%,100%{background-image:url("../assets/jellyn-lab-2-dark-128.png")}}
/* Reordering by hand (jellynReorder in js/script.js): the item being slid is lifted; the rest make room. */
.reordering{position:relative;z-index:3;box-shadow:var(--shadow-lg);cursor:grabbing;transition:none!important}
.is-reordering{user-select:none;-webkit-user-select:none}
.can-reorder{cursor:grab}
/* A row of choices takes a slide along it (js/script.js); up and down still scrolls the page. */
.seg-toggle,.command-tabs{touch-action:pan-y}
/* A general page's heading with a photo beside it; under it on a narrow screen. */
.page-intro.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,4vw,64px)}
.intro-photo{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--surface)}
.intro-photo img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:16/6;object-fit:cover}
@media (max-width:860px){.page-intro.has-photo{grid-template-columns:1fr}}
/* The home page's photos. Without scroll-driven animations (or for someone who asked for less motion) they are a
   plain grid: the words, the centre photo, four more under it. */
.zoom{padding-block:clamp(40px,6vw,88px)}
.zoom-stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(1320px,100% - 2 * var(--gutter));margin-inline:auto}
.zoom figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--surface)}
.zoom img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* Cut narrower than its 16:9 (4:3 in the grid, 4:5 on phones), the centre photo keeps the deputy and the driver in view. */
.zoom-main img{object-position:24% 50%}
.zoom-words{grid-column:1/-1;grid-row:1;max-width:680px;margin:0 auto 20px;text-align:center}
.zoom-words h2{margin:0 0 14px;font-size:clamp(2rem,1.2rem + 3vw,3.6rem);line-height:1.05;letter-spacing:-.018em}
.zoom-words p{margin:0 auto;max-width:520px;font-size:1.0625rem}
.zoom-main{grid-column:1/-1;grid-row:2;aspect-ratio:16/9}
.zoom-photo{grid-row:3;aspect-ratio:3/2}
@media (max-width:700px){.zoom-stage{grid-template-columns:repeat(2,minmax(0,1fr))}.zoom-photo{grid-row:auto}.zoom-main{aspect-ratio:4/3}}
/* With scroll-driven animations: the section is tall and its stage stays in view while it passes. The centre
   photo starts small behind the words and grows to fill the stage; the four around it drift out and fade; the
   words leave last. Only transforms and opacity move, on the section's own view timeline. */
@media (prefers-reduced-motion:no-preference){@supports ((animation-timeline:view()) and (animation-range:entry)){
  .zoom{height:240svh;padding:0;view-timeline:--zoom block}
  .zoom-stage{position:sticky;top:var(--header-h);display:grid;grid-template-columns:none;place-items:center;gap:0;width:100%;height:calc(100svh - var(--header-h));overflow:clip;background:#12100e}
  .zoom-stage>*{grid-area:1/1}
  .zoom figure{border-color:rgb(255 255 255 / .12);background:#1c1917}
  .zoom-main{z-index:1;width:min(1180px,92vw);max-height:86%;animation:zoom-main linear both;animation-timeline:--zoom;animation-range:contain 0% contain 88%}
  .zoom-main::after{content:"";position:absolute;inset:0;background:#000;opacity:.5;animation:zoom-scrim linear both;animation-timeline:--zoom;animation-range:contain 45% contain 88%}
  .zoom-photo{z-index:0;width:min(25vw,360px);animation:zoom-away linear both;animation-timeline:--zoom;animation-range:contain 0% contain 62%}
  .zoom-a{--x:-35vw;--y:-27svh}.zoom-b{--x:35vw;--y:-25svh}.zoom-c{--x:-33vw;--y:26svh}.zoom-d{--x:34vw;--y:27svh}
  .zoom-words{z-index:3;margin:0;padding-inline:20px;color:#fff;text-shadow:0 2px 24px rgb(0 0 0 / .55);animation:zoom-words linear both;animation-timeline:--zoom;animation-range:contain 0% contain 88%}
  .zoom-words p{color:rgb(255 255 255 / .86)}
  @keyframes zoom-main{from{transform:scale(.4)}to{transform:scale(1)}}
  @keyframes zoom-scrim{to{opacity:.12}}
  @keyframes zoom-away{from{transform:translate(var(--x),var(--y));opacity:1}to{transform:translate(calc(var(--x) * 2.1),calc(var(--y) * 2.1)) scale(1.5);opacity:0}}
  @keyframes zoom-words{from{transform:scale(.86);opacity:1}62%{opacity:1}to{transform:scale(1.12);opacity:0}}
  /* On a phone the centre photo grows until it fills the whole screen (edge to edge, no corners left), the four
     around it stay inside the screen as they drift out, and the words keep to the photo's width. */
  @media (max-width:700px){
    .zoom{height:210svh}
    .zoom-main{width:100vw;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;transform:none;animation-name:zoom-main-small}
    .zoom-main img{object-position:30% 50%}
    .zoom-photo{width:36vw;border-radius:16px}
    .zoom-a{--x:-24vw;--y:-29svh}.zoom-b{--x:24vw;--y:-27svh}.zoom-c{--x:-23vw;--y:28svh}.zoom-d{--x:24vw;--y:30svh}
    .zoom-words{max-width:min(320px,78vw);padding-inline:0}
    .zoom-words h2{font-size:clamp(1.75rem,1.2rem + 3.4vw,2.3rem)}
    .zoom-words p{font-size:.9375rem}
    @keyframes zoom-main-small{from{clip-path:inset(23% 13% round 28px)}to{clip-path:inset(0 round 0)}}
    @keyframes zoom-away{from{transform:translate(var(--x),var(--y));opacity:1}to{transform:translate(calc(var(--x) * 1.45),calc(var(--y) * 1.45)) scale(1.15);opacity:0}}
  }
}}
.site-notice { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface, #1b2430); color: var(--ink); }
.site-notice-text { flex: 1; margin: 0; overflow-wrap: anywhere; }
.site-notice-mark { display: flex; }
.site-notice-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.site-notice-close { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 8px; }
.site-notice.tone-maintenance { border-left: 4px solid #f0b232; }
.site-notice.tone-warning { border-left: 4px solid #ed4245; }
.site-notice.tone-info { border-left: 4px solid #7188eb; }
@media (max-width: 600px) { .site-notice { padding: 10px 12px; gap: 8px; flex-wrap: wrap; } .site-notice-text { flex-basis: 70%; } }
/* Warden page: your Warden account, which is your Jellyn account. */
.warden-connect{display:grid;gap:18px;padding:24px}
.warden-connect-copy{display:flex;align-items:flex-start;gap:16px}
.warden-connect-copy .warden-logo{width:44px;height:44px;flex:none}
.warden-connect h2{margin:0 0 6px}
.warden-connect p{margin:0 0 8px;max-width:62ch}
@media (max-width:640px){.warden-connect-copy{flex-direction:column}}
.warden-account{display:grid;gap:12px}
.warden-account-details{display:grid;gap:8px;margin:0}
.warden-account-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:baseline}
.warden-account-row dt{color:var(--muted);font-size:.8125rem}
.warden-account-row dd{margin:0;font-weight:600}
.warden-account-row small{color:var(--muted);font-weight:400}
.warden-account-servers{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.warden-account-servers li{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md)}
@media (max-width:640px){.warden-account-row{grid-template-columns:1fr;gap:2px}}
/* On a phone the notifications and your account menu open across the screen under the header, never off its edge. */
@media (max-width:640px){
  .notification-menu{position:static}
  .notification-popover{position:absolute;left:0;right:0;width:auto;max-width:none}
}
/* A row of River City's vehicles (js/vehicles.cjs), on the Departments and Warden pages. */
.fleet{display:grid;gap:18px;margin-block:clamp(28px,5vw,64px)}
.fleet-head{display:grid;gap:6px;max-width:720px}
.fleet-head h2{margin:0;font-size:clamp(22px,2.6vw,34px)}
.fleet-head p{margin:0;color:var(--muted)}
.fleet-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.fleet-card{display:grid;gap:10px;margin:0;padding:16px 14px 14px;border:1px solid var(--line);border-radius:var(--r-xl);background:radial-gradient(120% 80% at 50% 100%,color-mix(in oklab,var(--fleet) 16%,transparent),transparent 70%),var(--block);scroll-snap-align:start}
.fleet-card img{width:100%;height:130px;object-fit:contain;filter:drop-shadow(0 14px 14px rgb(0 0 0 / .28));transition:transform .3s var(--ease)}
.fleet-card:hover img{transform:translateY(-3px) scale(1.03)}
.fleet-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fleet-service{padding:2px 9px;border-radius:999px;background:color-mix(in oklab,var(--fleet) 18%,var(--surface));color:var(--fleet);font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.fleet-card b{font-size:.875rem}
.fleet-card.tone-police{--fleet:var(--blueberry)}
.fleet-card.tone-fire{--fleet:var(--bad)}
.fleet-card.tone-ems{--fleet:var(--tangerine)}
.fleet-card.tone-civilian{--fleet:var(--good)}
@media (prefers-reduced-motion:reduce){.fleet-card img{transition:none}}