/* semurg.org, the Semurg Operating System's website. The Glass look's tokens (sos-v01 glass.css, the Semurg design
   standard 1.0, DS1-DS8): frosted panels over a wallpaper, Noto Sans and Geist Mono, one indigo accent, red only in the
   Semurg logo. Light, Dark or Outdoors and the wallpaper (Dunes, as SOS02; Ribbons, as SOS01) are chosen in the menu bar;
   mode.js keeps the choice for every page, and without it the radios are read here with :has(). No frost grain anywhere (Pavel, 4 Nov 2026). */

@font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

/* ---- tokens: day ---- */
:root {
  --f-ui: "Noto Sans", system-ui, sans-serif; --f-mono: "Geist Mono", ui-monospace, monospace;
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 18px; --fs-5: 24px; --fs-6: 32px; --fs-7: clamp(32px, 4.6vw, 54px);
  --lh-tight: 1.15; --lh-body: 1.55; --w-strong: 600; --w-display: 650;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 56px; --sp-8: 96px;
  --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --page: 1180px;

  --c-ink: #0c1220; --c-ink-2: #384257; --c-ink-3: #5a6378; --c-line: rgba(12, 18, 32, .11);
  --c-surface: rgba(255, 255, 255, .72); --c-surface-2: rgba(255, 255, 255, .5); --c-raised: rgba(255, 255, 255, .9);
  --c-accent: #3d4fd1; --c-accent-ink: #ffffff; --c-accent-soft: rgba(61, 79, 209, .14);
  --c-good: #166030; --c-focus: #3d4fd1; --c-solid: #ffffff; --c-bad: #a8211a;
  --glass: blur(22px); --edge: rgba(255, 255, 255, .72); --edge-in: rgba(255, 255, 255, .85); --line: 1px;
  --sh-card: 0 6px 22px rgba(18, 28, 60, .10); --sh-win: 0 26px 70px rgba(18, 28, 60, .24);
  --dur: 200ms; --ease: cubic-bezier(0, 0, 0, 1);

  --wall-dunes: url("../img/dunes-light.svg"); --floor-dunes: #f6e7cf;
  --wall-ribbons: url("../img/ribbons-light.svg"); --floor-ribbons: #b9c8e8;
  --wall: var(--wall-dunes); --c-floor: var(--floor-dunes);
  color-scheme: light dark;
}
:root { color-scheme: light; }

/* ---- the mode, chosen in the menu (Pavel 4 Nov 2026 22:49): Light, Dark (the first a visitor sees) or Outdoors. mode.js sets
   data-theme and data-wall from the visitor's last choice before the page is drawn, so every page follows it; without the script the
   radios are read here with :has(). ---- */
:root:not([data-theme]):has(#t-dark:checked), :root[data-theme="dark"] {
  --c-ink: #eef1f8; --c-ink-2: #b8c0d2; --c-ink-3: #8a93a8; --c-line: rgba(255, 255, 255, .11);
  --c-surface: rgba(20, 25, 40, .72); --c-surface-2: rgba(28, 34, 52, .55); --c-raised: rgba(44, 52, 76, .85);
  --c-accent: #8592ff; --c-accent-ink: #0b1020; --c-accent-soft: rgba(133, 146, 255, .2); --c-good: #5ad184; --c-focus: #8592ff; --c-solid: #171c2e; --c-bad: #ff948b;
  --edge: rgba(255, 255, 255, .14); --edge-in: rgba(255, 255, 255, .08);
  --sh-card: 0 6px 22px rgba(0, 0, 0, .35); --sh-win: 0 26px 70px rgba(0, 0, 0, .55);
  --wall-dunes: url("../img/dunes-dark.svg"); --floor-dunes: #1a1424;
  --wall-ribbons: url("../img/ribbons-dark.svg"); --floor-ribbons: #0d1430;
  color-scheme: dark;
}
/* the glass icons, as in SOS (app.css): in the dark the front lets more colour through and its edge is fainter */
:root:not([data-theme]):has(#t-dark:checked) .gl-top, :root[data-theme="dark"] .gl-top { stop-opacity: .3; }
:root:not([data-theme]):has(#t-dark:checked) .gl-bot, :root[data-theme="dark"] .gl-bot { stop-opacity: .1; }
:root:not([data-theme]):has(#t-dark:checked) .gl-etop, :root[data-theme="dark"] .gl-etop { stop-opacity: .6; }
:root:not([data-theme]):has(#t-dark:checked) .gl-ebot, :root[data-theme="dark"] .gl-ebot { stop-opacity: .14; }
:root:not([data-theme]):has(#t-dark:checked) .gl-shadow, :root[data-theme="dark"] .gl-shadow { fill: #000; opacity: .5; }

/* ---- the wallpaper ---- */
:root:not([data-wall]):has(#w-ribbons:checked), :root[data-wall="ribbons"] { --wall: var(--wall-ribbons); --c-floor: var(--floor-ribbons); }

/* ---- Outdoors: white with high contrast, for sun and glare (BOS Settings > Appearance), no glass and no wallpaper ---- */
:root:not([data-theme]):has(#t-out:checked), :root[data-theme="out"] {
  --c-ink: #000000; --c-ink-2: #1b1f27; --c-ink-3: #353b47; --c-line: rgba(0, 0, 0, .38);
  --c-surface: #ffffff; --c-surface-2: #eef0f4; --c-raised: #ffffff;
  --c-accent: #1f2fb0; --c-accent-ink: #ffffff; --c-accent-soft: rgba(31, 47, 176, .12); --c-good: #0b5a24; --c-focus: #000000; --c-solid: #ffffff; --c-bad: #8f150f;
  --glass: none; --edge: rgba(0, 0, 0, .6); --edge-in: transparent;
  --sh-card: none; --sh-win: 0 0 0 1px rgba(0, 0, 0, .6);
  --c-floor: #ffffff;
  color-scheme: light;
}
:root:not([data-theme]):has(#t-out:checked) .floor, :root[data-theme="out"] .floor { background: #ffffff; }

/* ---- the page ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--c-floor); color: var(--c-ink); font: 400 var(--fs-3)/var(--lh-body) var(--f-ui);
  -webkit-font-smoothing: antialiased; }
.floor { position: fixed; inset: 0; z-index: -1; background: var(--wall) center bottom / cover no-repeat, var(--c-floor); }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: var(--w-display); letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-s); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--sp-4); top: -60px; z-index: 10; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink); text-decoration: none; }
.skip:focus { top: var(--sp-3); }

/* glass: the frosted face every panel shares */
.bar, .card, .panel, .win, .sos-card, .dock {
  background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-card), inset 0 1px 0 var(--edge-in);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.gi { display: block; }

/* ---- the bar ---- */
.bar { position: sticky; top: var(--sp-3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  width: min(var(--page), calc(100% - 2 * var(--sp-4))); margin: var(--sp-3) auto 0; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.brand .gi { width: 32px; height: 32px; }
.brand-name { font-weight: 700; letter-spacing: .005em; white-space: nowrap; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); color: var(--c-ink-2); font-size: var(--fs-2); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover { background: var(--c-raised); color: var(--c-ink); }
.nav a[aria-current="page"] { background: var(--c-raised); color: var(--c-ink); font-weight: var(--w-strong); }
.bar .seg label { padding: 4px 9px; }
.bar .seg-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view { display: flex; gap: var(--sp-2); }
.foot .view { flex-wrap: wrap; }

/* a segmented switch: real radios, kept for the keyboard and screen readers, drawn as their labels */
.seg { display: inline-flex; margin: 0; padding: 2px; border: var(--line) solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface-2); min-inline-size: 0; }
.seg label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); color: var(--c-ink-2); font-size: 13px;
  line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg label:hover { color: var(--c-ink); }
.seg-in:checked + label { background: var(--c-raised); color: var(--c-ink); font-weight: var(--w-strong); box-shadow: 0 1px 4px rgba(18, 28, 60, .14); }
.seg-in:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: var(--line) solid var(--c-line); background-size: cover; background-position: center bottom; }
.swatch-dunes { background-image: var(--wall-dunes); }
.swatch-ribbons { background-image: var(--wall-ribbons); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-5); border-radius: var(--r-pill);
  border: var(--line) solid var(--edge); background: var(--c-raised); color: var(--c-ink); font-weight: var(--w-strong); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-card); }
.btn-primary { background: var(--c-accent); border-color: transparent; color: var(--c-accent-ink); }
.btn-s { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-2); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- the hero ---- */
main { width: min(var(--page), calc(100% - 2 * var(--sp-4))); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); align-items: center;
  min-height: min(660px, calc(100vh - 80px)); padding: var(--sp-7) 0 0; }
.eyebrow { color: var(--c-ink-2); font: 500 var(--fs-2)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.hero h1 { font-size: var(--fs-7); font-weight: 700; letter-spacing: -.025em; margin-bottom: var(--sp-5); text-wrap: balance; }
.lede { font-size: clamp(var(--fs-3), 1.5vw, 18px); color: var(--c-ink-2); max-width: 34em; text-wrap: pretty; }
.lede-ai { margin-top: var(--sp-3); color: var(--c-ink); font-weight: var(--w-strong); }
.hero .ctas { margin-top: var(--sp-6); }

/* the drawing: Claude building an app, SOS's answer, the dock */
.desk { position: relative; margin: 0; padding: 0 0 var(--sp-6); }
.win { border-radius: var(--r-l); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); overflow: hidden; }
.win-bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: var(--line) solid var(--c-line); }
.win-title { font-weight: var(--w-strong); }
.win-meta { color: var(--c-ink-3); font: var(--fs-1) var(--f-mono); }
.term-body { padding: var(--sp-4) var(--sp-5) var(--sp-6); font: var(--fs-2)/1.6 var(--f-mono); }
.term-ask { color: var(--c-ink); }
.term-ask::before { content: "> "; color: var(--c-accent); font-weight: 700; }
.term-done { list-style: none; margin: var(--sp-3) 0 0; padding: 0; color: var(--c-ink-2); }
.term-done li::before { content: "✓ "; color: var(--c-good); font-weight: 700; }
.term-ready { margin-top: var(--sp-3); color: var(--c-ink); font-weight: var(--w-strong); }
.sos-card { position: relative; width: min(340px, 88%); margin: calc(-1 * var(--sp-5)) 0 0 auto; transform: translateX(var(--sp-5));
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-l); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); }
.sos-who { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--w-strong); margin-bottom: var(--sp-2); }
.sos-who .gi { width: 24px; height: 24px; }
.sos-card p { font-size: var(--fs-2); }
.sos-src { margin-top: var(--sp-2); color: var(--c-ink-3); font: var(--fs-1) var(--f-mono); }
.dock { display: flex; align-items: center; gap: var(--sp-1); width: max-content; max-width: 100%; margin: var(--sp-5) auto 0; padding: var(--sp-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); }
.dock-i { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-m); }
.dock-i .gi { width: 48px; height: 48px; }
.dock-on { background: var(--c-raised); }
.dock-on::after { content: ""; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-ink-2); }
.dock-sep { width: var(--line); align-self: stretch; margin: var(--sp-2) var(--sp-1); background: var(--c-line); }

/* ---- sections ---- */
.sect { padding: var(--sp-8) 0 0; }
.sect-first { padding-top: var(--sp-7); }
.sect h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.02em; text-wrap: balance; max-width: 22em; }
.sect-lede { margin-top: var(--sp-3); color: var(--c-ink-2); font-size: var(--fs-3); }
.sect-note { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.sect-note span, .without li { display: inline-block; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--c-surface);
  border: var(--line) solid var(--edge); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: var(--c-ink-2); font-size: var(--fs-2); }
.cards { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.privacy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; padding: var(--sp-5); border-radius: var(--r-l); }
.card h3 { font-size: var(--fs-4); margin: var(--sp-3) 0 var(--sp-2); }
.card p, .panel p { color: var(--c-ink-2); }
.card-ic, .panel-ic { display: flow-root; width: 64px; height: 64px; margin: -4px 0 0 -4px; }
.card-ic .gi, .panel-ic .gi { width: 100%; height: 100%; }
.card-row { display: flex; gap: var(--sp-4); align-items: flex-start; }
.card-row .card-ic { flex: none; }
.card-row h3 { margin-top: var(--sp-1); }
.steps .card { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.steps h3 { font-size: var(--fs-5); }
.step-n { position: absolute; top: var(--sp-5); right: var(--sp-5); font: 600 var(--fs-6)/1 var(--f-mono); color: var(--c-ink-3); opacity: .55; }
.without { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.without li { color: var(--c-ink); font-weight: var(--w-strong); }
.proof { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.proof .panel-ic { flex: none; }
.proof p { color: var(--c-ink); font-size: var(--fs-3); max-width: 46em; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.panel { padding: var(--sp-6); border-radius: var(--r-xl); }
.panel h3 { font-size: var(--fs-5); margin: var(--sp-4) 0 var(--sp-2); }
.panel-ic { width: 72px; height: 72px; }
.panel-wide { max-width: 760px; }
.panel-wide > * + * { margin-top: var(--sp-4); }
.panel-wide h2 + p { margin-top: var(--sp-5); }
.next { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.next li { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--c-surface-2); border: var(--line) solid var(--c-line); font-size: var(--fs-2); }
.prose h1 { font-size: var(--fs-6); }
.prose h2 { font-size: var(--fs-5); margin-top: var(--sp-6); }
.prose ul { padding-left: var(--sp-5); color: var(--c-ink-2); }
.prose a:not(.btn) { color: var(--c-accent); }

/* ---- the foot ---- */
.foot { margin-top: var(--sp-8); padding: 0 var(--sp-4) var(--sp-6); }
.foot-in { width: min(var(--page), 100%); margin: 0 auto; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-l);
  background: var(--c-surface); border: var(--line) solid var(--edge); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: center; color: var(--c-ink-2); font-size: var(--fs-2); }
.foot-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--w-strong); color: var(--c-ink); }
.foot-brand .gi { width: 24px; height: 24px; }
.foot-links { display: flex; gap: var(--sp-4); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-note { margin-left: auto; color: var(--c-ink-3); }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  /* the three pages move to a row of their own under the brand, the mode and the button */
  .nav { order: 4; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .bar .view { margin-left: auto; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); min-height: 0; padding-top: var(--sp-6); }
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .sos-card { transform: none; }
}
/* phones and touch screens (AD-118, Pavel 22 Oct 2026: usable on a phone): every tap target at least 44 px high,
   Apple's 44 pt and WCAG 2.5.5 */
@media (max-width: 720px), (pointer: coarse) {
  .brand { min-height: 44px; }
  .btn-s { min-height: 44px; }
  .seg label { min-height: 44px; padding: 0 12px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .form input:not([type="checkbox"]), .form textarea { min-height: 44px; }
  .check label { min-height: 44px; }
}
@media (max-width: 720px) {
  /* the bar scrolls away with the page: held at the top in two rows it would cover a seventh of a phone's screen */
  html { scroll-padding-top: var(--sp-4); }
  .bar { position: relative; top: auto; border-radius: var(--r-l); padding: var(--sp-2) var(--sp-3); }
  .brand { flex: 1; min-width: 0; }
  .brand-name { font-size: var(--fs-2); }
  .bar .view { order: 3; width: 100%; flex-wrap: wrap; margin-left: 0; }
  .seg { flex: 1 1 auto; }
  .seg label { flex: 1 1 auto; justify-content: center; }
  .btn-talk { order: 2; }
}
@media (max-width: 640px) {
  .cards-2, .cards-4, .pair, .privacy { grid-template-columns: minmax(0, 1fr); }
  .sect { padding-top: var(--sp-7); }
  .panel { padding: var(--sp-5); }
  .proof { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .dock-i { width: 40px; height: 40px; }
  .dock-i .gi { width: 36px; height: 36px; }
  .dock-i:nth-child(n+6):not(:last-child), .dock-sep { display: none; }
  .foot-note { margin-left: 0; }
  .solid { padding: var(--sp-5); }
  /* a long label wraps instead of pushing the page wider than the phone (the licences page's way back) */
  .btn { white-space: normal; text-align: center; padding-block: var(--sp-2); }
}
@media (max-width: 400px) {
  .seg label { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav a, .seg label { transition: none; }
  .btn:hover { transform: none; }
}

/* the official Semurg logo (AD-108 addendum 5, Pavel 22 Oct 2026): the classic hexagon and the "semurg" wordmark, then
   BOS; the glass icon only for the BOS helper in the dock */
.brand-mark { width: 24px; height: 27px; flex: none; }
.brand-word { width: 77px; height: 18px; flex: none; color: var(--c-ink); }
.foot-mark { width: 16px; height: 18px; flex: none; }
.foot-word { width: 60px; height: 14px; flex: none; color: var(--c-ink); }
.card-ic .gi-mark, .panel-ic .gi-mark { width: 44px; height: 50px; margin: 7px 10px; }
.sos-who .gi-mark { width: 18px; height: 21px; }


/* ---- the interim page (Pavel, 23 Oct 2026: "update the website to its best interim condition"; the panel's order) ---- */
/* the hero: straight to BOS, and an answer that shows the sentence it came from */
.go { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
.go .ctas { margin: 0; }
.go-note { color: var(--c-ink-2); font-size: var(--fs-2); }
.ask-win { margin-bottom: var(--sp-3); }
.ask-q { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-4); font-weight: var(--w-strong); }
.rcpt { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: 4px; padding: 0 .3em; border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink); font: 700 12px/1 var(--f-ui); vertical-align: .15em; }
.receipt { display: flex; gap: var(--sp-3); align-items: flex-start; width: min(380px, 92%); margin: var(--sp-3) 0 0 auto; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-l); background: var(--c-surface); border: var(--line) solid var(--edge); border-left: 3px solid var(--c-accent);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--sh-card); font-size: var(--fs-2); }
.receipt q { font-style: italic; }
.receipt-from { display: block; margin-top: 2px; color: var(--c-ink-3); font: var(--fs-1) var(--f-mono); }

/* every answer shows the sentence it came from */
.trail-steps { list-style: none; margin: var(--sp-4) 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.trail-steps li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trail-steps li + li::before { content: "→"; color: var(--c-ink-3); }
.chip { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: var(--line) solid var(--c-line);
  background: var(--c-surface-2); font-size: var(--fs-2); }
.chip-person { background: var(--c-accent-soft); }
.chip-quote { font-style: italic; border-color: var(--c-accent); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.vs-side { display: grid; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-l); background: var(--c-surface-2); border: var(--line) solid var(--c-line); }
.vs-bos { background: var(--c-accent-soft); border-color: var(--c-accent); }
.vs-l { color: var(--c-ink-2); font-size: var(--fs-2); }
.vs-n { font-size: var(--fs-6); font-weight: 700; line-height: 1.1; }
.vs-s { color: var(--c-ink-2); font-size: var(--fs-2); }

/* the small BOS desk: with no script, or on a narrow screen, its windows stand one under another */
.mini { position: relative; display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-xl);
  background: var(--wall) center bottom / cover no-repeat, var(--c-floor); border: var(--line) solid var(--edge); box-shadow: var(--sh-win); overflow: hidden; }
.mini-icons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mi { display: grid; justify-items: center; gap: var(--sp-1); width: 88px; min-height: 44px; padding: var(--sp-2); border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--c-ink); font: 600 13px/1.25 var(--f-ui); text-align: center; cursor: pointer; touch-action: none; }
.mi .gi { width: 44px; height: 44px; }
.mi:hover { background: var(--c-surface-2); }
.mi.is-reading .gi { animation: mini-read .55s ease-in-out infinite alternate; }
.mi.is-used { opacity: .55; }
.mw { background: var(--c-surface); border: var(--line) solid var(--edge); border-radius: var(--r-l); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); overflow: hidden; }
.mw-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-bottom: var(--line) solid var(--c-line); touch-action: none; }
.mw-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--w-strong); font-size: var(--fs-2); }
.mw-title .gi { width: 16px; height: 18px; }
.mw-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--c-ink-2); font-size: var(--fs-4); line-height: 1; cursor: pointer; }
.mw-x:hover { background: var(--c-raised); color: var(--c-ink); }
.mw-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); font-size: var(--fs-2); }
.mw-body p { margin: 0 0 var(--sp-2); border-radius: var(--r-s); }
.mw-body p:last-child { margin-bottom: 0; }
.nm { display: inline; padding: 0 4px; border: 0; border-radius: 6px; background: var(--c-accent-soft); color: inherit; font: inherit; font-weight: var(--w-strong);
  cursor: pointer; transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.nm:hover { box-shadow: 0 0 0 1px var(--c-accent); }
.nm.is-lit { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.rc { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: 3px; padding: 0 .3em; border: 0; border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink); font: 700 12px/1 var(--f-ui); vertical-align: .1em; cursor: pointer; }
.rc:hover { box-shadow: 0 0 0 3px var(--c-accent-soft); }
.is-hit { animation: mini-hit 2.4s var(--ease); }
.cal-d { display: flex; gap: var(--sp-3); }
.cal-d b { flex: none; width: 5.5em; color: var(--c-ink-2); }
.task { position: relative; padding-left: 24px; }
.tick { position: absolute; left: 0; top: .25em; width: 14px; height: 14px; border: 2px solid var(--c-ink-3); border-radius: 4px; }
.is-new { animation: mini-hit 2.4s var(--ease); }
.asks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ask { min-height: 36px; padding: 0 var(--sp-3); border: var(--line) solid var(--edge); border-radius: var(--r-pill); background: var(--c-raised); color: var(--c-ink);
  font: 600 var(--fs-2) var(--f-ui); cursor: pointer; }
.ask.is-on { background: var(--c-accent); border-color: transparent; color: var(--c-accent-ink); }
.ans { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); border-left: 3px solid var(--c-accent); }
.ans-note { margin-top: var(--sp-3); color: var(--c-ink-3); font-size: var(--fs-1); }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.card-go { display: grid; gap: 2px; width: 100%; padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m);
  background: var(--c-surface-2); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.card-go b { font-size: var(--fs-1); color: var(--c-ink-2); }
.card-go:hover { border-color: var(--c-accent); }
.mini-toast { justify-self: center; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--c-raised); border: var(--line) solid var(--edge);
  box-shadow: var(--sh-card); font-size: var(--fs-2); font-weight: var(--w-strong); }
.mini-reset { justify-self: end; }
.mini:not(.is-live) .mini-reset, .mini:not(.is-live) .mi-file { display: none; }
.mini [hidden] { display: none !important; }
.is-pop { animation: mini-pop .28s var(--ease); }
@keyframes mini-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mini-hit { 0%, 30% { background: var(--c-accent-soft); box-shadow: 0 0 0 3px var(--c-accent); } 100% { background: transparent; box-shadow: none; } }
@keyframes mini-read { to { transform: scale(1.12) rotate(-4deg); } }

/* on a wider screen the desk is a desk: windows where they are put, dragged by their title bars (mouse or touch) */
@media (min-width: 721px) {
  .mini.is-live { display: block; height: 660px; padding: 0; }
  .mini.is-live .mini-icons { position: absolute; left: var(--sp-3); top: var(--sp-3); bottom: var(--sp-3); width: 96px; z-index: 1; flex-direction: column; }
  .mini.is-live .mi { cursor: grab; }
  .mini.is-live .mw { position: absolute; width: min(360px, 40%); }
  .mini.is-live .mw-bar { cursor: grab; }
  .mini.is-live .is-drag, .mini.is-live .is-drag .mw-bar { cursor: grabbing; }
  .mini.is-live .mi.is-moved { position: absolute; z-index: 2; }
  .mini.is-live .mi.is-drag { z-index: 999; }
  .mini.is-live #w-computer { left: 13%; top: 4%; width: min(380px, 36%); }
  .mini.is-live #w-bin { left: 13%; top: 54%; width: min(340px, 34%); }
  .mini.is-live #w-fusion { left: 46%; top: 4%; width: min(600px, 52%); }
  .mini.is-live .fbody { height: 520px; overflow: auto; overscroll-behavior: contain; }
  .mini.is-live .mini-toast { position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); z-index: 1000; white-space: nowrap; }
  .mini.is-live .mini-reset { position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: 1000; }
}

/* building, and the engine */
.build-demo { max-width: 620px; margin-top: var(--sp-6); }
.engine { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.engine .cards { margin-top: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.cluster { margin: var(--sp-6) 0 0; padding: var(--sp-5); border-radius: var(--r-xl); background: var(--c-surface); border: var(--line) solid var(--edge);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--sh-card); display: grid; gap: var(--sp-4); }
.cl-memory { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-l);
  background: var(--c-accent-soft); font-weight: var(--w-strong); }
.cl-mark { width: 20px; height: 23px; }
.cl-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); position: relative; }
.cl-node { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-m); background: var(--c-surface-2); border: var(--line) solid var(--c-line); }
.cl-node .gi { width: 70%; height: 70%; }
.cl-add { border-style: dashed; color: var(--c-ink-3); font-size: var(--fs-6); animation: cl-join 3.2s var(--ease) infinite; }
@keyframes cl-join { 0%, 40% { opacity: .35; transform: translateY(6px); } 70%, 100% { opacity: 1; transform: none; } }
@media (max-width: 960px) { .engine { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .vs { grid-template-columns: minmax(0, 1fr); } .receipt { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .is-hit, .is-new, .is-pop, .cl-add, .mi.is-reading .gi { animation: none; } }

/* the public demo's desk (#try): the folder's files, Fusion with a tab per file, the marked sentence, the steps */
.flist { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 2px; }
.fl { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 36px; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-s);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fl:hover { background: var(--c-surface-2); }
.fl.is-on { background: var(--c-accent-soft); }
.fn { min-width: 0; overflow-wrap: anywhere; }
.ft { flex: none; display: inline-block; min-width: 6.5em; padding: 1px var(--sp-2); border-radius: var(--r-pill); border: var(--line) solid var(--c-line);
  color: var(--c-ink-2); font: var(--fs-1) var(--f-mono); text-align: center; }
.fdoc-name .ft { min-width: 0; margin-left: var(--sp-1); vertical-align: middle; }
.ftabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 var(--sp-2); border-bottom: var(--line) solid var(--c-line); scrollbar-width: thin; }
.ftabs:empty { display: none; }
.ftab { flex: none; max-width: 15em; min-height: 32px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-s) var(--r-s) 0 0; background: transparent;
  color: var(--c-ink-2); font: var(--fs-1) var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ftab.is-on { background: var(--c-surface-2); color: var(--c-ink); font-weight: var(--w-strong); }
.fdoc + .fdoc { margin-top: var(--sp-5); }
.fdoc-name { margin: 0 0 var(--sp-3); font-size: var(--fs-3); overflow-wrap: anywhere; }
.pp { font-weight: var(--w-strong); }
.is-cited { background: var(--c-accent-soft); box-shadow: -3px 0 0 var(--c-accent); }
.csv-wrap { overflow-x: auto; }
.csv { border-collapse: collapse; font: var(--fs-1)/1.4 var(--f-mono); white-space: nowrap; }
.csv th, .csv td { padding: 3px var(--sp-2); border-bottom: var(--line) solid var(--c-line); text-align: left; }
.csv th { color: var(--c-ink-2); }
.csv tr.is-cited td { background: var(--c-accent-soft); }
.asks .ask { text-align: left; }
.ans-q { color: var(--c-ink-2); font-size: var(--fs-1); }
.ans-list { margin: 0 0 var(--sp-2); padding-left: 1.2em; }
.ans-by, .ans-count { color: var(--c-ink-3); font-size: var(--fs-1); }
.walk-pair { margin-top: var(--sp-6); align-items: start; }
.walk { margin: var(--sp-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--sp-3); }
.walk p { margin: 0; }
.qs { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; }
.q-ask { margin: 0; font-weight: var(--w-strong); }
.q-must, .q .wait { grid-column: 1 / -1; margin: 0; color: var(--c-ink-2); font-size: var(--fs-2); }
.wait { margin-top: var(--sp-1); color: var(--c-ink-3); font-size: var(--fs-1); font-style: italic; }
.sect-more { margin-top: var(--sp-5); }
.feat-top h1 { font-size: clamp(32px, 5vw, 52px); }
.feat-top h1 { margin: var(--sp-2) 0 0; }
@media (max-width: 720px), (pointer: coarse) { .fl, .ftab, .copy { min-height: 44px; } }
.srcs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.srcs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); align-items: center; padding: var(--sp-2); border-radius: var(--r-s);
  border: var(--line) solid var(--c-line); }
.src-name { font: var(--fs-1) var(--f-mono); overflow-wrap: anywhere; }
.srcs q { grid-column: 1; color: var(--c-ink-2); font-size: var(--fs-1); font-style: italic; }
.src-open { grid-column: 2; grid-row: 1 / span 2; }
.fband { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-4); background: var(--c-accent-soft); font-size: var(--fs-1); }
.mini [data-band][hidden] { display: none !important; }


/* ---- the two forms and the privacy lines (WEB TONIGHT W1, 4 Nov 2026) ----
   Solid, not glass: a form is read and typed into, so its card is opaque (DESIGN_LEAD's brief) and the text on it keeps its
   contrast over either wallpaper in Light and Dark. */
.solid { padding: var(--sp-6); border-radius: var(--r-xl); background: var(--c-solid); color: var(--c-ink); border: var(--line) solid var(--c-line); box-shadow: var(--sh-card); }
.solid h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-5); }
.solid > p { color: var(--c-ink-2); margin: 0 0 var(--sp-4); }
.pair.forms { align-items: start; }
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-1); min-width: 0; }
.field label, .check label { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--c-ink); }
.check label { font-weight: 400; color: var(--c-ink-2); }
.form input:not([type="checkbox"]), .form textarea { width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); border: 1px solid var(--c-ink-3);
  background: var(--c-solid); color: var(--c-ink); font: inherit; font-size: var(--fs-3); }
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus-visible, .form textarea:focus-visible, .check input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--c-bad); }
.field-note { margin: 0; color: var(--c-ink-3); font-size: var(--fs-1); }
.field-error { margin: 0; color: var(--c-bad); font-size: var(--fs-2); font-weight: var(--w-strong); }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; }
.check input { width: 22px; height: 22px; margin: 11px 0 0; accent-color: var(--c-accent); }
.check label { padding-block: var(--sp-2); }
.check .field-error { grid-column: 2; }
.form-go { justify-self: start; font: inherit; font-weight: var(--w-strong); }
.form-summary { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); border: 1px solid var(--c-bad); color: var(--c-bad); font-weight: var(--w-strong); }
.form-summary a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.engine-one { grid-template-columns: minmax(0, 1fr); }
.hp { display: none; }
.solid > .form-privacy { margin: var(--sp-4) 0 0; color: var(--c-ink-2); font-size: var(--fs-2); }
.form-privacy a { color: var(--c-accent); }
.privacy { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 0; }
.privacy .solid { padding: var(--sp-5); }
.privacy dt { font-weight: var(--w-strong); font-size: var(--fs-4); margin: 0 0 var(--sp-1); }
.privacy dd { margin: 0; color: var(--c-ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .form-go { justify-self: stretch; width: 100%; } }
/* the hero drawing says what it is, for everyone (IDEAS2 M-1, 4 Nov 2026): not a recording */
.desk-cap { margin: var(--sp-3) 0 0; color: var(--c-ink-2); font-size: var(--fs-2); max-width: 28em; margin-left: auto; }
.desk-cap-flat { margin-left: 0; margin-top: var(--sp-4); }

/* the real test: two screenshots and the honest count (W0) */
.pair-one { grid-template-columns: minmax(0, 1fr); }
.real-shot { margin: 0; max-width: 920px; display: grid; gap: var(--sp-3); align-content: start; }
.real-shot img { width: 100%; height: auto; display: block; border-radius: var(--r-l); border: var(--line) solid var(--c-line); }
.real-shot figcaption { color: var(--c-ink); font-size: var(--fs-2); }
.real-count { margin-top: var(--sp-5); max-width: 62ch; }
.nb { white-space: nowrap; }

/* One server (server.html): the thin line for what is in front sits above the server panel and reads smaller than it */
.server-front { margin-bottom: var(--sp-3); }
.server-box > .eyebrow { margin-bottom: var(--sp-4); }
.sect .server-without-title { margin: var(--sp-6) 0 0; font-size: var(--fs-5); }

/* Real answers as tabs (MEDIA 4 Nov 22:00, Pavel 21:10: interactive, real chat only). Radios, no script: every shot shows when :has is not there. */
.rt-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-4); }
.rt-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.rt-tabs label { padding: 8px 14px; border-radius: var(--r-pill); border: var(--line) solid var(--c-line); background: var(--c-surface-2);
  color: var(--c-ink-2); font-size: var(--fs-2); cursor: pointer; }
.rt-tabs input:checked + label { background: var(--c-accent); border-color: transparent; color: var(--c-accent-ink); }
.rt-tabs input:focus-visible + label { outline: 2px solid var(--c-focus, var(--c-accent)); outline-offset: 2px; }
@supports selector(:has(*)) {
  .rt .real-shot { display: none; }
  .rt:has(#rt-q6:checked) .real-shot[data-k="q6"], .rt:has(#rt-q12:checked) .real-shot[data-k="q12"],
  .rt:has(#rt-q9:checked) .real-shot[data-k="q9"], .rt:has(#rt-q8:checked) .real-shot[data-k="q8"],
  .rt:has(#rt-graph:checked) .real-shot[data-k="graph"] { display: block; }
}

/* Build on Semurg (MEDIA 4 Nov 22:01) */
.rule { margin-top: var(--sp-5); max-width: 46em; }
.rule h3 { font-size: var(--fs-4); margin-bottom: var(--sp-2); }
.prompt-win { margin-top: var(--sp-4); }
.prompt-win .win-bar { display: flex; align-items: center; justify-content: space-between; }
.prompt { margin: 0; padding: var(--sp-4) var(--sp-5); white-space: pre-wrap; font: var(--fs-2)/1.6 var(--f-mono); color: var(--c-ink); max-height: 32em; overflow: auto; }
.tool-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.tool-list a { display: inline-block; padding: 8px 14px; border-radius: var(--r-pill); border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); font-size: var(--fs-2); text-decoration: none; }
.tool-list a:hover { border-color: var(--c-accent); }
.video { margin-top: var(--sp-4); }
.video video { width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-card, 16px); display: block; background: #000; }

/* Request demo access: one form in a dialog on every page (Pavel 4 Nov 22:26). Without the script a link to #ask-demo opens it by :target. */
.dlg { padding: 0; border: 0; background: transparent; color: var(--c-ink); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.dlg::backdrop { background: rgb(0 0 0 / .55); }
.dlg:target:not([open]) { display: block; position: fixed; inset: 16px 0 auto; margin: 0 auto; z-index: 50; overflow: auto; }
.dlg-in { padding: var(--sp-5); border-radius: var(--r-xl); background: var(--c-solid); border: var(--line) solid var(--c-line); box-shadow: var(--sh-card); }
.dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dlg-bar h2 { margin: 0; font-size: var(--fs-5); }
.dlg-x { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--r-pill); color: var(--c-ink); text-decoration: none; font-size: 26px; line-height: 1; }
.dlg-x:hover { background: var(--c-surface-2); }
.dlg .form-privacy { margin: var(--sp-4) 0 0; color: var(--c-ink-2); font-size: var(--fs-2); }
.dlg, .dlg:focus, .dlg:target { outline: none; }
.dlg .form-intro { margin: var(--sp-2) 0 var(--sp-4); }

/* ---- the Try it desk as an OS (Pavel 4 Nov 22:49): Computer, a Bin that keeps and restores, Word and Excel in Fusion ---- */
.folders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.fold { display: grid; justify-items: center; gap: var(--sp-1); width: 100%; min-height: 44px; padding: var(--sp-2); border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-1); cursor: default; }
.fold:hover { background: var(--c-surface-2); }
.fold .gi { width: 40px; height: 40px; }
.mi-bin { position: relative; }
.mi-bin.is-full::after { content: attr(data-count); position: absolute; top: 4px; right: 18px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--c-accent); color: var(--c-accent-ink); font-size: var(--fs-1); line-height: 18px; text-align: center; }
.mi-bin.is-over { background: var(--c-accent-soft); outline: 2px dashed var(--c-accent); }
.mi.is-binned { display: none; }
.bin-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fdoc-word { padding: var(--sp-5); border-radius: var(--r-s); background: #ffffff; color: #1b1d22; }
.fdoc-word .ft { color: #384257; border-color: rgba(12, 18, 32, .2); }
.doc-h { font-size: var(--fs-4); font-weight: var(--w-display); }
.sheet th { background: var(--c-surface-2); color: var(--c-ink-3); text-align: center; font-weight: 400; }
.sheet td, .sheet th { border: var(--line) solid var(--c-line); }
.doc-act { margin-top: var(--sp-4) !important; }
.mini:not(.is-live) .doc-act { display: none; }

/* Outdoors: the desk too is plain white, no wallpaper (DESIGN_LEAD M-1, 4 Nov 23:03) */
:root:not([data-theme]):has(#t-out:checked) .mini, :root[data-theme="out"] .mini { background: #ffffff; }