.hw{--ph:#7dffc6;--ph-dim:rgba(125,255,198,.55);position:relative;background:#030605}
.hw-rule{height:1px;background:var(--line);max-width:1180px;margin:0 auto clamp(56px,8vw,96px);opacity:.9}
.hw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hw-track{position:relative}
.hw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#020403}
.hw-rig,.hw-land,.hw-flash{position:absolute;inset:0}
.hw-shell,.hw-glass,.hw-land>img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
.hw-shell{z-index:3;pointer-events:none;user-select:none}
.hw-glass{z-index:1;overflow:hidden;background:radial-gradient(ellipse 70% 65% at 50% 46%,#0e2d24 0%,#07170f 55%,#020806 100%)}
.hw-glass::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.hw-glass::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,rgba(0,0,0,.72) 100%),linear-gradient(128deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%)}
.hw-roll{position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(125,255,198,.045),transparent);animation:hw-roll 7s linear infinite}
@keyframes hw-roll{from{top:-25%}to{top:105%}}
.hw-bloom{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(125,255,198,.10),transparent 70%);animation:hw-flick 3.2s steps(1) infinite}
@keyframes hw-flick{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.93}84%{opacity:1}}
.hw-scr{position:absolute;z-index:2;font-family:'VT323',monospace;color:var(--ph);line-height:1.18;text-shadow:0 0 2px var(--ph),0 0 14px rgba(125,255,198,.42),-1.2px 0 rgba(255,70,110,.28),1.2px 0 rgba(70,150,255,.28)}
.hw-tag{color:var(--ph-dim);margin-bottom:.9em;letter-spacing:.04em}
.hw-txt{margin:0;font:inherit;white-space:pre-wrap;word-break:normal}
.hw-cur{display:inline-block;width:.5em;height:.95em;vertical-align:-.12em;background:var(--ph);box-shadow:0 0 10px rgba(125,255,198,.7);animation:hw-blink 1.06s steps(1) infinite}
.hw-typing .hw-cur{animation:none}
@keyframes hw-blink{50%{opacity:0}}
.hw-more{position:absolute;z-index:2;font-family:'VT323',monospace;color:var(--ph-dim);text-shadow:0 0 10px rgba(125,255,198,.35);opacity:0;transition:opacity .4s ease;animation:hw-blink 1.6s steps(1) infinite;letter-spacing:.08em}
.hw-more.on{opacity:1}
.hw-led{position:absolute;z-index:4;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#9dff9a;box-shadow:0 0 8px 2px rgba(120,255,120,.7);opacity:0;pointer-events:none}
.hw-typing~.hw-led,.hw-led.on{opacity:1;animation:hw-blink .18s steps(1) infinite}
.hw-blip .hw-glass{animation:hw-blip .26s steps(3)}
@keyframes hw-blip{0%{filter:brightness(1.9) contrast(1.2);transform:translateX(3px)}50%{filter:brightness(.6);transform:translateX(-2px)}100%{filter:none;transform:none}}
@keyframes hw-shake{0%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}100%{transform:translate(0,0)}}
.hw-flash{z-index:6;background:#f4fff9;opacity:0;pointer-events:none}
.hw-land{z-index:0;opacity:0;transition:opacity 1.2s ease}
.hw-done .hw-land{z-index:7;opacity:1}
.hw-done .hw-rig,.hw-done .hw-ctl{visibility:hidden}
.hw-mark{position:absolute;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.42em;font-family:'Cormorant Garamond',serif;font-weight:500;color:#fff;letter-spacing:.04em;white-space:nowrap;text-align:center;text-shadow:0 1px 2px rgba(0,15,25,.35),0 0 42px rgba(8,28,38,.55);opacity:0;transition:opacity 2s ease 1s,letter-spacing 3s ease 1s}
.hw-mark img{width:.46em;height:auto;filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(8,28,38,.5));opacity:.95}
.hw-land::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 34% at 50% 40%,rgba(12,30,40,.34),transparent 72%)}
.hw-done .hw-mark{opacity:1;letter-spacing:.07em}
.hw-ctl{position:absolute;z-index:8;left:clamp(14px,2vw,26px);bottom:clamp(12px,2vw,22px);display:flex;gap:18px}
.hw-ctl button{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:lowercase;color:rgba(242,239,232,.62);background:rgba(0,0,0,.35);border:0;border-radius:3px;padding:8px 10px;min-height:36px;cursor:pointer;transition:color .25s ease}
.hw-ctl button:hover,.hw-ctl button[aria-pressed=true]{color:var(--ph)}
.hw-ctl button:focus-visible{outline:1px solid var(--ph);outline-offset:2px}
.hw-all{position:fixed;inset:0;margin:auto;height:fit-content;overflow:auto;max-width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);width:100%;padding:clamp(22px,4vw,40px);border:1px solid rgba(125,255,198,.25);border-radius:6px;background:#04110b;color:var(--ph);font-family:'VT323',monospace;font-size:clamp(19px,2.2vw,23px);line-height:1.3;text-shadow:0 0 8px rgba(125,255,198,.3)}
.hw-all::backdrop{background:rgba(0,0,0,.78)}
.hw-all h3{font:inherit;color:var(--ph-dim);margin:1.6em 0 .4em}
.hw-all h3:first-of-type{margin-top:0}
.hw-all p{margin:0;white-space:pre-wrap}
.hw-all .x{position:sticky;top:0;float:right;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--ph);background:#04110b;border:1px solid rgba(125,255,198,.3);border-radius:3px;padding:7px 10px;cursor:pointer}
@media (prefers-reduced-motion: reduce){.hw-roll,.hw-bloom,.hw-cur,.hw-more{animation:none}.hw-blip .hw-glass{animation:none}.hw-mark{transition:opacity 1s ease}}
.nav.hw-away{opacity:0;pointer-events:none}
/* data-takeover: the page is hijacked on the way in */
.hw-veil{position:fixed;inset:0;z-index:65;background:#000;opacity:0;pointer-events:none;transition:opacity .28s steps(4)}
.hw-veil.on{opacity:1}
.hw-veil.slow{transition:opacity 1.3s ease}
html.hw-hijacked,html.hw-hijacked *{cursor:none!important}
html.hw-hijacked .catalog,html.hw-hijacked .nav,html.hw-hijacked .billboard{animation:hw-glitch .9s steps(1) forwards}
html.hw-hijacked body::after{content:"";position:fixed;inset:0;z-index:64;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(to bottom,transparent 0%,rgba(125,255,198,.14) 48%,transparent 52%) 0 0/100% 300% no-repeat;animation:hw-sweep .9s linear forwards}
@keyframes hw-sweep{from{background-position:0 0,0 100%}to{background-position:0 0,0 -60%}}
@keyframes hw-glitch{0%{transform:none;filter:none}8%{transform:translate(-10px,2px) skewX(-3deg);filter:hue-rotate(60deg) saturate(2.4) contrast(1.5)}16%{transform:translate(12px,-1px);clip-path:inset(18% 0 52% 0)}22%{transform:none;clip-path:none;filter:invert(1) contrast(1.8)}30%{filter:none;transform:translate(0,6px)}38%{clip-path:inset(62% 0 8% 0);transform:translate(-18px,0);filter:hue-rotate(-80deg) saturate(3)}46%{clip-path:none;transform:scale(1.02,.98);filter:brightness(1.8)}55%{transform:translate(6px,-4px) skewX(4deg);filter:grayscale(1) contrast(2.2)}64%{transform:none;filter:none;clip-path:inset(0 0 70% 0)}72%{clip-path:none;filter:invert(1) hue-rotate(90deg)}82%{filter:brightness(.4) contrast(2);transform:translate(-4px,2px)}100%{filter:brightness(0);transform:none}}
.hw-poweron .hw-glass{transform-origin:50% 50%;animation:hw-poweron .85s cubic-bezier(.2,.8,.2,1)}
@keyframes hw-poweron{0%{transform:scale(.5,.004);filter:brightness(8)}35%{transform:scale(1,.004);filter:brightness(6)}100%{transform:none;filter:none}}
.hw-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
/* The end: the tube burns out like a bulb. A stutter, a flare, then the old CRT switch-off to a single point of light. */
.hw-flicker .hw-glass{animation:hw-flicker 1.5s steps(1) forwards}
.hw-flicker .hw-shell{animation:hw-room 1.5s steps(1) forwards}
@keyframes hw-flicker{0%{filter:none}6%{filter:brightness(2.2)}9%{filter:brightness(.3)}14%{filter:brightness(1.6)}17%{filter:brightness(.05)}24%{filter:none}31%{filter:brightness(2.8) saturate(1.3)}33%{filter:brightness(.1)}41%{filter:brightness(1.4)}48%{filter:brightness(.2)}52%{filter:brightness(3)}55%{filter:brightness(.4)}63%{filter:brightness(2)}70%{filter:brightness(.05)}74%{filter:brightness(3.5)}80%{filter:brightness(.6)}86%{filter:brightness(4)}90%{filter:brightness(1.2)}95%,100%{filter:brightness(5)}}
@keyframes hw-room{0%{filter:none}6%{filter:brightness(1.25)}9%{filter:brightness(.7)}17%{filter:brightness(.55)}24%{filter:none}31%{filter:brightness(1.35)}33%{filter:brightness(.6)}52%{filter:brightness(1.4)}70%{filter:brightness(.55)}74%{filter:brightness(1.5)}86%,100%{filter:brightness(1.6)}}
.hw-flash{background:radial-gradient(circle at var(--hw-cx,50%) var(--hw-cy,50%),#fff 0%,#fff 12%,rgba(236,255,246,.96) 32%,rgba(170,255,220,.7) 58%,rgba(125,255,198,.25) 85%,rgba(125,255,198,.08) 100%)}
.hw-flare .hw-flash{opacity:1;transition:opacity .55s cubic-bezier(.6,0,1,.4)}
.hw-flare .hw-glass{filter:brightness(7) saturate(.5) blur(1px);transition:filter .5s ease-in}
.hw-off .hw-flash{opacity:0;transition:opacity .35s ease-out}
.hw-off .hw-glass{transform-origin:50% 50%;background:#effff7;box-shadow:0 0 40px 10px rgba(200,255,230,.7);animation:hw-collapse .5s cubic-bezier(.7,0,.9,.3) forwards}
.hw-off .hw-scr,.hw-off .hw-more,.hw-off .hw-glass::before,.hw-off .hw-glass::after{visibility:hidden}
@keyframes hw-collapse{0%{transform:none;filter:brightness(7)}45%{transform:scale(1,.004);filter:brightness(9)}100%{transform:scale(.004,.004);filter:brightness(9);opacity:0}}
.hw-off .hw-shell{animation:hw-dark .5s ease forwards}
@keyframes hw-dark{from{filter:brightness(1.6)}to{filter:brightness(.06)}}
.hw-off .hw-led,.hw-off .hw-ctl{opacity:0}
.hw-dot{position:absolute;z-index:6;left:var(--hw-cx,50%);top:var(--hw-cy,50%);width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(220,255,240,.85),0 0 70px 24px rgba(125,255,198,.35);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.hw-off .hw-dot{animation:hw-dot 1.6s ease-out .45s forwards}
@keyframes hw-dot{0%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.15)}}
.hw-done .hw-dot{display:none}
.hw-comm{position:absolute;z-index:2;left:50%;bottom:clamp(64px,13vh,128px);transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.35);text-shadow:0 1px 14px rgba(0,15,25,.6);opacity:0;visibility:hidden;transition:opacity 1.6s ease 2.4s,border-color .3s ease}
.hw-done .hw-comm{opacity:.88;visibility:visible}
.hw-comm:hover,.hw-comm:focus-visible{opacity:1;border-color:#fff}
[data-film] .hw-comm{display:none}
@media(max-width:520px){.hw-comm{font-size:10.5px;letter-spacing:.1em}}
/* The cut into the machine: no divider and no gap. The reader is mid-sentence in the
   principles when the machine takes the page, so the principles are what glitch. */
.hw-rule{display:none}
html.hw-hijacked .ea,html.hw-hijacked .catalog,html.hw-hijacked .doors,html.hw-hijacked .intro{animation:hw-glitch .9s steps(1) forwards}
/* The page keeps 78px under the nav for anchor links; the computer's pages must not, or
   they stop short of the top and the nav never steps aside. */
.hw-snap{scroll-margin-top:-78px}
.bar.hw-away{opacity:0;pointer-events:none}