* { margin: 0; padding: 0; box-sizing: border-box; }
    
    html, body {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;                 /* the visible height (on phones 100vh includes the space under the browser's toolbars) */
        width: 100vw;
    }
    
    #container {
        display: flex;
        width: 100vw;
        max-width: 1400px;
        position: relative;
        height: 100vh;
        height: 100dvh;
        margin: 0 auto;
    }
    
    #overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    #overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .panel {
        position: absolute;
        overflow: visible;
        z-index: 999;
        filter: brightness(.65);                 /* docked panels are dimmed (not made transparent, so the hovercraft can't be seen through them) */
        transition: transform 0.6s ease, width 0.6s ease, height 0.6s ease,
                    top 0.6s ease, left 0.6s ease, right 0.6s ease,
                    filter 0.6s ease;
    }
    
    #leftPanel > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top;
    }

    /* ---- right panel: rebuilt from slices ----
       #rightPanel is a size container so the art box can do the same job
       object-fit:contain used to do (fit the 860x2000 art inside whatever
       box the panel currently is, centered horizontally, top-aligned). */
    #rightPanel { container-type: size; }
    .panel-art {
        position: absolute; top: 0; left: 50%;
        translate: -50% 0;
        width: min(100cqw, calc(100cqh * 0.43));   /* 0.43 = 860 / 2000 */
        aspect-ratio: 860 / 2000;
    }
    .panel-art img { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
    .rp-top { position: absolute; }
    .rp-btn { position: absolute; }
    .rp-btn img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
    /* opacity of the "on" image is driven by the fading-rollover script below */
    .rp-on { opacity: 0; }
    .rp-hit {
        position: absolute; z-index: 2;
        border-radius: 999px;              /* hit area is the pill, not the whole slice */
        pointer-events: none;              /* while docked, clicks fall through so the panel opens first */
        cursor: pointer;
    }
    #rightPanel.active .rp-hit { pointer-events: auto; }
    .rp-hit:focus-visible { outline: 2px solid #ffcf6b; outline-offset: 3px; }
    
    .panel.active {
        cursor: default !important;
        filter: none;
    }
    /* whichever panel is open (or still animating closed) sits in front of the other one */
    .panel.front { z-index: 1000; }

    /* The nav is laid out ONCE, at a fixed design size: the panel art's native
       "screen" area (425 x 1521 px of the 1253 x 1800 image) with a fixed font
       size. site.js then scales the whole thing with a transform to whatever
       size the art currently is. Because the layout never changes, text wraps
       identically and the scrollbar keeps the same proportions at every panel
       size, docked or open (resizing font-size instead made wrapping and the
       scrollbar differ between the two states). */
    #leftPanelContent {
        position: absolute;
        left: 0; top: 0;
        width: 425px; height: 1521px;
        transform-origin: 0 0;
        z-index: 2;
        color: #39ff8a;
        font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        font-size: 22.95pt;
        line-height: 1.6; text-align: left;
        padding: .6em;
        overflow: hidden;
        display: flex; flex-direction: column;              /* the link list scrolls; the Auto-Collapse switch is the last (fixed) row below it */
        pointer-events: none;
        transition: transform 0.6s ease;
    }
    #leftPanelContent .nav-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
    #leftPanel.active #leftPanelContent { pointer-events: auto; }

    #leftPanelContent .nav-scroll::-webkit-scrollbar { width: 22px; }
    #leftPanelContent .nav-scroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 20px #000;
        background-color: #005500;
        border-radius: 11px;
    }
    #leftPanelContent .nav-scroll::-webkit-scrollbar-thumb {
        border-radius: 11px;
        background: #005500;
        -webkit-box-shadow: inset 0 0 5px #000;
    }
    #leftPanelContent .nav-scroll::-webkit-scrollbar-thumb:hover { background: #007700; }
    
    /* Left panel text: the nav styling (accordion headings, green/yellow
       colours, Rajdhani) - but every size is in em, relative to
       #leftPanelContent's own font-size, so the JS that scales that font-size
       with the panel art scales all of this along with it. 1em here = 1.05rem
       in the redesign. */
    #leftPanelContent button { font: inherit; }
    #leftPanelContent .nav-group { margin: 0 0 .15em; }
    #leftPanelContent .nav-group-head { display: flex; align-items: stretch; border-radius: .5em; }
    #leftPanelContent .nav-group-link {
        flex: 1 1 auto; padding: .48em;
        font-family: inherit; font-weight: 600; letter-spacing: .02em;
        text-decoration: none;
    }
    #leftPanelContent .nav-group-link:link,
    #leftPanelContent .nav-group-link:visited { color: #3fe07f; }
    #leftPanelContent .nav-group-link:hover,
    #leftPanelContent .nav-group-link:focus-visible,
    #leftPanelContent .nav-group-link:active {
        background: rgba(57, 255, 138, .12);
        color: #9dffc6;
        text-shadow: 0 0 .6em rgba(57, 255, 138, .45);
    }
    #leftPanelContent .nav-group.current .nav-group-link { text-shadow: 0 0 .6em rgba(57, 255, 138, .35); }
    #leftPanelContent .nav-group-toggle {
        flex: none; display: grid; place-items: center; width: 2em;
        border: none; background: none; color: inherit; cursor: pointer; border-radius: .5em;
    }
    #leftPanelContent .nav-group-toggle { color: #3fe07f; }
    #leftPanelContent .nav-group-toggle:hover { background: rgba(57, 255, 138, .12); color: #9dffc6; }
    #leftPanelContent .nav-group-toggle svg { width: .6em; height: .6em; transform: rotate(0deg); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
    #leftPanelContent .nav-group-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

    #leftPanelContent .nav-links {
        list-style: none; margin: .1em 0 .55em; padding: 0 0 0 1.05em;
        border-left: 1px solid rgba(57, 255, 138, .18);
    }
    #leftPanelContent .nav-links a {
        display: block; padding: .35em .65em; padding-left: calc(.65em + var(--indent, 0) * 1.1em);
        border-radius: .4em; font-family: inherit; font-size: .88em;
        text-decoration: none;
    }
    /* sub-page links: green, and a darker green once visited */
    #leftPanelContent .nav-links a:link { color: #3fe07f; }
    #leftPanelContent .nav-links a:visited { color: #23924f; }
    #leftPanelContent .nav-links a:hover,
    #leftPanelContent .nav-links a:focus-visible,
    #leftPanelContent .nav-links a:active {
        background: rgba(57, 255, 138, .12);
        color: #9dffc6;
        text-shadow: 0 0 .5em rgba(57, 255, 138, .45);
        transform: translateX(.2em);
    }
    /* the page you're on */
    #leftPanelContent .nav-links a.active:link,
    #leftPanelContent .nav-links a.active:visited { color: #b8ffd6; background: rgba(57, 255, 138, .2); box-shadow: inset 2px 0 0 #39ff8a; }
    #leftPanelContent .nav-links a.active:hover,
    #leftPanelContent .nav-links a.active:focus-visible { color: #e6fff0; background: rgba(57, 255, 138, .28); }
    /* headings and entries whose page hasn't been built yet: shown, not linked */
    #leftPanelContent .nav-group-label {
        flex: 1 1 auto; padding: .48em;
        font-weight: 600; letter-spacing: .02em;
        color: rgba(223, 233, 243, .6); cursor: default;
    }
    #leftPanelContent .nav-links .soon {
        display: block; padding: .35em .65em; padding-left: calc(.65em + var(--indent, 0) * 1.1em);
        font-size: .88em; color: #7f9388; cursor: default; opacity: .55;
    }
    #leftPanelContent .nav-links .soon::after {
        content: "soon"; float: right;
        font-size: .68em; letter-spacing: .08em;
        border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: .05em .4em;
    }

    /* "Auto-Collapse" switch, the last row of the panel, below the scrolling link list */
    #leftPanelContent .nav-options { flex: none; padding: .7em .5em .2em; }
    #leftPanelContent .nav-switch { display: flex; align-items: center; gap: .6em; cursor: pointer; font-size: .82em; color: #3fe07f; user-select: none; }
    #leftPanelContent .nav-switch:hover { color: #9dffc6; }
    #leftPanelContent .nav-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    #leftPanelContent .nav-switch-track {
        position: relative; flex: none; width: 2.3em; height: 1.2em; border-radius: 1em;
        background: #06170d; border: 1px solid rgba(57, 255, 138, .45); transition: background .2s, box-shadow .2s;
    }
    #leftPanelContent .nav-switch-track::after {
        content: ""; position: absolute; top: .12em; left: .14em; width: .84em; height: .84em; border-radius: 50%;
        background: #3fe07f; opacity: .55; transition: transform .2s, opacity .2s;
    }
    #leftPanelContent .nav-switch input:checked + .nav-switch-track { background: rgba(57, 255, 138, .2); box-shadow: 0 0 .6em rgba(57, 255, 138, .4); }
    #leftPanelContent .nav-switch input:checked + .nav-switch-track::after { transform: translateX(1.08em); opacity: 1; }
    #leftPanelContent .nav-switch input:focus-visible + .nav-switch-track { outline: 2px solid #9dffc6; outline-offset: 2px; }

    .tab-area {
        position: fixed;
        cursor: pointer;
        z-index: 1001;
        border-radius: 50%;
        background: transparent;
        border: 2px solid transparent;
    }
    
    @media (min-width: 901px) {
        #leftPanel {
            left: 0; top: 0;
            width: 300px; height: auto;
            transform: translateY(150px);
            cursor: pointer;
        }
        #leftPanel img { height: auto; }
        #leftTab { display: none; }
        
        #rightPanel {
            right: 0; top: 0;
            width: 225px; height: auto;
            aspect-ratio: 860 / 2000;
            transform: translateY(89px);
            cursor: pointer;
        }
        #rightTab { display: none; }
        
        #mainCol, #mainBg {
            left: calc(250px + max(0px, 50px - max(0px, 100vw - 1400px) / 2));
            right: calc(150px + max(0px, 75px - max(0px, 100vw - 1400px) / 2));
            width: auto;
        }

        #leftPanel.active img  { object-fit: contain; object-position: left center; }
    }
    
    @media (max-width: 900px) {
        .panel { position: fixed; filter: none; }       /* full brightness: it shows they can be tapped */
        
        #leftPanel {
            left: 0; top: 0;
            width: 240px; height: 345px;
            transform: translateX(-160px);            /* 240px wide, 80px stays in view */
        }
        #leftTab {
            top: 0; left: -10px;
            width: 100px; height: 100px;
        }
        
        #rightPanel {
            right: 0; top: -70px;
            width: 206px; height: 479px;
            transform: translateX(126px);             /* 206px wide, 80px stays in view */
        }
        #rightTab {
            top: 0; right: 0;
            width: 100px; height: 100px;
        }
        
        #mainCol, #mainBg {
            left: 0; right: 0;
        }
        
        #leftPanel > img { object-fit: cover; object-position: left top; }
        .panel.active {
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;       /* the visible height: on phones 100vh is taller than the window while the browser's toolbars are showing */
            transform: translateX(0) !important;
            top: 0 !important;
        }
    }
    
    /* title bar - glass bar, rounded gold-bordered
       title graphic, off/on cross-fade */
    .site-header {
        position: relative; flex: none; z-index: 3;
        display: flex; align-items: center; justify-content: center;
        padding: .6rem .75rem;
    }
    .brand {
        position: relative; display: block;
        flex: 1 1 auto; min-width: 0; max-width: 640px;
        aspect-ratio: 700 / 103;
        border-radius: 12px; overflow: hidden;
        border: 1px solid #7a5f22;
        box-shadow: 0 0 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4);
        background-image: url('../img/buttons/top_off.gif');
        background-size: cover; background-position: center;
    }
    .brand .bright {
        position: absolute; inset: 0;
        background-image: url('../img/buttons/top_on.gif');
        background-size: cover; background-position: center;
        opacity: 0;   /* driven by the fading-rollover script */
    }
    @media (max-width: 900px) {
        /* the two round tabs sit over each end of the bar on narrow screens,
           so keep the title graphic between them instead of underneath */
        .site-header { min-height: 88px; padding-left: 88px; padding-right: 88px; }
    }

    /* a dark void behind, with the artwork texture carried by the
       content panels themselves (see .glass-panel in styles.css).
       Layers, bottom to top: #mainBg (the picture, and the title bar's dark backdrop), #hovercraftLayer (the flying craft),
       #mainCol (the title graphic, and the scrolling content with its scrollbar), then the side panels. */
    #mainBg, #mainCol {
        position: absolute;
        top: 0; bottom: 0;
        padding: 0;
    }
    #mainBg {
        z-index: 0;
        background-color: #03050a;
        /* stills of Zion (docks and city, Io), each shown complete and fading into the next, brightened a little from the old background's
           darkness, made to tile top to bottom and sized to the width of this column */
        background-image: url('../img/bg/bg-zion.jpg');
        background-repeat: repeat-y;
        background-size: 100% auto;
        background-position: left top;
    }
    #mainBg::before {                          /* the title bar's backdrop (its height is set from the header in site.js) */
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hh, 114px);
        background: rgba(7, 10, 16, .94);
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    }
    #mainCol {
        z-index: 1;
        display: flex; flex-direction: column;
        pointer-events: none;                  /* (the empty parts of the column let clicks through to nothing behind it anyway) */
    }
    #mainCol > * { pointer-events: auto; }
    #mainContent {
        position: relative;
        flex: 1 1 auto; min-height: 0;
        overflow-y: auto; overflow-x: hidden;
    }

/* ==========================================================================
   Ambient effects (js/fx.js and the right-panel glows)
   ========================================================================== */
/* digital rain inside the left panel's screen (the art's own green code sits underneath it) */
#matrixRain {
    position: absolute; left: var(--rx, 15.8%); top: var(--ry, 7%); width: var(--rw, 35.5%); height: var(--rh, 85.6%);
    transition: left .6s ease, top .6s ease, width .6s ease, height .6s ease;
    pointer-events: none; opacity: .8; border-radius: 3%;
}
#leftPanelContent { z-index: 1; }
/* the round phone tab: code falls inside the ring (positions are fractions of the 1253 x 1800 art) */
#matrixTab { position: absolute; left: var(--tx, 65.4%); top: var(--ty, 3.06%); width: var(--tw, 31.8%); height: var(--th, 25%); transition: left .6s ease, top .6s ease, width .6s ease, height .6s ease; pointer-events: none; opacity: .9; border-radius: 50%; mix-blend-mode: screen; }

/* right panel: glowing monitors, blinking lights, the Zion sign's pulse. Positions are percentages of the 860 x 2000 art. */
.rp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rp-fx i { position: absolute; display: block; mix-blend-mode: screen; }
.fx-zion {
    background: radial-gradient(ellipse at 47% 52%, rgba(90, 255, 255, .55) 0%, rgba(60, 220, 255, .3) 38%, rgba(40, 180, 255, 0) 68%);
    animation: fx-zion 4.6s ease-in-out infinite;
}
.fx-spark {
    background: radial-gradient(circle, rgba(220, 255, 255, .95) 0%, rgba(80, 210, 255, .45) 35%, rgba(60, 200, 255, 0) 65%);
    opacity: 0; animation: fx-spark 6.3s linear infinite;
}
.fx-mon { overflow: hidden; }
.fx-glow { border-radius: 50%; filter: blur(9px); }
.glow-orange { background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 50, .5), rgba(255, 130, 30, 0) 70%); animation: fx-flicker-o 5.2s steps(1) infinite; }
.glow-blue { background: radial-gradient(ellipse at 50% 50%, rgba(80, 150, 255, .5), rgba(60, 130, 255, 0) 70%); animation: fx-flicker-b 6.1s steps(1) infinite; }
.fx-mon b { position: absolute; left: 0; right: 0; height: 22%; top: -25%; }
.fx-orange { background: rgba(255, 150, 40, .16); clip-path: polygon(3.3% 2.4%, 95.7% 28.7%, 92.4% 98.2%, 3.3% 88.6%); animation: fx-flicker-o 5.2s steps(1) infinite; }
.fx-orange b { transform-origin: 0 0; background: linear-gradient(180deg, rgba(255, 220, 150, 0), rgba(255, 230, 170, .6), rgba(255, 220, 150, 0)); animation: fx-scan-o 3.4s linear infinite; }
.fx-blue { background: rgba(70, 150, 255, .16); border-radius: 6px; animation: fx-flicker-b 6.1s steps(1) infinite; }
.fx-blue b { transform-origin: 0 0; background: linear-gradient(180deg, rgba(170, 215, 255, 0), rgba(190, 225, 255, .6), rgba(170, 215, 255, 0)); animation: fx-scan-b 4.1s linear infinite; }
.fx-led { border-radius: 50%; }
.led-green  { background: radial-gradient(circle, rgba(110, 255, 140, .95) 0%, rgba(60, 255, 110, .5) 40%, rgba(60, 255, 110, 0) 70%); animation: fx-blink 3.2s ease-in-out infinite; }
.led-orange { background: radial-gradient(circle, rgba(255, 190, 90, .95) 0%, rgba(255, 140, 40, .5) 40%, rgba(255, 140, 40, 0) 70%); animation: fx-blink 1.7s ease-in-out infinite .4s; }
.led-yellow { background: radial-gradient(circle, rgba(255, 245, 120, .95) 0%, rgba(255, 220, 60, .5) 40%, rgba(255, 220, 60, 0) 70%); animation: fx-blink 2.3s ease-in-out infinite 1.1s; }
@keyframes fx-zion    { 0%, 100% { opacity: .4; } 50% { opacity: 1; } 62% { opacity: .75; } 66% { opacity: .95; } }
@keyframes fx-spark   { 0%, 84%, 100% { opacity: 0; } 86% { opacity: 1; } 88% { opacity: .2; } 90% { opacity: .9; } 93% { opacity: 0; } }
@keyframes fx-scan-o  { from { top: -25%; transform: skewY(27deg); } to { top: 100%; transform: skewY(11deg); } }   /* the orange screen is slanted (about 27deg at the top, 11deg at the bottom) */
@keyframes fx-scan-b  { from { top: -25%; transform: skewY(-1.4deg); } to { top: 100%; transform: skewY(-1deg); } }
@keyframes fx-flicker-o { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 43% { opacity: 1; } 78% { opacity: .75; } 80% { opacity: 1; } }
@keyframes fx-flicker-b { 0%, 100% { opacity: 1; } 27% { opacity: .6; } 29% { opacity: 1; } 65% { opacity: .8; } 67% { opacity: 1; } }
@keyframes fx-blink   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* lightning around the Zion sign: short jagged arcs that flash at different moments */
.rp-fx .fx-bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-bolts .bolt { fill: none; stroke: #e6ffff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 5px #4fd8ff) drop-shadow(0 0 12px #2aa8ff); }
.bolt.b1 { animation: fx-bolt 5.4s linear infinite; }
.bolt.b2 { animation: fx-bolt 7.1s linear infinite 1.3s; }
.bolt.b3 { animation: fx-bolt 6.3s linear infinite 2.6s; }
.bolt.b4 { animation: fx-bolt 4.7s linear infinite .8s; }
.bolt.b5 { animation: fx-bolt 8.2s linear infinite 3.4s; stroke-width: 2.6; }
.bolt.b6 { animation: fx-bolt 5.9s linear infinite 4.1s; }
.bolt.b7 { animation: fx-bolt 9.3s linear infinite 5.2s; }
@keyframes fx-bolt { 0%, 86%, 100% { opacity: 0; } 87% { opacity: 1; } 88.5% { opacity: .15; } 90% { opacity: .95; } 92% { opacity: 0; } 95% { opacity: .6; } 96% { opacity: 0; } }
.fx-spark.s2 { animation-duration: 7.7s; animation-delay: 2.1s; }
.fx-spark.s3 { animation-duration: 5.1s; animation-delay: 3.3s; }

/* the hovercraft layer: the whole window, above the column's background (#mainBg) and below its content (#mainCol: the title graphic, text, boxes,
   images and the scrollbar) and the side panels. */
#hovercraftLayer { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#hovercraft svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: hc-bob 2.4s ease-in-out infinite; }
#hovercraft .hc-rings { animation: hc-pulse 1.3s ease-in-out infinite; }
#hovercraft .hc-thrust { animation: hc-pulse 0.7s ease-in-out infinite; }
@keyframes hc-bob   { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hc-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rp-fx i, .rp-fx b { animation: none !important; } .fx-zion { opacity: .6; } .fx-spark { opacity: 0; } .led-green, .led-orange, .led-yellow { opacity: .8; } }

/* hovercraft scenes (js/hovercraft.js) */
.hc-sprite { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.hc-sprite svg { display: block; width: 100%; height: auto; overflow: visible; }
.hc-craft .hc-inner { animation: hc-bob 2.6s ease-in-out infinite; }
.hc-craft .hc-rings { transition: opacity .3s; animation: hc-pulse 1.3s ease-in-out infinite; }
.hc-craft .hc-thrust { animation: hc-pulse .7s ease-in-out infinite; }
.hc-off .hc-rings { opacity: .05 !important; animation: none; }
.hc-off .hc-thrust, .hc-off .hc-nose, .hc-off .hc-arc { opacity: 0 !important; animation: none; }
@keyframes hc-bob   { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hc-pulse { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }
/* lightning that flashes around the ring lights ("pads") */
.hc-arc { fill: none; stroke: #eaffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 2px #59d4ff); }
.hc-arc.a1 { animation: hc-zap 2.7s linear infinite; }
.hc-arc.a2 { animation: hc-zap 3.4s linear infinite .9s; }
.hc-arc.a3 { animation: hc-zap 4.1s linear infinite 1.7s; }
@keyframes hc-zap { 0%, 84%, 100% { opacity: 0; } 85% { opacity: 1; } 87% { opacity: .15; } 89% { opacity: 1; } 92% { opacity: 0; } }
/* sentinels (a rendered 3D model with a few overlays) */
.sn-wrap { position: relative; }
.hc-sprite .sn-img { display: block; width: 100%; height: auto; transform-origin: 78% 50%; animation: sn-sway 1.7s ease-in-out infinite alternate; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.hc-sprite .sn-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes sn-sway { from { transform: rotate(-1.4deg) skewY(-1.2deg); } to { transform: rotate(1.4deg) skewY(1.2deg); } }
.hc-sentinel .sn-eyes circle { fill: #ff3030; filter: drop-shadow(0 0 6px #ff2020); animation: hc-pulse .9s ease-in-out infinite; }
.hc-sentinel .sn-radar { opacity: 0; transform-box: view-box; transform-origin: 548px 176px; transform: scaleX(0); transition: transform .5s ease-out, opacity .3s; }
.hc-sentinel.radar-on .sn-radar { opacity: 1; transform: scaleX(1); }
.sn-sweep { transform-box: view-box; transform-origin: 590px 176px; animation: sn-sweep .9s ease-in-out infinite alternate; }
@keyframes sn-sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
/* bullets, sparks, explosions, the bomb */
.hc-fx { position: absolute; pointer-events: none; }
.hc-bullet { width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 220, 140, 0), #ffe9a8, #fff); box-shadow: 0 0 6px 1px #ffd27a; }
.hc-spark { border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd27a 35%, rgba(255, 140, 40, 0) 70%); }
.hc-boom { border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd27a 22%, #ff7a2a 48%, rgba(255, 60, 20, 0) 72%); }
.hc-debris { width: 4px; height: 4px; border-radius: 50%; background: #ffb060; box-shadow: 0 0 5px #ff7a2a; }
.hc-bomb { left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8794a1, #161d25); box-shadow: 0 0 10px 3px rgba(255, 60, 60, .75); }
.hc-ping { border-radius: 50%; border: 2px solid rgba(255, 70, 70, .9); box-shadow: 0 0 12px rgba(255, 60, 60, .6); }
/* the EMP pulse: rings over the whole window */
.hc-emp { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hc-emp-ring { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 4px solid rgba(150, 220, 255, .9);
    box-shadow: 0 0 30px 6px rgba(80, 170, 255, .6), inset 0 0 30px 4px rgba(80, 170, 255, .4); }

/* the EMP switches the website off: dark, inert, and every animation paused (js/hovercraft.js) */
body.mr-off #mainBg, body.mr-off #mainCol, body.mr-off .panel { filter: brightness(.3) saturate(.7); }
body.mr-off #container { pointer-events: none; }
body.mr-off #container *, body.mr-off #container *::before, body.mr-off #container *::after { animation-play-state: paused !important; }

/* title bar: every so often a soft glint sweeps across it, and its gold border breathes very slightly */
.brand::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(105deg, transparent 14%, rgba(255, 244, 200, .025) 30%, rgba(255, 244, 200, .16) 50%, rgba(255, 244, 200, .025) 70%, transparent 86%);
    transform: translateX(-130%); animation: brand-glint 15s ease-in-out infinite 3s;
}
.brand { animation: brand-glow 7s ease-in-out infinite; }
@keyframes brand-glint { 0%, 40% { transform: translateX(-130%); } 91%, 100% { transform: translateX(130%); } }    /* every 15 s; the sweep itself takes about 7.6 s */
@keyframes brand-glow {
    0%, 100% { box-shadow: 0 0 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 0 rgba(255, 190, 80, 0); }
    50%      { box-shadow: 0 0 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 190, 80, .546); }
}
@media (prefers-reduced-motion: reduce) { .brand, .brand::after { animation: none; } }

/* left panel: a tapped link powers up - a bright fill races across it, corner brackets flash, then the panel slides away (site.js / spa.js) */
#leftPanelContent a.zap { position: relative; overflow: hidden; isolation: isolate; color: #f2fff7 !important; text-shadow: 0 0 .5em rgba(120, 255, 180, .9); animation: zap-glow .5s ease-out both; }
#leftPanelContent a.zap::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(57, 255, 138, .12), rgba(57, 255, 138, .55) 60%, rgba(190, 255, 215, .9) 92%, rgba(57, 255, 138, 0));
    transform: scaleX(0); transform-origin: 0 50%; animation: zap-fill .42s cubic-bezier(.2, .8, .2, 1) both;
}
#leftPanelContent a.zap::after {
    content: ""; position: absolute; inset: 1px; pointer-events: none; border: 1px solid rgba(190, 255, 215, .85); border-radius: .3em;
    clip-path: polygon(0 0, 22% 0, 22% 100%, 0 100%, 0 0, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% 0);
    animation: zap-brackets .5s ease-out both;
}
@keyframes zap-fill { to { transform: scaleX(1); } }
@keyframes zap-glow { 0% { box-shadow: 0 0 0 rgba(57, 255, 138, 0); } 45% { box-shadow: 0 0 1.1em rgba(57, 255, 138, .75); } 100% { box-shadow: 0 0 .5em rgba(57, 255, 138, .5); } }
@keyframes zap-brackets { 0% { opacity: 0; transform: scale(1.12); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: .55; } }
#leftPanelContent .nav-links li, #leftPanelContent .nav-group-head { position: relative; }

/* the sentinels' red lasers (swarm scene) */
.hc-laser { height: 2px; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, #ff8a8a, #ff2a2a); box-shadow: 0 0 6px 1px rgba(255, 40, 40, .8); }
.hc-laser-hit { border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ff7070 35%, rgba(255, 40, 40, 0) 70%); }

/* the sentinel's giant radar and its waves (in front of the page, js/hovercraft.js) */
.hc-bigradar { position: absolute; }
.hc-laser { transform-origin: 0 50%; }
.hc-bigradar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hc-bigradar g { transform-box: view-box; }
.hc-br-arm { fill: #6f8497; stroke: #0b1822; stroke-width: 1.2; }
.hc-br-joint { fill: #9db3c5; stroke: #0b1822; stroke-width: 1; }
.hc-br-dish { fill: rgba(150, 175, 195, .7); stroke: #cfe6f6; stroke-width: 8; stroke-linecap: round; }
.hc-br-rib { stroke: #5c7387; stroke-width: 3; }
.hc-br-horn { stroke: #b9d0e2; stroke-width: 9; stroke-linecap: round; }
.hc-br-tip { fill: #ff4a4a; filter: drop-shadow(0 0 5px #ff2020); }
.hc-wave { position: absolute; width: 26px; border: 0 solid transparent; pointer-events: none; }
.hc-wave.out  { border-right: 4px solid rgba(255, 90, 90, .9);  border-radius: 0 100% 100% 0 / 0 50% 50% 0; filter: drop-shadow(0 0 5px rgba(255, 60, 60, .8)); }
.hc-wave.back { border-left: 3px solid rgba(120, 225, 255, .8); border-radius: 100% 0 0 100% / 50% 0 0 50%;  filter: drop-shadow(0 0 5px rgba(80, 200, 255, .7)); }

/* The left panel's close button (desktop and phone): the panel's top knob. Its round face is redrawn as if lit from inside - a red "x" glows in
   it and the light seeps out around its edge. Everything is measured in pixels of the 1253 x 1800 art (--ak = screen px per art px, set in
   site.js), and the button only exists while the panel is open. */
#leftClose {
    position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer;
    left: calc((749 - 50) * var(--ak, 0) * 1px); top: calc((524 - 50) * var(--ak, 0) * 1px);
    width: calc(100 * var(--ak, 0) * 1px); height: calc(100 * var(--ak, 0) * 1px);
    opacity: 0; pointer-events: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#leftPanel.active #leftClose { opacity: 1; pointer-events: auto; transition: opacity .3s .5s; }      /* appears once the panel has finished opening */
#leftClose::before {                                  /* the knob's face: grey metal with the red light behind it */
    content: ""; position: absolute; left: 50%; top: 50%; width: 47%; height: 47%; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 80, 64, .5) 0, rgba(255, 70, 56, .2) 52%, rgba(255, 60, 50, 0) 80%),
                radial-gradient(ellipse at 42% 28%, #6d7278 0, #50545a 58%, #3b3e43 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 160, 170, .3), inset 0 0 9px rgba(255, 60, 48, .5), 0 0 7px rgba(255, 60, 48, .32);
    animation: lc-glow 3.2s ease-in-out infinite;
    transition: transform .12s;
}
#leftClose::after {                                   /* the "x": a lit red stroke */
    content: ""; position: absolute; left: 50%; top: 50%; width: 27%; height: 27%; transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a5c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 2px rgba(255, 50, 40, 1)) drop-shadow(0 0 5px rgba(255, 40, 30, .75));
}
@keyframes lc-glow { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.18); } }
#leftClose:active::before { transform: translate(-50%, -48%) scale(.96); }
#leftClose:active::after { transform: translate(-50%, -47%); }
#leftClose:focus-visible { outline: 2px solid #ffb0a8; outline-offset: -10px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { #leftClose::before { animation: none; } }

/* the Mnemosyne's tail: the segments sway one after the other, like a sentinel's armour */
.mn-seg { transform-box: fill-box; transform-origin: 100% 50%; animation: mn-sway 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.2s); }
@keyframes mn-sway { 0%, 100% { transform: translateY(-3px) rotate(-2.5deg); } 50% { transform: translateY(3px) rotate(2.5deg); } }
.hc-off .mn-seg { animation-play-state: paused; }