/* Etiuda, bold proposal C: the living field. 2026-09-22.

   THE IDEA. The storefront's dot field (site/archive/2026-09-14-storefront) is no longer a
   background image but a place: a real-time sea of dots under the whole page, drawn by
   field.js. At the top it runs to a horizon and the bare mark stands over it as the light;
   below, it lies flat under the reading, as the storefront's field did, and answers the
   pointer. This sheet keeps everything else quiet so the field can be loud: one violet, two
   weights, glass panels that let the field through, and sections that rise out of it.

   THE MARK is the bare glyph in currentColor, never on a tile, anywhere.
   NOTHING loads from elsewhere: no web fonts, the system's own faces.
   DARK ONLY, deliberately: a field of light needs a dark ground (a cost, named in the report).
   Without script or WebGL: the storefront's CSS dot field and the drawn mark, all content.
   With reduced motion: the scene is drawn once and nothing rises, fades or leans. */

:root{
  --ground:#0b0a10;
  --glass:rgba(18,16,27,.62);
  --glass-hi:rgba(26,23,38,.72);
  --rule:rgba(232,235,240,.10);
  --rule-hi:rgba(232,235,240,.22);
  --ink:#e8ebf0;
  --ink-dim:#a3a0b2;
  --ink-max:#fbfcfe;
  --violet:#7c3aed;
  --violet-2:#8b5cf6;
  --lav:#c4b5fd;
  --accent-text:#b4a0fb;
  --bad:#fca5a5;
  --ok:#c4b5fd;
  --face-display:"Segoe UI Variable Display","Segoe UI","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --face-text:"Segoe UI Variable Text","Segoe UI","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --face-mono:"Cascadia Mono","SF Mono",Menlo,Consolas,ui-monospace,monospace;
  --ease:cubic-bezier(.16,.84,.2,1);
  --pad:20px;
  --mast:64px;
  --r-card:22px;
  color-scheme:dark;
}
@media (min-width:700px){ :root{ --pad:36px; } }
@media (min-width:1100px){ :root{ --pad:56px; } }
@media (min-width:1700px){ :root{ --pad:88px; } html{ font-size:112.5%; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:106.25%; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--mast) + 20px); background:var(--ground); }
body{
  margin:0; min-height:100vh;
  background:var(--ground);
  background-image:radial-gradient(circle at 1px 1px, rgba(232,235,240,.10) 1px, transparent 0);
  background-size:26px 26px;
  color:var(--ink);
  font-family:var(--face-text);
  font-size:1rem; line-height:1.6;
  overflow-x:hidden;
}
.gl:not(.still) body, .gl-wait body{ background-image:none; }
/* the footer at the window's bottom whenever a page is shorter than the window: the body a full-height column, main
   taking the room (Max, 2026-10-25 11:23); the mast, the field and the skip link sit outside the flow */
body{ display:flex; flex-direction:column; min-height:100dvh; }
body > main{ flex:1 0 auto; }
body > .foot{ flex-shrink:0; }
canvas.field{ position:fixed; left:0; top:0; width:100%; height:100vh; height:100lvh; z-index:0; pointer-events:none; display:block; }
.still canvas.field{ position:absolute; }
.mast, main, .foot{ position:relative; z-index:1; }
.hero, .closing, .sec{ overflow-x:clip; }

h1,h2,h3{ font-family:var(--face-display); font-weight:600; margin:0; text-wrap:balance; color:var(--ink-max); }
h2{ font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height:1.04; letter-spacing:-.032em; }
h3{ font-size:1.16rem; line-height:1.25; letter-spacing:-.015em; }
p{ margin:0 0 .85em; }
a{ color:var(--lav); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover{ color:#fff; }
:focus-visible{ outline:2px solid var(--lav); outline-offset:3px; border-radius:6px; }
kbd{ font-family:var(--face-mono); font-size:.86em; padding:.08em .45em; border-radius:6px; border:1px solid rgba(196,181,253,.35); background:rgba(124,58,237,.16); color:#ede9fe; }
.dim{ color:var(--ink-dim); }
.skip{ position:absolute; left:12px; top:-60px; z-index:10; background:#fff; color:#111; padding:10px 14px; border-radius:10px; }
.skip:focus{ top:12px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.wrap{ width:min(1560px, 100% - 2 * var(--pad)); margin-inline:auto; }

/* ---------- masthead ------------------------------------------------------------ */
.mast{ position:fixed; top:0; left:0; right:0; height:var(--mast); z-index:5; transition:background-color .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.mast.scrolled{ background:rgba(11,10,16,.58); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--rule); }
.mast-in{ height:100%; width:min(1720px, 100% - 2 * min(var(--pad), 40px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:inline-flex; align-items:center; gap:.45em; color:var(--ink-max); text-decoration:none; font-family:var(--face-display); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.brand .mark{ width:1.6em; height:1.6em; color:var(--lav); filter:drop-shadow(0 0 10px rgba(139,92,246,.55)); }
.mast-nav{ display:flex; align-items:center; gap:8px; }
.pill{ display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:999px; border:1px solid var(--rule-hi); color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:600; white-space:nowrap; transition:border-color .2s, background-color .2s, color .2s, transform .35s var(--ease); background:rgba(11,10,16,.35); }
.pill:hover{ border-color:var(--lav); color:#fff; }
.pill.quiet{ border-color:transparent; background:none; }
.pill.solid{ background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:0 0 0 0 rgba(139,92,246,.0), 0 6px 24px -6px rgba(124,58,237,.8); }
.pill.solid:hover{ background:var(--violet-2); }
@media (max-width:560px){ .pill.quiet{ display:none; } .pill{ padding:0 11px; height:34px; font-size:.8rem; } .mast-nav{ gap:6px; } .brand{ font-size:1.02rem; } }

/* ---------- hero ----------------------------------------------------------------- */
.hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--mast) + 8px) 0 48px; }
.hero-in{ width:min(1640px, 100% - 2 * var(--pad)); margin-inline:auto; display:grid; grid-template-areas:"spot" "text" "card"; gap:26px; }
.spot{ grid-area:spot; position:relative; width:min(62vw, 30vh, 250px); aspect-ratio:1; margin:0 auto; }
.spot-mark{ width:100%; height:100%; color:var(--lav); filter:drop-shadow(0 0 28px rgba(139,92,246,.6)); }
.gl .spot-mark, .gl-wait .spot-mark{ visibility:hidden; }
/* no scene after all (no context, a failed shader): the drawn mark fades in, never pops */
.gl-none .spot-mark{ animation:mark-in 1.1s var(--ease) both; }
@keyframes mark-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
.hero-text{ grid-area:text; position:relative; }
.gl .hero-text::before{ content:""; position:absolute; inset:-14% -18% -14% -40%; z-index:-1; background:radial-gradient(closest-side, rgba(11,10,16,.78), rgba(11,10,16,.35) 70%, transparent); pointer-events:none; }
.flag{ display:inline-flex; align-items:center; gap:.55em; margin:0 0 20px; padding:6px 14px 6px 10px; border-radius:999px; border:1px solid rgba(196,181,253,.28); background:rgba(124,58,237,.12); color:#ddd6fe; font-size:.84rem; font-weight:600; letter-spacing:.01em; }
.flag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lav); box-shadow:0 0 12px 2px rgba(167,139,250,.9); }
.hero h1{ font-size:clamp(2.35rem, 1.1rem + 4.6vw, 5.9rem); line-height:1.0; letter-spacing:-.04em; padding-bottom:.2em; margin-bottom:calc(24px - .2em);
  background:linear-gradient(100deg, #ffffff 0%, #f5f3ff 45%, #c4b5fd 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:clamp(1.06rem, .95rem + .45vw, 1.34rem); line-height:1.55; color:#d9d6e3; max-width:40rem; }
.joincard{ grid-area:card; position:relative; padding:26px 24px 22px; border-radius:var(--r-card); background:var(--glass); border:1px solid var(--rule); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.form-h{ font-size:1.3rem; letter-spacing:-.02em; margin-bottom:8px; }
.form-p{ color:var(--ink-dim); font-size:.94rem; margin-bottom:18px; }
/* Wide: the mark stands centred over the horizon, the words to its left and the form to its
   right on the sea, and the moonlight runs down the gutter between them. */
@media (min-width:960px){
  .hero{ align-items:stretch; }
  .hero-in{ grid-template-columns:minmax(0,1.1fr) minmax(340px,.72fr); grid-template-areas:"spot spot" "text card"; grid-template-rows:auto 1fr;
    column-gap:clamp(90px, 13vw, 300px); row-gap:clamp(18px, 3.5vh, 48px); align-items:start; }
  /* The mark keeps its share of the WIDTH as well as the height (18vw is its share at 2000 x 1000), so
     a short window, which is what 125 and 150 per cent display scaling make of a laptop, no longer
     halves it; 36vh still bounds it. Only ever the larger of the old size and this (2026-09-24). */
  .spot{ width:max(min(29vh, 360px), min(18vw, 36vh, 440px)); margin:0 auto; }
  /* The headline is sized to its own column, so it keeps one shape at every desk width and scale:
     three lines in Polish, two in English, as at 150 per cent (Maxim, 2026-09-24 09:30). */
  .hero-text{ container-type:inline-size; }
  .hero h1{ font-size:clamp(1.9rem, 7.12cqi, 5.4rem); margin-bottom:calc(18px - .2em); }
  .flag{ margin-bottom:14px; }
  .joincard{ margin-top:6px; }
}
@media (min-width:1700px){ .spot{ width:min(36vh, 440px); } }
/* A laptop's short screen: the whole opening, lead included, above the fold in both languages. */
@media (min-width:960px) and (max-height:920px){
  .spot{ width:max(24vh, min(18vw, 36vh, 440px)); }
  .lead{ font-size:1.04rem; }
  .hero{ padding-bottom:24px; }
}

/* ---------- the form -------------------------------------------------------------- */
.join{ display:grid; gap:12px; }
.lbl{ font-size:.82rem; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.join input[type=email]{ width:100%; height:50px; padding:0 18px; border-radius:14px; border:1px solid var(--rule-hi); background:rgba(255,255,255,.05); color:#fff; font:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.join input[type=email]:focus{ outline:none; border-color:var(--lav); background:rgba(255,255,255,.08); box-shadow:0 0 0 4px rgba(139,92,246,.28); }
.join input[aria-invalid=true]{ border-color:var(--bad); }
.consent{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:.8rem; line-height:1.5; color:var(--ink-dim); }
/* no word left alone on the consent's last line (Maxim, 2026-09-24 09:56); the wording is the recorded consent */
.consent label{ text-wrap:pretty; }
/* The box is centred on the FIRST line's letters as RENDERED: the middle of the ink from the tops of the capitals
   and ascenders to the baseline, descenders excluded (Maxim, 2026-09-24 10:20 saw it high, 10:33 low; the eye
   is the measure, so it is measured in pixels, claudia-scratch-s01-dark/consent/ink.mjs + ink.py). font:inherit
   makes the input's em and lh the label's, so one rule serves 13.6 and 12.9 px; .059em is the pixel fit, within
   half a device pixel at 1 and 1.25 (his desk) in every form and language. The grid's align-items:start keeps
   the box with the first line when the label wraps. */
.consent input{ width:18px; height:18px; font:inherit; margin:calc(.5lh + .059em - 9px) 0 0; accent-color:var(--violet-2); }
.consent a{ color:#ddd6fe; }
.btn{ position:relative; overflow:hidden; height:52px; padding:0 26px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-weight:650; font-size:1rem; color:#fff; letter-spacing:.005em;
  background:linear-gradient(135deg, #8b5cf6, #7c3aed 55%, #6d28d9); box-shadow:0 10px 34px -10px rgba(124,58,237,.95), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .35s var(--ease), box-shadow .3s, filter .2s; justify-self:start; }
.btn span{ position:relative; z-index:1; }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease); }
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ box-shadow:0 14px 44px -10px rgba(139,92,246,1), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:disabled{ filter:saturate(.5) brightness(.85); cursor:progress; }
.status{ min-height:1.2em; margin:0; font-size:.88rem; }
.status.bad{ color:var(--bad); }
.status.ok{ color:var(--ok); font-weight:600; }
.join.done input, .join.done .consent, .join.done button, .join.done .lbl{ display:none; }
.join.done .status{ font-size:1rem; }

/* ---------- sections ------------------------------------------------------------ */
.sec{ padding:clamp(72px, 11vw, 170px) 0; }
/* An anchor lands on the section's heading, not on its top padding (Maxim, 2026-09-23 03:36). */
.sec{ scroll-margin-top:calc(8px - clamp(72px, 11vw, 170px)); }
.marking{ display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.marking .num{ font-family:var(--face-mono); letter-spacing:0; color:var(--ink-dim); padding:3px 8px; border:1px solid var(--rule-hi); border-radius:999px; font-size:.74rem; }
.sec-head{ margin-bottom:clamp(30px, 4vw, 56px); max-width:60rem; }
.card{ position:relative; border-radius:var(--r-card); background:var(--glass); border:1px solid var(--rule); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); }
/* the light where the pointer is: a rim and a faint sheen, both following it */
.glow::before, .glow::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.glow::before{ padding:1px; background:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px), rgba(196,181,253,.85), rgba(139,92,246,.25) 35%, transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glow::after{ background:radial-gradient(600px circle at var(--mx,-999px) var(--my,-999px), rgba(124,58,237,.10), transparent 45%); }

/* section 01, the desk at work: src/s01.css, appended to this sheet by build.py */

/* two programs, and above them one edition travelling from Studio to every desk (net.js,
   B's picture redrawn in points of light, 2026-09-23). No box: it lies on the field like the
   rest of the page. Without script there is nothing to draw, so it takes no room. */
.net-wrap{ display:none; }
.js .net-wrap{ display:block; position:relative; height:clamp(250px, 24vw, 400px); margin:clamp(-12px, -1vw, 0px) 0 clamp(18px, 2.4vw, 36px); }
.net{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.two{ display:grid; gap:16px; }
.prog{ padding:28px 26px 18px; }
.prog h3{ font-size:1.6rem; letter-spacing:-.025em; }
.prog.studio h3{ color:var(--lav); }
.prog.studio{ border-color:rgba(167,139,250,.28); background:linear-gradient(170deg, rgba(76,29,149,.22), var(--glass) 55%); }
.prog .sub{ color:var(--ink-dim); font-size:.9rem; margin:4px 0 18px; }
.prog ul{ list-style:none; margin:0; padding:0; }
.prog li{ position:relative; padding:12px 0 12px 22px; border-top:1px solid var(--rule); font-size:.97rem; }
.prog li::before{ content:""; position:absolute; left:2px; top:1.25em; width:6px; height:6px; border-radius:50%; background:var(--lav); box-shadow:0 0 10px rgba(167,139,250,.9); }
@media (min-width:900px){ .two{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } .prog{ padding:34px 34px 22px; } }

/* buying */
.terms{ display:grid; gap:30px; }
/* 03's heading sits on the starfield like every section's (Maxim, 2026-09-24 02:33); the panel holds the items */
.facts.card{ padding:clamp(6px, 1vw, 14px) clamp(22px, 3vw, 44px); background:linear-gradient(150deg, rgba(124,58,237,.20), var(--glass) 50%); border-color:rgba(167,139,250,.25); }
.facts.card > div:first-child{ border-top:0; }
.terms .note{ color:var(--ink-dim); margin-top:16px; }
.facts{ margin:0; display:grid; }
.facts > div{ display:grid; gap:4px; padding:18px 0; border-top:1px solid var(--rule); }
.facts dt{ font-family:var(--face-display); font-weight:600; font-size:1.1rem; color:var(--ink-max); }
.facts dd{ margin:0; color:#cfcbdb; }
@media (min-width:960px){ .terms{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 110px); } .facts > div{ grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:24px; } }

/* maker */
.maker{ display:grid; gap:24px; }
/* the portrait in points of light (src/portrait.js) is pinned, Maxim 2026-09-24 02:30: not shipped */
.maker-text{ font-size:1.08rem; color:#d9d6e3; }
@media (min-width:960px){ .maker{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 110px); align-items:end; } .maker-text{ columns:2; column-gap:40px; } .maker-text p{ break-inside:avoid; } }

/* close */
.closing{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--mast) + 20px) var(--pad) 90px; text-align:center; }
.close-spot{ width:min(56vw, 30vh, 320px); margin-bottom:clamp(40px, 7vh, 90px); }
.ln{ display:block; }
/* Wide: the close answers the hero, the mark gathered on the left over its own horizon. */
@media (min-width:960px){
  .closing{ min-height:calc(100svh - 90px); flex-direction:row; justify-content:center; gap:clamp(60px, 9vw, 200px); text-align:left; padding-top:calc(var(--mast) + 10px); padding-bottom:60px; }
  .close-spot{ width:min(40vh, 440px); margin:0; flex:none; }
  .closing-in{ width:min(640px, 52%); }
  .closing h2{ font-size:clamp(2.2rem, .8rem + 2.6vw, 4.2rem); }
}
.closing-in{ width:min(720px, 100%); }
.closing h2{ font-size:clamp(2.1rem, 1.2rem + 3.4vw, 4.6rem); letter-spacing:-.04em; margin-bottom:14px; }
.close-p{ color:var(--ink-dim); font-size:1.15rem; margin-bottom:30px; }
.close-form{ text-align:left; padding:24px; border-radius:var(--r-card); background:var(--glass); border:1px solid var(--rule); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.ask{ margin-top:26px; color:var(--ink-dim); }

/* footer */
.foot{ border-top:1px solid var(--rule); background:rgba(11,10,16,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.foot-in{ width:min(1720px, 100% - 2 * var(--pad)); margin-inline:auto; padding:28px 0 34px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; font-size:.86rem; }
.foot-in p{ margin:0; }
/* one line for the whole row: every item sits on the text's baseline, the brand's word and the copyright included,
   with the mark centred on its word rather than resting on the line (Max's footer bar, 2026-10-25 11:22) */
.foot-in{ align-items:baseline; }
.foot-brand{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.75em; }
.foot .brand{ align-items:baseline; }
.foot .brand .mark{ align-self:center; }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-links a, .langs a{ color:var(--ink); }
.foot-quiet{ flex:1 1 280px; }
.langs{ display:flex; gap:14px; }
.langs [aria-current]{ color:var(--lav); font-weight:700; }

/* the small pages */
.page{ min-height:78vh; padding:calc(var(--mast) + 12vh) 0 12vh; }
.narrow{ max-width:50rem; }
.page h1{ font-size:clamp(2.1rem, 1.3rem + 3vw, 4rem); line-height:1.04; letter-spacing:-.035em; margin-bottom:22px; }
.page .lead{ margin-bottom:26px; }
.page-form{ margin:10px 0 26px; max-width:34rem; }
.back{ margin-top:28px; }
.notice .meta{ color:var(--ink-dim); }
.clauses{ display:grid; gap:0; margin-top:26px; }
.clause{ padding:24px 0; border-top:1px solid var(--rule); }
.clause h2{ font-size:1.25rem; letter-spacing:-.015em; margin-bottom:10px; }
.clause p{ color:#d9d6e3; }
.two-lang{ display:grid; gap:48px; }
@media (min-width:900px){ .two-lang{ grid-template-columns:1fr 1fr; } }

/* ---------- rising out of the field ---------------------------------------------- */
/* Everything is visible by default. Nothing waits for a script to be shown (finding 19, 2026-09-23):
   the opening rises by CSS alone, from its first paint, whatever the line or the scripts are doing;
   below it, motion.js holds back only a section that is still off the screen when it runs, and
   lets it rise as it arrives. A section already seen is never hidden again, and if motion.js is
   slow or never comes, nothing is held at all. */
@keyframes rise-in{ from{ opacity:0; transform:translate3d(0,38px,0) scale(.985); filter:blur(10px); } }
.hero .rise{ animation:rise-in 1.2s var(--ease) both; }
.hero h1.rise{ animation-delay:70ms; }
.hero .lead.rise{ animation-delay:140ms; }
.hero .joincard.rise{ animation-delay:210ms; }
.motion .rise{ transition:opacity 1s var(--ease) var(--d,0ms), transform 1.3s var(--ease) var(--d,0ms), filter 1s var(--ease) var(--d,0ms); }
.held .rise{ opacity:0; transform:translate3d(0,38px,0) scale(.985); filter:blur(10px); }
.magnet{ transition:transform .45s var(--ease), box-shadow .3s, background-color .2s, border-color .2s; }
.magnet.near{ transition:transform .12s linear, box-shadow .3s, background-color .2s, border-color .2s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .btn::after{ display:none; }
}
/* Section 01, the desk at work (2026-09-23 night), after the training deck's sixth slide: the words
   on the left, and on the right a crop of the desk, light, as the product is, under a camera that
   leans in while the name and the word are typed and draws back when the intent is accepted.
   The desk is drawn at the desk's own sizes in logical pixels (1440, 900 or 560 wide, chosen by the
   figure's width) and scaled whole by desk.js; without script it stands at its own size, cropped.
   Tokens are the 2.x engine's light theme (etiuda/src/template.html), prefixed dk- throughout. */
.s01 .sec-head{ max-width:none; margin-bottom:clamp(8px, 1.5vw, 20px); }
.s01 .sec-head h2{ max-width:22ch; }
.s01-grid{ display:grid; gap:clamp(26px, 3vw, 44px); }
.s01-text{ display:grid; gap:18px 48px; align-content:start; }
/* the four moves, the copywriter's, lit one by one as the desk reaches each (the deck's third slide) */
.s01-moves{ list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:mv; max-width:40rem; }
.s01-moves li{ position:relative; counter-increment:mv; padding:12px 0 12px 58px; border-top:1px solid var(--rule); color:var(--ink-dim); line-height:1.45; transition:color .5s var(--ease); }
.s01-moves li::before{ content:counter(mv); position:absolute; left:0; top:10px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font:600 .95rem/1 var(--face-mono); color:var(--ink-dim); border:1px solid var(--rule-hi); transition:color .5s, background-color .5s, border-color .5s, box-shadow .5s; }
.s01-moves b{ display:block; font-family:var(--face-display); font-weight:600; font-size:clamp(1.08rem, .95rem + .45vw, 1.4rem); letter-spacing:-.012em; color:var(--ink-max); }
.s01-moves li.lit::before{ color:#fff; background:var(--violet); border-color:var(--violet-2); box-shadow:0 0 22px rgba(139,92,246,.55); }
.s01-moves li.lit{ color:var(--ink); }
.s01-line{ margin:0; max-width:30rem; font-family:var(--face-display); font-size:clamp(1.05rem, .95rem + .4vw, 1.4rem); line-height:1.3; color:var(--lav); border-left:2px solid var(--violet-2); padding:2px 0 4px 18px; align-self:start; }
@media (min-width:900px) and (max-width:1499px){ .s01-text{ grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); } .s01-text .sec-head{ grid-column:1 / -1; } .s01-moves{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:36px; max-width:none; } }
@media (min-width:1500px){
  .s01-grid{ grid-template-columns:minmax(0, 27rem) minmax(0,1fr); gap:clamp(40px, 4vw, 80px); align-items:start; }
  .s01-fig{ margin-top:clamp(40px, 5vw, 110px); }
  .dk-now{ display:none !important; }
}
/* the move now playing, under the crop, for a screen where the list above has scrolled away */
.dk-now{ display:flex; align-items:center; gap:12px; min-height:40px; margin:38px 0 0; color:var(--ink); font-family:var(--face-display); font-size:1.05rem; letter-spacing:-.01em; }
.dk-now .n{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font:600 .85rem/1 var(--face-mono); color:#fff; background:var(--violet); box-shadow:0 0 18px rgba(139,92,246,.5); }
.dk-now:not(.on){ visibility:hidden; }

.s01-fig{ margin:0; position:relative; container-type:inline-size; min-width:0; }
.dk-crop{ position:relative; overflow:hidden; border-radius:16px; background:#f7f8fa; aspect-ratio:1056 / 640; isolation:isolate;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.10), 0 0 90px -20px rgba(124,58,237,.35); }
@container (max-width:999px){ .dk-crop{ aspect-ratio:900 / 660; } }
@container (max-width:619px){ .dk-crop{ aspect-ratio:560 / 760; border-radius:12px; } }
.dk-cam{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.dk-cam.glide{ transition:transform 1.15s cubic-bezier(.65,0,.35,1); }

/* ---------- the desk ---------- */
.dk{ --bg:#f7f8fa; --hdr:#f0f2f5; --ink:#0f172a; --dim:#475569; --line:#e4e8ee; --accent:#2563eb; --asoft:#dceafe; --go:#047857; --gosoft:#d1fae5; --goedge:#2f8f63;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace; --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --spring:cubic-bezier(.22,1.18,.36,1);
  position:relative; width:1440px; height:900px; overflow:hidden; background:var(--bg); color:var(--ink); font:400 14px/1.5 var(--sans); letter-spacing:0; text-align:left; color-scheme:light; }
@container (max-width:999px){ .dk{ width:900px; } }
@container (max-width:619px){ .dk{ width:560px; height:1000px; } }
.dk *, .dk *::before, .dk *::after{ box-sizing:border-box; }
.dk svg.i{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.dk p{ margin:0; }
.h0{ --hue:#2a78d6; } .h1{ --hue:#ef8c1a; } .h2{ --hue:#1baf7a; } .h3{ --hue:#e34948; } .h4{ --hue:#7c6ae5; } .h5{ --hue:#e87ba4; } .h6{ --hue:#ce3ac6; } .h7{ --hue:#0b93a8; }

.dk-band{ position:relative; display:flex; align-items:flex-end; gap:10px; height:36px; padding:0 14px 0 16px; background:#1a4fa0; color:#fff; }
.dk-brand{ display:flex; align-items:center; gap:8px; align-self:center; font-size:19px; line-height:1; margin-right:8px; }
.dk-brand .m{ width:auto; height:20px; fill:#fff; }
.dk-tabs{ display:flex; gap:4px; }
.dk-tab{ display:flex; align-items:center; gap:8px; width:190px; height:32px; padding:0 10px 0 14px; border-radius:10px 10px 0 0; font-size:13.5px; white-space:nowrap; color:rgba(255,255,255,.88); }
.dk-tab i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); flex:none; }
.dk-tab .n{ overflow:hidden; text-overflow:ellipsis; }
.dk-tab .x{ margin-left:auto; opacity:.6; }
.dk-tab.on{ background:var(--hdr); color:var(--ink); font-weight:600; }
.dk-tab.on i{ background:var(--accent); }
.dk-tabadd{ align-self:center; font-size:18px; opacity:.85; padding:0 4px; }
.dk-seg{ margin-left:auto; align-self:center; display:flex; gap:2px; padding:2px; border-radius:7px; background:rgba(255,255,255,.14); }
.dk-seg span{ width:34px; text-align:center; font:600 11.5px/20px var(--sans); color:rgba(255,255,255,.85); border-radius:5px; }
.dk-seg span.on{ background:#fff; color:var(--accent); }
.dk-ibs{ align-self:center; display:flex; gap:6px; }
.dk-ibs span{ width:28px; height:24px; border-radius:6px; background:rgba(255,255,255,.14); display:grid; place-items:center; }
.dk-ibs svg.i{ width:14px; height:14px; }

.dk-head{ background:var(--hdr); padding:12px 14px 12px; border-bottom:1px solid var(--line); }
.dk-fields{ display:flex; gap:12px; align-items:center; }
.dk-fld{ position:relative; display:flex; align-items:center; gap:6px; height:34px; padding:0 10px; border:1px solid #e0e4ea; border-bottom-color:#aab3c0; background:#fdfdfd; border-radius:7px;
  font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.dk-fld .v{ overflow:hidden; text-overflow:clip; }
.dk-fld svg.i{ margin-left:auto; width:14px; height:14px; color:#94a3b8; }
.dk-fld.pax{ width:240px; flex:none; }
.dk-fld.srch{ flex:1; min-width:0; height:39px; font-size:16.5px; color:var(--accent); }
.dk-fld.agent{ width:190px; flex:none; }
.dk-fld .ph{ color:#8b95a5; }
.dk-fld .ph kbd{ font:600 10.5px var(--mono); border:1px solid #cfd6e0; border-radius:4px; padding:0 4px; color:#64748b; background:#fff; }
.dk-fld.focus{ border-bottom-color:var(--accent); box-shadow:inset 0 -1px 0 var(--accent); }
.dk-fld .caret{ display:none; width:1.5px; height:1.15em; margin-left:-5px; background:var(--ink); animation:dk-blink 1s steps(1) infinite; }
.dk-fld.focus .caret{ display:inline-block; }
@keyframes dk-blink{ 50%{ opacity:0; } }

.dk-pills{ display:flex; flex-wrap:wrap; gap:7px 6px; margin-top:11px; max-height:77px; overflow:hidden; }
.dk-pill{ display:inline-flex; align-items:center; height:32px; padding:0 11px 0 5px; border:1px solid transparent; border-radius:999px; background:rgba(15,23,42,.05);
  color:var(--dim); font-size:13px; white-space:nowrap; transition:opacity .45s, box-shadow .4s, border-color .4s, background-color .4s; }
.dk-pill .ci{ width:21px; height:21px; margin-right:7px; border-radius:50%; background:var(--hue); color:#fff; display:grid; place-items:center; flex:none; }
.dk-pill .ci svg.i{ width:15px; height:15px; stroke-width:1.9; }
.dk-pill b{ margin-left:8px; font-size:11px; font-weight:600; opacity:.65; }
.dk-pill.all{ padding:0 11px; }
.dk-pill.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dk-pill.on b{ opacity:.85; }
.dk-pill.hint2{ border-color:var(--goedge); box-shadow:0 0 0 2px var(--gosoft); font-weight:650; }
.dk-pill.hint{ border-color:var(--accent); box-shadow:0 0 0 2px var(--asoft); font-weight:650; }
.dk-pill.nohit{ opacity:.4; }

.dk-main{ display:flex; gap:18px; align-items:flex-start; padding:16px 14px; height:100%; }
.dk-rail{ flex:0 0 268px; height:1200px; background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.06); overflow:hidden; padding:10px 7px; }
.dk-rh{ display:flex; align-items:center; margin:2px 7px 8px !important; padding-bottom:8px; border-bottom:1px solid var(--line); font:700 13px/1 var(--sans); letter-spacing:.02em; }
.dk-rh b{ margin-left:auto; font:500 12px var(--mono); color:var(--dim); }
.dk-ri{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; font-size:16.5px; line-height:1.35; white-space:nowrap; transition:opacity .45s, background-color .35s, color .35s; }
.dk-ri .cm{ display:flex; width:16px; flex:none; color:inherit; }
.dk-ri .rt{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
.dk-ri.kbd{ background:rgba(37,99,235,.2); color:var(--accent); }
.dk-ri.nohit{ opacity:.35; }
.dk-ri.on{ background:var(--gosoft); color:var(--go); font-weight:650; }
.dk-ri.on .rt::before{ content:"\2713\00a0"; font-weight:700; }

/* the dot field is the CARD AREA's ground, as on the real desk (the engine puts it on main, which holds
   the cards and not the docked intent rail): never behind the rail or its gutter (Maxim, 2026-09-24 09:38).
   Its strength is unchanged here; a separate sheet decides that. */
.dk-list{ flex:1; min-width:0; align-self:stretch;
  background-image:radial-gradient(circle at 1px 1px, rgba(71,85,105,.28) 1px, transparent 0); background-size:14px 14px; }
/* the engine's own columns, as recorded: a band row that spans them, then one box per column */
.dk-cols{ display:flex; gap:18px; align-items:flex-start; }
.dk-col{ flex:1 1 0; min-width:0; }
.dk-spare{ display:none; }
.dk-col:empty{ display:none; }
.dk-card{ break-inside:avoid; padding-top:1px; margin-bottom:12px; }
.dk-card.off, .dk-sep.off{ display:none; }
.dk-ch{ display:flex; align-items:center; gap:7px; padding:0 3px 6px; white-space:nowrap; min-width:0; }
.dk-ch .cm{ display:flex; color:var(--dim); }
.dk-ch .t{ font-weight:600; font-size:16.5px; letter-spacing:-.01em; overflow:hidden; min-width:0; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent); }
.dk-ch .bd{ display:none; flex:none; font:500 10px var(--mono); letter-spacing:.3px; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:var(--gosoft); color:var(--go); border:1px solid var(--go); }
.dk-card.int .bd{ display:inline-block; }
.dk-ch .a{ margin-left:auto; display:flex; gap:10px; color:#94a3b8; flex:none; padding-left:6px; }
.dk-ch .a svg.i{ width:15px; height:15px; }
.dk-tx{ position:relative; margin:0 0 9px; padding:11px 44px 11px 16px; background:#fff; border:1px solid transparent; border-radius:12px; font-size:14px; line-height:1.5;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.06); transition:border-color .4s, box-shadow .4s, background-color .3s; }
.dk-tx::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 2px 2px 0; background:var(--hue); }
.dk-tx .b{ white-space:pre-wrap; }
.dk-tx .tag{ position:absolute; top:8px; right:10px; font:10px var(--mono); letter-spacing:.5px; color:var(--dim); }
.dk-card.hit .dk-tx{ border-color:var(--goedge); box-shadow:0 0 0 2px var(--gosoft), 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.06); }
.dk-card.cat .dk-tx{ border-color:var(--accent); box-shadow:0 0 0 2px var(--asoft), 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.06); }
.dk-tx.sel{ border-color:var(--accent) !important; background:var(--asoft); }
.dk-tx.flash{ animation:dk-flash .9s ease-out; }
@keyframes dk-flash{ 0%{ background:#bbf7d0; } 100%{ background:var(--asoft); } }
.dk .fx{ text-decoration:underline dotted rgba(15,23,42,.45); text-underline-offset:3px; border-radius:3px; transition:background-color .6s, box-shadow .6s; }
.dk .fm{ font:600 11px var(--mono); letter-spacing:.3px; vertical-align:1px; padding:1px 5px; border-radius:4px; border:1px dashed rgba(15,23,42,.34); color:var(--dim); background:rgba(15,23,42,.05); }
.dk .fx.lit{ background:rgba(4,120,87,.16); box-shadow:0 0 0 2px rgba(4,120,87,.16); }
.dk-sep{ display:flex; align-items:center; gap:9px; margin:0 2px 12px; padding-top:1px; font:500 11px/17px var(--sans); letter-spacing:.88px; text-transform:uppercase; color:rgba(15,23,42,.5); break-inside:avoid; break-after:avoid; }
.dk-sep span{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.dk-sep em{ font-style:normal; }
.dk-sep svg.i{ width:13px; height:13px; }
.dk-sep i{ flex:1; height:1px; background:#dde2e9; }
.dk-sep b{ font:500 11px var(--mono); }
.dk-col > .dk-sep:not(:first-child){ margin-top:16px; }
.dk-sep.band{ color:var(--go); margin:0 2px 12px; }
.dk-sep.band i{ background:rgba(4,120,87,.25); }
.dk-ghost{ position:absolute; z-index:2; pointer-events:none; margin:0 !important; }

/* The engine lays 2 columns at 900 and 1 at 560 (recorded, every state); the page is built with 1440's 3.
   desk.js re-lays the narrower desk from its own recording; before it runs, or without it, the columns
   the engine would not have at that width stay hidden rather than squeezed (2026-09-24, found at 390). */
@container (max-width:999px){ .dk-col:nth-child(n+3){ display:none; } }
@container (max-width:619px){ .dk-col:nth-child(n+2){ display:none; } }
@container (max-width:999px){
  .dk-rail{ flex-basis:236px; }
  .dk-fld.pax{ width:190px; } .dk-fld.agent{ width:130px; }
  .dk-tab{ width:150px; }
}
@container (max-width:619px){
  .dk-rail{ flex-basis:196px; }
  .dk-ri{ font-size:15px; }
  /* one row, as Etiuda keeps it at any width: the search holds its basis and never shrinks, so the
     agent box runs off the drawn window's edge rather than wrapping under it (Maxim 2026-09-26 14:40) */
  .dk-fields{ gap:8px; }
  .dk-fld.pax{ width:180px; } .dk-fld.agent{ width:130px; }
  .dk-fld.srch{ flex:1 0 240px; }
  .dk-fld.srch .ph{ font-size:14px; }
  .dk-tab{ width:128px; }
  .dk-ibs, .dk-brand{ display:none; }
  .dk-pills{ max-height:115px; }
}

/* ---------- over the crop, at the page's own size: the key pressed, the pointer, the toast ---------- */
.dk-over{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.dk-key{ position:absolute; left:0; top:0; display:flex; gap:6px; opacity:0; transform:translateY(8px) scale(.9); transition:opacity .25s, transform .4s cubic-bezier(.22,1.18,.36,1); }
.dk-key.on{ opacity:1; transform:none; }
.dk-key.press kbd{ transform:translateY(3px); border-bottom-width:2px; }
.dk-key kbd{ font:700 clamp(13px, 1.2vw, 20px)/1 var(--face-mono); padding:.6em .8em; border-radius:10px; background:#fff; color:#111; border:2px solid #cfd4dc; border-bottom-width:5px; box-shadow:0 10px 26px rgba(0,0,0,.35); transition:transform .1s, border-bottom-width .1s; }
.dk-ptr{ position:absolute; left:0; top:0; width:20px; height:24px; opacity:0; transition:transform .9s cubic-bezier(.16,.84,.2,1), opacity .3s; }
.dk-ptr path{ fill:#fff; stroke:#0b0a10; stroke-width:1.4; stroke-linejoin:round; }
.dk-ptr.on{ opacity:1; }
.dk-ptr.press{ transition:transform .12s; }
.dk-toast{ position:absolute; left:50%; bottom:clamp(12px, 3%, 26px); max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:.62em 1.2em; border-radius:999px; background:#047857; color:#fff; font:600 clamp(11px, .9vw, 15px)/1.2 var(--face-text); box-shadow:0 10px 30px rgba(4,120,87,.35);
  opacity:0; transform:translate(-50%, 24px); transition:transform .5s cubic-bezier(.22,1.18,.36,1), opacity .3s; }
.dk-toast.on{ opacity:1; transform:translate(-50%, 0); }
/* the crop's own controls, bottom left: Pause, and the theme the desk turns to (Maxim, 09:38) */
.dk-ctls{ position:absolute; z-index:4; left:10px; bottom:10px; display:flex; gap:6px; }
.dk-play, .dk-theme{ display:flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.86); color:#334155; font:600 12px/1 var(--face-text); cursor:pointer; opacity:.0; transition:opacity .3s; }
.dk-play[hidden], .dk-theme[hidden]{ display:none; }
.dk-crop:hover .dk-play, .dk-play:focus-visible, .dk-play.paused, .dk-crop:hover .dk-theme, .dk-theme:focus-visible{ opacity:1; }
/* its mark: a disc half lit, the side it turns to */
.dk-theme::before{ content:""; width:10px; height:10px; border-radius:50%; border:1.5px solid currentColor; background:linear-gradient(90deg, currentColor 50%, transparent 50%); }
/* dark (the default) offers Light; light offers Dark */
.dk-theme .t1, .s01:not(.dk-dark) .dk-theme .t0{ display:none; }
.s01:not(.dk-dark) .dk-theme .t1{ display:inline; }
.dk-play .p1, .dk-play.paused .p0{ display:none; }
.dk-play.paused .p1{ display:inline; }
.dk-play::before{ content:""; width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.dk-play.paused::before{ width:0; height:0; border-style:solid; border-width:5px 0 5px 9px; border-color:transparent transparent transparent currentColor; }
@media (hover:none){ .dk-play, .dk-theme{ opacity:.9; } }
@media (prefers-reduced-motion:reduce){ .dk-play{ display:none; } }

/* the customer's chat: ANOTHER PRODUCT, and it must look it at a glance (Maxim, 2026-09-24 00:44),
   in the site's violet family (01:47 the coral clashed; 02:30 violet, not cyan) yet not Etiuda's own:
   a grape, #7a2a8c, 27 degrees of hue from the site's #7c3aed and darker, 8.3:1 under white. Etiuda is
   light, cobalt-banded, Segoe; the chat tool is a dark graphite window with a grape bar, round
   bubbles, a composer and a different face, standing off the desk's corner as a window of its own.
   Its words are the copywriter's (STAGE: win_chat, chat_ph, chat_send). */
.dk-stage{ position:relative; }
.dk-chat{ --cw-bg:#1b1e23; --cw-panel:#272b32; --cw-ink:#e9edf1; --cw-dim:#98a2ad; --cw-accent:#7a2a8c;
  position:absolute; z-index:5; right:-22px; bottom:-26px; width:min(35%, 390px); display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px; background:var(--cw-bg); color:var(--cw-ink); font:400 clamp(11px, .8vw, 13.5px)/1.45 "Helvetica Neue", Arial, sans-serif;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
  transition:opacity .45s, transform .6s cubic-bezier(.22,1.18,.36,1); }
.dk-chat p{ margin:0; }
.dk-chat .cw-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--cw-accent); color:#fff; font-weight:700; letter-spacing:.01em; }
.dk-chat .cw-ic{ width:15px; height:15px; fill:#fff; flex:none; }
.dk-chat .cw-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dk-chat .cw-dots{ margin-left:auto; display:flex; gap:4px; }
.dk-chat .cw-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); }
.dk-chat .cw-body{ display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:11px 12px 10px; overflow:hidden; }
.dk-chat .who{ display:flex; align-items:center; gap:8px; font-weight:700; }
.dk-chat .av{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#f0d9f5; color:#3b0a45; font-size:.85em; font-weight:700; }
.dk-chat time{ margin-left:auto; font-size:.9em; color:var(--cw-dim); font-weight:400; }
.dk-chat .msg{ padding:8px 12px; border-radius:16px; max-width:92%; }
.dk-chat .in{ align-self:flex-start; background:var(--cw-panel); border-bottom-left-radius:4px; }
.dk-chat .out{ align-self:flex-end; background:var(--cw-accent); color:#fff; border-bottom-right-radius:4px; transition:opacity .5s, transform .6s cubic-bezier(.22,1.18,.36,1); }
.dk-chat .out{ white-space:pre-line; }
.dk-chat .out u{ text-decoration:none; }
.dk-chat .cw-comp{ display:flex; align-items:center; gap:8px; margin:0 10px 10px !important; padding:6px 6px 6px 12px; border-radius:999px; background:var(--cw-panel); color:var(--cw-dim); }
.dk-chat .cw-comp .ph{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dk-chat .cw-comp .ph.pasted{ color:var(--cw-ink); }
.dk-chat .cw-comp .send{ margin-left:auto; padding:4px 12px; border-radius:999px; background:var(--cw-accent); color:#fff; font-weight:700; }
.dk-chat{ transition:opacity .28s ease; }
.dk-chat.gone{ opacity:0; }
.dk-chat .cw-body{ transition:opacity .22s ease; }
.dk-chat.swap .cw-body{ opacity:0; }
.dk-chat .out.gone{ display:none; }
.dk-chat .out.enter{ opacity:0; transform:translateY(8px); }   /* the window's height eases to it: desk.js grow() */
@container (max-width:999px){ .dk-chat{ width:min(46%, 360px); right:-10px; bottom:-18px; } }
@container (max-width:619px){ .dk-chat{ position:relative; right:auto; bottom:auto; width:auto; margin-top:14px; font-size:13px; } }

/* ==== Section 01's desk in its own DARK theme, which it OPENS in (Maxim, 2026-09-24 08:47 asked to see it
   against the starfield; 09:38 made it the default, with a button by Pause to turn it light). Scoped to
   .s01.dk-dark and .s01.cw-light, the classes the build puts on the section and desk.js takes off for
   light. The replay is the dark desk's own recording
   (s01_desk_dark.json, s01_record.mjs with S01_THEME=dark); the tokens are the engine's dark block
   (etiuda/src/template.html, :root[data-theme=dark]) and were read back off the running desk's
   computed styles into that file's "palette". Where the light replica hard-codes a surface, this
   file names the dark desk's token for it. ==== */
.s01.dk-dark .dk-crop{ background:#0f1013;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.13), 0 0 90px -20px rgba(124,58,237,.42); }
.s01.dk-dark .dk{ --bg:#0f1013; --hdr:#191b20; --ink:#e3e6ea; --dim:#8f98a6; --line:#262a31; --accent:#7aa2f7; --asoft:#1b2231;
  --go:#4ec98a; --gosoft:#132419; --goedge:#2f8f63; --card:#16181c; --raised:#1d1f24;
  --bevel:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.38), inset 1px 0 0 rgba(255,255,255,.05);
  color-scheme:dark; }
.s01.dk-dark .dk-band{ background:#0a0d13; }
.s01.dk-dark .dk-tab{ position:relative; color:rgba(227,230,234,.78); }
.s01.dk-dark .dk-tab.on{ color:var(--ink); }
/* the active tab's bar, dark only in the engine: a crescent of the accent over its shoulders */
.s01.dk-dark .dk-tab.on::after{ content:""; position:absolute; inset:0; border-radius:10px 10px 0 0; border-top:2px solid var(--accent); pointer-events:none; }
.s01.dk-dark .dk-tab i{ background:rgba(227,230,234,.45); }
.s01.dk-dark .dk-tab.on i{ background:var(--accent); }
.s01.dk-dark .dk-seg{ background:rgba(227,230,234,.06); }
.s01.dk-dark .dk-seg span{ color:var(--dim); }
.s01.dk-dark .dk-seg span.on{ background:var(--accent); color:#fff; }
.s01.dk-dark .dk-ibs span{ background:rgba(227,230,234,.07); color:#c9ced6; }
.s01.dk-dark .dk-fld{ background:#23262c; border-color:#343941; border-bottom-color:rgba(255,255,255,.30); }
.s01.dk-dark .dk-fld.focus{ border-bottom-color:var(--accent); }
.s01.dk-dark .dk-fld svg.i{ color:#6b7380; }
.s01.dk-dark .dk-fld .ph{ color:#8f98a6; }
.s01.dk-dark .dk-fld .ph kbd{ border-color:#3a4048; color:#aab2be; background:#16181c; }
.s01.dk-dark .dk-pill:not(.on){ background:rgba(227,230,234,.05); }
.s01.dk-dark .dk-list{ background-image:radial-gradient(circle at 1px 1px, rgba(143,152,166,.30) 1px, transparent 0); }
.s01.dk-dark .dk-rail{ background:var(--raised); box-shadow:var(--bevel); }
.s01.dk-dark .dk-ri.kbd{ background:rgba(122,162,247,.2); }
.s01.dk-dark .dk-ch .a{ color:#6b7380; }
.s01.dk-dark .dk-tx:not(.sel){ background:var(--card); }
.s01.dk-dark .dk-tx{ border-color:rgba(255,255,255,.075); box-shadow:var(--bevel); }
.s01.dk-dark .dk-card.hit .dk-tx{ border-color:var(--goedge); box-shadow:0 0 0 2px var(--gosoft), var(--bevel); }
.s01.dk-dark .dk-card.cat .dk-tx{ border-color:var(--accent); box-shadow:0 0 0 2px var(--asoft), var(--bevel); }
.s01.dk-dark .dk-tx.flash{ animation-name:dk-flash-dark; }
@keyframes dk-flash-dark{ 0%{ background:#1f4d36; } 100%{ background:var(--asoft); } }
.s01.dk-dark .dk .fx{ text-decoration-color:rgba(227,230,234,.45); }
.s01.dk-dark .dk .fm{ border-color:rgba(227,230,234,.34); background:rgba(227,230,234,.05); }
.s01.dk-dark .dk .fx.lit{ background:rgba(78,201,138,.18); box-shadow:0 0 0 2px rgba(78,201,138,.18); }
.s01.dk-dark .dk-sep{ color:rgba(227,230,234,.45); }
.s01.dk-dark .dk-sep i{ background:#262a31; }
.s01.dk-dark .dk-sep.band{ color:var(--go); }
.s01.dk-dark .dk-sep.band i{ background:rgba(78,201,138,.22); }
.s01.dk-dark .dk-play, .s01.dk-dark .dk-theme{ border-color:rgba(255,255,255,.16); background:rgba(29,31,36,.9); color:#d5d9df; }

/* THE CHAT, beside a dark desk. Graphite beside graphite would lose the one thing it is there to
   say, that the customer is in ANOTHER product, so the chat turns LIGHT: the same grape bar, round
   bubbles, composer and Helvetica as live, on paper. Light against dark is now the difference that
   marks it, and it is a window a third of the desk's width, not the whole showcase.
   S01_CHAT=graphite builds the dark desk with the live graphite chat, for comparison only. */
.s01.cw-light .dk-chat{ --cw-bg:#fbfafc; --cw-panel:#efe9f2; --cw-ink:#1f1a24; --cw-dim:#6d6577; --cw-accent:#7a2a8c;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.35); }
.s01.cw-light .dk-chat .av{ background:#7a2a8c; color:#fff; }

/* ==== VARIANT, NOT LIVE (Maxim, 2026-09-24 10:06: "enough space there to make it fit within the single
   line"): the bottom form's consent on ONE line wherever the form is wide enough, desktop only. Built by
   CONSENT_1LINE=1 SITE_OUT=<dir> python site-bold-c/build.py; never into public/. Wording untouched (it is
   the consent recorded as notice 2026-09-23a). Two moves, in the order asked:
   1. a step down in size (.8rem to .76rem, 13.6 to 12.9 px) and a hair of tracking (-.005em);
   2. more width for the label: the closing column 720 to 760 px, the form's side padding 24 to 20 px.
   The Polish sentence needs 653 px at that size; the label gets 686 at 1440 and wider and 659 at 1280.
   Narrower than that it wraps, gracefully, as it does now. Phones and tablets (under 960) are untouched. */
@media (min-width:960px){
  .closing-in{ width:min(760px, 100%); }
  .close-form{ padding:22px 20px; }
  .close-form .consent{ font-size:.76rem; letter-spacing:-.005em; }
}