@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/im-fell-english-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/im-fell-english-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-400-normal.woff2) format('woff2'); }
/* Lettering a visitor can pick for names on the map (OFL, licences in fonts/). */
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-sc-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-sc-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-sc-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/instrument-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/instrument-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/fraunces-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/fraunces-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #07050b; --ink: #ece4d6; --dim: #9a8f9f; --faint: #5d5466; --line: rgba(236, 228, 214, .12);
  --glass: rgba(14, 10, 20, .78); --spore: #c9ff6a; --accent: #3ee0c5;
  --f-text: 'IM Fell English', Georgia, serif; --f-label: 'Cormorant SC', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font: 14px/1.45 var(--f-mono); -webkit-font-smoothing: antialiased; touch-action: none; }
canvas#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
canvas#sky.drag { cursor: grabbing; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 18px; padding: 16px 18px 0; pointer-events: none; z-index: 5; }
.top > * { pointer-events: auto; }
.mark h1 { font: 600 30px/1 var(--f-label); margin: 0; letter-spacing: .01em; text-shadow: 0 0 18px rgba(201, 255, 106, .25); }
.mark p { margin: 4px 0 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mark p.homage { text-transform: none; letter-spacing: .02em; font-size: 10.5px; color: var(--faint); }
.mark p.homage a { color: var(--dim); }
.modes { display: flex; gap: 2px; margin-left: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 3px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modes button, .lenses button, .matrixtabs button { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--dim); letter-spacing: .02em; }
.modes button.on, .lenses button.on, .matrixtabs button.on { background: rgba(236, 228, 214, .1); color: var(--ink); }
.modes button:hover, .lenses button:hover, .matrixtabs button:hover { color: var(--ink); }
.find { position: relative; width: 240px; }
.find input { width: 100%; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font: 13px var(--f-mono); outline: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.find input:focus { border-color: rgba(201, 255, 106, .45); }
.find input::placeholder { color: var(--faint); }
#hits { position: absolute; top: 40px; left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: rgba(14, 10, 20, .95); border: 1px solid var(--line); border-radius: 12px; max-height: 50vh; overflow: auto; }
#hits li { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
#hits li.on, #hits li:hover { background: rgba(236, 228, 214, .08); }
#hits i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#hits small { margin-left: auto; color: var(--faint); font-size: 10.5px; }

.lenses, .matrixtabs { position: fixed; top: 64px; right: 18px; display: flex; align-items: center; gap: 2px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 3px; z-index: 4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lenses .sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
#drift.on { color: var(--spore); background: rgba(201, 255, 106, .1); }

.time { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; z-index: 4; width: min(520px, calc(100% - 36px)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.time button { padding: 5px 12px; border-radius: 999px; background: rgba(201, 255, 106, .12); color: var(--spore); font-size: 12px; }
.time input { flex: 1; accent-color: #c9ff6a; }
#yr { font: italic 18px var(--f-text); min-width: 44px; text-align: right; }

.legend { position: fixed; left: 18px; bottom: 70px; display: flex; flex-direction: column; gap: 1px; z-index: 3; }
.legend button { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 6px; font-size: 11px; color: var(--dim); text-align: left; }
.legend button:hover, .legend button.on { color: var(--ink); background: rgba(236, 228, 214, .06); }
.legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.legend.dim button:not(.on) { opacity: .45; }

.card { position: fixed; top: 112px; right: 18px; width: 340px; max-height: calc(100% - 200px); overflow: auto; padding: 18px 18px 16px; background: rgba(12, 9, 18, .9); border: 1px solid var(--line); border-radius: 16px; z-index: 6; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overscroll-behavior: contain; touch-action: pan-y; }
.card .x { position: absolute; top: 12px; right: 12px; font-size: 11px; color: var(--dim); }
.card .x:hover { color: var(--ink); }
.card h2 { font: 600 28px/1.05 var(--f-label); margin: 0 50px 6px 0; }
.card .meta { color: var(--dim); font-size: 12px; margin-bottom: 12px; }
.card .fam { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.card .fam i { width: 8px; height: 8px; border-radius: 50%; }
.card h3 { font: 400 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 14px 0 6px; }
.card .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.card .chips button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.card .chips button:hover { border-color: rgba(236, 228, 214, .35); }
.card .chips button i { width: 6px; height: 6px; border-radius: 50%; }
.card .chips button em { font-style: normal; color: var(--faint); font-size: 10.5px; }
.card .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.card .acts button, .card .acts a { padding: 7px 12px; border-radius: 999px; background: rgba(236, 228, 214, .07); font-size: 12px; color: var(--ink); text-decoration: none; }
.card .acts button.hot { background: rgba(201, 255, 106, .14); color: var(--spore); }
.card .acts button:hover, .card .acts a:hover { background: rgba(236, 228, 214, .14); }
.card .route { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(201, 255, 106, .06); border: 1px dashed rgba(201, 255, 106, .3); font-size: 12px; color: var(--dim); }
.card .route b { color: var(--spore); font-weight: 400; }
.card .links { margin-top: 14px; font-size: 11px; color: var(--dim); }
.card .links a { color: var(--dim); }
.card .note { font-size: 11px; color: var(--faint); margin-top: 10px; }
.card p.blurb { font: 16px/1.4 var(--f-text); color: #d8cfc2; margin: 0 0 6px; }

.tip { position: fixed; z-index: 7; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: rgba(12, 9, 18, .95); border: 1px solid var(--line); font-size: 12px; max-width: 280px; }
.toast { position: fixed; left: 50%; top: 110px; transform: translateX(-50%); z-index: 8; padding: 8px 14px; border-radius: 999px; background: rgba(12, 9, 18, .95); border: 1px solid var(--line); font-size: 12px; color: var(--dim); }

body.matrix .legend, body.matrix .time, body.web .time { display: none; }
body.web .lenses button[data-lens].on { background: none; color: var(--dim); }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 10px; padding: 12px 14px 0; }
  .mark h1 { font-size: 24px; }
  .mark p { font-size: 9.5px; }
  .modes { margin-left: auto; }
  .modes button { padding: 5px 9px; font-size: 11.5px; }
  .find { order: 3; width: 100%; }
  .lenses, .matrixtabs { top: auto; bottom: 66px; right: 50%; transform: translateX(50%); }
  .lenses { gap: 0; }
  .lenses button { padding: 6px 7px; font-size: 11.5px; }
  .lenses .sep { margin: 0 1px; }
  .time { bottom: 14px; }
  .legend { display: none; }
  .card { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 52vh; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .toast { top: 150px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- language switcher + script/RTL support ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang { position: relative; flex: none; }
.lang select { appearance: none; -webkit-appearance: none; padding: 8px 26px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--dim); font: 12px var(--f-mono); cursor: pointer; outline: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lang select:hover, .lang select:focus { color: var(--ink); border-color: rgba(201, 255, 106, .45); }
.lang::after { content: ""; position: absolute; right: 12px; top: 50%; width: 5px; height: 5px; border-right: 1px solid var(--dim); border-bottom: 1px solid var(--dim); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lang option { background: #120d18; color: var(--ink); }
/* Fonts: IM Fell and JetBrains Mono are Latin-only, so other scripts fall through to good system faces. */
/* For non-Latin scripts the body serif skips IM Fell entirely: its old-style figures and Latin glyphs look
   broken mid-sentence in CJK, Devanagari and Arabic. The Hyphae wordmark keeps IM Fell in every language. */
:root:lang(ru) { --f-text: Georgia, 'Times New Roman', serif; }
:root:lang(zh-Hans) { --f-text: 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', serif; --f-mono: 'JetBrains Mono', 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif; }
:root:lang(ja) { --f-text: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif; --f-mono: 'JetBrains Mono', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans CJK JP', sans-serif; }
:root:lang(ko) { --f-text: 'AppleMyungjo', 'Noto Serif CJK KR', 'Batang', serif; --f-mono: 'JetBrains Mono', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif; }
:root:lang(hi) { --f-text: 'Kohinoor Devanagari', 'Noto Serif Devanagari', 'Mangal', serif; --f-mono: 'JetBrains Mono', 'Kohinoor Devanagari', 'Noto Sans Devanagari', sans-serif; }
:root:lang(ar) { --f-text: 'Geeza Pro', 'Noto Naskh Arabic', 'Traditional Arabic', serif; --f-mono: 'JetBrains Mono', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', sans-serif; }
.mark h1, #yr { font-family: 'IM Fell English', Georgia, serif; }
/* Uppercase tracking is a Latin idiom; drop it where it does nothing or hurts. */
.noital .mark p, .noital .card h3 { letter-spacing: .04em; text-transform: none; }
.noital #yr, .noital .card p.blurb { font-style: normal; }
.noital .card p.blurb { line-height: 1.6; }
/* RTL (Arabic): the map canvas stays as-is; panels and text mirror. */
[dir=rtl] .modes { margin-left: 0; margin-right: auto; }
[dir=rtl] .lenses, [dir=rtl] .matrixtabs { right: auto; left: 18px; }
[dir=rtl] .card { right: auto; left: 18px; }
[dir=rtl] .card .x { right: auto; left: 12px; }
[dir=rtl] .card h2 { margin: 0 0 6px 50px; }
[dir=rtl] .legend { left: auto; right: 18px; }
[dir=rtl] .legend button { text-align: right; }
[dir=rtl] #hits small { margin-left: 0; margin-right: auto; }
[dir=rtl] #yr { text-align: left; }
[dir=rtl] .lang select { padding: 8px 12px 8px 26px; }
[dir=rtl] .lang::after { right: auto; left: 12px; }
[dir=rtl] .time { direction: ltr; } /* the year slider runs past-to-present left-to-right in every language */
[dir=rtl] .time button { direction: rtl; }
@media (max-width: 760px) {
  .lang { order: 2; }
  .lang select { padding: 6px 22px 6px 10px; font-size: 11px; }
  [dir=rtl] .matrixtabs { left: auto; right: 50%; }
  [dir=rtl] .lenses { left: 14px; right: 14px; }
  [dir=rtl] .card { left: 0; right: 0; }
}

/* ---------- final design pass: tools, themes, new lenses ---------- */
html, body { background: var(--bg); }
.mark h1 { text-shadow: 0 0 18px color-mix(in srgb, var(--spore) 30%, transparent); }
.time button { white-space: nowrap; }
.time button, #drift.on, .tools button.on { color: var(--spore); background: color-mix(in srgb, var(--spore) 13%, transparent); }
.time input { accent-color: var(--spore); }
.card .acts button.hot { color: var(--spore); background: color-mix(in srgb, var(--spore) 14%, transparent); }
.card .route b { color: var(--spore); }
.tools { position: fixed; left: 18px; top: 104px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 220px; }
.tools button, .tools label { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 11.5px; color: var(--dim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tools button:hover { color: var(--ink); }
.tools label { display: inline-flex; gap: 6px; align-items: center; }
.tools select, #speed { appearance: none; -webkit-appearance: none; background: none; border: 0; color: var(--ink); font: 11.5px var(--f-mono); cursor: pointer; outline: none; padding: 0 2px; }
.tools select option, #speed option { background: #120d18; color: var(--ink); }
.cleg { margin: 2px 0 0; font-size: 11px; color: var(--dim); line-height: 1.4; }
#speed { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; }
.lenses { max-width: calc(100% - 36px); overflow-x: auto; scrollbar-width: none; }
.lenses::-webkit-scrollbar { display: none; }
.lenses button { flex: none; }
.legend { bottom: 70px; }
body.lens-tunnel .legend, body.lens-sky .legend { opacity: .7; }
@media (max-width: 760px) {
  /* Every view button stays on screen in every language: the bar wraps to a second row instead of scrolling,
     and the controls strip sits above however tall it is (--lens-h, measured in app.js). */
  .lenses { right: 14px; left: 14px; transform: none; justify-content: center; flex-wrap: wrap; overflow: visible; border-radius: 18px; row-gap: 2px; }
  .tools { top: auto; bottom: calc(74px + var(--lens-h, 38px)); left: 14px; right: 14px; max-width: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tools::-webkit-scrollbar { display: none; }
  .tools > * { flex: none; }
  .tools #fly, .tools #scope { display: none; }
  .cleg { display: none; }
}
[dir=rtl] .tools { left: auto; right: 18px; align-items: flex-end; }
.card ul.lore { margin: 0; padding: 0 0 0 14px; display: grid; gap: 6px; font-size: 12.5px; color: #d8cfc2; }
.card ul.lore li::marker { color: var(--faint); }
.card ul.lore b { font-weight: 400; color: var(--ink); }
.card ul.deep button { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink); }
.card ul.deep button em { font-style: normal; color: var(--faint); font-size: 10.5px; }
.card a.src { color: var(--dim); font-size: 10.5px; text-decoration: none; border-bottom: 1px dotted var(--faint); white-space: nowrap; }
.card a.src:hover { color: var(--spore); }
.card .fix { margin-top: 12px; padding: 9px 11px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12px; color: var(--dim); }
.card .fix b { font-weight: 400; color: var(--spore); }
.lcap { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 3; width: min(560px, calc(100% - 36px)); margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--dim); text-align: center; pointer-events: none; }
@media (max-width: 760px) { .lcap { bottom: auto; top: 200px; font-size: 10.5px; } }

/* ---------- picking: press preview, the which-one list ---------- */
.tip.above { z-index: 10; text-align: center; font-size: 13px; padding: 7px 12px; border-color: color-mix(in srgb, var(--spore) 45%, transparent); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.pickr { position: fixed; z-index: 9; min-width: 200px; max-width: min(320px, calc(100% - 24px)); padding: 8px 6px 6px; border-radius: 14px; background: rgba(12, 9, 18, .96); border: 1px solid color-mix(in srgb, var(--spore) 35%, transparent); box-shadow: 0 10px 34px rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pickr p { margin: 0 8px 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.noital .pickr p { letter-spacing: .04em; text-transform: none; }
.pickr ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pickr button { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 10px; border-radius: 10px; text-align: start; font-size: 14px; color: var(--ink); }
.pickr button:hover, .pickr button:focus-visible { background: color-mix(in srgb, var(--spore) 14%, transparent); outline: none; }
.pickr b { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--spore) 70%, transparent); font: 400 11px/18px var(--f-mono); text-align: center; color: var(--ink); }
.pickr i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.pickr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickr em { margin-inline-start: auto; padding-inline-start: 8px; font-style: normal; font-size: 11px; color: var(--dim); }

/* Phone layout: the now-playing bar and lens captions sit under the header (measured live as --hdr) instead of on
   top of the search box, and the bottom bars clear the home indicator. */
@media (max-width: 760px) {
  .top { padding-top: calc(12px + env(safe-area-inset-top)); }
  .lcap { top: calc(var(--hdr, 150px) + 8px); }
  .playing .lcap { top: calc(var(--hdr, 150px) + var(--now-h, 44px) + 16px); }
  .toast { top: calc(var(--hdr, 150px) + 56px); }
  .time { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lenses { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .tools { bottom: calc(74px + var(--lens-h, 38px) + env(safe-area-inset-bottom)); }
  .tools button, .tools label, .lenses button, .modes button { min-height: 34px; }
}

/* ---------- the chosen look (Look Lab, 2026-11-02) ---------- */
html, body { background: #030208; }
:root[data-font=inst] .mark h1, :root[data-font=inst] .card h2 { font-weight: 500; }
:root[data-font=fraun] .mark h1, :root[data-font=fraun] .card h2 { font-style: italic; font-weight: 400; }
:root[data-font=mono] .mark h1, :root[data-font=mono] .card h2 { font-weight: 500; letter-spacing: -.01em; }
.eleg { position: fixed; left: 18px; bottom: 76px; width: 190px; z-index: 3; font: 10.5px var(--f-mono); color: var(--dim); }
.eleg b { display: block; height: 9px; border-radius: 5px; box-shadow: 0 0 12px rgba(201, 120, 255, .25); }
.eleg span { display: flex; justify-content: space-between; margin-top: 4px; }
.eleg em { font-style: normal; }
[dir=rtl] .eleg { left: auto; right: 18px; }
@media (max-width: 700px) { .eleg { display: none; } }

/* Controls: a dark printed card that can tuck away into a tab (Look Lab round two). */
.tools { background: #17141d; border: 1px solid rgba(236, 228, 214, .7); box-shadow: 4px 4px 0 #000; padding: 10px; gap: 6px; }
.tools button, .tools label { border-radius: 0; background: transparent; border-color: rgba(236, 228, 214, .28); backdrop-filter: none; -webkit-backdrop-filter: none; color: #d8cfc2; }
.tools button:hover, .tools label:hover { border-color: rgba(236, 228, 214, .6); }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 14px; align-self: stretch; padding: 0 0 4px; border-bottom: 1px solid rgba(236, 228, 214, .2); margin-bottom: 2px; }
.phead b { font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.tools .phead button { border: 0; padding: 0; font-size: 10.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--dim); min-height: 0; }
.tools .howto { border-style: dashed; }
.ptab { position: fixed; left: 18px; top: 104px; z-index: 4; padding: 6px 12px; background: #17141d; border: 1px solid rgba(236, 228, 214, .7); box-shadow: 3px 3px 0 #000; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
html.phid .tools { display: none; }
[dir=rtl] .ptab { left: auto; right: 18px; }
@media (max-width: 760px) {
  .tools { padding: 6px; box-shadow: 3px 3px 0 #000; align-items: center; }
  .phead { align-self: auto; border: 0; margin: 0; padding: 0 6px 0 2px; gap: 8px; }
  .phead b { display: none; }
  .ptab { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); left: 14px; }
}
/* First visit: a short introduction that fades in over the map. */
.intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(3, 2, 8, .55); animation: ifade .6s ease both; }
.intro.out { animation: iout .35s ease both; }
.ibox { max-width: 440px; width: 100%; max-height: calc(100% - 20px); overflow: auto; background: #17141d; border: 1px solid rgba(236, 228, 214, .7); box-shadow: 6px 6px 0 #000; padding: 24px 26px 22px; font: 13px/1.55 var(--f-mono); color: #d8cfc2; }
.ibox h2 { font: 600 34px/1 var(--f-label); margin: 0; color: var(--ink); }
.ibox .itag { margin: 4px 0 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ibox p { margin: 0 0 12px; }
.ibox ul { margin: 0 0 14px; padding: 0 0 0 16px; display: grid; gap: 6px; }
.ibox li::marker { color: var(--spore); }
.ibox .ihom { font-size: 11px; color: var(--dim); }
.ibox .ihom a { color: var(--dim); }
.igo { margin-top: 4px; padding: 8px 16px; background: var(--ink); color: #17141d; font: 500 12px var(--f-mono); letter-spacing: .04em; box-shadow: 3px 3px 0 #000; }
.igo:hover { background: #fff; }
@keyframes ifade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iout { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .intro, .intro.out { animation: none; } }

/* About: the homage, the principles, the rules and where AI fits. Same box as the intro, wider and scrollable. */
.mark .abt { margin-top: 3px; padding: 0; background: none; border: 0; box-shadow: none; font: 10.5px var(--f-mono); letter-spacing: .02em; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; pointer-events: auto; }
.mark .abt:hover { color: var(--ink); }
.iab { margin: 4px 0 0 10px; padding: 8px 4px; background: none; border: 0; box-shadow: none; font: 12px var(--f-mono); color: var(--dim); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.iab:hover { color: var(--ink); }
.about .abox { max-width: 580px; }
.abox h3 { margin: 18px 0 8px; font: 600 20px/1.1 var(--f-label); color: var(--ink); }
.abox .abg { font-size: 11px; color: var(--dim); }
.abox .ablinks { font-size: 11.5px; }
.abox a { color: var(--ink); }
.abox .abl li { padding-left: 2px; }
.abox .igo { margin-top: 10px; }
.card .fam.also { display: flex; margin-top: -4px; gap: 4px; flex-wrap: wrap; }
.card .fam.also i { opacity: .85; }

/* artist card tabs, portrait, service links, releases */
.card .tabs { display: flex; gap: 2px; margin: 4px -4px 10px; padding: 2px; border-radius: 999px; background: rgba(236, 228, 214, .05); position: sticky; top: -18px; z-index: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card .tabs button { flex: 1; padding: 6px 4px; border-radius: 999px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.card .tabs button:hover { color: var(--ink); }
.card .tabs button.on { background: rgba(236, 228, 214, .13); color: var(--ink); }
.card figure.portrait { margin: 0 0 10px; }
.card figure.portrait img { display: block; width: 100%; max-height: 220px; object-fit: cover; object-position: 50% 22%; border-radius: 12px; background: rgba(236, 228, 214, .05); }
.card figure.portrait figcaption { margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--faint); }
.card figure.portrait figcaption a { color: inherit; text-decoration: none; }
.card figure.portrait figcaption a:hover { color: var(--dim); }
.card p.facts { font-size: 13px; line-height: 1.5; color: #d8cfc2; margin: 0 0 8px; }
.card p.facts a:not(.src) { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.card p.facts a:not(.src):hover { border-color: var(--spore); }
.card .svcs a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink); text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.card .svcs a:hover { border-color: rgba(236, 228, 214, .35); }
.card .svcs a.srch { border-style: dashed; color: var(--dim); }
.card .svcs a em { font-style: normal; color: var(--faint); font-size: 10px; }
.card .note.busy { color: var(--dim); }
.card ol.rels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.card ol.rels a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.card ol.rels .cv { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, rgba(236, 228, 214, .08), rgba(236, 228, 214, .02)); }
.card ol.rels img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card ol.rels b { font-weight: 400; font-size: 11.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card ol.rels em { font-style: normal; font-size: 10px; color: var(--faint); }
.card ol.rels a:hover b { color: var(--spore); }
@media (max-width: 760px) { .card figure.portrait img { max-height: 150px; } .card ol.rels { grid-template-columns: repeat(4, 1fr); } }
/* ---------- header + controls, readable over the map (2026-11-02) ----------
   The title, the homage to Glenn and the controls sit on one dark printed card each, stacked in a single left
   column, so no text ever sits bare on a bright patch of map. Text colours clear WCAG AA on the card. */
:root { --card: rgba(19, 16, 25, .9); --card-ln: rgba(236, 228, 214, .55); --soft: #c4bac6; }
.mark { background: var(--card); border: 1px solid var(--card-ln); box-shadow: 4px 4px 0 #000; padding: 12px 16px 12px; width: 290px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mark h1 { font-size: 32px; }
.mark p { margin-top: 6px; font-size: 11px; color: var(--soft); }
.mark p.homage { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(236, 228, 214, .18); font-size: 12px; line-height: 1.45; color: var(--soft); }
.mark p.homage a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--spore) 70%, transparent); text-underline-offset: 3px; }
.mark p.homage a:hover { color: var(--spore); }
.mark .abt { display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--soft); }
.mark .abt:hover { color: var(--spore); }

.tools, .ptab { top: calc(var(--mark-b, 150px) + 10px); }
.tools { width: 290px; max-width: 290px; align-items: stretch; gap: 6px; padding: 10px 12px 12px; background: var(--card); border-color: var(--card-ln); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.phead b { font-size: 11px; }
.tools .phead button { font-size: 11.5px; color: var(--soft); }
.tools .phead button:hover { color: var(--ink); }
.trow { display: flex; flex-wrap: wrap; gap: 6px; }
.trow button { flex: 1 1 auto; }
.tools button, .tools label { font-size: 12px; color: var(--ink); border-color: rgba(236, 228, 214, .32); min-height: 32px; }
.tools button.on { border-color: color-mix(in srgb, var(--spore) 55%, transparent); }
/* A choice reads as label on the left, current value on the right with a caret, so it looks like a menu. */
.tools label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 26px; line-height: 1.2; }
.tools label > span { color: var(--soft); }
.tools label select { font-size: 12px; line-height: 1.2; height: auto; text-align: end; text-align-last: end; max-width: 60%; }
.tools label::after { content: ""; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; border-right: 1px solid var(--soft); border-bottom: 1px solid var(--soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.cleg { color: var(--soft); font-size: 11.5px; }
.tools .howto { color: var(--soft); }
.ptab { background: var(--card); border-color: var(--card-ln); font-size: 11px; }
[dir=rtl] .tools { align-items: stretch; }
[dir=rtl] .tools label { padding-right: 11px; padding-left: 26px; }
[dir=rtl] .tools label::after { right: auto; left: 11px; }

@media (max-width: 760px) {
  /* Phones: the title card runs the full width as two short lines, so it takes less height than before. */
  .mark { flex: 1 1 100%; width: auto; padding: 9px 12px 10px; box-shadow: 3px 3px 0 #000; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
  .mark h1 { font-size: 26px; grid-column: 1; }
  .mark .abt { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .mark p { grid-column: 1 / -1; margin-top: 3px; font-size: 10px; }
  .mark p.homage { margin-top: 7px; padding-top: 7px; font-size: 11.5px; }
  .tools { top: auto; width: auto; max-width: none; padding: 6px; }
  .trow { flex-wrap: nowrap; }
  .trow button { flex: none; }
  .tools label { padding-right: 24px; }
  .tools label select { max-width: none; }
  .tools, .ptab { bottom: calc(74px + var(--lens-h, 38px) + env(safe-area-inset-bottom)); }
  .ptab { top: auto; }
  [dir=rtl] .tools { align-items: center; }
  [dir=rtl] .tools label { padding-left: 24px; }
}
/* ---------- Axes: the deck that invites you to choose your own three axes ---------- */
.axdeck { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 4; width: min(760px, calc(100% - 36px)); padding: 12px 16px 10px; border-radius: 18px; background: rgba(12, 9, 18, .9); border: 1px solid color-mix(in srgb, var(--spore) 40%, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 10px 40px rgba(0, 0, 0, .5), 0 0 28px color-mix(in srgb, var(--spore) 12%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; animation: axin .5s ease-out; }
.axhead { margin: 0 0 9px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.axhead b { display: block; margin-bottom: 2px; font: 600 21px/1.15 var(--f-label); color: var(--ink); letter-spacing: .01em; }
:root[data-font=fraun] .axhead b { font-style: italic; font-weight: 400; }
.axrow { display: flex; gap: 8px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.axpick { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 150px; padding: 6px 30px 7px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--spore) 45%, transparent); background: color-mix(in srgb, var(--spore) 7%, rgba(14, 10, 20, .8)); cursor: pointer; text-align: start; transition: border-color .2s, background .2s; }
.axpick:hover, .axpick:focus-within { border-color: var(--spore); background: color-mix(in srgb, var(--spore) 14%, rgba(14, 10, 20, .8)); }
.axpick::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -2px; border: solid var(--spore); border-width: 0 1.5px 1.5px 0; transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.axk { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.noital .axk { letter-spacing: .03em; text-transform: none; }
.axk em { font-style: normal; color: var(--spore); font-weight: 600; }
.axk small { font-size: inherit; }
.axpick select { appearance: none; -webkit-appearance: none; width: 100%; background: none; border: 0; outline: none; padding: 0; color: var(--ink); font: 15px/1.3 var(--f-mono); cursor: pointer; }
.axpick select option { background: #120d18; color: var(--ink); }
.axpick.hot { animation: axhot 1.3s ease-out; }
.axshuf { align-self: center; padding: 8px 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--spore) 50%, transparent); font-size: 12px; color: var(--spore); }
.axshuf:hover { background: color-mix(in srgb, var(--spore) 13%, transparent); }
.axtry { margin: 9px 0 0; font-size: 11px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; align-items: center; }
.axtry button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; color: var(--dim); }
.axtry button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--spore) 40%, transparent); }
.axtry button.on { color: var(--spore); border-color: color-mix(in srgb, var(--spore) 45%, transparent); background: color-mix(in srgb, var(--spore) 10%, transparent); }
@keyframes axin { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes axhot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spore) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* The deck takes the caption's place, so the legend steps aside on narrow desktops. */
body.lens-axes .legend { bottom: 70px; }
@media (max-width: 1100px) and (min-width: 761px) { body.lens-axes .legend { display: none; } }
@media (max-width: 760px) {
  .axdeck { bottom: auto; top: calc(var(--hdr, 150px) + 8px); width: calc(100% - 28px); padding: 9px 10px 8px; border-radius: 14px; }
  .playing .axdeck { top: calc(var(--hdr, 150px) + var(--now-h, 44px) + 16px); }
  .axhead { margin-bottom: 7px; }
  .axhead b { font-size: 17px; margin: 0; }
  .axhead span { display: none; }
  .axrow { gap: 5px; flex-wrap: nowrap; }
  .axpick { flex: 1 1 0; min-width: 0; padding: 5px 20px 6px 8px; border-radius: 10px; }
  .axpick::after { right: 8px; width: 6px; height: 6px; }
  .axk small { display: none; }
  .axpick select { font-size: 13px; text-overflow: ellipsis; }
  .axshuf { display: none; }
  .axtry { margin-top: 7px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .axtry::-webkit-scrollbar { display: none; }
  .axtry button { flex: none; min-height: 30px; }
}
[dir=rtl] .axpick { padding: 6px 12px 7px 30px; }
[dir=rtl] .axpick::after { right: auto; left: 13px; }
@media (prefers-reduced-motion: reduce) { .axdeck, .axpick.hot { animation: none; } }

/* ---------- view bar: actions look different from views, and every button explains itself ---------- */
.lenses button.act { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--spore) 70%, var(--ink)); }
.lenses button.act svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lenses button.act svg .f, #drift svg circle { fill: currentColor; stroke: none; }
.lenses button.act:hover, .lenses button.act:focus-visible { color: var(--spore); background: color-mix(in srgb, var(--spore) 10%, transparent); }
#edges { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spore) 38%, transparent), inset 0 0 10px color-mix(in srgb, var(--spore) 16%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--spore) 45%, transparent); animation: edgeglow 3.6s ease-in-out infinite; }
#edges svg .f { filter: drop-shadow(0 0 2px var(--spore)); }
@keyframes edgeglow { 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spore) 62%, transparent), inset 0 0 14px color-mix(in srgb, var(--spore) 30%, transparent); } }
.lenses button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.bhint { position: fixed; z-index: 11; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: rgba(12, 9, 18, .96); border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(0, 0, 0, .5); font-size: 12px; line-height: 1.4; color: var(--dim); }
.bhint b { font-weight: 400; color: var(--ink); }
.bhint.act { border-color: color-mix(in srgb, var(--spore) 40%, transparent); }
.bhint.act b { color: var(--spore); }
/* Phones: views on the first row, actions on their own row under them. */
@media (max-width: 760px) { .lenses button.act { gap: 4px; } .lenses button.act svg { width: 11px; height: 11px; } .lenses .sep { flex-basis: 100%; width: auto; height: 0; margin: 0; } }
@media (prefers-reduced-motion: reduce) { #edges { animation: none; } }
/* Land's year scrubber: a short readout, one fact per line */
.tip.scrub { white-space: pre-line; text-align: start; line-height: 1.5; max-width: 300px; }
.tip.scrub::first-line { font-size: 15px; color: var(--spore); }

/* ---------- now playing: the orb ----------
   What's playing floats in its own light (drawn in app.js), with the record, the act, the sound and the source
   beside it. --np and --np2 are the sound's colours, set live. */
.now { --np: #c9ff6a; --np2: #c9ff6a; position: fixed; left: 18px; bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 36px)); box-sizing: border-box; padding: 12px 16px 12px 8px; border-radius: 90px 22px 22px 90px;
  background: radial-gradient(130% 160% at 0% 50%, color-mix(in srgb, var(--np) 20%, transparent), transparent 62%), rgba(10, 7, 16, .76);
  border: 1px solid color-mix(in srgb, var(--np) 38%, transparent); box-shadow: 0 0 46px -10px color-mix(in srgb, var(--np) 55%, transparent), 0 14px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); transition: border-color .8s, box-shadow .8s; animation: npin .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes npin { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.orb { position: relative; flex: none; width: 148px; height: 148px; margin: -30px -10px -30px -22px; padding: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb:focus-visible { outline: none; }
.orb:focus-visible canvas { filter: drop-shadow(0 0 6px var(--spore)); }
.orbi { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); opacity: 0; transition: opacity .25s; pointer-events: none; }
.orbi .ip { display: none; }
.now[data-state=paused] .orbi .ipa, .now[data-state=ended] .orbi .ipa { display: none; }
.now[data-state=paused] .orbi .ip, .now[data-state=ended] .orbi .ip { display: block; }
.now[data-state=play] .orb:hover .orbi, .now[data-state=play] .orb:focus-visible .orbi, .now[data-state=paused] .orbi, .now[data-state=ended] .orbi { opacity: 1; }
.nowi { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.nowi p { margin: 0; min-width: 0; }
.nowk { display: flex; align-items: center; gap: 8px; font: 400 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--np) 70%, var(--ink)); }
.nowk span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now[data-state=play] #nowk::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: var(--np); box-shadow: 0 0 8px var(--np); vertical-align: 1px; animation: nppulse 1.6s ease-in-out infinite; }
@keyframes nppulse { 50% { opacity: .35; } }
#nowmin, #nowlm, .nowk #stop { flex: none; width: 24px; height: 24px; margin: -6px 0; display: grid; place-items: center; border-radius: 50%; color: var(--faint); }
.nowk #stop { margin-inline-end: -8px; margin-inline-start: -6px; }
#nowmin:hover, #nowmin:focus-visible, #nowlm:hover, #nowlm:focus-visible, .nowk #stop:hover, .nowk #stop:focus-visible { color: var(--ink); background: rgba(236, 228, 214, .08); outline: none; }
#nowmin svg, #nowlm svg, .nowk #stop svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nowt { font: 600 25px/1.04 var(--f-label); color: var(--ink); text-shadow: 0 0 22px color-mix(in srgb, var(--np) 40%, transparent); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.nowa button { max-width: 100%; padding: 0; font: 17px/1.2 var(--f-text); color: #e2d9cb; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowa button:not(:disabled):hover, .nowa button:not(:disabled):focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--np) 70%, transparent); text-underline-offset: 3px; outline: none; }
.nowa button:disabled { cursor: default; color: #e2d9cb; }
.nowm { display: flex; align-items: center; gap: 0; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; }
#nowg { flex: 0 1 auto; max-width: 62%; display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 8px 2px 6px; margin-inline-start: -6px; border-radius: 999px; font-size: 11.5px; color: var(--ink); }
#nowg span { overflow: hidden; text-overflow: ellipsis; }
#nowg:hover, #nowg:focus-visible { background: color-mix(in srgb, var(--np) 16%, transparent); outline: none; }
#nowg i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
#nowal { flex: 1 1 0; min-width: 3em; display: flex; overflow: hidden; }
#nowal span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#nowal span + span { flex: none; }
#nowal span + span::before { content: "·"; margin: 0 6px; }
#nowal.sep::before { content: "·"; margin: 0 6px 0 2px; }
.nowc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.nowc button, .nowc a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(236, 228, 214, .07); font-size: 11px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nowc button:hover, .nowc a:hover, .nowc button:focus-visible, .nowc a:focus-visible { background: rgba(236, 228, 214, .15); outline: none; }
.nowc .np-pp { color: var(--spore); background: color-mix(in srgb, var(--spore) 14%, transparent); }
.nowc svg { width: 10px; height: 10px; fill: currentColor; }
.nows { font-size: 10px; color: var(--faint); letter-spacing: .02em; }
.nows:empty { display: none; }
/* landing hint and searching: quieter, no controls */
.now[data-state=hint] .nowt, .now[data-state=finding] .nowt { font: 16px/1.3 var(--f-text); text-shadow: none; color: #ddd3c5; }
.now[data-state=finding] .nowt { color: var(--dim); }
.now[data-state=hint] .nowc, .now[data-state=hint] #nowmin, .now[data-state=hint] #nowlm { display: none; }
.now[data-state=finding] .nowc > :not(#nownext) { display: none; }
/* shrunk: just the orb, floating */
.now.min { width: auto; padding: 0; background: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 50%; }
.now.min .nowi { display: none; }
.now.min .orb { margin: 0; width: 112px; height: 112px; }
.now.min .orb .orbi { opacity: 0; }
/* the family legend steps up to make room, and stands aside where the screen is too short for both (app.js) */
.playing .legend { bottom: calc(var(--now-h, 120px) + 40px); transition: bottom .4s; }
.legcrowd .legend { visibility: hidden; }
/* narrower desktops: the year bar centres in the room to the right of the orb */
@media (min-width: 761px) and (max-width: 1500px) {
  .playing:not(.npmin) .time { left: calc(476px + (100% - 476px) / 2); width: min(520px, calc(100% - 512px)); }
  [dir=rtl].playing:not(.npmin) .time { left: calc((100% - 476px) / 2); }
}
[dir=rtl] .now { left: auto; right: 18px; border-radius: 22px 90px 90px 22px; padding: 12px 8px 12px 16px; }
[dir=rtl] .orb { margin: -30px -22px -30px -10px; }
[dir=rtl] .playing .legend { bottom: calc(var(--now-h, 120px) + 40px); }
@media (max-width: 760px) {
  .now { left: 12px; right: 12px; bottom: auto; top: calc(var(--hdr, 150px) + 10px); width: auto; z-index: 4; gap: 6px; padding: 8px 12px 8px 2px; border-radius: 22px; }
  .orb { width: 116px; height: 116px; margin: -14px -8px -14px -6px; }
  #nownext span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nowt { font-size: 20px; -webkit-line-clamp: 1; }
  .nowa button { font-size: 14.5px; }
  .nowm, #nowg { font-size: 11px; }
  .nowc { margin-top: 4px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nowc::-webkit-scrollbar { display: none; }
  .nowc button, .nowc a { flex: none; min-height: 30px; padding: 4px 10px; }
  .now[data-state=hint] .nowt, .now[data-state=finding] .nowt { font-size: 14.5px; }
  /* a card open on a phone takes the lower half, so the orb keeps to a compact strip above it */
  html:not(.lm).cardopen .now .nowm, html:not(.lm).cardopen .now .nowc { display: none; }
  html:not(.lm).cardopen .now .nowi { gap: 1px; }
  html:not(.lm).cardopen .now .orb { width: 84px; height: 84px; margin: -12px -6px -12px -8px; }
  .now.min { left: auto; right: 8px; }
  .now.min .orb { width: 84px; height: 84px; }
  [dir=rtl] .now { left: 12px; right: 12px; border-radius: 22px; padding: 8px 2px 8px 12px; }
  [dir=rtl] .orb { margin: -14px -6px -14px -8px; }
  [dir=rtl] .now.min { right: auto; left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .now { animation: none; } .now[data-state=play] #nowk::before { animation: none; } }
/* big screens: the orb grows with the room */
@media (min-width: 1700px) and (min-height: 900px) {
  .now { width: 520px; gap: 16px; padding: 16px 20px 16px 10px; }
  .orb { width: 184px; height: 184px; margin: -38px -12px -38px -26px; }
  [dir=rtl] .orb { margin: -38px -26px -38px -12px; }
  .nowt { font-size: 31px; }
  .nowa button { font-size: 20px; }
  .nowk { font-size: 11px; }
  .nowm, #nowg { font-size: 12.5px; }
  .nowc button, .nowc a { font-size: 12px; padding: 6px 13px; }
  .nows { font-size: 11px; }
}

/* ---------- listening mode: the record takes the screen, the map glows through behind it ---------- */
#nowlm span, #nowlm .c, #nowdrift { display: none; }
#nowdrift svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
#nowdrift svg circle { fill: currentColor; stroke: none; }
#nowdrift.on { color: var(--spore); background: color-mix(in srgb, var(--spore) 14%, transparent); }
.lm .now { inset: 0; width: auto; max-width: none; border-radius: 0; border: 0; padding: max(64px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); z-index: 20; flex-direction: column; justify-content: center; gap: clamp(8px, 3vh, 34px); text-align: center; overflow: auto;
  background: radial-gradient(60vmax 60vmax at 50% 38%, color-mix(in srgb, var(--np) 26%, transparent), transparent 70%), radial-gradient(90vmax 70vmax at 50% 120%, color-mix(in srgb, var(--np2) 18%, transparent), transparent 70%), rgba(5, 4, 10, .62);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: none; animation: lmin .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes lmin { from { opacity: 0; } }
.lm .now::before { content: ""; position: absolute; left: 50%; top: 38%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--np) 30%, transparent), transparent); opacity: calc(.35 + var(--lv, 0) * .9); transform: scale(calc(1 + var(--lv, 0) * .35)); }
.lm .orb { width: min(64vmin, 470px, 46vh); height: min(64vmin, 470px, 46vh); margin: 0; flex: none; }
.lm .orbi { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.lm .nowi { flex: none; width: min(760px, 100%); align-items: center; gap: 6px; }
.lm .nowk { justify-content: center; font-size: 11.5px; }
.lm .nowk span { flex: none; overflow: visible; }
.lm #nowmin, .lm .nowk #stop { display: none; }
.lm #nowlm { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; width: auto; height: auto; margin: 0; padding: 8px 14px 8px 12px; display: inline-flex; gap: 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12, 9, 18, .7); color: var(--dim); font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: none; }
.lm #nowlm span, .lm #nowlm .c { display: inline; }
.lm #nowlm .o { display: none; }
.lm .nowt { display: block; overflow: visible; font-size: clamp(34px, 5.6vw, 76px); line-height: 1; text-shadow: 0 0 40px color-mix(in srgb, var(--np) 50%, transparent); }
.lm .nowa button { font-size: clamp(20px, 2.4vw, 32px); white-space: normal; text-align: center; }
.lm .nowm { justify-content: center; font-size: 13px; max-width: 100%; }
.lm #nowg { font-size: 13px; }
.lm #nowal { flex: 0 1 auto; }
.lm .nowc { justify-content: center; flex-wrap: wrap; overflow: visible; gap: 8px; margin-top: clamp(8px, 2vh, 20px); }
.lm .nowc button, .lm .nowc a { font-size: 13px; padding: 10px 18px; min-height: 40px; background: rgba(236, 228, 214, .08); }
.lm .nowc .np-pp { background: color-mix(in srgb, var(--spore) 16%, transparent); }
.lm #nowdrift { display: inline-flex; }
.lm #nownext span { position: static; width: auto; height: auto; clip: auto; }
.lm .nows { font-size: 11px; margin-top: 4px; }
.lm .now[data-state=hint] .nowt, .lm .now[data-state=finding] .nowt { font-size: clamp(22px, 3vw, 34px); }
[dir=rtl].lm #nowlm { right: auto; left: 16px; }
@media (max-width: 760px) {
  .lm .now { padding-top: max(60px, calc(env(safe-area-inset-top) + 48px)); }
  .lm .orb { width: min(78vw, 42vh); height: min(78vw, 42vh); }
  .lm .nowm { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
  .lm .nowc button, .lm .nowc a { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) { .lm .now { animation: none; } .lm .now::before { transform: none; } }

/* Sounds still waiting for samples: hollow on the map, a two-line hover note, a calm box on the card, a legend key. */
.tip.two { white-space: pre-line; color: var(--dim); line-height: 1.5; }
.tip.two::first-line { color: var(--ink); }
.card .soon { margin-top: 14px; padding: 11px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--spore) 35%, var(--line)); background: color-mix(in srgb, var(--spore) 5%, transparent); }
.card .soon b { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; color: var(--spore); }
.card .soon b i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.card .soon p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.card .soon button { margin-top: 10px; padding: 7px 12px; border-radius: 999px; font-size: 12px; color: var(--spore); background: color-mix(in srgb, var(--spore) 14%, transparent); }
.card .soon button:hover { background: color-mix(in srgb, var(--spore) 22%, transparent); }
.legend .lkey { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 3px 8px 3px 4px; font-size: 11px; color: var(--dim); }
.legend .lkey i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--dim); box-sizing: border-box; flex: none; }
/* Labels view */
body.labels .lenses button[data-lens].on { background: none; color: var(--dim); }
.card i.sq, .hits i.sq { border-radius: 1px !important; transform: rotate(45deg) scale(.85); }
.card .chips button.via { border-style: dashed; }
.card figure.portrait.logo img { object-fit: contain; max-height: 120px; padding: 12px; background: rgba(236, 228, 214, .9); }

/* ---------- Phones, rebuilt from the Mobile Lab (2026-11-02): the map always wins ----------
   One slim bar on top, one dock at the bottom, the card as a sheet (peek, half, full), now playing as a slim player
   that becomes the card's top line, captions that fade, and bars that step aside while you drag the map. These rules
   come last on purpose: they replace the older phone rules above. Wider screens (laptops, an unfolded foldable)
   keep the desktop layout. */
.wm, .menub, .lensb, .grab, .card .more, .nowbar, .msheet { display: none; }
.lset { display: contents; }
@media (max-width: 760px) {
  :root { --sab: env(safe-area-inset-bottom, 0px); }
  /* top bar */
  .top { flex-wrap: nowrap; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
    background: linear-gradient(rgba(7, 5, 11, .9), rgba(7, 5, 11, .74)); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity .22s, transform .22s; }
  .wm { display: block; flex: none; font: 23px/1 'IM Fell English', Georgia, serif; color: #f2ece2; text-shadow: 0 0 18px color-mix(in srgb, var(--spore) 30%, transparent); padding: 0 2px; cursor: pointer; }
  .find { order: 0; flex: 1 1 auto; width: auto; min-width: 0; }
  .find input { height: 38px; padding: 0 14px; font-size: 16px; } /* 16px or Safari zooms the page on focus */
  #hits { top: 44px; max-height: min(60vh, 420px); }
  .menub { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); }
  .menub svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
  .qfocus .wm { display: none; }
  /* the dock */
  .lenses { top: auto; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(8px + var(--sab)); transform: none; flex-wrap: nowrap; justify-content: space-between; gap: 2px; row-gap: 0; padding: 5px; border-radius: 24px; overflow: visible; transition: opacity .22s, transform .22s; }
  .lenses .sep { display: none; }
  .lensb { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; min-height: 38px; padding: 0 12px 0 11px; border-radius: 19px; background: rgba(236, 228, 214, .1); color: var(--ink); font-size: 12.5px; white-space: nowrap; }
  .lensb span { overflow: hidden; text-overflow: ellipsis; }
  .lensb svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .lensb .chev { width: 10px; height: 10px; stroke-width: 1.6; opacity: .7; transition: transform .2s; }
  .lopen .lensb .chev { transform: rotate(180deg); }
  .lenses button.act { flex: 0 1 auto; min-width: 0; min-height: 38px; padding: 0 9px; }
  .lenses button.act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lset { display: none; }
  .lenses.lopen .lset { display: grid; position: absolute; inset-inline-start: 0; bottom: calc(100% + 8px); min-width: 210px; padding: 6px; gap: 2px; background: rgba(14, 10, 20, .97); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); animation: popin .18s ease-out; }
  .lenses.lopen .lset button { text-align: start; min-height: 42px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
  .lenses.lopen .lset button[data-hint]::after { content: attr(data-hint); display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--faint); }
  .lenses.lopen .lset { max-width: min(320px, calc(100vw - 20px)); }
  @keyframes popin { from { opacity: 0; transform: translateY(6px); } }
  /* the year bar only in Land, Tunnel, or while the map grows (app.js sets .timeon) */
  .time { display: none; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); width: auto; transform: none; bottom: calc(16px + var(--lens-h, 48px) + var(--sab)); transition: opacity .22s; }
  .timeon .time { display: flex; }
  .cardopen .time { display: none; }
  /* controls live in the menu */
  .ptab { display: none !important; }
  .msheet { display: block; position: fixed; inset: 0; z-index: 12; }
  .mscrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); animation: fadein .2s ease-out; }
  @keyframes fadein { from { opacity: 0; } }
  .msin { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px;
    padding: 4px max(16px, env(safe-area-inset-right, 0px)) calc(18px + var(--sab)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(13, 10, 19, .98); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); animation: sheetin .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes sheetin { from { transform: translateY(40%); opacity: 0; } }
  .mtop { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; align-items: center; min-height: 36px; margin: 0 -4px; background: rgba(13, 10, 19, .98); }
  .mhdl { position: absolute; left: 50%; top: 6px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(236, 228, 214, .3); }
  .mx { padding: 8px 6px; font-size: 12px; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
  .mslot { display: flex; flex-direction: column; gap: 12px; }
  .msheet .mark { width: auto; display: block; padding: 12px 14px; box-shadow: 3px 3px 0 #000; }
  .msheet .mark h1 { font-size: 30px; }
  .msheet .mark p { font-size: 10.5px; }
  .msheet .mark p.homage { font-size: 12px; }
  .msheet .mark .abt { margin-top: 10px; font-size: 12.5px; min-height: 0; }
  .msheet .modes { margin: 0; align-self: stretch; }
  .msheet .modes button { flex: 1; min-height: 40px; font-size: 13px; }
  .msheet .lang { order: 0; align-self: stretch; }
  .msheet .lang select { width: 100%; min-height: 42px; padding: 0 30px 0 14px; font-size: 14px; }
  [dir=rtl] .msheet .lang select { padding: 0 14px 0 30px; }
  .msheet .tools, html.phid .msheet .tools { position: static; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: auto; max-width: none; overflow: visible; gap: 8px; padding: 12px; box-shadow: 3px 3px 0 #000; }
  .msheet .phead b { display: block; }
  .msheet #phide { display: none; }
  .msheet .trow { flex-wrap: wrap; gap: 6px; }
  .msheet .tools button, .msheet .tools label { min-height: 42px; font-size: 13px; }
  .msheet .tools label select { font-size: 13px; max-width: 62%; }
  .msheet .cleg { display: block; }
  .mgrow { align-self: stretch; min-height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--spore) 12%, transparent); color: var(--spore); font-size: 13px; }
  /* the card as a sheet */
  .card { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: none; height: calc(188px + var(--sab)); padding: 0 16px calc(16px + var(--sab)); border-width: 1px 0 0; border-radius: 22px 22px 0 0;
    overflow: hidden; touch-action: none; overscroll-behavior: contain; background: rgba(12, 9, 18, .95); transition: height .34s cubic-bezier(.2, .8, .2, 1), border-radius .3s; }
  [dir=rtl] .card { left: 0; right: 0; }
  .card.s-half { height: 52%; overflow-y: auto; touch-action: pan-y; }
  .card.s-full { height: calc(100% - var(--hdr, 60px) - 6px); overflow-y: auto; touch-action: pan-y; }
  .playing:not(.lm) .card.s-full { height: calc(100% - var(--hdr, 60px) - var(--now-h, 64px) - 6px); }
  .card.dragging { transition: none; }
  .card.rise { animation: sheetrise .55s cubic-bezier(.2, .9, .25, 1.2); }
  @keyframes sheetrise { from { transform: translateY(100%); } 70% { transform: translateY(-10px); } }
  .grab { display: block; position: sticky; top: 0; z-index: 2; width: calc(100% + 32px); height: 30px; margin: 0 -16px; padding: 0; background: linear-gradient(rgba(12, 9, 18, .98) 70%, rgba(12, 9, 18, 0)); touch-action: none; cursor: grab; }
  .grab::before { content: ""; position: absolute; left: 50%; top: 10px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: rgba(236, 228, 214, .42); }
  .card.s-peek .grab::before { background: color-mix(in srgb, var(--spore) 55%, rgba(236, 228, 214, .4)); }
  .card.rise .grab::before { animation: nudge 1.2s .55s ease-in-out 2; }
  @keyframes nudge { 30% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }
  .card .x { top: 8px; right: 12px; z-index: 3; padding: 6px 4px; }
  [dir=rtl] .card .x { right: auto; left: 12px; }
  .card.s-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(70px + var(--sab)); background: linear-gradient(rgba(12, 9, 18, 0), rgba(12, 9, 18, .98) 55%); pointer-events: none; z-index: 2; }
  .card.s-peek .more { display: inline-flex; position: absolute; left: 50%; bottom: calc(12px + var(--sab)); transform: translateX(-50%); z-index: 3; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--spore) 45%, transparent); background: color-mix(in srgb, var(--spore) 14%, rgba(12, 9, 18, .9)); color: var(--spore); font-size: 12.5px; }
  .card .more svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .card.rise .more svg { animation: nudge 1.2s .55s ease-in-out 2; }
  /* now playing: a slim player above the dock */
  html:not(.lm) .now, html:not(.lm) .now.min { top: auto; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(16px + var(--lens-h, 48px) + var(--sab)); width: auto; height: 62px;
    gap: 9px; padding: 0 8px 0 4px; border-radius: 31px; z-index: 5; overflow: hidden; background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--np) 18%, transparent), transparent 60%), rgba(10, 7, 16, .9);
    border: 1px solid color-mix(in srgb, var(--np) 38%, transparent); box-shadow: 0 0 30px -12px color-mix(in srgb, var(--np) 55%, transparent), 0 10px 30px rgba(0, 0, 0, .4); transition: bottom .3s, opacity .22s, border-radius .3s; }
  html.timeon:not(.lm):not(.cardopen) .now { bottom: calc(16px + var(--lens-h, 48px) + 54px + var(--sab)); }
  html:not(.lm) .now .orb, html:not(.lm) .now.min .orb { width: 60px; height: 60px; margin: -2px -6px -2px -4px; }
  html:not(.lm) .now .orbi { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  html:not(.lm) .now[data-state=play] .orbi { opacity: .75; }
  html:not(.lm) .now .nowi, html:not(.lm) .now.min .nowi { display: flex; gap: 1px; padding-inline-end: 116px; }
  html:not(.lm) .now .nowk { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); margin: 0; gap: 2px; }
  html:not(.lm) .now .nowk span, html:not(.lm) #nowmin { display: none; }
  html:not(.lm) #nowlm, html:not(.lm) .nowk #stop { width: 36px; height: 36px; margin: 0; color: var(--dim); }
  html:not(.lm) #nowlm svg, html:not(.lm) .nowk #stop svg { width: 14px; height: 14px; }
  html:not(.lm) .now .nowc { position: absolute; inset-inline-end: 80px; top: 50%; transform: translateY(-50%); margin: 0; flex-wrap: nowrap; overflow: visible; }
  html:not(.lm) .now .nowc > :not(#nownext) { display: none; }
  html:not(.lm) .now #nownext { width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  html:not(.lm) .now #nownext svg { width: 12px; height: 12px; }
  html:not(.lm) .now .nowt { font-size: 17px; line-height: 1.15; -webkit-line-clamp: 1; }
  html:not(.lm) .now .nowa button { font-size: 13px; }
  html:not(.lm) .now .nowm, html:not(.lm) .now .nows { display: none; }
  html:not(.lm) .now[data-state=hint] .nowt, html:not(.lm) .now[data-state=finding] .nowt { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; }
  html:not(.lm) .now[data-state=hint] .nowi { padding-inline-end: 44px; }
  .nowbar { display: block; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: var(--np); box-shadow: 0 0 8px var(--np); pointer-events: none; }
  .lm .nowbar { display: none; }
  /* ...and the top line of the card when one is open */
  html.cardopen:not(.lm) .now { left: 0; right: 0; bottom: var(--card-h, 188px); height: 66px; padding: 8px 10px 0 6px; border-width: 1px 0 0; border-radius: 22px 22px 0 0; z-index: 7; touch-action: none; transition: none;
    background: radial-gradient(120% 200% at 0% 70%, color-mix(in srgb, var(--np) 16%, transparent), transparent 60%), rgba(12, 9, 18, .97); box-shadow: 0 -12px 30px rgba(0, 0, 0, .35); }
  html.cardopen:not(.lm) .now::after { content: ""; position: absolute; left: 50%; top: 5px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: rgba(236, 228, 214, .42); }
  html.cardopen:not(.lm) .now .orb { width: 54px; height: 54px; margin: 0 -4px 0 -2px; }
  html.cardopen.playing:not(.lm) .card { border-radius: 0; border-top-color: rgba(236, 228, 214, .07); }
  html.cardopen.playing:not(.lm) .card .grab::before { display: none; }
  html.cardopen.playing:not(.lm) .card .grab { height: 14px; }
  /* captions, toasts and the Axes deck sit under the top bar */
  .lcap, .playing .lcap { top: calc(var(--hdr, 60px) + 8px); bottom: auto; transition: opacity .6s, visibility 0s; }
  .lcap.cfade { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
  .toast { top: calc(var(--hdr, 60px) + 10px); }
  .axdeck, .playing .axdeck { top: calc(var(--hdr, 60px) + 8px); }
  /* while a finger moves the map, the bars step aside */
  html.mapdrag .top, html.mapdrag .lenses, html.mapdrag .time, html.mapdrag .lcap, html.mapdrag:not(.cardopen):not(.lm) .now { opacity: 0; pointer-events: none; }
  html.mapdrag .top { transform: translateY(-12px); }
  html.mapdrag .lenses { transform: translateY(12px); }
  /* typing a search: everything else steps back */
  .qfocus .lenses, .qfocus .time, .qfocus .card, .qfocus .lcap, html.qfocus:not(.lm) .now { visibility: hidden; }
}
@media (max-width: 400px) { #home span { display: none; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .card, .card.rise, .card.rise .grab::before, .card.rise .more svg, .msin, .lenses.lopen .lset { animation: none; transition: none; } }

/* ---------- Big touch screens: an unfolded foldable, tablets ----------
   At 761 points and up they get the desktop layout (the foldable's open screen is reported near 4:3 and about
   7.8 inches; unconfirmed). On a touch screen every control grows to a fingertip-sized target. */
@media (min-width: 761px) and (pointer: coarse) {
  .modes button, .lenses button, .tools button, .tools label, .time button, .lang select, .card .acts button, .card .acts a, .nowc button, .nowc a { min-height: 40px; }
  .modes button, .lenses button { padding-inline: 14px; }
  .card .chips button { min-height: 36px; padding: 6px 11px; }
  .card .x { padding: 8px; top: 6px; right: 6px; }
  .find input { min-height: 40px; font-size: 16px; }
}
/* A screen that reports a fold down the middle (the Viewport Segments API, where the browser supports it): the card
   keeps to the right half so it never sits across the crease. */
@media (horizontal-viewport-segments: 2) {
  .card { right: 18px; width: min(380px, calc(env(viewport-segment-width 1 0, 400px) - 36px)); }
  [dir=rtl] .card { right: auto; left: 18px; width: min(380px, calc(env(viewport-segment-width 0 0, 400px) - 36px)); }
}

/* ---------- Getting around: the ? button, the shortcuts and gestures sheet, and the first-visit hint per view ---------- */
.keyb { flex: none; display: grid; place-items: center; width: 33px; height: 33px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--dim); font: 500 13px var(--f-mono); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.keyb:hover, .keyb:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--spore) 45%, transparent); }
.kbox { max-width: 520px; }
.kbox h2 { font-size: 30px; }
.ktabs { display: flex; gap: 2px; margin: 14px 0 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; }
.ktabs button { padding: 5px 12px; border-radius: 999px; font: 11.5px var(--f-mono); color: var(--dim); }
.ktabs button.on { background: rgba(236, 228, 214, .12); color: var(--ink); }
.kbody h3 { margin: 16px 0 6px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.krows { margin: 0; display: grid; gap: 2px; }
.krows > div { display: grid; grid-template-columns: minmax(118px, 38%) 1fr; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(236, 228, 214, .06); }
.krows dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.krows dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: #d8cfc2; }
.kbox kbd, .vhint kbd { unicode-bidi: isolate; direction: ltr; display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid rgba(236, 228, 214, .38); border-bottom-width: 2px; border-radius: 5px; font: 500 11px/1.5 var(--f-mono); color: var(--ink); text-align: center; white-space: nowrap; }
.kbox .kg { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--spore) 12%, transparent); color: var(--spore); font-size: 11.5px; white-space: nowrap; }
.kbox .kbn { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.kbox .kor, .kbox .kplus { font-style: normal; font-size: 10.5px; color: var(--faint); }
.kbox .kfoot { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); }
.kbox details { border-bottom: 1px solid rgba(236, 228, 214, .08); }
.kbox summary { padding: 7px 0; cursor: pointer; font: 600 17px/1.2 var(--f-label); color: var(--ink); }
.kbox summary::marker { color: var(--spore); }
.kbox details .krows { margin-bottom: 8px; }
.kbox .igo { margin-top: 18px; }
.ibox .iab[data-keys] { display: block; margin: 6px 0 0; padding-inline: 0; }
/* the hint: under the view bar on desktop, under the top bar on phones; never over the map's controls */
.vhint { position: fixed; left: 50%; top: 112px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: min(560px, calc(100% - 36px)); padding: 7px 8px 7px 15px; border-radius: 18px; background: rgba(12, 9, 18, .94); border: 1px solid color-mix(in srgb, var(--spore) 30%, var(--line));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-size: 12px; color: #d8cfc2; animation: vhin .45s cubic-bezier(.2, .8, .2, 1) both; }
.vhint.out { animation: vhout .3s ease both; }
.vhint p { margin: 0; flex: 1 1 260px; line-height: 1.4; }
.vhint #vhintk { padding: 3px 4px; color: var(--spore); font-size: 11.5px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.vhint #vhintk kbd { margin-inline-start: 4px; text-decoration: none; color: var(--spore); border-color: color-mix(in srgb, var(--spore) 45%, transparent); }
.vhint .vx { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--dim); }
.vhint .vx svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vhint .vx:hover { color: var(--ink); }
.toast:not([hidden]) + .vhint { top: 158px; }
@keyframes vhin { from { opacity: 0; transform: translate(-50%, -6px); } }
@keyframes vhout { to { opacity: 0; transform: translate(-50%, -6px); } }
/* narrower desktops: keep clear of the title card on the left (on the right in RTL) */
@media (min-width: 761px) and (max-width: 1180px) {
  .vhint { left: auto; right: 18px; transform: none; max-width: calc(100% - 360px); animation-name: vhinp; }
  .vhint.out { animation-name: vhoutp; }
  [dir=rtl] .vhint { right: auto; left: 18px; }
}
@keyframes vhinp { from { opacity: 0; transform: translateY(-6px); } }
@keyframes vhoutp { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .vhint, .vhint.out { animation: none; } }
@media (max-width: 760px) {
  .keyb { display: none; }
  .vhint { top: calc(var(--hdr, 60px) + 8px); width: auto; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); max-width: none; transform: none; padding: 8px 6px 8px 14px; font-size: 12.5px; animation-name: vhinp; }
  .vhint.out { animation-name: vhoutp; }
  html.mapdrag .vhint, .qfocus .vhint { opacity: 0; pointer-events: none; }
  .vhint #vhintk { min-height: 32px; }
  .vhint .vx { width: 34px; height: 34px; }
  .vhint { justify-content: flex-end; }
  .vhint p { flex-basis: 100%; }
  .kbox { padding: 20px 18px 18px; }
  .krows > div { grid-template-columns: minmax(96px, 34%) 1fr; gap: 10px; }
}

/* ---------- the framed player (YouTube, SoundCloud) ----------
   A video floats over the map in a glass card lit in the playing sound's colours (--np, --np2, set live), edged with a
   slowly turning ring of light like the orb's corona. The player itself is never covered: YouTube's rules. */
.nowc .np-vid { color: color-mix(in srgb, var(--np) 75%, var(--ink)); background: color-mix(in srgb, var(--np) 15%, transparent); }
.nowc .np-vid:hover, .nowc .np-vid:focus-visible { background: color-mix(in srgb, var(--np) 26%, transparent); }
.nowc .np-vid svg { width: 12px; height: 12px; }
.np-vid rect { fill: none; stroke: currentColor; stroke-width: 1.2; }
.np-vid.glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--np) 55%, transparent), 0 0 18px -3px var(--np); animation: vidcall 2.4s ease-in-out infinite; }
@keyframes vidcall { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--np) 30%, transparent), 0 0 6px -3px var(--np); } }
@property --va { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vid { --np: #c9ff6a; --np2: #c9ff6a; position: fixed; left: 18px; bottom: calc(var(--now-h, 120px) + 34px); z-index: 7; width: min(480px, calc(100% - 36px)); box-sizing: border-box; padding: 8px 10px 12px; border-radius: 22px; isolation: isolate;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--np) 20%, transparent), transparent 60%), radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--np2) 16%, transparent), transparent 62%), rgba(10, 7, 16, .86);
  box-shadow: 0 0 64px -14px color-mix(in srgb, var(--np) 60%, transparent), 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); animation: vidin .6s cubic-bezier(.2, .8, .2, 1); }
.vid::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: .8;
  background: conic-gradient(from var(--va), var(--np), color-mix(in srgb, var(--np) 20%, transparent) 22%, var(--np2) 45%, color-mix(in srgb, var(--np2) 20%, transparent) 70%, var(--spore) 88%, var(--np));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: vidspin 16s linear infinite; }
@keyframes vidspin { to { --va: 360deg; } }
@keyframes vidin { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.vidh { display: flex; align-items: center; gap: 2px; padding: 2px 0 8px 6px; }
.vidk { flex: 1; min-width: 0; font: 400 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--np) 70%, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vidk b { font-weight: 400; }
.vidk b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: var(--np); box-shadow: 0 0 8px var(--np); vertical-align: 1px; animation: nppulse 1.6s ease-in-out infinite; }
.vidk i { font-style: normal; letter-spacing: .1em; color: var(--dim); }
.vidk i::before { content: "·"; margin: 0 8px; color: var(--faint); }
.vidh button { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.vidh button:hover, .vidh button:focus-visible { color: var(--ink); background: rgba(236, 228, 214, .09); outline: none; }
.vidh svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vidf { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--np) 14%, #07050b), #07050b);
  box-shadow: 0 0 0 1px rgba(236, 228, 214, .09), 0 0 36px -8px color-mix(in srgb, var(--np) 55%, transparent); }
.vidf:empty::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(236, 228, 214, .12); border-top-color: var(--spore); animation: vidwait 1s linear infinite; }
@keyframes vidwait { to { transform: rotate(360deg); } }
.vidf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vidt { display: flex; align-items: baseline; gap: 8px; margin: 10px 6px 0; min-width: 0; white-space: nowrap; }
.vidt b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 19px/1.15 var(--f-label); color: var(--ink); text-shadow: 0 0 20px color-mix(in srgb, var(--np) 40%, transparent); }
.vidt span { flex: none; font: 14px var(--f-text); color: #e2d9cb; }
.vidt span:last-child { color: var(--dim); }
.vidt span:empty { display: none; }
.vids { margin: 4px 6px 0; font-size: 10px; color: var(--faint); letter-spacing: .02em; }
[dir=rtl] .vid { left: auto; right: 18px; }
.vidopen .legend { visibility: hidden; }
.npmin .vid { bottom: 148px; }
@media (max-width: 760px) {
  .vid { left: 10px; right: 10px; width: auto; top: calc(var(--hdr, 110px) + 8px); bottom: auto; z-index: 8; padding: 6px 8px 10px; border-radius: 20px; }
  html:not(.lm).vidopen .now { visibility: hidden; }
  [dir=rtl] .vid { right: 10px; }
  .vidt b { font-size: 17px; }
}
/* listening mode: the video takes the stage, the orb glows behind it */
.lm .vid { left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: max-content; width: min(980px, calc(100% - 48px), calc((100vh - 200px) * 16 / 9 + 20px)); z-index: 22; padding: 10px 12px 14px; border-radius: 26px; }
.lm .vidt b { font-size: clamp(20px, 2.4vw, 30px); }
.lm .vidt span { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .vid { animation: none; } .vid::before, .np-vid.glow, .vidk b::before { animation: none; } }

/* ---------- dropdowns: the whole row is the button ----------
   Each choice looks like a row (label on the left, value and caret on the right), but the real <select> was only as
   big as its value text, so a tap on the label or the caret did nothing. The select keeps its place in the row, but
   its box now reaches back over the label and out over the caret (negative margins, matched by padding, so the layout
   and the look stay exactly as they were); the row clips it to its own edges. */
.tools label { overflow: hidden; }
.tools label > span { pointer-events: none; }
.tools label select, .msheet .tools label select { align-self: stretch; box-sizing: border-box; max-width: calc(60% + 826px);
  margin-block: -6px; padding-block: 6px; margin-inline: -800px -26px; padding-inline: 800px 26px; text-overflow: ellipsis; }
.msheet .tools label select { max-width: calc(62% + 826px); }
.tools label:focus-within { border-color: color-mix(in srgb, var(--spore) 60%, transparent); }
/* Axes deck: the select stretches up over the axis name and out over the caret, then pads its text back into place. */
.axpick { --pt: 6px; --pr: 30px; --pb: 7px; --pl: 12px; padding: var(--pt) var(--pr) var(--pb) var(--pl); }
[dir=rtl] .axpick { padding: var(--pt) var(--pl) var(--pb) var(--pr); }
.axk { line-height: 14px; pointer-events: none; position: relative; z-index: 1; }
.axpick select { box-sizing: content-box; width: 100%; margin: calc(-1 * (var(--pt) + 15px)) calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl));
  padding: calc(var(--pt) + 15px) var(--pr) var(--pb) var(--pl); border-radius: inherit; }
[dir=rtl] .axpick select { margin: calc(-1 * (var(--pt) + 15px)) calc(-1 * var(--pl)) calc(-1 * var(--pb)) calc(-1 * var(--pr)); padding: calc(var(--pt) + 15px) var(--pl) var(--pb) var(--pr); }
@media (max-width: 760px) { .axpick { --pt: 5px; --pr: 20px; --pb: 6px; --pl: 8px; } }