@import url('../../fonts/pixel-fonts.css');/* self-hosted, OFL (public/fonts/LICENSE-*) */
/* Поділ FM pixel UI kit (see pixel.mjs). One look for every control: bevelled keys with hard pixel shadows,
   notched corners, faders, flip cards, switches, LED presets, paper notes, pixel focus rings.
   Loaded after every other stylesheet (pixel.mjs keeps it last), so it restyles by class without touching logic.
   Recipes read custom properties; variants and states only change the properties.
   Fonts (Google Fonts, full Ukrainian Cyrillic incl. ґ є ї і, checked in headless Chromium):
     Tiny5          UI: labels, keys, headings. Crisp at 16/24/32 px.
     DotGothic16    reading text and the pixel fallback for ▶ ◂ ▸ ⏭ ↻ ♡ ⚙ ☾ ☂. Crisp at 16/32 px.
     Press Start 2P tiny caps: scales, kickers, LCD. Crisp at 8/16 px.
   Pixelify Sans was rejected: its ґ is drawn as a Y and д reads as a. Silkscreen and VT323 have no Cyrillic. */

:root{
 --u:2px;
 --px-ui:'Tiny5','DotGothic16',ui-monospace,monospace;
 --px-body:'DotGothic16','Tiny5',ui-monospace,monospace;
 --px-caps:'Press Start 2P','DotGothic16',ui-monospace,monospace;
 --px-hand:'DotGothic16','Tiny5',ui-monospace,monospace;
 /* palette: the room's night blue, lilac, rose, sea glass; lamp warm; paper; wood; bakelite */
 --px-edge:#0e0b08;--px-night:#261d16;--px-deep:#30261d;
 --px-bake:#46382c;--px-bake-hi:#7c6959;--px-bake-lo:#281f17;
 --px-key:#5f4d3e;--px-key-hi:#967e69;--px-key-lo:#362b21;
 --px-ink:#efe7d5;--px-muted:#cdc0b5;--px-accent:#a4cfc3;--px-warm:#f0c987;--px-rose:#e3a3b4;--px-lilac:#d8c0ab;
 --px-led-off:#2e3a33;--px-led:#b8f08a;--px-led-red:#ff7b7b;
 --px-paper:#efe5cf;--px-paper-hi:#fff8e8;--px-paper-lo:#c2ad8a;--px-paper-ink:#3c332c;--px-paper-muted:#5a5364;
 --px-wood:#6b4c3a;--px-wood-hi:#9a7457;--px-wood-lo:#3a271d;
 --px-metal:#b3c3bf;--px-metal-hi:#e6eee8;--px-metal-lo:#6a7f7c;--px-metal-ink:#2e3020;
 --px-focus:#ffd36b;
 --px-drop:#0b0805b0;
 /* motion tokens (docs/MOTION.md, motion.mjs UI_MS): one step = one world tick (67 ms, the 15 Hz clock).
    Pixel UI moves in steps, never smooth slides or scales: pair each duration with its steps().
    Reduced motion (system or the in-game setting, body.reduced) sets the durations to 0s below. */
 --mo-tick:67ms;--mo-fast:133ms;--mo-base:200ms;--mo-slow:333ms;
 --mo-steps-fast:steps(2);--mo-steps-base:steps(3);--mo-steps-slow:steps(5);
 --mo-ease:cubic-bezier(.2,.8,.3,1);/* the one smooth curve, for opacity only */
}
@media(prefers-reduced-motion:reduce){:root{--mo-tick:0s;--mo-fast:0s;--mo-base:0s;--mo-slow:0s}}
html body.reduced{--mo-tick:0s;--mo-fast:0s;--mo-base:0s;--mo-slow:0s}

/* ---------- base ---------- */
html body{font-family:var(--px-body);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;text-rendering:optimizeSpeed}
html body :where(button,input,select,textarea,summary,label,a,p,span,small,strong,b,em,li,dt,dd,time,h1,h2,h3,h4,figcaption,blockquote,div,section,article,nav,header,aside,output,option,legend){font-family:var(--px-ui)!important;letter-spacing:0!important;font-style:normal!important;font-weight:400!important}
/* reading text */
html body :where(dialog p,dialog dd,dialog li p,dialog blockquote,.ph-bubble p,.ph-note,.ph-empty,.object-hint,#object-copy,.object-response,#book-text,#book-aside,.live-note,.mx-note,.cz-mood,.cz-hint,.cz-credits,.cz-note,.book-quote blockquote,.book-bookmarks p,.window-latch span,.window-repair span){font-family:var(--px-body)!important;letter-spacing:-1px!important}
/* printed labels and symbols: UI face; arrows from DotGothic16 (Tiny5's ↓ reads as +) */
html body :where(.song-credit,.mx-status,.radio-hint){font-family:var(--px-ui)!important;letter-spacing:0!important}
html body :where(.setting b,.ph-setting b,.radio-footer a,.deck-download,#download-track,.top-actions .square,.close,.px-close,.ph-key,.cz-heart,.tape-heart,.ribbon){font-family:var(--px-body)!important;letter-spacing:0!important}
/* tiny printed caps */
html body :where(.px-caps,.object-kicker,.notebook-imprint,.book-place,.page-number,.key-caption,.receiver-brand>span,.mx-deck-brand span,.cz-row-title,.cz-meta,.cz-side,.cz-spine-label,.place-map-badge,.external-badge,.tvv-chan,.deck-brand>span,.book-colophon){font-family:var(--px-caps)!important;font-size:8px!important;line-height:2!important;text-transform:uppercase}
/* hand-lettered paper keeps its hand */
html body :where(.tvv-note,.tvv-note *,.px-hand){font-family:var(--px-hand)!important}
html body :where(.mx-tape,.mx-save){font-family:"Segoe Print","Chalkboard SE","Comic Sans MS","Bradley Hand",cursive!important}
html body :where(.cz-card.is-hand .cz-title,.cz-card.is-hand .cz-side,.cz-card.is-hand .cz-track,.cz-spine.is-hand .cz-spine-title){font-family:var(--hand,"Segoe Print","Bradley Hand",cursive)!important}
/* the tuning scale: Tiny5 at 8px, one screen pixel per font pixel */
html body :where(.frequency-marks span){font-family:'Tiny5',monospace!important;font-size:8px!important;line-height:1!important;text-transform:none}
html body :is(.mx-tape,.mx-save){font-weight:600!important}
html body :is(.tvv-note .tvv-what){font-weight:600!important}
html body :is(canvas,img,video,.pix){image-rendering:pixelated}
html body :is(.tvv-glass.hq canvas){image-rendering:auto}
/* no rounded web corners anywhere; reels and LEDs are pixel squares too */
html body *,html body *::before,html body *::after,html body dialog{border-radius:0!important}
html body{scrollbar-color:#967e69 #261d16}
html body *::-webkit-scrollbar{width:12px;height:12px}
html body *::-webkit-scrollbar-track{background:#261d16;box-shadow:inset 2px 0 0 #0e0b08}
html body *::-webkit-scrollbar-thumb{background:#735f4d;box-shadow:inset 2px 2px 0 #a9937f,inset -2px -2px 0 #3d3025,inset 0 0 0 4px #735f4d}
html body *::-webkit-scrollbar-corner{background:#261d16}
/* focus: a two-tone pixel outline that reads on dark and on paper */
html body :is(button,a,input,select,summary,textarea,[tabindex],canvas):focus-visible{outline:2px solid var(--px-focus)!important;outline-offset:2px!important;box-shadow:var(--px-focus-ring,0 0 0 0 transparent)}
html body .hotspot:focus-visible{outline:2px dashed var(--px-focus)!important;outline-offset:2px!important;background:transparent!important}
::selection{background:#967e69;color:#fff8e8}
@keyframes px-in{from{transform:translateY(8px)}to{transform:none}}
@keyframes px-fold{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes px-blink{50%{opacity:.25}}

/* ---------- KEY: every button in the game's panels ---------- */
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) :is(button,a.primary,a.px-key,.radio-footer a,.deck-download,a.ph-wide):not(:is(.hotspot,.place-spot,.place-mark,.cz-spine,.cz-track,.cz-heart,.tape-play,.tape-heart,.ribbon,.mx-ctl,.phone-hud,.phone-peek,.ph-app,.ph-np,.ph-station,.live-station,.ph-thread-row,.setting,.ph-setting,.inventory-item,.ph-toggle,.mx-reset,.px-plain,.book-bookmarks button,.close,.px-close,.px-preset,.px-row,.px-switch)){
 appearance:none!important;cursor:pointer;
 background:var(--f,var(--px-key))!important;color:var(--ink,var(--px-ink))!important;border:0!important;
 box-shadow:inset var(--u) var(--u) 0 var(--hi,var(--khi,var(--px-key-hi))),inset calc(-1*var(--u)) calc(-1*var(--u)) 0 var(--lo,var(--klo,var(--px-key-lo))),0 calc(-1*var(--u)) 0 var(--e,var(--px-edge)),calc(-1*var(--u)) 0 0 var(--e,var(--px-edge)),var(--u) 0 0 var(--e,var(--px-edge)),0 var(--d,4px) 0 var(--e,var(--px-edge))!important;
 transform:translateY(var(--dy,0px))!important;
 font-size:var(--fs,16px)!important;line-height:var(--lh,1.1)!important;text-shadow:none!important;text-decoration:none!important;
 min-height:40px;min-width:40px;padding:4px 12px;transition:none!important;filter:none;
}
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) :is(button,a):not(:disabled):hover{filter:brightness(1.12)}
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) :is(button[aria-pressed=true],button:active:not(:disabled),a.primary:active,.radio-footer a:active,button[aria-expanded=true]){--dy:2px;--d:2px;--hi:var(--klo,var(--px-key-lo));--lo:var(--khi,var(--px-key-hi))}
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) :is(button[aria-pressed=true],button[aria-expanded=true]){--f:var(--kon,var(--kf-on,#786351))}
/* every press reads as a press: link keys (← Кімната, ♫) sink like buttons, and a key that is already down still answers a tap with a short dip */
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) a:is(.px-key,.square):active{--dy:2px;--d:2px;--hi:var(--klo,var(--px-key-lo));--lo:var(--khi,var(--px-key-hi))}
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) :is(button[aria-pressed=true],button[aria-expanded=true],.px-preset.on):active:not(:disabled){filter:brightness(.85)}
html body :is(dialog,.phone,.topbar,[id=stage],.px-kit) button:disabled{opacity:.45;cursor:default;filter:none}
/* key variants */
.px-key--primary,html body :is(dialog,.phone,.px-kit) :is(.primary,.object-actions button:first-child,.ph-keys .ph-play,.ph-accent,.receiver-keys .play,.deck-keys .play,.mx-drawer){--f:var(--px-accent);--khi:#dff5ee;--klo:#5b8a80;--ink:#232614;--kon:#c6ecd9}
.px-key--warm,html body :is(dialog,.phone,.px-kit) :is(.ph-keys .ph-play){--f:var(--px-warm);--khi:#fff0c8;--klo:#a07a3f;--ink:#2a2014;--kon:#ffe0a0}
.px-key--metal,html body :is(dialog,.px-kit) :is(.receiver-keys .next,.deck-keys .next,.deck-keys .square,.mx-key,.mx-counter-foot #repeat-track,.tvv-panel button){--f:var(--px-metal);--khi:var(--px-metal-hi);--klo:var(--px-metal-lo);--ink:var(--px-metal-ink);--kon:#d4e9c0}
.px-key--paper,html body :is(dialog,.px-kit) :is(.book-nav button,.notebook .object-bottom button,.cz-actions button,#help .primary,#support .primary,#reset-dialog .primary,#postcard-preview .primary,.place-map-list button){--f:#e3d6b8;--khi:#fffaeb;--klo:#a8946f;--ink:var(--px-paper-ink);--e:#3a3028;--kon:#f3e0a8}
html body .place-map-list button[aria-current=true]{--f:var(--px-warm);--khi:#fff0c8;--klo:#a07a3f;--ink:#2a2014;--dy:2px;--d:2px}
html body .cz-actions .cz-play{--f:color-mix(in srgb,var(--c) 60%,#2b241e);--khi:color-mix(in srgb,var(--c) 40%,#fff);--klo:#2b241e;--ink:#fbf6ea}
html body :is(.mx-rec[aria-pressed=true]){--f:#e7b4b4;--kon:#e7b4b4}
html body :is(.object-bottom,.book-nav,.cz-actions,.window-latch,.window-weather,.deck-keys,.receiver-keys,.ph-keys,.place-map-list,.object-actions,.radio-footer,.mx-keys,.tvv-panel){row-gap:10px}

/* close ×: a small square key in the corner */
html body :is(dialog,.px-kit) :is(.close,.px-close){appearance:none;width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;padding:0!important;display:grid;place-items:center;
 background:var(--f,var(--px-key))!important;color:var(--ink,var(--px-ink))!important;border:0!important;font:var(--fs,16px)/1 var(--px-body)!important;
 box-shadow:inset 2px 2px 0 var(--khi,var(--px-key-hi)),inset -2px -2px 0 var(--klo,var(--px-key-lo)),0 -2px 0 var(--e,var(--px-edge)),-2px 0 0 var(--e,var(--px-edge)),2px 0 0 var(--e,var(--px-edge)),0 4px 0 var(--e,var(--px-edge))!important}
html body :is(dialog,.px-kit) :is(.close,.px-close):active{transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--klo,var(--px-key-lo)),inset -2px -2px 0 var(--khi,var(--px-key-hi)),0 -2px 0 var(--e,var(--px-edge)),-2px 0 0 var(--e,var(--px-edge)),2px 0 0 var(--e,var(--px-edge)),0 2px 0 var(--e,var(--px-edge))!important}
html body dialog>.close{top:12px!important;right:12px!important}

/* ---------- PANEL / DIALOG frames ---------- */
html body dialog{
 --pf:var(--px-bake);--rhi:var(--px-bake-hi);--rlo:var(--px-bake-lo);--bw:6px;
 background:var(--pf)!important;color:var(--pink,var(--px-ink))!important;
 border:var(--bw) solid!important;border-color:var(--rhi) var(--rlo) var(--rlo) var(--rhi)!important;
 box-shadow:0 -2px 0 var(--e,var(--px-edge)),-2px 0 0 var(--e,var(--px-edge)),2px 0 0 var(--e,var(--px-edge)),0 2px 0 var(--e,var(--px-edge)),inset 0 0 0 2px #0000004d,10px 10px 0 var(--px-drop)!important;
 animation:px-in var(--mo-base) var(--mo-steps-base)!important;scrollbar-gutter:stable;
}
html body dialog::backdrop{background:repeating-conic-gradient(#150e08e6 0 25%,#1e150db0 0 50%) 0 0/4px 4px!important;backdrop-filter:none!important}
html body dialog h2{font:32px/1.15 var(--px-ui)!important;color:var(--head,var(--px-ink))!important;margin:6px 52px 18px 0}
html body dialog h3{font-size:16px!important;color:var(--head,var(--px-ink))!important}
html body dialog p:not(.tvv-note p){font-size:16px!important;line-height:1.75!important;color:var(--pmuted,#e5dcd4)!important}
html body dialog :is(a:not([class])){color:var(--link,var(--px-accent))!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* paper dialogs: help, journal, support, reset, postcard */
html body :is(dialog#help,dialog#journal,dialog#support,dialog#reset-dialog,dialog#postcard-preview,dialog.px-paper){
 --pf:var(--px-paper);--rhi:var(--px-paper-hi);--rlo:var(--px-paper-lo);--e:#3a3028;
 --pink:var(--px-paper-ink);--head:#3c332c;--pmuted:#47413c;--link:#8a2e52;--px-focus:#b1365a;--f:#e3d6b8;--khi:#fffaeb;--klo:#a8946f;--ink:var(--px-paper-ink);--kon:#f3e0a8;
 scrollbar-color:#a8946f #e3d6b8}
html body :is(dialog#help,dialog#journal,dialog#support,dialog#reset-dialog,dialog#postcard-preview,dialog.px-paper) :is(dt,.moment strong,.note a){color:#8a2e52!important}
html body :is(dialog#help,dialog#journal,dialog#support,dialog#reset-dialog,dialog#postcard-preview,dialog.px-paper) :is(dd,.note time,.moments-title,.moment p,.note-empty,.find p){color:#4b4553!important}
html body dialog#help dl{font-size:16px!important;line-height:1.75}
html body dialog#help dt{font-size:16px!important;margin-top:18px}
html body dialog#help dd{font:16px/1.75 var(--px-body)!important}

/* ---------- ROWS: settings, phone settings, journal ---------- */
html body :is(.setting,.ph-setting,.px-row){appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 6px!important;border:0!important;
 background:transparent linear-gradient(90deg,var(--rule,#967e69) 0 4px,transparent 4px 8px) bottom left/8px 2px repeat-x!important;font-size:16px!important;color:inherit;text-decoration:none;text-align:left;box-shadow:none!important}
html body :is(.setting,.ph-setting,.px-row):hover{background-color:#ffffff0f!important;color:var(--px-warm)!important}
html body :is(.setting,.ph-setting,.px-row) b{margin-left:auto;font-size:16px!important;color:var(--px-accent)!important;white-space:nowrap}
/* a pixel toggle switch after the value, for rows that switch something */
html body :is(.setting,.ph-setting,.px-row,.px-switch)[aria-pressed]::after{content:'';flex:none;width:32px;height:16px;margin-left:4px;
 background:linear-gradient(var(--px-led-off) 0 0) 4px 4px/8px 8px no-repeat,#1e1711;box-shadow:inset 2px 2px 0 #000,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge)}
html body :is(.setting,.ph-setting,.px-row,.px-switch)[aria-pressed=true]::after{background:linear-gradient(var(--px-led) 0 0) 20px 4px/8px 8px no-repeat,#24401f}
html body #settings h2{margin-bottom:10px}
/* journal (lined paper) */
html body :is(.note,.moment,.find){border:0!important;padding:10px 0!important;background:linear-gradient(90deg,#a8946f 0 4px,transparent 4px 8px) bottom left/8px 2px repeat-x}
html body .note time{font-size:16px!important;color:#5a5364!important}
html body .note p,html body .moment p,html body .find p{font:16px/1.75 var(--px-body)!important;margin:2px 0 0!important}
html body .note a{border:0!important;font-size:16px!important}
html body .moment strong,html body .find strong{font-size:16px!important}
html body .moment.locked,html body .find.locked{opacity:1}
html body :is(.moment.locked,.find.locked) :is(strong,p){color:#5f5868!important}
html body .moment:not(.locked) strong::before,html body .find:not(.locked) strong::before{content:'';display:inline-block;width:8px;height:8px;margin:0 8px 2px 0;background:#6f9d53;box-shadow:0 0 0 2px #2f3d27}
html body .moments-title{font-size:16px!important;margin:24px 0 4px!important}
html body .notes{scrollbar-gutter:stable}
html body :is(#finds,.finds){list-style:none;margin:0;padding:0}

/* ---------- FADER: range inputs as physical sliders ---------- */
html body input[type=range]:not(.tuning-label input){appearance:none!important;-webkit-appearance:none!important;height:40px!important;min-height:40px;background:transparent repeating-linear-gradient(90deg,var(--tick,#ad9a8a) 0 2px,transparent 2px calc(10% - .2px)) 0 34px/calc(100% - 14px) 4px no-repeat!important;background-position:7px 34px!important;cursor:pointer;accent-color:auto;margin:0}
html body input[type=range]:not(.tuning-label input)::-webkit-slider-runnable-track{height:8px;background:#0e0b08;box-shadow:inset 0 2px 0 #000,0 2px 0 #ffffff26}
html body input[type=range]:not(.tuning-label input)::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:28px;margin-top:-10px;border:0;
 background:linear-gradient(90deg,#0000 6px,#4b423b 6px 10px,#0000 10px) 0 6px/16px 16px no-repeat,#ddd5bf;box-shadow:inset 2px 2px 0 #fffbe9,inset -2px -2px 0 #8f8772,0 0 0 2px #0e0b08,2px 4px 0 2px #0007}
html body input[type=range]:not(.tuning-label input)::-moz-range-track{height:8px;background:#0e0b08;box-shadow:inset 0 2px 0 #000,0 2px 0 #ffffff26;border:0}
html body input[type=range]:not(.tuning-label input)::-moz-range-thumb{width:16px;height:28px;border:0;border-radius:0;background:linear-gradient(90deg,#0000 6px,#4b423b 6px 10px,#0000 10px) 0 6px/16px 16px no-repeat,#ddd5bf;box-shadow:inset 2px 2px 0 #fffbe9,inset -2px -2px 0 #8f8772,0 0 0 2px #0e0b08}
html body input[type=range]:not(.tuning-label input):focus-visible{outline-offset:4px!important}
html body label:has(>input[type=range]):not(.tuning-label){font-size:16px!important}

/* ---------- METER: progress as a segmented LED bar ---------- */
html body progress{appearance:none;-webkit-appearance:none;height:12px!important;min-width:40px;border:0!important;background:#0e0b08!important;box-shadow:inset 2px 2px 0 #000,0 0 0 2px #5f4d3e}
html body progress::-webkit-progress-bar{background:#0e0b08}
html body progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--px-led) 0 6px,transparent 6px 8px)!important;box-shadow:none}
html body progress::-moz-progress-bar{background:repeating-linear-gradient(90deg,var(--px-led) 0 6px,transparent 6px 8px)}

/* ---------- FLIP CARD: select ---------- */
html body select:not([multiple]){appearance:none!important;-webkit-appearance:none!important;min-height:40px!important;padding:0 12px!important;border:0!important;
 background:linear-gradient(90deg,#0e0b08 0 4px,#0000 4px calc(100% - 4px),#0e0b08 calc(100% - 4px)) 0 calc(50% - 1px)/100% 2px no-repeat,linear-gradient(#423428 0 50%,#30261d 50%)!important;
 color:#f6ebcd!important;font:16px/1 var(--px-ui)!important;text-align:center;text-align-last:center;cursor:pointer;
 box-shadow:inset 2px 2px 0 #5f4d3e,inset -2px -2px 0 #1b140e,0 0 0 2px var(--px-edge),0 4px 0 2px var(--px-edge)!important}
html body select option{background:#30261d;color:#f6ebcd;font:16px var(--px-ui)}
.px-flip{display:inline-flex;align-items:stretch;gap:8px;min-width:0;flex:1}
.px-flip>select{flex:1;min-width:0}
html body .px-flip>.px-flip-btn{min-width:40px!important;padding:0!important;font-family:var(--px-body)!important}
.px-flip.px-flipping>select{animation:px-flip var(--mo-fast) var(--mo-steps-fast)}
@keyframes px-flip{50%{background-size:100% 2px,100% 60%;background-position:0 calc(50% - 1px),0 50%}}

/* ---------- TEXT input: a recessed well ---------- */
html body input:not([type=range],[type=checkbox],[type=radio],[type=button],[type=submit]),html body textarea{appearance:none;min-height:40px!important;padding:6px 10px!important;border:0!important;background:#1e1711!important;color:var(--px-ink)!important;font:16px var(--px-ui)!important;
 box-shadow:inset 2px 2px 0 #000,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge)!important}
html body input::placeholder{color:#ac9d90}

/* ---------- DISCLOSURE ---------- */
html body details>summary{list-style:none;cursor:pointer;min-height:40px;display:flex;align-items:center;gap:10px;font-size:16px!important}
html body details>summary::-webkit-details-marker{display:none}
html body details>summary::before{content:'\25B8';font:16px/1 var(--px-body);width:16px;flex:none}
html body details[open]>summary::before{content:'\25BE'}
/* folds open with a three-step wipe (closing is a cut, like dialogs) */
html body details[open]>:not(summary){animation:px-fold var(--mo-base) var(--mo-steps-base)}
html body details>summary span{float:none!important;margin-left:auto!important}

/* ---------- SWITCHES: tab groups as physical rocker switches with a lamp ---------- */
html body :is(.band-switch,.ph-tabs,.px-tabs){display:flex!important;gap:0!important;padding:4px!important;margin-bottom:10px;width:auto!important;border:0!important;background:#0e0b08!important;box-shadow:inset 2px 2px 0 #000,0 2px 0 #ffffff1a!important;overflow:visible!important}
html body :is(.band-switch,.ph-tabs,.px-tabs) button{flex:1;--d:4px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;text-transform:none!important;border-left:0!important}
html body :is(.band-switch,.ph-tabs,.px-tabs,.window-weather,.px-lamps) button::before{content:'';flex:none;width:8px;height:8px;background:var(--px-led-off);box-shadow:0 0 0 2px #0d110f}
html body :is(.band-switch,.ph-tabs,.px-tabs,.window-weather,.px-lamps) button[aria-pressed=true]::before{background:var(--px-led);box-shadow:0 0 0 2px #0d110f,0 0 0 4px #b8f08a33}
html body :is(.band-switch,.ph-tabs,.px-tabs) button[aria-pressed=true]{--f:#89705a;--dy:2px;--d:2px}

/* ---------- PRESETS: station rows as radio-button presets with an LED ---------- */
html body :is(.live-station,.ph-station,.px-preset){appearance:none;position:relative;display:flex!important;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px 6px 28px!important;text-align:left;border:0!important;
 background:var(--f,#3d3025)!important;color:var(--px-ink)!important;
 box-shadow:inset 2px 2px 0 #5f4d3e,inset -2px -2px 0 #261d16,0 0 0 2px var(--px-edge)!important;transform:none!important}
html body :is(.live-station,.ph-station,.px-preset)::before{content:'';position:absolute;left:10px;top:calc(50% - 4px);width:8px;height:8px;background:var(--px-led-off);box-shadow:0 0 0 2px #0d110f}
html body :is(.live-station,.ph-station,.px-preset):hover{--f:#4d3d2f}
html body :is(.live-station[aria-pressed=true],.ph-station.on,.px-preset[aria-pressed=true],.px-preset.on){--f:#594737;box-shadow:inset 2px 2px 0 #261d16,inset -2px -2px 0 #735f4d,0 0 0 2px var(--px-edge)!important}
html body :is(.live-station[aria-pressed=true],.ph-station.on,.px-preset[aria-pressed=true],.px-preset.on)::before{background:var(--px-led);box-shadow:0 0 0 2px #0d110f,0 0 0 4px #b8f08a33}
html body :is(.live-station,.ph-station,.px-preset) strong{font-size:16px!important;color:inherit!important}
html body :is(.live-station,.ph-station,.px-preset) :is(small,em){font-size:16px!important;color:var(--px-muted)!important;line-height:1.2}
html body :is(.live-station[aria-pressed=true],.ph-station.on) strong{color:var(--px-warm)!important}
html body .live-station.external{box-shadow:inset 2px 2px 0 #5f4d3e,inset -2px -2px 0 #261d16,0 0 0 2px #8a6d3b!important}
html body .ph-station{padding-left:12px!important}html body .ph-station::before{display:none}
html body .ph-station i{width:8px!important;height:8px!important;background:var(--dot,var(--px-led-off))!important;box-shadow:0 0 0 2px #0d110f}
html body .ph-station.on i{background:var(--px-led)!important;box-shadow:0 0 0 2px #0d110f,0 0 0 4px #b8f08a33}
html body .live-grid{gap:10px!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
html body .ph-list{gap:8px!important;padding:2px!important}

/* ---------- LED, LCD, badges ---------- */
.px-led{display:inline-block;width:8px;height:8px;background:var(--px-led-off);box-shadow:0 0 0 2px #0d110f;vertical-align:middle}
.px-led.on{background:var(--px-led);box-shadow:0 0 0 2px #0d110f,0 0 0 4px #b8f08a33}
.px-led.red{background:var(--px-led-red)}
.px-lcd{display:inline-block;padding:6px 8px;background:#141a16;color:#b7e4c0;font:8px/1.5 var(--px-caps);box-shadow:inset 2px 2px 0 #000,0 0 0 2px #5f4d3e}
html body .external-badge{border:0!important;padding:2px 6px!important;background:#f0c987;color:#2a2014!important;box-shadow:0 0 0 2px #0e0b08}

/* ---------- TOAST, tooltips: small paper notes ---------- */
html body #toast{background:var(--px-paper)!important;color:var(--px-paper-ink)!important;font:16px/1.6 var(--px-body)!important;padding:14px 18px 12px!important;border:0!important;
 box-shadow:0 -2px 0 #3a3028,-2px 0 0 #3a3028,2px 0 0 #3a3028,0 2px 0 #3a3028,6px 6px 0 var(--px-drop)!important;transform:translate(-50%,8px) rotate(-1deg)!important;transition:opacity var(--mo-base) var(--mo-steps-base),transform var(--mo-base) var(--mo-steps-base)!important}
html body #toast.show{transform:translate(-50%,0) rotate(-1deg)!important}
html body #toast::before{content:'';position:absolute;top:-8px;left:calc(50% - 28px);width:56px;height:14px;background:#e6d7a7cc;box-shadow:inset 0 -2px 0 #0000001a}
html body :is(#hover-label,#bubble,#arrange-hint){font:16px/1.3 var(--px-ui)!important;background:#30261d!important;color:var(--px-ink)!important;border:0!important;padding:6px 10px!important;
 box-shadow:inset 2px 2px 0 #5f4d3e,0 -2px 0 var(--px-edge),-2px 0 0 var(--px-edge),2px 0 0 var(--px-edge),0 2px 0 var(--px-edge),4px 4px 0 var(--px-drop)!important;backdrop-filter:none!important}
html body #bubble{background:var(--px-paper)!important;color:var(--px-paper-ink)!important;box-shadow:0 -2px 0 #3a3028,-2px 0 0 #3a3028,2px 0 0 #3a3028,0 2px 0 #3a3028,4px 4px 0 var(--px-drop)!important}
html body .phone-peek{font:16px/1.5 var(--px-body)!important;background:var(--px-paper)!important;color:var(--px-paper-ink)!important;box-shadow:0 -2px 0 #3a3028,-2px 0 0 #3a3028,2px 0 0 #3a3028,0 2px 0 #3a3028,4px 4px 0 var(--px-drop)!important;min-height:40px!important}

/* ---------- TOP BAR ---------- */
html body .topbar h1{font-size:24px!important;line-height:1!important;color:var(--px-ink)}
html body .identity img{image-rendering:pixelated;width:32px;height:32px}
html body .identity .city-name{font-size:16px!important;color:var(--px-muted)!important}
html body .top-actions{gap:14px!important}
html body .top-actions .square{width:40px;min-width:40px!important;padding:0!important;--fs:32px;--lh:1}
html body .identity .alert-status{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:16px!important;padding:2px 10px!important;border:0!important;background:#261d16!important;color:var(--px-muted)!important;box-shadow:inset 2px 2px 0 #000,0 0 0 2px #5f4d3e}
html body .identity .alert-status::before{content:'';width:8px;height:8px;flex:none;background:#867a6f;box-shadow:0 0 0 2px #0e0b08}
html body .identity .alert-status[data-kind=quiet]{color:#cfe3c1!important}
html body .identity .alert-status[data-kind=quiet]::before{background:var(--px-led)}
html body .identity .alert-status[data-kind=alert]{color:#ffd1d6!important;background:#3a1d26!important;box-shadow:inset 2px 2px 0 #000,0 0 0 2px #b45a63}
html body .identity .alert-status[data-kind=alert]::before{background:var(--px-led-red);animation:px-blink 1s steps(1) infinite}
html body .identity .alert-status:hover{color:var(--px-ink)!important}

/* ---------- STAGE: the room's frame ---------- */
html body #stage{box-shadow:0 -4px 0 var(--px-edge),-4px 0 0 var(--px-edge),4px 0 0 var(--px-edge),0 4px 0 var(--px-edge),12px 12px 0 #0b080580!important}
html body #stage::after{border:0!important;box-shadow:inset 2px 2px 0 #7c695980,inset -2px -2px 0 #0e0b0880!important}
@supports (width:round(down,1000px,480px)){@media(min-width:1024px) and (min-height:760px){html body .game-wrap{width:max(960px,round(down,min(calc(100% - 48px),1440px,calc((100dvh - 108px) * 1.5)),480px))!important}}}
html body .ph-body{font-family:var(--px-ui)}

/* ---------- RECEIVER (radio close-up): teal bakelite with wooden cheeks ---------- */
html body dialog.receiver{--pf:linear-gradient(90deg,var(--px-wood) 0 12px,#4d513a 12px calc(100% - 12px),var(--px-wood) calc(100% - 12px));--rhi:#86a3a0;--rlo:#2a2d1e;--bw:6px;--pink:#e3ece6;--head:#e8f0e6;--pmuted:#c9d7cf;padding-bottom:26px!important}
html body .receiver-handle{height:16px!important;width:40%!important;border:0!important;opacity:1!important;background:linear-gradient(#0000 0 0);box-shadow:inset 0 4px 0 #86a3a0,inset 4px 0 0 #86a3a0,inset -4px 0 0 #86a3a0,0 -2px 0 #2a2d1e!important}
html body .receiver-brand h2{font-size:32px!important;margin:0!important}
html body .receiver-face{border:0!important;background:#323526!important;box-shadow:inset 4px 4px 0 #1f1812,inset -2px -2px 0 #4f6c6b,0 0 0 2px #17120d!important;gap:20px!important}
html body .speaker-grille{border:0!important;background:linear-gradient(90deg,#0000 2px,#6a807e 2px) 0 0/4px 4px,linear-gradient(#0000 2px,#6a807e 2px) 0 0/4px 4px,#1e1711!important;box-shadow:inset 0 0 0 4px #353827,0 0 0 2px #17120d!important}
html body .speaker-grille::after{display:none}
html body :is(.frequency-glass,.field-glass){border:0!important;background:#a6bdae!important;color:#2f3222;box-shadow:inset 4px 4px 0 #6f8a80,inset -2px -2px 0 #d3e2d4,0 0 0 4px #2c2f1e!important}
html body .receiver.band-live .frequency-glass{background:#c9bc9c!important}
html body :is(.frequency-glass,.field-glass) :is(#track-title,#field-now,strong){font:16px/1.3 var(--px-ui)!important;color:#242718!important}
html body :is(.frequency-glass,.field-glass) :is(#music-label,#track-line,#field-label,#field-line){font-size:16px!important;line-height:1.3!important;color:#2a4644!important}
html body :is(.receiver,.field-radio) .frequency-marks span{color:#2f4a49!important}
html body :is(.receiver,.field-radio) .frequency-marks span.on{color:#8e2f47!important}
html body :is(.receiver,.field-radio) .frequency-marks span::after{width:2px!important}
html body .receiver-led{width:8px!important;height:8px!important;box-shadow:0 0 0 2px #17120d!important}
html body .is-on .receiver-led{background:var(--px-led)!important;box-shadow:0 0 0 2px #17120d,0 0 0 4px #b8f08a33!important}
html body .receiver.band-live.live-silent .receiver-led{background:#e29a5f!important}
html body .receiver-keys{gap:12px!important;flex-wrap:wrap}
html body .receiver-keys :is(.play,.next,.seek){min-width:48px!important;height:40px!important;font-family:var(--px-body)!important}
html body .juice-needle{width:4px!important;background:#9a2f4a!important;box-shadow:0 0 0 2px #fff4!important}
html body :is(.receiver,.px-kit) .now-playing{border-top:0!important;background:linear-gradient(90deg,#86a3a080 0 4px,transparent 4px 8px) top left/8px 2px repeat-x!important;font-size:16px!important;gap:12px}
html body .now-playing :is(#song-section,#song-time){font-size:16px!important}
html body #repeat-track{min-width:40px!important;width:auto!important;padding:0 10px!important}
html body :is(.song-credit,.has-mixer .song-credit){font-size:16px!important;line-height:1.5!important}
html body .has-mixer .song-credit{padding:6px 12px!important;border:0!important;background:var(--px-paper)!important;color:var(--px-paper-ink)!important;box-shadow:0 0 0 2px #3a3028,4px 4px 0 #18120c!important}
html body .has-mixer .song-credit a{color:#8a2e52!important}
html body .has-mixer .archive-credit{background:none!important;box-shadow:none!important;color:#c9d7cf!important;padding:0!important}
html body .radio-sliders label,html body .radio-footer label{font-size:16px!important;color:#d6e2da!important}
html body .radio-footer{border-top:0!important;background:linear-gradient(90deg,#86a3a080 0 4px,transparent 4px 8px) top left/8px 2px repeat-x!important;flex-wrap:wrap}
html body .download-status,html body .mix-save{font-size:16px!important}
html body .mix-export{padding:4px 12px!important;margin-top:8px!important}
html body :is(.cassette-compartment,.live-panel,.deck-shelf){border:0!important;background:#3d3229!important;box-shadow:inset 4px 4px 0 #281f17,inset -2px -2px 0 #4f6c6b,0 0 0 2px #17120d!important;padding:10px 14px 14px!important}
html body .cassette-compartment summary,html body .cassette-compartment h3,html body .live-heading{font-size:16px!important;color:#e3ece6!important}
html body .live-heading span,html body .live-search summary span,html body .cassette-compartment summary span{font:8px/2 var(--px-caps)!important;color:#b9cbc3!important}
html body .live-note{font-size:16px!important;line-height:1.6!important;color:#c9d7cf!important}
html body .live-search-form{align-items:flex-end;gap:10px!important}
html body .live-search-form label{font-size:16px!important;gap:6px!important}
html body .cloud-frame{box-shadow:0 0 0 2px #0e0b08}

/* mixer strip & deck: already pixel instruments; aligned frames */
html body :is(.mx-strip,.mx-deck,.mx-faders,.mx-knobs,.mx-counter){border:0!important}
html body .mx-strip{background:#42362c!important;box-shadow:inset 4px 4px 0 #281f17,inset -2px -2px 0 #4f6c6b,0 0 0 2px #17120d!important}
html body .mx-deck{background:linear-gradient(90deg,var(--px-wood) 0 10px,#4e443b 10px calc(100% - 10px),var(--px-wood) calc(100% - 10px))!important;box-shadow:inset 0 4px 0 #9a7457,0 0 0 2px #17120d,6px 6px 0 #18120c!important}
html body :is(.mx-faders,.mx-knobs){background:#44382e!important;box-shadow:inset 4px 4px 0 #281f17,inset -2px -2px 0 #4f6c6b,0 0 0 2px #17120d!important}
html body .mx-counter{background:#2f251d!important;box-shadow:inset 4px 4px 0 #000,0 0 0 2px #4f6c6b!important}
html body :is(.mx-counter-foot,.mx-read,.mx-timer-read,.mx-slot-read,.mx-total,.mx-status){font-size:16px!important;text-transform:none!important}
html body .mx-section{font-size:16px!important;padding:2px 8px!important;box-shadow:0 0 0 2px #3a3028!important}
html body .mx-ctl{border-radius:0!important}
html body .mx-ctl:focus-visible{outline-offset:2px!important}
html body :is(.mx-deck-top,.mx-deck-foot){border:0!important;background:linear-gradient(90deg,#86a3a080 0 4px,transparent 4px 8px) left bottom/8px 2px repeat-x!important}
html body .mx-deck-foot{background-position:left top!important}
html body .mx-deck-brand strong{font-size:24px!important}
html body .mx-drawer{--d:4px;font-size:16px!important}
html body .mx-drawer small{font:8px/2 var(--px-caps)!important}
html body .mx-drawer-grip{border-radius:0!important}
html body .mx-key-cap{font-family:var(--px-body)!important}
html body .mx-slot{background:#44382e!important;color:#dbe5df!important;--f:#44382e;--khi:#281f17;--klo:#4f6c6b}
html body .mx-reset{font-size:16px!important;text-decoration-thickness:2px!important}
html body .mx-note{font:16px/1.6 var(--px-body)!important}

/* cassette shelf and J-cards: spines on a wooden board, J-card is printed paper */
html body .cz-shuffle{--f:#382d24;--khi:#4f6c6b;--klo:#17120d}
html body .cz-hint{font:16px/1.4 var(--px-body)!important;color:#c9d7cf!important}
html body .cz-spines{background:linear-gradient(#0000 calc(100% - 8px),var(--px-wood-hi) calc(100% - 8px) calc(100% - 6px),var(--px-wood) calc(100% - 6px))!important;box-shadow:inset 0 -2px 0 #2a2019!important;gap:6px!important}
html body .cz-spine{background:var(--c)!important;box-shadow:inset 2px 0 0 #ffffff33,inset -2px 0 0 #00000040,inset 0 6px 0 #00000026,inset 0 -16px 0 #0000002e,0 0 0 2px #0000004d!important;transition:transform var(--mo-fast) var(--mo-steps-fast)!important}
html body .cz-spine-title{font-size:16px!important;font-family:var(--px-ui)!important}
html body .cz-spine.is-current::after{width:8px!important;margin-left:-4px!important;height:4px!important}
html body .cz-card{box-shadow:0 0 0 2px #3c332c,8px 8px 0 #18120c!important}
html body .cz-art{border:0!important;box-shadow:0 0 0 2px #0004}
html body .cz-title{font:16px/1.2 var(--px-ui)!important;text-transform:uppercase}
html body .cz-card.is-hand .cz-title{font-size:22px!important;text-transform:none}
html body .cz-card :is(.cz-mood){font-size:16px!important;line-height:1.5!important}
html body .cz-tracks{font-size:16px!important}
html body .cz-track{min-height:40px!important;font-size:16px!important}
html body .cz-track-time{font-size:16px!important}
html body .cz-heart{min-width:40px!important;min-height:40px!important;font-family:var(--px-body)!important}
html body .cz-card :is(.cz-credits,.cz-note){font:16px/1.5 var(--px-body)!important}
html body .cz-actions button{min-height:40px!important}
html body .cz-actions .cz-close{width:40px!important}
html body .cz-card button:focus-visible{outline-color:#8a2e52!important}
html body .tape-art{box-shadow:inset 2px 2px 0 #ffffff26,inset -2px -2px 0 #0003,0 4px 0 #2d201488!important}
html body .tape-reels{box-shadow:0 0 0 2px #ffffff22!important}
html body .tape-reels i{border-style:solid!important}

/* ---------- PHONE ---------- */
html body .ph-status{font-size:16px!important;line-height:1.1}
html body .ph-title h2{font-size:24px!important;line-height:1.1}
html body .ph-title small,html body .ph-sub{font-size:16px!important;color:var(--px-muted)!important}
html body .tvv-hint{font-size:16px!important}
html body :is(.ph-note,.ph-empty){font-size:16px!important;line-height:1.6!important}
html body .ph-np{box-shadow:inset 2px 2px 0 #1b140e,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge)!important;background:#261d16!important}
html body .ph-np strong{font-size:16px!important}
html body .ph-np-big strong{font-size:24px!important}
html body :is(.ph-np-label,.ph-np-where,.ph-np-time,.ph-state){font-size:16px!important}
html body .ph-apps{grid-template-columns:repeat(2,minmax(0,1fr))!important}/* two columns: «Налаштування» fits whole in Tiny5 16 */
html body .ph-app{min-width:0!important;white-space:nowrap;font-size:16px!important;background:transparent!important;min-height:84px!important}
html body .ph-app .ph-icon{width:40px!important;height:40px!important;box-shadow:inset -2px -2px 0 #31261c,inset 2px 2px 0 #7c6959,0 0 0 2px var(--px-edge)!important}
html body :is(.ph-dot,.phone-badge){font:16px/16px var(--px-ui)!important;height:16px!important;min-width:16px!important;box-shadow:0 0 0 2px var(--px-edge)}
html body .ph-keys{gap:10px!important;padding-bottom:4px}
html body .ph-keys button{font-family:var(--px-body)!important}
html body .ph-row{font-size:16px!important;flex-wrap:wrap}
html body .ph-row>span{min-width:72px!important}
html body .ph-toggle{appearance:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px!important;border:0!important;background:#3d3025!important;font-size:16px!important;box-shadow:inset 2px 2px 0 #5f4d3e,inset -2px -2px 0 #261d16,0 0 0 2px var(--px-edge)!important}
html body .ph-toggle[aria-pressed=true]{background:#594737!important;box-shadow:inset 2px 2px 0 #261d16,inset -2px -2px 0 #735f4d,0 0 0 2px var(--px-edge)!important}
html body .ph-thread-row{border:0!important;background:#362b21!important;box-shadow:inset 2px 2px 0 #544436,inset -2px -2px 0 #261d16!important;font-size:16px!important}
html body .ph-thread-row :is(strong,small,em){font-size:16px!important}
html body .ph-avatar{font:16px/1 var(--px-ui)!important;box-shadow:inset -2px -2px 0 #0003,0 0 0 2px var(--px-edge)!important}
html body .ph-bubble{box-shadow:0 0 0 2px var(--px-edge),4px 4px 0 #1e150d!important;position:relative}
html body .ph-bubble p{font-size:16px!important;line-height:1.5!important}
html body .ph-bubble time{font-size:16px!important}
html body .ph-bubble::after{content:'';position:absolute;bottom:-6px;left:8px;width:6px;height:6px;background:inherit;box-shadow:2px 2px 0 var(--px-edge)}
html body .ph-bubble.out::after{left:auto;right:8px}
html body .ph-replies{gap:10px!important}
html body .ph-replies button{min-height:40px!important;font-size:16px!important}
html body .ph-alert{box-shadow:inset 6px 0 0 var(--px-accent),0 0 0 2px var(--px-edge)!important}
html body .ph-alert.kind-alert{box-shadow:inset 6px 0 0 var(--px-led-red),0 0 0 2px var(--px-edge)!important}
html body .ph-alert :is(small,strong){font-size:16px!important}
html body .ph-alert strong{font-size:24px!important;line-height:1.2!important}
html body .ph-search input{font-size:16px!important}
html body .ph-key{font-family:var(--px-body)!important}
html body .ph-nav .ph-key{--f:#3a3028;--khi:#6d5c4d;--klo:#1e1812;--d:2px}

/* ---------- OBJECT close-ups (keepsake) ---------- */
html body .keepsake{--pf:#4e3f31;--rhi:#857160;--rlo:#2a2019}
html body .keepsake h2{font-size:32px!important;margin:6px 48px 12px!important}
html body .object-portrait{background:#30261d!important;box-shadow:inset 4px 4px 0 #1b140e,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge)!important}
html body .object-portrait canvas{border-radius:0!important}
html body .object-hint{font-family:var(--px-body)!important;font-size:16px!important;line-height:1.5!important;color:#c3dcd8!important}
html body .keepsake #object-copy{font-size:16px!important;line-height:1.75!important}
html body .object-response{font-family:var(--px-body)!important;font-style:normal!important;font-size:16px!important;color:#d9dad2!important}
html body .object-actions{gap:12px!important}
html body .object-bottom{border-top:0!important;background:linear-gradient(90deg,#967e69 0 4px,transparent 4px 8px) top left/8px 2px repeat-x!important;padding-top:14px!important;flex-wrap:wrap}
html body .object-bottom button{font-size:16px!important;min-height:40px!important;padding:4px 12px!important}
html body .postcard-support{border:0!important;font-size:16px!important}
html body #journal-dot{width:8px!important;height:8px!important;background:var(--px-rose)!important;box-shadow:0 0 0 2px #3a2030}

/* ---------- BOOK: a cloth-bound notebook with paper pages ---------- */
html body dialog.notebook{--pf:repeating-linear-gradient(45deg,#84776c 0 2px,#8d8074 2px 4px);--rhi:#b4a699;--rlo:#50453c;--bw:6px;padding:0 0 12px!important}
html body .book-spread{margin:10px 10px 0!important;box-shadow:0 0 0 2px #39322b}
html body .book-page{color:var(--px-paper-ink)}
html body .book-left{background:linear-gradient(90deg,#e3ddd6 calc(100% - 12px),#c8c0c2 calc(100% - 12px) calc(100% - 6px),#b1a9ae calc(100% - 6px))!important;border-right:0!important}
html body .book-right{background:linear-gradient(90deg,#b8b0b3 0 4px,#d6cfcc 4px 10px,#ece6de 10px)!important}
html body .book-left h2{font-size:32px!important;line-height:1.15!important;color:#5d4c3e!important;margin:20px 0 10px!important}
html body .book-right h3{font-size:24px!important;line-height:1.25!important;color:#58493b!important}
html body .book-right #book-text{font-size:16px!important;line-height:1.85!important;color:#4a423b!important}
html body .book-left #book-aside{font-size:16px!important;color:#4f5d58!important}
html body :is(.notebook-imprint,.book-colophon,.page-number){color:#5a5364!important}
html body .book-place{color:#7a4a60!important}
html body .book-quote{border-top:0!important;background:linear-gradient(90deg,#958d8e 0 4px,transparent 4px 8px) top left/8px 2px repeat-x}
html body .book-quote blockquote{font:16px/1.7 var(--px-body)!important;color:#56483c!important}
html body .book-quote figcaption,html body .book-quote a{font-size:16px!important;color:#575a49!important}
html body .ribbon{clip-path:polygon(0 0,100% 0,100% 100%,75% 100%,75% 88%,50% 88%,50% 76%,50% 88%,25% 88%,25% 100%,0 100%)!important;height:48px!important;min-height:48px!important;width:32px!important;font-family:var(--px-body)!important;font-size:16px!important}
html body .book-nav,html body .notebook .object-bottom,html body .book-bookmarks{margin:0 10px!important;background:#e4ded7!important;border-top:0!important}
html body .book-nav{padding:10px 16px 12px!important;gap:10px}
html body .notebook .object-bottom{padding:10px 16px 12px!important;background:linear-gradient(90deg,#b5aa9d 0 4px,transparent 4px 8px) top left/8px 2px repeat-x,#e4ded7!important}
html body .book-bookmarks button{font-size:16px!important;color:#6d3d5e!important;min-height:40px}
html body .book-bookmarks p{font:16px/1.6 var(--px-body)!important;color:#4b4553!important}
html body .notebook{--px-focus:#8a2e52;--link:#5c623d}
html body .notebook button:hover{color:inherit!important}

/* ---------- WINDOW: a painted wooden frame ---------- */
html body dialog.window-view{--pf:#5e5043;--rhi:#bbb1a9;--rlo:#6e6257;--bw:8px}
html body .window-view h2{font-size:32px!important}
html body .window-closeup{border:0!important;box-shadow:0 0 0 4px #49392b,0 0 0 6px #0e0b08,6px 6px 0 6px #1e150d!important;margin:6px}
html body .window-latch{border-bottom:0!important;background:linear-gradient(90deg,#a79585 0 4px,transparent 4px 8px) bottom left/8px 2px repeat-x;padding:18px 0 14px!important;flex-wrap:wrap}
html body .window-latch span,html body .window-repair span{font:16px/1.5 var(--px-body)!important;color:#e4dad2!important}
html body #window-latch{--f:var(--px-metal);--khi:var(--px-metal-hi);--klo:var(--px-metal-lo);--ink:var(--px-metal-ink)}
html body .window-weather{gap:12px!important;padding-top:14px!important}
html body .window-weather button{display:inline-flex!important;align-items:center;gap:8px}
html body .window-weather button span{font-size:16px!important}
html body .window-weather>#weather-live{flex:1 1 100%;justify-content:flex-start;text-align:left}
html body .window-weather label{font-size:16px!important;color:#e4dad2!important}
html body .window-repair{border-top:0!important}

/* ---------- CUPBOARD: wood ---------- */
html body dialog.cabinet{--pf:repeating-linear-gradient(0deg,#5f4a3c 0 14px,#57433a 14px 16px);--rhi:#9a7457;--rlo:#3a271d;--bw:8px}
html body .cabinet h2{color:#f1e4d6!important}
html body .inventory-item{appearance:none;border:0!important;background:#3e3345!important;color:var(--px-ink)!important;box-shadow:inset 2px 2px 0 #6a5a70,inset -2px -2px 0 #211a26,0 0 0 2px var(--px-edge),0 6px 0 #231a17!important;min-height:44px}
html body .inventory-item span{font-size:16px!important}
html body .inventory-item small{font-size:16px!important;color:var(--px-warm)!important}
html body .inventory-item.selected{background:#75604d!important;box-shadow:inset 2px 2px 0 #473729,inset -2px -2px 0 #b29983,0 0 0 2px var(--px-focus),0 4px 0 #231a17!important}
html body .inventory-item.stored{opacity:.7}
html body #inspector{border-top:0!important;background:linear-gradient(90deg,#b0a2b3 0 4px,transparent 4px 8px) top left/8px 2px repeat-x;font-size:16px!important;padding-top:14px!important}
html body #inspector :is(strong,span){font-size:16px!important}

/* ---------- WALL MAP: paper pinned on a board ---------- */
html body dialog.place-map{--pf:#56483c;--rhi:#e3dccd;--rlo:#a2998a;--bw:6px}
html body .place-map h2{font-size:32px!important}
html body .place-map :is(.place-map-note,.place-map-source){font-size:16px!important;line-height:1.5!important}
html body .place-map-board{box-shadow:inset 2px 2px 0 #fff6,inset -2px -2px 0 #a99f98,0 0 0 2px var(--px-edge),6px 6px 0 #31271e!important;padding:10px!important}
html body .place-map-list{gap:12px!important}
html body .place-map-list button{min-height:40px!important;display:inline-flex;align-items:center;gap:8px}
html body .place-map-list button .alert-dot{width:8px!important;height:8px!important;background:var(--px-led-red)!important;box-shadow:0 0 0 2px #3a1d26;margin:0!important}
html body .place-mark span{font:16px/1.2 var(--px-ui)!important;box-shadow:0 0 0 2px #3a3028,2px 2px 0 2px #0004!important;padding:2px 6px!important;color:#473729!important}
html body .place-mark.here span{background:var(--px-warm)!important}
html body .place-mark{min-width:40px!important;min-height:40px!important}
html body .place-map-badge{box-shadow:0 0 0 2px #3a3028!important;padding:4px 8px!important}

/* ---------- TV: a plum bakelite set; the handwritten note stays a paper card ---------- */
html body dialog.tv-view{--pf:#342e28;--rhi:#706154;--rlo:#1c1815}
html body .tv-view h2{font-size:32px!important}
html body .tvv-set{background:#51475f!important;box-shadow:inset 4px 4px 0 #88796b,inset -4px -4px 0 #332d3d,0 0 0 2px var(--px-edge),8px 8px 0 #1c1815!important}
html body .tvv-bezel{background:#27211c!important;box-shadow:inset 4px 4px 0 #171411,inset -2px -2px 0 #483d34!important}
html body .tvv-glass{clip-path:polygon(0 12px,4px 12px,4px 6px,6px 6px,6px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 6px) 4px,calc(100% - 6px) 6px,calc(100% - 4px) 6px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),6px calc(100% - 4px),6px calc(100% - 6px),4px calc(100% - 6px),4px calc(100% - 12px),0 calc(100% - 12px))}
html body dialog.tv-view .tvv-panel button{padding:0 12px!important}html body dialog.tv-view .tvv-panel :is(.tvv-prev,.tvv-next){font-family:var(--px-body)!important}
html body .tvv-chan{font-size:8px!important;box-shadow:inset 2px 2px 0 #000,0 0 0 2px #483d34;padding:8px 10px!important}
html body .tvv-hint{font-size:16px!important;color:#d5cbc3!important}
html body .tvv-note{box-shadow:0 0 0 2px #3a3028,8px 8px 0 #0008!important}
html body .tvv-note::after{height:16px!important}

/* ---------- TAPE DECK (Одеса) and FIELD RADIO (бліндаж) ---------- */
html body dialog.tape-deck{--pf:linear-gradient(90deg,var(--px-wood) 0 10px,#5b4a44 10px calc(100% - 10px),var(--px-wood) calc(100% - 10px));--rhi:#b39a80;--rlo:#2e211b;--pink:#f2e8da;--pmuted:#e2d6c6}
html body dialog.field-radio{--pf:#474f36;--rhi:#7c8660;--rlo:#262b1b;--pink:#eef0dc;--pmuted:#dfe3c8}
html body :is(.deck-brand h2){font-size:32px!important;margin:0!important}
html body :is(.deck-face,.deck-window){border:0!important;border-radius:0!important}
html body .deck-face{background:#241c1a!important;box-shadow:inset 4px 4px 0 #120d0c,inset -2px -2px 0 #6a5850,0 0 0 2px var(--px-edge)!important}
html body .deck-keys{gap:12px!important;flex-wrap:wrap;align-items:center}
html body .deck-keys :is(#tape-time){font-size:16px!important}

/* ---------- kit sheet helpers ---------- */
.px-kit{font-family:var(--px-body);color:var(--px-ink)}
.px-panel{background:var(--pf,var(--px-bake));border:6px solid;border-color:var(--rhi,var(--px-bake-hi)) var(--rlo,var(--px-bake-lo)) var(--rlo,var(--px-bake-lo)) var(--rhi,var(--px-bake-hi));box-shadow:0 -2px 0 var(--e,var(--px-edge)),-2px 0 0 var(--e,var(--px-edge)),2px 0 0 var(--e,var(--px-edge)),0 2px 0 var(--e,var(--px-edge)),inset 0 0 0 2px #0000004d,10px 10px 0 var(--px-drop);padding:16px}
.px-panel--wood{--pf:repeating-linear-gradient(0deg,#5f4a3c 0 14px,#57433a 14px 16px);--rhi:#9a7457;--rlo:#3a271d}
.px-panel--paper{--pf:var(--px-paper);--rhi:var(--px-paper-hi);--rlo:var(--px-paper-lo);--e:#3a3028;color:var(--px-paper-ink)}
.px-panel--bakelite{--pf:#4d513a;--rhi:#86a3a0;--rlo:#2a2d1e}
.px-well{background:#261d16;box-shadow:inset 4px 4px 0 #0e0b08,inset -2px -2px 0 #5f4d3e,0 0 0 2px var(--px-edge);padding:10px}
.px-note{display:inline-block;background:var(--px-paper);color:var(--px-paper-ink);padding:12px 16px;box-shadow:0 -2px 0 #3a3028,-2px 0 0 #3a3028,2px 0 0 #3a3028,0 2px 0 #3a3028,6px 6px 0 var(--px-drop);transform:rotate(-1deg);font:16px/1.6 var(--px-body)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){html body dialog{animation:none!important}html body .identity .alert-status[data-kind=alert]::before{animation:none}html body #toast{transition:none!important}.px-flip.px-flipping>select{animation:none}html body .cz-spine{transition:none!important}}
html body.reduced dialog,html body .reduced dialog{animation:none!important}
body.reduced .identity .alert-status[data-kind=alert]::before,body.reduced .px-flip.px-flipping>select{animation:none!important}

/* ---------- small screens: 375px, touch targets ≥ 40px, no sideways scroll ---------- */
@media(max-width:700px){
 html body dialog h2{font-size:24px!important;margin-right:48px}
 html body .topbar h1{font-size:16px!important}
 html body .identity img{width:24px;height:24px}
 html body .top-actions{gap:10px!important}
 html body .top-actions .square{min-width:40px!important;width:40px}
 html body .identity .alert-status{font-size:16px!important;max-width:44vw}
 html body .receiver-brand h2,html body :is(.deck-brand h2){font-size:24px!important}
 html body .book-left h2{font-size:24px!important}
 html body .book-right h3{font-size:24px!important}
 html body dialog{--bw:4px}
 html body .live-grid{grid-template-columns:1fr!important}
 html body .radio-sliders{flex-wrap:wrap}
 html body .radio-sliders label{min-width:100%!important}
}
@media(max-width:550px){
 html body .receiver-face{grid-template-columns:1fr!important}
 html body .speaker-grille{min-height:48px!important}
 html body .receiver-keys{justify-content:space-between}
 html body .receiver-keys :is(.play,.next,.seek){min-width:52px!important}
 html body .ph-app{min-height:88px!important}
 html body .cz-actions{flex-wrap:wrap}
 html body .window-weather>button{flex:1 1 40%}
 html body .place-map-list button{flex:1 1 40%;justify-content:center}
 html body .place-mark span{font-size:16px!important}
 html body .object-actions button{flex:1 1 40%}
}
/* touch targets found by the 375px audit */
html body .tuning-label input{height:40px!important;margin:-13px 0!important;position:relative;z-index:1}
html body .mx-counter-foot #repeat-track{min-height:40px!important}
html body .ribbon{width:40px!important}
html body .book-quote a{display:inline-block;min-height:40px;padding-top:10px}
html body .identity .alert-status{min-height:40px}
@media(max-width:600px){html body .phone-hud{width:40px!important;height:52px!important}}

/* ---------- declutter: calmer screens, same features ---------- */
/* top bar: «no data» is a quiet dot and word, not a boxed warning; on phones only the dot (the link keeps its text for screen readers) */
html body .identity .alert-status:is([data-kind=none],[data-kind=scene]){background:transparent!important;box-shadow:none!important;color:#9a8c7f!important;padding-inline:4px!important}
@media(max-width:700px){
 html body .topbar h1{white-space:nowrap}
 html body .identity .alert-status:is([data-kind=none],[data-kind=scene]){font-size:0!important;gap:0;width:40px;justify-content:center;padding:0!important}
}
/* radio: the rotation hint is a quiet line, not a second paper label under the dial */
html body .has-mixer .song-credit.radio-hint,html body .song-credit.radio-hint{background:transparent!important;box-shadow:none!important;border:0!important;color:#b9cbc3!important;padding:0!important;margin:8px auto 0!important;font-size:16px!important;text-align:center}
/* the cat has no move/store keys: no empty footer rule */
html body #object-view[data-object=cat] .object-bottom{display:none}
/* journal finds: the place line readable on paper */
html body dialog#journal .find:not(.locked) strong{color:#574637!important}
/* «Більше» folds: help, the field radio, the window's volumes, the record player's motor/speed/flip */
html body :is(.help-more,.deck-more,.window-more,.tt-more){margin-top:10px}
html body :is(.help-more,.deck-more,.window-more,.tt-more)>summary{color:var(--px-muted)}
html body dialog#help .help-more>summary{color:#5a5364!important}
html body dialog#help .help-more dl{margin-top:4px}
html body .window-more .window-weather{padding-top:6px!important}
html body .deck-more p{margin:4px 0 0}
/* TV: the keyboard line is for keyboards */
@media(pointer:coarse){html body .tvv-hint{display:none}}
/* map on a phone: the names are the keys under the map, so the pins show only «you are here» */
@media(max-width:550px){html body .place-mark:not(.here) span{display:none}}
/* device headers on a phone: the caption wraps under the name instead of under the close key */
@media(max-width:700px){html body .deck-brand{flex-wrap:wrap;row-gap:4px;padding-right:52px}}
/* phone held upright: the phone key sits under the room (it covered the TV), next to the turn-your-phone line */
@media(max-width:700px) and (orientation:portrait){
 html body #stage{overflow:visible}
 html body #stage>canvas{clip-path:inset(0)}
 html body .phone-hud{top:calc(100% + 10px)!important;bottom:auto!important;right:10px!important}
 html body .phone-peek{top:calc(100% + 10px)!important;bottom:auto!important}
 html body #app>.game-wrap::after{text-align:left;padding-right:64px;padding-left:16px;min-height:52px}
}
/* objects first: the top-bar gear goes once the phone (its «Налаштування» app) is found; five phone apps, the last one spans */
html body #settings-btn[hidden]{display:none!important}
html body .ph-apps>:last-child:nth-child(odd){grid-column:1/-1}
/* radio: the paper credit and «↓ MP3» sit at the foot of the Мікшер drawer */
html body .mx-deck-credit{border:0!important;background:linear-gradient(90deg,#86a3a080 0 4px,transparent 4px 8px) left top/8px 2px repeat-x!important}
html body .has-mixer .mx-deck-credit .song-credit{margin:0!important}
html body .mx-deck-credit #download-track{margin-left:auto;min-height:40px}
html body .tt-more .tt-panel{margin-top:4px}
/* phone held upright: the room fills the height of the screen and is wider than it; a finger pans along it
   (main.mjs: startPan). The hint and the phone key sit in a strip under the room. */
@media(max-width:700px) and (orientation:portrait){
 html body #app{height:100dvh;min-height:0!important;overflow:hidden}
 html body #app>.game-wrap{flex:1 1 0;min-height:0;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 html body #app>.game-wrap::-webkit-scrollbar{display:none}
 html body #app>.game-wrap::after{content:none!important}
 html body #app>.game-wrap>#stage{height:100%;width:auto;aspect-ratio:3/2;max-width:none;border-inline:0}
 html body #app::after{content:'← Проведіть пальцем уздовж кімнати →';display:flex;align-items:center;flex:none;min-height:60px;padding:0 64px 0 16px;font:12px/1.4 var(--px-ui,inherit);color:#a99c90}
 html body .phone-hud,html body .phone-peek{position:fixed!important;top:auto!important;bottom:8px!important}
 html body .phone-hud{right:12px!important}
}