/* Collapsed navigation resembles a small stack of physical tabs. */
.site>header{gap:0 24px;justify-content:space-between}
.nav-toggle{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:32px;min-width:76px;margin:8px 8px 8px 0;padding:6px 12px;background:#151515;color:#eee;border-radius:7px 7px 3px 3px;box-shadow:inset 0 0 0 1px #777;cursor:pointer;font:16px/1.2 "XBAND Rough",sans-serif;letter-spacing:1px}
.nav-toggle:before,.nav-toggle:after{content:'';position:absolute;inset:0;border-radius:7px 7px 3px 3px;box-shadow:inset 0 0 0 1px #555;z-index:-1;transition:transform .25s ease;background:#080808;pointer-events:none}
.nav-toggle:before{transform:translate(3px,-3px);z-index:-2}.nav-toggle:after{transform:translate(6px,-6px);z-index:-3;background:#030303}
.nav-toggle:hover{background:#252525}.nav-toggle[aria-expanded=true]:before{transform:translate(3px,-3px)}.nav-toggle[aria-expanded=true]:after{transform:translate(6px,-6px)}
.nav-toggle .nav-sign{font:16px/1 "XBAND Rough",sans-serif;letter-spacing:0}
.nav-drawer{display:grid;grid-template-rows:0fr;flex-basis:100%;min-width:0;visibility:hidden;transition:grid-template-rows .3s steps(4,end),visibility .3s}
.nav-drawer.is-open,.nav-drawer.is-closing{grid-template-rows:1fr;visibility:visible}
.nav-drawer-inner{overflow:hidden;min-height:0}
header .nav-drawer nav{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;width:100%;gap:10px;padding:18px 4px 5px;opacity:1;transform:none}
header .nav-drawer.is-open nav{opacity:1;transform:translateY(0)}
@media(max-width:720px){.site>header{gap:0 12px}.nav-toggle{min-width:76px;padding:6px 12px;gap:10px}header .nav-drawer nav{justify-content:flex-start;padding-top:20px;gap:9px}header .nav-drawer nav a{min-height:44px;display:inline-flex;align-items:center}.wordmark{max-width:calc(100% - 108px);overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.nav-drawer,header .nav-drawer nav,.nav-toggle:before,.nav-toggle:after{transition:none}}

/* Uneven held poses give the staggered tabs a hand-drawn cadence. */
.nav-drawer.is-open nav a{animation:tab-pop-out 280ms steps(1,end) both;animation-delay:calc(var(--tab-index)*65ms)}
.nav-drawer.is-closing nav a{animation:tab-fold-in 280ms steps(1,end) both;animation-delay:calc(var(--tab-reverse)*25ms);pointer-events:none}
.nav-tab-text{display:inline-block;animation:tab-handmade-idle 1440ms steps(1,end) infinite}
.nav-drawer nav a:nth-child(3n+2) .nav-tab-text{animation-delay:-470ms}
.nav-drawer nav a:nth-child(3n) .nav-tab-text{animation-delay:-930ms}
@media(hover:hover){.nav-drawer nav a:hover .nav-tab-text{animation:tab-handmade-hover 420ms steps(1,end) infinite}}
@keyframes tab-pop-out{0%{opacity:0;transform:translate(65px,-4px) rotate(-4deg)}20%{opacity:1;transform:translate(38px,3px) rotate(3deg) scale(1.07,.94)}47%{transform:translate(12px,-2px) rotate(-2deg)}73%{transform:translate(-3px,2px) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes tab-fold-in{0%{opacity:1;transform:none}24%{transform:translate(-3px,2px) rotate(-2deg)}51%{transform:translate(18px,-3px) rotate(3deg)}76%{opacity:1;transform:translate(42px,2px) rotate(-3deg)}100%{opacity:0;transform:translate(65px,-4px)}}
@keyframes tab-handmade-idle{0%,100%{transform:translate(0,0) rotate(-0.125deg)}19%{transform:translate(-0.25px,0.25px) rotate(0.175deg)}43%{transform:translate(0.25px,-0.25px) rotate(-0.2deg)}58%{transform:translate(-0.25px,0) rotate(0.075deg)}81%{transform:translate(0.25px,0.25px) rotate(0.15deg)}}
@keyframes tab-handmade-hover{0%,100%{transform:translate(-0.25px,0.25px) rotate(-0.25deg)}23%{transform:translate(0.5px,-0.25px) rotate(0.375deg)}48%{transform:translate(-0.5px,0) rotate(-0.3deg)}72%{transform:translate(0.25px,0.5px) rotate(0.2deg)}}
@keyframes tab-reveal{0%{opacity:0}100%{opacity:1}}
@keyframes tab-hide{0%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.nav-drawer.is-open nav a{animation-name:tab-reveal;animation-duration:120ms}.nav-drawer.is-closing nav a{animation-name:tab-hide;animation-duration:120ms}.nav-tab-text,.nav-drawer nav a:hover .nav-tab-text{animation:none}}

/* A quiet double heartbeat on the folded tab stack. */
.nav-toggle{animation:tabs-heartbeat 2400ms ease-in-out infinite;transform-origin:center}
@keyframes tabs-heartbeat{0%,36%,100%{transform:scale(1)}8%{transform:scale(1.045)}15%{transform:scale(1)}23%{transform:scale(1.025)}31%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.nav-toggle{animation:none}}

/* A short white summoning light brings each tile into place. */
header .nav-drawer nav{padding-bottom:22px}
.nav-drawer nav a{position:relative;isolation:isolate}
.nav-drawer nav a::before,.nav-drawer nav a::after{content:"";position:absolute;pointer-events:none;opacity:0;z-index:-1}
.nav-drawer nav a::before{left:-10%;width:120%;bottom:-5px;height:65px;background:linear-gradient(to top,#fff9,#fff2 55%,transparent);clip-path:polygon(28% 100%,72% 100%,100% 0,0 0);transform-origin:center bottom}
.nav-drawer nav a::after{left:9%;width:82%;bottom:-7px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 5px 2px #fff,0 0 15px 5px #fffa,0 -5px 22px 6px #fff6}
.nav-drawer.is-open nav a{animation:tab-materialize 520ms steps(1,end) both;animation-delay:calc(var(--tab-index)*85ms)}
.nav-drawer.is-open nav a::before{animation:tab-holy-beam 520ms steps(1,end) both;animation-delay:calc(var(--tab-index)*85ms)}
.nav-drawer.is-open nav a::after{animation:tab-holy-ground 520ms steps(1,end) both;animation-delay:calc(var(--tab-index)*85ms)}
@keyframes tab-materialize{0%{opacity:0;transform:translateY(-7px) scale(.95,1.06)}18%{opacity:1;transform:translateY(-3px) scale(1.03,.97);filter:brightness(2.6);text-shadow:0 0 9px #fff}38%{transform:translateY(1px);filter:brightness(1.4)}62%{transform:translateY(-.5px);filter:brightness(1.1)}82%,100%{opacity:1;transform:none;filter:none;text-shadow:none}}
@keyframes tab-holy-beam{0%{opacity:0;transform:scaleX(.3)}18%{opacity:.8;transform:scaleX(.8)}38%{opacity:.5;transform:scaleX(1)}62%{opacity:.2;transform:scaleX(.7)}82%,100%{opacity:0;transform:scaleX(.3)}}
@keyframes tab-holy-ground{0%{opacity:0;transform:scaleX(.2)}18%{opacity:1;transform:scaleX(.75)}38%{opacity:.9;transform:scaleX(1)}62%{opacity:.4;transform:scaleX(.85)}82%,100%{opacity:0;transform:scaleX(.4)}}
@media(prefers-reduced-motion:reduce){.nav-drawer.is-open nav a{animation:tab-reveal 120ms steps(1,end) both;animation-delay:calc(var(--tab-index)*85ms)}.nav-drawer.is-open nav a::before{animation:none}.nav-drawer.is-open nav a::after{animation:tab-soft-light 300ms ease-out both;animation-delay:calc(var(--tab-index)*85ms)}}
@keyframes tab-soft-light{0%{opacity:0}35%{opacity:.5}100%{opacity:0}}

/* Navigation opens and closes immediately, with no motion or light effects. */
.nav-toggle,.nav-toggle::before,.nav-toggle::after,.nav-drawer,.nav-drawer nav,.nav-drawer nav a,.nav-tab-text{animation:none!important;transition:none!important;transform:none!important;filter:none!important}
.nav-toggle::before{transform:translate(3px,-3px)!important}
.nav-toggle::after{transform:translate(6px,-6px)!important}
.nav-drawer nav a::before,.nav-drawer nav a::after{display:none!important;animation:none!important;transition:none!important}
.nav-drawer.is-open nav a{opacity:1!important}

/* Header memory trails: staggered grey afterimages follow the white title. */
.site>header a.wordmark.ultra-net-wordmark{position:relative;display:inline-block;isolation:isolate;font:400 clamp(24px,3.2vw,42px)/1.3 "XBAND Rough",sans-serif!important;letter-spacing:2px;text-transform:lowercase;text-decoration:none;color:#fff;background:transparent;overflow:visible;overflow-wrap:normal;white-space:nowrap}
.site>header a.wordmark.ultra-net-wordmark:hover{background:transparent;color:#fff}
.site>header .ultra-net-title.level-up-title{display:inline-block;position:relative;z-index:4;font:inherit!important;line-height:inherit!important;letter-spacing:inherit;white-space:nowrap;transform-origin:center;animation:ultra-header-memory-path 7600ms ease-in-out infinite;text-shadow:1px 1px 0 #000}
.site>header .ultra-net-title::before,.site>header .ultra-net-title::after{display:none;content:none;animation:none}
.site>header .header-memory{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none;font:inherit!important;line-height:inherit!important;letter-spacing:inherit;white-space:nowrap;color:#aaa;-webkit-text-stroke:0;text-shadow:none;opacity:0;transform-origin:center;animation:ultra-header-memory-path 7600ms ease-in-out infinite,ultra-header-memory-fade 7600ms linear infinite;animation-delay:var(--memory-delay),var(--memory-delay)}
.site>header .header-memory-1{--memory-x:-3px;--memory-y:.5px;--memory-strength:.72;--memory-delay:.18s;z-index:3}
.site>header .header-memory-2{--memory-x:-8px;--memory-y:1.5px;--memory-strength:.48;--memory-delay:.42s;z-index:2;color:#999}
.site>header .header-memory-3{--memory-x:-14px;--memory-y:2.5px;--memory-strength:.28;--memory-delay:.7s;color:#888}
@keyframes ultra-header-memory-path{0%,100%{transform:translate(var(--memory-x,0px),var(--memory-y,0px)) rotate(-.65deg)}14%{transform:translate(calc(var(--memory-x,0px) - 2px),calc(var(--memory-y,0px) + 1px)) rotate(.35deg)}29%{transform:translate(calc(var(--memory-x,0px) + 1px),calc(var(--memory-y,0px) - 1.5px)) skewX(-1deg)}43%{transform:translate(calc(var(--memory-x,0px) - 1px),calc(var(--memory-y,0px) + .5px)) rotate(-.9deg)}58%{transform:translate(calc(var(--memory-x,0px) + 3px),calc(var(--memory-y,0px) + 1px)) rotate(.7deg)}72%{transform:translate(calc(var(--memory-x,0px) - 2px),calc(var(--memory-y,0px) - 1px)) skewX(1deg)}87%{transform:translate(calc(var(--memory-x,0px) + 1px),calc(var(--memory-y,0px) + .8px)) rotate(.3deg)}}
@keyframes ultra-header-memory-fade{0%,25%,48%,82%{opacity:var(--memory-strength)}12%,43%,62%,90%{opacity:calc(var(--memory-strength)*.5)}37%,74%,100%{opacity:.04}}
@media(max-width:720px){.site>header a.wordmark.ultra-net-wordmark{font-size:25px!important;max-width:calc(100% - 100px)}.site>header .header-memory-2{--memory-x:-3.5px}.site>header .header-memory-3{--memory-x:-5.5px}}
@media(prefers-reduced-motion:reduce){.site>header .header-memory{animation:none!important;transform:none!important}.site>header .header-memory{display:block;animation:ultra-header-memory-fade 5s linear infinite!important;transform:translate(var(--memory-x),var(--memory-y))!important}}

/* Grey memory echoes for chat names, without moving their action targets. */
.chat-room .chat-entry .chat-author{font-family:"XBAND Rough",sans-serif!important;font-weight:400!important;text-transform:lowercase!important;animation:ultra-name-memory 2800ms steps(1,end) infinite}
.chat-room .chat-entry:nth-child(3n+2) .chat-author{animation-delay:-.85s}
.chat-room .chat-entry:nth-child(3n) .chat-author{animation-delay:-1.7s}
@keyframes ultra-name-memory{0%,100%{text-shadow:-1px 0 #9998,-3px 1px #6664}12%{text-shadow:2px -1px #bbb9,-5px 1px #7776,-9px 2px #5553}23%,43%{text-shadow:-2px 1px #9995,-5px 1px #6662}49%{text-shadow:3px 0 #bbb9,-4px -1px #8886,-8px 1px #5554}58%,76%{text-shadow:-1px 0 #9995,-3px 1px #7772}84%{text-shadow:-3px 1px #bbb8,4px -1px #7775,-8px 2px #5553}93%{text-shadow:-1px 0 #9994}}
@media(prefers-reduced-motion:reduce){.chat-room .chat-entry .chat-author{animation:ultra-name-memory 5s linear infinite}}

@media(prefers-reduced-motion:reduce){.site>header .ultra-net-title.level-up-title{animation:ultra-header-slow-creep 9s ease-in-out infinite!important}}
@keyframes ultra-header-slow-creep{0%,100%{transform:translateX(-.5px) rotate(-.2deg)}35%{transform:translate(.5px,.3px) rotate(.2deg)}68%{transform:translate(-.3px,-.3px) rotate(-.15deg)}}

/* Keep the original header/name effects active in the narrow-screen cascade. */
@media(max-width:720px){
 .site>header a.ultra-net-wordmark>.ultra-net-title.level-up-title{animation:ultra-header-memory-path 7600ms ease-in-out infinite!important;animation-play-state:running!important;will-change:transform}
 .site>header a.ultra-net-wordmark>.header-memory{display:block!important;animation:ultra-header-memory-path 7600ms ease-in-out infinite,ultra-header-memory-fade 7600ms linear infinite!important;animation-delay:var(--memory-delay),var(--memory-delay)!important;animation-play-state:running!important}
 .site>header .header-memory-2{--memory-x:-6px}.site>header .header-memory-3{--memory-x:-10px}
 .site>header a.wordmark.ultra-net-wordmark{max-width:100%;overflow:visible}
 .chat-room .chat-entry .chat-author{display:inline-block;overflow:visible;animation:ultra-name-memory 2800ms steps(1,end) infinite!important;animation-play-state:running!important}
 .chat-room .chat-entry:nth-child(3n+2) .chat-author{animation-delay:-.85s!important}.chat-room .chat-entry:nth-child(3n) .chat-author{animation-delay:-1.7s!important}
}
/* Dark ink echoes remain visible on white paper too. */
html[data-site-theme=light] .chat-room .chat-entry .chat-author{animation-name:ultra-name-memory-light!important}
@keyframes ultra-name-memory-light{0%,100%{text-shadow:-1px 0 #5558,-3px 1px #7774}12%{text-shadow:2px -1px #4449,-5px 1px #6666,-9px 2px #8883}23%,43%{text-shadow:-2px 1px #5555,-5px 1px #7772}49%{text-shadow:3px 0 #4449,-4px -1px #5556,-8px 1px #8884}58%,76%{text-shadow:-1px 0 #5555,-3px 1px #6662}84%{text-shadow:-3px 1px #4448,4px -1px #6665,-8px 2px #8883}93%{text-shadow:-1px 0 #5554}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){
 .site>header a.ultra-net-wordmark>.ultra-net-title.level-up-title{animation:ultra-header-slow-creep 9s ease-in-out infinite!important}
 .site>header a.ultra-net-wordmark>.header-memory{animation:ultra-header-memory-fade 5s linear infinite!important;transform:translate(var(--memory-x),var(--memory-y))!important}
 .chat-room .chat-entry .chat-author{animation-duration:5s!important;animation-timing-function:linear!important}
}