/* Formatting only - all positioning/sizing is in HTML inline styles */

body {
    background: #000000;
    color: #77bbff;
    font-family: arial;
    font-size: 10pt;
    scrollbar-face-color: #111144;
    scrollbar-shadow-color: #111144;
    scrollbar-highlight-color: #1166cc;
    scrollbar-3dlight-color: #111144;
    scrollbar-darkshadow-color: #000016;
    scrollbar-track-color: #260000;
    scrollbar-arrow-color: #882200;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-border-radius: 10px;
    background-color: #550000;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #000077;
    -webkit-box-shadow: inset 0 0 5px #000000;
}

::-webkit-scrollbar-thumb:hover {
    background: #000099;
}

h1 {
    font-size: 12pt;
    font-family: arial;
    color: #aaaaaa;
    font-variant: small-caps;
    background-image: url(https://matrixresolutions.com/img/bg/headingbar.gif);
    background-repeat: repeat;
}

h2 {
    font-style: italic;
    font-size: 10pt;
    font-family: arial;
    color: #5555ff;
}

pre {
    font-size: 8pt;
}

p {
    text-align: justify;
    color: #77bbff;
    font-family: arial;
    font-size: 10pt;
}

div {
    text-align: justify;
}

.j {
    text-align: justify;
}

.jrot {
    text-align: justify;
    color: #555555;
}

.blue {
    text-decoration: none;
    color: #4444dd;
    font-family: arial;
    font-size: 9pt;
}

.red {
    text-decoration: none;
    color: #cc4444;
    font-family: arial;
    font-size: 9pt;
}

A:link {
    text-decoration: none;
    color: #ff4444;
    font-family: arial;
}

A:visited {
    text-decoration: none;
    color: #aa0000;
    font-family: arial;
}

A:active {
    text-decoration: none;
    color: #ff66bb;
    font-family: arial;
}

A:hover {
    text-decoration: none;
    color: #ff8866;
    font-family: arial;
}

table.adv {
    border-width: 1px;
    border-spacing: 0px;
    border-style: dashed;
    border-color: #ffffff;
    border-collapse: separate;
    background-image: url(https://matrixresolutions.com/img/bg/tdblue.gif);
    background-repeat: repeat;
}

td.adv {
    color: #ffffff;
    font-family: arial;
    font-size: 8pt;
    vertical-align: top;
}

span.dynamic_adv_right {
    width: 120px;
    border-width: 1px;
    border-style: dashed;
    border-color: #ffffff;
    color: #ffffff;
    font: 8pt Arial, sans-serif;
    vertical-align: top;
    text-align: justify;
    padding: 5px;
    margin: 5px;
    float: right;
}

span.dynamic_adv_left {
    width: 120px;
    border-width: 1px;
    border-style: dashed;
    border-color: #ffffff;
    color: #ffffff;
    font: 8pt Arial, sans-serif;
    vertical-align: top;
    text-align: justify;
    padding: 5px;
    margin: 5px;
    float: left;
}

th {
    color: #aaaaaa;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    align: center;
    background-image: url(https://matrixresolutions.com/img/bg/tdred.gif);
    background-repeat: repeat;
}

td.blank {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: none;
}

td.noquote {
    color: #77bbff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: none;
}

td.yellow {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdyellow.gif);
    background-repeat: repeat;
}

td.green {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdgreen.gif);
    background-repeat: repeat;
}

td.turquoise {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdturquoise.gif);
    background-repeat: repeat;
}

td.blue {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdblue.gif);
    background-repeat: repeat;
}

td.purple {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdpurple.gif);
    background-repeat: repeat;
}

td.red {
    color: #ffffff;
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-image: url(https://matrixresolutions.com/img/bg/tdred.gif);
    background-repeat: repeat;
}

td.quoteblue {
    padding: 12px;
    color: #ffffff;
    background-image: url(https://matrixresolutions.com/img/bg/quote.gif);
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-repeat: repeat;
    background-position: 0px 0px;
}

td.quotered {
    padding: 12px;
    color: #ffffff;
    background-image: url(https://matrixresolutions.com/img/bg/quote.gif);
    font-family: arial;
    font-size: 10pt;
    vertical-align: top;
    background-repeat: repeat;
    background-position: 0px 280px;
}

dt {
    font-weight: bold;
    text-align: justify;
}

dd {
    text-align: justify;
    margin-left: 1em;
    padding-left: 1em;
}

ul {
    margin-left: 1em;
    padding-left: 1em;
}

ol {
    margin-left: 1em;
    padding-left: 1em;
}

.view {
    cursor: url("https://matrixresolutions.com/img/buttons/mag.cur"), default;
    text-decoration: none;
    color: #44ff44;
    font-family: arial;
}

img.navigatered {
    opacity: 0.4;
}

img.navigatered:hover {
    opacity: 1;
    animation: opac 0.5s;
}

@keyframes opac {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

img.navigateblue {
    opacity: 0.4;
}

img.navigateblue:hover {
    opacity: 1;
    animation: opac 0.5s;
}


/* ==========================================================================
   Main content text styling - 
   Rajdhani body / Orbitron headings, blue headings with glow, red bold links,
   the tiled-background quote box, lists. Scoped to .site-main so it only
   affects the content column.
   ========================================================================== */
:root {
    --matrix-green: #39ff8a;
    --matrix-hover: #ffe600;
    --zion-blue: #7db6ff;
    --zion-blue-glow: rgba(125, 182, 255, .3);
    --zion-red: #ff6161;
    --text: #77bbff;
    --text-dim: #92a5ba;
    --glass-border: rgba(255, 255, 255, .09);
    --glass-border-strong: rgba(255, 255, 255, .2);
    --machine-gold: #ffb84d;
    --font-head: 'Orbitron', 'Rajdhani', sans-serif;      /* a page can override these two (see build.py "fonts") */
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
}

.site-main {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
    text-align: left;
}

/* the column of panels */
.site-main {
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 800px; margin: 0 auto; padding: 20px 20px 24px;
    --panel-accent: var(--zion-blue);
}

/* glass panels: rounded, hairline border, blurred backdrop, and a bracket in the
   top-left and bottom-right corners */
.glass-panel {
    position: relative;
    background: rgba(10, 15, 24, .82);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    padding: 1.6rem 1.8rem;
}
.glass-panel::before, .glass-panel::after {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--panel-accent, var(--zion-blue));
    opacity: .8;
    pointer-events: none;
}
.glass-panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; border-radius: 6px 0 0 0; }
.glass-panel::after  { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 6px 0; }
/* content panels carry the original main-window texture, under a dark wash for legibility;
   they fade up as they scroll into view (see site.js) */
.site-main .glass-panel {
    /* semi-transparent: the artwork on #mainContent stays fixed while the panels scroll over it */
    background: linear-gradient(160deg, rgba(4, 10, 22, .34), rgba(2, 6, 14, .5));
    -webkit-backdrop-filter: none; backdrop-filter: none;       /* no blur: the artwork behind stays sharp */
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.site-main .glass-panel.in-view { opacity: 1; transform: none; }
.site-main .glass-panel > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .site-main .glass-panel { transition: none; opacity: 1; transform: none; }
}

.site-main h1, .site-main h2, .site-main h3 {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .04em;
    font-variant: normal;
    font-style: normal;
    background: none;
    margin: 0 0 .6em;
}
.site-main h1 {
    color: var(--zion-blue);
    text-shadow: 0 0 20px var(--zion-blue-glow);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}
.site-main h2 {
    color: var(--zion-blue);
    font-size: 1.25rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: .4rem;
}

.site-main p { color: var(--text); font-family: inherit; font-size: inherit; text-align: left; margin: 0 0 1em; }
.site-main .lede { color: var(--text-dim); font-size: 1.05rem; }
.site-main .tag-line { color: var(--text-dim); font-family: var(--font-head); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }

/* in-text links: the original site's red family, bold, never underlined */
.site-main a { color: #ff4444; text-decoration: none; font-weight: 700; font-family: inherit; }
.site-main a:visited { color: #aa0000; }
.site-main a:hover, .site-main a:focus-visible { color: color-mix(in srgb, #ff4444 70%, white 30%); }
.site-main a:active { color: #ff66bb; }

/* quote box: centered and narrower than the column, text left-aligned, on the
   original hand-made hovercraft/digger tile (.quote-red uses the other half) */
.site-main .quote-panel {
    display: flow-root;
    max-width: 78%; min-width: min(100%, 20rem);     /* beside a floated picture it never squeezes into a thin column: it drops below the picture instead */
    margin: 1.3rem auto;
    padding: 1.4rem 2rem;
    color: #eef2f8;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    background-image: url('img/bg/quote.gif');
    background-repeat: repeat;
    background-position: 0 0;
}
.site-main .quote-panel::before, .site-main .quote-panel::after { content: none; }
.site-main .quote-panel.quote-red { background-position: 0 280px; }
.site-main .quote-panel cite { display: block; margin-top: .6rem; font-style: normal; color: var(--zion-red); font-size: .85rem; }

.site-main ul, .site-main ol { padding-left: 1.2rem; }
.site-main li { margin-bottom: .5rem; }
.site-main .fact-list { padding-left: 1.2rem; }

/* portraits, and image-beside-quote layouts */
.portrait {
    float: left; width: 160px; border-radius: 12px; margin: 0 1.2rem 1rem 0;
    border: 1px solid var(--glass-border-strong); box-shadow: 0 0 24px rgba(0, 0, 0, .5);
}
.portrait-right { float: right; margin: 0 0 1rem 1.2rem; }
/* an image with its text wrapping beside it; text returns to the left edge below the image */
.figure-with-quote { display: flow-root; margin: 0 0 1.4rem; }
.figure-with-quote::after { content: ""; display: block; clear: both; }
.figure-with-quote > .portrait { float: left; margin: .25rem 1.2rem .6rem 0; }
.figure-with-quote > .figure-body { display: contents; }
.figure-with-quote h3 { margin-top: 0; }
.figure-with-quote ul, .figure-with-quote ol { display: flow-root; }
.figure-with-quote .quote-panel { max-width: 100%; }
.site-main dt { font-weight: 700; color: var(--text); text-align: left; }
.site-main dd { text-align: left; margin-left: 1em; padding-left: 1em; margin-bottom: .6em; }
@media (max-width: 900px) {
    .portrait { float: none; width: 100%; max-width: 260px; display: block; margin: 0 auto 1rem; }
    .figure-with-quote > .portrait { float: none; width: 100%; max-width: 260px; margin: 0 auto 1rem; display: block; }
}

/* Previous / Next: the original site's blue and red pill graphics with the page name
   under each. The pill sits at 40% and lights up on hover (fading rollover, site.js). */
.site-main .page-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .4rem 0 1rem; }
.page-nav .pn { display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 46%; text-align: center; text-decoration: none; }
.page-nav .pn-pill { display: block; width: 115px; height: 30px; opacity: .4; }
.page-nav .pn-label { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.page-nav .pn-prev .pn-label { color: var(--zion-blue); }
.page-nav .pn-next .pn-label { color: var(--zion-red); }
.page-nav .pn:hover .pn-label, .page-nav .pn:focus-visible .pn-label { color: color-mix(in srgb, currentColor 65%, white 35%); }
.page-nav .pn:not([href]) { cursor: default; }            /* target page not built yet */
.site-main .page-nav a.pn-text { color: var(--zion-blue); font-size: .9rem; }
.site-main .page-nav a.pn-text:hover { color: var(--matrix-green); }

/* footer */
.site-footer {
    max-width: 800px; margin: 0 auto; padding: 0 20px 70px;
    font-family: var(--font-body); font-size: .85rem; line-height: 1.6;
    color: color-mix(in srgb, var(--text) 60%, black);
}
.site-footer p { margin: 0; text-align: left; color: inherit; font-family: inherit; font-size: inherit; }
.site-footer a { color: #ff4444; text-decoration: none; font-weight: 700; font-family: inherit; }
.site-footer a:hover { color: color-mix(in srgb, #ff4444 70%, white 30%); }
.site-footer .cite-box { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--glass-border); }


/* ==========================================================================
   "Explore ..." areas (generated by build.py: one panel per level of the tree)
   Every tile is a push button. Pages you can go to are raised red buttons that stand out of the
   screen (like the text links on the page; they do not animate). The page you are on is a blue
   button that is pressed into the screen - locked, no hover - with a faint pulsing blue glow.
   The first tile is the section's own page, wider than the rest.
   ========================================================================== */
.site-main .crosslink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .95rem .8rem; padding: .3rem .1rem .6rem; }
.site-main .crosslink-grid.dense { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .8rem .6rem; }
.site-main .crosslink-grid a, .site-main .crosslink-grid .soon, .site-main .crosslink-grid .current {
    position: relative; display: block; padding: .72rem .9rem; border-radius: 11px;
    font-size: .95rem; font-weight: 600; line-height: 1.25; text-decoration: none; text-align: center;
    transition: none;
}
.site-main .crosslink-grid.dense a, .site-main .crosslink-grid.dense .soon, .site-main .crosslink-grid.dense .current { padding: .5rem .55rem; font-size: .85rem; }
.site-main .crosslink-grid .head { grid-column: 1 / -1; font-size: 1.12rem; padding: .85rem 1rem; }
.site-main .crosslink-grid .head small {
    display: block; margin-bottom: .15rem; font: 600 .6rem/1.2 var(--font-head); letter-spacing: .24em; text-transform: uppercase; opacity: .75;
}

/* raised: stands out of the screen */
.site-main .crosslink-grid a {
    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-grid a:visited { color: #e35a5a; }
.site-main .crosslink-grid a:hover, .site-main .crosslink-grid a:focus-visible {
    color: #ffb0b0; outline: none;
    border-color: rgba(255, 175, 175, .8); border-bottom-color: rgba(110, 15, 25, .9);
    background: linear-gradient(180deg, rgba(255, 140, 140, .5) 0%, rgba(230, 70, 80, .3) 45%, rgba(140, 30, 40, .4) 100%);
}
.site-main .crosslink-grid a.branch { border-color: rgba(255, 175, 175, .8); border-bottom-color: rgba(110, 15, 25, .9); }
.site-main .crosslink-grid a:active {                  /* while the mouse is down it travels in */
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255, 215, 215, .35), inset 0 -2px 4px rgba(60, 0, 8, .4), 0 1px 0 #4a0d15, 0 2px 4px rgba(0, 0, 0, .5);
}
.site-main .crosslink-grid .soon { color: var(--text-dim); opacity: .45; cursor: default; border: 1px dashed var(--glass-border-strong); box-shadow: none; }

/* pressed in: sunk into the screen, blue, locked */
.site-main .crosslink-grid .current {
    color: #8ec2ff; cursor: default; pointer-events: none;
    border: 1px solid rgba(70, 120, 200, .4); border-top-color: rgba(0, 0, 0, .85); border-bottom-color: rgba(140, 190, 255, .28);
    background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(4, 10, 22, .6));
    box-shadow: inset 0 6px 10px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 12px rgba(90, 160, 255, .3), 0 1px 0 rgba(160, 200, 255, .18);
    transform: translateY(4px);
    text-shadow: 0 0 8px rgba(110, 170, 255, .45);
    animation: tile-glow 4.5s ease-in-out infinite;
}
@keyframes tile-glow {
    0%, 100% { box-shadow: inset 0 6px 10px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 8px rgba(90, 160, 255, .2),  0 1px 0 rgba(160, 200, 255, .18); }
    50%      { box-shadow: inset 0 6px 10px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 20px rgba(110, 175, 255, .6), 0 1px 0 rgba(160, 200, 255, .3); }
}
@media (prefers-reduced-motion: reduce) { .site-main .crosslink-grid .current { animation: none; } }

/* ==========================================================================
   Content building blocks produced by the converter
   ========================================================================== */
.site-main img { max-width: 100%; height: auto; }
.site-main .img-left  { float: left;  margin: .2rem 1.2rem 1.4rem 0; border-radius: 6px; }
.site-main .img-right { float: right; margin: .2rem 0 1.4rem 1.2rem; border-radius: 6px; }
.site-main .glass-panel { display: flow-root; }
.site-main .figure-center { margin: 1rem auto; text-align: center; }
.site-main .figure-center img { display: inline-block; border-radius: 6px; }
.site-main .figure-center figcaption { color: var(--text-dim); font-size: .9rem; margin-top: .3rem; }
.site-main .image-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0; }
.site-main .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.site-main hr { border: 0; border-top: 1px solid var(--glass-border); margin: 1.2rem 0; }
.site-main pre { font-size: .85rem; overflow-x: auto; background: rgba(0, 0, 0, .35); padding: .8rem 1rem; border-radius: 8px; color: var(--text); }
.site-main u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site-main small { font-size: .85em; color: var(--text-dim); }

/* comparison boxes (Neo | Smith ...): the original site's turquoise and red tiled backgrounds - every other pixel is fully
   transparent - in boxes styled and centered like the quote boxes. Each turquoise box and the red box after it are a pair. */
.site-main .compare { display: grid; grid-template-columns: 1fr; gap: .4rem; clear: both; margin: 0 0 1.2rem; padding-top: 1.1rem; }   /* clear + padding: a margin would vanish when the boxes are pushed below a picture */
.site-main .cmp-blue, .site-main .cmp-red {
    justify-self: center; box-sizing: border-box; width: 78%; min-width: min(100%, 20rem);
    padding: 1rem 1.6rem; color: #eef2f8; text-align: left;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    background-repeat: repeat; image-rendering: pixelated; background-size: var(--tile, 24px) var(--tile, 24px);
}
.site-main .cmp-blue { background-image: url('img/bg/cmp-blue.png'); }
.site-main .cmp-red  { background-image: url('img/bg/cmp-red.png'); margin-bottom: 1.2rem; }      /* space after each red box, so the pairs read as pairs */
.site-main .cmp-red:last-child { margin-bottom: 0; }

/* Pandora's Boxes story-arc bars: the same tiled backgrounds */
.site-main h3.arc {
    margin: 1.2rem 0 .8rem; padding: .55rem 1.2rem; color: #fff; font-size: 1.05rem; text-align: center;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    background-repeat: repeat; image-rendering: pixelated; background-size: var(--tile, 24px) var(--tile, 24px); text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.site-main h3.arc-green     { background-image: url('img/bg/tdgreen-40.png'); }
.site-main h3.arc-yellow    { background-image: url('img/bg/tdyellow-40.png'); }
.site-main h3.arc-purple    { background-image: url('img/bg/tdpurple-40.png'); }
.site-main h3.arc-turquoise { background-image: url('img/bg/tdturquoise-40.png'); }
.site-main h3.arc-red       { background-image: url('img/bg/tdred-40.png'); }
.site-main h3.arc-blue      { background-image: url('img/bg/tdblue-40.png'); }

.site-main .note-box { padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--glass-border-strong); border-left: 3px solid var(--matrix-green); border-radius: 8px; background: rgba(0, 0, 0, .25); }
.site-main .note-box p:last-child, .site-main .note-box ul:last-child { margin-bottom: 0; }

.site-main .table-wrap { overflow-x: auto; margin: 1rem 0; }
.site-main .data-table { border-collapse: collapse; width: 100%; }
.site-main .data-table td, .site-main .data-table th { padding: .5rem .8rem; border: 1px solid var(--glass-border); vertical-align: top; text-align: left; background: none; }
.site-main .data-table th { color: var(--zion-blue); font-family: var(--font-head); font-size: .85rem; }

.site-main .hl-yellow { color: #ffe066; }
.site-main .hl-teal   { color: #4fe3d4; }
.site-main .hl-red    { color: var(--zion-red); }
.site-main .hl-green  { color: var(--matrix-green); }
.site-main .dim       { color: #7d8791; }
.site-main .dead-link { color: var(--text-dim); border-bottom: 1px dotted var(--text-dim); cursor: help; }

/* the original's rotating text ads: small glass boxes floated beside the text */
.site-main .dynamic_adv_left, .site-main .dynamic_adv_right {
    display: block; box-sizing: border-box; width: 150px; padding: .55rem .7rem; margin: .2rem 0 .8rem;
    font: 500 .8rem/1.35 var(--font-body); text-align: left; color: var(--text-dim);
    border: 1px dashed rgba(255, 255, 255, .28); border-radius: 8px; background: rgba(0, 0, 0, .28);
}
.site-main .dynamic_adv_left  { float: left;  margin-right: 1.2rem; }
.site-main .dynamic_adv_right { float: right; margin-left: 1.2rem; }
.site-main .dynamic_adv_left:empty, .site-main .dynamic_adv_right:empty { display: none; }
@media (max-width: 900px) {
    .site-main .dynamic_adv_left, .site-main .dynamic_adv_right { float: none; width: auto; margin: .6rem 0; }
}

/* products the store no longer sells (Shopping): kept for history, but plainly marked, not just greyed out */
.site-main p.jrot {
    position: relative; margin: 0 0 .9rem; padding: .8rem 1rem;
    color: var(--text-dim); border: 1px dashed rgba(255, 97, 97, .5); border-left: 4px solid var(--zion-red); border-radius: 8px;
    background: repeating-linear-gradient(135deg, rgba(255, 97, 97, .07) 0 10px, transparent 10px 20px);
}
.site-main p.jrot::before {
    content: "No longer available"; display: inline-block; margin-right: .7em; padding: .12em .65em; border-radius: 4px; vertical-align: .08em;
    font: 700 .62rem/1.5 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #1c0303; background: var(--zion-red);
}
.site-main p.jrot a { font-weight: 600; }

/* ==========================================================================
   Popups (original overlib "view" links): green links with the magnifying-glass cursor, and a
   weathered blue-steel Zion dock console (blue and red, the colors of the real world) in place
   of the old grey box.
   ========================================================================== */
.view {
    cursor: url("img/buttons/mag.cur"), zoom-in;
    color: #44ff44; font-family: inherit; text-decoration: none;
    border-bottom: 1px dotted rgba(68, 255, 68, .55);
}
.view:hover, .view:focus-visible { color: #b6ffb6; border-bottom-color: #b6ffb6; outline: none; text-shadow: 0 0 8px rgba(68, 255, 68, .5); }
.view template { display: none; }

.zp {
    position: fixed; z-index: 3000; box-sizing: border-box; overflow: hidden; padding-bottom: 14px;
    display: flex; flex-direction: column;
    font-family: var(--font-body); font-size: 1rem; color: #d3e5ff; text-align: left;
    border-radius: 12px; border: 1px solid rgba(95, 122, 153, .6);
    /* the steel frame is 60% opaque (--zp-frame); the screen inside stays solid */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .75 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(172deg, rgba(42, 64, 88, .6) 0%, rgba(23, 34, 47, .6) 45%, rgba(15, 24, 35, .6) 100%);
    -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
    box-shadow: 0 0 0 1px rgba(4, 8, 13, .6), inset 0 1px 0 rgba(180, 215, 255, .3), inset 0 0 32px rgba(0, 0, 0, .4),
                0 22px 56px rgba(0, 0, 0, .7), 0 0 34px rgba(70, 140, 255, .2);
    transition: opacity .18s ease, transform .3s cubic-bezier(.2, .85, .25, 1);
    will-change: transform, opacity;
}
.zp[hidden] { display: none; }
.zp.leaving { opacity: 0 !important; transition: opacity .14s linear; }     /* fade-out: much quicker than the site's slow fades */

.zp-head { flex: none; display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .7rem .55rem 1.25rem; text-align: left; }
.zp-lamps { display: inline-flex; gap: 6px; padding-top: .28rem; }
.zp-lamp { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .75); }
.zp-lamp.blue { background: radial-gradient(circle at 35% 30%, #e3f2ff, #5cb0ff 55%, #15467a); box-shadow: 0 0 8px rgba(92, 176, 255, .85); animation: zp-blink 2.6s ease-in-out infinite; }
.zp-lamp.red  { background: radial-gradient(circle at 35% 30%, #ffd0d0, #ff5a5a 55%, #6d1414); box-shadow: 0 0 6px rgba(255, 90, 90, .6); opacity: .55; }
.zp.pinned .zp-lamp.red { opacity: 1; animation: zp-blink 1.3s ease-in-out infinite; }
@keyframes zp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.zp-caption {
    flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left;   /* long headings wrap (left-aligned, never justified); the popup grows to fit */
    font: 600 .78rem/1.4 var(--font-head); letter-spacing: .07em; text-transform: uppercase; color: #a9d3ff; text-shadow: 0 0 10px rgba(92, 176, 255, .45);
}
.zp-x {
    flex: none; width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
    font: 700 1.3rem/1 var(--font-body); color: #cfe2fb; background: linear-gradient(180deg, #3d556f, #1e2c3c); border: 1px solid #6f8bab;
    box-shadow: inset 0 1px 0 rgba(200, 225, 255, .25), 0 2px 0 #06101a;
}
.zp-x:hover, .zp-x:focus-visible { color: #fff; background: linear-gradient(180deg, #9a3030, #4a1216); border-color: #ff7a7a; outline: none; }
.zp-screen {
    text-align: left; position: relative; flex: 1 1 auto; min-height: 0; margin: 0 14px; overflow: hidden; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 0%, #142b47 0%, #09131f 72%);
    border: 1px solid #02060b; box-shadow: 0 0 0 1px #4a6484, inset 0 0 28px rgba(80, 150, 255, .2);
}
.zp-screen::after {                                              /* faint scan lines over the monitor glass */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
}
.zp-body { padding: .9rem 1rem; overflow-y: auto; overscroll-behavior: contain; text-align: left; line-height: 1.5; color: #d3e5ff; }
.zp[data-kind="image"] .zp-body { padding: .55rem; }
.zp-body p { margin: 0 0 .7em; color: inherit; text-align: left; font: inherit; }
.zp-body p:last-child { margin-bottom: 0; }
.zp-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.zp-body a { color: #ff7a7a; font-weight: 700; text-decoration: none; }
.zp-body a:hover { color: #ffb0b0; }
.zp-body::-webkit-scrollbar { width: 12px; }
.zp-body::-webkit-scrollbar-track { background: #08111b; border-radius: 0; box-shadow: none; }
.zp-body::-webkit-scrollbar-thumb { background: #35597f; border-radius: 6px; box-shadow: none; }
.zp-body::-webkit-scrollbar-thumb:hover { background: #4a7bb0; }
.zp-rivet {
    position: absolute; display: block; width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #b9c9db, #506680 60%, #16202c); box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
.zp-rivet.tl { top: 14px; left: 6px; }  .zp-rivet.tr { top: 14px; right: 6px; }
.zp-rivet.bl { bottom: 5px; left: 6px; } .zp-rivet.br { bottom: 5px; right: 6px; }

/* phones and tablets: tap to open; the popup is dimmed-in as a modal and the close button is large */
body.zp-open::before { content: ""; position: fixed; inset: 0; z-index: 2999; background: rgba(0, 0, 0, .5); }
@media (hover: none), (max-width: 900px) {
    .zp-x { width: 42px; height: 42px; font-size: 1.7rem; }
    .zp-body { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .zp, .zp.leaving { transition: none; } .zp-lamp.blue, .zp.pinned .zp-lamp.red { animation: none; } }

/* long URLs and unbroken strings wrap instead of widening the page */
.site-main { overflow-wrap: break-word; }
.site-main a, .site-main li, .site-main dd { overflow-wrap: anywhere; }

/* list entries whose external link has died (Links): kept for history, plainly marked */
.site-main li.jrot {
    list-style: none; margin-left: -1.2rem; padding: .7rem .9rem; color: var(--text-dim);
    border: 1px dashed rgba(255, 97, 97, .5); border-left: 4px solid var(--zion-red); border-radius: 8px;
    background: repeating-linear-gradient(135deg, rgba(255, 97, 97, .07) 0 10px, transparent 10px 20px);
}
.site-main li.jrot::before {
    content: "Link no longer valid"; display: block; width: max-content; margin-bottom: .4em; padding: .12em .65em; border-radius: 4px;
    font: 700 .62rem/1.5 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #1c0303; background: var(--zion-red);
}
.site-main li, .site-main dd { text-align: left; }

/* Shopping: Amazon page has no Add to Cart button - a cool-blue tag (the amber one means "no longer available") */
.site-main a.no-cart::after {
    content: "No Add to Cart"; display: inline-block; margin-left: .55em; padding: .08em .55em; border-radius: 4px; vertical-align: .12em;
    font: 700 .6rem/1.5 var(--font-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    color: #bfe6ff; background: rgba(60, 140, 220, .18); border: 1px solid rgba(110, 180, 255, .55);
}

/* Colors page: gold text (the colors of Machine City and of machines jacked into the Matrix), with green links like the side panel */
.site-main.theme-gold { --text: #e9b949; --text-dim: #b8913a; --panel-accent: #e9b949; }
.site-main.theme-gold p, .site-main.theme-gold li, .site-main.theme-gold dd, .site-main.theme-gold dt { color: #e9b949; }
.site-main.theme-gold h1, .site-main.theme-gold h2, .site-main.theme-gold h3 { color: #ffd166; text-shadow: 0 0 20px rgba(255, 190, 70, .3); }
.site-main.theme-gold .tag-line { color: #b8913a; }
.site-main.theme-gold a { color: #3fe07f; }
.site-main.theme-gold a:visited { color: #23924f; }
.site-main.theme-gold a:hover, .site-main.theme-gold a:focus-visible { color: #b8ffd6; }

/* ==========================================================================
   Spacing and wrapping that hold everywhere
   ========================================================================== */
.site-main .glass-panel > :first-child { margin-top: 0; }
.site-main .glass-panel { container-type: inline-size; }
/* boxes never slide underneath a floated picture or ad (and never become thin columns next to one) */
.site-main .note-box, .site-main pre, .site-main .table-wrap, .site-main p.jrot, .site-main li.jrot {
    display: flow-root; min-width: min(100%, 18rem);
}
/* a lone picture followed by a quote box: in a narrow column, center the picture above the quote */
@container (max-width: 540px) {
    .site-main p:has(> img:only-child):has(+ .quote-panel) { text-align: center; }
    .site-main p:has(> img:only-child):has(+ .quote-panel) > img { float: none; display: inline-block; margin: 0 0 .4rem; max-width: min(100%, 280px); }
}
.site-main .hl-mustard { color: #e2e23c; }
.site-main pre + p, .site-main pre + ul, .site-main pre + .quote-panel { margin-top: 1em; }

/* the scan line that sweeps over the content area during a page change (spa.js) */
.scan-wipe { position: fixed; z-index: 20; overflow: hidden; pointer-events: none; }
.scan-wipe i {
    position: absolute; left: 0; right: 0; top: 0; height: 120px; will-change: transform, opacity;
    background: linear-gradient(180deg, rgba(90, 165, 255, 0) 0%, rgba(90, 165, 255, .05) 55%, rgba(120, 190, 255, .22) 96%, rgba(210, 235, 255, .9) 100%);
    box-shadow: 0 2px 14px rgba(110, 180, 255, .55);
}

/* footer: the link to the original design sits on its own line, with a comfortable tap target away from the other links */
.site-footer .footer-nostalgia { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--glass-border); }
.site-footer .footer-nostalgia a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; }

/* a page title with a small picture at its right end (Morpheus) */
.site-main .title-with-art { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.site-main .title-with-art h1 { margin: 0; }
.site-main .title-art { flex: none; width: 70px; height: auto; image-rendering: auto; }