/* Finance Hub portal: 8/16-bit platformer shell. Rules and tokens: DESIGN.md.
   html[data-world] is picked at random per page load and its art comes from static/worlds/<world>.css,
   injected by the head script in base.html; html[data-scene] (by hour) is lighting on top.
   This file holds the windows, the layer slots, lighting, toys and the shared sprites. Original art only. */
:root{
  /* Dialogue windows: identical in every world and light so text contrast never moves. */
  --box:#000;--line:#FFFFFF;--ink:#FFFFFF;--ink-quiet:#BAC2D4;
  --gold:#F8D030;--gold-hi:#FFF2A8;--gold-deep:#A87C00;--danger:#FF5A7A;--oneup:#5BD16A;
  --pixel:4px;--ground-h:64px;--drop:rgb(10 20 60/.35);
  --display:"Press Start 2P",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  /* Neutral fallback level, shown only until (or if) a world stylesheet loads */
  --sky:#5A6E96;--sky-2:#6A7EA6;--sky-3:#7A8EB4;--sky-4:#8A9EC2;--brick:#5A6070;--mortar:#2A2E38;--turf:#7A8090;
  --flame:#FFD34D;--flame-core:#FF5A7A;--glow:rgb(255 211 77/.3);
  /* Shared masks (shape only; colour comes from world tokens) */
  --m-brick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' shape-rendering='crispEdges'><path d='M0 0h14v6H0zM16 0h14v6H16zM0 8h6v6H0zM8 8h14v6H8zM24 8h8v6h-8z'/></svg>");
  --m-cloud:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' shape-rendering='crispEdges'><path id='c' d='M2 14V10h2V8h4V6h4V4h4V2h8v2h2v2h4V4h4v2h2v2h2v2h2v4z'/><use href='%23c' x='66' y='12'/></svg>");
  --m-hill-far:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 32' shape-rendering='crispEdges'><path d='M0 32v-4h4v-4h4v-4h4v-4h4v-4h4v-2h4V8h12v2h4v2h4v4h4v4h4v4h4v4h4v4z'/></svg>");
  --m-hill-near:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' shape-rendering='crispEdges'><path d='M0 20v-4h4v-4h4v-2h4V8h10v2h4v2h4v4h4v4zM46 20v-4h4v-2h10v2h4v4z'/></svg>");
  --m-flakes:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' shape-rendering='crispEdges'><path d='M5 4h1v1H5zM22 12h1v1h-1zM40 6h1v1h-1zM52 20h1v1h-1zM12 30h1v1h-1zM33 38h1v1h-1zM48 46h1v1h-1zM8 52h1v1H8zM27 24h1v1h-1z'/></svg>");
  --m-coin:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' shape-rendering='crispEdges'><path d='M4 0h4v1h2v1h1v2h1v8h-1v2h-1v1H8v1H4v-1H2v-1H1v-2H0V4h1V2h1V1h2z'/></svg>");
  --m-sun:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path d='M5 0h6v1h2v1h1v1h1v2h1v6h-1v2h-1v1h-1v1h-2v1H5v-1H3v-1H2v-1H1v-2H0V5h1V3h1V2h1V1h2z'/></svg>");
  --m-stars:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' shape-rendering='crispEdges'><path d='M12 10h1v1h-1zM40 30h1v1h-1zM70 8h1v1h-1zM96 22h1v1h-1zM130 12h1v1h-1zM150 40h1v1h-1zM24 52h1v1h-1zM60 64h1v1h-1zM110 56h1v1h-1zM84 44h1v3h-1zM83 45h3v1h-3zM142 74h1v1h-1z'/></svg>");
  --m-flame:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' shape-rendering='crispEdges'><path d='M3 0h2v2h1v2h1v4h1v4H0V8h1V4h1V2h1z'/></svg>");
  --m-arrow:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'><path d='M0 0h2v1h2v2h2v1H4v2H2v1H0z'/></svg>");
  --m-wave:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' preserveAspectRatio='none' shape-rendering='crispEdges'><path d='M0 4h4V2h4v2h4v2h4v10H0z'/></svg>");
  /* Shared sprites (original, fixed colours) */
  --s-knight-a:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' shape-rendering='crispEdges'><path fill='%23FF5A7A' d='M5 0h3v1h1v1H5z'/><path fill='%23C8D0E0' d='M3 2h6v1h1v4H2V3h1zM1 8h1v3H1zM10 8h1v3h-1z'/><path fill='%2322242E' d='M3 4h6v1H3zM3 12h2v3H3zM7 12h2v3H7z'/><path fill='%233A6FD8' d='M2 7h8v3H2zM2 11h8v1H2z'/><path fill='%23F8D030' d='M2 10h8v1H2z'/><path fill='%233A2A22' d='M2 15h3v1H2zM7 15h3v1H7z'/></svg>");
  --s-knight-b:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' shape-rendering='crispEdges'><path fill='%23FF5A7A' d='M5 0h3v1h1v1H5z'/><path fill='%23C8D0E0' d='M3 2h6v1h1v4H2V3h1zM1 7h1v3H1zM10 9h1v3h-1z'/><path fill='%2322242E' d='M3 4h6v1H3zM2 12h2v3H2zM8 12h2v3H8z'/><path fill='%233A6FD8' d='M2 7h8v3H2zM2 11h8v1H2z'/><path fill='%23F8D030' d='M2 10h8v1H2z'/><path fill='%233A2A22' d='M1 15h3v1H1zM8 15h3v1H8z'/></svg>");
  --s-slime:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges'><path fill='%235BD16A' d='M3 0h4v1h2v2h1v4H0V3h1V1h2z'/><path fill='%231E6B3A' d='M0 7h10v1H0z'/><path fill='%23B8F0C0' d='M3 1h2v1H3z'/><path fill='%23fff' d='M2 3h2v2H2zM6 3h2v2H6z'/><path fill='%23000' d='M3 4h1v1H3zM7 4h1v1H7z'/></svg>");
  --s-bat-a:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'><path fill='%237A68B8' d='M6 2h4v4H6zM6 1h1v1H6zM9 1h1v1H9zM0 0h2v1h2v1h2v2H2V3H0zM16 0v3h-2v1h-4V2h2V1h2V0z'/><path fill='%23FF5A7A' d='M7 3h1v1H7zM8 3h1v1H8z'/></svg>");
  --s-bat-b:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'><path fill='%237A68B8' d='M6 2h4v4H6zM6 1h1v1H6zM9 1h1v1H9zM2 4h4v2H4v1H2V6H0V5h2zM10 4h4v1h2v1h-2v1h-2V6h-2z'/><path fill='%23FF5A7A' d='M7 3h1v1H7zM8 3h1v1H8z'/></svg>");
  --s-bird-a:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'><path fill='%23FFFFFF' d='M6 2h4v4H6zM0 0h2v1h2v1h2v2H2V3H0zM16 0v3h-2v1h-4V2h2V1h2V0z'/><path fill='%23F8D030' d='M10 4h2v1h-2z'/><path fill='%23000' d='M8 3h1v1H8z'/></svg>");
  --s-bird-b:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'><path fill='%23FFFFFF' d='M6 2h4v4H6zM2 4h4v2H4v1H2V6H0V5h2zM10 5h4v1h-2v1h-2z'/><path fill='%23F8D030' d='M10 4h2v1h-2z'/><path fill='%23000' d='M8 3h1v1H8z'/></svg>");
  --s-chest:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' shape-rendering='crispEdges'><path fill='%237A4030' d='M1 0h14v1h1v3H0V1h1z'/><path fill='%239A5A3A' d='M0 5h16v6H0z'/><path fill='%23F8D030' d='M0 4h16v1H0zM7 4h2v4H7z'/><path fill='%233A1C14' d='M0 11h16v1H0z'/></svg>");
  --s-chest-open:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' shape-rendering='crispEdges'><path fill='%235A2A1E' d='M1 0h14v3H1z'/><path fill='%232A1410' d='M0 3h16v2H0z'/><path fill='%23F8D030' d='M3 3h10v1H3zM0 5h16v1H0zM7 5h2v3H7z'/><path fill='%239A5A3A' d='M0 6h16v5H0z'/><path fill='%233A1C14' d='M0 11h16v1H0z'/></svg>");
  --s-heart:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23FF5A7A' d='M1 1h2v1h2V1h2v1h1v3H7v1H6v1H5v1H3V7H2V6H1V5H0V2h1z'/><path fill='%23fff' d='M2 2h1v1H2z'/></svg>");
  --s-key:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23F8D030' fill-rule='evenodd' d='M0 1h4v4H0zM1 2h2v2H1zM4 2h4v2H7v1H6V4H4z'/></svg>");
  --s-gem:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%235CE1FF' d='M2 0h4v1h1v1h1v2H7v1H6v1H5v1H3V6H2V5H1V4H0V2h1V1h1z'/><path fill='%23fff' d='M2 1h1v1H2z'/></svg>");
  --s-potion:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23BAC2D4' d='M3 0h2v2H3z'/><path fill='%23A855F7' d='M1 2h6v1h1v4H7v1H1V7H0V3h1z'/><path fill='%23fff' d='M2 3h1v1H2z'/></svg>");
  --s-sword:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23DDE4F0' d='M3 0h2v5H3z'/><path fill='%23F8D030' d='M1 5h6v1H1z'/><path fill='%235A3A2A' d='M3 6h2v2H3z'/></svg>");
  --s-star:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23F8D030' d='M3 0h2v2h3v2H6v1h1v3H5V7H3v1H1V5h1V4H0V2h3z'/><path fill='%23fff' d='M3 2h1v1H3z'/></svg>");
}
[data-scene=night]{--drop:rgb(0 0 0/.55)}

*,*::before,*::after{box-sizing:border-box}
html{
  scrollbar-color:var(--gold) var(--box);
  background:linear-gradient(var(--sky) 0 30%,var(--sky-2) 30% 52%,var(--sky-3) 52% 72%,var(--sky-4) 72%) fixed var(--sky);
}
body{
  margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:var(--ground-h);
  color:var(--ink);font:400 1rem/1.5 var(--mono);-webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--box)}

/* ---- The level: generic slots that each world file fills. Decoration only, never interactive. ---- */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scene>*{position:absolute;display:none}
.scene>.world-canvas{display:block;left:0;top:0;min-width:100%;min-height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.far,.mid,.near{left:-40px}
.far{--tile:var(--far-w);display:var(--far-d,none);bottom:var(--far-b,var(--ground-h));width:calc(100% + var(--far-w) + 40px);height:var(--far-h);
  background:var(--far-c);mask:var(--far-m) 0 100%/var(--far-w) var(--far-h) repeat-x;animation:pan var(--far-t,160s) linear infinite}
.mid{--tile:var(--mid-w);display:var(--mid-d,none);bottom:var(--mid-b,var(--ground-h));width:calc(100% + var(--mid-w) + 40px);height:var(--mid-h);
  background:var(--mid-c);mask:var(--mid-m) 0 100%/var(--mid-w) var(--mid-h) repeat-x;animation:pan var(--mid-t,110s) linear infinite}
.near{--tile:var(--near-w);display:var(--near-d,none);bottom:var(--near-b,var(--ground-h));width:calc(100% + var(--near-w) + 40px);height:var(--near-h);
  background:var(--near-c);mask:var(--near-m) 0 100%/var(--near-w) var(--near-h) repeat-x;animation:pan var(--near-t,70s) linear infinite}
.clouds{--tile:480px;display:var(--clouds-d,none);top:5.5rem;left:0;width:calc(100% + 480px);height:120px;background:var(--cloud,#fff);
  mask:var(--m-cloud) 0 0/480px 120px repeat-x;animation:pan 140s linear infinite}
.ground{display:var(--ground-d,block);left:0;bottom:0;width:100%;height:var(--ground-h);
  background:var(--ground-bg,linear-gradient(var(--turf) 0 8px,var(--mortar) 8px));box-shadow:0 -4px 0 rgb(0 0 0/.25)}
.ground::before{--tile:64px;content:"";position:absolute;inset:8px 0 0;background:var(--brick);mask:var(--ground-m,var(--m-brick)) 0 0/var(--ground-s,64px 32px) repeat}
.coin{display:block;bottom:calc(var(--ground-h) + 3rem);width:24px;height:32px;
  background:linear-gradient(90deg,var(--gold) 0 42%,var(--gold-deep) 42% 58%,var(--gold) 58%);
  mask:var(--m-coin) 0 0/100% 100%;animation:spin 1.2s steps(1) infinite}
.c1{left:6%}.c2{left:15%;bottom:calc(var(--ground-h) + 6rem);animation-delay:-.3s}
.c3{right:7%;animation-delay:-.6s}.c4{right:16%;bottom:calc(var(--ground-h) + 6rem);animation-delay:-.9s}
.item{display:block;width:24px;height:24px;bottom:var(--item-b,calc(var(--ground-h) + 1rem));background:var(--i1,var(--s-heart)) 0 0/100% 100%;animation:bob 2.4s steps(2) infinite}
.i1{left:24%}.i2{right:26%;background-image:var(--i2,var(--s-key));animation-delay:-1.2s}
.lamp{display:var(--lamp-d,none);top:32%;width:16px;height:52px;background:linear-gradient(#4A5280,#4A5280) 4px 24px/8px 28px no-repeat}
.l1{left:5%}.l2{right:5%}
.lamp::before{content:"";position:absolute;inset:-90px -80px;background:radial-gradient(circle at 50% 38%,var(--glow),transparent 62%);animation:flick .6s steps(2) infinite}
.lamp::after{content:"";position:absolute;top:0;left:0;width:16px;height:24px;
  background:linear-gradient(to top,var(--flame-core) 0 40%,var(--flame) 40%);mask:var(--m-flame) 0 0/100% 100%;animation:flick .45s steps(2) infinite}

/* Characters: two frames toggle by opacity; each world picks the sprites */
.sprite::before,.sprite::after{content:"";position:absolute;inset:0;background:var(--fa) 0 0/100% 100%}
.sprite::after{background-image:var(--fb,var(--fa));animation:frame .5s steps(1) infinite}
.walker{--fa:var(--walker-a,var(--s-knight-a));--fb:var(--walker-b,var(--walker-a,var(--s-knight-b)));--x:18;display:var(--walker-d,none);
  left:18%;bottom:var(--ground-h);width:var(--walker-w,36px);height:var(--walker-h,48px);animation:cross var(--walker-t,48s) linear infinite}
.hopper{--fa:var(--hopper-s,var(--s-slime));display:var(--hopper-d,none);left:38%;bottom:var(--ground-h);width:var(--hopper-w,30px);height:var(--hopper-h,24px);
  transform-origin:50% 100%;animation:hop 3.2s steps(8) infinite}
.flyer{--fa:var(--flyer-a,var(--s-bird-a));--fb:var(--flyer-b,var(--flyer-a,var(--s-bird-b)));--x:40;--dy:-20px;display:var(--flyer-d,none);
  left:40%;top:var(--flyer-top,22%);width:var(--flyer-w,36px);height:var(--flyer-h,18px);animation:cross var(--flyer-t,34s) linear infinite}
.flyer::before,.flyer::after{transform:var(--flyer-flip,none)}
.hopper::after{display:none}
.bat{--fa:var(--s-bat-a);--fb:var(--s-bat-b);--x:70;--dy:28px;display:var(--bat-d,none);left:70%;top:16%;width:40px;height:20px;animation:cross 26s linear infinite}
[data-scene=night] .bat{display:var(--bat-night,block)}

/* ---- Lighting (by hour) on top of any world ---- */
.tint{display:block;inset:0;opacity:var(--tint-o,1)}
[data-scene=dusk] .tint{background:linear-gradient(rgb(70 20 120/.42),rgb(255 90 170/.26))}
[data-scene=night] .tint{background:rgb(4 6 28/.6)}
.sun{width:192px;height:192px;right:14%;bottom:calc(var(--ground-h) + 48px);background:#FF7EC0;mask:var(--m-sun) 0 0/100% 100%}
[data-scene=day] .sun{display:var(--day-sun,none);background:var(--day-sun-c,#FFF2A8);top:9rem;bottom:auto;width:128px;height:128px}
[data-scene=dusk] .sun{display:var(--moon-d,block)}
[data-scene=night] .sun{display:var(--moon-d,block);background:#FFF4C8;top:8rem;bottom:auto;width:96px;height:96px}
.stars{left:0;top:0;width:100%;height:55%;background:#FFF4C8;mask:var(--m-stars) 0 0/320px 200px repeat;animation:twinkle 4s steps(1) infinite}
[data-scene=dusk] .stars{display:var(--stars-d,block);height:40%;opacity:.7}
[data-scene=night] .stars{display:var(--stars-d,block)}

/* ---- Toys: the only clickable art. They live in the ground strip, under every text layer. ---- */
.topbar,main,.footer{position:relative;z-index:2}
.topbar{z-index:3} /* menus (THEMES list, hint) open over the arcade panel in main */
.footer{pointer-events:none}
.toys{position:fixed;inset:0;z-index:1;pointer-events:none}
.egg{all:unset;position:absolute;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.brick{left:36%;bottom:calc((var(--ground-h) - 32px) / 2);width:32px;height:32px;background:var(--brick);
  box-shadow:inset 0 -4px 0 var(--mortar),inset -4px 0 0 var(--mortar),inset 4px 4px 0 rgb(255 255 255/.18)}
.brick::after{content:"";position:absolute;left:6px;top:6px;width:4px;height:4px;background:#fff;opacity:0;animation:glint 9s steps(1) infinite}
.pop{position:absolute;left:4px;bottom:100%;width:24px;height:32px;opacity:0;
  background:linear-gradient(90deg,var(--gold) 0 42%,var(--gold-deep) 42% 58%,var(--gold) 58%);mask:var(--m-coin) 0 0/100% 100%}
.bump{animation:bump .25s steps(3)}
.bump .pop{animation:coinpop .6s steps(6)}
/* The secret: each world supplies its own closed/open sprite and loot (chest only where treasure belongs) */
.secret{left:var(--secret-x,64%);bottom:var(--secret-y,var(--ground-h));width:var(--secret-w,40px);height:var(--secret-h,30px);
  background:var(--secret-a,var(--s-chest)) 0 0/100% 100%}
.secret.open{background-image:var(--secret-b,var(--s-chest-open))}
.loot{position:absolute;left:calc(50% - 12px);bottom:100%;width:24px;height:24px;background:var(--loot,var(--s-gem)) 0 0/100% 100%;opacity:0}
.open .loot{opacity:1;animation:lootpop .8s steps(6) forwards}
.score,.oneup{position:absolute;padding:.375rem .5rem;background:var(--box);border:var(--pixel) solid var(--line);font:400 .75rem/1 var(--display);color:var(--gold);white-space:nowrap}
.score{left:calc(36% + 44px);bottom:calc((var(--ground-h) - 28px) / 2)}
.score b{font-weight:400}
.oneup{left:calc(36% - 8px);bottom:calc(var(--ground-h) + 4.5rem);color:var(--oneup)}
.oneup.go{animation:oneup 1.8s steps(9) forwards}
.bonus{all:unset;position:absolute;left:calc(36% + 44px);bottom:calc((var(--ground-h) - 36px) / 2);pointer-events:auto;cursor:pointer;padding:.5rem .625rem;
  background:var(--box);border:var(--pixel) solid var(--gold);font:400 .75rem/1 var(--display);color:var(--gold);white-space:nowrap;animation:blink 1.2s steps(1) infinite}
.bonus:hover{color:var(--box);background:var(--gold)}
.bonus:focus-visible{outline:var(--pixel) solid var(--line);outline-offset:4px}
.bonus[hidden]{display:none}
.rain{position:absolute;top:-40px;width:24px;height:32px;background:linear-gradient(90deg,var(--gold) 0 42%,var(--gold-deep) 42% 58%,var(--gold) 58%);
  mask:var(--m-coin) 0 0/100% 100%;animation:rain 1.6s linear forwards}
.party .coin{animation-duration:.3s}
.toys:has(.bonus:not([hidden])) .score{visibility:hidden}
@media (max-width:56rem){.secret{left:4%;bottom:calc((var(--ground-h) - var(--secret-h,30px)) / 2)}.walker{animation-duration:30s}}

/* ---- Dialogue windows: every readable word sits on one of these ---- */
.box,.message,.wordmark,.badge,button.quiet{
  background:var(--box);border:var(--pixel) solid var(--line);
  box-shadow:0 0 0 var(--pixel) var(--box),8px 8px 0 var(--pixel) var(--drop);
}

.topbar,main,.footer{width:100%;max-width:90rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.75rem)}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-block:1.25rem}
.wordmark{display:inline-block;padding:.75rem 1rem;font:600 1.25rem/1 var(--mono);letter-spacing:.32em;color:#FFFFFF;white-space:nowrap}
.player{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.player form{margin:0}
.badge{display:inline-block;padding:.875rem 1rem;font:400 .75rem/1 var(--display);color:var(--gold);white-space:nowrap}

main{flex:1;padding-block:1.5rem 2rem}
.page-login main,.page-password main{display:grid;grid-template-columns:minmax(0,36rem);justify-content:center;align-content:center}
.screen{display:grid;gap:1.75rem;min-width:0}
.title{padding:1.5rem 1.5rem 1.75rem}
.overline{margin:0 0 1.125rem;font:400 .75rem/1 var(--display);color:var(--ink-quiet)}
.display{margin:0;font:400 clamp(1.125rem,5.2vw,2.5rem)/1.25 var(--display);color:var(--gold);text-shadow:.125em .125em 0 var(--gold-deep)}
.page-login .display{animation:blink 1.2s steps(1) infinite}
.login:has(#username:valid) .display{animation:none}

.message{margin:0;padding:1rem 1.25rem;font:400 .75rem/1.9 var(--display);color:var(--ink)}
.message.error{border-color:var(--danger)}
.message.locked{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.countdown{font:600 1.5rem/1 var(--mono);color:var(--gold);font-variant-numeric:tabular-nums}

.form{display:grid;padding:1.5rem 1.5rem 1.75rem}
.screen:has(.error:not(.locked)) .form{animation:shake .4s steps(6)}
label{margin-top:1.5rem;font:400 .75rem/1 var(--display);color:var(--ink-quiet)}
label:first-of-type{margin-top:0}
input{
  width:100%;margin-top:.75rem;padding:.5rem .25rem;border:0;border-bottom:var(--pixel) solid var(--ink-quiet);border-radius:0;
  font:600 1.125rem/1.3 var(--mono);color:var(--ink);background:var(--box);caret-color:var(--gold);outline:0;
}
input:focus{border-bottom-color:var(--gold);background:#16161C}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:inset 0 0 0 9em #16161C;transition:background-color 1e5s}
.hint{margin:.625rem 0 0;font:400 .75rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-quiet)}
.form .hint{justify-self:end}

button{
  font:400 .875rem/1 var(--display);color:var(--box);background:var(--gold);border:0;border-radius:0;
  padding:1.125rem 1rem 1rem;cursor:pointer;
  box-shadow:inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 var(--gold-deep),inset var(--pixel) var(--pixel) 0 var(--gold-hi);
}
button:hover{background:#FFE15A}
button:active{transform:translateY(2px);box-shadow:inset var(--pixel) var(--pixel) 0 var(--gold-deep)}
.form button{margin-top:2rem}
button.quiet{min-height:44px;padding:.75rem .875rem;font-size:.75rem;color:var(--ink)}
button.quiet:hover{color:var(--gold);border-color:var(--gold);background:var(--box)}
button.quiet:active{transform:translateY(2px)}

:focus-visible{outline:var(--pixel) solid var(--gold);outline-offset:8px}
input:focus-visible{outline:0}

/* ---- Apps: cartridge shelves by group + arcade sidebar (hubs.toml drives groups, icons, tones) ---- */
.page-apps main{display:flex;flex-direction:column;justify-content:center}
.shelf-head{align-self:flex-start;max-width:100%;margin:0 0 1.5rem;padding:.75rem 1rem;font-size:clamp(1rem,2.2vw,1.25rem)}
.shelf{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2rem;align-items:start}
.groups{display:grid;gap:1.5rem;min-width:0}
.shelf-solo{grid-template-columns:minmax(0,1fr)}
.grp{--acc:var(--ink);padding:1rem 1rem 1.125rem;background:var(--box);border:2px solid #3A3F52;box-shadow:0 0 0 2px var(--box),6px 6px 0 2px var(--drop)}
.grp[data-tone=gold]{--acc:var(--gold)}.grp[data-tone=cyan]{--acc:#5CE1FF}.grp[data-tone=pink]{--acc:#FF7EC0}
.grp-head{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .875rem}
.grp-h,.arcade-h{margin:0;font:400 .75rem/1 var(--display);color:var(--acc,var(--gold))}
.grp-ct{font:600 .75rem/1 var(--mono);color:var(--ink-quiet)}
.carts{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.cart{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.375rem .75rem;align-content:start;height:100%;padding:0 .875rem .875rem;
  color:var(--ink);text-decoration:none;background:#0D0F16;border:2px solid #2C3142;transition:transform .15s,border-color .1s}
.cart::before{content:"";grid-column:1/-1;height:6px;margin:0 -.875rem .5rem;background:var(--acc);opacity:.85}
.cart-name{align-self:center;font:400 .75rem/1.35 var(--display)}
.cart-blurb{grid-column:1/-1;font:400 .8125rem/1.5 var(--mono);color:var(--ink-quiet);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cart:hover,.cart.selected{border-color:var(--gold)}
.cart.selected{transform:translateY(-3px)}
.cart.selected .cart-name{color:var(--gold)}
.cart:focus-visible{outline-color:var(--line);outline-offset:4px}
.ico{display:inline-block;width:24px;height:24px;background:var(--acc);mask:var(--ico) 0 0/100% 100%}
.ico-cal{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 1h8v7H0zM1 3h6v4H1zM2 0h1v2H2zM5 0h1v2H5zM2 4h2v2H2z'/></svg>")}
.ico-coins{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M1 1h6v2H1zM0 3h8v2H0zM1 5h6v2H1z'/></svg>")}
.ico-bank{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M3 0h2v1h2v1h1v1H0V2h1V1h2zM1 4h1v3H1zM3 4h2v3H3zM6 4h1v3H6zM0 7h8v1H0z'/></svg>")}
.ico-doc{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M1 0h5v1h1v1h1v6H1zM2 3h4v1H2zM2 5h4v1H2z'/></svg>")}
.ico-check{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M6 1h2v2H7v1H6v1H5v1H4v1H2V6H1V5H0V3h2v1h1v1h1V4h1V3h1z'/></svg>")}
.ico-tag{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 0h5v1h1v1h1v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0zM1 1h1v1H1z'/></svg>")}
.ico-box{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 2h8v6H0zM1 0h6v2H1zM3 3h2v1H3z'/></svg>")}
.ico-chart{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 7h8v1H0zM1 4h1v3H1zM3 2h1v5H3zM5 3h1v4H5zM7 0h1v7H7z'/></svg>")}
.ico-gear{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M3 0h2v1h1v1h1v1h1v2H7v1H6v1H5v1H3V7H2V6H1V5H0V3h1V2h1V1h1zM3 3h2v2H3z'/></svg>")}
.ico-compass{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M2 0h4v1h1v1h1v4H7v1H6v1H2V7H1V6H0V2h1V1h1zM2 2h4v4H2zM3 3h2v2H3z'/></svg>")}
.ico-arrows{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M2 0h1v1h1v1H3v6H2V2H1V1h1zM5 0h1v6h1v1H6v1H5V7H4V6h1z'/></svg>")}
.ico-report{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M1 0h6v8H1zM2 5h1v2H2zM4 3h1v4H4z'/></svg>")}
.arcade{position:sticky;top:1rem;padding:1.25rem;background:var(--box);border:var(--pixel) solid var(--line);box-shadow:0 0 0 var(--pixel) var(--box),8px 8px 0 var(--pixel) var(--drop)}
.arcade-screen{margin:1rem 0 1.25rem;padding:1rem;background:#0D0F16;border:2px solid #2C3142}
.arcade-lbl{margin:0 0 .5rem;font:600 .6875rem/1 var(--mono);letter-spacing:.18em;color:var(--ink-quiet)}
.arcade-world{margin:0;min-height:1.3em;font:400 1rem/1.3 var(--display);color:var(--ink)}
.arcade-game{margin:.375rem 0 0;font:400 .8125rem/1.4 var(--mono);color:var(--ink-quiet)}
.play{display:block;width:100%;margin-top:1.25rem;padding:1rem;text-align:center;font-size:.75rem}
.play[hidden]{display:none}
.top5 ol{list-style:none;margin:0;padding:0;display:grid;gap:.375rem}
.top5 li{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:.5rem;align-items:baseline;font:400 .8125rem/1.4 var(--mono)}
.top5 .rk{font:400 .625rem/1 var(--display);color:var(--gold)}
.top5 .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top5 .sc{font-variant-numeric:tabular-nums;color:var(--ink-quiet)}
.top5-empty{margin:0;font:400 .8125rem/1.5 var(--mono);color:var(--ink-quiet)}
.tabs{display:grid;grid-template-columns:repeat(3,auto);gap:.375rem;margin:0 0 .875rem}
.tab{min-height:44px;padding:.625rem .25rem .5rem;font-size:.5625rem;line-height:1.2;color:var(--ink-quiet);background:var(--box);box-shadow:inset 0 0 0 2px #2C3142}
.tab:hover{color:var(--gold);background:var(--box)}
.tab[aria-selected=true]{color:var(--box);background:var(--gold);box-shadow:inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 var(--gold-deep),inset var(--pixel) var(--pixel) 0 var(--gold-hi)}
.tab:focus-visible,.top5:focus-visible{outline:var(--pixel) solid var(--line);outline-offset:3px}
.top5[hidden]{display:none}
.top5 small{font-size:.6875rem;color:var(--ink-quiet)}
.top5 .won{margin-left:.375rem;color:var(--gold);white-space:nowrap}
.crown{width:14px;height:10px;margin-right:.25rem;fill:var(--gold);shape-rendering:crispEdges;vertical-align:-1px}
.top5 .champ{margin:0 -.375rem;padding:.25rem .375rem;background:var(--gold);color:var(--box)}
.top5 .champ .rk,.top5 .champ .sc,.top5 .champ small{color:var(--box)}
.top5 .champ .crown{fill:var(--box)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem 2rem;padding-block:.75rem 1rem}
.footer p{margin:0;padding:.5rem .75rem;background:var(--box);font:600 .75rem/1.4 var(--mono);letter-spacing:.14em;color:var(--ink)}
.footer p.hint{color:var(--ink-quiet)}
.page-login .footer,.page-password .footer{justify-content:center}

@media (max-width:68.75rem){.carts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:60rem){.shelf{grid-template-columns:1fr}.arcade{position:static}}
@media (max-width:30rem){
  :root{--ground-h:48px}
  .topbar{flex-wrap:wrap}
  .title,.form{padding:1.25rem 1rem 1.5rem}
  .message{padding:.875rem 1rem}
  .carts{grid-template-columns:1fr}
  .sun{width:128px;height:128px}
}
@media (hover:none) and (pointer:coarse){.footer .hint{display:none}}

@keyframes pan{to{transform:translateX(calc(var(--tile) * -1))}}
@keyframes fall{to{transform:translateY(var(--tile))}}
@keyframes rise{to{transform:translateY(calc(var(--tile) * -1))}}
@keyframes drift{to{transform:translateX(calc(var(--tile) * -1))}}
@keyframes sway{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
@keyframes shimmer{from{opacity:.45}to{opacity:1}}
@keyframes spin{25%{transform:scaleX(.55)}50%{transform:scaleX(.15)}75%{transform:scaleX(.55)}}
@keyframes twinkle{50%{opacity:.55}}
@keyframes flick{50%{opacity:.75;transform:scaleY(.94)}}
@keyframes frame{50%{opacity:0}}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes cross{
  0%{transform:translate(calc(var(--x) * -1vw - 64px),0)}
  25%{transform:translate(calc((50 - var(--x)) * 1vw),var(--dy,0px))}
  50%,100%{transform:translate(calc((100 - var(--x)) * 1vw + 64px),0)}
}
@keyframes hop{20%{transform:scale(1.15,.8)}45%,55%{transform:translateY(-28px) scale(.92,1.08)}80%{transform:scale(1.1,.88)}}
@keyframes glint{0%,95%{opacity:0}96%,98%{opacity:1}}
@keyframes bump{50%{transform:translateY(-8px)}}
@keyframes coinpop{0%{opacity:1;transform:none}60%{opacity:1;transform:translateY(-48px)}100%{opacity:0;transform:translateY(-36px)}}
@keyframes lootpop{from{transform:translateY(10px)}to{transform:translateY(-12px)}}
@keyframes oneup{0%{transform:translateY(10px)}30%,85%{opacity:1;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes rain{to{transform:translateY(calc(100vh + 80px))}}
@keyframes blink{70%{opacity:.15}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---- Apps page: level select (Kieran, 20 Oct 2026). No big panels: the world shows between small windows. A FIND
   box, an ITEMS hotbar (pinned apps, keys 1-9), one WORLD column per group of slim plates with a ▶ cursor, and a
   dialogue box that reads out the selected app. Hooks shared with the modern launcher: #c-q, .c-col, .c-item, .c-pin. */
.lv [hidden]{display:none!important}
.lv .groups{gap:1rem}
.lv-top{display:flex;align-items:stretch;gap:1.25rem;flex-wrap:wrap}
.lv .shelf-head{margin:0;align-self:auto}
.lv-find{flex:1;min-width:16rem;display:flex;align-items:center;gap:.875rem;padding:0 1rem;cursor:text}
.lv-find:focus-within{border-color:var(--gold)}
.lv-find-lbl{font:400 .75rem/1 var(--display);color:var(--gold);white-space:nowrap}
.lv-find-lbl::before{content:"\25B6\00a0";animation:blink 1.2s steps(1) infinite}
.lv-find input{flex:1;min-width:0;margin:0;padding:.75rem 0;border:0;background:transparent;font:600 1.125rem/1.3 var(--mono);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.lv-find input:focus{background:transparent}
.lv-find input::placeholder{color:#7E869A}
.lv-find input::-webkit-search-cancel-button{display:none}
.lv-kbd{display:grid;place-items:center;min-width:28px;height:28px;padding:0 .375rem;border:2px solid var(--ink-quiet);color:var(--ink-quiet);
  font:400 .625rem/1 var(--display)}
.lv-find:focus-within .lv-kbd{visibility:hidden}
.lv-say,.lv-pin-hint{justify-self:start;margin:0;padding:.375rem .625rem;background:var(--box);font:600 .8125rem/1.4 var(--mono);color:var(--ink-quiet)}
.lv-star{display:block;width:16px;height:16px;background:var(--ink-quiet);
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 0h2v2H3zM0 2h8v1H0zM1 3h6v1H1zM2 4h4v1H2zM1 5h6v1H1zM1 6h2v1H1zM5 6h2v1H5zM0 7h2v1H0zM6 7h2v1H6z'/></svg>") 0 0/100% 100%}
.lv-pin-hint .lv-star{display:inline-block;vertical-align:-2px;background:var(--gold)}

/* Small black name tags sit straight on the world: "WORLD 1 FINANCE ×5", "ITEMS". */
.lv-tag,.lv .grp-head{display:inline-flex;align-items:center;gap:.625rem;margin:0;padding:.5rem .75rem;background:var(--box);box-shadow:4px 4px 0 var(--drop)}
.lv-world{font:600 .6875rem/1 var(--mono);letter-spacing:.16em;color:var(--ink-quiet)}
.lv .grp-h{font-size:.75rem}
.lv .grp-ct{font:400 .625rem/1 var(--display);color:var(--gold)}
.lv-items{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lv-items .lv-tag{font:400 .75rem/1 var(--display);color:var(--gold)}
.lv-hotbar{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem}
.lv .c-dock-item{position:relative}
.lv .c-dock-a{display:flex;align-items:center;gap:.625rem;min-height:48px;padding:.5rem 2.25rem .5rem .5rem;color:var(--ink);text-decoration:none;
  background:var(--box);border:var(--pixel) solid var(--gold);box-shadow:4px 4px 0 var(--drop);transition:transform .1s steps(2)}
.lv .c-dock-a:hover,.lv .c-dock-a:focus-visible,.lv .c-hit .c-dock-a{transform:translateY(-4px)}
.lv .c-dock-a:hover .c-dock-name,.lv .c-hit .c-dock-name{color:var(--gold)}
.lv .c-key{display:grid;place-items:center;width:24px;height:24px;background:var(--gold);color:var(--box);font:400 .625rem/1 var(--display)}
.lv .c-dock-a .ico{background:var(--gold)}
.lv .c-dock-name{font:400 .6875rem/1.3 var(--display)}

.lv-worlds{display:grid;gap:1.25rem 1.75rem;align-items:start;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.lv .grp{padding:0;background:none;border:0;box-shadow:none}
.lv .grp .grp-head{margin-bottom:.75rem}
.lv .carts{display:grid;grid-template-columns:1fr;gap:.5rem}
.lv .c-item{position:relative}
/* One plate per app: tone edge, pixel icon, name. The ▶ cursor marks the one Enter opens. */
.lv .cart{position:relative;display:flex;align-items:center;gap:.75rem;height:auto;min-height:52px;padding:.5rem 2.5rem .5rem .75rem;
  background:var(--box);border:2px solid var(--line);border-left:8px solid var(--acc);box-shadow:4px 4px 0 var(--drop);transition:transform .1s steps(2)}
.lv .cart::before{content:"\25B6";position:absolute;left:-1.625rem;top:50%;width:auto;height:auto;margin:-.5em 0 0;background:none;opacity:0;
  color:var(--gold);font:400 .875rem/1 var(--display);text-shadow:2px 2px 0 var(--box)}
.lv .cart:hover{border-color:var(--gold);border-left-color:var(--acc)}
.lv .cart.selected{transform:translateX(4px);border-color:var(--gold);border-left-color:var(--acc)}
.lv .cart.selected::before{opacity:1;animation:lv-cursor .7s steps(2) infinite}
.lv .cart-name{font:400 .75rem/1.35 var(--display);color:var(--ink)}
.lv .ico{flex:none}
.lv .lv-empty{margin:0;padding:.5rem .75rem;background:var(--box);font:600 .75rem/1.4 var(--mono);color:var(--ink-quiet);justify-self:start;display:inline-block}
/* Pin ("put in items"): a pixel star on hover; gold in the hotbar. */
.lv button.lv-pin{position:absolute;top:50%;right:.5rem;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;padding:0;
  background:transparent;box-shadow:none;opacity:0}
.lv .c-dock-item button.lv-pin{right:.375rem}
.lv .c-item:hover button.lv-pin,.lv button.lv-pin:focus-visible{opacity:1}
.lv button.lv-pin:hover{background:transparent}
.lv button.lv-pin:hover .lv-star,.lv button.lv-pin[aria-pressed=true] .lv-star{background:var(--gold)}
.lv button.lv-pin:focus-visible{outline-offset:2px}
/* Finding: matches stay, the rest fade. */
html.c-finding .lv .c-miss{opacity:.3}

/* The dialogue box: the selected app's name and what it does, typed out. */
.lv-info{position:relative;min-height:6.75rem;padding:1rem 1.25rem 1.25rem}
.lv-info-name{margin:0 0 .625rem;font:400 .75rem/1 var(--display);color:var(--gold)}
.lv-info-text{margin:0;max-width:72ch;font:400 1rem/1.55 var(--mono);color:var(--ink)}
.lv-info-text.typing{animation:lv-type .55s steps(24,end) both}
.lv-more{position:absolute;right:1rem;bottom:.5rem;color:var(--gold);font-size:.75rem;animation:blink 1s steps(1) infinite}
@keyframes lv-cursor{50%{transform:translateX(-4px)}}
@keyframes lv-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:60rem){.lv-worlds{grid-template-columns:1fr}}

/* Reduced motion: every world is a still frame; nothing blinks, shakes, scrolls, walks or spins. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Arcade: the switch into the clean theme ---- */
.theme-pick-wrap{position:relative}
.theme-pick{position:relative}
.theme-pick>summary{list-style:none;display:inline-block;min-height:44px;padding:.75rem .875rem;cursor:pointer;
  font:400 .75rem/1.6 var(--display);color:var(--ink);background:var(--box);box-shadow:0 0 0 var(--pixel) var(--line),var(--pixel) var(--pixel) 0 var(--pixel) var(--drop)}
.theme-pick>summary::-webkit-details-marker{display:none}
.theme-pick>summary:hover,.theme-pick[open]>summary{color:var(--gold)}
.theme-list{position:absolute;top:calc(100% + 12px);right:0;z-index:6;display:grid;gap:.5rem;min-width:11rem;padding:.75rem;background:var(--box);
  box-shadow:0 0 0 var(--pixel) var(--line),var(--pixel) var(--pixel) 0 var(--pixel) var(--drop)}
.theme-list form{margin:0}
.theme-list button{width:100%;text-align:left;white-space:nowrap}
.theme-list button[aria-pressed=true]{color:var(--gold)}
.theme-list button[aria-pressed=true]::before{content:"\25B6\00a0"}
.theme-pick-wrap:has(.theme-pick[open]) .theme-hint{display:none}
.theme-hint p{margin:0}
.theme-hint .hint-x{margin-top:.5rem;padding:.375rem .625rem;font-size:.5625rem}
.theme-hint[hidden]{display:none}
/* "New" hint under CLEAN VIEW on the apps page, until this browser has picked a look (views.theme_chosen). */
.theme-hint{position:absolute;top:calc(100% + 14px);right:0;z-index:5;width:max-content;max-width:min(18rem,80vw);margin:0;padding:.625rem .75rem;
  background:var(--box);color:var(--ink);font:400 .5625rem/1.7 var(--display);box-shadow:0 0 0 var(--pixel) var(--line),var(--pixel) var(--pixel) 0 var(--pixel) var(--drop);
  animation:hint-bob 1.6s steps(2) infinite}
.theme-hint b{color:var(--gold);font-weight:400}
.theme-hint::before{content:"";position:absolute;bottom:100%;right:1.5rem;width:12px;height:10px;margin-bottom:var(--pixel);background:var(--line);
  clip-path:polygon(0 100%,50% 0,100% 100%)}
@keyframes hint-bob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.theme-hint{animation:none}}
.page-login .theme-pick{justify-self:center}
.page-login .theme-list{top:auto;bottom:calc(100% + 12px);right:auto;left:50%;transform:translateX(-50%)} /* opens upward: the button sits near the page foot */

/* ======================================================================================================
   Clean theme (templates/clean/, html.clean): an optional, plain SaaS look for people who would rather not have
   the arcade. Corporate Trust direction (Kieran, 20 Oct 2026): Plus Jakarta Sans, slate-50 ground with soft
   indigo/violet light, white cards with indigo-tinted shadows, indigo to violet on the one primary action per
   screen. Everything is scoped to html.clean, so nothing here can reach the arcade pages.
   ====================================================================================================== */
html.clean{
  --c-bg:#F8FAFC;--c-surface:#FFFFFF;--c-primary:#4F46E5;--c-secondary:#7C3AED;--c-ink:#0F172A;--c-ink-2:#334155;
  --c-muted:#64748B;--c-line:#E2E8F0;--c-line-soft:#F1F5F9;--c-ok:#10B981;
  --c-tint:#EEF2FF;--c-tint-2:#F5F3FF;
  --c-grad:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  --c-shadow:0 4px 20px -2px rgb(79 70 229/.10);
  --c-shadow-hi:0 10px 25px -5px rgb(79 70 229/.15),0 8px 10px -6px rgb(79 70 229/.10);
  --c-shadow-btn:0 4px 14px 0 rgb(79 70 229/.30);
  --c-font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --c-nav-h:64px;
  background:var(--c-bg);scrollbar-color:#CBD5E1 var(--c-bg);color-scheme:light;
}
html.clean body{
  padding-bottom:0;color:var(--c-ink);background:transparent;
  font:400 1rem/1.65 var(--c-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html.clean ::selection{background:#C7D2FE;color:var(--c-ink)}
html.clean :focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:8px}
/* [hidden] must win over the display rules below (the pin hint, the Pinned row). */
html.clean [hidden]{display:none!important}
html.clean .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.clean .ic{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Background: slate-50, two slow pools of indigo and violet light, and a dot grid that fades out down the page. */
.c-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.c-bg::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgb(79 70 229/.13) 1px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.c-orb{position:absolute;border-radius:50%;filter:blur(72px)}
.c-orb.o1{width:560px;height:560px;top:-220px;right:-140px;background:#A5B4FC;opacity:.45}
.c-orb.o2{width:480px;height:480px;top:28%;left:-220px;background:#C4B5FD;opacity:.35}
.c-orb.o3{width:420px;height:420px;bottom:-200px;right:18%;background:#99F6E4;opacity:.22}

.c-skip{position:absolute;left:1rem;top:-3rem;z-index:30;padding:.5rem .875rem;border-radius:8px;background:var(--c-ink);color:#fff;font-weight:600;text-decoration:none}
.c-skip:focus{top:.75rem}

/* ---- Sticky navigation ---- */
.c-nav{position:sticky;top:0;z-index:20;height:var(--c-nav-h);
  background:rgb(255 255 255/.78);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgb(226 232 240/.9)}
.c-nav-in{max-width:80rem;height:100%;margin:0 auto;padding:0 clamp(1rem,3vw,1.5rem);display:flex;align-items:center;gap:1.5rem}
.c-brand{display:flex;align-items:center;gap:.625rem;color:var(--c-ink);text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.c-mark svg{display:block;width:30px;height:30px;filter:drop-shadow(0 4px 10px rgb(79 70 229/.35))}
.c-links{flex:1;min-width:0;display:flex;align-items:center}
.c-links ul{list-style:none;margin:0;padding:0}
.c-wide{display:flex;align-items:center;gap:.125rem}
.c-wide>li>a,.c-menu>summary{display:inline-flex;align-items:center;gap:.375rem;min-height:40px;padding:.5rem .75rem;border-radius:8px;
  color:var(--c-ink-2);font:500 .9375rem/1 var(--c-font);text-decoration:none;cursor:pointer;transition:color .2s ease-out,background-color .2s ease-out}
.c-wide>li>a:hover,.c-menu>summary:hover,.c-menu[open]>summary{color:var(--c-primary);background:var(--c-tint)}
.c-menu{position:relative}
.c-menu>summary{list-style:none}
.c-menu>summary::-webkit-details-marker{display:none}
.c-menu>summary .ic{width:1rem;height:1rem;transition:transform .2s ease-out}
.c-menu[open]>summary .ic:last-child{transform:rotate(180deg)}
.c-pop{position:absolute;top:calc(100% + .5rem);left:0;min-width:13rem;margin:0;padding:.375rem;list-style:none;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--c-shadow-hi)}
.c-pop-right{left:auto;right:0}
.c-pop a,html.clean .c-pop-btn{display:flex;align-items:center;gap:.5rem;width:100%;min-height:40px;padding:.5rem .75rem;border:0;border-radius:8px;
  color:var(--c-ink-2);background:none;box-shadow:none;font:500 .9375rem/1.2 var(--c-font);text-align:left;text-decoration:none;cursor:pointer}
.c-pop a:hover,html.clean .c-pop-btn:hover{color:var(--c-primary);background:var(--c-tint);transform:none}
.c-pop form{margin:0}
.c-pop-note{margin:0 0 .25rem;padding:.5rem .75rem .625rem;border-bottom:1px solid var(--c-line-soft);color:var(--c-muted);font-size:.8125rem}
.c-pop-note b{color:var(--c-ink);font-weight:600}
.c-narrow{display:none}
.c-user{margin-left:auto}
.c-user>summary{padding:.25rem .625rem .25rem .25rem;border-radius:999px;border:1px solid var(--c-line);background:var(--c-surface)}
.c-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-grad);color:#fff;font-weight:700;font-size:.875rem}
.c-user-name{color:var(--c-ink);font-weight:600}

/* ---- Page ---- */
/* The arcade lays sign-in pages out as one centred 36rem column; the clean layouts own their own grid. */
html.clean main.c-main{flex:1;display:block;padding:0;grid-template-columns:none}
.c-wrap{max-width:80rem;margin:0 auto;padding:clamp(2rem,4.5vw,3.5rem) clamp(1rem,3vw,1.5rem) 4rem}
.c-hero h1{margin:0;max-width:22ch;font:800 clamp(1.875rem,3.8vw,2.75rem)/1.1 var(--c-font);letter-spacing:-.025em;
  background:linear-gradient(100deg,var(--c-ink) 30%,var(--c-primary) 75%,var(--c-secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.c-hero p{margin:.75rem 0 0;max-width:42rem;color:var(--c-muted);font-size:1.0625rem}

.c-card{background:var(--c-surface);border:1px solid var(--c-line-soft);border-radius:12px;box-shadow:var(--c-shadow)}

/* ---- Apps page: the launcher. Type to open (search), a numbered dock of pinned apps, then one column per group of
   slim rows, so every app is on one screen and one keystroke or click away. Each group has its own colour (--g). ---- */
:where(html.clean) .c-apps .c-hero h1{font-size:clamp(1.75rem,3vw,2.25rem)}
:where(html.clean) .c-col,:where(html.clean) .c-dock{--g:var(--c-primary);--g-tint:var(--c-tint)}
:where(html.clean) [data-group=finance]{--g:#4F46E5;--g-tint:#EEF2FF}
:where(html.clean) [data-group=commercial]{--g:#059669;--g-tint:#ECFDF5}
:where(html.clean) [data-group=operations]{--g:#7C3AED;--g-tint:#F5F3FF}

:where(html.clean) .c-launch{margin-top:1.5rem;max-width:46rem}
:where(html.clean) .c-search{display:flex;align-items:center;gap:.75rem;height:60px;padding:0 1rem 0 1.25rem;border-radius:14px;cursor:text;
  background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--c-shadow);transition:border-color .2s ease-out,box-shadow .2s ease-out}
:where(html.clean) .c-search:focus-within{border-color:#A5B4FC;box-shadow:0 0 0 4px rgb(79 70 229/.12),var(--c-shadow-hi)}
:where(html.clean) .c-search>.ic{width:1.375rem;height:1.375rem;color:var(--c-primary)}
html.clean .c-search input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  color:var(--c-ink);font:500 1.125rem/1 var(--c-font);-webkit-appearance:none;appearance:none}
html.clean .c-search input::-webkit-search-cancel-button{display:none}
html.clean .c-search input::placeholder{color:#94A3B8}
:where(html.clean) .c-kbd{display:grid;place-items:center;min-width:28px;height:28px;padding:0 .5rem;border:1px solid var(--c-line);border-bottom-width:2px;border-radius:6px;
  background:var(--c-bg);color:var(--c-muted);font:600 .8125rem/1 var(--c-font)}
:where(html.clean) .c-search:focus-within .c-kbd{visibility:hidden}
:where(html.clean) .c-say{min-height:1.5em;margin:.625rem 0 0 .25rem;color:var(--c-muted);font-size:.875rem}

:where(html.clean) .c-dock{margin-top:1.75rem}
:where(html.clean) .c-dock-h{margin:0 0 .75rem;font:700 .9375rem/1.2 var(--c-font);color:var(--c-ink-2)}
:where(html.clean) .c-dock-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.875rem}
:where(html.clean) .c-dock-a{position:relative;display:grid;justify-items:center;align-content:center;gap:.625rem;width:8.5rem;height:7.25rem;padding:.75rem;border-radius:16px;
  background:var(--c-surface);border:1px solid var(--c-line-soft);box-shadow:var(--c-shadow);color:var(--c-ink);text-align:center;text-decoration:none;
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}
:where(html.clean) .c-dock-a:hover,:where(html.clean) .c-dock-a:focus-visible,:where(html.clean) .c-hit .c-dock-a{transform:translateY(-3px);box-shadow:var(--c-shadow-hi);border-color:#C7D2FE}
:where(html.clean) .c-dock-a .c-ico{width:52px;height:52px;border-radius:14px;background:var(--c-grad);color:#fff;box-shadow:0 8px 18px -6px rgb(79 70 229/.55)}
:where(html.clean) .c-dock-a .c-ico .ic{width:1.5rem;height:1.5rem}
:where(html.clean) .c-dock-name{font:600 .9375rem/1.2 var(--c-font);letter-spacing:-.01em}
:where(html.clean) .c-key{position:absolute;top:.5rem;left:.5rem;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--c-line);border-bottom-width:2px;
  border-radius:6px;background:var(--c-bg);color:var(--c-muted);font:600 .75rem/1 var(--c-font)}
:where(html.clean) .c-pin-hint{display:flex;align-items:center;gap:.375rem;margin:1.5rem 0 0;color:var(--c-muted);font-size:.875rem}
:where(html.clean) .c-pin-hint .ic{width:1rem;height:1rem;color:var(--c-primary);transform:rotate(30deg)}

:where(html.clean) .c-cols{display:grid;gap:1.25rem;align-items:start;margin-top:1.75rem;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
:where(html.clean) .c-col{padding:.375rem .375rem .5rem;border-radius:16px;background:rgb(255 255 255/.75);border:1px solid var(--c-line-soft);box-shadow:var(--c-shadow);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:where(html.clean) .c-col-head{display:flex;align-items:center;gap:.5rem;margin:0;padding:.75rem .75rem .625rem;font:700 1rem/1.2 var(--c-font);color:var(--c-ink);letter-spacing:-.01em}
:where(html.clean) .c-col-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 4px var(--g-tint)}
:where(html.clean) .c-col-head span{margin-left:auto;padding:.125rem .5rem;border-radius:999px;background:var(--c-line-soft);color:var(--c-muted);font-size:.75rem;font-weight:600}
:where(html.clean) .c-col-empty{margin:0;padding:.25rem .75rem .75rem;color:var(--c-muted);font-size:.875rem}
:where(html.clean) .c-rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
:where(html.clean) .c-item{position:relative}
/* One slim row per app; the description is one line here and in full on hover (title). */
:where(html.clean) a.c-row{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.5rem 2.75rem .5rem .625rem;border-radius:10px;color:inherit;text-decoration:none;
  transition:background-color .15s ease-out}
:where(html.clean) a.c-row:hover,:where(html.clean) a.c-row.selected{background:var(--g-tint)}
:where(html.clean) a.c-row:focus-visible{outline-offset:-2px;border-radius:10px}
:where(html.clean) .c-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--c-tint);color:var(--c-primary)}
:where(html.clean) .c-ico .ic{width:1.25rem;height:1.25rem}
:where(html.clean) .c-row .c-ico{width:36px;height:36px;background:var(--g-tint);color:var(--g);transition:background-color .15s ease-out,color .15s ease-out}
:where(html.clean) a.c-row:hover .c-ico,:where(html.clean) a.c-row.selected .c-ico{background:var(--g);color:#fff}
:where(html.clean) .c-row-text{display:grid;min-width:0}
:where(html.clean) .c-row-title{display:flex;align-items:center;gap:.5rem;min-width:0;font:600 .9375rem/1.35 var(--c-font);color:var(--c-ink);letter-spacing:-.01em}
:where(html.clean) .c-tag{flex:none;padding:.0625rem .5rem;border-radius:999px;background:var(--c-line-soft);color:var(--c-muted);font-size:.6875rem;font-weight:600;letter-spacing:0}
:where(html.clean) .c-blurb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-muted);font-size:.8125rem;line-height:1.45}
/* Typing in the launcher: matches stay, the rest fade, the one Enter will open is outlined. */
:where(html.clean.c-finding) .c-miss{opacity:.25;filter:grayscale(1)}
:where(html.clean) .c-hit a.c-row{box-shadow:inset 0 0 0 2px var(--g)}
:where(html.clean) .c-hit .c-dock-a{border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary),var(--c-shadow-hi)}

/* Pin: right of each row, top-right of each dock tile. Quiet until hover or pinned. */
html.clean button.c-pin{position:absolute;top:50%;right:.5rem;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:8px;
  background:transparent;box-shadow:none;color:#94A3B8;cursor:pointer;opacity:0;transition:opacity .2s ease-out,color .2s ease-out,background-color .2s ease-out}
html.clean .c-dock-item button.c-pin{top:.375rem;right:.375rem;margin-top:0}
:where(html.clean) .c-item:hover button.c-pin,html.clean button.c-pin:focus-visible{opacity:1}
html.clean button.c-pin:hover{color:var(--c-primary);background:var(--c-tint);transform:none}
html.clean button.c-pin[aria-pressed=true]{color:var(--c-primary)}
html.clean button.c-pin[aria-pressed=true] .ic{fill:currentColor;fill-opacity:.2}
:where(html.clean) .c-pin .ic{width:1rem;height:1rem;transform:rotate(30deg)}
@media (hover:none){html.clean button.c-pin{opacity:1}}
@media (max-width:900px){:where(html.clean) .c-cols{grid-template-columns:1fr}}

.c-arcade{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.25rem 1.5rem;
  border-radius:12px;background:linear-gradient(135deg,var(--c-tint),var(--c-tint-2));border:1px solid #E0E7FF}
.c-arcade .c-ico{margin:0;background:var(--c-surface)}
.c-arcade>div{flex:1;min-width:14rem}
.c-arcade h2{margin:0;font:700 1.0625rem/1.3 var(--c-font);color:var(--c-ink)}
.c-arcade p{margin:.25rem 0 0;color:var(--c-ink-2);font-size:.9375rem}
.c-arcade form{margin:0}

/* ---- Buttons, forms ---- */
html.clean button.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.25rem;border:0;border-radius:10px;
  color:#fff;background:var(--c-grad);box-shadow:var(--c-shadow-btn);font:600 1rem/1 var(--c-font);cursor:pointer;
  transition:transform .2s ease-out,box-shadow .2s ease-out}
html.clean button.c-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px 0 rgb(79 70 229/.35)}
html.clean button.c-btn:active{transform:translateY(0);box-shadow:var(--c-shadow-btn)}
html.clean button.c-btn-quiet{color:var(--c-ink-2);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:none}
html.clean button.c-btn-quiet:hover{color:var(--c-primary);border-color:#C7D2FE;box-shadow:none}
html.clean button.c-link{min-height:44px;padding:.5rem;border:0;background:none;box-shadow:none;color:var(--c-muted);
  font:500 .875rem/1.2 var(--c-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.clean button.c-link:hover{color:var(--c-primary);background:none;transform:none}
.c-switch{margin:0}

.c-auth{max-width:72rem;min-height:calc(100dvh - var(--c-nav-h) - 4.5rem);margin:0 auto;padding:clamp(2rem,6vw,4rem) clamp(1rem,3vw,1.5rem);
  display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);align-items:center;gap:clamp(2rem,6vw,5rem)}
.c-auth-solo{grid-template-columns:minmax(0,28rem);justify-content:center}
.c-auth-card{padding:clamp(1.75rem,4vw,2.5rem)}
.c-auth-card h1{margin:0;font:800 clamp(1.75rem,3.4vw,2.25rem)/1.15 var(--c-font);letter-spacing:-.025em;color:var(--c-ink)}
.c-sub{margin:.625rem 0 0;color:var(--c-muted)}
.c-auth-card .c-switch{margin-top:1.25rem;text-align:center}
.c-alert{display:grid;gap:.25rem;margin:1.25rem 0 0;padding:.875rem 1rem;border-radius:10px;border:1px solid #FECDD3;background:#FFF1F2;color:#9F1239;font-size:.9375rem;font-weight:500}
.c-alert span{font-weight:400;color:#881337}
.c-alert .countdown{display:inline;font-weight:700;font-variant-numeric:tabular-nums}
.c-form{display:grid;margin-top:1.5rem}
html.clean .c-form label{margin:1.125rem 0 .375rem;font:600 .875rem/1.2 var(--c-font);color:var(--c-ink-2)}
html.clean .c-form label:first-of-type{margin-top:0}
html.clean .c-form input{width:100%;margin:0;min-height:46px;padding:.625rem .875rem;border:1px solid var(--c-line);border-radius:8px;
  background:var(--c-surface);color:var(--c-ink);font:500 1rem/1.4 var(--c-font);caret-color:var(--c-primary);
  transition:border-color .2s ease-out,box-shadow .2s ease-out}
html.clean .c-form input::placeholder{color:#94A3B8;font-weight:400}
html.clean .c-form input:hover{border-color:#CBD5E1}
html.clean .c-form input:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 3px rgb(79 70 229/.18);background:var(--c-surface)}
html.clean .c-form input[readonly]{background:var(--c-bg);color:var(--c-muted)}
html.clean .c-form input:-webkit-autofill{-webkit-text-fill-color:var(--c-ink);-webkit-box-shadow:inset 0 0 0 9em var(--c-surface)}
.c-hint{margin:.5rem 0 0;color:var(--c-muted);font-size:.8125rem}
html.clean .c-form button.c-btn{margin-top:1.75rem;width:100%}

/* Sign-in preview: the one tilted, dimensional moment. Abstract shapes only, no figures. */
.c-preview{position:relative;perspective:2000px;min-height:24rem}
.c-pv{position:absolute;inset:6% 4% auto 6%;padding:1.5rem;border-radius:16px;background:var(--c-surface);border:1px solid #E0E7FF;
  box-shadow:0 30px 60px -20px rgb(79 70 229/.28),0 18px 36px -18px rgb(15 23 42/.12);
  transform:rotateX(6deg) rotateY(-14deg) rotateZ(1deg);transform-origin:center;transition:transform .5s ease-out}
.c-preview:hover .c-pv{transform:rotateX(3deg) rotateY(-9deg) rotateZ(.5deg)}
.c-pv-head{display:flex;align-items:center;gap:.75rem}
.c-pv-dot{width:28px;height:28px;border-radius:8px;background:var(--c-grad)}
.c-pv-line{display:block;height:9px;border-radius:999px;background:var(--c-line)}
.w40{width:40%}.w50{width:50%}.w55{width:55%}.w62{width:62%}.w70{width:70%}.w80{width:80%}
.c-pv-chip{margin-left:auto;padding:.25rem .625rem;border-radius:999px;background:var(--c-tint);color:var(--c-primary);font-size:.75rem;font-weight:700}
.c-pv-chip.ok{margin:0;background:#ECFDF5;color:#047857}
.c-pv-bars{display:flex;align-items:flex-end;gap:3%;height:9.5rem;margin:1.5rem 0 1.25rem;padding-bottom:.25rem;border-bottom:1px solid var(--c-line-soft)}
.c-pv-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#818CF8,#6366F1);opacity:.85}
.c-pv-bars i:nth-last-child(-n+3){background:var(--c-grad);opacity:1}
.c-pv-rows{display:grid;gap:.625rem}
.c-pv-small{inset:auto 0 2% auto;width:15rem;display:grid;gap:.625rem;padding:1.125rem;transform:rotateX(6deg) rotateY(-14deg) translateZ(60px)}

.c-foot{padding:1.5rem clamp(1rem,3vw,1.5rem) 2rem;text-align:center;color:#94A3B8;font-size:.8125rem}
.c-foot p{margin:0}

@media (max-width:1023px){
  .c-wide{display:none}
  .c-narrow{display:block}
}
@media (max-width:860px){
  .c-auth{grid-template-columns:minmax(0,28rem);justify-content:center}
  .c-preview{display:none}
}
@media (max-width:520px){
  .c-user-name{display:none}
  .c-nav-in{gap:.75rem}
  .c-orb.o1{width:360px;height:360px}
}
@media (prefers-reduced-motion:reduce){
  html.clean *,html.clean *::before,html.clean *::after{transition:none!important;animation:none!important}
  .c-pv,.c-pv-small,.c-preview:hover .c-pv{transform:none}
}

/* ---- Modern looks, shared: theme picker, the "new" hint ---- */
.c-pop-label{margin:.375rem .75rem .25rem;color:var(--c-muted);font-size:.75rem;font-weight:600}
.c-pop-rule{margin:.375rem 0;border:0;border-top:1px solid var(--c-line-soft)}
.c-themes{display:grid;gap:.125rem}
.c-themes form{margin:0}
.c-swatch{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0/.15)}
.s-arcade{background:linear-gradient(135deg,#5A9CF0 0 50%,#F8D030 50%)}
.s-clean{background:linear-gradient(135deg,#4F46E5,#7C3AED)}
.s-terminal{background:#0a0a0a;box-shadow:inset 0 0 0 3px #33ff00}
.s-neon{background:linear-gradient(135deg,#22d3ee,#d946ef)}
html.clean button.c-pop-btn[aria-pressed=true]{color:var(--c-primary);font-weight:700}
html.clean button.c-pop-btn[aria-pressed=true]::after{content:"\2713";margin-left:auto}
.c-theme-row{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--c-line-soft);
  color:var(--c-muted);font-size:.8125rem;font-weight:600}
.c-theme-row>span{margin-right:.25rem}
.c-theme-row .c-themes{display:flex;flex-wrap:wrap;gap:.375rem}
html.clean button.c-chip{display:inline-flex;align-items:center;gap:.375rem;min-height:36px;padding:.375rem .75rem;border:1px solid var(--c-line);border-radius:999px;
  background:var(--c-surface);box-shadow:none;color:var(--c-ink-2);font:500 .8125rem/1 var(--c-font);cursor:pointer}
html.clean button.c-chip:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-surface);transform:none}
html.clean button.c-chip[aria-pressed=true]{border-color:var(--c-primary);color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}

.c-new{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;margin-bottom:1.75rem;padding:.75rem .75rem .75rem 1rem;border-radius:12px;
  border:1px solid #C7D2FE;background:linear-gradient(135deg,rgb(238 242 255/.95),rgb(245 243 255/.95));box-shadow:var(--c-shadow)}
.c-new p{flex:1;min-width:14rem;margin:0;color:var(--c-ink-2);font-size:.9375rem}
.c-new p b{color:var(--c-ink);font-weight:700}
.c-new-badge{padding:.25rem .625rem;border-radius:999px;background:var(--c-grad);color:#fff;font-size:.75rem;font-weight:700}
html.clean button.c-btn-sm{min-height:36px;padding:.375rem .875rem;font-size:.875rem}
html.clean button.c-x{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--c-muted);cursor:pointer}
html.clean button.c-x:hover{color:var(--c-ink);background:rgb(15 23 42/.06);transform:none}

/* =====================================================================================================
   Terminal (html.t-terminal): a phosphor shell over a dim "PLEASE STAND BY" test card. The card stays grey and
   faint; every bit of text sits on a solid near-black panel, so green never lands on green.
   ===================================================================================================== */
html.t-terminal{
  --c-bg:#0a0c0a;--c-surface:#040704;--c-primary:#33ff00;--c-secondary:#ffb000;--c-ink:#4dff26;--c-ink-2:#a8f59a;
  --c-muted:#76c766;--c-line:#1f521f;--c-line-soft:#173d17;--c-tint:rgb(51 255 0/.07);--c-tint-2:rgb(255 176 0/.07);
  --c-grad:#33ff00;--c-shadow:none;--c-shadow-hi:none;--c-shadow-btn:none;
  --c-font:"JetBrains Mono",ui-monospace,Consolas,monospace;--t-panel:#040704;--t-glow:0 0 6px rgb(51 255 0/.45);
  background:#0a0c0a;scrollbar-color:#1f521f #050805;color-scheme:dark;
}
html.t-terminal *{border-radius:0!important}
html.t-terminal ::selection{background:#33ff00;color:#000}
html.t-terminal :focus-visible{outline:1px solid #33ff00;outline-offset:3px}
.t-terminal .c-bg{background:#0a0c0a}
.t-standby{position:absolute;inset:0;width:100%;height:100%;color:#c3cbb7;opacity:.14}
.t-standby .t-card-fill{fill:#0a0c0a}
.t-terminal .c-bg::after{background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgb(0 0 0/.82) 100%);-webkit-mask-image:none;mask-image:none}
.t-crt{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgb(0 0 0/.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.t-terminal .c-nav{background:rgb(4 7 4/.94);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px dashed var(--c-line)}
.t-terminal .c-brand{color:var(--c-ink);text-transform:uppercase;letter-spacing:.06em;text-shadow:var(--t-glow)}
.t-terminal .c-brand-name::before{content:"> ";color:var(--c-secondary)}
.t-terminal .c-brand-name::after{content:"_";animation:t-blink 1s steps(1) infinite}
.t-terminal .c-mark{display:none}
.t-terminal .c-wide>li>a,.t-terminal .c-menu>summary{color:var(--c-ink-2);text-transform:uppercase;font-size:.8125rem;letter-spacing:.04em}
.t-terminal .c-wide>li>a:hover,.t-terminal .c-menu>summary:hover,.t-terminal .c-menu[open]>summary{color:#000;background:#33ff00}
.t-terminal .c-user>summary{border:1px solid var(--c-line);background:transparent}
.t-terminal .c-avatar{background:transparent;border:1px solid #33ff00;color:#33ff00}
.t-terminal .c-user-name{color:var(--c-ink)}
.t-terminal .c-pop{background:#040704;border:1px solid #33ff00}
.t-terminal .c-pop a:hover,html.t-terminal .c-pop-btn:hover{color:#000;background:#33ff00}
.t-terminal .c-hero h1{background:none;color:var(--c-ink);-webkit-text-fill-color:currentColor;text-transform:uppercase;letter-spacing:.02em;
  font-weight:800;font-size:clamp(1.5rem,3.4vw,2.375rem);text-shadow:var(--t-glow);max-width:none;
  animation:t-type 1.1s steps(28,end) both}
.t-terminal .c-hero h1::after{content:"\2588";margin-left:.15em;font-weight:400;animation:t-blink 1s steps(1) infinite}
.t-terminal .c-hero p{color:var(--c-ink-2)}
/* Terminal apps page: a shell. The launcher is a prompt, the dock is bracketed hotkeys, each group is a directory
   listing (~/finance) and the selected row is the classic inverse bar. No icons in the listing, like ls. */
.t-terminal .c-col,.t-terminal .c-dock{--g:#33ff00;--g-tint:transparent}
.t-terminal .c-hero{position:relative;min-height:6rem;padding-right:min(12rem,26%)}
.t-hero-art{position:absolute;right:0;top:-1rem;display:flex;flex-direction:column;align-items:flex-end}
.t-hero-art .t-mascot{width:8.5rem}
.t-mascot{display:block;width:100%;height:auto;color:var(--c-secondary);filter:drop-shadow(0 0 6px rgb(255 176 0/.35))}
.t-say{margin:.25rem 0 0;color:var(--c-ink);font-size:.6875rem;white-space:nowrap;text-shadow:var(--t-glow)}
.t-terminal .c-search{height:56px;background:#040704;border:1px solid var(--c-line);box-shadow:none;padding-left:1rem}
.t-terminal .c-search:focus-within{border-color:#33ff00;box-shadow:0 0 0 1px #33ff00,0 0 18px -6px rgb(51 255 0/.6)}
.t-ps1{flex:none;color:var(--c-secondary);font-size:1rem;white-space:nowrap}
html.t-terminal .c-search input{color:#33ff00;caret-color:#33ff00;font-size:1.0625rem;text-shadow:var(--t-glow)}
.t-terminal .c-kbd{background:transparent;border:1px solid var(--c-line);color:var(--c-muted)}
.t-terminal .c-say{color:var(--c-muted)}
.t-terminal .c-say::before{content:"# "}
.t-terminal .c-dock-h,.t-terminal .c-col-head{color:var(--c-secondary);text-transform:lowercase;letter-spacing:.02em;font-size:.9375rem}
.t-terminal .c-dock-h::before{content:"~/"}
.t-terminal .c-dock-a{width:9.5rem;height:6.25rem;background:#040704;border:1px solid var(--c-line);box-shadow:none;color:var(--c-ink);gap:.375rem}
.t-terminal .c-dock-a:hover,.t-terminal .c-dock-a:focus-visible,.t-terminal .c-hit .c-dock-a{transform:none;background:#33ff00;border-color:#33ff00;color:#000;box-shadow:0 0 18px -4px rgb(51 255 0/.7)}
.t-terminal .c-dock-a .c-ico{width:auto;height:auto;background:none;border:0;box-shadow:none;color:inherit}
.t-terminal .c-dock-name{text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem}
.t-terminal .c-key{display:block;position:static;width:auto;height:auto;border:0;background:none;color:var(--c-secondary);font-size:.8125rem;order:-1}
.t-terminal .c-key::before{content:"["}.t-terminal .c-key::after{content:"]"}
.t-terminal .c-dock-a:hover .c-key,.t-terminal .c-dock-a:focus-visible .c-key,.t-terminal .c-hit .c-key{color:#000}
.t-terminal .c-col{background:#040704;border:1px solid var(--c-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:.25rem 0 .5rem}
.t-terminal .c-col-head{padding:.75rem 1rem .625rem;border-bottom:1px dashed var(--c-line)}
.t-terminal .c-col-head::before{content:"~/";width:auto;height:auto;background:none;box-shadow:none;border-radius:0;color:var(--c-muted)}
.t-terminal .c-col-head span{background:none;color:var(--c-muted);font-weight:400}
.t-terminal .c-col-head span::before{content:"["}.t-terminal .c-col-head span::after{content:"]"}
.t-terminal .c-rows{gap:0;padding-top:.375rem}
.t-terminal a.c-row{min-height:50px;padding:.375rem 2.75rem .375rem 1rem;gap:.625rem;transition:none}
.t-terminal a.c-row::before{content:">";color:var(--c-secondary);visibility:hidden}
.t-terminal a.c-row .c-ico{display:none}
.t-terminal a.c-row:hover,.t-terminal a.c-row.selected{background:#33ff00}
.t-terminal a.c-row:hover::before,.t-terminal a.c-row.selected::before{visibility:visible;color:#000}
.t-terminal .c-row-title{color:var(--c-ink);text-transform:uppercase;letter-spacing:.04em;font-size:.875rem}
.t-terminal .c-blurb{color:var(--c-muted)}
.t-terminal a.c-row:hover .c-row-title,.t-terminal a.c-row.selected .c-row-title{color:#000}
.t-terminal a.c-row:hover .c-blurb,.t-terminal a.c-row.selected .c-blurb{color:#0d4a00}
.t-terminal .c-tag{background:transparent;border:1px solid var(--c-secondary);color:var(--c-secondary)}
.t-terminal a.c-row:hover .c-tag,.t-terminal a.c-row.selected .c-tag{border-color:#000;color:#000}
.t-terminal .c-hit a.c-row{box-shadow:inset 0 0 0 1px #ffb000}
.t-terminal .c-finding .c-miss,.t-terminal.c-finding .c-miss{opacity:.3;filter:none}
.t-terminal .c-col-empty{padding:.5rem 1rem;color:var(--c-muted)}
.t-terminal .c-col-empty::before{content:"# "}
html.t-terminal button.c-pin{color:var(--c-muted)}
html.t-terminal button.c-pin:hover{background:#000;color:#33ff00}
html.t-terminal button.c-pin[aria-pressed=true]{color:var(--c-secondary)}
.t-terminal .c-item:has(a.c-row.selected) button.c-pin,.t-terminal .c-item:has(a.c-row:hover) button.c-pin{color:#000}
.t-terminal .c-item:has(.c-dock-a:hover) button.c-pin{color:#000}
.t-terminal .c-pin-hint,.t-terminal .c-pin-hint .ic{color:var(--c-muted)}
.t-terminal .c-arcade{background:#040704;border:1px dashed var(--c-line)}
.t-terminal .c-arcade h2{color:var(--c-secondary);text-transform:uppercase}
.t-terminal .c-arcade p{color:var(--c-ink-2)}
.t-terminal .c-new{background:#040704;border:1px dashed var(--c-secondary)}
.t-terminal .c-new p,.t-terminal .c-new p b{color:var(--c-secondary)}
.t-terminal .c-new-badge{background:var(--c-secondary);color:#000}
html.t-terminal button.c-btn{background:transparent;color:#33ff00;border:1px solid #33ff00;text-transform:uppercase;letter-spacing:.06em;box-shadow:none}
html.t-terminal button.c-btn::before{content:"[ "}html.t-terminal button.c-btn::after{content:" ]"}
html.t-terminal button.c-btn .ic{display:none}
html.t-terminal button.c-btn:hover{background:#33ff00;color:#000;transform:none;box-shadow:none}
html.t-terminal button.c-btn:active{transform:translateY(1px)}
html.t-terminal button.c-btn-quiet{border-color:var(--c-line);color:var(--c-ink-2)}
html.t-terminal button.c-chip{background:transparent;border:1px solid var(--c-line);color:var(--c-ink-2)}
html.t-terminal button.c-chip:hover,html.t-terminal button.c-chip[aria-pressed=true]{background:#33ff00;color:#000;border-color:#33ff00;box-shadow:none}
html.t-terminal button.c-link{color:var(--c-muted)}
html.t-terminal button.c-x{color:var(--c-secondary)}
.t-terminal .c-auth-card h1{color:var(--c-ink);text-transform:uppercase;text-shadow:var(--t-glow);letter-spacing:.04em}
.t-terminal .c-auth-card h1::after{content:"_";animation:t-blink 1s steps(1) infinite}
.t-terminal .c-sub{color:var(--c-ink-2)}
.t-terminal .c-alert{background:transparent;border:1px solid #ff3333;color:#ff5c5c}
.t-terminal .c-alert::before{content:"[ERR]";font-weight:700}
.t-terminal .c-alert span{color:#ff8a8a}
html.t-terminal .c-form label{color:var(--c-ink);text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem}
html.t-terminal .c-form label::before{content:"> ";color:var(--c-secondary)}
html.t-terminal .c-form input{background:transparent;border:0;border-bottom:1px dashed var(--c-line);color:#33ff00;caret-color:#33ff00;padding-left:0;
  font-family:var(--c-font)}
html.t-terminal .c-form input::placeholder{color:#3f7a35}
html.t-terminal .c-form input:hover{border-bottom-color:var(--c-muted)}
html.t-terminal .c-form input:focus{box-shadow:none;border-bottom:1px solid #33ff00;background:transparent}
html.t-terminal .c-form input[readonly]{background:transparent;color:var(--c-muted)}
html.t-terminal .c-form input:-webkit-autofill{-webkit-text-fill-color:#33ff00;-webkit-box-shadow:inset 0 0 0 9em #040704}
.t-terminal .c-hint{color:var(--c-muted)}
.t-login-art{display:grid;justify-items:center;gap:1rem}
.t-login-art .t-mascot{width:min(15rem,70%)}
.t-boot{margin:0;padding:1rem 1.25rem;background:#040704;border:1px solid var(--c-line);color:var(--c-ink-2);font:400 .8125rem/1.7 var(--c-font);white-space:pre}
.t-terminal .c-theme-row{border-top:1px dashed var(--c-line)}
.t-terminal .c-foot{color:var(--c-muted)}
@keyframes t-blink{50%{opacity:0}}
@keyframes t-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:860px){.t-login-art{display:none}}
@media (max-width:640px){.t-terminal .c-hero{padding-right:0;min-height:0}.t-hero-art{display:none}}

/* =====================================================================================================
   Neon (html.t-neon): a cyberpunk console. Midnight violet ground, drifting light pools, falling light beams and
   rising sparks; cyan and magenta for state, glass panels with glowing edges, skewed buttons.
   ===================================================================================================== */
html.t-neon{
  --c-bg:#07061a;--c-surface:rgb(17 14 42/.72);--c-primary:#22d3ee;--c-secondary:#d946ef;--c-ink:#eef0ff;--c-ink-2:#c7cbee;
  --c-muted:#9196c4;--c-line:rgb(139 92 246/.32);--c-line-soft:rgb(139 92 246/.18);--c-tint:rgb(34 211 238/.1);--c-tint-2:rgb(217 70 239/.1);
  --c-grad:linear-gradient(115deg,#22d3ee,#8b5cf6 55%,#d946ef);
  --c-shadow:0 12px 32px -14px rgb(0 0 0/.7);
  --c-shadow-hi:0 0 0 1px rgb(34 211 238/.55),0 0 26px -4px rgb(34 211 238/.45),0 20px 44px -18px rgb(217 70 239/.5);
  --c-shadow-btn:0 0 22px -4px rgb(34 211 238/.65);
  --c-font:"JetBrains Mono",ui-monospace,Consolas,monospace;
  background:#07061a;scrollbar-color:#3b2a6e #07061a;color-scheme:dark;
}
html.t-neon ::selection{background:#d946ef;color:#fff}
html.t-neon :focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
.t-neon .c-bg{background:radial-gradient(1200px 700px at 85% 110%,rgb(147 51 234/.35),transparent 60%),
  radial-gradient(900px 600px at 0% 0%,rgb(6 182 212/.18),transparent 60%),#07061a}
.t-neon .c-bg::after{background-image:linear-gradient(rgb(34 211 238/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(34 211 238/.05) 1px,transparent 1px);
  background-size:56px 56px}
.t-neon .c-orb{filter:blur(90px);animation:n-drift 22s ease-in-out infinite alternate}
.t-neon .c-orb.o1{background:#7c3aed;opacity:.35}
.t-neon .c-orb.o2{background:#06b6d4;opacity:.22;animation-duration:28s}
.t-neon .c-orb.o3{background:#d946ef;opacity:.25;animation-duration:34s}
.n-beam{position:absolute;top:-30%;width:2px;height:160%;opacity:0;
  background:linear-gradient(180deg,transparent,rgb(34 211 238/.55) 45%,rgb(34 211 238/.0));animation:n-beam 9s ease-in-out infinite}
.n-beam.b0{left:8%}.n-beam.b1{left:19%;animation-delay:-2s;width:1px}.n-beam.b2{left:31%;animation-delay:-5s;background:linear-gradient(180deg,transparent,rgb(217 70 239/.5) 50%,transparent)}
.n-beam.b3{left:44%;animation-delay:-7s;width:1px}.n-beam.b4{left:57%;animation-delay:-3s}.n-beam.b5{left:66%;animation-delay:-8s;background:linear-gradient(180deg,transparent,rgb(217 70 239/.5) 50%,transparent)}
.n-beam.b6{left:76%;animation-delay:-1s;width:1px}.n-beam.b7{left:87%;animation-delay:-6s}.n-beam.b8{left:95%;animation-delay:-4s;width:1px;background:linear-gradient(180deg,transparent,rgb(217 70 239/.45) 50%,transparent)}
.n-spark{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#22d3ee;box-shadow:0 0 8px 2px rgb(34 211 238/.6);
  animation:n-rise 18s linear infinite;opacity:.8}
.n-spark:nth-child(odd){background:#e879f9;box-shadow:0 0 8px 2px rgb(217 70 239/.55)}
.n-spark.s0{left:4%;animation-delay:-2s}.n-spark.s1{left:11%;animation-delay:-9s;animation-duration:22s}.n-spark.s2{left:17%;animation-delay:-14s}
.n-spark.s3{left:24%;animation-delay:-5s;animation-duration:26s}.n-spark.s4{left:33%;animation-delay:-11s}.n-spark.s5{left:41%;animation-delay:-1s;animation-duration:24s}
.n-spark.s6{left:49%;animation-delay:-16s}.n-spark.s7{left:56%;animation-delay:-7s;animation-duration:20s}.n-spark.s8{left:63%;animation-delay:-12s}
.n-spark.s9{left:71%;animation-delay:-3s;animation-duration:25s}.n-spark.s10{left:78%;animation-delay:-15s}.n-spark.s11{left:85%;animation-delay:-8s;animation-duration:21s}
.n-spark.s12{left:91%;animation-delay:-13s}.n-spark.s13{left:97%;animation-delay:-6s;animation-duration:23s}
.t-neon .c-nav{background:rgb(7 6 26/.72);border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgb(34 211 238/.6),rgb(217 70 239/.6),transparent) 1}
.t-neon .c-brand{color:#22d3ee;letter-spacing:.02em}
.t-neon .c-brand-name::before{content:"> ";color:#d946ef}
.t-neon .c-brand-name::after{content:"_";animation:t-blink 1s steps(1) infinite}
.t-neon .c-mark svg{filter:drop-shadow(0 0 10px rgb(34 211 238/.6))}
.t-neon .c-wide>li>a,.t-neon .c-menu>summary{color:var(--c-ink-2);text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}
.t-neon .c-wide>li>a:hover,.t-neon .c-menu>summary:hover,.t-neon .c-menu[open]>summary{color:#22d3ee;background:rgb(34 211 238/.08);text-shadow:0 0 10px rgb(34 211 238/.8)}
.t-neon .c-user>summary{background:rgb(17 14 42/.8);border-color:var(--c-line)}
.t-neon .c-user-name{color:var(--c-ink)}
.t-neon .c-pop{background:rgb(12 10 32/.96);border-color:var(--c-line);box-shadow:0 0 30px -8px rgb(139 92 246/.6)}
.t-neon .c-hero h1{text-transform:uppercase;letter-spacing:.02em;font-weight:800;
  background:linear-gradient(100deg,#67e8f9,#22d3ee 35%,#a78bfa 65%,#e879f9);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 18px rgb(34 211 238/.35));animation:n-glow 4s ease-in-out infinite}
.t-neon .c-hero h1::after{content:"";display:block;width:7rem;height:3px;margin-top:1rem;background:var(--c-grad);box-shadow:0 0 12px rgb(34 211 238/.8);
  animation:n-bar 3s ease-in-out infinite}
.t-neon .c-hero p{color:var(--c-ink-2)}
/* Neon apps page: a HUD. The launcher glows with a moving edge, the dock is chamfered hotkeys, each group has its own
   neon (finance cyan, commercial magenta, operations violet) and the selected row lights a bar with a light sweep. */
.t-neon [data-group=finance],.t-neon .c-dock{--g:#22d3ee;--g-rgb:34 211 238}
.t-neon [data-group=commercial]{--g:#e879f9;--g-rgb:232 121 249}
.t-neon [data-group=operations]{--g:#a78bfa;--g-rgb:167 139 250}
.t-neon .c-col,.t-neon .c-dock{--g-tint:rgb(var(--g-rgb,34 211 238)/.1)}
.t-neon .c-search{height:60px;border:1px solid transparent;box-shadow:0 0 30px -12px rgb(34 211 238/.6);
  background:linear-gradient(rgb(12 10 32/.92),rgb(12 10 32/.92)) padding-box,
             linear-gradient(90deg,#22d3ee,#8b5cf6,#d946ef,#22d3ee) border-box;background-size:100% 100%,300% 100%;animation:n-edge 6s linear infinite}
.t-neon .c-search:focus-within{box-shadow:0 0 0 3px rgb(34 211 238/.15),0 0 34px -6px rgb(34 211 238/.7)}
.t-neon .c-search>.ic{color:#22d3ee;filter:drop-shadow(0 0 6px rgb(34 211 238/.8))}
html.t-neon .c-search input{color:#e0f7ff;caret-color:#22d3ee;letter-spacing:.02em}
html.t-neon .c-search input::placeholder{color:#7d82b5}
.t-neon .c-kbd{background:rgb(255 255 255/.04);border-color:var(--c-line);color:#67e8f9}
.t-neon .c-say{color:var(--c-muted)}
.t-neon .c-dock-h,.t-neon .c-col-head{text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem}
.t-neon .c-dock-h{color:#22d3ee;text-shadow:0 0 12px rgb(34 211 238/.6)}
.t-neon .c-dock-a{width:9rem;height:7.5rem;border-radius:0;border:0;color:#e0f7ff;
  background:linear-gradient(160deg,rgb(34 211 238/.14),rgb(217 70 239/.12)),rgb(17 14 42/.8);box-shadow:inset 0 0 0 1px var(--c-line);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.t-neon .c-dock-a:hover,.t-neon .c-dock-a:focus-visible,.t-neon .c-hit .c-dock-a{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px #22d3ee,inset 0 0 26px -6px rgb(34 211 238/.7);background:linear-gradient(160deg,rgb(34 211 238/.28),rgb(217 70 239/.22)),rgb(17 14 42/.85)}
.t-neon .c-dock-a .c-ico{background:var(--c-grad);box-shadow:0 0 22px -2px rgb(34 211 238/.65);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.t-neon .c-dock-name{text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}
.t-neon .c-key{top:.625rem;left:.75rem;width:auto;height:auto;border:0;background:none;color:#e879f9;font-size:.75rem;text-shadow:0 0 8px rgb(217 70 239/.9)}
.t-neon .c-col{border-radius:0;padding:.25rem 0 .5rem;background:rgb(12 10 32/.62);border:1px solid var(--c-line);box-shadow:inset 0 1px 0 rgb(var(--g-rgb)/.6),0 20px 40px -24px rgb(0 0 0/.8)}
.t-neon .c-col-head{padding:.875rem 1rem .75rem;color:var(--g);text-shadow:0 0 12px rgb(var(--g-rgb)/.7)}
.t-neon .c-col-head::before{width:6px;height:6px;border-radius:0;transform:rotate(45deg);box-shadow:0 0 10px 2px rgb(var(--g-rgb)/.8)}
.t-neon .c-col-head span{background:rgb(var(--g-rgb)/.12);color:var(--g);text-shadow:none;border-radius:0}
.t-neon .c-rows{gap:0}
.t-neon a.c-row{position:relative;overflow:hidden;border-radius:0;padding-left:1rem}
.t-neon a.c-row::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--g);opacity:0;box-shadow:0 0 12px 1px rgb(var(--g-rgb)/.9);
  transition:opacity .2s ease-out}
.t-neon a.c-row::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(var(--g-rgb)/.22) 50%,transparent 70%);
  transform:translateX(-100%);pointer-events:none}
.t-neon a.c-row:hover,.t-neon a.c-row.selected{background:linear-gradient(90deg,rgb(var(--g-rgb)/.14),transparent 85%)}
.t-neon a.c-row:hover::before,.t-neon a.c-row.selected::before{opacity:1}
.t-neon a.c-row.selected::after{animation:n-sweep .7s ease-out}
.t-neon .c-row .c-ico{border-radius:0;background:rgb(var(--g-rgb)/.12);color:var(--g);box-shadow:inset 0 0 0 1px rgb(var(--g-rgb)/.4);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.t-neon a.c-row:hover .c-ico,.t-neon a.c-row.selected .c-ico{background:var(--g);color:#07061a;box-shadow:0 0 16px rgb(var(--g-rgb)/.8)}
.t-neon .c-row-title{color:#e0f7ff;text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem}
.t-neon a.c-row:hover .c-row-title,.t-neon a.c-row.selected .c-row-title{color:#fff;text-shadow:0 0 10px rgb(var(--g-rgb)/.8)}
.t-neon .c-tag{background:rgb(217 70 239/.15);color:#f0abfc;border-radius:0}
.t-neon .c-blurb{color:var(--c-muted)}
.t-neon .c-hit a.c-row{box-shadow:inset 0 0 0 1px var(--g)}
.t-neon .c-hit .c-dock-a{box-shadow:inset 0 0 0 2px #22d3ee,inset 0 0 30px -6px rgb(34 211 238/.8)}
.t-neon .c-col-empty{padding:.5rem 1rem}
html.t-neon button.c-pin:hover{background:rgb(34 211 238/.12);color:#22d3ee}
html.t-neon button.c-pin[aria-pressed=true]{color:#e879f9}
.t-neon .c-pin-hint .ic{color:#e879f9}
.t-neon .c-card{background:var(--c-surface);border:1px solid var(--c-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.t-neon .c-arcade .c-ico{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));border-radius:0}
@keyframes n-edge{to{background-position:0 0,300% 0}}
@keyframes n-sweep{to{transform:translateX(100%)}}
.t-neon .c-arcade{background:linear-gradient(120deg,rgb(34 211 238/.1),rgb(217 70 239/.12));border-color:var(--c-line)}
.t-neon .c-arcade .c-ico{background:var(--c-grad)}
.t-neon .c-new{background:linear-gradient(120deg,rgb(34 211 238/.12),rgb(217 70 239/.14));border-color:rgb(34 211 238/.4);box-shadow:0 0 24px -8px rgb(34 211 238/.5)}
.t-neon .c-new p{color:var(--c-ink-2)}.t-neon .c-new p b{color:#fff}
html.t-neon button.c-x:hover{background:rgb(255 255 255/.06);color:#fff}
html.t-neon button.c-btn{border-radius:0;color:#06121a;text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.875rem;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);padding-inline:1.75rem}
html.t-neon button.c-btn:hover{filter:brightness(1.15);box-shadow:var(--c-shadow-btn)}
html.t-neon button.c-btn-quiet{clip-path:none;background:transparent;color:#22d3ee;border:0;border-top:1px solid #22d3ee;border-bottom:1px solid #22d3ee}
html.t-neon button.c-btn-quiet:hover{background:rgb(34 211 238/.08);color:#67e8f9}
html.t-neon button.c-chip{background:rgb(17 14 42/.8);border-color:var(--c-line);color:var(--c-ink-2)}
html.t-neon button.c-chip:hover,html.t-neon button.c-chip[aria-pressed=true]{border-color:#22d3ee;color:#22d3ee;box-shadow:0 0 12px -2px rgb(34 211 238/.6)}
html.t-neon button.c-link{color:var(--c-muted)}
html.t-neon button.c-link:hover{color:#22d3ee}
.t-neon .c-auth-card h1{text-transform:uppercase;letter-spacing:.04em;color:#22d3ee;text-shadow:0 0 18px rgb(34 211 238/.55)}
.t-neon .c-sub{color:var(--c-ink-2)}
.t-neon .c-alert{background:rgb(217 70 239/.1);border-color:rgb(232 121 249/.5);color:#f5d0fe}
.t-neon .c-alert span{color:#f0abfc}
html.t-neon .c-form label{color:#67e8f9;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
html.t-neon .c-form input{background:rgb(255 255 255/.04);border-color:var(--c-line);color:var(--c-ink);font-family:var(--c-font)}
html.t-neon .c-form input::placeholder{color:#6b6f99}
html.t-neon .c-form input:hover{border-color:rgb(139 92 246/.6)}
html.t-neon .c-form input:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgb(34 211 238/.18),0 0 18px -4px rgb(34 211 238/.6);background:rgb(255 255 255/.05)}
html.t-neon .c-form input[readonly]{background:rgb(255 255 255/.02);color:var(--c-muted)}
html.t-neon .c-form input:-webkit-autofill{-webkit-text-fill-color:var(--c-ink);-webkit-box-shadow:inset 0 0 0 9em #120f2c}
.t-neon .c-pv{background:rgb(17 14 42/.85);border-color:rgb(34 211 238/.35);box-shadow:0 0 40px -10px rgb(34 211 238/.45),0 30px 60px -24px rgb(217 70 239/.45)}
.t-neon .c-pv-line{background:rgb(139 92 246/.3)}
.t-neon .c-pv-chip{background:rgb(34 211 238/.15);color:#67e8f9}
.t-neon .c-pv-chip.ok{background:rgb(52 211 153/.15);color:#6ee7b7}
.t-neon .c-pv-bars{border-bottom-color:var(--c-line)}
.t-neon .c-pv-bars i{background:linear-gradient(180deg,#22d3ee,#8b5cf6);opacity:.75;animation:n-bars 3.2s ease-in-out infinite alternate}
.t-neon .c-pv-bars i:nth-child(2n){animation-delay:-1.2s}.t-neon .c-pv-bars i:nth-child(3n){animation-delay:-2.1s}
.t-neon .c-pv-bars i:nth-last-child(-n+3){background:linear-gradient(180deg,#e879f9,#8b5cf6)}
.t-neon .c-theme-row{border-top-color:var(--c-line)}
.t-neon .c-foot{color:var(--c-muted)}
@keyframes n-drift{to{transform:translate(60px,-40px) scale(1.12)}}
@keyframes n-beam{0%,100%{opacity:0;transform:translateY(-8%)}45%{opacity:.9}70%{opacity:.15;transform:translateY(8%)}}
@keyframes n-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.85}90%{opacity:.6}100%{transform:translateY(-110vh);opacity:0}}
@keyframes n-glow{50%{filter:drop-shadow(0 0 26px rgb(217 70 239/.45))}}
@keyframes n-bar{50%{width:11rem;box-shadow:0 0 18px rgb(217 70 239/.9)}}
@keyframes n-bars{to{transform:scaleY(.82);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){
  .n-beam,.n-spark{display:none}
  .t-neon .c-search{animation:none}
  .t-neon a.c-row.selected::after{animation:none}
  .t-terminal .c-hero h1{clip-path:none}
}