/* Self-hosted fonts (SIL OFL) — the CSP allows font-src 'self' only, so these must stay local. */
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/press-start-2p-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-0.woff2") format("woff2");
    unicode-range: U+3028-303f, U+3094-3096, U+309f-30a0, U+30ee, U+30f7-30fa, U+30ff, U+3105-312f, U+3131-3163, U+3165-318e, U+3190-31bb, U+31c0-31c7;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-1.woff2") format("woff2");
    unicode-range: U+a8, U+2032, U+2261, U+2282, U+3090, U+30f1, U+339c, U+535c, U+53d9, U+56a2, U+56c1, U+5806, U+589f, U+59d0, U+5a7f, U+60e0, U+639f, U+65af, U+68fa, U+69ae, U+6d1b, U+6ef2, U+71fb, U+725d, U+7262, U+75bc, U+7768, U+7940, U+79bf, U+7bed, U+7d68, U+7dfb, U+814b, U+8207, U+83e9, U+8494, U+8526, U+8568, U+85ea, U+86d9, U+87ba, U+8861, U+887f, U+8fe6, U+9059, U+9061, U+916a, U+976d, U+97ad, U+9ece;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-2.woff2") format("woff2");
    unicode-range: U+25b3, U+30f5, U+4eae, U+4f46, U+4f51, U+5203, U+52ff, U+55a7, U+564c, U+565b, U+57f9, U+5805, U+5b64, U+5e06, U+5f70, U+5f90, U+60e8, U+6182, U+62f3, U+62fe, U+63aa, U+64a4, U+65d7, U+673a, U+6851, U+68cb, U+68df, U+6d1e, U+6e58, U+6e9d, U+77b3, U+7832, U+7c3f, U+7db4, U+7f70, U+80aa, U+80c6, U+8105, U+819d, U+8276, U+8679, U+8986, U+8c9d, U+8fc5, U+916c, U+9665, U+9699, U+96c0, U+9a19, U+ff8b;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-3.woff2") format("woff2");
    unicode-range: U+30f6, U+50ac, U+5178, U+51e6, U+5224, U+52dd, U+5883, U+5897, U+590f, U+5a5a, U+5bb3, U+5c65, U+5e03, U+5e2b, U+5e30, U+5eb7, U+6271, U+63f4, U+64ae, U+6574, U+672b, U+679a, U+6a29-6a2a, U+6ca2, U+6cc1, U+6d0b, U+713c, U+74b0, U+7981, U+7a0b, U+7bc0, U+7d1a, U+7d61, U+7fd2, U+822c, U+8996, U+89aa, U+8cac, U+8cbb, U+8d77, U+8def, U+9020, U+9152, U+9244, U+9662, U+967a, U+96e3, U+9759, U+ff16;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-4.woff2") format("woff2");
    unicode-range: U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c, U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c, U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279, U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868, U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6, U+9ad8, U+ff1a, U+ff1f;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-5.woff2") format("woff2");
    unicode-range: U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}

html {
    overflow-x: hidden;
}

/* Title shimmer burst: faint chromatic split, no movement (driven by glitch.js) */
.title.kburst {
    text-shadow:
        1px 0 0 rgba(224, 108, 117, 0.28),
        -1px 0 0 rgba(125, 201, 201, 0.24),
        0 0 14px var(--glow-color, rgba(202, 169, 106, 0.25));
}
.title.kburst .kover {
    color: var(--hover-color, #d9c08a);
    text-shadow: 0 0 8px var(--glow-color, rgba(202, 169, 106, 0.25));
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0;
}

.container {
    width: 100%;
    min-width: 0;
    flex: 1;
}

.container > *,
.calculator-wrapper > *,
.results-grid > *,
.pool-metrics-grid > *,
.stats-grid > * {
    min-width: 0;
}

.retro-table-container,
.table-container {
    max-width: 100%;
    overflow-x: auto;
}

.result-value,
.result-usd,
.fact-value,
.pool-share-value,
.stat-card-body,
.stat-value {
    overflow-wrap: anywhere;
}

.retro-footer {
    position: static;
    inset: auto;
    box-sizing: border-box;
    flex: none;
}

/* SITE: POOL CHAT — floating widget (chat.js), collapsed launcher bottom-left.
   Served same-origin from the chat sidecar via /api/chat; styles live here so
   the CSP style hashes in the six pages, _headers, and both pool Nginx
   configs stay frozen. */
.chat-launcher {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, #1a1714 0%, #12100d 100%);
    color: var(--gold, #d9c08a);
    border: 1px solid var(--border-color, #3a332a);
    font-family: inherit;
    font-size: 0.55em;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.chat-launcher:hover {
    color: #fff;
    border-color: var(--accent-color, #caa96a);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(202, 169, 106, 0.25);
}
.chat-launcher:focus-visible {
    outline: 1px solid var(--accent-color, #caa96a);
    outline-offset: 3px;
}
.chat-launcher-open {
    display: none;
}
.chat-launcher-gem {
    display: flex;
    align-items: center;
    color: var(--accent-color, #caa96a);
    animation: chat-gem-pulse 3.2s ease-in-out infinite;
}
/* letter-spacing adds a phantom space after the final glyph — cancel it so
   the icon + label sit optically dead-center in the launcher */
.chat-launcher-label {
    margin-right: -2px;
}
@keyframes chat-gem-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color, #caa96a);
    color: var(--main-bg, #12100d);
    border: 2px solid var(--main-bg, #12100d);
    font-size: 0.8em;
    line-height: 1;
    letter-spacing: 0;
}
.chat-badge[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .chat-launcher-gem {
        animation: none;
    }
}

.chat-panel {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 78px));
    height: min(430px, 72vh);
    background: var(--main-bg, #12100d);
    border: 2px solid var(--border-color, #3a332a);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.chat-panel[hidden] {
    display: none !important;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color, #3a332a);
}
.chat-title {
    flex: 1;
    color: var(--accent-color, #caa96a);
    font-size: 0.6em;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--glow-color, rgba(202, 169, 106, 0.25));
}
.chat-nick,
.chat-snd,
.chat-x {
    background: none;
    border: 1px solid var(--border-color, #3a332a);
    color: var(--muted, #93887a);
    font-family: inherit;
    font-size: 0.52em;
    padding: 4px 7px;
    cursor: pointer;
}
.chat-nick:hover,
.chat-snd:hover,
.chat-x:hover {
    color: var(--gold, #d9c08a);
    border-color: var(--accent-color, #caa96a);
}
.chat-snd-on {
    color: var(--gold, #d9c08a);
    border-color: var(--accent-color, #caa96a);
}

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    background: rgba(0, 0, 0, 0.18);
}
.chat-msg {
    padding: 6px 10px;
    font-size: 0.55em;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.chat-time {
    color: var(--muted, #93887a);
    opacity: 0.75;
    margin-right: 7px;
    font-size: 0.9em;
}
.chat-name {
    font-weight: bold;
    margin-right: 7px;
}
.chat-body {
    color: var(--text-color, #ece7dd);
}
.chat-msg-system {
    background: rgba(202, 169, 106, 0.07);
    border-left: 2px solid var(--accent-color, #caa96a);
}
.chat-name-system {
    color: var(--gold, #d9c08a);
    text-shadow: 0 0 5px var(--glow-color, rgba(202, 169, 106, 0.25));
}
.chat-msg-system .chat-body {
    color: var(--gold-soft, #caa96a);
}
.chat-c0 { color: #d9c08a; }
.chat-c1 { color: #7dc98f; }
.chat-c2 { color: #c98f8f; }
.chat-c3 { color: #8fb9c9; }
.chat-c4 { color: #b89fd9; }
.chat-c5 { color: #c9b57d; }
.chat-c6 { color: #7dc9c9; }
.chat-c7 { color: #d99fb8; }

.chat-status {
    padding: 6px 10px;
    font-size: 0.5em;
    letter-spacing: 1px;
    color: var(--red-soft, #c98f8f);
    border-top: 1px solid var(--border-color, #3a332a);
}
.chat-status[hidden] {
    display: none !important;
}

.chat-inputrow {
    display: flex;
    border-top: 1px solid var(--border-color, #3a332a);
}
.chat-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 0;
    padding: 11px 10px;
    color: var(--text-color, #ece7dd);
    font-family: inherit;
    font-size: 0.55em;
}
.chat-input:focus {
    outline: 1px solid var(--accent-color, #caa96a);
    outline-offset: -1px;
}
.chat-send {
    background: none;
    border: 0;
    border-left: 1px solid var(--border-color, #3a332a);
    color: var(--gold, #d9c08a);
    font-family: inherit;
    font-size: 0.55em;
    letter-spacing: 1px;
    padding: 0 14px;
    cursor: pointer;
}
.chat-send:hover {
    background: rgba(202, 169, 106, 0.12);
}
.chat-send:disabled {
    color: var(--muted, #93887a);
    cursor: default;
}

/* SITE: WORKERS TABLE — row cap controls (poolscript.js renders at most
   WORKER_ROW_CAP rows per group until SHOW ALL is clicked). */
.worker-table .wg-more {
    text-align: center;
}
.worker-table .wg-showall,
.worker-table .wg-showless {
    background: none;
    border: 1px solid var(--border-color, #d8d0c5);
    color: var(--muted, #93887a);
    font: inherit;
    letter-spacing: 1px;
    padding: 5px 16px;
    margin: 2px 0;
    cursor: pointer;
}
.worker-table .wg-showall:hover,
.worker-table .wg-showless:hover {
    color: var(--text-color, #2a2723);
    border-color: var(--accent-color, #caa96a);
}

/* SITE: BACKGROUND FX TOGGLE — nav-rail button injected by navrail.js,
   cycling neural-bg.js between FULL / LITE / OFF. Pinned to the rail bottom
   above the live stats block, and — like that block — invisible until the
   rail expands on hover (pointer-events off so the collapsed strip can't be
   clicked blind). Hidden on phones, where the rail never expands. */
.nav-rail-fx {
    margin-top: auto;
    background: none;
    border: none;
    border-top: 1px solid var(--border-color, #3a332a);
    color: var(--muted, #93887a);
    font: inherit;
    font-size: 0.6em;
    text-align: left;
    width: 100%;
    padding: 12px 14px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.1s, color 0.2s ease;
}
.nav-rail:hover .nav-rail-fx {
    opacity: 1;
    pointer-events: auto;
}
.nav-rail-fx:hover {
    color: var(--hover-color, #d9c08a);
}
.nav-rail .nav-rail-stats {
    margin-top: 0;
}
/* Slide-out rail: OTHER POOLS group (sister pools with their coin marks
   drawn inline in currentColor like every other rail icon). The heading
   reveals with the labels. */
.nav-rail-heading {
    padding: 6px 14px 2px;
    font-size: 0.5em;
    letter-spacing: 0.14em;
    color: var(--muted, #93887a);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}
.nav-rail:hover .nav-rail-heading {
    opacity: 1;
}
/* Socials are the last thing in the rail, under the live stats. The bottom
   group (FX toggle, stats, socials) stays compact and the rail scrolls
   instead of clipping so the icons never fall off short windows. */
.nav-rail {
    box-sizing: border-box; /* height:100% now includes the rail padding, so the last icon is never clipped */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
.nav-rail::-webkit-scrollbar {
    display: none;
}
.nav-rail .nav-rail-stats {
    margin-bottom: 0;
    padding: 8px 14px;
    gap: 6px;
}
.nav-rail-fx {
    padding: 8px 14px;
}
.nav-rail-social .nav-rail-divider {
    margin-block: 4px;
}
/* While the rail is collapsed the FX toggle and the stats block are
   invisible anyway, so they take no space either: the social icons then sit
   at the visible foot of the strip on any window height. On hover they
   return above the socials. Phones never expand, so this also covers them. */
.nav-rail:not(:hover) .nav-rail-fx,
.nav-rail:not(:hover) .nav-rail-stats {
    display: none;
}
.nav-rail-social {
    margin-top: auto;
}
.nav-rail:hover .nav-rail-social {
    margin-top: 0;
}

/* Optional Nock payout registration on the wallet dashboard. The server keeps
   the whole section hidden through its public feature flag until rollout.
   It is a slim collapsible strip under the NOCK accounting line: the summary
   row carries the status badge and masked destination, the body holds the
   form and the required notices. */
.nock-registration {
    min-width: 0;
    margin: -0.5rem 0 1.4rem;
    text-align: left;
}
.nock-registration-details {
    border-top: 1px solid var(--border-color, #3a332a);
}
.nock-registration-details[open] {
    border-bottom: 1px solid var(--border-color, #3a332a);
}
.nock-registration-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}
.nock-registration-summary::-webkit-details-marker {
    display: none;
}
.nock-registration-summary:focus-visible {
    outline: 2px solid var(--accent-color, #caa96a);
    outline-offset: 4px;
}
.nock-registration-badge {
    border: 1px solid var(--border-color, #3a332a);
    color: var(--accent-color, #caa96a);
    font-size: 0.55em;
    letter-spacing: 1.5px;
    line-height: 1.4;
    padding: 6px 10px;
    white-space: nowrap;
}
.nock-registration-brief {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--muted, #93887a);
    font-size: 0.5em;
    letter-spacing: 0.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.nock-registration-toggle {
    margin-left: auto;
    color: var(--muted, #93887a);
    font-size: 0.55em;
    letter-spacing: 1.5px;
    white-space: nowrap;
}
.nock-registration-toggle::before {
    content: "+ ";
}
.nock-registration-details[open] .nock-registration-toggle::before {
    content: "\2212  ";
}
.nock-registration-summary:hover .nock-registration-toggle,
.nock-registration-details[open] .nock-registration-toggle {
    color: var(--accent-color, #caa96a);
}
.nock-registration-body {
    margin: 0 0 14px;
    padding: 12px 16px 16px;
    border-left: 2px solid var(--accent-color, #caa96a);
    background: rgba(255, 255, 255, 0.03);
}
.nock-registration-lead {
    color: var(--text-color, #ece7dd);
    margin: 0;
}
/* Destination cards echo the Pearl wallet chips: page pixel font, cut
   corners, gold diamond label, and a chip-style COPY button. Nock addresses
   are case-sensitive, so no uppercase transform. */
.nock-registration-destinations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin: 0.9rem 0 0;
}
.nock-registration-destinations div {
    margin: 0;
    min-width: 0;
    padding: 12px 14px;
    border: 2px solid var(--border-color, #3a332a);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.nock-registration-destinations dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold, #d9c08a);
    font-size: 0.5em;
    letter-spacing: 2px;
    margin-bottom: 0.7rem;
}
.nock-registration-destinations dt::before {
    content: '\25C6';
    color: var(--gold-soft, #caa96a);
    font-size: 1.1em;
}
.nock-registration-destinations dd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    min-width: 0;
}
.nock-registration-destinations code {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-color, #ece7dd);
    font-family: inherit;
    font-size: 0.55em;
    line-height: 1.9;
    letter-spacing: 0.5px;
    text-transform: none;
    overflow-wrap: anywhere;
    user-select: all;
}
.nock-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 2px solid var(--border-color, #3a332a);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color, #ece7dd);
    cursor: pointer;
    font: inherit;
    font-size: 0.5em;
    line-height: 1;
    letter-spacing: 1px;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.nock-copy::before {
    content: '\25C6';
    color: var(--gold-soft, #caa96a);
    font-size: 0.85em;
}
.nock-copy:hover,
.nock-copy:focus-visible {
    border-color: var(--gold, #d9c08a);
    background: rgba(236, 231, 221, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    outline: none;
}
.nock-registration-note,
.nock-registration-status {
    color: var(--muted, #93887a);
    font-size: 0.55em;
    letter-spacing: 1px;
    line-height: 1.8;
}
.nock-registration-note {
    margin: 0.6rem 0 0;
}
.nock-registration-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    margin-top: 0.9rem;
}
.nock-registration-label {
    color: var(--muted, #93887a);
    font-size: 0.55em;
    grid-column: 1 / -1;
    letter-spacing: 1.5px;
}
.nock-registration-input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color, #3a332a);
    box-sizing: border-box;
    color: var(--text-color, #ece7dd);
    font: inherit;
    font-size: 0.55em;
    line-height: 1.6;
    letter-spacing: 0.5px;
    min-width: 0;
    outline: none;
    padding: 10px 12px;
    text-transform: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nock-registration-input::placeholder {
    color: var(--muted, #93887a);
    opacity: 0.7;
}
.nock-registration-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color, #caa96a);
    box-shadow: 0 0 12px var(--glow-color, rgba(202, 169, 106, 0.25));
}
.nock-registration-submit {
    background: var(--tab-inactive, #1f1b15);
    border: 2px solid var(--accent-color, #caa96a);
    color: var(--accent-color, #caa96a);
    cursor: pointer;
    font: inherit;
    font-size: 0.55em;
    letter-spacing: 1.5px;
    line-height: 1.4;
    padding: 8px 12px;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.nock-registration-submit:hover:not(:disabled) {
    background: rgba(202, 169, 106, 0.12);
    box-shadow: 0 0 10px var(--glow-color, rgba(202, 169, 106, 0.25));
}
.nock-registration-submit:disabled {
    color: var(--muted, #93887a);
    cursor: not-allowed;
    border-color: var(--border-color, #3a332a);
}
.nock-registration-submit:focus-visible {
    outline: 2px solid var(--accent-color, #caa96a);
    outline-offset: 4px;
}
.nock-registration-status {
    color: var(--text-color, #ece7dd);
    margin: 0.8rem 0 0;
    overflow-wrap: anywhere;
}
.nock-registration-status.is-success,
.nock-registration-badge.is-success {
    color: var(--green, #7dc98f);
}
.nock-registration-status.is-error,
.nock-registration-badge.is-error {
    color: var(--red, #e06c75);
}

/* === CRT power-off outro ===
   Played by navrail.js before hopping to another jetskipool.ai site
   (.nav-rail-index / .nav-rail-pool). It mirrors the crt-on intro each page
   keeps in its inline <style>: the screen collapses into the bright centre
   line, which then shrinks to a dot and goes dark, leaving the plain
   background the next site's power-on starts from. Lives here rather than
   inline so the CSP-hashed <style> blocks stay untouched. */
.page-overlay.crt-off {
    animation: crtPowerOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
.page-overlay.crt-off::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #fff3d6;
    box-shadow: 0 0 24px 6px var(--accent-color), 0 0 90px 24px rgba(202, 169, 106, 0.5);
    animation: crtLineOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
@keyframes crtPowerOff {
    0% { opacity: 0; }
    40%, 100% { opacity: 1; }
}
@keyframes crtLineOff {
    0% { transform: translateY(-50%) scaleX(1) scaleY(70); opacity: 0; }
    40% { transform: translateY(-50%) scaleX(1) scaleY(1); opacity: 1; }
    75% { transform: translateY(-50%) scaleX(0.03) scaleY(1); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(0) scaleY(1); opacity: 0; }
}