/* Hora Nod page. The system is in hora.css; this is only this page's composition. */
body { background:var(--deep); }
main { position:relative; }

/* ---------- Desenul tehnic. Default: readable stack with the static plate. .nod-gl turns it into the pinned stage ---------- */
.desen { position:relative; background:var(--deep); }
.desen__stage { position:relative; padding-block:calc(var(--header-h) + clamp(32px,5vw,72px)) clamp(56px,7vw,96px); }
.desen__gl,.desen__over,.sheet,.desen__bar { display:none; }
.desen__copy { position:relative; z-index:3; }
.desen__copy h1 { max-width:19ch; font-size:clamp(2.3rem,1.2rem + 3.7vw,4.5rem); line-height:1.04; }
.desen__copy .t-lead { margin-top:.7em; max-width:46ch; }
.act { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:1.4em; }
.plate { margin:clamp(28px,5vw,56px) auto 0; padding-inline:var(--gutter); max-width:calc(900px + var(--gutter)*2); }
.plate svg { width:100%; height:auto; display:block; background:radial-gradient(90% 80% at 50% 58%,#123029 0%,#0E211C 55%,var(--deep) 100%); outline:1px solid #2F4C45; }
.plate figcaption { margin-top:1em; }
.parts-h { padding-inline:var(--gutter); max-width:calc(var(--max) + var(--gutter)*2); margin:clamp(40px,5vw,64px) auto 0; }
.parts { list-style:none; margin:24px auto 0; padding:0 var(--gutter); max-width:calc(var(--max) + var(--gutter)*2); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,64px); }
.parts li { position:relative; padding:18px 0 20px; border-top:1px solid var(--hairline); }
.part__n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--deep-gold); border-radius:50%; font:500 14px/1 var(--font-data); color:var(--deep-gold); margin-right:.55em; vertical-align:.12em; }
.parts h3 { display:inline; font-size:clamp(1.25rem,1.15rem + .35vw,1.5rem); }
.parts p { margin-top:.4em; color:var(--text-2); }
.parts li[data-red] .part__n { border-color:#E07A5F; color:#F19A82; }
.cartouche { margin:28px var(--gutter) 0; font:400 var(--t-mono)/1.4 var(--font-data); color:var(--text-2); max-width:62ch; }
.cartouche b { font-weight:500; color:var(--deep-ink); display:block; }
@media (max-width:760px) { .parts { grid-template-columns:minmax(0,1fr); } }

/* the static sheet on a wide screen: words on the left, the plate beside them, as in the animated version */
@media (min-width:1100px) {
  html:not(.nod-gl) .desen__stage { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,3vw,48px); padding-inline:max(var(--gutter),calc((100% - var(--max))/2)); align-items:start; }
  html:not(.nod-gl) .desen__copy { padding:0; margin:0; max-width:none; }
  html:not(.nod-gl) .desen__copy h1 { font-size:clamp(2.4rem,.8rem + 2.8vw,3.75rem); }
  html:not(.nod-gl) .plate { margin:0; padding:0; max-width:none; grid-column:2; grid-row:1 / span 2; }
  html:not(.nod-gl) .parts-h,html:not(.nod-gl) .parts,html:not(.nod-gl) .cartouche { grid-column:1 / -1; padding-inline:0; margin-inline:0; max-width:none; }
}
html.nod-gl .desen { height:350svh; }
html.nod-gl .desen__stage { position:sticky; top:0; height:100svh; padding:0; overflow:hidden; background:radial-gradient(120% 90% at 62% 66%,#123029 0%,#0E211C 46%,var(--deep) 100%); }
html.nod-gl .plate,html.nod-gl .parts-h { display:none; }
html.nod-gl .desen__gl { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1; }
html.nod-gl .desen__over { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
html.nod-gl .sheet { display:block; position:absolute; inset:calc(var(--header-h) + 10px) 10px 10px 10px; z-index:0; border:1px solid #2F4C45; pointer-events:none;
  background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size:32px 32px; background-position:-1px -1px; }
html.nod-gl .sheet::before,html.nod-gl .sheet::after { content:""; position:absolute; left:0; right:0; height:7px; background:repeating-linear-gradient(90deg,#3B5C53 0 1px,transparent 1px 64px); }
html.nod-gl .sheet::before { top:0; } html.nod-gl .sheet::after { bottom:0; }
html.nod-gl .desen__copy { position:absolute; left:0; right:0; top:calc(var(--header-h) + clamp(18px,4vh,46px)); margin:0 auto; pointer-events:auto; }
html.nod-gl.nod-wide .desen__copy { top:calc(var(--header-h) + clamp(18px,11vh - 20px,120px)); }
html.nod-gl.nod-wide .desen__copy h1 { max-width:min(50vw,17ch); font-size:clamp(2.4rem,.8rem + 3.7vw,4.5rem); }
html.nod-gl.nod-wide .desen__copy .t-lead { max-width:min(44vw,46ch); }
html.nod-gl .desen__bar { display:flex; position:absolute; left:var(--gutter); right:calc(var(--gutter) + 190px); bottom:max(14px,env(safe-area-inset-bottom)); align-items:center; gap:clamp(14px,2vw,28px); z-index:4; min-height:44px; }
.bar__prog { flex:1; height:12px; position:relative; background:repeating-linear-gradient(90deg,#6E8A80 0 1px,transparent 1px 8px); opacity:.95; min-width:60px; }
.bar__prog i { position:absolute; left:0; top:-2px; bottom:-2px; width:2px; background:var(--deep-gold); box-shadow:0 0 0 1px var(--deep-gold); transform:translateX(calc(var(--p,0)*var(--w,0px))); }
.bar__prog::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#6E8A80; }
.bar__skip { background:var(--deep); padding-inline:.6em; border-radius:4px; flex:none; display:inline-flex; align-items:center; min-height:44px; color:var(--deep-ink); font-size:1.0625rem; text-decoration:underline; text-decoration-color:var(--deep-gold); text-underline-offset:.3em; text-decoration-thickness:2px; }

/* cartouche: the title block of the sheet */
html.nod-gl .cartouche { position:absolute; z-index:3; margin:0; pointer-events:none; }
html.nod-gl .cartouche b { display:inline; }
html.nod-gl.nod-wide .cartouche { display:none; right:calc(var(--gutter) - 8px); left:auto; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 52px); max-width:none; }
/* the title block of the sheet: ruled cells, as on a real drawing */
html.nod-gl .cartouche { display:grid; grid-template-columns:auto auto; border:1px solid #3B5C53; background:#0B1714; width:max-content; max-width:calc(100% - var(--gutter)*2); }
html.nod-gl .cartouche > * { padding:3px 10px; }
html.nod-gl .cartouche span { border-left:1px solid #3B5C53; }
html.nod-gl .cartouche span:last-child { grid-column:1/-1; border-left:0; border-top:1px solid #3B5C53; }
html.nod-gl.nod-wide .cartouche { display:grid; left:max(var(--gutter),calc((100% - var(--max))/2)); right:auto; bottom:64px; }
html.nod-gl:not(.nod-wide) .cartouche { left:var(--gutter); top:calc(var(--header-h) + 14px); }
html.nod-gl:not(.nod-wide) .cartouche span:last-child { display:none; }
@media (max-width:1239px) { html.nod-gl.nod-wide .cartouche span:last-child { display:none; } }
/* the words sit on a clearing cut out of the ink itself, in the shader: no panel behind them */
html.nod-gl.nod-wide .copy-in { position:relative; width:fit-content; }

/* the labels of the plate */
html.nod-gl .parts { position:absolute; margin:0; padding:0; max-width:none; z-index:3; pointer-events:none; }
html.nod-gl.nod-wide .parts { --side:max(var(--gutter),calc((100% - var(--max))/2)); inset:calc(var(--header-h) + 24px) var(--side) 96px var(--side); display:grid; grid-template-columns:minmax(0,min(27vw,350px)) minmax(0,1fr) minmax(0,min(27vw,350px)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:0; }
html.nod-gl.nod-wide .parts li { border:0; padding:0; grid-column:1; opacity:0; transition:opacity 420ms var(--ease-out); align-self:start; }
html.nod-gl.nod-wide .parts li:nth-child(1) { grid-row:1; } html.nod-gl.nod-wide .parts li:nth-child(2) { grid-row:2; } html.nod-gl.nod-wide .parts li:nth-child(3) { grid-row:3; }
html.nod-gl.nod-wide .parts li:nth-child(n+4) { grid-column:3; }
html.nod-gl.nod-wide .parts li:nth-child(4) { grid-row:3; } html.nod-gl.nod-wide .parts li:nth-child(5) { grid-row:2; } html.nod-gl.nod-wide .parts li:nth-child(6) { grid-row:1; }
html.nod-gl.nod-wide .parts li.is-on { opacity:1; }
html.nod-gl.nod-wide .parts li p { font-size:var(--t-body); line-height:1.42; color:var(--deep-text-2); }
html.nod-gl.nod-wide .parts li.is-active h3 { color:var(--deep-gold); }
html.nod-gl.nod-wide .parts li[data-red].is-active h3 { color:#F19A82; }
/* phones and narrow: one label at a time, opaque, above the ruler */
html.nod-gl:not(.nod-wide) .parts { left:0; right:0; bottom:60px; min-height:178px; display:block; }
html.nod-gl:not(.nod-wide) .parts::before { content:""; position:absolute; inset:0; background:linear-gradient(transparent,var(--deep) 12px); opacity:0; transition:opacity 260ms ease-out; }
html.nod-gl:not(.nod-wide) .parts.has-active::before { opacity:1; }
html.nod-gl:not(.nod-wide) .parts li { position:absolute; left:var(--gutter); right:var(--gutter); top:16px; border:0; padding:0; opacity:0; transition:opacity 260ms ease-out; }
html.nod-gl:not(.nod-wide) .parts li.is-active { opacity:1; }
html.nod-gl:not(.nod-wide) .parts li p { margin-top:.3em; line-height:1.36; }
.desen__over .dim { fill:none; stroke:#BCCAC3; stroke-width:.9; stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0; }
.desen__over .dimt { font:500 14px var(--font-data); fill:#BCCAC3; opacity:0; text-anchor:middle; }
.desen__over .ldr path { fill:none; stroke:var(--deep-gold); stroke-width:1; stroke-dasharray:1 1; }
.desen__over .ldr circle { fill:var(--deep-gold); }
.desen__over .ldr--alert path { stroke:#E07A5F; } .desen__over .ldr--alert circle { fill:#E07A5F; }
@media (max-width:560px) {
  html.nod-gl .desen__bar { right:var(--gutter); flex-wrap:wrap; gap:0 12px; bottom:max(4px,env(safe-area-inset-bottom)); }
  .bar__prog { flex-basis:100%; order:0; }
  .bar__skip { order:1; font-size:1rem; min-height:44px; }
  .pause-ctl { bottom:max(4px,env(safe-area-inset-bottom)); font-size:1rem; padding-inline:.7em; right:var(--gutter); }
  html.nod-gl .sheet { inset:calc(var(--header-h) + 6px) 6px 6px 6px; }
  html.nod-gl .desen__copy .t-lead { font-size:1.125rem; line-height:1.36; margin-top:.5em; }
  html.nod-gl .desen__copy h1 { font-size:clamp(1.95rem,8.2vw,2.5rem); }
  html.nod-gl .desen__copy .act { margin-top:.7em; gap:4px 18px; }
  html.nod-gl:not(.nod-wide) .parts { bottom:74px; }
}
@media (max-width:360px) { .bar__skip { max-width:6.5em; line-height:1.1; font-size:.9375rem; } }
@media (max-height:640px) and (max-width:999px) { html.nod-gl .desen__copy .t-lead { display:none; } }

/* ---------- reading bands ---------- */
.band h2 { max-width:22ch; }
.lead-after { margin-top:.75em; }

/* ---------- the instrument ---------- */
.sim { position:relative; }
.sim__head { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px clamp(24px,4vw,64px); align-items:end; }
@media (max-width:860px) { .sim__head { grid-template-columns:minmax(0,1fr); } }
.instr { margin-top:clamp(28px,4vw,52px); border:1px solid #3B5C53; background:#0D1D19; box-shadow:0 0 0 1px #000 inset,0 30px 80px -40px #000; display:grid; grid-template-columns:minmax(0,1fr); }
.instr__top { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px clamp(20px,3vw,44px); padding:14px clamp(14px,2vw,24px); border-bottom:1px solid #2F4C45; }
.instr__big { font:800 clamp(2rem,1.6rem + 1.5vw,3rem)/1 var(--font-display); font-stretch:110%; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--deep-ink); white-space:nowrap; }
.lbl-m { display:block; font:400 var(--t-mono)/1.3 var(--font-data); color:var(--deep-text-2); margin-bottom:4px; }
.instr__state { font:700 var(--t-h3)/1.1 var(--font-display); font-stretch:106%; color:var(--deep-gold); }
.instr__clock { font:500 1.125rem var(--font-data); color:var(--deep-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.instr__tag { margin-left:auto; text-align:right; }
.instr__body { display:grid; grid-template-columns:minmax(0,1fr); }
.sim__view { position:relative; }
.sch { display:block; width:100%; height:auto; color:var(--draw-ink); }
.sch--port { display:none; }
.sch-wrap { position:relative; padding:clamp(8px,1.4vw,18px); }
.sch-layer { position:relative; }
.sch-flow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none; }
.sch-flow[data-kind="land"] { display:block; }
.sch .p-frame { fill:none; stroke:#DCE6E1; stroke-width:1.3; }
.sch .p-in { fill:#0F2420; stroke:#DCE6E1; stroke-width:.5; stroke-opacity:.5; }
.sch .pw { fill:none; stroke:#7F6A36; stroke-width:1.4; stroke-linejoin:round; }
.sch .dt { fill:none; stroke:#7E9A90; stroke-width:1; stroke-dasharray:3 5; }
.sch .lk { stroke:#BCCAC3; stroke-width:1.2; }
.sch .dev { fill:#0D1D19; stroke:#DCE6E1; stroke-width:1.2; }
.sch .thin { fill:none; stroke:#DCE6E1; stroke-width:.6; stroke-opacity:.7; }
.sch .ghost { fill:none; stroke:#DCE6E1; stroke-width:.5; stroke-opacity:.34; }
.sch .nodbox { stroke:#E6B04A; stroke-width:1.6; }
.sch .spoolfill { fill:#E6B04A; transform-box:fill-box; transform-origin:left center; transform:scaleX(0); }
.sch .knob { fill:#B8452C; stroke:#E07A5F; stroke-width:1.4; }
.sch .sl { fill:#DCE6E1; font-family:var(--font-body); font-weight:600; }
.sch .sv { fill:#E6B04A; font-family:var(--font-body); font-weight:600; font-variant-numeric:tabular-nums; }
.sch .cutmark { opacity:0; transition:opacity 180ms ease; }
.sch .cutbg { fill:#0D1D19; }
.sch .cutmark path { fill:none; stroke:#DCE6E1; stroke-width:2; }
.sch .plat,.sch .plat + * { transition:opacity 240ms ease; }
.instr[data-link="down"] .sch .plat { stroke-opacity:.45; }
.sch .nv { fill:#BCCAC3; font-family:var(--font-body); font-weight:500; }
.instr[data-trip="1"] .sch .nv { fill:#F19A82; }
.sch .lg { fill:#BCCAC3; font-family:var(--font-body); font-weight:500; }
.sch .lgp { fill:none; stroke:#E6B04A; stroke-width:2; }
.sch .lgd { fill:none; stroke:#DCE6E1; stroke-width:2.4; stroke-dasharray:2.4 5; }
.instr[data-link="down"] .sch .cutmark { opacity:1; }
.instr[data-link="down"] .sch .lk { stroke-opacity:.35; }
.instr[data-trip="1"] .sch .knob { fill:#7A2A18; }

/* the readouts: labelled, in one line under the schematic */
.read { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px clamp(16px,2vw,28px); padding:12px clamp(14px,2vw,24px); border-top:1px solid #2F4C45; }
.read dt { font:400 var(--t-mono)/1.3 var(--font-data); color:var(--deep-text-2); }
.read dd { margin:2px 0 0; font:700 clamp(1.25rem,1.1rem + .5vw,1.625rem)/1.15 var(--font-display); font-stretch:106%; font-variant-numeric:tabular-nums; color:var(--deep-ink); white-space:nowrap; }
.spoolbar { height:5px; margin-top:6px; background:#1E3932; position:relative; overflow:hidden; }
.spoolbar i { position:absolute; inset:0; background:var(--deep-gold); transform:scaleX(0); transform-origin:left; }
.chart { border-top:1px solid #2F4C45; padding:8px clamp(10px,1.6vw,18px); }
.chart canvas { display:block; width:100%; height:176px; }
.chart figcaption { font:400 var(--t-mono)/1.35 var(--font-data); color:var(--deep-text-2); }

.ctl { padding:clamp(16px,2vw,24px); border-top:1px solid #2F4C45; display:flex; flex-direction:column; gap:16px; }
.ctl__say { min-height:calc(1.3em + 5*1.34*1.3125rem); }
.ctl__say p { font-size:1.3125rem; line-height:1.34; color:var(--deep-ink); text-wrap:pretty; }
.keys { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.key { position:relative; display:flex; align-items:center; gap:.7em; width:100%; min-height:54px; padding:.5em .95em; font:600 1.125rem/1.2 var(--font-body); color:var(--deep-ink); text-align:left; background:#132A25; border:1px solid #4A6A61; border-radius:var(--r-control); box-shadow:0 1px 0 #2F4C45 inset,0 2px 0 #071210; cursor:pointer; transition:background-color 120ms ease,transform 90ms var(--ease-std),box-shadow 90ms ease; }
.key:active { transform:translateY(2px); box-shadow:0 1px 0 #2F4C45 inset,0 0 0 #071210; }
.key[aria-disabled="true"] { color:#BCCAC3; background:transparent; box-shadow:none; border-style:dashed; }
@media (hover:hover) and (pointer:fine) { .key:not([aria-disabled="true"]):hover { background:#1A3730; } }
.key svg { flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.key--stop { background:#3A1A12; border-color:#B8452C; color:#FBE3DC; }
@media (hover:hover) and (pointer:fine) { .key--stop:not([aria-disabled="true"]):hover { background:#4B2015; } }
.key--stop .dot { flex:none; width:20px; height:20px; border-radius:50%; background:#B8452C; border:2px solid #E07A5F; }
.key--stop[data-on="1"] { background:#1A0E0A; }
.key--stop[data-on="1"] .dot { background:#7A2A18; }
.key--q { background:transparent; box-shadow:none; border-color:transparent; font-weight:500; text-decoration:underline; text-decoration-color:var(--deep-gold); text-underline-offset:.28em; min-height:44px; padding-inline:.2em; }
.hint { min-height:2.7em; font-size:var(--t-small); color:var(--deep-text-2); }

/* the command's walk: the real order of checks */
.gates { padding:12px clamp(14px,2vw,24px) 14px; border-top:1px solid #2F4C45; }
.gates__row { display:flex; gap:clamp(12px,2vw,28px); margin-top:6px; flex-wrap:wrap; }
.gates__grp { min-width:0; }
.gates__grp > span { display:block; font:400 var(--t-mono)/1.3 var(--font-data); color:var(--deep-text-2); margin-bottom:6px; }
.gates ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.gates li { font:500 var(--t-mono)/1.2 var(--font-data); padding:.42em .6em; border:1px solid #2F4C45; color:var(--deep-text-2); min-height:30px; display:inline-flex; align-items:center; gap:.4em; transition:color 120ms ease,border-color 120ms ease,background-color 120ms ease; }
.gates li::after { content:""; }
.gates li[data-st="ok"] { color:var(--deep-ink); border-color:#4FB08C; }
.gates li[data-st="ok"]::after { content:"trecut"; color:#4FB08C; }
.gates li[data-st="stop"] { color:#10201B; background:var(--deep-gold); border-color:var(--deep-gold); }
.gates li[data-st="stop"]::after { content:"oprit"; }
.gates li[data-st="cut"] { color:#10201B; background:var(--deep-gold); border-color:var(--deep-gold); }
.gates li[data-st="cut"]::after { content:"tăiat la limită"; }
.gates__note { min-height:1.4em; margin-top:8px; font-size:var(--t-small); color:var(--deep-text-2); max-width:none; }

.log-wrap { border-top:1px solid #2F4C45; padding:12px clamp(14px,2vw,24px) 16px; }
.log { list-style:none; margin:6px 0 0; padding:0; max-height:13.5em; overflow:auto; overscroll-behavior:contain; }
.log li { display:grid; grid-template-columns:5.6em minmax(0,1fr); gap:0 12px; padding:6px 0; border-top:1px solid #1E3932; font-size:var(--t-small); line-height:1.34; color:var(--deep-text-2); }
.log li span:first-child { font:400 var(--t-mono)/1.5 var(--font-data); color:var(--deep-text-2); }
.log li b { grid-column:2; font:600 var(--t-small)/1.4 var(--font-body); color:var(--deep-gold); overflow-wrap:anywhere; }
.log li b small { font:400 var(--t-mono)/1.4 var(--font-data); color:var(--deep-text-2); margin-left:.6em; }
.log li span:last-child { grid-column:2; }

/* desktop: instrument on the left, the operator on the right */
@media (min-width:1240px) {
  .instr__body { grid-template-columns:minmax(0,1.86fr) minmax(320px,1fr); }
  .sim__view { border-right:1px solid #2F4C45; }
  .ctl { border-top:0; gap:10px; }
  .read { grid-template-columns:1.25fr .95fr 1.4fr .85fr; gap:10px 14px; }
  .keys { gap:6px; }
  .key { min-height:48px; padding-block:.35em; }
  .gates,.log-wrap { border-top:1px solid #2F4C45; }
}
@media (max-width:860px) {
  .sch--land { display:none; } .sch--port { display:block; }
  .sch-flow[data-kind="land"] { display:none; } .sch-flow[data-kind="port"] { display:block; }
  .instr__top { padding-block:10px; gap:6px 18px; }
  .instr__top > :first-child { flex-basis:100%; }
  .instr__tag { margin-left:0; text-align:left; flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
  .instr__tag .lbl-m { margin:0; }
  /* the sentence sits right under the schematic, the keys right under the sentence */
  .instr__body { display:flex; flex-direction:column; }
  .sim__view,.instr__body > div:not(.sim__view),.ctl { display:contents; }
  .sch-wrap { order:1; padding:6px; }
  .ctl__say { order:2; min-height:calc(1.3em + 6*1.34*1.3125rem + 16px); padding:10px clamp(14px,2vw,24px) 6px; border-top:1px solid #2F4C45; }
  .keys { order:3; grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px clamp(14px,2vw,24px) 0; }
  .hint { order:4; padding:6px clamp(14px,2vw,24px) 8px; }
  .read { order:5; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gates { order:6; }
  .chart { order:7; }
  .key { font-size:1.0625rem; padding:.45em .7em; min-height:64px; }
  .key svg { display:none; }
  .key--stop { grid-column:1/-1; min-height:56px; }
  .key[data-a=cut] { order:1; } .key[data-a=back] { order:2; } .key[data-a=over] { order:3; } .key[data-a=late] { order:4; } .key--stop { order:5; } .key--q { order:6; }
  .key--q { grid-column:1/-1; min-height:44px; }
  .log li { grid-template-columns:minmax(0,1fr); }
  .log li b,.log li span:last-child { grid-column:1; }
}
@media (max-width:374px) { .sch--port .sv { display:none; } .sch--port .sl { font-size:19px; } .sch--port .nv { font-size:18px; } .sch--port .lg { display:none; } .sch--port .lgp,.sch--port .lgd { display:none; } .sch-wrap { padding:2px; } }
/* the two-column instrument at its narrowest: the schematic scales down, its words do not */
@media (min-width:1240px) and (max-width:1420px) { .sch--land .sl,.sch--land .sv { font-size:18.5px; } .sch--land .nv { font-size:18px; } .sch--land .lg { font-size:18px; } }
@media (max-width:400px) { .sch--port .nv { font-size:16px; } }
@media (max-width:374px) { .zid svg text { font-size:22px !important; } .sch--port .nv { font-size:19px !important; } .zid svg .s { font-size:19px !important; } .tablou .ball text { font-size:28px !important; } }
.key--pause { display:none; }
@media (max-width:859px) { .key--pause { display:flex; order:7; } .instr[data-static-flow] .key--pause { display:none; } }
html:not(.js) .ctl,html:not(.sim-on) .ctl,html:not(.sim-on) .gates,html:not(.sim-on) .log-wrap,html:not(.sim-on) .chart,html:not(.sim-on) .instr__top,html:not(.sim-on) .sch-flow { display:none; }
.instr[data-static-flow] .sch .pw { stroke:#B48C3C; stroke-width:2; }
html:not(.sim-on) .instr__body { grid-template-columns:minmax(0,1fr); }
html:not(.sim-on) .sim__view { border-right:0; }
.instr[data-static-flow] .chart { display:none; }
.nojs-note { order:8; display:none; padding:12px clamp(14px,2vw,24px); border-top:1px solid #2F4C45; }
html:not(.sim-on) .nojs-note { display:block; }

/* the failure table: the same answers, in words, for reading and for JS off */
.pe-scurt { margin-top:clamp(36px,5vw,64px); }
.pe-scurt h3 { margin-bottom:.6em; }
.fail { width:100%; border-collapse:collapse; }
.fail th,.fail td { text-align:left; vertical-align:top; padding:16px 0; border-top:1px solid var(--hairline); }
.fail tr:last-child td,.fail tr:last-child th { border-bottom:1px solid var(--hairline); }
.fail th { font-weight:600; padding-right:24px; width:27%; }
.fail td { color:var(--text-2); }
.fail td:nth-child(2) { padding-right:28px; width:32%; }
@media (max-width:760px) {
  .fail,.fail tbody,.fail tr,.fail th,.fail td { display:block; width:auto !important; }
  .fail thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .fail tr { border-top:1px solid var(--hairline); padding:14px 0; }
  .fail th,.fail td { border:0; padding:4px 0; }
  .fail tr:last-child { border-bottom:1px solid var(--hairline); } .fail tr:last-child td,.fail tr:last-child th { border:0; }
}

/* ---------- mounting: the panel and the list ---------- */
.montaj__grid { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(28px,5vw,80px); align-items:start; margin-top:clamp(28px,4vw,56px); }
@media (max-width:980px) { .montaj__grid { grid-template-columns:minmax(0,1fr); } }
.tablou { margin:0; color:var(--draw-ink); }
@media (min-width:981px) { .tablou { position:sticky; top:calc(var(--header-h) + 16px); } .tablou svg { max-height:calc(100svh - var(--header-h) - 96px); width:auto; max-width:100%; } }
.tablou .bg { fill:var(--hora-ground); stroke:none; }
.tablou svg { width:100%; height:auto; overflow:visible; }
.tablou svg * { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.tablou .i { stroke-width:1.2; } .tablou .t { stroke-width:.65; stroke-opacity:.72; } .tablou .h { stroke-width:.45; stroke-opacity:.42; }
.tablou .g { stroke:var(--draw-accent); stroke-width:1.5; } .tablou .gt { stroke:var(--draw-accent); stroke-width:.7; }
.tablou .a { stroke:var(--e-alert); stroke-width:1.4; } .tablou .af { fill:#B8452C; stroke:var(--e-alert); stroke-width:1.2; }
.tablou .ball circle { fill:var(--hora-ground); stroke:var(--draw-accent); stroke-width:1; }
.tablou .ball text { fill:var(--hora-ink); stroke:none; font:600 15px var(--font-body); text-anchor:middle; }
.band--surface .tablou .ball circle { fill:var(--hora-surface); }
.tablou [data-group] { transition:opacity 160ms ease; }
.tablou [data-group].is-lit { stroke-width:1.4; }
.tablou figcaption { margin-top:.8em; }
.poz { list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.poz li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:0 12px; padding:16px 0; border-bottom:1px solid var(--hairline); transition:background-color 140ms ease; }
.poz .n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--draw-accent); border-radius:50%; font-weight:600; font-size:.9375rem; }
.poz h3 { font-size:clamp(1.1875rem,1.12rem + .3vw,1.375rem); font-stretch:104%; line-height:1.25; }
.poz p { grid-column:2; margin-top:.3em; color:var(--text-2); }

.ave { margin-top:clamp(56px,7vw,104px); }
.ave h3 { font-size:var(--t-h2); line-height:1.08; max-width:18ch; margin-bottom:.6em; letter-spacing:-.02em; font-stretch:108%; font-weight:750; }

/* ---------- the profile ---------- */
.profil { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); margin-top:clamp(28px,4vw,52px); align-items:start; }
@media (max-width:980px) { .profil { grid-template-columns:minmax(0,1fr); } }
.code { margin:0; padding:clamp(14px,2vw,24px); background:#0B1714; color:#DCE6E1; border:1px solid #2A4A42; overflow:auto; font:400 15px/1.62 var(--font-data); tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere; }
.code .k { color:#BCCAC3; } .code .v { color:#E6B04A; } .code .m { color:#F3CE80; font-weight:500; }
.code-cap { margin-top:.7em; }
@media (max-width:420px) { .code { font-size:14px; } }
.profil__notes { list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.profil__note { padding:14px 0; border-bottom:1px solid var(--hairline); }
.profil__note code { font:500 var(--t-mono)/1.4 var(--font-data); display:block; color:var(--hora-brand-deep); margin-bottom:.25em; }
.profil__note p { color:var(--text-2); }

/* ---------- the wall ---------- */
.sigur__grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); margin-top:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:980px) { .sigur__grid { grid-template-columns:minmax(0,1fr); } }
.zid { margin:0; }
.zid svg { width:100%; height:auto; overflow:visible; color:var(--draw-ink); }
.zid svg .i { fill:none; stroke:currentColor; stroke-width:1.2; }
.zid svg .t { fill:none; stroke:currentColor; stroke-width:.6; stroke-opacity:.6; }
.zid svg .h { fill:none; stroke:currentColor; stroke-width:.45; stroke-opacity:.36; }
.zid svg .g { fill:none; stroke:var(--draw-accent); stroke-width:1.5; }
.zid svg .gt { fill:none; stroke:var(--draw-accent); stroke-width:.55; stroke-opacity:.75; }
.zid svg .x { fill:none; stroke:currentColor; stroke-width:1.5; }
.zid svg text { fill:currentColor; font-family:var(--font-body); font-weight:600; font-size:17px; }
.zid svg .s { font-weight:400; fill:var(--text-2); font-size:16px; }
.zid__tip--i { }
.sigur__list.hair > li h3 { font-size:clamp(1.1875rem,1.12rem + .3vw,1.375rem); line-height:1.25; font-stretch:104%; }
.sigur__list.hair > li p { margin-top:.3em; color:var(--text-2); }

/* ---------- the discussion block, as on home ---------- */
.discutie { padding-top:clamp(56px,7vw,110px); }
.discutie h2 { font-size:clamp(2.2rem,1.4rem + 3.2vw,4rem); }
.discutie__l { grid-column:1/6; }
.discutie__l .t-lead { margin-top:.6em; color:var(--deep-text-2); }
.discutie__c { margin-top:1.1em; }
.discutie__r { grid-column:7/13; }
.discutie__priv { margin-top:.8em; }
@media (max-width:860px) { .discutie__r { margin-top:32px; } }
.discutie a { color:inherit; }

html[data-paused] .desen__over .ldr { transition:none; }
@media print { .desen__gl,.desen__over,.sheet,.desen__bar { display:none !important; } }