/* SPLIT-2: Night's own tokens, fonts and rules, moved word for word from the shared files. This file loads LAST on its page: the cascade order is what it was. */
:root{
  /* RUN 7 (C11) — THE NIGHT FACE: the user's design choice (BACKLOG §7.19) = B · Moonglass for everything (palette, controls in a glass
     capsule, cards, layouts) + the C · Hush emblem (five dots in an arc, the centre one glowing in Moonglass's firefly lime). Fonts: Literata
     Light (titles, wordmark) and Andika (text) — OFL, self-hosted (@font-face below), both with Cyrillic. Glass = a blur over the scene;
     its PLAIN fallback (--night-glass-plain, no blur) on the Dark background, the minimal scene level and the low-power choice. */
  --night-bg:#060a12; --night-ink:#e6ecf5; --night-dim:#8f9bb0; --night-moon:#9cc3ff;
  --night-accent:#c8f56a; --night-accent-ink:#0b1205; --night-accent-a16:rgba(200,245,106,.16); --night-accent-a35:rgba(200,245,106,.35);
  --night-glass:rgba(20,28,44,.52); --night-glass-plain:rgba(12,17,28,.94); --night-hair:rgba(200,215,240,.20); --night-fill:rgba(255,255,255,.06);
  --night-shade:rgba(0,0,0,.45); --night-emblem-dot:rgba(230,236,245,.85);
  --night-font-display:"Literata", "Iowan Old Style", Georgia, serif; --night-font-body:"Andika", system-ui, "Segoe UI", sans-serif;
  --night-fw-light:300; --night-fw-regular:400; --night-fw-bold:700; --night-lh:1.45; --night-lh-tight:1.1; --night-track-wide:.12em;
  --night-fs-title:28px; --night-fs-body:17px; --night-fs-value:15px; --night-fs-label:13px; --night-fs-small:12px; --night-fs-mark:30px;
  --night-btn:56px; --night-ibtn:46px; --night-gap:12px; --night-gap-sm:6px; --night-pad:18px; --night-pad-lg:24px; --night-edge:14px;
  --night-r-capsule:28px; --night-r-card:24px; --night-r-pill:999px;
  --night-blur:blur(16px) saturate(1.2); --night-blur-card:blur(18px) saturate(1.2);
  --night-ring:0 0 0 3px rgba(200,245,106,.16); --night-glow:0 0 14px rgba(200,245,106,.55); --night-shadow:0 10px 40px rgba(0,0,0,.45);
  --night-fade:300ms; --night-slow:900ms; --night-ease:cubic-bezier(.2,.7,.2,1);
  --night-scene-out:500ms; --night-scene-in:800ms; --night-name-fade:600ms;   /* NIGHT-3 stage 5 part 2: a room switch (host.js SCENE_FADE) and the room's name */
  --night-icon:24px; --night-glow-f:drop-shadow(0 0 6px #c8f56a);
  /* RUN 8 (slice 3): the slim bars that show the forest's depth and the three effects while the hands play (Moonglass) */
  --night-bar-w:6px; --night-bar-h:min(30vh, 200px); --night-bar-gap:16px; --night-bar-ico:20px; --night-warm:#ffb45a; --night-cold:#e6fff2;
  /* VIS1c (RUN 6): the NIGHT FOREST room (apps/night/rooms/forest/; moved from core/tokens.css at NIGHT-3) — the «Rooms of light» prototype's colours, read by the 3D room as its base
     colours (textures add small numeric jitter around them). The firefly greens are the hand's light; the halo / mask entries are alpha
     ramps of white used as light masks (sprites, mist), not visible colours on their own. */
  --cv-forest-fog:#060e18; --cv-forest-sky:#1b2a46; --cv-forest-under:#040604; --cv-forest-moon:#6b84bd; --cv-forest-moonhalo:#9fb4dd;
  --cv-forest-ground:#17160f; --cv-forest-soil-night:#8c7862; --cv-forest-moss:#30481c; --cv-forest-soil:#46321e; --cv-forest-leaf:#2b2213; --cv-forest-bark:#2e251e;
  --cv-forest-bark-dark:rgba(8,6,5,.55); --cv-forest-bark-light:rgba(110,95,75,.28); --cv-forest-fern:#2c4a1e; --cv-forest-frond:#233a1a;
  --cv-forest-rock:#272b22; --cv-forest-rock-grey:#33363a; --cv-forest-rock-warm:#3a3027; --cv-forest-rock-lichen:#6a7264; --cv-forest-mist:#8aa2c8; --cv-forest-fly:#d6ff7a; --cv-forest-wild:#c8ff78; --cv-forest-light:#c6ff7a;
  /* RUN 9: the moods' looks (the room record's looks) — Glow = the base set above + haze / cloud; Dusk and Mist their own sets */
  --cv-forest-haze:#8aa2c8; --cv-forest-cloud:#1a2234; --cv-forest-shroom:#7dffc4; --cv-forest-bloom:#b9a8ff;
  --cv-forest-stem:#3b3a30; --cv-forest-water:#03070c; --cv-forest-streambed:#2e2a23;   /* RUN 9 (slice 2): the mushrooms' stems, the stream's deep colour */
  /* NIGHT-6 slice 5: the wood — lichen, end grain (light and its rings), bracket fungi (and their pale rim), dead wood's grey */
  --cv-forest-lichen:#3f493c; --cv-forest-grain:#6b5236; --cv-forest-grain-dark:#33251a; --cv-forest-fungus:#5c4630; --cv-forest-fungus-rim:#8a7a60; --cv-forest-deadwood:#5e5950;
  --cv-forest-star:#cfd9ff; --cv-forest-leafglow:#030604;
  --cv-forest-foxfire:#34d39a; --cv-forest-bud:#18240f; --cv-forest-nightbloom:#d6e6ff;   /* NIGHT-6 slice 9: foxfire's glow, the night flowers' bud and bloom */   /* NIGHT-6 slice 7: the stars in the canopy's gap; the leaves' faint moonlit glow */
  --cv-forest-grass:#22361a; --cv-forest-grass-dry:#38381c; --cv-forest-leaf-fall:#2c2012; --cv-forest-moth:#d9d2bd; --cv-forest-sil:#020403;   /* slice 3 */
  --cv-forest-dusk-fog:#110c1c; --cv-forest-dusk-sky:#3a2c55; --cv-forest-dusk-under:#070508; --cv-forest-dusk-moon:#c79a78;
  --cv-forest-dusk-moonhalo:#e2b78f; --cv-forest-dusk-haze:#9c88b4; --cv-forest-dusk-cloud:#2a2238;
  --cv-forest-dusk-shroom:#ffb070; --cv-forest-dusk-bloom:#ff8fc8;
  --cv-forest-misty-fog:#111920; --cv-forest-misty-sky:#2c3a48; --cv-forest-misty-under:#06080a; --cv-forest-misty-moon:#8fa4bf;
  --cv-forest-misty-moonhalo:#b8c8dc; --cv-forest-misty-haze:#aebdcc; --cv-forest-misty-cloud:#202b36;
  --cv-forest-misty-shroom:#a8e8ff; --cv-forest-misty-bloom:#e8f2ff;
  --cv-forest-warm:#ffb45a; --cv-forest-cold:#e6fff2;   /* RUN 7 (C5): Warmth / Brightness — the light's two ends (the lime between) */
  --cv-forest-core:#f6ffd0; --cv-forest-halo:#9be04a; --cv-forest-trail:#c8ff70; --cv-forest-fx:#9fd0ff;
  --z-night:18;
}
/* RUN 7 (C11): the Night face's fonts, self-hosted from our own origin (CSP default-src 'self'), register entries font-andika / font-literata
   (LIC1). Andika ships UNMODIFIED (its licence reserves the name); Literata as its latin + cyrillic subsets (no reserved name). */
@font-face{ font-family:"Andika"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/andika/Andika-Regular.woff2) format("woff2"); }
@font-face{ font-family:"Andika"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/andika/Andika-Bold.woff2) format("woff2"); }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:300; font-display:swap; src:url(fonts/literata/literata-300-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:300; font-display:swap; src:url(fonts/literata/literata-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    /* C0 (RUN 6): the Night profile (profile.js, body.night) — one role, nothing recorded: the role, split, recording, backing, clip and Loop
     controls are not offered (!important: applySplit writes inline display) */
  body.night #instrBtn, body.night #instrBtnL, body.night #instrBtnR, body.night #splitBtn, body.night #recBtn, body.night #jamBtn,
  body.night #clipBtn, body.night #audioBtn, body.night #loopPanelBtn, body.night #loopTransport{ display:none !important; }
  body.bg-room #canvas{ mix-blend-mode:screen; }   /* RUN 8: the opaque 2D canvas lets the room show through (its black adds nothing) */
/* RUN 7 (C6 + C11): THE NIGHT SHELL in the user's design — Moonglass: round buttons in a frosted-glass capsule (portrait: at the bottom;
   landscape: on the right), the ⓘ card, the emblem and the wordmark. Glass blurs the scene behind it; its plain fallback (body.night-plain:
   the Dark background, the minimal scene level, low power) and browsers without backdrop-filter get the same readability with no blur. */
#nightShell{ position:fixed; inset:0; z-index:var(--z-night); pointer-events:none; font-family:var(--night-font-body); color:var(--night-ink);
  -webkit-user-select:none; user-select:none; }
#nightShell[hidden]{ display:none; }
#nightShell [hidden]{ display:none !important; }   /* NIGHT-7b: hidden always hides here (a class's display once kept the closed cards on screen) */
#nightShell button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.svgi{ display:block; width:100%; height:100%; overflow:visible; }
.night-glass{ background:var(--night-glass); -webkit-backdrop-filter:var(--night-blur); backdrop-filter:var(--night-blur); border:1px solid var(--night-hair); }
body.night-plain .night-glass{ background:var(--night-glass-plain); -webkit-backdrop-filter:none; backdrop-filter:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .night-glass{ background:var(--night-glass-plain); } }
.night-fade{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity var(--night-fade) var(--night-ease), visibility 0s linear var(--night-fade); }
#nightShell.show .night-fade{ opacity:1; visibility:visible; transition:opacity var(--night-fade) var(--night-ease), visibility 0s; }
#nightShell.show .night-ctl, #nightShell.show .night-ibtn{ pointer-events:auto; }
.night-idle{ position:absolute; top:12%; left:0; right:0; margin:0; text-align:center; color:var(--night-dim); font-size:var(--night-fs-body); letter-spacing:.04em; }
.night-ibtn{ position:absolute; top:max(var(--night-edge), env(safe-area-inset-top)); right:max(var(--night-edge), env(safe-area-inset-right));
  width:var(--night-ibtn); height:var(--night-ibtn); border-radius:var(--night-r-pill); display:flex; align-items:center; justify-content:center; }
.night-ibtn .svgi{ width:52%; height:52%; }
.night-ibtn.night-fsbtn{ right:auto; left:max(var(--night-edge), env(safe-area-inset-left)); }   /* NIGHT-7c: full screen, the other top corner */
.night-ctl{ position:absolute; left:var(--night-edge); right:var(--night-edge); bottom:max(var(--night-edge), env(safe-area-inset-bottom)); max-width:520px;
  margin:0 auto; padding:var(--night-pad); border-radius:var(--night-r-capsule); display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--night-gap) var(--night-gap-sm); box-shadow:var(--night-shadow); }
/* NIGHT-3 stage 4: 3 + 3 places (user, 2026-11-03), in both orientations; with five buttons the top row's two sit in the middle.
   NIGHT-3 stage 5 part 2: the Room button is first; while it is hidden (one room) Music starts the top row in the middle, as before */
.night-ctl > .night-rb{ grid-column:span 2; }
.night-ctl > .night-rb[hidden]{ display:none !important; }
.night-ctl > #nightRoom[hidden] + .night-rb{ grid-column:2 / span 2; }
/* NIGHT-3 stage 5 part 2: the room's picture is veiled while a room opens and fades in once it has drawn (host.js); the room's name */
#scene{ transition:opacity var(--night-scene-in) var(--night-ease); }
#scene.veil{ opacity:0; transition:opacity var(--night-scene-out) var(--night-ease); }
.night-roomname{ position:absolute; top:42%; left:0; right:0; margin:0; text-align:center; pointer-events:none; color:var(--night-ink); font-family:var(--night-font-display);
  font-weight:var(--night-fw-light); font-size:var(--night-fs-title); letter-spacing:var(--night-track-wide); opacity:0; transition:opacity var(--night-name-fade) var(--night-ease); }
.night-roomname.on{ opacity:1; }
.night-rb{ display:flex !important; flex-direction:column; align-items:center; gap:var(--night-gap-sm); min-width:0; }
.night-circ{ width:var(--night-btn); height:var(--night-btn); border-radius:var(--night-r-pill); display:flex; align-items:center; justify-content:center;
  background:var(--night-fill); border:1px solid var(--night-hair); transition:border-color var(--night-fade), box-shadow var(--night-fade), color var(--night-fade); }
.night-circ .svgi{ width:46%; height:46%; }
.night-rb:focus-visible .night-circ, .night-rb.glint .night-circ{ border-color:var(--night-accent); box-shadow:var(--night-ring); color:var(--night-accent); }
.night-lab{ font-size:var(--night-fs-label); color:var(--night-dim); line-height:var(--night-lh-tight); }
.night-val{ font-size:var(--night-fs-value); line-height:var(--night-lh-tight); text-align:center; max-width:100%; overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
.night-vol{ grid-column:1/-1; display:flex; align-items:center; gap:var(--night-gap); padding:0 var(--night-gap-sm); }
.night-vol[hidden]{ display:none; }
.night-vol input{ flex:1; min-width:0; accent-color:var(--night-accent); }
.night-vol-in{ position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.night-vico{ display:flex; width:var(--night-icon); height:var(--night-icon); color:var(--night-dim); }
.night-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px, calc(100vw - 28px)); max-height:calc(100vh - 28px);
  overflow:auto; border-radius:var(--night-r-card); padding:var(--night-pad-lg); pointer-events:auto; box-shadow:var(--night-shadow);
  -webkit-backdrop-filter:var(--night-blur-card); backdrop-filter:var(--night-blur-card); }
body.night-plain .night-card{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.night-card[hidden]{ display:none; }
.night-card p{ margin:var(--night-gap) 0; color:var(--night-dim); line-height:var(--night-lh); font-size:var(--night-fs-body); }
.night-ihead{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--night-gap); margin:0 0 var(--night-gap-sm); }
.night-ibtn-in{ position:static; flex:none; }
.night-mark{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--night-gap-sm); }
.emblem{ display:block; width:110px; height:22px; overflow:visible; }
.emblem-dot{ fill:var(--night-emblem-dot); }
.emblem-glow{ fill:var(--night-accent); filter:var(--night-glow-f); }
.night-word{ font-family:var(--night-font-display); font-weight:var(--night-fw-light); font-size:var(--night-fs-mark); letter-spacing:var(--night-track-wide);
  line-height:var(--night-lh-tight); color:var(--night-ink); }
.night-word-dot{ color:var(--night-dim); }
.night-sub{ font-size:var(--night-fs-small); letter-spacing:.5em; color:var(--night-accent); }
.night-tg{ display:grid !important; grid-template-columns:var(--night-icon) 1fr auto; gap:var(--night-gap); align-items:center; width:100%; text-align:left;
  padding:var(--night-gap) 0 !important; border-top:1px solid var(--night-hair) !important; font-size:var(--night-fs-value); }
.night-tsw{ width:2.4em; height:1.3em; border-radius:var(--night-r-pill); border:1px solid var(--night-hair); position:relative; display:block; }
.night-tsw span{ position:absolute; top:.17em; left:.17em; width:.9em; height:.9em; border-radius:var(--night-r-pill); background:var(--night-dim);
  transition:transform var(--night-fade) var(--night-ease), background var(--night-fade); }
.night-tg.on .night-tsw{ border-color:var(--night-accent); }
.night-tg.on .night-tsw span{ transform:translateX(1.1em); background:var(--night-accent); }
.night-lnk{ display:block; margin:var(--night-gap) 0 0 !important; color:var(--night-accent) !important; font-size:var(--night-fs-value); text-align:left; }
.night-lnk[hidden]{ display:none; }
.night-dev{ color:var(--night-dim) !important; font-size:var(--night-fs-small); }
.night-measure{ margin:var(--night-gap-sm) 0 0; white-space:pre-wrap; font-size:var(--night-fs-small); color:var(--night-dim); user-select:text; -webkit-user-select:text; }
.night-measure[hidden]{ display:none; }
.night-veil{ position:absolute; inset:0; background:var(--c-black); opacity:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
#nightShell.asleep .night-veil{ pointer-events:auto; }
.night-veil-msg{ color:var(--night-dim); font-size:var(--night-fs-body); }
.night-veil-msg[hidden]{ display:none; }
/* RUN 8 (slice 3): the bars while the hands play — slim Moonglass tracks: the forest's depth on the playing hand's side, the three effects on the
   effects hand's side (apps/night/shell.js: the value, .left / .right from where the hand is, .act on the finger in use, .on while that hand is seen) */
.night-bars{ position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:var(--night-bar-gap); opacity:0; pointer-events:none;
  transition:opacity var(--night-slow) var(--night-ease); }
.night-bars.on{ opacity:1; transition:opacity var(--night-fade) var(--night-ease); }
.night-bars.left{ left:max(var(--night-edge), env(safe-area-inset-left)); }
.night-bars.right{ right:max(var(--night-edge), env(safe-area-inset-right)); }
.night-bar{ display:flex; flex-direction:column; align-items:center; gap:var(--night-gap-sm); color:var(--night-dim); transition:color var(--night-fade); }
.night-bar-ico{ display:flex; width:var(--night-bar-ico); height:var(--night-bar-ico); }
.night-bar-track{ position:relative; display:block; width:var(--night-bar-w); height:var(--night-bar-h); border-radius:var(--night-r-pill); background:var(--night-fill);
  border:1px solid var(--night-hair); transition:border-color var(--night-fade), box-shadow var(--night-fade); }
.night-bar-fill{ position:absolute; left:0; right:0; bottom:0; height:0; border-radius:var(--night-r-pill); background:var(--night-accent); }
.night-bar-mid{ position:absolute; left:calc(-1 * var(--night-gap-sm)); right:calc(-1 * var(--night-gap-sm)); top:50%; height:1px; background:var(--night-hair); }
.night-bar-two.warm .night-bar-fill{ background:var(--night-warm); }
.night-bar-two.cold .night-bar-fill{ background:var(--night-cold); }
.night-bar-lab{ font-size:var(--night-fs-small); line-height:var(--night-lh-tight); text-align:center; max-width:5.5em; }
.night-bar.act{ color:var(--night-accent); }
.night-bar.act .night-bar-track{ border-color:var(--night-accent); box-shadow:var(--night-glow); }
.night-hint{ position:absolute; left:50%; top:12%; transform:translateX(-50%); width:min(560px, calc(100vw - 4 * var(--night-edge))); margin:0;
  padding:var(--night-gap) var(--night-pad); border-radius:var(--night-r-card); text-align:center; color:var(--night-ink); font-size:var(--night-fs-value); line-height:var(--night-lh); }
.night-hint[hidden]{ display:none; }
/* one message at a time: while the low-light message shows (latmeter.js sets body.dark-on) the Night lines at the top give way */
body.dark-on .night-idle, body.dark-on .night-hint{ visibility:hidden; }
/* NIGHT-2: THE SETTINGS CARD — sections Hand and View, two named sliders without numbers, segments, and the about lines at the bottom */
.night-set-title{ font-family:var(--night-font-display); font-weight:var(--night-fw-light); font-size:calc(var(--night-fs-body) * 1.5); line-height:var(--night-lh-tight); color:var(--night-ink); }
.night-sec{ min-width:0; }
.night-sec-h{ margin:var(--night-pad) 0 var(--night-gap-sm); font-size:var(--night-fs-small); font-weight:var(--night-fw-regular); letter-spacing:.08em; text-transform:uppercase; color:var(--night-dim); }
.night-calrow{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--night-gap); font-size:var(--night-fs-value); }
.night-calrow .night-lnk{ margin:0 !important; flex:none; }
.night-card p.night-note{ font-size:var(--night-fs-small); margin:var(--night-gap-sm) 0; }
.night-note[hidden]{ display:none; }
.night-sl{ margin:var(--night-gap) 0 var(--night-pad); }
.night-sl-lab{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--night-gap); font-size:var(--night-fs-value); margin-top:var(--night-gap); }
.night-sl-lab .night-lnk{ margin:0 !important; font-size:var(--night-fs-small); text-align:right; }
.night-sl input{ display:block; width:100%; margin:var(--night-gap-sm) 0 0; accent-color:var(--night-accent); }
.night-sl-ends{ display:flex; justify-content:space-between; font-size:var(--night-fs-small); color:var(--night-dim); margin-top:var(--night-gap-sm); }
.night-sl.off input, .night-sl.off .night-sl-ends{ opacity:.45; }
.night-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:var(--night-gap-sm) 0 var(--night-gap); border:1px solid var(--night-hair); border-radius:var(--night-r-pill); overflow:hidden; }
.night-seg-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#nightShell .night-seg button{ padding:var(--night-gap-sm); text-align:center; font-size:var(--night-fs-value); min-height:40px; }
#nightShell .night-seg button.on{ background:var(--night-accent); color:var(--night-accent-ink); }
#nightShell .night-seg button[hidden]{ display:none; }
.night-set .night-vol{ padding:0; margin:0 0 var(--night-gap); }
.night-set .night-vol .night-lab{ flex:none; min-width:9em; }   /* NIGHT-3 stage 5: the Music section's two sliders start at one line */
.night-btns{ display:flex; flex-wrap:wrap; gap:var(--night-gap); margin-top:var(--night-pad); }
#nightShell .night-btn{ flex:1 1 auto; white-space:nowrap; min-height:48px; padding:0 var(--night-gap); border-radius:var(--night-r-pill); border:1px solid var(--night-hair); background:var(--night-fill); font-size:var(--night-fs-body); }
#nightShell .night-btn.go{ background:var(--night-accent); color:var(--night-accent-ink); border:0; font-weight:var(--night-fw-bold); }
.night-about{ margin-top:var(--night-pad); padding-top:var(--night-gap); border-top:1px solid var(--night-hair); }
.night-about .night-mark{ margin-bottom:var(--night-gap-sm); }
/* NIGHT-2: THE HAND'S CALIBRATION — the camera picture on its own canvas over the scene, a dashed frame, one line with the progress at the bottom, Cancel at the top;
   one card for the offer, the result and a failure. While it shows, the low-light message gives way (the step's own line and «low-rate» speak for it). */
.night-cal{ position:absolute; inset:0; pointer-events:auto; }
.night-cal[hidden]{ display:none; }
.night-cal-pic{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.night-cal-frame{ position:absolute; inset:7%; border:1.5px dashed var(--night-hair); border-radius:var(--night-r-card); pointer-events:none; }
.night-cal-frame.warn{ border-color:var(--night-warm); }
#nightShell .night-cal-cancel{ position:absolute; top:max(var(--night-edge), env(safe-area-inset-top)); right:max(var(--night-edge), env(safe-area-inset-right)); padding:var(--night-gap-sm) var(--night-pad);
  border-radius:var(--night-r-pill); font-size:var(--night-fs-value); background:var(--night-glass); border:1px solid var(--night-hair); }
body.night-plain #nightShell .night-cal-cancel{ background:var(--night-glass-plain); }
.night-cal-strip{ position:absolute; left:var(--night-edge); right:var(--night-edge); bottom:max(var(--night-edge), env(safe-area-inset-bottom)); max-width:560px; margin:0 auto;
  padding:var(--night-pad); border-radius:var(--night-r-card); box-shadow:var(--night-shadow); }
.night-cal-say{ margin:0; font-size:var(--night-fs-body); line-height:var(--night-lh); color:var(--night-ink); }
.night-cal-bar{ height:6px; margin-top:var(--night-gap); border-radius:var(--night-r-pill); background:var(--night-fill); border:1px solid var(--night-hair); overflow:hidden; }
.night-cal-bar i{ display:block; height:100%; width:0; background:var(--night-accent); transition:width 120ms linear; }
.night-cal [hidden]{ display:none !important; }
.night-card p.night-cal-title{ margin:0 0 var(--night-gap); font-family:var(--night-font-display); font-weight:var(--night-fw-light); font-size:calc(var(--night-fs-body) * 1.5); color:var(--night-ink); }
.night-card p.night-cal-text{ margin:0; color:var(--night-ink); }
.night-card p.night-cal-note{ margin:var(--night-gap) 0 0; font-size:var(--night-fs-small); white-space:pre-line; }
body.night-cal #darkHint{ display:none !important; }
@media (orientation:landscape){
  .night-ctl{ left:auto; right:max(var(--night-edge), env(safe-area-inset-right)); bottom:auto; top:50%; transform:translateY(-50%); width:min(300px, 36vw);
    margin:0; }
  .night-ibtn{ right:auto; left:max(var(--night-edge), env(safe-area-inset-left)); }
  .night-ibtn.night-fsbtn{ left:auto; right:max(var(--night-edge), env(safe-area-inset-right)); }
  .night-idle{ top:8%; right:calc(36vw + 28px); }
  .night-hint{ top:auto; bottom:max(var(--night-edge), env(safe-area-inset-bottom)); }   /* RUN 8: below the bars (a short screen) */
  .night-bars{ --night-bar-h:min(24vh, 200px); }
  .night-card{ width:min(760px, calc(100vw - 28px)); display:grid; grid-template-columns:1fr 1fr; column-gap:var(--night-pad-lg); align-content:start; }
  .night-card .night-ihead{ grid-column:1/-1; }
  .night-card p{ margin:var(--night-gap-sm) 0; }
  .night-about{ grid-column:1/-1; }
  .night-set > .night-sec:first-of-type{ grid-row:span 2; }   /* NIGHT-3 stage 5: Hand on the left, Music and View stacked on the right */
  .night-sec-h{ margin-top:var(--night-gap); }
  .night-card.night-cal-card{ display:block; width:min(440px, calc(100vw - 28px)); }
  .night-cal-strip{ max-width:60vw; padding:var(--night-gap) var(--night-pad); }
  /* NIGHT-2: the low-light message in the free area left of the capsule, where the idle line sits (its OK no longer lands on «Sound») */
  body.night #darkHint{ left:0; right:calc(36vw + 28px); width:max-content; max-width:calc(64vw - 28px - 2 * var(--night-edge)); margin:0 auto; transform:none; }
}
/* In Night the Full app's top bar and its menus stay out of the way (the dev edition reaches Full through ⓘ). */
body.night #bar, body.night #status{ display:none !important; }   /* the technical status line (scale · tuning · steps) is Full's */
/* RUN 7 (C7): the Night start — the start card restyled in a Night boot (Moonglass glass card on the night); Full's start untouched. */
.night-only{ display:none !important; }
body.night-boot .night-only{ display:revert !important; }
body.night-boot #start{ background:var(--night-bg); }
body.night-boot #start .startCard{ background:var(--night-glass-plain); border:1px solid var(--night-hair); border-radius:var(--night-r-card); box-shadow:var(--night-shadow);
  color:var(--night-ink); font-family:var(--night-font-body); }
body.night-boot #start .startCard > h1, body.night-boot #start .startTag, body.night-boot #start .startBtns, body.night-boot #fsBtnStart, body.night-boot #installBtn,
body.night-boot #installHint, body.night-boot #learnMsg, body.night-boot #start .startFoot > p:not(.startLang){ display:none !important; }
body.night-boot .night-start-head{ display:flex !important; flex-direction:column; align-items:center; gap:var(--night-gap-sm); margin:0 0 var(--night-gap); }
.night-start-head .emblem{ width:150px; height:30px; }
.night-start-head > [data-svg="emblem"]{ display:block; width:150px; height:30px; }   /* NIGHT-8b: its place kept before the drawing comes (no jump on the first paint) */
.night-steps{ list-style:none; margin:var(--night-gap) 0; padding:0; text-align:left; }
body.night-boot .night-steps{ display:flex !important; flex-direction:column; gap:var(--night-gap); }
.night-steps li{ display:grid; grid-template-columns:var(--night-icon) 1fr; gap:var(--night-gap); align-items:start; color:var(--night-dim); font-size:var(--night-fs-value); line-height:var(--night-lh); }
.night-steps .night-vico{ color:var(--night-accent); }
.night-begin{ width:100%; padding:var(--night-gap) var(--night-pad) !important; margin:var(--night-gap) 0 !important; border:0 !important; border-radius:var(--night-r-pill) !important;
  background:var(--night-accent) !important; color:var(--night-accent-ink) !important; font-family:var(--night-font-body); font-weight:var(--night-fw-bold); font-size:var(--night-fs-body); cursor:pointer; }
body.night-boot #start .startFoot{ border-top-color:var(--night-hair); color:var(--night-dim); }
body.night-boot #privacyNote summary{ color:var(--night-dim); }
body.night-boot #start .startLang [data-icon]{ display:none; }
body.night-boot #langSel{ background:var(--night-fill); color:var(--night-ink); border:1px solid var(--night-hair); }

/* NIGHT-7: the start screen's privacy line; the first cards (their pictures: our own line drawings, apps/night/cards.js) */
.night-privacy-line{ margin:var(--night-gap) 0 0; color:var(--night-dim); font-size:var(--night-fs-small); text-align:center; }
.night-card.night-cards{ display:block; width:min(460px, calc(100vw - 28px)); }
body.night-cards-open #nightFxHint{ display:none !important; }   /* the effects hand's hint waits while the cards show */
.night-card-pic{ display:flex; justify-content:center; margin:0 0 var(--night-gap); color:var(--night-ink); }
.night-pic{ width:100%; max-width:340px; height:auto; overflow:visible; }
.night-cards-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--night-gap); margin-top:var(--night-gap); }
.night-cards-dots{ display:flex; gap:var(--night-gap-sm); }
.night-cards-dot{ width:var(--night-gap-sm); height:var(--night-gap-sm); border-radius:var(--night-r-pill); background:var(--night-hair); }
.night-cards-dot.on{ background:var(--night-accent); }
.night-cards-step{ color:var(--night-dim); font-size:var(--night-fs-small); }
.np-palm{ fill:currentColor; opacity:.88; }
.np-limb{ fill:none; stroke:currentColor; stroke-linecap:round; opacity:.88; }
.np-glow{ fill:var(--night-accent); filter:var(--night-glow-f); }
.np-dot{ fill:var(--night-dim); }
.np-line{ fill:none; stroke:var(--night-dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.np-dash{ fill:none; stroke:var(--night-dim); stroke-width:2; stroke-dasharray:4 4; }
.np-hold{ fill:none; stroke:var(--night-accent); stroke-width:5; stroke-linecap:round; opacity:.7; }
.np-bar{ fill:var(--night-fill); stroke:var(--night-hair); }
.np-t1{ fill:var(--night-accent); } .np-t2{ fill:var(--night-warm); } .np-t3{ fill:var(--night-cold); }
.np-btn{ fill:var(--night-fill); stroke:var(--night-hair); stroke-width:1.5; }
.np-ico{ color:var(--night-ink); }
.np-wave{ fill:none; stroke:var(--night-accent); stroke-width:2; stroke-linecap:round; opacity:.7; } .np-faint{ opacity:.35; }