/* PLATEAU / DESK + 100 STYLE EXPERIMENTS
   The Desk rules come first. The experiment classes below are available
   for reuse without loading the archive gallery layouts. */
@font-face {
    font-family: "Plateau Courier";
    src: url("../styles/courier.ttf") format("truetype");
}

:root { color-scheme: light; }
* { box-sizing: border-box; }
html { background: floralwhite; color: darkslategray; }
body { height: 100vh; height: 100dvh; margin: 0; display: flex; flex-direction: column; overflow: hidden; font-family: "Plateau Courier", Courier, monospace; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 1px dashed orangered; outline-offset: 3px; }
a { color: inherit; text-underline-offset: 3px; }
.desk { --clock-diameter: min(42vh, 390px, 38vw); display: grid; grid-template-columns: calc(var(--clock-diameter) + 44px) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0; flex: 1 1 0; min-height: 0; overflow: hidden; padding: 18px 0 0; }
.clock-panel, .notes-panel, .news-panel { min-width: 0; min-height: 0; }
.clock-panel { grid-column: 1; grid-row: 1; display: grid; place-items: center; padding: 0 22px; border-top: 1px solid orangered; border-bottom: 1px solid #d6c8b3; }
.watch { position: relative; display: block; width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; background: transparent; color: darkslategray; transition: background .22s, box-shadow .22s; }
.watch:hover { box-shadow: 0 0 0 1px rgba(255, 69, 0, .18); }
.watch[aria-pressed="true"] { background: #192720; box-shadow: inset 0 0 35px #101a15, 0 0 0 1px #3f4b3c; }
.clock-face { display: block; width: 100%; height: 100%; transition: opacity .22s; }
.watch[aria-pressed="true"] .clock-face { opacity: .18; }
.outer-ring { fill: none; stroke: #d5c8b4; stroke-width: 1; }
.tick { stroke: #c7bda9; stroke-width: 1; }
.tick.major { stroke: darkslategray; stroke-width: 1.5; }
.numerals { fill: darkslategray; font: 15px "Plateau Courier", Courier, monospace; text-anchor: middle; }
.hour-hand { stroke: darkslategray; stroke-width: 4; stroke-linecap: round; }
.minute-hand { stroke: darkslategray; stroke-width: 2; stroke-linecap: round; }
.second-hand { stroke: orangered; stroke-width: 1; }
.pin { fill: orangered; }
.digital-display { position: absolute; inset: 0; display: grid; place-items: center; color: #d6ec9e; opacity: 0; font: 500 clamp(22px, 3.8vw, 43px)/1 Menlo, Monaco, monospace; letter-spacing: .03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 5px #a7d682, 0 0 16px #7daa60, 0 0 27px #5c8f4d; transition: opacity .2s; }
.watch[aria-pressed="true"] .digital-display { opacity: 1; }
.notes-panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; overflow: hidden; }
.news-panel { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid orangered; border-left: 1px solid orangered; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 53px; padding: 13px 22px 8px; }
.panel-heading h1 { margin: 0; color: orangered; font: 24px/1.1 "Courier New", Courier, monospace; }
.panel-actions { display: flex; gap: 14px; }
.panel-heading button { border: 0; padding: 0; background: none; color: orangered; font-size: 10px; white-space: nowrap; }
.panel-heading button:hover { text-decoration: underline; }
.panel-heading button:disabled { opacity: .45; cursor: wait; }
.quiet-status { margin: 0 22px 7px; color: #8b8272; font-size: 9px; line-height: 1.45; }
.quiet-status.error { color: #a44936; }
.note-count { display: none; }
.notes-scroll, .headlines-scroll { flex: 1 1 0px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #d8c9b4 transparent; scrollbar-width: thin; }
.notes-scroll { padding: 8px 22px 22px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); align-items: start; gap: 14px; }
.note { --paper: #faecc4; --ink: #494638; position: relative; display: flex; flex-direction: column; padding: 13px 13px 10px; background: var(--paper); color: var(--ink); box-shadow: 2px 3px 0 rgba(67, 61, 44, .10), 3px 6px 10px rgba(67, 61, 44, .08); }
.note[data-color="rose"] { --paper: #f4ddda; --ink: #593f45; }
.note[data-color="blue"] { --paper: #dcebf0; --ink: #354c54; }
.note[data-color="green"] { --paper: #e2e9d2; --ink: #435140; }
.note[data-color="lilac"] { --paper: #e9e1f0; --ink: #4e425a; }
.note textarea { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; color: inherit; font: 12px/1.45 "Plateau Courier", Courier, monospace; overflow-wrap: anywhere; }
.note textarea::placeholder { color: rgba(58, 55, 49, .5); }
.note-bottom { display: flex; align-items: center; gap: 7px; min-height: 13px; margin-top: 7px; color: color-mix(in srgb, var(--ink), transparent 20%); font-size: 8px; opacity: 0; visibility: hidden; transition: opacity .14s, visibility .14s; }
.note:hover .note-bottom, .note:focus-within .note-bottom, .note.conflict .note-bottom { opacity: 1; visibility: visible; }
.note-state { flex: 1; }
.note-delete { border: 0; padding: 0; background: none; color: inherit; font-size: 14px; line-height: 1; }
.palette { display: flex; gap: 4px; }
.swatch { width: 12px; height: 12px; padding: 0; border: 1px solid rgba(50, 48, 42, .25); border-radius: 50%; background: var(--swatch); }
.swatch[aria-pressed="true"] { outline: 1px solid currentColor; outline-offset: 1px; }
.swatch[data-color="yellow"] { --swatch: #faecc4; }
.swatch[data-color="rose"] { --swatch: #f4ddda; }
.swatch[data-color="blue"] { --swatch: #dcebf0; }
.swatch[data-color="green"] { --swatch: #e2e9d2; }
.swatch[data-color="lilac"] { --swatch: #e9e1f0; }
.note.conflict { outline: 1px dashed #a44936; outline-offset: 3px; }
.news-heading { padding-left: 22px; padding-right: 22px; }
.sections { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 22px 11px; border-bottom: 1px solid #d6c8b3; }
.sections button { border: 0; border-bottom: 1px solid transparent; padding: 2px 0; background: none; color: #756b5d; font-size: 10px; }
.sections button[aria-pressed="true"] { border-bottom-color: orangered; color: orangered; }
.sections button:hover { color: orangered; }
.news-panel .quiet-status { margin: 9px 22px 2px; }
.headlines-scroll { padding: 0 22px 20px; }
.story { padding: 15px 0; border-bottom: 1px dotted #c9bda9; }
.story-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 0 0 5px; color: #9b8069; font-size: 8px; line-height: 1.45; text-transform: uppercase; }
.story-number { color: orangered; }
.story h2 { margin: 0; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.45; font-weight: normal; }
.story h2 a { text-decoration: none; }
.story h2 a:hover { color: orangered; text-decoration: underline; }
.story h2 a:visited { color: #8f8677; }
.story-summary { margin: 8px 0 0; color: #687a73; font-size: 11px; line-height: 1.55; }
.hide-summaries .story-summary { display: none; }
.empty, .nyt-credit { color: #8b8272; font-size: 10px; line-height: 1.6; }
.nyt-credit { padding: 16px 0; }
.site-footer { position: relative; display: flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: 43px; border-top: 1px solid orangered; color: orangered; font: 17px "Courier New", Courier, monospace; }
.footer-home { color: inherit; text-decoration: none; }
.footer-home:hover { text-decoration: underline; }
.forest-link { position: absolute; right: 76px; top: 50%; transform: translateY(-50%); color: #507343; font: 10px "Courier New", Courier, monospace; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .18s; }
.site-footer:hover .forest-link, .site-footer:focus-within .forest-link { opacity: 1; pointer-events: auto; }
.digital-dark .forest-link { color: #a6bd88; }
.forest-link:hover { text-decoration: underline; }
.weather-widget { position: absolute; left: 22px; top: 0; display: flex; align-items: center; gap: 9px; max-width: calc(50% - 65px); height: 42px; overflow: hidden; white-space: nowrap; color: darkslategray; font: 10px "Courier New", Courier, monospace; }
.weather-place { flex: none; max-width: 95px; color: orangered; overflow: hidden; text-overflow: ellipsis; }
.weather-days { order: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.weather-day { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.weather-day-label { color: #8b8272; }
.weather-icon { display: block; width: 19px; height: 19px; }
.weather-source { order: 1; flex: none; color: #8b8272; font-size: 9px; text-decoration: none; }
.weather-source:hover { color: orangered; text-decoration: underline; }
.fullscreen-toggle { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); border: 0; padding: 7px 0 7px 9px; background: transparent; color: inherit; font: 10px "Courier New", Courier, monospace; opacity: 0; pointer-events: none; transition: opacity .18s; }
.site-footer:hover .fullscreen-toggle, .site-footer:focus-within .fullscreen-toggle { opacity: 1; pointer-events: auto; }
.fullscreen-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Digital clock: the desk becomes a dim room, with the notes still legible. */
html.digital-dark { background: #101813; color: #d9e1d1; color-scheme: dark; }
.digital-dark .clock-panel { border-top-color: #ba8667; border-bottom-color: #455448; }
.digital-dark .news-panel { border-top-color: #ba8667; border-left-color: #ba8667; }
.digital-dark .notes-panel { border-color: #ba8667; }
.digital-dark .panel-heading h1, .digital-dark .panel-heading button, .digital-dark .site-footer { color: #e6a37b; }
.digital-dark .weather-widget { color: #d9e1d1; }
.digital-dark .weather-icon { filter: brightness(1.7) saturate(.8); }
.digital-dark .weather-place { color: #e6a37b; }
.digital-dark .weather-day-label, .digital-dark .weather-source { color: #a3b0a0; }
.digital-dark .weather-source:hover { color: #e6a37b; }
.digital-dark .site-footer { border-top-color: #ba8667; }
.digital-dark button:focus-visible, .digital-dark a:focus-visible, .digital-dark textarea:focus-visible { outline-color: #e6a37b; }
.digital-dark .quiet-status, .digital-dark .empty, .digital-dark .nyt-credit { color: #a3b0a0; }
.digital-dark .quiet-status.error { color: #f0aa92; }
.digital-dark .sections { border-bottom-color: #455448; }
.digital-dark .sections button { color: #a6b2a2; }
.digital-dark .sections button[aria-pressed="true"], .digital-dark .sections button:hover { color: #e6a37b; border-bottom-color: #e6a37b; }
.digital-dark .story { border-bottom-color: #425044; }
.digital-dark .story-meta { color: #9fad98; }
.digital-dark .story-summary { color: #aab9a5; }
.digital-dark .story-number, .digital-dark .story h2 a:hover { color: #e6a37b; }
.digital-dark .story h2 a:visited { color: #a4aa98; }
.digital-dark .notes-scroll, .digital-dark .headlines-scroll { scrollbar-color: #506250 transparent; }
.digital-dark .note { --paper: #313b2c; --ink: #e3e8cf; box-shadow: 2px 3px 0 rgba(0, 0, 0, .14), 3px 6px 10px rgba(0, 0, 0, .17); }
.digital-dark .note[data-color="rose"] { --paper: #47363a; --ink: #f1dddd; }
.digital-dark .note[data-color="blue"] { --paper: #2b3d44; --ink: #d9ebeb; }
.digital-dark .note[data-color="green"] { --paper: #304435; --ink: #e0edd7; }
.digital-dark .note[data-color="lilac"] { --paper: #3c3549; --ink: #e7def1; }
.digital-dark .note textarea::placeholder { color: #a9b4a0; }
.digital-dark .swatch[data-color="yellow"] { --swatch: #313b2c; }
.digital-dark .swatch[data-color="rose"] { --swatch: #47363a; }
.digital-dark .swatch[data-color="blue"] { --swatch: #2b3d44; }
.digital-dark .swatch[data-color="green"] { --swatch: #304435; }
.digital-dark .swatch[data-color="lilac"] { --swatch: #3c3549; }

.hidden-room[hidden] { display: none; }
.hidden-room { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: repeating-linear-gradient(0deg, rgba(16, 25, 20, .96) 0 3px, rgba(29, 45, 34, .96) 4px 5px); }
.hidden-room-card { width: min(460px, 100%); padding: 24px 28px 30px; border: 1px solid #91ab80; box-shadow: 0 0 0 8px #142117, 0 0 28px #8bb37433; color: #c9d7ac; background: #17251d; font: 13px/1.7 "Courier New", Courier, monospace; animation: hidden-room-arrive .5s both; }
.hidden-room-index { margin: 0; color: #96ad85; font-size: 10px; letter-spacing: .15em; }
.hidden-room-signal { margin: 27px 0 16px; color: #d4e3a3; font-size: 23px; text-shadow: 0 0 12px #b6db8e; }
.hidden-room-card h2 { margin: 0 0 15px; color: #e0e9c4; font: italic 30px/1.2 Georgia, serif; }
.hidden-room-card p:not(.hidden-room-index, .hidden-room-signal) { max-width: 33ch; }
.hidden-room-card button { margin-top: 24px; padding: 6px 0; border: 0; background: transparent; color: #d4e3a3; font: 11px "Courier New", Courier, monospace; }
.hidden-room-card button:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes hidden-room-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: none) { .note-bottom { opacity: 1; visibility: visible; } }
@media (max-width: 1050px) { .weather-day:nth-child(n+3) { display: none; } }
@media (max-width: 850px) { .weather-day:nth-child(n+2) { display: none; } }
@media (max-width: 760px) {
    /* Share one compact header row without copying or moving the footer DOM. */
    body { height: auto; min-height: 100dvh; overflow: visible; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-content: start; }
    .desk { display: contents; }
    .clock-panel { grid-column: 1; grid-row: 1; min-height: 96px; padding: 8px 16px; border: 0; place-items: start; }
    .watch { width: 80px; }
    /* Keep the small SVG's strokes legible instead of scaling below a pixel. */
    .clock-face .outer-ring, .clock-face .tick,
    .clock-face .hour-hand, .clock-face .minute-hand,
    .clock-face .second-hand { vector-effect: non-scaling-stroke; }
    .clock-face .outer-ring { stroke-width: .75px; }
    .clock-face .tick { stroke-width: .75px; }
    .clock-face .tick.major { stroke-width: 1.25px; }
    .clock-face .hour-hand { stroke-width: 1.8px; }
    .clock-face .minute-hand { stroke-width: 1.25px; }
    .clock-face .second-hand { stroke-width: .8px; }
    .digital-display { font-size: 12px; letter-spacing: 0; }
    .notes-panel { grid-column: 1 / -1; grid-row: 2; height: calc(100svh - 96px); min-height: 260px; max-height: none; border-top: 1px solid orangered; border-bottom: 1px solid orangered; }
    .news-panel { grid-column: 1 / -1; grid-row: 3; min-height: 55vh; max-height: 75vh; border-left: 0; border-top: 0; }
    .story h2 { font-size: 14px; }
    .panel-heading, .news-heading { min-height: 43px; padding: 9px 16px 6px; }
    .quiet-status, .news-panel .quiet-status { margin-left: 16px; margin-right: 16px; }
    .notes-scroll, .headlines-scroll { padding-left: 16px; padding-right: 16px; }
    .sections { padding-left: 16px; padding-right: 16px; }
    .site-footer { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 4px 12px; min-width: 0; min-height: 96px; padding: 8px 16px 8px 0; border: 0; font-size: 12px; }
    .footer-home { order: 0; flex-basis: 100%; text-align: right; }
    .weather-widget { order: 1; position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; flex-basis: 100%; max-width: 100%; height: auto; min-width: 0; overflow: visible; font-size: 9px; }
    .weather-place { flex: 0 1 auto; min-width: 0; max-width: 100%; }
    .weather-days { order: 1; }
    .weather-source { order: 2; font-size: 8px; }
    .weather-icon { width: 16px; height: 16px; }
    .weather-day:nth-child(n+2) { display: none; }
    .forest-link, .fullscreen-toggle { position: static; transform: none; opacity: 1; pointer-events: auto; font-size: 9px; }
    .forest-link { order: 2; }
    .fullscreen-toggle { order: 3; padding: 3px 0 3px 6px; }
}
@media (max-width: 430px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel-heading h1 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .watch, .clock-face, .digital-display, .note-bottom, .fullscreen-toggle, .forest-link { transition: none; } .hidden-room-card { animation: none; } }


/* EXPERIMENTS 01–50 / FONTS AND MOTION */
@font-face {
    font-family: "Plateau Courier";
    src: url("../styles/courier.ttf") format("truetype");
}

@font-face {
    font-family: "Alagard";
    src: url("../styles/alagard.ttf") format("truetype");
}

@keyframes soft-flicker {
    0%, 91%, 96%, 100% { opacity: 1; }
    92%, 95% { opacity: 0.55; }
}

@keyframes scan {
    from { background-position: 0 0; }
    to { background-position: 0 6px; }
}

@keyframes passing {
    from { transform: translateX(0); }
    to { transform: translateX(110%); }
}

@keyframes shimmer {
    0%, 100% { transform: skewX(0); text-shadow: 1px 0 #c69a68; }
    50% { transform: skewX(-2deg); text-shadow: -2px 1px #dfb788; }
}

@keyframes morse {
    0%, 12%, 28%, 52%, 61%, 100% { opacity: 1; }
    13%, 27%, 53%, 60% { opacity: 0.3; }
}

@keyframes ebb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.38; }
}



/* EXPERIMENTS 01–50 / PARAGRAPH STYLES */
/* 01–10: paper and ink. Each class can be used on a paragraph by itself. */
.carbon-copy {
    padding: 12px 4px;
    color: #283e50;
    letter-spacing: 0.03em;
    text-shadow: 2px 1px 0 #a4bbc8, 4px 2px 0 #d5dee2;
}

.telegram {
    padding: 14px;
    border-left: 6px double #5f5141;
    color: #5f5141;
    font-size: 0.88rem;
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 1.7;
}

.receipt {
    max-width: 370px;
    padding: 16px 20px 24px;
    border-bottom: 3px dashed #c7c0b2;
    background: #fffef9;
    box-shadow: 4px 5px 0 #ded9ca;
    color: #4b514d;
    font-size: 0.78rem;
    line-height: 1.9;
    white-space: nowrap;
}

.library-card {
    padding: 18px 20px;
    border-left: 7px solid #a65649;
    background: #eee7d2;
    color: #504738;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    box-shadow: inset 0 -1px #bcb19a;
}

.red-pencil {
    padding: 8px 5px;
    color: #b0473c;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-style: italic;
    text-decoration: underline wavy #d98979 1px;
    text-underline-offset: 6px;
}

.palimpsest {
    padding: 18px;
    background: #eae4d7;
    color: #514a42;
    letter-spacing: 0.03em;
    text-shadow: -3px -2px 0 #c9c2b4, 3px 2px 0 #d0c8b9;
}

.museum-label {
    padding: 18px;
    border: 3px double #756b60;
    color: #4f463d;
    font-family: Georgia, serif;
    text-align: center;
    letter-spacing: 0.12em;
}
.museum-label small { display: block; margin-top: 7px; font-size: 0.7rem; font-style: italic; letter-spacing: 0.02em; }

.legal-pad {
    min-height: 84px;
    padding: 12px 16px 12px 38px;
    border-left: 2px solid #d98787;
    background: repeating-linear-gradient(to bottom, #f8f2bf 0 27px, #b5cad0 28px 29px);
    color: #454338;
    line-height: 29px;
}

.stamp {
    display: inline-block;
    padding: 12px 15px;
    border: 4px dotted #a54c42;
    color: #a54c42;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    transform: rotate(-2deg);
}

.cutout {
    padding: 22px;
    background: #2d2927;
    color: #fff7e5;
    font-family: Georgia, serif;
    font-size: 1.15rem;
    clip-path: polygon(0 0, 97% 0, 100% 22%, 100% 100%, 3% 100%, 0 77%);
}

/* 11–20: light and electricity. */
.amber-terminal {
    padding: 20px;
    background: #231b13;
    color: #efb45b;
    text-shadow: 0 0 5px #c77425;
    letter-spacing: 0.08em;
}

.green-phosphor {
    padding: 20px;
    background: #12291b;
    background-image: repeating-linear-gradient(to bottom, transparent 0 4px, #24412a 4px 6px);
    color: #99d68b;
    text-shadow: 0 0 5px #72cb6f;
    animation: scan 0.5s linear infinite;
}

.motel-neon {
    padding: 22px;
    background: #2b1531;
    color: #ff95d0;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 4px #ff4bb1, 0 0 16px #c82e82;
}

.sodium-lamp {
    padding: 25px;
    background: linear-gradient(110deg, #4e342a, #805239);
    color: #ffcc7c;
    font-family: Georgia, serif;
    font-style: italic;
    text-shadow: 0 0 7px #ee9e4d;
}

.ultraviolet {
    padding: 22px;
    background: #1d1236;
    color: #d8b9ff;
    letter-spacing: 0.08em;
    text-shadow: 0 0 5px #9451dd, 0 0 16px #6632af;
}

.moon-glass {
    padding: 25px;
    border: 1px solid #9aa9bc;
    background: #142236;
    box-shadow: inset 0 0 24px #415777;
    color: #d6e1e8;
    font-family: Georgia, serif;
    font-style: italic;
    text-align: center;
}

.solar-flare {
    padding: 25px 18px;
    background: radial-gradient(circle at 70% 50%, #ffe390, #ff9958 45%, #b54437 100%);
    color: #482a27;
    font-weight: bold;
    letter-spacing: 0.07em;
}

.aquarium {
    padding: 28px;
    border-radius: 50% 4% 45% 5% / 16% 40% 18% 35%;
    background: linear-gradient(130deg, #16555a, #3d9e92);
    color: #dbf5df;
    font-family: Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.6;
}

.afterimage {
    padding: 16px 5px;
    color: #23323b;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: -3px 0 #e56879, 3px 0 #6dc5c4;
}

.projector {
    padding: 24px;
    border: 1px dashed #e6ddc8;
    background: #262524;
    color: #eee8da;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-align: center;
    animation: soft-flicker 4s steps(1) infinite;
}

/* 21–30: places and objects. */
.road-sign {
    padding: 22px;
    border: 4px solid #e6ecd6;
    border-radius: 5px;
    background: #315f4b;
    box-shadow: 0 0 0 2px #315f4b;
    color: #f2f5e6;
    font-weight: bold;
    letter-spacing: 0.09em;
    text-align: center;
}

.hotel-key {
    display: inline-block;
    padding: 20px 24px;
    border: 3px double #c9a36d;
    border-radius: 40px 8px 8px 40px;
    background: #71393e;
    color: #f1dbac;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
}

.ticket-stub {
    padding: 23px;
    border-left: 3px dashed #ac8c64;
    border-right: 3px dashed #ac8c64;
    background: #e9d5b0;
    color: #57452e;
    font-size: 0.92rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.06em;
}

.postcard {
    padding: 25px 30px;
    border-top: 3px solid #d17a61;
    border-bottom: 1px solid #d17a61;
    background: #f8e8d7;
    color: #715545;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    text-align: right;
}

.chalkboard {
    padding: 25px;
    border: 7px solid #745842;
    background: #213a31;
    color: #e5e9d9;
    font-family: Georgia, serif;
    text-shadow: 1px 1px 2px #aeb9a7;
}

.warning-tape {
    padding: 22px 18px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-image: repeating-linear-gradient(135deg, #e6c84a 0 10px, #33302a 10px 18px) 9;
    background: #e6c84a;
    color: #2b2925;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-align: center;
}

.pharmacy-label {
    padding: 20px;
    border: 2px solid #446b5e;
    background: #e2eee2;
    color: #2f5144;
    font-size: 0.83rem;
    line-height: 1.8;
    letter-spacing: 0.12em;
}

.matchbox {
    display: inline-block;
    padding: 18px 25px;
    border: 5px solid #bd5d43;
    background: #f4dfbd;
    box-shadow: inset 0 0 0 1px #bd5d43, 6px 5px 0 #d5c5aa;
    color: #a43d34;
    font-family: Alagard, Georgia, serif;
    font-size: 1.1rem;
    text-align: center;
}

.field-notebook {
    padding: 20px 20px 20px 30px;
    border-left: 3px solid #879bb0;
    background: repeating-linear-gradient(to bottom, #f4f4eb 0 26px, #bfcccf 27px 28px);
    color: #40535e;
    font-size: 0.95rem;
    line-height: 28px;
}

.theatre-card {
    padding: 28px 15px;
    background: #211d24;
    color: #f3e4cd;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    line-height: 1.8;
    text-align: center;
}

/* 31–40: strange typography. */
.wide-silence {
    padding: 23px 0;
    color: #687371;
    font-size: 0.8rem;
    letter-spacing: 0.45em;
    line-height: 2.2;
    text-align: center;
}

.narrow-escape {
    padding: 8px 0;
    color: #4f423e;
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: 1.6rem;
    font-stretch: condensed;
    letter-spacing: -0.07em;
    text-transform: uppercase;
}

.drop-cap {
    padding: 8px 0;
    color: #423f38;
    font-family: Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.6;
}
.drop-cap::first-letter { float: left; margin: -9px 7px -15px 0; color: #b34f3b; font-size: 3.7rem; line-height: 1; }

.vertical-thought {
    min-height: 190px;
    padding: 8px 20px;
    border-left: 2px solid #ad7453;
    color: #9b604b;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
}

.soft-blur {
    padding: 17px 0;
    color: #6e7980;
    filter: blur(1.2px);
    transition: filter 0.4s;
}
.soft-blur:hover { filter: blur(0); }

.hollow-letters {
    padding: 10px 0;
    color: #667b7b;
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: bold;
    letter-spacing: 0.04em;
    -webkit-text-stroke: 1px #355f64;
    -webkit-text-fill-color: transparent;
}

.double-exposure {
    padding: 12px 4px;
    color: #423a42;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    text-shadow: -4px -2px 0 #d497a3, 4px 2px 0 #8aa8ad;
}

.falling-line {
    display: inline-block;
    padding: 15px 7px;
    border-bottom: 1px solid #765d67;
    color: #765d67;
    font-style: italic;
    transform: rotate(-2deg);
}

.wavy-proof {
    padding: 15px 0;
    color: #556679;
    font-family: Georgia, serif;
    font-size: 1.18rem;
    text-decoration: underline wavy #9c5360 2px;
    text-underline-offset: 8px;
}

.vanishing-point {
    padding: 25px 0;
    color: #655666;
    font-size: 0.95rem;
    letter-spacing: -0.04em;
    text-align: center;
    transform: perspective(250px) rotateX(25deg) scale(0.85);
}

/* 41–50: weather and movement. */
.passing-train {
    display: inline-block;
    padding: 17px 0;
    color: #66727f;
    font-size: 0.9rem;
    white-space: nowrap;
    animation: passing 5s linear infinite alternate;
}

.rain-on-glass {
    padding: 25px;
    background: repeating-linear-gradient(105deg, #c6d9e0 0 2px, #e7eceb 2px 16px);
    color: #3f6474;
    font-family: Georgia, serif;
    font-size: 1.12rem;
    font-style: italic;
    text-shadow: 1px 1px #f7faf7;
}

.heat-shimmer {
    display: inline-block;
    padding: 22px 5px;
    color: #a65f3c;
    font-family: Georgia, serif;
    font-size: 1.13rem;
    animation: shimmer 1.8s ease-in-out infinite;
}

.tide-mark {
    padding: 25px 12px 13px;
    border-bottom: 6px double #679eab;
    background: linear-gradient(to bottom, floralwhite 20%, #dcebf0);
    color: #417587;
    letter-spacing: 0.1em;
}

.snow-drift {
    padding: 30px 25px;
    border-radius: 5px 30px 8px 35px;
    background: linear-gradient(140deg, #cbdce5, #f2f3ee 65%);
    color: #5a798b;
    font-family: Georgia, serif;
    font-style: italic;
    text-shadow: 1px 1px white;
}

.morse-pulse {
    padding: 22px;
    border-left: 4px dotted #4b6a67;
    color: #4b6a67;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    animation: morse 3s steps(1) infinite;
}

.orbit {
    width: min(80%, 480px);
    padding: 20px 25px;
    border: 2px dotted #8b7595;
    border-radius: 50%;
    color: #745e81;
    font-family: Georgia, serif;
    font-style: italic;
    text-align: center;
}

.flicker {
    padding: 22px;
    background: #35312a;
    color: #f8d18a;
    text-shadow: 0 0 6px #d59c45;
    letter-spacing: 0.12em;
    animation: soft-flicker 2.1s steps(1) infinite;
}

.unsent-letter {
    padding: 22px;
    border-left: 1px dotted #b67979;
    background: #fff9f4;
    color: #765767;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.5;
}

.last-transmission {
    padding: 30px 18px;
    border: 1px solid #70b7a6;
    background: radial-gradient(ellipse at center, #19443f, #0c211f);
    color: #b2e8cf;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-align: center;
    text-shadow: 0 0 8px #73ceb4;
    animation: ebb 4s ease-in-out infinite;
}

/* Each specimen has its own small reply to hover or keyboard focus. */
.carbon-copy:is(:hover, :focus-visible) {
    text-shadow: 0 0 0 #a4bbc8, 0 0 0 #d5dee2;
    letter-spacing: 0.08em;
}
.telegram:is(:hover, :focus-visible) {
    border-color: orangered;
    letter-spacing: 0.08em;
}
.receipt:is(:hover, :focus-visible) {
    transform: translateY(-4px) rotate(1deg);
    box-shadow: 6px 9px 0 #ded9ca;
}
.library-card:is(:hover, :focus-visible) {
    transform: translateX(7px);
    border-color: #c67a63;
}
.red-pencil:is(:hover, :focus-visible) {
    color: #8b302f;
    text-shadow: 2px 2px 0 #ecc6bc;
}
.palimpsest:is(:hover, :focus-visible) {
    text-shadow: 0 0 0 #c9c2b4, 0 0 0 #d0c8b9;
}
.museum-label:is(:hover, :focus-visible) {
    background: #756b60;
    color: #fff9eb;
}
.legal-pad:is(:hover, :focus-visible) {
    background-position: 0 9px;
    color: #8b4943;
}
.stamp:is(:hover, :focus-visible) {
    transform: rotate(1deg) scale(1.04);
    border-color: #cd6c5b;
}
.cutout:is(:hover, :focus-visible) {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 97% 100%, 0 100%, 0 20%);
    color: #f6c780;
}

.amber-terminal:is(:hover, :focus-visible) {
    letter-spacing: 0.13em;
    text-shadow: 0 0 12px #ffad42;
}
.green-phosphor:is(:hover, :focus-visible) {
    animation-play-state: paused;
    color: #d5ffbd;
    text-shadow: 0 0 12px #a9f298;
}
.motel-neon:is(:hover, :focus-visible) {
    color: #ffd0e9;
    text-shadow: 0 0 8px #ff4bb1, 0 0 28px #ed52ae;
}
.sodium-lamp:is(:hover, :focus-visible) {
    box-shadow: inset 0 0 30px #d78645;
    color: #fff0b7;
}
.ultraviolet:is(:hover, :focus-visible) {
    letter-spacing: 0.14em;
    text-shadow: 0 0 12px #c180ff, 0 0 25px #8d4dcb;
}
.moon-glass:is(:hover, :focus-visible) {
    box-shadow: inset 0 0 35px #7895b8, 0 0 12px #bbc8d5;
}
.solar-flare:is(:hover, :focus-visible) {
    transform: scale(1.02);
    box-shadow: 0 0 18px #e78d51;
}
.aquarium:is(:hover, :focus-visible) {
    border-radius: 10% 45% 8% 40% / 42% 12% 38% 14%;
    transform: rotate(1deg);
}
.afterimage:is(:hover, :focus-visible) {
    text-shadow: -1px 0 #e56879, 1px 0 #6dc5c4;
}
.projector:is(:hover, :focus-visible) {
    animation-play-state: paused;
    text-shadow: 0 0 9px #fff2d3;
    letter-spacing: 0.2em;
}

.road-sign:is(:hover, :focus-visible) {
    transform: translateX(6px);
    box-shadow: 0 0 0 2px #315f4b, 5px 5px 0 #afc2b3;
}
.hotel-key:is(:hover, :focus-visible) {
    transform: rotate(3deg);
    box-shadow: 4px 5px 0 #d9b48e;
}
.ticket-stub:is(:hover, :focus-visible) {
    letter-spacing: 0.12em;
    border-color: #784d3f;
}
.postcard:is(:hover, :focus-visible) {
    transform: rotate(-1deg);
    box-shadow: 5px 7px 0 #e5cdb6;
}
.chalkboard:is(:hover, :focus-visible) {
    color: white;
    text-shadow: 0 0 8px #eff5e6;
}
.warning-tape:is(:hover, :focus-visible) {
    transform: skewX(-2deg);
    letter-spacing: 0.12em;
}
.pharmacy-label:is(:hover, :focus-visible) {
    background-color: #cfe2d4;
    border-color: #244e41;
}
.matchbox:is(:hover, :focus-visible) {
    transform: translateY(-5px) rotate(-2deg);
    box-shadow: inset 0 0 0 1px #bd5d43, 8px 10px 0 #d5c5aa;
}
.field-notebook:is(:hover, :focus-visible) {
    background-position: 0 6px;
    letter-spacing: 0.04em;
}
.theatre-card:is(:hover, :focus-visible) {
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px #f3e4cd;
}

.wide-silence:is(:hover, :focus-visible) {
    letter-spacing: 0.55em;
    color: #a2726d;
}
.narrow-escape:is(:hover, :focus-visible) {
    letter-spacing: 0.03em;
    color: #a35145;
}
.drop-cap:is(:hover, :focus-visible) { background-color: #eee8dc; }
.drop-cap:is(:hover, :focus-visible)::first-letter { color: #e3724e; }
.vertical-thought:is(:hover, :focus-visible) {
    transform: translateY(7px);
    letter-spacing: 0.3em;
}
.soft-blur:is(:hover, :focus-visible) { filter: blur(0); }
.hollow-letters:is(:hover, :focus-visible) {
    -webkit-text-fill-color: #355f64;
    letter-spacing: 0.08em;
}
.double-exposure:is(:hover, :focus-visible) {
    text-shadow: -1px -1px 0 #d497a3, 1px 1px 0 #8aa8ad;
}
.falling-line:is(:hover, :focus-visible) {
    transform: rotate(2deg);
    border-color: #b57b85;
}
.wavy-proof:is(:hover, :focus-visible) {
    text-decoration-style: solid;
    color: #9c5360;
}
.vanishing-point:is(:hover, :focus-visible) {
    transform: perspective(250px) rotateX(0) scale(1);
    letter-spacing: 0.02em;
}

.passing-train:is(:hover, :focus-visible) {
    animation-play-state: paused;
    color: #b06555;
}
.rain-on-glass:is(:hover, :focus-visible) {
    background-position: 12px 0;
    text-shadow: 2px 2px white;
}
.heat-shimmer:is(:hover, :focus-visible) {
    animation-play-state: paused;
    transform: skewX(0);
    text-shadow: none;
}
.tide-mark:is(:hover, :focus-visible) {
    border-color: #3e879a;
    color: #245e71;
    letter-spacing: 0.14em;
}
.snow-drift:is(:hover, :focus-visible) {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px #d8e4e7;
}
.morse-pulse:is(:hover, :focus-visible) {
    animation-play-state: paused;
    opacity: 1;
    letter-spacing: 0.24em;
}
.orbit:is(:hover, :focus-visible) {
    transform: rotate(3deg);
    border-style: solid;
}
.flicker:is(:hover, :focus-visible) {
    animation-play-state: paused;
    color: #ffe8b4;
    text-shadow: 0 0 15px #f9c56e;
}
.unsent-letter:is(:hover, :focus-visible) {
    transform: translateX(8px);
    border-color: #8f5468;
}
.last-transmission:is(:hover, :focus-visible) {
    animation-play-state: paused;
    letter-spacing: 0.18em;
    text-shadow: 0 0 17px #a1f2d5;
}

@media (max-width: 520px) {
    .receipt { font-size: 0.63rem; padding-left: 8px; padding-right: 8px; }
    .wide-silence { letter-spacing: 0.18em; }
    .hotel-key, .matchbox { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sample p { animation: none !important; transition: none !important; }
}


/* EXPERIMENTS 51–100 / STAGE FOUNDATION */
@font-face { font-family: Plateau; src: url('../styles/courier.ttf') format('truetype'); }
.stage {
    --ink: #31382c; --paper: #e3dfd2; --accent: #b34c36;
    position: relative; isolation: isolate; display: grid; place-items: center;
    min-width: 0; height: 270px; padding: 30px; overflow: hidden;
    background: var(--paper); color: var(--ink); border: 1px solid #0000000d;
    font-size: 19px; line-height: 1.5; cursor: crosshair; user-select: none;
}
.stage:focus-visible { outline: 2px solid #a34028; outline-offset: 4px; }
.phrase { position: relative; text-align: center; max-width: 100%; }
.instrument { position: absolute; bottom: 12px; left: 16px; right: 16px; font-size: 9px; letter-spacing: .07em; line-height: 1.4; opacity: .65; }
.word-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 9px; max-width: 100%; }
.word { display: inline-block; transition: opacity .2s, color .2s; }
.glyph-line { text-align: center; max-width: 100%; line-height: 1.8; }
.glyph { display: inline-block; white-space: pre; }
.drawing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trace { fill: none; stroke: currentColor; stroke-width: .8; opacity: .5; }


/* EXPERIMENTS 51–100 / INTERACTIVE STYLES */
/* 51. A sentence occupies the whole field; the lens reveals only a portion. */
.x51 { --paper: #23232f; --ink: #eee5c9; padding: 0; }
.x51 .phrase { position: absolute; inset: 0; display: grid; place-items: center; padding: 45px; font-family: Georgia, serif; font-size: 29px; line-height: 1.3; }
.x51 .understatement { font-size: 9px; letter-spacing: .2em; color: #565462; }

/* 52. Words abandon their baseline. */
.x52 { --paper: #e3dacf; --ink: #714439; background-image: radial-gradient(circle at center, transparent 34%, #b8a18d44 34.3%, transparent 34.8%); }
.x52 .free-word { position: absolute; left: 50%; top: 46%; font-family: Georgia, serif; font-style: italic; font-size: 17px; }

/* 53. Lost words keep their physical space. */
.x53 { --paper: #f4e6c9; --ink: #674b38; }
.x53 .word { border-bottom: 1px dotted #aa7f63; }
.x53 .word.lost { color: transparent; border-color: #c64232; background: #c6423212; }
.x53 .instrument { color: #ac3f32; }

.x54 { --paper: #203e39; --ink: #d8bd88; }
.x54 .glyph { font-family: Georgia, serif; font-size: 22px; transition: color .2s, transform .3s; }
.x54::before { content: 'TESTIMONY / A ⇄ B'; position: absolute; top: 17px; font-size: 9px; letter-spacing: .2em; color: #8baa94; }

.x55 { --paper: #dce4d5; --ink: #51695e; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; font-size: 13px; }
.x55 .index-row { border-bottom: 1px solid #9eaf9d; white-space: nowrap; }
.x55::after { content: 'INDEX VOL. 0 / THE BOOK IS ELSEWHERE'; position: absolute; bottom: 12px; font-size: 8px; letter-spacing: .1em; }

.x56 { --paper: #ecd0bd; --ink: #713e37; }
.x56 .split { position: absolute; left: 30px; right: 30px; top: 85px; text-align: center; font: 24px/1.4 Georgia, serif; transition: transform .2s; }
.x56 .top { clip-path: inset(0 0 50% 0); }
.x56 .bottom { clip-path: inset(50% 0 0 0); }
.x56 .stitch { fill: none; stroke: #c22425; stroke-width: 1.4; }

.x57 { transition: background .6s, color .6s; }
.x57 .phrase { font-family: Georgia, serif; font-size: 24px; max-width: 340px; }
.x57::after { content: '↑ WINTER / SPRING / SUMMER / AUTUMN ↓'; position: absolute; top: 15px; font-size: 8px; letter-spacing: .1em; opacity: .5; }

.x58 { --paper: #d4d6c4; --ink: #3b524d; }
.x58 .phrase { font-family: Georgia, serif; font-size: 28px; line-height: 1.35; }
.x58::before { content: ', ; : ? .'; position: absolute; top: 5px; right: 20px; font-size: 45px; color: #9ba890; letter-spacing: 15px; }

.x59 { --paper: #3d2637; --ink: #ebb0a1; }
.x59 .echo-copy { position: absolute; left: 20%; top: 43%; width: 60%; text-align: center; font-size: 17px; letter-spacing: .08em; mix-blend-mode: screen; }
.x59 .echo-copy:first-child { z-index: 8; color: #fff0cf; }

.x60 { --paper: #252c2b; --ink: #d8ca9e; }
.x60 .word { position: relative; padding: 5px; margin-bottom: 12px; font-family: Georgia, serif; }
.x60 .word::after { content: attr(data-price); display: block; font: 9px Plateau, monospace; color: #7d8d77; }
.x60 .bid { outline: 1px solid #cda258; color: #ffe0a1; transform: scale(1.12); }
.x60 .purchased { text-decoration: line-through; opacity: .35; }

/* 61–70: material behaviour. */
.x61 { --paper: #eee6ce; }
.x61 .ink { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; font: bold 26px/1.25 Georgia, serif; mix-blend-mode: multiply; }
.x61 .cyan { color: #009baf; }.x61 .magenta { color: #c71c66; }.x61 .ochre { color: #cea030; }

.x62 { --paper: #cfc6b0; --ink: #cfc6b0; }
.x62 .phrase { font: bold 32px/1.25 Georgia, serif; letter-spacing: .06em; }
.x62::after { content: 'MOVE THE LIGHT, NOT THE LETTERS'; position: absolute; bottom: 14px; color: #8f897a; font-size: 8px; letter-spacing: .18em; }

.x63 { --paper: #e7eadb; --ink: #55744f; }
.x63 .glyph-line { z-index: 1; padding-bottom: 20px; font-size: 17px; }
.x63 .drawing { color: #779674; }
.x63::after { content: 'BASELINE INSTABILITY / LOCAL READING'; position: absolute; bottom: 16px; font-size: 8px; letter-spacing: .15em; }

.x64 { --paper: #263d50; --ink: #a3bdc6; }
.x64 .raindrop { position: absolute; font-family: Georgia, serif; font-style: italic; }
.x64::after { content: 'PRECIPITATION MAY BE APPEALED'; position: absolute; bottom: 12px; font-size: 8px; letter-spacing: .15em; color: #91a6b3; }

.x65 { --paper: #f4efda; --ink: #594b40; border-left: 8px dotted #c7c0ac; border-right: 8px dotted #c7c0ac; }
.x65 .diffraction { position: absolute; left: 25px; right: 25px; top: 34%; font-size: 19px; letter-spacing: .14em; text-align: center; }
.x65 .a { color: #8f5754; mix-blend-mode: multiply; }.x65 .b { color: #538b86; mix-blend-mode: multiply; }
.x65 .instrument { border-top: 1px dashed #b5a791; padding-top: 10px; }

.x66 { --paper: #252b24; --ink: #c7c4a0; }
.x66 .moth { position: absolute; font-size: 15px; }
.x66 .lamp { position: absolute; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; background: #f3df97; box-shadow: 0 0 50px 22px #d9bd4a30; }

.x67 { --paper: #ded9e7; --ink: #5e486c; perspective: 600px; }
.x67 .fold-room { position: relative; width: 135px; height: 110px; transform-style: preserve-3d; transition: transform .2s; }
.x67 .wall { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #765a90; background: #cfc3ddbb; font-size: 13px; transition: transform .65s; backface-visibility: visible; }
.x67 .wall-0 { transform: translateZ(55px); }.x67 .wall-1 { transform: rotateY(90deg) translateZ(67px); }.x67 .wall-2 { transform: rotateY(-90deg) translateZ(67px); }.x67 .wall-3 { transform: rotateX(90deg) translateZ(55px); }
.x67 .unfolded .wall-0 { transform: translateZ(0); }.x67 .unfolded .wall-1 { transform: translateX(135px); }.x67 .unfolded .wall-2 { transform: translateX(-135px); }.x67 .unfolded .wall-3 { transform: translateY(-110px); }

.x68 { --paper: #e8ded2; --ink: #514637; }
.x68 .glyph { font-family: Georgia, serif; font-size: 25px; transition: transform .15s; }
.x68::after { content: 'PLEASE APPLY THOUGHT EVENLY'; position: absolute; bottom: 18px; font-size: 8px; letter-spacing: .15em; color: #997953; }

.x69 { --paper: #615646; --ink: #e8dcc2; background-image: repeating-linear-gradient(175deg, transparent 0 43px, #2d281922 44px 46px); }
.x69 .glyph { font-size: 23px; min-width: 12px; }
.x69::after { content: 'STRATUM 0 / BRUSH TO TRANSLATE'; position: absolute; bottom: 12px; font-size: 9px; color: #cfba99; }

.x70 { --paper: #d8dfd5; --ink: #435d5d; background: linear-gradient(to bottom,#d8dfd5 var(--tide,50%),#92b2af var(--tide,50%)); }
.x70 .shore { position: absolute; top: 20%; left: 30px; right: 30px; text-align: center; font: 20px/1.4 Georgia, serif; }
.x70 .reflection { position: absolute; left: 30px; right: 30px; text-align: center; font: 20px/1.4 Georgia, serif; transform: scaleY(-1); opacity: .4; filter: blur(.6px); }
.x70 .horizon { position: absolute; left: 0; right: 0; height: 1px; background: #436b66; }

/* 71–80: forms, permits, and people who were never consulted. */
.x71 { --paper: #f0dfc4; --ink: #6d503d; justify-items: stretch; }
.x71 .docket { font-size: 12px; line-height: 2; }
.x71 .docket-row { border-bottom: 1px solid #b89e7c; }
.x71::before { content: 'CAUSES MAY BE FILED RETROACTIVELY'; position: absolute; top: 13px; font-size: 8px; letter-spacing: .1em; }

.x72 { --paper: #b4b7a0; --ink: #474d41; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 30px 50px; }
.x72 .folder { padding: 7px 15px; border: 1px solid #7c8872; border-radius: 8px 25px 0 0; background: #d5d3b8; font-size: 12px; box-shadow: 0 3px 4px #4c594333; transition: transform .2s; }
.x72 .folder:nth-child(2n) { background: #c4c7ae; }

.x73 { --paper: #e5d5bd; --ink: #766047; }
.x73 .phrase { font-size: 17px; letter-spacing: .13em; }
.x73 .seal { position: absolute; display: grid; place-items: center; width: 135px; height: 135px; border: 3px double #a34434; border-radius: 50%; color: #a34434; text-align: center; white-space: pre-line; font-size: 10px; letter-spacing: .1em; opacity: .45; }
.x73 .stamped { opacity: .9; mix-blend-mode: multiply; }

.x74 { --paper: #e0ddd0; --ink: #73645c; padding-bottom: 50px; }
.x74 .phrase { font: italic 23px/1.3 Georgia,serif; }
.x74 .regret-bar { position: absolute; left: 30px; right: 30px; bottom: 43px; border: 1px solid #988776; height: 7px; }
.x74 .regret-bar i { display: block; height: 100%; background: #a37566; }

.x75 { --paper: #6a514e; --ink: #705243; }
.x75 .envelope { position: absolute; width: 65%; height: 120px; display: grid; place-items: center; padding: 25px; background: #e3cdb0; border: 1px solid #bea285; box-shadow: 0 4px 13px #21161633; text-align: center; font-size: 11px; }
.x75 .envelope::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0,100% 0,50% 50%); background: #f4e4ca88; pointer-events: none; }

.x76 { --paper: #f3e9d3; --ink: #38332b; }
.x76 .word-line { gap: 5px 7px; justify-content: flex-start; font-size: 18px; }
.x76 .redacted { color: transparent; background: #35332d; }
.x76::after { content: 'RELEASED UNDER THE FREEDOM OF UNCERTAINTY ACT'; position: absolute; bottom: 13px; font-size: 8px; color: #a0735b; }

.x77 { --paper: #d7d0c1; --ink: #685747; }
.x77 .conditional-face { text-align: center; line-height: 1.9; font-size: 14px; }
.x77 .eyes { font-size: 17px; white-space: pre; color: #875647; }
.x77 .mouth { margin-top: 8px; border-bottom: 1px solid #a38e74; }

.x78 { --paper: #383d3e; --ink: #bfc7af; }
.x78 .corridor { position: absolute; inset: 25px; transform-style: preserve-3d; }
.x78 .door { position: absolute; inset: 0; border: 1px solid #71877d; text-align: center; padding-top: 12px; font-size: 12px; }
.x78 .door:nth-child(2) { inset: 20px 32px; }.x78 .door:nth-child(3) { inset: 40px 64px; }.x78 .door:nth-child(4) { inset: 60px 96px; }.x78 .door:nth-child(5) { inset: 80px 128px; }
.x78 .instrument { color: #aebfa8; }

.x79 { --paper: #e2dfbc; --ink: #678051; padding: 0; }
.x79 .fruit { position: absolute; transform: translate(-50%,-50%); font-size: 12px; background: #e2dfbc; padding: 2px 5px; z-index: 1; }
.x79 .trace { stroke-width: 1.2; opacity: .7; }

.x80 { --paper: #d5cfc8; --ink: #726269; }
.x80 .queue { display: flex; flex-direction: column; gap: 9px; font-size: 13px; letter-spacing: .08em; }
.x80 .queue span { border-bottom: 1px solid #afa2a1; }
.x80 .your-turn { color: #ad5a51; padding-left: 22px; }

/* 81–90: inconsistent physics. */
.x81 { --paper: #163f49; --ink: #abd7c8; }
.x81 .glyph-line { font-family: Georgia,serif; font-size: 23px; }
.x81::after { content: 'CONSONANTS ARE FIXED TO THE SEABED'; position: absolute; bottom: 15px; font-size: 8px; letter-spacing: .1em; opacity: .6; }

.x82 { --paper: #d2ccbe; --ink: #514b42; }
.x82 .glyph { font-size: 18px; padding: 0 1px; }
.x82 .cog { border-bottom: 1px solid #9b8c6f; transition: transform .2s; color: #a2533f; }
.x82::before { content: 'CAUTION: VOWELS REMAIN UNDER PRESSURE'; position: absolute; top: 14px; font-size: 8px; color: #9e6850; }

.x83 { --paper: #333249; --ink: #c4b0d2; }
.x83 .loop-word { position: absolute; left: 50%; top: 43%; font-size: 11px; }
.x83::after { content: 'ONE SIDE / NO FINAL WORD'; position: absolute; bottom: 14px; font-size: 8px; letter-spacing: .2em; }

.x84 { --paper: #78514b; --ink: #f0cfae; padding: 0; }
.x84 .buried,.x84 .peel { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; text-align: center; }
.x84 .buried { font: italic 27px/1.4 Georgia,serif; }
.x84 .peel { background: #e7ddc7; color: #6e6b54; font-size: 17px; letter-spacing: .1em; }

.x85 { --paper: #e9d5b6; --ink: #6b5143; }
.x85 .solid-witness,.x85 .contrary-shadow { position: absolute; left: 20px; right: 20px; text-align: center; font: 25px/1.3 Georgia,serif; }
.x85 .solid-witness { z-index: 1; }.x85 .contrary-shadow { color: #8a75634d; filter: blur(1px); }

.x86 { --paper: #1b2a3a; --ink: #c5c7b4; padding: 0; }
.x86 .star-word { position: absolute; transform: translate(-50%,-50%); font: italic 18px Georgia,serif; z-index: 1; }
.x86 .star-word::before { content: '·'; color: #f3d29a; padding-right: 3px; }
.x86 .trace { stroke: #bea779; opacity: .4; }

.x87 { --paper: #d5a866; --ink: #483c36; }
.x87 .phrase { font-family: Alagard,Georgia,serif; font-size: 30px; }
.x87 .eclipse { position: absolute; width: 75px; height: 75px; border-radius: 50%; background: #342d2b; box-shadow: 0 0 0 1px #fae7b2,0 0 25px #f9cc6566; transform: translate(-50%,-50%); transition: width .3s,height .3s; z-index: 2; }

.x88 { --paper: #eee0d2; --ink: #9d5b57; }
.x88 .phrase { font-size: 18px; letter-spacing: .1em; }
.x88 .drawing { color: #b16865; }

.x89 { --paper: #d1b7a0; --ink: #654637; }
.x89 .word { background: #f0e5ce; border: 1px solid #bfb6a5; padding: 15px 6px; font-size: 14px; transform-origin: bottom right; transition: transform .5s,box-shadow .2s; }
.x89 .fallen { transform: rotate(26deg); color: #9c4233; }

.x90 { --paper: #a6bdb0; --ink: #355a56; background-image: radial-gradient(ellipse at 20% 48%,#638f89 0 15%,transparent 16%),radial-gradient(ellipse at 50% 47%,#80a299 0 17%,transparent 18%),radial-gradient(ellipse at 80% 43%,#62877e 0 14%,transparent 15%); }
.x90 .pool-letter { position: absolute; font: italic 20px Georgia,serif; color: #e5e4c7; }

/* 91–100: systems that have noticed the visitor. */
.x91 { --paper: #383944; --ink: #c9b997; }
.x91 .wrong-clock { position: relative; width: 170px; height: 170px; border: 1px dotted #8d897a; border-radius: 50%; }
.x91 .hand { position: absolute; left: 50%; top: 50%; width: 80px; border-top: 1px solid #bc9f71; transform-origin: 0 0; font-size: 9px; padding-top: 3px; }
.x91 .hand:nth-child(2) { width: 59px; color: #c98c7c; }.x91 .hand:nth-child(3) { width: 70px; color: #8faca4; }

.x92 { --paper: #e9e5dc; --ink: #586a68; }
.x92 .phrase { font-family: Georgia,serif; font-size: 30px; transition: transform .2s,opacity .2s; }
.x92 .instrument { text-align: center; color: #9c7460; }

.x93 { --paper: #1e3533; --ink: #9eb59e; perspective: 400px; }
.x93 .printed-road { position: absolute; left: 0; right: 0; top: 0; transform-origin: center 80%; }
.x93 .road-line { font-size: 13px; text-align: center; padding: 7px; border-bottom: 1px solid #698675; letter-spacing: .1em; }

.x94 { --paper: #e5d5c8; --ink: #9b524d; }
.x94 .glyph { font-family: Georgia,serif; font-size: 21px; }
.x94 .drawing { color: #784b4b; }
.x94::after { content: 'CONFIDENCE IS AN OUTPUT, NOT A MEASUREMENT'; position: absolute; bottom: 13px; font-size: 8px; opacity: .7; }

.x95 { --paper: #d6c6a1; --ink: #527576; padding: 0; box-shadow: inset 0 0 0 15px #88785f; transition: background .5s; }
.x95 .landscape { position: absolute; left: -10%; width: 120%; text-align: center; white-space: nowrap; font-size: 24px; letter-spacing: .15em; }
.x95 .land-0 { top: 45px; color: #85897a; font-family: Georgia,serif; font-size: 33px; }.x95 .land-1 { top: 110px; color: #596e55; font-family: Alagard,serif; }.x95 .land-2 { top: 175px; color: #926d4f; }
.x95.night { background: #2f394d; }.x95.night .land-0 { color: #c2c3a1; }.x95.night .land-1 { color: #6c7f88; }.x95.night .land-2 { color: #a8a193; }

.x96 { --paper: #e1d9ce; --ink: #60504d; }
.x96 .glyph { font-family: Georgia,serif; font-size: 23px; transition: transform .8s,opacity .6s; }
.x96 .drain { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #383435; box-shadow: 0 0 0 4px #6b625055,0 0 0 9px #6b625022; transform: translate(-50%,-50%); }

.x97 { --paper: #d9d1d7; --ink: #76576b; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding-bottom: 40px; }
.x97 .delegate { line-height: 1.2; font-family: Georgia,serif; font-style: italic; transition: font-size .15s,opacity .15s; }

.x98 { --paper: #334939; --ink: #c3c7a1; }
.x98 .phrase { font-size: 22px; letter-spacing: .07em; overflow-wrap: anywhere; }
.x98::after { content: 'NO LOSS OF MEANING CAN BE GUARANTEED'; position: absolute; bottom: 15px; font-size: 8px; opacity: .65; }

.x99 { --paper: #eee8df; --ink: #8a7868; }
.x99 .glyph { font-family: Georgia,serif; font-size: 22px; transition: opacity .35s; }
.x99 .instrument { color: #ae7669; font-size: 10px; border-top: 1px dotted #c8b6a3; padding-top: 5px; min-height: 22px; }
.x99 .kept::before { content: 'KEPT: '; }

.x100 { --paper: #192e2b; --ink: #b8d5a9; background-image: radial-gradient(ellipse at center,#2b4b3c,transparent 70%); }
.x100 .glyph { font-size: 20px; transition: transform .7s,opacity .7s; text-shadow: 0 0 7px #b1dc9333; }
.x100 .instrument { color: #aacb9c; text-align: center; letter-spacing: .08em; }



@media (max-width: 760px) { .x78 .door:nth-child(5) { inset: 80px 105px; } }
@media (prefers-reduced-motion: reduce) { .stage, .stage * { transition: none !important; animation: none !important; } }