/* One dark room, one old beige monitor, one green-screen program.
   The screen inside is laid out at 640 x 480, like a 1990s monitor, and
   scaled to fit the window; see fit() in main.js. */
:root {
  color-scheme: dark;
  --room: #06070a;
  --room-glow: #0d1f16;
  --plastic: #cbbf9f;
  --plastic-hi: #e6dcc0;
  --plastic-lo: #9a8f73;
  --plastic-dk: #5f5744;
  --key: #d8cdb0;
  --key-text: #2a2418;
  --p0: #020604;      /* screen black */
  --p1: #0a1f13;      /* panel */
  --p2: #1e5634;      /* rules and borders */
  --p3: #5fd08a;      /* text */
  --p4: #c9ffd9;      /* bright text */
  --glowc: rgba(95, 208, 138, .45);
  --paper: #e9dbad;   /* the old sheet beside the computer */
  --paper-lo: #d7c28a;
  --paper-edge: rgba(122, 84, 30, .45);
  --ink: #2b1d10;
  --sw: 640px;        /* screen width, set by main.js */
  --k: 1;             /* 640-wide stage scaled to the screen */
  --kk: 1;            /* keyboard scale; wider than the monitor on phones */
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 38%, var(--room-glow) 0%, var(--room) 62%) var(--room);
  color: var(--p3);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; flex: none; }
[hidden] { display: none !important; }

#room {
  height: 100%; padding-inline: 16px;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--k) * 30px);
  direction: ltr;       /* the paper stands to the right of the computer */
}
#desk { display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 18px); }

/* ---------- the monitor ---------- */
#monitor {
  padding: calc(var(--k) * 26px) calc(var(--k) * 30px) 0;
  border-radius: calc(var(--k) * 22px) calc(var(--k) * 22px) calc(var(--k) * 14px) calc(var(--k) * 14px);
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 18%, var(--plastic) 80%, var(--plastic-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .25),
    0 30px 60px rgba(0, 0, 0, .7), 0 0 120px rgba(80, 200, 130, .07);
}
#screen {
  position: relative;
  width: var(--sw);
  aspect-ratio: 4 / 3;
  border-radius: 7% / 9%;
  overflow: hidden;
  overflow: clip;       /* never scrolls, even when something inside gets focus */
  background: var(--p0);
  box-shadow: 0 0 0 calc(var(--k) * 6px) var(--plastic-dk), 0 0 0 calc(var(--k) * 8px) var(--plastic-lo);
}
#stage {
  position: absolute; top: 0; left: 0;
  width: 640px; height: 480px;
  transform: scale(var(--k)); transform-origin: 0 0;
}
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .07), transparent 40%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 calc(var(--k) * 40px) rgba(0, 0, 0, .8);
  border-radius: inherit;
}
body.on .glass { animation: flicker 6s infinite steps(1); }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } 91% { opacity: .96; } }

#chin { display: flex; align-items: center; justify-content: space-between; height: calc(var(--k) * 44px); padding-inline: calc(var(--k) * 10px); direction: ltr; }
#chin .badge { width: calc(var(--k) * 64px); height: calc(var(--k) * 10px); border-radius: 2px; background: linear-gradient(90deg, var(--plastic-lo), var(--plastic-dk)); opacity: .6; }
#chin .vents { flex: 1; height: calc(var(--k) * 14px); margin-inline: calc(var(--k) * 40px); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px); }
#chin .led { width: calc(var(--k) * 10px); height: calc(var(--k) * 10px); border-radius: 50%; background: #3a2a14; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
body.on #chin .led { background: #7dff9a; box-shadow: 0 0 8px #58e08a, inset 0 -1px 1px rgba(0, 0, 0, .3); }

/* ---------- views inside the screen ---------- */
.view { position: absolute; inset: 0; }

#off { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #0b130e, #020403 70%); }
#power {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--p2); background: transparent; color: var(--p3);
  font-size: 58px; display: grid; place-items: center;
  animation: pulse 2.4s ease-in-out infinite;
}
#power:hover, #power:focus-visible { color: var(--p4); border-color: var(--p3); outline: none; box-shadow: 0 0 30px var(--glowc); }
@keyframes pulse { 50% { box-shadow: 0 0 36px var(--glowc); text-shadow: 0 0 12px var(--glowc); } }

#boot { display: grid; place-items: center; background: var(--p0); }
#boot.flash { animation: crt-on .7s ease-out both; }
@keyframes crt-on {
  0% { transform: scale(1, .004); filter: brightness(6); background: #dfffe8; }
  45% { transform: scale(1, .004); filter: brightness(4); background: #dfffe8; }
  70% { transform: scale(1, 1); filter: brightness(2); background: #0c2a18; }
  100% { transform: scale(1, 1); filter: brightness(1); background: var(--p0); }
}
.boot-box { display: grid; justify-items: center; gap: 22px; color: var(--p3); }
.boot-icon { font-size: 86px; filter: drop-shadow(0 0 10px var(--glowc)); }
.boot-bar { width: 260px; height: 18px; border: 2px solid var(--p3); padding: 2px; direction: ltr; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--p3) 0 10px, transparent 10px 13px); animation: fill 1.6s steps(20) .7s forwards; }
@keyframes fill { to { width: 100%; } }

/* ---------- the archive program ---------- */
#archive {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px 14px;
  background: var(--p0);
  text-shadow: 0 0 6px var(--glowc);
}
.bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--p3); color: var(--p0); text-shadow: none;
  padding: 4px 12px; font-size: 20px; font-weight: 700;
  box-shadow: 0 0 14px var(--glowc);
}
/* the date and time in Kabul now, where a computer shows its clock */
.bar .now { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bar .now #now-time { font-variant-numeric: tabular-nums; font-weight: 900; }

.search { display: flex; gap: 10px; }
.search input {
  flex: 1; min-width: 0;
  font: 700 30px/1.3 'Vazirmatn', Tahoma, sans-serif;
  color: var(--p4); caret-color: var(--p4);
  background: var(--p1); border: 2px solid var(--p2);
  padding: 4px 14px; text-shadow: 0 0 8px var(--glowc);
}
.search input:focus { outline: none; border-color: var(--p3); box-shadow: 0 0 12px var(--glowc) inset; }
.go {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 700;
  padding: 0 16px; border: 2px solid var(--p3);
  background: var(--p1); color: var(--p4); text-shadow: 0 0 8px var(--glowc);
}
.go:hover, .go:focus-visible { background: var(--p3); color: var(--p0); text-shadow: none; outline: none; }
.go.hint { animation: hint 1.2s ease-in-out infinite; }
@keyframes hint { 50% { background: var(--p2); box-shadow: 0 0 18px var(--glowc); } }

/* «۱۰ فلم پیدا شد» at the right; when more were found than can be shown,
   the computer's error in the middle */
.found { min-height: 28px; font-size: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 12px; color: var(--p3); direction: rtl; }
.found-n { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.found-err { grid-column: 2; white-space: nowrap; }
.found.none { color: var(--p4); }
.found svg { font-size: 22px; }

.results { display: flex; gap: 12px; min-height: 142px; align-items: flex-start; }
.tile {
  width: 108px; display: flex; flex-direction: column; gap: 4px; padding: 0;
  background: none; border: none; color: var(--p3); text-align: center; text-shadow: inherit;
}
.tile .thumb { position: relative; width: 108px; height: 81px; border: 2px solid var(--p2); background: var(--p1); overflow: hidden; }
.tile canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: grayscale(1) sepia(1) hue-rotate(78deg) saturate(1.6) brightness(.85) contrast(1.15); }
.tile .meta { display: flex; justify-content: space-between; font-size: 18px; padding-inline: 2px; }
.tile .meta b { font-weight: 900; color: var(--p4); }
.tile .seen-mark { position: absolute; top: 3px; left: 3px; font-size: 16px; color: var(--p4); background: var(--p0); padding: 1px 3px; line-height: 1; }
.tile:hover .thumb, .tile:focus-visible .thumb { border-color: var(--p4); box-shadow: 0 0 14px var(--glowc); }
.tile:hover canvas, .tile:focus-visible canvas { filter: saturate(.9) contrast(1.05); }
.tile:focus-visible { outline: none; }
.tile.new { animation: appear .35s steps(4) both; }
@keyframes appear { from { opacity: 0; } }

.seen { margin-top: auto; border-top: 2px solid var(--p2); padding-top: 10px; display: flex; align-items: center; gap: 12px; }
.seen-label { display: flex; align-items: center; gap: 6px; font-size: 18px; white-space: nowrap; }
.slots { display: flex; gap: 6px; flex: 1; justify-content: space-between; }
.slot {
  position: relative; width: 50px; height: 38px; padding: 0;
  border: 2px dashed var(--p2); background: var(--p0); color: var(--p2);
  font-size: 16px; font-weight: 700; display: grid; place-items: center; cursor: default;
}
.slot.got { border: 2px solid var(--p3); cursor: pointer; color: var(--p4); }
.slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: grayscale(1) sepia(1) hue-rotate(78deg) saturate(1.6) brightness(.6); }
.slot span { position: relative; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.slot.got:hover, .slot.got:focus-visible { border-color: var(--p4); outline: none; box-shadow: 0 0 10px var(--glowc); }
.slot.pop { animation: pop .6s steps(3) 2; }
/* many recordings: a grid of small squares instead of slots */
.slots.many { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-start; align-content: flex-start; max-height: 120px; overflow-y: auto; }
.cell { width: 10px; height: 8px; padding: 0; border: 1px solid var(--p2); background: var(--p0); cursor: default; }
.cell.got { background: var(--p3); border-color: var(--p3); cursor: pointer; box-shadow: 0 0 4px var(--glowc); }
.cell.got:hover, .cell.got:focus-visible { background: var(--p4); outline: none; }
.cell.pop { animation: pop .6s steps(3) 2; }
@keyframes pop { 50% { background: var(--p3); } }

/* ---------- watching ---------- */
#player { background: #000; }
#tv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the camcorder's writing over the picture: white letters on dark bars,
   with the slight red and blue fringes of tape */
.osd { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; direction: ltr; pointer-events: none; }
/* top right: the person's name, the place, the tape, the time and the date */
.osd-info { margin-left: auto; display: grid; justify-items: end; gap: 3px; }
.osd-line {
  font: 800 25px/1.2 'Vazirmatn', Tahoma, sans-serif; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: #f1f0e6; background: rgba(8, 10, 10, .55); padding: 0 9px;
  text-shadow: 1.5px 0 rgba(255, 70, 70, .55), -1.5px 0 rgba(70, 200, 255, .55), 0 0 7px rgba(255, 255, 255, .35);
}
.osd-line:empty { display: none; }
.osd-time { margin-top: 12px; }
/* one row of controls along the bottom of the picture */
.bottom-row { position: absolute; left: 20px; right: 20px; bottom: 18px; height: 54px; display: flex; gap: 10px; }
.ctl {
  width: 54px; height: 54px; padding: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: var(--p4);
  border: 2px solid var(--p3); text-shadow: 0 0 6px var(--glowc);
}
.ctl svg { font-size: 26px; filter: drop-shadow(0 0 4px var(--glowc)); }
#pause, #again { margin-inline-start: auto; }
.ctl:hover, .ctl:focus-visible { background: var(--p3); color: var(--p0); text-shadow: none; outline: none; }

#tv { cursor: pointer; }
.search.after { flex: 1; min-width: 0; }
.search.after input { font-size: 26px; background: rgba(10, 31, 19, .9); }
.search.after .go { width: 54px; padding: 0; justify-content: center; background: rgba(10, 31, 19, .9); }
.search.after .go svg { font-size: 26px; }

/* ---------- the paper beside the computer ----------
   The words of a recording are written here: none while the person is
   speaking, the words so far when the tape is paused, the whole line when
   it ends. The last line stays until another recording plays. */
#side { display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 22px); }
#paper {
  --pl: calc(var(--k) * 42px);           /* the distance between ruled lines */
  width: calc(var(--sw) * 0.44); height: calc(var(--sw) * 0.75);
  padding: calc(var(--pl) * 1.2) calc(var(--k) * 34px) calc(var(--k) * 20px) calc(var(--k) * 26px);
  direction: rtl; overflow: hidden;
  transform: rotate(1.6deg);
  background:
    radial-gradient(circle at 82% 12%, rgba(150, 100, 35, .22), transparent 22%),
    radial-gradient(circle at 18% 88%, rgba(140, 95, 30, .18), transparent 26%),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--pl) - 1px), rgba(90, 70, 40, .22) calc(var(--pl) - 1px) var(--pl)),
    linear-gradient(270deg, transparent calc(var(--k) * 22px), rgba(170, 60, 50, .35) calc(var(--k) * 22px) calc(var(--k) * 24px), transparent calc(var(--k) * 24px)),
    linear-gradient(170deg, var(--paper), var(--paper-lo));
  background-position: 0 0, 0 0, 0 calc(var(--pl) * 0.2), 0 0, 0 0;
  box-shadow: inset 0 0 calc(var(--k) * 38px) var(--paper-edge), 0 calc(var(--k) * 18px) calc(var(--k) * 34px) rgba(0, 0, 0, .7);
  border-radius: 2px;
}
.subs {
  margin: 0;
  font-size: calc(var(--k) * 24px); font-weight: 600; line-height: var(--pl);
  color: var(--ink);
  text-shadow: 0 0 1px rgba(43, 29, 16, .5);
}
.subs .w { visibility: hidden; }
.subs .w.on { visibility: visible; cursor: pointer; border-radius: 2px; }
.subs .w.on:hover { background: rgba(120, 80, 20, .16); }
/* one sentence played by itself: the rest of the line is written faintly */
.subs .w.dim { opacity: .35; }
/* a word's meaning: a small slip laid on the paper under the word */
.gloss {
  position: absolute; z-index: 2; max-width: calc(100% - 12px);
  display: grid; gap: calc(var(--k) * 2px); justify-items: center; text-align: center;
  padding: calc(var(--k) * 6px) calc(var(--k) * 12px);
  background: #fbf6e6; color: var(--ink); border: 1px solid rgba(90, 60, 20, .35); border-radius: 2px;
  box-shadow: 0 calc(var(--k) * 4px) calc(var(--k) * 10px) rgba(60, 40, 10, .35);
  transform: rotate(-1.2deg);
}
.gloss b { font: 800 calc(var(--k) * 22px)/1.4 'Vazirmatn', Tahoma, sans-serif; }
.gloss .mean { display: grid; gap: calc(var(--k) * 3px); font: 600 calc(var(--k) * 18px)/1.3 'Vazirmatn', 'Segoe UI', sans-serif; }
.gloss .mean .pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: calc(var(--k) * 6px); direction: ltr; }
.gloss .mean .ph { font-weight: 800; }
.gloss .mean .eq { opacity: .6; }
.gloss i { font: italic 500 calc(var(--k) * 17px)/1.3 Georgia, 'Times New Roman', serif; color: #7a4a1c; }
/* more than one sheet: the next one shows behind, and a tab turns to it */
#paper { position: relative; }
#paper.more { box-shadow: inset 0 0 calc(var(--k) * 38px) var(--paper-edge), calc(var(--k) * -7px) calc(var(--k) * 7px) 0 calc(var(--k) * -1px) var(--paper-lo),
  calc(var(--k) * -7px) calc(var(--k) * 7px) 0 0 rgba(90, 60, 20, .5), 0 calc(var(--k) * 18px) calc(var(--k) * 34px) rgba(0, 0, 0, .7); }
.page-turn {
  position: absolute; left: calc(var(--k) * 8px); bottom: calc(var(--k) * 8px);
  display: flex; align-items: center; gap: calc(var(--k) * 6px);
  padding: calc(var(--k) * 4px) calc(var(--k) * 10px); border: none; border-radius: 2px;
  background: linear-gradient(135deg, var(--paper-lo), #c7ae6e); color: var(--ink);
  box-shadow: 0 calc(var(--k) * 2px) calc(var(--k) * 5px) rgba(60, 40, 10, .45);
  font: 700 calc(var(--k) * 20px)/1 'Vazirmatn', Tahoma, sans-serif; direction: ltr;
}
.page-turn svg { font-size: calc(var(--k) * 20px); transform: scaleX(-1); }
.page-turn:hover, .page-turn:focus-visible { background: linear-gradient(135deg, #e3cf92, var(--paper-lo)); outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- the keyboard on the desk ---------- */
#keyboard {
  position: relative;
  display: flex; flex-direction: column; gap: calc(var(--kk) * 6px);
  padding: calc(var(--kk) * 12px) calc(var(--kk) * 14px);
  border-radius: calc(var(--kk) * 10px);
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 30%, var(--plastic-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 16px 30px rgba(0, 0, 0, .6);
}
.krow { display: flex; gap: calc(var(--kk) * 6px); justify-content: center; }
.key {
  width: calc(var(--kk) * 46px); height: calc(var(--kk) * 42px);
  border: none; border-radius: calc(var(--kk) * 5px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90);
  box-shadow: 0 calc(var(--kk) * 3px) 0 #8a7f64, inset 0 -2px 0 rgba(0, 0, 0, .08);
  color: var(--key-text);
  font: 700 calc(var(--kk) * 24px)/1 'Vazirmatn', Tahoma, sans-serif;
  display: grid; place-items: center; padding: 0;
  touch-action: manipulation;
}
.key.wide { width: calc(var(--kk) * 110px); }
.key.space { width: calc(var(--kk) * 250px); }
.key svg { font-size: calc(var(--kk) * 24px); }
.key:active, .key.down { transform: translateY(calc(var(--kk) * 3px)); box-shadow: 0 0 0 #8a7f64; background: #cfc4a6; }
.key:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }
.key.enter { background: linear-gradient(180deg, #c9ecd2, #9fd6b0 60%, #79b48c); }
/* putting the keyboard away with its X, or with the key beside the paper */
.kb-close {
  position: absolute; top: calc(var(--kk) * -11px); right: calc(var(--kk) * -11px);
  width: calc(var(--kk) * 30px); height: calc(var(--kk) * 30px); border-radius: 50%;
  border: none; padding: 0; display: grid; place-items: center;
  background: var(--plastic-dk); color: var(--plastic-hi);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5); font-size: calc(var(--kk) * 16px);
}
.kb-close:hover, .kb-close:focus-visible { background: #3e3829; outline: none; }
/* at the paper's left edge; the keyboard drawing fills the whole key */
.kb-open {
  align-self: flex-start;
  width: calc(var(--k) * 74px); height: calc(var(--k) * 48px); padding: calc(var(--k) * 5px) calc(var(--k) * 6px);
  border: none; border-radius: calc(var(--k) * 7px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90); color: var(--key-text);
  box-shadow: 0 calc(var(--k) * 4px) 0 #8a7f64, 0 calc(var(--k) * 10px) calc(var(--k) * 18px) rgba(0, 0, 0, .55);
  display: grid; place-items: center; font-size: calc(var(--k) * 30px);
  display: none;   /* no keyboard key, on computers or phones (the owner, 2026-10-07) */
}
.kb-open svg { width: 100%; height: 100%; }
.kb-open[aria-pressed="false"] { background: linear-gradient(180deg, #c9ecd2, #9fd6b0 60%, #79b48c); }
.kb-open:active { transform: translateY(calc(var(--k) * 4px)); box-shadow: 0 0 0 #8a7f64; }
/* to the right of the keyboard key: a numbered key for each sentence; the
   sentence playing, or last played, stays pressed down */
.side-keys { align-self: flex-start; display: flex; gap: calc(var(--k) * 14px); direction: ltr; }
.parts { display: flex; gap: calc(var(--k) * 10px); }
.part-key {
  width: calc(var(--k) * 48px); height: calc(var(--k) * 48px); padding: 0;
  border: none; border-radius: calc(var(--k) * 7px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90); color: var(--key-text);
  box-shadow: 0 calc(var(--k) * 4px) 0 #8a7f64, 0 calc(var(--k) * 10px) calc(var(--k) * 18px) rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  font: 800 calc(var(--k) * 28px)/1 'Vazirmatn', Tahoma, sans-serif;
  touch-action: manipulation;
}
.part-key:active, .part-key[aria-pressed="true"] {
  transform: translateY(calc(var(--k) * 4px)); background: #cfc4a6;
  box-shadow: 0 0 0 #8a7f64, 0 calc(var(--k) * 6px) calc(var(--k) * 12px) rgba(0, 0, 0, .5);
}
.part-key:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }

/* a phone: the monitor at the very top, the paper under it filling the
   rest of the screen, then the keyboard key and the sentence keys, then
   the keyboard when it is out */
@media (max-width: 699px) {
  #room {
    flex-direction: column; justify-content: flex-start; gap: 10px;
    height: 100%; height: 100dvh;
    padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  #desk { display: contents; }
  #monitor { order: 1; flex: none; }
  #side {
    order: 2; flex: 1; min-height: 0;
    flex-direction: column; align-items: stretch; gap: 10px;
    width: calc(var(--sw) + var(--k) * 60px);
  }
  #keyboard { order: 3; flex: none; }
  #paper {
    flex: 1; width: auto; height: auto; min-height: calc(var(--sw) * 0.34);
    transform: none; --pl: 38px;
    padding: calc(var(--pl) * 0.2) 26px 10px 16px;   /* writing from the very first ruled line */
  }
  .subs { font-size: 22px; }
  .page-turn { font-size: 15px; padding: 4px 9px; }
  .gloss b { font-size: 18px; }
  .gloss .mean { font-size: 14px; }
  .gloss i { font-size: 14px; }
  .side-keys { align-self: flex-start; gap: 10px; }
  .kb-open { display: none; }   /* phones type on their own keyboard (the owner, 2026-10-07) */
  .parts { gap: 10px; }
  .part-key { width: 44px; height: 44px; font-size: 22px; }
}
.kb-open:focus-visible, .kb-close:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}