/* =========================================================================== FONTS — self-hosted (sovereign, no runtime CDN calls) system voice = IBM Plex Mono (chrome, labels, the "more-than-human" frame) voice = Atkinson Hyperlegible (body + headings — the self, legible) terminal = Departure Mono (one place only: the CALIPSO gate) =========================================================================== */ @font-face { font-family:"Atkinson"; src:url("/assets/fonts/atkinson-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Atkinson"; src:url("/assets/fonts/atkinson-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Atkinson Mono"; src:url("/assets/fonts/atkinson-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Departure Mono"; src:url("/assets/fonts/departure-mono.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; } /* =========================================================================== THEME — dark (navy, default) + light (cool paper). Set on by an inline no-FOUC script in base.njk; :root defaults to dark if JS is off. =========================================================================== */ :root { --font-system: "IBM Plex Mono", ui-monospace, monospace; --font-voice: "Atkinson", system-ui, sans-serif; --font-terminal: "Departure Mono", monospace; --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 1rem; --space-l: 2rem; --space-xl: 4rem; /* dark (default) */ --color-bg: #0b0d14; --color-bg-raised: #10131c; --color-fg: #a8b0c0; --color-fg-strong: #d0d4de; --color-fg-dim: #6f799a; /* AA-legible dim (was #3e4458, 2:1) — now passes 4.5:1 everywhere */ --color-accent: #4ec9b0; --color-accent-dim: #2a6b5e; --color-border: #1a1e2e; } /* light = WARM paper (cream + brown ink), teal stays the cold system accent. The paper is warm (the human), the system ink stays teal-cold (the frame). So the warm/cold duality lives inside light mode too, with ONE accent (§2.4 intact). */ [data-theme="light"] { --color-bg: #f2ede3; --color-bg-raised: #e9e1d3; --color-fg: #373128; /* light body strengthened (11:1) to lead the now-present 500-weight chrome; still below heading-strong (13.5:1) */ --color-fg-strong: #2a2118; --color-fg-dim: #574e3f; /* dim, pushed further in light (7:1 base / 6.3:1 raised) — near body-text weight (8.6:1), about the floor before the dim tier collapses */ --color-accent: #0f7a66; --color-accent-dim: #6a9e92; --color-border: #ddd3c2; } /* Light mode: the mono system-voice chrome renders at medium weight (500) to "hit harder" — warm-ink-on-warm-paper reads softer than the dark theme's cool pairing, so light gets the extra presence via weight, not more contrast. Dark stays 400 (deliberately left as approved). */ [data-theme="light"] .site-chrome a, [data-theme="light"] .site-chrome .chrome-mirror, [data-theme="light"] .theme-toggle, [data-theme="light"] .root-label, [data-theme="light"] .depth-nav a, [data-theme="light"] .note .note-tag, [data-theme="light"] .index-list .meta, [data-theme="light"] .register-toggle { font-weight: 500; } html { font-family: var(--font-voice); font-size: 16px; line-height: 1.75; background: var(--color-bg); color: var(--color-fg); -webkit-font-smoothing: antialiased; } body { max-width: 66ch; margin: 0 auto; padding: var(--space-xl) var(--space-l); min-height: 100vh; } /* the [hidden] attribute must always win — otherwise a class-level `display` (e.g. .ix-pick{display:flex}) overrides it and JS-hidden panels stay on screen. */ [hidden] { display: none !important; } /* ---- site nav (mode switch + theme toggle) ---- */ /* the shared site chrome (base.njk interiors) — floats top-right over the page, matching the landing's dx-chrome (unified 2026-07-15). Base pages carry .chrome-page for top clearance. */ .site-chrome { position: fixed; top: 1rem; right: 1rem; z-index: 9; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; } .site-chrome a, .site-chrome .chrome-mirror, .theme-toggle { font-family: var(--font-system); color: var(--color-fg-dim); text-decoration: none; font-size: 0.72rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.2s; background: none; border: none; cursor: pointer; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; } .site-chrome a[aria-current="page"] { color: var(--color-accent); } .site-chrome a:hover, .site-chrome a:focus-visible, .site-chrome .chrome-mirror:hover, .site-chrome .chrome-mirror:focus-visible, .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--color-fg-strong); } .site-chrome .chrome-mirror:hover, .site-chrome .chrome-mirror:focus-visible { color: var(--color-accent); } /* base pages: reserve top space on mobile so the floating chrome never sits on the first heading (desktop already clears it via the body's 4rem top padding). */ @media (max-width: 600px) { .chrome-page { padding-top: 3.5rem; } } /* ---- "under construction" state (client, local) — a clean banner over content that's kept in the DOM but glitched hard enough to read as torn-down, not finished. Reduced-motion → static, dimmed, no flashing. Lift the banner + unwrap .cw-glitch when the real copy lands. ---- */ .cw-banner { text-align: center; max-width: 58ch; margin: 0 auto var(--space-xl); padding: var(--space-l) var(--space-m); border: 1px solid var(--color-accent-dim); background: var(--color-bg-raised); position: relative; z-index: 5; } .cw-banner .cw-mark { display: block; font-family: var(--font-system); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-s); } .cw-banner h1 { margin-bottom: var(--space-s); } .cw-banner p { color: var(--color-fg-dim); margin: 0; } .cw-glitch { position: relative; overflow: hidden; /* constant heavy blur + contrast wash + wide RGB split — the copy is present for screen readers but visually torn apart, not meant to be read. */ filter: blur(2.9px) contrast(0.78) brightness(1.05) drop-shadow(6px 0 0 rgba(255,30,90,0.74)) drop-shadow(-6px 0 0 rgba(30,190,255,0.74)); animation: cw-tear 1.9s steps(1, end) infinite; will-change: clip-path, transform; } /* dense scanlines in the page-background colour, dragged over the text — cover most of it */ .cw-glitch::after { content: ""; position: absolute; inset: -4% 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(to bottom, transparent 0 1px, var(--color-bg) 1px 4px); opacity: 0.95; animation: cw-scan 0.6s steps(3, end) infinite; } /* solid background slabs that jump between vertical bands, blanking whole chunks of text */ .cw-glitch::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: var(--color-bg); clip-path: inset(100% 0 0 0); animation: cw-bands 2.3s steps(1, end) infinite; } @keyframes cw-tear { 0% { clip-path: inset(2% 0 2% 0); transform: translate(0,0) skewX(0); } 6% { clip-path: inset(4% 0 84% 0); transform: translate(-11px,0) skewX(-2.5deg); } 12% { clip-path: inset(40% 0 38% 0); transform: translate(12px,0) skewX(1deg); } 18% { clip-path: inset(74% 0 6% 0); transform: translate(-7px,0) skewX(2deg); } 24% { clip-path: inset(16% 0 60% 0); transform: translate(9px,0); } 30% { clip-path: inset(2% 0 2% 0); transform: translate(-2px,0); } 44% { clip-path: inset(55% 0 22% 0); transform: translate(-12px,1px) skewX(-1.5deg); } 52% { clip-path: inset(26% 0 52% 0); transform: translate(10px,-1px); } 60% { clip-path: inset(80% 0 4% 0); transform: translate(-8px,0); } 68% { clip-path: inset(2% 0 2% 0); transform: translate(3px,0); } 100% { clip-path: inset(2% 0 2% 0); transform: translate(0,0); } } @keyframes cw-bands { 0%, 100% { clip-path: inset(100% 0 0 0); } 10% { clip-path: inset(8% 0 78% 0); } 25% { clip-path: inset(44% 0 43% 0); } 40% { clip-path: inset(68% 0 16% 0); } 55% { clip-path: inset(26% 0 57% 0); } 70% { clip-path: inset(100% 0 0 0); } } @keyframes cw-scan { to { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .cw-glitch { animation: none; filter: none; transform: none; clip-path: none; opacity: 0.4; } .cw-glitch::before { animation: none; clip-path: inset(100% 0 0 0); } .cw-glitch::after { animation: none; opacity: 0.6; } } /* ---- skip link (keyboard bypass — hidden until focused) ---- */ .skip-link { position: absolute; left: var(--space-m); top: calc(-1 * var(--space-xl)); z-index: 100; font-family: var(--font-system); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-fg-strong); background: var(--color-bg-raised); border: 1px solid var(--color-accent); padding: var(--space-s) var(--space-m); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-m); } /* ---- links ---- */ a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-fg-strong); } a:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; } /* =========================================================================== TYPOGRAPHY — register split: sentence-case Atkinson bold = the human voice (headings, body) uppercase Plex Mono = the system voice (chrome, labels) =========================================================================== */ h1, h2, h3 { font-family: var(--font-voice); font-weight: 700; color: var(--color-fg-strong); line-height: 1.2; } h1 { font-size: 1.55rem; margin-bottom: var(--space-m); } h2 { font-size: 1.1rem; margin-top: var(--space-xl); margin-bottom: var(--space-s); } h3 { font-size: 1rem; margin-top: var(--space-l); margin-bottom: var(--space-s); } p { font-size: 1.09rem; margin-bottom: var(--space-m); } p:last-child { margin-bottom: 0; } code { font-family: var(--font-system); font-size: 0.85em; color: var(--color-accent); } /* ---- axiom / root blocks (Philosophy) ---- */ .root-block { margin-top: var(--space-l); } .root-block:first-of-type { margin-top: 0; } .root-label { font-family: var(--font-system); font-size: 0.65rem; color: var(--color-fg-dim); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--space-xs); } /* ---- depth sections ---- */ .depth-section { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); } .depth-section:last-child { border-bottom: none; } .depth-indicator { font-family: var(--font-system); font-size: 0.7rem; color: var(--color-fg-dim); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--space-m); } .depth-indicator::before { content: "// "; color: var(--color-accent-dim); } /* ---- depth nav (the descent prompts) ---- */ .depth-nav { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-s); } .depth-nav a { font-family: var(--font-system); display: inline-block; color: var(--color-accent); font-size: 0.85rem; padding: var(--space-xs) 0; letter-spacing: 0.04em; } .depth-nav a::before { content: "> "; color: var(--color-accent-dim); } .depth-nav a:hover { color: var(--color-fg-strong); } .depth-nav a:hover::before { color: var(--color-accent); } /* ---- note / callout block (distinct formatting register inside prose) ---- */ .note { border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent-dim); background: var(--color-bg-raised); padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l); margin: var(--space-l) 0; } .note .note-tag { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: var(--space-s); } .note p { font-size: 0.92rem; } /* ---- writing / index lists ---- */ .index-list { list-style: none; padding: 0; margin-top: var(--space-m); } .index-list li { padding: var(--space-s) 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: baseline; gap: var(--space-m); } .index-list li:last-child { border-bottom: none; } .index-list a { text-decoration: none; } .index-list .meta { font-family: var(--font-system); font-size: 0.75rem; color: var(--color-fg-dim); margin-left: auto; white-space: nowrap; display: flex; align-items: baseline; gap: var(--space-s); } /* ---- growth stage indicators ---- */ .growth-stage { font-family: var(--font-system); display: inline-block; font-size: 0.65rem; padding: 0.15em 0.6em; border: 1px solid var(--color-accent-dim); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; } /* mobile: the badge was overpowering card titles (his 2026-07-12 flag) — shrink + keep on one line */ @media (max-width: 600px) { .growth-stage { font-size: 0.52rem; padding: 0.1em 0.45em; letter-spacing: 0.06em; white-space: nowrap; } .lens-ripeness, .lens-station-meta .lens-ripeness { font-size: 0.46rem; } } .growth-stage[data-stage="seedling"] { border-color: var(--color-fg-dim); color: var(--color-fg-dim); } .growth-stage[data-stage="developing"] { border-color: var(--color-accent-dim); color: var(--color-accent); } .growth-stage[data-stage="grown"] { border-color: var(--color-fg); color: var(--color-fg-strong); } .growth-stage[data-stage="placeholder"] { border-color: var(--color-border); color: var(--color-fg-dim); opacity: 0.6; } /* ---- article layout (individual writing pieces) ---- */ article header { margin-bottom: var(--space-xl); padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-border); } article header .growth-stage { margin-top: var(--space-s); } article header p { color: var(--color-fg-dim); margin-top: var(--space-s); } /* ---- facet crystal (CALIPSO descriptors) ---- */ .facet-crystal { margin: var(--space-l) 0; } .facet-register-toggle-wrap { display: flex; justify-content: flex-end; margin-bottom: var(--space-s); } .register-toggle { font-family: var(--font-system); color: var(--color-fg-dim); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.2s; background: none; border: none; cursor: pointer; padding: 0; } .register-toggle:hover, .register-toggle:focus-visible { color: var(--color-fg-strong); } .facet-list { list-style: none; padding: 0; margin: 0; } .facet { padding: var(--space-m) 0; border-bottom: 1px solid var(--color-border); } .facet:last-child { border-bottom: none; } .facet-text[data-register="simple"] { display: none; } .facet-crystal[data-register="simple"] .facet-text[data-register="dense"] { display: none; } .facet-crystal[data-register="simple"] .facet-text[data-register="simple"] { display: inline; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- facet crystal: 3D enhancement (added by JS; skipped entirely under prefers-reduced-motion, where the plain stacked list above is the whole experience) ---- */ .facet-crystal.is-3d .facet-stage { display: flex; align-items: center; justify-content: center; gap: var(--space-m); perspective: 900px; } .facet-crystal.is-3d .facet-list { position: relative; width: 100%; max-width: 320px; height: 220px; transform-style: preserve-3d; transform: rotateY(var(--crystal-rotation, 0deg)); transition: transform 0.4s ease; touch-action: pan-y; cursor: grab; } .facet-crystal.is-3d .facet-list:active { cursor: grabbing; } .facet-crystal.is-3d .facet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-l); border: 1px solid var(--color-border); background: var(--color-bg-raised); backface-visibility: hidden; transform: rotateY(calc(60deg * var(--i))) translateZ(160px); } .facet-nav { font-family: var(--font-system); font-size: 1.2rem; color: var(--color-accent); background: none; border: 1px solid var(--color-border); width: 2rem; height: 2rem; flex: none; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .facet-nav:hover, .facet-nav:focus-visible { color: var(--color-fg-strong); border-color: var(--color-accent-dim); } @media (prefers-reduced-motion: reduce) { .facet-crystal.is-3d .facet-list { transition: none; } } /* ---- CALIPSO terminal gate — the one home for Departure Mono (cold filter) ---- */ .terminal-gate { margin-top: var(--space-xl); padding: var(--space-l); border: 1px solid var(--color-border); background: var(--color-bg-raised); } .terminal-gate .gate-label { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-fg-dim); margin-bottom: var(--space-m); } .terminal-gate .gate-hint { font-size: 0.85rem; color: var(--color-fg-dim); margin-bottom: var(--space-m); } .terminal-gate .gate-line { font-family: var(--font-terminal); font-size: 1rem; color: var(--color-accent); display: inline-block; text-decoration: none; } .terminal-gate .gate-line::before { content: "> "; color: var(--color-accent-dim); } .terminal-gate .gate-line:hover { color: var(--color-fg-strong); } .terminal-gate .gate-line:hover::before { color: var(--color-accent); } .terminal-gate:focus-within .cursor { display: none; } .cursor { display: inline-block; width: 0.5em; height: 1.05em; background: var(--color-accent); margin-left: 0.15em; vertical-align: -0.15em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } /* ---- index view ---- */ body[data-mode="index"] h1 { font-size: 1.2rem; } /* ---- mesh grid (experiment: position on two axes, not one line) ---- */ .mesh-grid { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 1px; background: var(--color-border); margin: var(--space-l) 0; font-size: 0.85rem; } .mesh-corner, .mesh-col-label, .mesh-row-label, .mesh-cell { background: var(--color-bg); padding: var(--space-s); } .mesh-col-label, .mesh-row-label { font-family: var(--font-system); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-dim); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1.3; } .mesh-cell { min-height: 3.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; } .mesh-cell.mesh-self { background: var(--color-bg-raised); } .mesh-cell.mesh-self a { color: var(--color-fg-strong); font-weight: 700; } .mesh-note { font-size: 0.85rem; color: var(--color-fg-dim); } .mesh-aperture { border-left: 2px solid var(--color-border); padding-left: var(--space-m); margin: var(--space-l) 0; color: var(--color-fg-dim); font-size: 0.9rem; } .mesh-aperture ul { margin-top: var(--space-s); list-style: none; padding-left: 0; } .mesh-aperture li::before { content: "— "; } .mesh-controls { display: flex; gap: var(--space-m); flex-wrap: wrap; margin: var(--space-l) 0 var(--space-s); } .mesh-control label { display: block; font-family: var(--font-system); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-dim); margin-bottom: 0.3em; } .mesh-control select { font-family: var(--font-system); font-size: 0.85rem; background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border); padding: 0.35em 0.5em; } @media (max-width: 600px) { .mesh-grid { font-size: 0.72rem; } .mesh-col-label { writing-mode: vertical-rl; } } /* ---- visible depth state (set by JS observer) ---- */ .depth-section.depth-visible .depth-indicator::before { color: var(--color-accent); } /* ---- selection ---- */ ::selection { background: var(--color-accent); color: var(--color-bg); } /* ---- responsive ---- */ @media (max-width: 600px) { body { padding: var(--space-l) var(--space-m); } .depth-nav { gap: var(--space-xs); } .index-list li { flex-direction: column; gap: var(--space-xs); } .index-list .meta { margin-left: 0; } } /* =========================================================================== THE LENS — terrain × zoom × slide (used by /me/). All colour is theme-var driven, so both modes render from one stylesheet: dark = living star-chart (phosphor glow), light = printed drafting-sheet (ink, NO glow — glow is a dark-mode privilege, per designphilosophy §2.7). =========================================================================== */ .lens { position: fixed; inset: 0; overflow: hidden; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-voice); } /* ---- field (the pannable constellation) ---- */ .lens-fieldwrap { position: absolute; inset: 0; cursor: grab; touch-action: none; } .lens-fieldwrap.grabbing { cursor: grabbing; } .lens-mode-zoom .lens-fieldwrap { display: none; } .lens-field { position: absolute; top: 0; left: 0; width: 0; height: 0; will-change: transform; } /* infinite drafting grid — a fixed layer the camera scrolls via background-position */ .lens-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 68px 68px; } /* fog-of-war: a lit clearing at centre, fading into fog toward the edges */ .lens-fog { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 30%, var(--color-bg) 82%); } /* tethers: every face tied to the central spine (opacity set per-card by JS fog) */ .lens-tethers { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; } .lens-tether { stroke: var(--color-accent-dim); stroke-width: 1; } /* the charge mark: the sigil around the trunk — rays ignite as faces are entered */ .lens-sigil { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; } .lens-sigil-ring { fill: none; stroke: var(--color-border); stroke-width: 1; opacity: 0.45; transition: stroke 0.9s ease, opacity 0.9s ease; } .lens-sigil-ray { stroke: var(--color-border); stroke-width: 1.5; opacity: 0.35; transition: stroke 0.9s ease, opacity 0.9s ease; } .lens-sigil-ray.lit { stroke: var(--color-accent); opacity: 0.9; } .lens-sigil.charged .lens-sigil-ring { stroke: var(--color-accent); opacity: 0.9; animation: lens-sigil-pulse 2.4s ease-in-out 1; } @keyframes lens-sigil-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .lens-sigil.charged .lens-sigil-ring { animation: none; } } /* two-tier card: header chrome (tag + title) over a recessed snippet panel */ .lens-station { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 23ch; text-align: left; background: var(--color-bg-raised); border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent-dim); padding: 0; overflow: hidden; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; } .lens-station-head { padding: 0.5rem 0.75rem 0.45rem; } .lens-station-tag { display: block; font-family: var(--font-system); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-fg-dim); margin-bottom: 0.3rem; } .lens-station-word { display: block; font-family: var(--font-voice); font-weight: 700; font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.15; color: var(--color-fg-strong); } .lens-station-hook { display: block; padding: 0.5rem 0.75rem; background: var(--color-bg); border-top: 1px solid var(--color-border); font-size: 0.8rem; line-height: 1.35; color: var(--color-fg); } .lens-station:hover, .lens-station:focus-visible { outline: none; border-color: var(--color-accent-dim); border-left-color: var(--color-accent); box-shadow: 0 0 22px rgba(78, 201, 176, 0.28); /* phosphor — killed in light below */ transform: translate(-50%, -50%) scale(1.03); } .lens-station:hover .lens-station-word, .lens-station:focus-visible .lens-station-word { color: var(--color-accent); } /* the core — "Me", the synthesis the whole constellation orbits and resolves into */ .lens-anchor { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); background: var(--color-bg-raised); border: 1px solid var(--color-accent-dim); border-radius: 999px; /* the circle is fixed (~its old ~62×65px); only the symbol grows */ width: 4rem; height: 4rem; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-voice); font-weight: 700; font-size: 1.98rem; /* +80% from the old 1.1rem — the glyph, not the circle */ line-height: 1; letter-spacing: 0; color: var(--color-fg-strong); transition: color 0.18s, border-color 0.18s, box-shadow 0.18s; } .lens-anchor:hover, .lens-anchor:focus-visible { color: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 26px rgba(78, 201, 176, 0.3); /* phosphor — killed in light below */ outline: none; } /* ---- minimap ---- */ /* minimap = movement pad: click/drag to fling the camera; pips show the constellation */ .lens-minimap { position: fixed; right: 1rem; bottom: 1rem; width: 96px; height: 68px; background: var(--color-bg-raised); border: 1px solid var(--color-border); z-index: 7; cursor: pointer; touch-action: none; transition: border-color 0.18s; } .lens-minimap:hover { border-color: var(--color-accent-dim); } .lens-mode-zoom .lens-minimap { display: none; } .lens-mm-dots { position: absolute; inset: 0; } .lens-mm-pip { position: absolute; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--color-fg-dim); } .lens-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--color-accent); box-shadow: 0 0 6px rgba(78, 201, 176, 0.8); pointer-events: none; } /* orbit legend (field only) — makes the ring positioning legible */ .lens-legend { position: fixed; left: 1rem; top: 1rem; z-index: 7; display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--font-system); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-fg-dim); max-width: 46vw; } .lens-legend-you { color: var(--color-accent); font-size: 0.62rem; } .lens-legend-art { margin-top: 0.45rem; font-style: italic; text-transform: none; letter-spacing: 0.01em; font-size: 0.6rem; color: var(--color-fg-dim); max-width: 32ch; } .lens-mode-zoom .lens-legend, .lens-zooming .lens-legend { display: none; } /* one-time entry hint (top-centre, dismissible) */ .lens-hint { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 0.5rem; background: var(--color-bg-raised); border: 1px solid var(--color-accent-dim); padding: 0.4rem 0.4rem 0.4rem 0.85rem; font-family: var(--font-system); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg); transition: opacity 0.4s ease, transform 0.4s ease; } .lens-hint-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-6px); } .lens-mode-zoom .lens-hint { display: none; } .lens-hint-x { background: none; border: none; cursor: pointer; color: var(--color-fg-dim); font-size: 1.05rem; line-height: 1; padding: 0 0.15rem; } .lens-hint-x:hover, .lens-hint-x:focus-visible { color: var(--color-accent); outline: none; } @media (max-width: 600px) { .lens-hint { font-size: 0.56rem; max-width: 88vw; } } /* ---- HUD (register toggle + depth + exit) ---- */ .lens-hud { position: fixed; top: 1rem; right: 1rem; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; font-family: var(--font-system); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; } .lens-depth { color: var(--color-fg-dim); } .lens-exit { color: var(--color-fg-dim); text-decoration: none; } .lens-exit:hover, .lens-exit:focus-visible { color: var(--color-accent); } /* ---- register slider (the "slide" axis, always visible, bottom-centre) ---- */ .lens-regbar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; background: var(--color-bg-raised); border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; min-width: 210px; } .lens-reg-slider { width: 100%; accent-color: var(--color-accent); cursor: pointer; } .lens-reg-slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .lens-reg-primes { display: flex; justify-content: space-between; } .lens-reg-prime { background: none; border: none; cursor: pointer; font-family: var(--font-system); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-dim); padding: 0.1rem 0.15rem; transition: color 0.18s; } .lens-reg-prime:hover, .lens-reg-prime:focus-visible { color: var(--color-fg-strong); outline: none; } .lens-regbar[data-register="body"] .lens-reg-prime[data-prime="body"], .lens-regbar[data-register="spirit"] .lens-reg-prime[data-prime="spirit"], .lens-regbar[data-register="soul"] .lens-reg-prime[data-prime="soul"] { color: var(--color-accent); } /* ---- breadcrumb (zoom only) ---- */ .lens-crumbs { position: fixed; top: 1rem; left: 1rem; z-index: 8; display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; max-width: 62vw; font-family: var(--font-system); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--color-fg-dim); } .lens-mode-field .lens-crumbs { display: none; } /* the back control — the functional exit-a-level, made prominent */ .lens-crumb { background: var(--color-bg-raised); border: 1px solid var(--color-accent-dim); font-family: var(--font-system); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; color: var(--color-accent); padding: 0.4rem 0.85rem; margin-right: 0.35rem; transition: color 0.18s, border-color 0.18s, background 0.18s; } .lens-crumb:hover, .lens-crumb:focus-visible { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); outline: none; } .lens-sep { color: var(--color-border); margin: 0 0.15em; } .lens-crumb-cur { color: var(--color-accent); } .lens-crumb-past { color: var(--color-fg-dim); } /* ---- zoom stage ---- */ .lens-stage { position: fixed; inset: 0; } .lens-mode-field .lens-stage { display: none; } .lens-lvl { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1.5rem 9rem; /* bottom clearance so content scrolls above the fixed register slider */ overflow-y: auto; will-change: transform, opacity; } .lens-lvl:focus { outline: none; } /* programmatic focus target, not a chosen control */ .lens-inner { max-width: 54ch; width: 100%; } .lens-l0 .lens-inner { text-align: center; max-width: 42ch; } .lens-label { font-family: var(--font-system); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-fg-dim); margin-bottom: var(--space-m); } .lens-label::before { content: "// "; color: var(--color-accent-dim); } .lens-claim-title { font-family: var(--font-voice); font-weight: 700; line-height: 1.2; color: var(--color-fg-strong); font-size: clamp(1.5rem, 4vw, 2.3rem); margin-bottom: var(--space-m); } .lens-l1 .lens-claim-title, .lens-l2 .lens-claim-title { font-size: clamp(1.3rem, 3vw, 1.8rem); } .lens-body { font-size: 1.09rem; color: var(--color-fg); margin-bottom: var(--space-l); } .lens-l2 .lens-body { color: var(--color-fg-strong); } .lens-aspects { display: flex; flex-direction: column; gap: var(--space-s); align-items: center; } .lens-aspect-btn, .lens-deeper { background: none; border: none; cursor: pointer; font-family: var(--font-voice); font-size: 1.05rem; color: var(--color-accent); text-decoration: underline dotted; text-underline-offset: 4px; padding: 0.2rem 0.1rem; } .lens-aspect-btn:hover, .lens-aspect-btn:focus-visible, .lens-deeper:hover, .lens-deeper:focus-visible { color: var(--color-fg-strong); outline: none; text-decoration-style: solid; } .lens-deeper { font-family: var(--font-system); font-size: 0.85rem; letter-spacing: 0.04em; } .lens-floor { margin-top: var(--space-l); font-family: var(--font-system); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-fg-dim); } /* ---- title row (claim title + ripeness badge) ---- */ .lens-title-row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: var(--space-m); } .lens-title-row .lens-claim-title { margin-bottom: 0; } .lens-ripeness { flex: none; font-size: 0.6rem; } .lens-station-meta .lens-ripeness { font-size: 0.5rem; padding: 0.1em 0.45em; } /* ---- card meta row (tag + ripeness) ---- */ .lens-station-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .lens-station-meta .lens-station-tag { margin-bottom: 0; } /* ---- the fracture / honest edge (process visible, not a polished facade) ---- */ .lens-fracture { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px dashed var(--color-border); } .lens-fracture-label { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-fg-dim); margin-bottom: var(--space-s); } .lens-fracture-body { font-size: 0.95rem; color: var(--color-fg); font-style: italic; } /* ---- the core's arc-note + beat list + close ---- */ .lens-arc { font-style: italic; font-size: 0.88rem; color: var(--color-fg-dim); margin-bottom: var(--space-m); } .lens-beats { display: flex; flex-direction: column; gap: var(--space-s); margin: var(--space-m) 0; } .lens-beat-btn { background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-system); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--color-accent); padding: 0.2rem 0; } .lens-beat-btn::before { content: "> "; color: var(--color-accent-dim); } .lens-beat-btn:hover, .lens-beat-btn:focus-visible { color: var(--color-fg-strong); outline: none; } .lens-close { margin-top: var(--space-l); font-family: var(--font-system); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--color-accent); } /* ---- beat reading nav (prev / next) ---- */ .lens-beatnav { display: flex; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-l); } .lens-beatnav-btn { background: none; border: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-system); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); padding: 0.4rem 0.8rem; transition: color 0.18s, border-color 0.18s; } .lens-beatnav-btn:hover, .lens-beatnav-btn:focus-visible { color: var(--color-fg-strong); border-color: var(--color-accent-dim); outline: none; } .lens-beatnav-btn:disabled { opacity: 0.35; cursor: default; } /* ---- crossfade (zoom in dissolves outward, zoom out collapses inward) ---- */ .lens-out-in { animation: lensOutIn 460ms ease forwards; } .lens-in-in { animation: lensInIn 460ms ease forwards; } .lens-out-out { animation: lensOutOut 460ms ease forwards; } .lens-in-out { animation: lensInOut 460ms ease forwards; } @keyframes lensOutIn { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } @keyframes lensInIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes lensOutOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.6); opacity: 0; } } @keyframes lensInOut { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ---- terrain <-> zoom seam: both layers present for one beat, cross-dissolving ---- */ .lens-zooming .lens-fieldwrap, .lens-zooming .lens-stage { display: block; } .lens-zooming-in .lens-fieldwrap { animation: lensFieldOut 440ms ease forwards; } .lens-zooming-out .lens-fieldwrap { animation: lensFieldIn 440ms ease forwards; } @keyframes lensFieldOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } } @keyframes lensFieldIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } } .lens-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- the south descent: glitch layer + the sanctuary island ---- Panning south, past the last face, the self-map decays: the --glitch var (set per-frame by JS from the camera's southward travel) ramps this layer up, peaks in the void, then calms at the island. dark = phosphor signal-break; light = ink misregistration on paper (multiply, no glow — §2.7). */ .lens-glitch { position: absolute; inset: 0; pointer-events: none; opacity: var(--glitch, 0); mix-blend-mode: screen; /* phosphor bleed in dark; multiply in light below */ will-change: opacity; } .lens-glitch > div { position: absolute; inset: -2%; } .lens-glitch-scan { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(78, 201, 176, 0.11) 2px 3px); animation: lens-scan 5.5s linear infinite; } .lens-glitch-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.5; animation: lens-grain 0.55s steps(2) infinite; } .lens-glitch-tear { height: 2px; left: 0; right: 0; top: 0; bottom: auto; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); box-shadow: 0 0 12px 2px rgba(78, 201, 176, 0.5); animation: lens-tear 3.4s ease-in-out infinite; } @keyframes lens-scan { to { transform: translateY(3px); } } @keyframes lens-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-5px, 4px); } 66% { transform: translate(4px, -3px); } 100% { transform: translate(0, 0); } } @keyframes lens-tear { 0%, 100% { top: -4%; opacity: 0; } 10% { opacity: 1; } 50% { top: 104%; opacity: 0.7; } 60% { opacity: 0; } } /* the island — a still refuge past the break; the one plain hard invitation. */ .lens-island { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: min(90vw, 34ch); display: block; text-align: center; text-decoration: none; background: var(--color-bg-raised); border: 1px solid var(--color-accent-dim); padding: 1.6rem 1.5rem 1.4rem; color: var(--color-fg); box-shadow: 0 0 46px rgba(78, 201, 176, 0.16); /* a still light in the dark — killed in light */ transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .lens-island:hover, .lens-island:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 60px rgba(78, 201, 176, 0.26); transform: translate(-50%, -50%) scale(1.02); } .lens-island-eyebrow { display: block; font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-fg-dim); margin-bottom: 0.7rem; } .lens-island-glyph { display: block; font-size: 1.8rem; color: var(--color-accent); line-height: 1; margin-bottom: 0.8rem; } .lens-island-title { display: block; font-family: var(--font-voice); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.2; color: var(--color-fg-strong); margin-bottom: 0.7rem; } .lens-island-body { font-size: 0.86rem; line-height: 1.5; color: var(--color-fg); margin: 0 0 1.1rem; } .lens-island-cta { display: inline-block; font-family: var(--font-system); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); border: 1px solid var(--color-accent-dim); padding: 0.5rem 1rem; } .lens-island:hover .lens-island-cta, .lens-island:focus-visible .lens-island-cta { border-color: var(--color-accent); } /* minimap: the island appears as a diamond only AFTER it's been found (breadcrumb home, not a spoiler) */ .lens-mm-island { position: absolute; width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg); background: var(--color-accent-dim); opacity: 0; transition: opacity 0.6s; } .lens-mm-island-found { opacity: 0.9; } /* ---- LIGHT = printed page: no glow anywhere (ink, not phosphor) ---- */ [data-theme="light"] .lens-station:hover, [data-theme="light"] .lens-station:focus-visible, [data-theme="light"] .lens-anchor:hover, [data-theme="light"] .lens-anchor:focus-visible { box-shadow: none; } /* ink, not phosphor */ [data-theme="light"] .lens-dot { box-shadow: none; } [data-theme="light"] .lens-glitch { mix-blend-mode: multiply; } /* ink on paper, not phosphor bleed */ [data-theme="light"] .lens-glitch-scan { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(55, 49, 40, 0.13) 2px 3px); } [data-theme="light"] .lens-glitch-tear { background: linear-gradient(90deg, transparent, rgba(55, 49, 40, 0.5), transparent); box-shadow: none; } /* the sanctuary is the one deliberate exception to §2.7 (no glow in light): the Island keeps its teal aura in light too — it's a beacon, not chrome. */ [data-theme="light"] .lens-island { box-shadow: 0 0 42px rgba(15, 122, 102, 0.22); } [data-theme="light"] .lens-island:hover, [data-theme="light"] .lens-island:focus-visible { box-shadow: 0 0 58px rgba(15, 122, 102, 0.32); } /* ---- reduced motion: no crossfade, no station glow-transition ---- */ @media (prefers-reduced-motion: reduce) { .lens-out-in, .lens-in-in, .lens-out-out, .lens-in-out { animation: none; } .lens-zooming-in .lens-fieldwrap, .lens-zooming-out .lens-fieldwrap { animation: none; } .lens-station { transition: none; } /* glitch still ramps in intensity (opacity) to signal the decay — just no motion */ .lens-glitch-scan, .lens-glitch-grain, .lens-glitch-tear { animation: none; } .lens-glitch-tear { top: 50%; opacity: 0.5; } } /* ---- small screens ---- */ @media (max-width: 600px) { .lens-hud { font-size: 0.66rem; } .lens-crumbs { max-width: 52vw; } .lens-lvl { padding: 8vh 1.2rem 9rem; } .lens-grid { background-size: 52px 52px; } .lens-station { max-width: 16ch; } .lens-station-word { font-size: 1rem; } .lens-legend { font-size: 0.62rem; max-width: 62vw; } .lens-minimap { width: 80px; height: 58px; } .lens-island { padding: 1.25rem 1.1rem 1.1rem; } .lens-island-body { font-size: 0.82rem; } } /* =========================================================================== THE MIRROR — "what this page can see." A privacy reality-check overlay (auto-once on entry, then behind a quiet chrome link). Theme-aware. =========================================================================== */ .mirror { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-bg) 76%, transparent); backdrop-filter: blur(5px); padding: 1rem; } .mirror-panel { position: relative; max-width: 46rem; max-height: 88vh; overflow: auto; background: var(--color-bg-raised); border: 1px solid var(--color-accent-dim); border-top: 2px solid var(--color-accent); padding: 1.4rem 1.6rem 1.5rem; box-shadow: 0 0 54px rgba(78, 201, 176, 0.18); /* phosphor — killed in light below */ } /* faint scanline wash over the panel — the readout is live */ .mirror-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(78, 201, 176, 0.025) 3px 4px); } [data-theme="light"] .mirror-panel { box-shadow: 0 14px 44px rgba(0,0,0,0.18); } [data-theme="light"] .mirror-panel::after { background: none; } .mirror-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .mirror-title { font-family: var(--font-system); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-accent); } .mirror-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff5a6e; margin-right: 0.15rem; box-shadow: 0 0 7px rgba(255, 90, 110, 0.9); animation: mirror-live 1.6s ease-in-out infinite; } @keyframes mirror-live { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } [data-theme="light"] .mirror-live { box-shadow: none; background: #b3273a; } .mirror-controls { display: flex; gap: 0.5rem; white-space: nowrap; } .mirror-reg, .mirror-x { background: none; border: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-system); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-dim); padding: 0.35rem 0.7rem; } .mirror-reg { border-color: var(--color-accent-dim); color: var(--color-accent); } .mirror-reg:hover, .mirror-reg:focus-visible, .mirror-x:hover, .mirror-x:focus-visible { color: var(--color-accent); border-color: var(--color-accent); } /* the synthesis — the paragraph the data writes about you */ .mirror-synth { font-family: var(--font-voice); font-size: 1.04rem; line-height: 1.6; color: var(--color-fg-strong); border-left: 2px solid var(--color-accent); padding-left: 0.95rem; margin-bottom: 1.4rem; } /* the readout: two registers, one visible at a time */ .mirror-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.42rem 1.1rem; margin: 0 0 1.3rem; } .mirror-list dt { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-fg-dim); padding-top: 0.22rem; } .mirror-list dd { margin: 0; word-break: break-word; } .mirror-list dd .m-tech { font-family: var(--font-system); font-size: 0.78rem; color: var(--color-fg-strong); } .mirror-list dd .m-plain { font-family: var(--font-voice); font-size: 0.88rem; color: var(--color-fg); } .mirror-panel[data-reg="tech"] .m-plain { display: none; } .mirror-panel[data-reg="plain"] .m-tech { display: none; } /* the fingerprint row burns ember — the one number that IS you */ .mirror-list dd.m-fp .m-tech, .mirror-list dd.m-fp .m-plain { color: #ff9a4e; } [data-theme="light"] .mirror-list dd.m-fp .m-tech, [data-theme="light"] .mirror-list dd.m-fp .m-plain { color: #b85c14; } /* staggered reveal — the scan runs down the list */ @keyframes mirror-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .mirror-list .m-in { opacity: 0; animation: mirror-in 0.4s ease forwards; } .mirror-counter { color: var(--color-fg); border-left: 2px solid var(--color-accent-dim); padding-left: 0.95rem; margin-bottom: 0.9rem; } .mirror-fine { font-family: var(--font-system); font-size: 0.7rem; color: var(--color-fg-dim); } .mirror-links { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); font-size: 0.88rem; color: var(--color-fg); } .mirror-links a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-accent-dim); } .mirror-links a:hover, .mirror-links a:focus-visible { border-bottom-color: var(--color-accent); } @media (prefers-reduced-motion: reduce) { .mirror-live { animation: none; } .mirror-list .m-in { animation: none; opacity: 1; } } @media (max-width: 600px) { .mirror-list { grid-template-columns: 1fr; gap: 0 0; } .mirror-list dt { padding-top: 0.6rem; } .mirror-panel { padding: 1.1rem 1.1rem 1.2rem; } .mirror-head { flex-wrap: wrap; } } /* ---- /me/ page shell: full-bleed (overrides the global 66ch body). Full-bleed + no scroll only when JS runs (the lens owns the viewport); with JS off the body scrolls so the static fallback is readable. ---- */ body.lens-page { max-width: none; margin: 0; padding: 0; } .js body.lens-page { height: 100vh; overflow: hidden; } /* /me/ chrome: theme + mirror live in the top-right HUD (lens.js moves them there on mount), so the bottom stays clear for the register slider. This wrapper only holds them pre-JS / if the lens fails to mount; once emptied it collapses. */ .lens-chrome { position: fixed; left: 1rem; bottom: 1rem; z-index: 8; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .lens-chrome:empty { display: none; } .lens-hud .lens-theme-toggle, .lens-hud .lens-mirror-link { font-size: 0.76rem; } .lens-theme-toggle { position: static; } .lens-mirror-link { position: static; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-dim); } .lens-mirror-link:hover, .lens-mirror-link:focus-visible { color: var(--color-accent); outline: none; } /* ---- static no-JS fallback (flat, fully readable: every face × both registers) ---- */ .lens-fallback { max-width: 62ch; margin: 0 auto; padding: 8vh 1.5rem 5rem; } .lens-fallback h1 { font-size: 1.8rem; margin-bottom: 0.5rem; } .lens-fallback .lens-fallback-lead { color: var(--color-fg-dim); margin-bottom: 2.5rem; } .lens-fallback .lens-fb-station { margin-top: 2.2rem; padding-left: 1rem; border-left: 1px solid var(--color-border); } .lens-fallback h2 { font-size: 1.15rem; margin-bottom: 0.3rem; } .lens-fallback .lens-fb-reg-label { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-fg-dim); margin-top: 0.8rem; } .lens-fallback .lens-fb-spine { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .lens-fallback .lens-fb-sanctuary { margin-top: 3rem; padding: 1.6rem; text-align: center; border: 1px solid var(--color-accent-dim); } .lens-fallback .lens-fb-sanctuary a { color: var(--color-accent); font-family: var(--font-system); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; } .lens-fallback footer { margin-top: 3rem; font-family: var(--font-system); font-size: 0.75rem; } .lens-fallback footer a { color: var(--color-fg-dim); text-decoration: none; } .lens-fallback footer a:hover { color: var(--color-accent); }