* { 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, clip-path 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; margin-right: .9em;                /* (the highlight stops short of the scrollbar) */
    }
    /* sub-page links: green, and a darker green once visited */
    #leftPanelContent .nav-links a { color: #3fe07f; transition: color .6s; }
    #leftPanel.active #leftPanelContent .nav-links a.seen { color: #23924f; }         /* pages already opened (js/spa.js) are darker, only while the panel is open */
    #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,
    #leftPanel.active #leftPanelContent .nav-links a.active.seen { color: #b8ffd6; background: rgba(57, 255, 138, .2); }
    #leftPanelContent .nav-links a.active:hover,
    #leftPanelContent .nav-links a.active:focus-visible,
    #leftPanel.active #leftPanelContent .nav-links a.active.seen:hover { color: #e6fff0; background: rgba(57, 255, 138, .28); }
    #leftPanel.active #leftPanelContent .nav-links a.seen:hover,
    #leftPanel.active #leftPanelContent .nav-links a.seen:focus-visible { color: #9dffc6; }
    /* the main (overview) pages get the same highlight as the sub-pages */
    #leftPanelContent .nav-group-link.active { color: #b8ffd6; background: rgba(57, 255, 138, .2); }
    #leftPanelContent .nav-group-link.active:hover,
    #leftPanelContent .nav-group-link.active:focus-visible { color: #e6fff0; background: rgba(57, 255, 138, .28); }
    /* while the panel rests, the page you're on pulses between a solid mid green and a brighter one (never fading out) */
    @keyframes navPulse {
        0%, 100% { background: rgba(57, 255, 138, .26); box-shadow: inset 0 0 0 1px rgba(57, 255, 138, .45); }
        50%      { background: rgba(57, 255, 138, .5);  box-shadow: inset 0 0 0 1px rgba(120, 255, 180, .8), 0 0 .8em rgba(57, 255, 138, .4); }
    }
    #leftPanelContent .nav-links a.active,
    #leftPanelContent .nav-group-link.active { animation: navPulse 2.6s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { #leftPanelContent .nav-links a.active, #leftPanelContent .nav-group-link.active { animation: none; background: rgba(57, 255, 138, .34); } }
    /* 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(99px);
            cursor: pointer;
        }
        #leftPanel img { height: auto; }
        #leftTab { display: none; }
        
        #rightPanel {
            right: 0; top: 0;
            width: 225px; height: auto;
            aspect-ratio: 860 / 2000;
            transform: translateY(51px);
            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;
        }

        /* the docked panel's width and the content column's margin are meant to meet exactly (they're both 300px / 225px at this size), but they come from
           two independent calc() chains, so sub-pixel rounding can let the docked panel's hit area creep a hair onto the scrollbar next to it - it's a
           transparent PNG there, so the click just vanishes. Clipping each panel a couple of px back from that seam keeps its hit-test off the scrollbar
           for good; the sliver lost is inside the panel's own dead space, not the visible art. */
        #leftPanel:not(.active)  { clip-path: inset(0 2px 0 0); }
        #rightPanel:not(.active) { clip-path: inset(0 0 0 2px); }

        #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, which starts at the very top of the page, behind the title bar), #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-1.jpg');
        background-repeat: repeat-y;
        background-size: 100% auto;
        background-position: left top;
    }
    #mainBg.bg1 { background-image: url('../img/bg/bg-zion-1.jpg'); }     /* two pictures of Zion and its docks, two of the machines' real world; each page uses one */
    #mainBg.bg2 { background-image: url('../img/bg/bg-zion-2.jpg'); }
    #mainBg.bg3 { background-image: url('../img/bg/bg-machines-1.jpg'); }
    #mainBg.bg4 { background-image: url('../img/bg/bg-machines-2.jpg'); }
    #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, .16) 0, rgba(255, 70, 56, .07) 55%, 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 4px rgba(255, 60, 48, .22), 0 0 3px rgba(255, 60, 48, .14);
    animation: lc-glow 3.6s 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 1px rgba(255, 50, 40, .8));
}
@keyframes lc-glow { 0%, 100% { filter: brightness(.96); } 50% { filter: brightness(1.05); } }
#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 right (Zion) panel's close button: a hatch in the tower's top band, centred on the tower (where the band faces us square-on). It's as worn as
   everything round it: the doors painted the band's teal and flaking to rust, the knob dull oxidised steel with rust stains, grime and scratches, its
   red "x" an old, dirty indicator lamp. The rust, grime and scratches are generated textures (SVG noise), so no image files are needed. When the panel
   opens, the doors slide apart into the tower and the knob rises up out of the recess; when it closes, it all goes back in. Positioned in %, like
   everything else in this panel (a fraction of the 860x2000 source art). */
#rightClose {
    position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer;
    opacity: 0; pointer-events: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#rightPanel.active #rightClose { opacity: 1; pointer-events: auto; transition: opacity .2s .45s; }      /* the (closed) hatch shows once the panel has opened */
#rightClose > span { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
#rightClose .rc-recess {                               /* the hole in the tower: dark and grimy, a rough steel lip */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter color-interpolation-filters='sRGB' id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .04  0 0 0 0 .03  2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)'/%3E%3C/svg%3E") center / 60% repeat, radial-gradient(circle at 50% 42%, #14110f 0, #070605 72%);
    box-shadow: inset 0 3px 4px rgba(0, 0, 0, .95), 0 0 0 1.5px rgba(95, 88, 78, .8), 0 0 0 2.5px rgba(15, 12, 10, .85), 0 1px 2px 2px rgba(0, 0, 0, .35);
}
#rightClose .rc-door {                                 /* the doors: the band's teal paint, flaking to rust, grimy */
    background: radial-gradient(circle at 32% 24%, rgba(255, 240, 220, .1) 0, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .42) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter color-interpolation-filters='sRGB' id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .04  0 0 0 0 .03  2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)'/%3E%3C/svg%3E") center / 55% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter color-interpolation-filters='sRGB' id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.13' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .17  0 0 0 0 .08  7 0 0 0 -4.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E") 30% 60% / 70% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter color-interpolation-filters='sRGB' id='r' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .13  0 0 0 0 .06  8 0 0 0 -3.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E") 20% 30% / 210% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='rgba(210,200,185,.28)' stroke-width='.7' fill='none'%3E%3Cpath d='M14 30 L46 22'/%3E%3Cpath d='M60 70 L86 58'/%3E%3Cpath d='M30 80 L52 76'/%3E%3C/g%3E%3Cg stroke='rgba(0,0,0,.45)' stroke-width='.6' fill='none'%3E%3Cpath d='M15 31 L47 23'/%3E%3Cpath d='M61 71 L87 59'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat,
                linear-gradient(170deg, #357a84 0%, #25606a 45%, #173f46 100%);
    box-shadow: inset 0 0 0 1px rgba(10, 16, 18, .85), inset 1px 1.5px 1px rgba(190, 225, 225, .14), inset -1px -1.5px 1.5px rgba(0, 0, 0, .55);
    transition: transform .3s cubic-bezier(.5, 0, .7, 1), opacity .3s;
}
#rightClose .rc-l { clip-path: inset(0 50% 0 0); }
#rightClose .rc-r { clip-path: inset(0 0 0 50%); }
#rightClose .rc-r::after { content: ""; position: absolute; top: 3%; bottom: 3%; left: 0; width: 50.8%; border-right: 1.5px solid rgba(8, 10, 10, .9); }   /* (the seam between the doors) */
#rightPanel.active #rightClose .rc-l { transform: translateX(-58%); opacity: 0; transition: transform .32s .7s cubic-bezier(.3, 0, .5, 1), opacity .1s .92s; }   /* slide apart, into the tower */
#rightPanel.active #rightClose .rc-r { transform: translateX(58%); opacity: 0; transition: transform .32s .7s cubic-bezier(.3, 0, .5, 1), opacity .1s .92s; }
#rightClose .rc-knob {                                 /* the button: a dull, rust-stained steel knob in a worn collar, its red lamp dimmed with grime */
    inset: 9%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' stroke='%23d0473a' stroke-width='3'/%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' stroke='%23ffb09a' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") center / 56% no-repeat, radial-gradient(circle at 32% 24%, rgba(255, 240, 220, .1) 0, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .42) 100%), 
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter color-interpolation-filters='sRGB' id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .04  0 0 0 0 .03  2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)'/%3E%3C/svg%3E") center / 50% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter color-interpolation-filters='sRGB' id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.13' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .17  0 0 0 0 .08  7 0 0 0 -4.1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E") 70% 20% / 80% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter color-interpolation-filters='sRGB' id='r' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .13  0 0 0 0 .06  8 0 0 0 -3.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E") 60% 40% / 240% repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='rgba(210,200,185,.28)' stroke-width='.7' fill='none'%3E%3Cpath d='M14 30 L46 22'/%3E%3Cpath d='M60 70 L86 58'/%3E%3Cpath d='M30 80 L52 76'/%3E%3C/g%3E%3Cg stroke='rgba(0,0,0,.45)' stroke-width='.6' fill='none'%3E%3Cpath d='M15 31 L47 23'/%3E%3Cpath d='M61 71 L87 59'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat,
                radial-gradient(circle at 50% 50%, rgba(220, 70, 55, .22) 0, rgba(220, 70, 55, 0) 50%),
                radial-gradient(circle at 38% 32%, rgba(230, 220, 200, .16) 0, rgba(230, 220, 200, 0) 22%),
                radial-gradient(circle at 42% 38%, #7c7670 0, #5a5550 40%, #3a3632 75%, #1f1c1a 100%);
    box-shadow: inset 0 0 0 1.5px #6e6760, inset 0 0 0 3px #1e1b18, inset -2px -3px 4px rgba(0, 0, 0, .6), inset 1px 1px 1px rgba(200, 190, 175, .2), 0 0 4px rgba(210, 60, 45, .18);
    transform: scale(.55); opacity: 0;
    transition: transform .25s cubic-bezier(.4, 0, 1, 1), opacity .2s;
}
#rightPanel.active #rightClose .rc-knob {
    transform: scale(1); opacity: 1;
    box-shadow: inset 0 0 0 1.5px #6e6760, inset 0 0 0 3px #1e1b18, inset -2px -3px 4px rgba(0, 0, 0, .6), inset 1px 1px 1px rgba(200, 190, 175, .2), 0 0 4px rgba(210, 60, 45, .18), 1px 2px 3px rgba(0, 0, 0, .75);
    transition: transform .38s 1.02s cubic-bezier(.2, 1.4, .4, 1), opacity .15s 1.02s;
    animation: rc-lamp 4.2s 1.5s ease-in-out infinite;
}
@keyframes rc-lamp { 0%, 100% { filter: brightness(.95); } 47% { filter: brightness(1.04); } 50% { filter: brightness(.8); } 53% { filter: brightness(1.02); } }   /* (an old lamp: a faint pulse, and now and then a flicker) */
#rightClose:active .rc-knob { transform: scale(.93); }
#rightClose:focus-visible { outline: 2px solid #ffb0a8; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
    #rightPanel.active #rightClose .rc-l, #rightPanel.active #rightClose .rc-r, #rightPanel.active #rightClose .rc-knob { transition: none; }
    #rightPanel.active #rightClose .rc-knob { 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; }

/* the digital rain in the round phone sign falls behind the phone: the canvas is cut out along the phone's outline */
#matrixTab { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='819.6 55.08 398.4 450' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M1183.8 307.9 L1181.0 325.5 L1177.0 342.9 L1171.8 359.9 L1165.5 376.3 L1158.1 392.0 L1149.6 406.9 L1140.2 421.0 L1129.9 434.0 L1118.7 445.9 L1106.9 456.6 L1094.3 466.1 L1081.3 474.1 L1067.7 480.8 L1053.9 486.0 L1039.7 489.7 L1025.5 491.8 L1011.2 492.4 L997.0 491.5 L983.0 489.0 L969.3 484.9 L956.0 479.4 L943.2 472.4 L931.0 464.0 L919.5 454.3 L908.7 443.3 L898.9 431.1 L889.9 417.8 L882.0 403.6 L875.1 388.4 L869.4 372.5 L864.8 356.0 L861.4 338.9 L859.3 321.5 L858.3 303.8 L858.7 285.9 L860.2 268.1 L863.0 250.5 L867.0 233.1 L872.2 216.1 L878.5 199.7 L885.9 184.0 L894.4 169.1 L903.8 155.0 L914.1 142.0 L925.3 130.1 L937.1 119.4 L949.7 109.9 L962.7 101.9 L976.3 95.2 L990.1 90.0 L1004.3 86.3 L1018.5 84.2 L1032.8 83.6 L1047.0 84.5 L1061.0 87.0 L1074.7 91.1 L1088.0 96.6 L1100.8 103.6 L1113.0 112.0 L1124.5 121.7 L1135.3 132.7 L1145.1 144.9 L1154.1 158.2 L1162.0 172.4 L1168.9 187.6 L1174.6 203.5 L1179.2 220.0 L1182.6 237.1 L1184.7 254.5 L1185.7 272.2 L1185.3 290.1z M888 262 L899 243 L921 226 L955 208 L996 198 L1040 193 L1088 192 L1114 202 L1127 222 L1129 238 L1118 252 L1131 272 L1148 304 L1157 330 L1157 354 L1145 370 L1118 380 L1075 393 L1040 404 L1018 392 L988 372 L950 352 L920 336 L905 352 L880 362 L858 350 L852 326 L858 300 L872 283z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='819.6 55.08 398.4 450' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M1183.8 307.9 L1181.0 325.5 L1177.0 342.9 L1171.8 359.9 L1165.5 376.3 L1158.1 392.0 L1149.6 406.9 L1140.2 421.0 L1129.9 434.0 L1118.7 445.9 L1106.9 456.6 L1094.3 466.1 L1081.3 474.1 L1067.7 480.8 L1053.9 486.0 L1039.7 489.7 L1025.5 491.8 L1011.2 492.4 L997.0 491.5 L983.0 489.0 L969.3 484.9 L956.0 479.4 L943.2 472.4 L931.0 464.0 L919.5 454.3 L908.7 443.3 L898.9 431.1 L889.9 417.8 L882.0 403.6 L875.1 388.4 L869.4 372.5 L864.8 356.0 L861.4 338.9 L859.3 321.5 L858.3 303.8 L858.7 285.9 L860.2 268.1 L863.0 250.5 L867.0 233.1 L872.2 216.1 L878.5 199.7 L885.9 184.0 L894.4 169.1 L903.8 155.0 L914.1 142.0 L925.3 130.1 L937.1 119.4 L949.7 109.9 L962.7 101.9 L976.3 95.2 L990.1 90.0 L1004.3 86.3 L1018.5 84.2 L1032.8 83.6 L1047.0 84.5 L1061.0 87.0 L1074.7 91.1 L1088.0 96.6 L1100.8 103.6 L1113.0 112.0 L1124.5 121.7 L1135.3 132.7 L1145.1 144.9 L1154.1 158.2 L1162.0 172.4 L1168.9 187.6 L1174.6 203.5 L1179.2 220.0 L1182.6 237.1 L1184.7 254.5 L1185.7 272.2 L1185.3 290.1z M888 262 L899 243 L921 226 L955 208 L996 198 L1040 193 L1088 192 L1114 202 L1127 222 L1129 238 L1118 252 L1131 272 L1148 304 L1157 330 L1157 354 L1145 370 L1118 380 L1075 393 L1040 404 L1018 392 L988 372 L950 352 L920 336 L905 352 L880 362 L858 350 L852 326 L858 300 L872 283z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* severed, live wires hanging from the torn cylinder of the right panel (they swing a little; now and then one arcs) */
.rp-fx .fx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-wires .wire { transform-box: view-box; animation: wire-swing 4s ease-in-out infinite; }
.fx-wires .w2 { animation-duration: 3.1s; animation-delay: -.7s; }
.fx-wires .w3 { animation-duration: 5.2s; animation-delay: -2.1s; }
.fx-wires .w4 { animation-duration: 6.3s; animation-delay: -3.4s; }
.fx-wires .w5 { animation-duration: 3.7s; animation-delay: -1.5s; animation-name: wire-swing-b; }
.fx-wires .w6 { animation-duration: 4.6s; animation-delay: -.4s; animation-name: wire-swing-b; }
.fx-wires .cable { fill: none; stroke: #0c0f13; stroke-linecap: round; }
.fx-wires .sheen { fill: none; stroke: #59656f; stroke-width: 1; stroke-linecap: round; opacity: .75; }
.fx-wires .copper { fill: none; stroke: #e0a464; stroke-width: 2.2; stroke-linecap: round; }
.fx-wires .arc { fill: none; stroke: #fff4c4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 3px #7fb8ff) drop-shadow(0 0 6px #4a86ff); }
.fx-wires .arc.a1 { animation: wire-zap 5.3s linear infinite 1.2s; }
.fx-wires .arc.a2 { animation: wire-zap 7.9s linear infinite 3.9s; }
.fx-wires .arc.a3 { animation: wire-zap 6.4s linear infinite 5.6s; }
.fx-wires .arc.a4 { animation: wire-zap 9.1s linear infinite 2.4s; }
@keyframes wire-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6.5deg); } }
@keyframes wire-swing-b { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-7deg); } }
@keyframes wire-zap { 0%, 90%, 100% { opacity: 0; } 91% { opacity: 1; } 92.5% { opacity: .15; } 94% { opacity: 1; } 96% { opacity: .3; } 97.5% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-wires .wire, .fx-wires .arc { animation: none; } }

/* the tow bomb: it rocks a little, its legs flex and its amber lamps flicker */
.hc-towbomb svg { display: block; width: 100%; height: auto; animation: tb-rock 1.7s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 70, 40, .45)); }
.tb-leg { transform-box: view-box; animation: tb-leg 1.3s ease-in-out infinite; }
.tb-lamp { animation: tb-blink 1.1s ease-in-out infinite; }
@keyframes tb-rock { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes tb-leg { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes tb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* Neo's coat flaps in the wind (skyscraper scene) */
.jm-flap { transform-box: view-box; animation: jm-flap .2s ease-in-out infinite; }
.jm-flap.b { animation-delay: -.07s; }
.jm-flap.c { animation-delay: -.13s; }
@keyframes jm-flap { 0%, 100% { transform: scaleY(.85) skewY(3deg); } 50% { transform: scaleY(1.3) skewY(-7deg); } }

/* now and then, deep in the green code: a blonde, a brunette, a redhead (js/site.js) */
#leftFaces { position: absolute; z-index: 1;      /* above the falling code, below the panel's text (#leftPanelContent is z-index 2) */ pointer-events: none; overflow: hidden;
    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; }
#leftFaces .lf { position: absolute; width: 17%; height: auto; image-rendering: pixelated; opacity: 0; }

/* Previous / Next: two wide buttons at the top of the first Explore area (the original blue Previous and red Next) */
.site-main .crosslink-pn { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .3rem .1rem .9rem; }
.site-main .crosslink-pn a { position: relative; display: block; padding: .7rem 1.5rem; border-radius: 999px; text-align: center; text-decoration: none; font-size: 1rem; font-weight: 600; line-height: 1.25; }   /* a capsule, like the red and blue pills */
.site-main .crosslink-pn a small { display: block; margin-bottom: .15rem; font: 600 .6rem/1.2 var(--font-head); letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.site-main .crosslink-pn .pn-prev small::before { content: "\25C0\00a0\00a0"; }
.site-main .crosslink-pn .pn-next small::after { content: "\00a0\00a0\25B6"; }
.site-main .crosslink-pn .pn-prev {
    color: #8ec2ff; border: 1px solid rgba(120, 170, 255, .55); border-bottom-color: rgba(10, 30, 90, .9);
    background: linear-gradient(180deg, rgba(120, 170, 255, .34) 0%, rgba(60, 110, 220, .2) 45%, rgba(20, 50, 130, .3) 100%);
    box-shadow: inset 0 1px 0 rgba(215, 230, 255, .5), inset 0 -4px 6px rgba(0, 10, 60, .4), 0 4px 0 #0d1d4a, 0 6px 0 rgba(0, 0, 0, .55), 0 12px 14px rgba(0, 0, 0, .55);
    transform: translateY(-3px); text-shadow: 0 1px 0 rgba(0, 10, 60, .8);
}
.site-main .crosslink-pn .pn-next {
    color: #ff6b6b; border: 1px solid rgba(255, 150, 150, .55); border-bottom-color: rgba(110, 15, 25, .9);
    background: linear-gradient(180deg, rgba(255, 130, 130, .38) 0%, rgba(220, 60, 70, .2) 45%, rgba(130, 25, 35, .3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 215, 215, .5), inset 0 -4px 6px rgba(60, 0, 8, .4), 0 4px 0 #4a0d15, 0 6px 0 rgba(0, 0, 0, .55), 0 12px 14px rgba(0, 0, 0, .55);
    transform: translateY(-3px); text-shadow: 0 1px 0 rgba(60, 0, 8, .8);
}
.site-main .crosslink-pn a:hover, .site-main .crosslink-pn a:focus-visible { filter: brightness(1.25); outline: none; }
.site-main .crosslink-pn a:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, .6); }
@media (max-width: 560px) { .site-main .crosslink-pn { grid-template-columns: 1fr; } }

/* the cockpit window: lit, with the crew's silhouettes; dark and empty when the craft is powered down */
.hc-sprite .hc-dead { fill: #03070c; opacity: 0; transition: opacity .1s; }
.hc-sprite .hc-lit { transition: opacity .1s; }
.hc-off .hc-dead { opacity: .97; }
.hc-off .hc-lit { opacity: 0; }