/* lenhof.works · the instrument
   Material tokens and physical components on top of the stefanOS design system
   (colors_and_type.css, components.css). Derived in the Designer, rounds 11 to 20, 04.11.2026.
   Form rule: raised = clickable (pad, knob) · recessed = input (well) · display = dark glass, shows data ·
   flat = everything read (tab, index, colour mark, meter, figure, leader) · screen = the software the team works with: white, flat, 1 px edge (v4). No form on a form.
   Origins, all written new, no lines copied:
   knob after the OP-1 knob in github.com/granieri/CSS-OP1 (repo has no licence);
   pad and key relief after the EP-133 pad recipe in the old stefanOS studio (te-ep133.css, from Uiverse.io, Praashoo7);
   display after the EP-133 and K.O. II segment LCDs (Stefan's screenshots, 04.11.2026) and Braun.
   Reference copies: Stefan Works/website/referenz-te-styles/ (not loaded, not deployed). */

.lw{
  /* material (derived, candidates for stefanOS tokens) */
  --lw-body:#E9E9E6;        /* page housing, light grey, not beige */
  --lw-mod:#F7F7F5; --lw-housing-lo:#ECECE9;         /* module face */
  --lw-well:#FFFFFF;        /* input well, white (Stefan, 05.11.2026) */
  --lw-edge:#CBCAC5;        /* 1 px edges */
  --lw-hair:#DEDDD8;        /* hairlines between rows */
  --lw-ink-print:#605F59;   /* printed labels on the housing (05.11.: darker for 4.5:1 on the alternate plate) */
  --lw-knob:#D2D2CD;        /* recessed ring around an encoder (OP-1 style cap: colour, knurled rim, white dot) */
  --lw-glass:#141414;       /* display glass */
  --lw-glass-text:#F2F2EE;
  --lw-glass-muted:#8E8E88;
  --lw-glass-track:#2C2C2A;
  /* signal (from stefanOS: cta, cta-hover, client-minerva, personal, accent, accent-hover) */
  --lw-c1:#F25C2A; --lw-c1t:#E14D1F;
  --lw-c2:#0A786E; --lw-c2m:#0EA899;
  --lw-c3:#7A6891;
  --lw-c4:#C47A3A; --lw-c4t:#B36C30;
  --lw-pad-face:#DCDCD8;    /* grey pad and key face, TE grey */
  --lw-key-o:#D6400C; --lw-key-o-edge:#B8370A;  /* orange key face: white labels reach 4.6:1 at any size (Stefan, 07.11.2026: dark on orange reads badly) */
  --te-blue:#2F6CF0;        /* month knob in 03 (unchanged) */
  /* hero knobs: the Teenage Engineering knob colours from the stefanOS studio reference (te-op1.css) */
  --tek-blue:#99CCFF; --tek-green:#70DB70; --tek-white:#FFFFFF; --tek-orange:#FFB84D;
  /* relief (EP-133 pad recipe: light catch top left, shade bottom right, directional drop shadow) */
  --lw-pad:inset 1.5px 1.5px 2px #FFFFFF,inset -2px -2px 6px rgba(0,0,0,0.06),2px 4px 7px rgba(0,0,0,0.13);
  --lw-pad-active:inset 0.5px 0.5px 4px rgba(0,0,0,0.35),inset -2px -2px 5px rgba(0,0,0,0.04),0 0 0 rgba(0,0,0,0);
  --lw-cta:inset 2px 2px 10px rgba(255,190,120,0.55),inset -4px -4px 8px rgba(0,0,0,0.12),3px 5px 10px rgba(0,0,0,0.20);
  --lw-cta-active:inset 0.5px 0.5px 4px rgba(0,0,0,0.55),inset -3px -3px 8px rgba(0,0,0,0.08),0 0 0 rgba(0,0,0,0);
  --lw-well-shadow:inset 0 0 0 1px #CBCAC5,inset 1px 2px 4px rgba(0,0,0,0.10);
  --lw-glass-shadow:inset 0 0 0 1px #000000,inset 0 1px 0 rgba(255,255,255,0.08),0 1px 0 rgba(255,255,255,0.75);
  --lw-emboss:0 1px 0 rgba(255,255,255,0.7);
  --lw-focus:2px solid var(--text);
  /* geometry */
  --lw-seg:6px; --lw-seg-period:8px;      /* meter block and period */
  --lw-mark-w:40px; --lw-mark-h:4px;      /* colour mark on a rule */
  --lw-r-pad:8px; --lw-r-panel:8px; --lw-r-tab:2px; --lw-r-chip:4px;
}

/* ── flat: printed on the housing ── */
.lbl,.tab{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:lowercase;color:var(--lw-body);background:var(--text);padding:4px 8px;border-radius:var(--lw-r-tab);line-height:1.2;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;text-shadow:none;align-self:flex-start;flex:none}
.kick.tab{color:var(--lw-body);background:var(--text);text-shadow:none}
.lbl .key,.tab .key{color:var(--lw-body);text-shadow:none}
.lbl i,.kick i,.tab i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.key{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--text);line-height:1;flex:none;text-shadow:var(--lw-emboss)}
.key::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--kc,var(--lw-edge));display:inline-block;flex:none}
.cb{border-top:1px solid var(--text);position:relative}
.cb::before{content:"";position:absolute;left:0;top:-1px;width:var(--lw-mark-w);height:var(--lw-mark-h);background:var(--sc,var(--text))}
.hair{border-top:1px solid var(--lw-hair)}
.spec{display:flex;align-items:baseline;gap:10px;padding:9px 0}.spec+.spec{border-top:1px solid var(--lw-hair)}
.lead{flex:1 1 auto;border-bottom:1px dotted var(--text-faint);transform:translateY(-4px)}
.panel{background:var(--lw-mod);border:1px solid var(--lw-edge);border-radius:var(--lw-r-panel)}
.node{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.04em;background:var(--lw-mod);border:1px solid var(--edge,var(--lw-edge));border-radius:var(--lw-r-chip);padding:9px 12px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.chip{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.04em;background:var(--lw-mod);border:1px solid var(--lw-edge);border-radius:var(--lw-r-chip);padding:7px 11px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mk{width:18px;height:18px;display:inline-block;box-sizing:border-box;margin-top:3px;flex:none}
.seg{height:10px;width:var(--w);background:repeating-linear-gradient(90deg,var(--sg) 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}
.stack{width:26px;background:repeating-linear-gradient(to top,var(--sg) 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}
.fig{display:block;margin-top:14px}
.portrait{margin:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--lw-glass);border-radius:var(--lw-r-panel);box-shadow:0 0 0 1px var(--lw-edge)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.lnk{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--lc,var(--lw-c1));text-decoration-thickness:2px;text-underline-offset:3px}
.lnk:hover{color:var(--text);text-decoration-thickness:3px}

/* ── raised: clickable ── */
/* one orange key for every "get in touch", flat and pressable like the device keys (Stefan, 07.11.2026: "flach lassen, aber eindrückbar"): flat face, light edge top left,
   a hard shadow to the bottom right that goes when the key is pressed; white label on the deeper key orange, 4.6:1 */
.btn-key{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;background:var(--lw-key-o);color:#FFFFFF;border-radius:6px;font-family:var(--font-body);font-size:19px;font-weight:700;letter-spacing:0;text-decoration:none;border:none;box-shadow:inset 1.5px 1.5px 2px rgba(255,255,255,0.35),inset -3px -3px 8px var(--lw-key-o),4px 4px 5px rgba(0,0,0,0.26),0 0 0 1px var(--lw-key-o-edge);transition:transform 80ms ease-out,box-shadow 80ms ease-out,background 80ms ease-out;white-space:nowrap}
.btn-key:hover{background:#C93C0B}
.btn-key:active{transform:translateY(1px);box-shadow:inset 0.5px 0.5px 4px #000000,0 0 0 1px var(--lw-key-o-edge)}
.btn-key-sm{height:40px;padding:0 16px}
.knob{position:relative;width:60px;height:60px;border-radius:50%;background:var(--lw-knob);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;box-shadow:inset 0 2px 3px rgba(0,0,0,0.22),inset 0 -1px 0 rgba(255,255,255,0.8),0 1px 0 rgba(255,255,255,0.7)}
.knob::after{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,0.40),rgba(255,255,255,0) 60%);pointer-events:none}
.knob-in{width:46px;height:46px;border-radius:50%;background:var(--kb,var(--lw-c2m));position:relative;box-shadow:inset 0 -3px 4px rgba(0,0,0,0.30),inset 0 1px 1px rgba(255,255,255,0.45),0 3px 4px rgba(0,0,0,0.30),0 1px 1px rgba(0,0,0,0.25);transition:transform 160ms ease-out}
.knob-in::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,0.22) 0 4deg,rgba(0,0,0,0) 4deg 12deg);-webkit-mask:radial-gradient(circle,transparent 0 72%,#000 73%);mask:radial-gradient(circle,transparent 0 72%,#000 73%)}
.knob-in::after{content:"";position:absolute;left:50%;top:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,0.18)}
.knob:hover .knob-in{filter:brightness(1.06)}
.knob-in.w{box-shadow:inset 0 -3px 4px rgba(0,0,0,0.18),inset 0 1px 1px rgba(255,255,255,0.8),0 3px 4px rgba(0,0,0,0.25),0 1px 1px rgba(0,0,0,0.2)}
.knob-in.w::after{background:#1D1B18;box-shadow:none}
.btn-key:focus-visible,.lnk:focus-visible,.well:focus-within{outline:var(--lw-focus);outline-offset:3px}

/* ── raised: the EP-133 knob (after Stefan's EP-133 photos, 05.11.2026): disc with a smaller cap, label above, LEDs below ── */
.klab{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text)}
.ek{position:relative;width:64px;height:64px;border-radius:50%;cursor:pointer;flex:none;background:radial-gradient(circle at 38% 30%,var(--k1) 0%,var(--k2) 55%,var(--k3) 100%);box-shadow:0 8px 14px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.22),inset 0 2px 2px rgba(255,255,255,0.55),inset 0 -3px 4px rgba(0,0,0,0.18)}
.ek::after{content:"";position:absolute;left:50%;top:47%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 32%,var(--k1) 0%,var(--k2) 75%);box-shadow:0 4px 5px rgba(0,0,0,0.28),0 1px 1px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.7);transition:transform 80ms ease-out}
.ek:active::after{transform:translate(-50%,-46%)}
.ek.white{--k1:#FFFFFF;--k2:#EDEDEA;--k3:#CDCDC9}
.ek.orange{--k1:#FF825A;--k2:#F25C2A;--k3:#C8401A}
.ek.black{--k1:#55554F;--k2:#262624;--k3:#111110}
.ek.grey{--k1:#E4E4E0;--k2:#BEBEB9;--k3:#9A9A95}
.kleds{display:flex;gap:14px}
.kleds span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--lw-ink-print)}
.kleds i{width:7px;height:7px;border-radius:50%;background:#A9A8A3}

/* ── recessed: input ── */
.well{background:var(--lw-well);border-radius:var(--lw-r-pad);box-shadow:var(--lw-well-shadow);display:flex;align-items:center}
.well{height:48px}
.well input{flex:1 1 auto;min-width:0;width:100%;height:100%;background:transparent;border:0;outline:0;font-family:var(--font-mono);font-size:15px;color:var(--text);padding:0 18px}
.well input::placeholder{color:var(--lw-ink-print)}

/* ── display: segment LCD and bar graph, pre-printed signs, only the active ones lit (EP-133, K.O. II, Braun) ── */
.disp{display:flex;flex-direction:column;gap:20px;padding:28px 32px 24px;border-radius:var(--lw-r-pad);background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0) 45%),var(--lw-glass);color:var(--lw-glass-text);box-shadow:var(--lw-glass-shadow)}
.disp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;min-width:0}
.disp-l{display:flex;align-items:flex-end;gap:32px;min-width:0}
.disp-lt{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.disp-k{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--lw-glass-text)}
.disp-s{font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;color:var(--lw-glass-muted)}
.disp-n{display:flex;align-items:flex-end;gap:8px}.disp-n .seg7{width:66px;height:90px}
.seg7 .s{fill:var(--lw-glass-text);fill-opacity:0.09}
.disp-u{font-family:var(--font-body);font-size:24px;font-weight:600;color:var(--lw-glass-text);margin:0 0 4px 6px}
.graph{display:flex;flex-direction:column;gap:12px;min-width:0}
.bars{position:relative;display:grid;grid-template-columns:repeat(60,minmax(0,1fr));column-gap:4px;height:82px;align-items:end}
.disp.narrow .bars{grid-template-columns:repeat(30,minmax(0,1fr));column-gap:3px}.disp.narrow .gs:nth-of-type(even){display:none}
@media (max-width:900px){.disp .bars{grid-template-columns:repeat(30,minmax(0,1fr));column-gap:3px}.disp .gs:nth-of-type(even){display:none}.disp-top{flex-direction:column;align-items:flex-start}.disp-l{flex-direction:column;align-items:flex-start;gap:12px}}
.gs{position:relative;height:82px;background:repeating-linear-gradient(to top,var(--lw-glass-track) 0 5px,transparent 5px 7px)}
.gl{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:repeating-linear-gradient(to top,var(--c) 0 5px,transparent 5px 7px)}
.tgt{position:absolute;left:0;right:0;bottom:62px;border-top:2px dashed var(--lw-glass-text);opacity:0.75;pointer-events:none}
.axis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px}
.axis span{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--lw-glass-muted);border:1.5px solid #2C2C2A;border-radius:2px;padding:3px 0;text-align:center;white-space:nowrap;line-height:1.3}
.dicons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:22px}
.ic{display:inline-block;flex:none}
.ic.pill{width:22px;height:10px;border-radius:2px;background:#2A2A28}.ic.pill.on{background:var(--lw-c1)}
.ic.sq{width:14px;height:14px;border-radius:2px;background:#232321}
.ic.keys{width:20px;height:14px;background:repeating-linear-gradient(90deg,#2A2A28 0 3px,transparent 3px 5px)}
.ic.mx{width:14px;height:14px;background:radial-gradient(circle,#2A2A28 1.6px,transparent 1.9px) 0 0/5px 5px}.ic.mx.on{background:radial-gradient(circle,#F2F2EE 1.6px,transparent 1.9px) 0 0/5px 5px}
.ic.rec{width:14px;height:14px;border-radius:50%;background:#2A2A28}.ic.rec.on{background:var(--lw-c1)}
.ic.play{width:0;height:0;border-left:12px solid #2A2A28;border-top:7px solid transparent;border-bottom:7px solid transparent}.ic.play.on{border-left-color:#F2F2EE}
.ic.loop{width:14px;height:14px;box-sizing:border-box;border:2px solid #2A2A28;border-right-color:transparent;border-radius:50%}
.ic.ring{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--lw-c1) 0 22%,transparent 22% 25%,#F2F2EE 25% 47%,transparent 47% 50%,#2A2A28 50% 72%,transparent 72% 75%,#2A2A28 75% 97%,transparent 97%);-webkit-mask:radial-gradient(circle,transparent 0 44%,#000 46%);mask:radial-gradient(circle,transparent 0 44%,#000 46%)}
.dbx{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;border:1.5px solid #2C2C2A;color:#3A3A37;padding:2px 6px;border-radius:2px;white-space:nowrap;line-height:1.3}
.dbx.inv{background:#F2F2EE;border-color:#F2F2EE;color:#141414}.dbx.red{border-color:var(--lw-c1);color:var(--lw-c1)}.dbx.lit{border-color:#F2F2EE;color:#F2F2EE}
.dbr{flex-basis:100%;height:0}.dgrp{display:inline-flex;align-items:center;gap:6px;margin-right:8px}.ic.seg{width:11px;height:15px}.ic.met{width:14px;height:16px}.ic.loop.on{border-color:#F2F2EE;border-right-color:transparent}
.disp-r{display:flex;justify-content:flex-end;align-items:center;gap:16px;white-space:nowrap;min-height:16px}
.disp-g{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}.disp-g small{color:var(--lw-glass-muted);font-size:10px;margin-right:6px}
.disp-led{width:8px;height:8px;border-radius:50%;background:var(--lw-c1);box-shadow:0 0 7px var(--lw-c1);animation:disp-blink 2s steps(1) infinite}@keyframes disp-blink{50%{opacity:0.3}}
@keyframes kb0{0%{height:0}5%{height:0;animation-timing-function:steps(2,end)}6.2%{height:12px}100%{height:12px}}.b0{animation:kb0 5s linear 0.4s 1 both}
@keyframes kb1{0%{height:0}6.25%{height:0;animation-timing-function:steps(2,end)}7.45%{height:12px}100%{height:12px}}.b1{animation:kb1 5s linear 0.4s 1 both}
@keyframes kb2{0%{height:0}7.5%{height:0;animation-timing-function:steps(2,end)}8.7%{height:12px}100%{height:12px}}.b2{animation:kb2 5s linear 0.4s 1 both}
@keyframes kb3{0%{height:0}8.75%{height:0;animation-timing-function:steps(2,end)}9.95%{height:12px}100%{height:12px}}.b3{animation:kb3 5s linear 0.4s 1 both}
@keyframes kb4{0%{height:0}10%{height:0;animation-timing-function:steps(2,end)}11.2%{height:12px}100%{height:12px}}.b4{animation:kb4 5s linear 0.4s 1 both}
@keyframes kb5{0%{height:0}11.25%{height:0;animation-timing-function:steps(2,end)}12.45%{height:12px}100%{height:12px}}.b5{animation:kb5 5s linear 0.4s 1 both}
@keyframes kb6{0%{height:0}12.5%{height:0;animation-timing-function:steps(2,end)}13.7%{height:12px}100%{height:12px}}.b6{animation:kb6 5s linear 0.4s 1 both}
@keyframes kb7{0%{height:0}13.75%{height:0;animation-timing-function:steps(2,end)}14.95%{height:12px}100%{height:12px}}.b7{animation:kb7 5s linear 0.4s 1 both}
@keyframes kb8{0%{height:0}15%{height:0;animation-timing-function:steps(2,end)}16.2%{height:12px}100%{height:12px}}.b8{animation:kb8 5s linear 0.4s 1 both}
@keyframes kb9{0%{height:0}16.25%{height:0;animation-timing-function:steps(2,end)}17.45%{height:12px}100%{height:12px}}.b9{animation:kb9 5s linear 0.4s 1 both}
@keyframes kb10{0%{height:0}17.5%{height:0;animation-timing-function:steps(2,end)}18.7%{height:12px}100%{height:12px}}.b10{animation:kb10 5s linear 0.4s 1 both}
@keyframes kb11{0%{height:0}18.75%{height:0;animation-timing-function:steps(2,end)}19.95%{height:12px}100%{height:12px}}.b11{animation:kb11 5s linear 0.4s 1 both}
@keyframes kb12{0%{height:0}20%{height:0;animation-timing-function:steps(2,end)}21.2%{height:12px}100%{height:12px}}.b12{animation:kb12 5s linear 0.4s 1 both}
@keyframes kb13{0%{height:0}21.25%{height:0;animation-timing-function:steps(2,end)}22.45%{height:12px}100%{height:12px}}.b13{animation:kb13 5s linear 0.4s 1 both}
@keyframes kb14{0%{height:0}22.5%{height:0;animation-timing-function:steps(2,end)}23.7%{height:12px}100%{height:12px}}.b14{animation:kb14 5s linear 0.4s 1 both}
@keyframes kb15{0%{height:0}23.75%{height:0;animation-timing-function:steps(3,end)}24.95%{height:19px}100%{height:19px}}.b15{animation:kb15 5s linear 0.4s 1 both}
@keyframes kb16{0%{height:0}25%{height:0;animation-timing-function:steps(3,end)}26.2%{height:19px}100%{height:19px}}.b16{animation:kb16 5s linear 0.4s 1 both}
@keyframes kb17{0%{height:0}26.25%{height:0;animation-timing-function:steps(3,end)}27.45%{height:19px}100%{height:19px}}.b17{animation:kb17 5s linear 0.4s 1 both}
@keyframes kb18{0%{height:0}27.5%{height:0;animation-timing-function:steps(3,end)}28.7%{height:19px}100%{height:19px}}.b18{animation:kb18 5s linear 0.4s 1 both}
@keyframes kb19{0%{height:0}28.75%{height:0;animation-timing-function:steps(3,end)}29.95%{height:19px}100%{height:19px}}.b19{animation:kb19 5s linear 0.4s 1 both}
@keyframes kb20{0%{height:0}30%{height:0;animation-timing-function:steps(4,end)}31.2%{height:26px}100%{height:26px}}.b20{animation:kb20 5s linear 0.4s 1 both}
@keyframes kb21{0%{height:0}31.25%{height:0;animation-timing-function:steps(4,end)}32.45%{height:26px}100%{height:26px}}.b21{animation:kb21 5s linear 0.4s 1 both}
@keyframes kb22{0%{height:0}32.5%{height:0;animation-timing-function:steps(4,end)}33.7%{height:26px}100%{height:26px}}.b22{animation:kb22 5s linear 0.4s 1 both}
@keyframes kb23{0%{height:0}33.75%{height:0;animation-timing-function:steps(4,end)}34.95%{height:26px}100%{height:26px}}.b23{animation:kb23 5s linear 0.4s 1 both}
@keyframes kb24{0%{height:0}35%{height:0;animation-timing-function:steps(5,end)}36.2%{height:33px}100%{height:33px}}.b24{animation:kb24 5s linear 0.4s 1 both}
@keyframes kb25{0%{height:0}36.25%{height:0;animation-timing-function:steps(5,end)}37.45%{height:33px}100%{height:33px}}.b25{animation:kb25 5s linear 0.4s 1 both}
@keyframes kb26{0%{height:0}37.5%{height:0;animation-timing-function:steps(5,end)}38.7%{height:33px}100%{height:33px}}.b26{animation:kb26 5s linear 0.4s 1 both}
@keyframes kb27{0%{height:0}38.75%{height:0;animation-timing-function:steps(5,end)}39.95%{height:33px}100%{height:33px}}.b27{animation:kb27 5s linear 0.4s 1 both}
@keyframes kb28{0%{height:0}40%{height:0;animation-timing-function:steps(6,end)}41.2%{height:40px}100%{height:40px}}.b28{animation:kb28 5s linear 0.4s 1 both}
@keyframes kb29{0%{height:0}41.25%{height:0;animation-timing-function:steps(6,end)}42.45%{height:40px}100%{height:40px}}.b29{animation:kb29 5s linear 0.4s 1 both}
@keyframes kb30{0%{height:0}42.5%{height:0;animation-timing-function:steps(6,end)}43.7%{height:40px}100%{height:40px}}.b30{animation:kb30 5s linear 0.4s 1 both}
@keyframes kb31{0%{height:0}43.75%{height:0;animation-timing-function:steps(6,end)}44.95%{height:40px}100%{height:40px}}.b31{animation:kb31 5s linear 0.4s 1 both}
@keyframes kb32{0%{height:0}45%{height:0;animation-timing-function:steps(6,end)}46.2%{height:40px}100%{height:40px}}.b32{animation:kb32 5s linear 0.4s 1 both}
@keyframes kb33{0%{height:0}46.25%{height:0;animation-timing-function:steps(7,end)}47.45%{height:47px}100%{height:47px}}.b33{animation:kb33 5s linear 0.4s 1 both}
@keyframes kb34{0%{height:0}47.5%{height:0;animation-timing-function:steps(7,end)}48.7%{height:47px}100%{height:47px}}.b34{animation:kb34 5s linear 0.4s 1 both}
@keyframes kb35{0%{height:0}48.75%{height:0;animation-timing-function:steps(7,end)}49.95%{height:47px}100%{height:47px}}.b35{animation:kb35 5s linear 0.4s 1 both}
@keyframes kb36{0%{height:0}50%{height:0;animation-timing-function:steps(7,end)}51.2%{height:47px}100%{height:47px}}.b36{animation:kb36 5s linear 0.4s 1 both}
@keyframes kb37{0%{height:0}51.25%{height:0;animation-timing-function:steps(7,end)}52.45%{height:47px}100%{height:47px}}.b37{animation:kb37 5s linear 0.4s 1 both}
@keyframes kb38{0%{height:0}52.5%{height:0;animation-timing-function:steps(8,end)}53.7%{height:54px}100%{height:54px}}.b38{animation:kb38 5s linear 0.4s 1 both}
@keyframes kb39{0%{height:0}53.75%{height:0;animation-timing-function:steps(8,end)}54.95%{height:54px}100%{height:54px}}.b39{animation:kb39 5s linear 0.4s 1 both}
@keyframes kb40{0%{height:0}55%{height:0;animation-timing-function:steps(8,end)}56.2%{height:54px}100%{height:54px}}.b40{animation:kb40 5s linear 0.4s 1 both}
@keyframes kb41{0%{height:0}56.25%{height:0;animation-timing-function:steps(8,end)}57.45%{height:54px}100%{height:54px}}.b41{animation:kb41 5s linear 0.4s 1 both}
@keyframes kb42{0%{height:0}57.5%{height:0;animation-timing-function:steps(8,end)}58.7%{height:54px}100%{height:54px}}.b42{animation:kb42 5s linear 0.4s 1 both}
@keyframes kb43{0%{height:0}58.75%{height:0;animation-timing-function:steps(9,end)}59.95%{height:61px}100%{height:61px}}.b43{animation:kb43 5s linear 0.4s 1 both}
@keyframes kb44{0%{height:0}60%{height:0;animation-timing-function:steps(9,end)}61.2%{height:61px}100%{height:61px}}.b44{animation:kb44 5s linear 0.4s 1 both}
@keyframes kb45{0%{height:0}61.25%{height:0;animation-timing-function:steps(9,end)}62.45%{height:61px}100%{height:61px}}.b45{animation:kb45 5s linear 0.4s 1 both}
@keyframes kb46{0%{height:0}62.5%{height:0;animation-timing-function:steps(9,end)}63.7%{height:61px}100%{height:61px}}.b46{animation:kb46 5s linear 0.4s 1 both}
@keyframes kb47{0%{height:0}63.75%{height:0;animation-timing-function:steps(9,end)}64.95%{height:61px}100%{height:61px}}.b47{animation:kb47 5s linear 0.4s 1 both}
@keyframes kb48{0%{height:0}65%{height:0;animation-timing-function:steps(9,end)}66.2%{height:61px}100%{height:61px}}.b48{animation:kb48 5s linear 0.4s 1 both}
@keyframes kb49{0%{height:0}66.25%{height:0;animation-timing-function:steps(9,end)}67.45%{height:61px}100%{height:61px}}.b49{animation:kb49 5s linear 0.4s 1 both}
@keyframes kb50{0%{height:0}67.5%{height:0;animation-timing-function:steps(9,end)}68.7%{height:61px}100%{height:61px}}.b50{animation:kb50 5s linear 0.4s 1 both}
@keyframes kb51{0%{height:0}68.75%{height:0;animation-timing-function:steps(9,end)}69.95%{height:61px}100%{height:61px}}.b51{animation:kb51 5s linear 0.4s 1 both}
@keyframes kb52{0%{height:0}70%{height:0;animation-timing-function:steps(9,end)}71.2%{height:61px}100%{height:61px}}.b52{animation:kb52 5s linear 0.4s 1 both}
@keyframes kb53{0%{height:0}71.25%{height:0;animation-timing-function:steps(9,end)}72.45%{height:61px}100%{height:61px}}.b53{animation:kb53 5s linear 0.4s 1 both}
@keyframes kb54{0%{height:0}72.5%{height:0;animation-timing-function:steps(9,end)}73.7%{height:61px}100%{height:61px}}.b54{animation:kb54 5s linear 0.4s 1 both}
@keyframes kb55{0%{height:0}73.75%{height:0;animation-timing-function:steps(9,end)}74.95%{height:61px}100%{height:61px}}.b55{animation:kb55 5s linear 0.4s 1 both}
@keyframes kb56{0%{height:0}75%{height:0;animation-timing-function:steps(9,end)}76.2%{height:61px}100%{height:61px}}.b56{animation:kb56 5s linear 0.4s 1 both}
@keyframes kb57{0%{height:0}76.25%{height:0;animation-timing-function:steps(9,end)}77.45%{height:61px}100%{height:61px}}.b57{animation:kb57 5s linear 0.4s 1 both}
@keyframes kb58{0%{height:0}77.5%{height:0;animation-timing-function:steps(9,end)}78.7%{height:61px}100%{height:61px}}.b58{animation:kb58 5s linear 0.4s 1 both}
@keyframes kb59{0%{height:0}78.75%{height:0;animation-timing-function:steps(9,end)}79.95%{height:61px}100%{height:61px}}.b59{animation:kb59 5s linear 0.4s 1 both}
@keyframes kd1a{0%{fill-opacity:1}23.75%{fill-opacity:0.09}38.75%{fill-opacity:1}100%{fill-opacity:1}}.d1 .sa{animation:kd1a 5s steps(1,end) 0.4s 1 both}
@keyframes kd1b{0%{fill-opacity:1}100%{fill-opacity:1}}.d1 .sb{animation:kd1b 5s steps(1,end) 0.4s 1 both}
@keyframes kd1c{0%{fill-opacity:1}38.75%{fill-opacity:0.09}53.75%{fill-opacity:1}100%{fill-opacity:1}}.d1 .sc{animation:kd1c 5s steps(1,end) 0.4s 1 both}
@keyframes kd1d{0%{fill-opacity:1}23.75%{fill-opacity:0.09}38.75%{fill-opacity:1}100%{fill-opacity:1}}.d1 .sd{animation:kd1d 5s steps(1,end) 0.4s 1 both}
@keyframes kd1e{0%{fill-opacity:1}23.75%{fill-opacity:0.09}38.75%{fill-opacity:1}53.75%{fill-opacity:0.09}100%{fill-opacity:0.09}}.d1 .se{animation:kd1e 5s steps(1,end) 0.4s 1 both}
@keyframes kd1f{0%{fill-opacity:1}23.75%{fill-opacity:0.09}100%{fill-opacity:0.09}}.d1 .sf{animation:kd1f 5s steps(1,end) 0.4s 1 both}
@keyframes kd1g{0%{fill-opacity:0.09}38.75%{fill-opacity:1}100%{fill-opacity:1}}.d1 .sg{animation:kd1g 5s steps(1,end) 0.4s 1 both}
@keyframes kd2a{0%{fill-opacity:1}25%{fill-opacity:0.09}26.25%{fill-opacity:1}30%{fill-opacity:0.09}32.5%{fill-opacity:1}40%{fill-opacity:0.09}41.25%{fill-opacity:1}45%{fill-opacity:0.09}46.25%{fill-opacity:1}57.5%{fill-opacity:0.09}58.75%{fill-opacity:1}61.25%{fill-opacity:0.09}67.5%{fill-opacity:1}100%{fill-opacity:1}}.d2 .sa{animation:kd2a 5s steps(1,end) 0.4s 1 both}
@keyframes kd2b{0%{fill-opacity:0.09}10%{fill-opacity:1}11.25%{fill-opacity:0.09}15%{fill-opacity:1}32.5%{fill-opacity:0.09}35%{fill-opacity:1}46.25%{fill-opacity:0.09}50%{fill-opacity:1}67.5%{fill-opacity:0.09}100%{fill-opacity:0.09}}.d2 .sb{animation:kd2b 5s steps(1,end) 0.4s 1 both}
@keyframes kd2c{0%{fill-opacity:1}26.25%{fill-opacity:0.09}28.75%{fill-opacity:1}41.25%{fill-opacity:0.09}43.75%{fill-opacity:1}58.75%{fill-opacity:0.09}60%{fill-opacity:1}100%{fill-opacity:1}}.d2 .sc{animation:kd2c 5s steps(1,end) 0.4s 1 both}
@keyframes kd2d{0%{fill-opacity:1}10%{fill-opacity:0.09}11.25%{fill-opacity:1}15%{fill-opacity:0.09}16.25%{fill-opacity:1}25%{fill-opacity:0.09}26.25%{fill-opacity:1}30%{fill-opacity:0.09}32.5%{fill-opacity:1}35%{fill-opacity:0.09}36.25%{fill-opacity:1}40%{fill-opacity:0.09}41.25%{fill-opacity:1}45%{fill-opacity:0.09}46.25%{fill-opacity:1}50%{fill-opacity:0.09}51.25%{fill-opacity:1}57.5%{fill-opacity:0.09}58.75%{fill-opacity:1}61.25%{fill-opacity:0.09}67.5%{fill-opacity:1}100%{fill-opacity:1}}.d2 .sd{animation:kd2d 5s steps(1,end) 0.4s 1 both}
@keyframes kd2e{0%{fill-opacity:1}10%{fill-opacity:0.09}11.25%{fill-opacity:1}15%{fill-opacity:0.09}16.25%{fill-opacity:1}22.5%{fill-opacity:0.09}23.75%{fill-opacity:1}25%{fill-opacity:0.09}26.25%{fill-opacity:1}28.75%{fill-opacity:0.09}33.75%{fill-opacity:1}35%{fill-opacity:0.09}36.25%{fill-opacity:1}37.5%{fill-opacity:0.09}38.75%{fill-opacity:1}40%{fill-opacity:0.09}41.25%{fill-opacity:1}43.75%{fill-opacity:0.09}47.5%{fill-opacity:1}50%{fill-opacity:0.09}51.25%{fill-opacity:1}52.5%{fill-opacity:0.09}53.75%{fill-opacity:1}57.5%{fill-opacity:0.09}58.75%{fill-opacity:1}60%{fill-opacity:0.09}100%{fill-opacity:0.09}}.d2 .se{animation:kd2e 5s steps(1,end) 0.4s 1 both}
@keyframes kd2f{0%{fill-opacity:1}10%{fill-opacity:0.09}11.25%{fill-opacity:1}15%{fill-opacity:0.09}16.25%{fill-opacity:1}25%{fill-opacity:0.09}30%{fill-opacity:1}35%{fill-opacity:0.09}36.25%{fill-opacity:1}40%{fill-opacity:0.09}45%{fill-opacity:1}50%{fill-opacity:0.09}51.25%{fill-opacity:1}57.5%{fill-opacity:0.09}61.25%{fill-opacity:1}100%{fill-opacity:1}}.d2 .sf{animation:kd2f 5s steps(1,end) 0.4s 1 both}
@keyframes kd2g{0%{fill-opacity:1}10%{fill-opacity:0.09}11.25%{fill-opacity:1}15%{fill-opacity:0.09}16.25%{fill-opacity:1}23.75%{fill-opacity:0.09}26.25%{fill-opacity:1}35%{fill-opacity:0.09}36.25%{fill-opacity:1}38.75%{fill-opacity:0.09}41.25%{fill-opacity:1}50%{fill-opacity:0.09}51.25%{fill-opacity:1}53.75%{fill-opacity:0.09}58.75%{fill-opacity:1}100%{fill-opacity:1}}.d2 .sg{animation:kd2g 5s steps(1,end) 0.4s 1 both}
.d1 .sa{fill-opacity:1}
.d1 .sb{fill-opacity:1}
.d1 .sc{fill-opacity:1}
.d1 .sd{fill-opacity:1}
.d1 .sg{fill-opacity:1}
.d2 .sa{fill-opacity:1}
.d2 .sc{fill-opacity:1}
.d2 .sd{fill-opacity:1}
.d2 .sf{fill-opacity:1}
.d2 .sg{fill-opacity:1}
.axis .p0{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}@keyframes kp0{0%{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}100%{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}}.axis .p0{animation:kp0 5s steps(1,end) 0.4s 1 both}
.axis .p1{color:#141414;background-color:var(--lw-c2m);border-color:var(--lw-c2m)}@keyframes kp1{0%{color:var(--lw-glass-muted);background-color:transparent;border-color:#2C2C2A}20%{color:#141414;background-color:var(--lw-c2m);border-color:var(--lw-c2m)}100%{color:#141414;background-color:var(--lw-c2m);border-color:var(--lw-c2m)}}.axis .p1{animation:kp1 5s steps(1,end) 0.4s 1 both}
.axis .p2{color:#FFFFFF;background-color:var(--lw-c3);border-color:var(--lw-c3)}@keyframes kp2{0%{color:var(--lw-glass-muted);background-color:transparent;border-color:#2C2C2A}35%{color:#FFFFFF;background-color:var(--lw-c3);border-color:var(--lw-c3)}100%{color:#FFFFFF;background-color:var(--lw-c3);border-color:var(--lw-c3)}}.axis .p2{animation:kp2 5s steps(1,end) 0.4s 1 both}
.axis .p3{color:#141414;background-color:var(--lw-c4);border-color:var(--lw-c4)}@keyframes kp3{0%{color:var(--lw-glass-muted);background-color:transparent;border-color:#2C2C2A}50%{color:#141414;background-color:var(--lw-c4);border-color:var(--lw-c4)}100%{color:#141414;background-color:var(--lw-c4);border-color:var(--lw-c4)}}.axis .p3{animation:kp3 5s steps(1,end) 0.4s 1 both}
.axis .p4{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}@keyframes kp4{0%{color:var(--lw-glass-muted);background-color:transparent;border-color:#2C2C2A}65%{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}100%{color:#141414;background-color:var(--lw-c1);border-color:var(--lw-c1)}}.axis .p4{animation:kp4 5s steps(1,end) 0.4s 1 both}
@media (prefers-reduced-motion:reduce){.disp,.disp *{animation:none !important}}
.disp.static,.disp.static *{animation:none !important}

/* ── blueprint: the plan, month by month (flat) ── */
.bp{display:grid;grid-template-columns:280px repeat(6,minmax(0,1fr));column-gap:8px;row-gap:12px;align-items:center}
.bp-h{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.02em;text-transform:lowercase;color:var(--lw-ink-print);padding-bottom:6px;border-bottom:1px solid var(--lw-hair)}
.bp-l{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);padding-right:12px;line-height:1.4}
.bp-l small{display:block;font-weight:500;color:var(--lw-ink-print);font-size:12px}
.bpc{height:22px;background:repeating-linear-gradient(90deg,var(--bc) 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}
.bpe{height:22px;background:repeating-linear-gradient(90deg,var(--lw-hair) 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}

/* ── polish 04.11.2026: one hierarchy, data as glass instruments, plain rules for cards ── */
.rl{border-top:1px solid var(--text);padding-top:16px}
.key.plain::before{display:none}
.idx{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--text)}
.mline{font-family:var(--font-mono);font-size:12px;line-height:1.8;letter-spacing:0.01em;color:var(--text)}
.mline .dim{color:var(--lw-ink-print)}
/* counting blocks under big numbers: one chart type */
.cnt{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.cnt svg{display:block;max-width:100%;height:auto}
/* glass instruments: dark glass, shows data, never input */
.glass{border-radius:var(--lw-r-pad);background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0) 40%),var(--lw-glass);color:var(--lw-glass-text);box-shadow:var(--lw-glass-shadow);padding:24px 28px 28px}
.glass-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid #2C2C2A}
.gk{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:lowercase;color:var(--lw-glass-text)}
.gx{font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;text-transform:lowercase;color:var(--lw-glass-muted)}
.gt{margin:0;font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.45;color:var(--lw-glass-text)}
.gn{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--lw-glass-text)}
.gv{font-family:var(--font-mono);font-size:12px;font-weight:600;text-align:right;color:var(--lw-glass-text)}
.gv.mute{color:var(--lw-glass-muted)}
.gbig{font-family:var(--font-mono);font-size:44px;font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--lw-glass-text)}
.gbig small{font-size:22px;margin-left:4px}
.gm{position:relative;height:10px;width:var(--tw);background:repeating-linear-gradient(90deg,#2C2C2A 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}
.gm i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:repeating-linear-gradient(90deg,var(--c) 0 var(--lw-seg),transparent var(--lw-seg) var(--lw-seg-period))}
.gsq{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:8px}
.gcol{position:relative;width:28px;height:82px;background:repeating-linear-gradient(to top,#2C2C2A 0 5px,transparent 5px 7px)}
.gcol i{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:repeating-linear-gradient(to top,var(--c) 0 5px,transparent 5px 7px)}
.gtgt{position:absolute;left:-6px;right:-6px;border-top:2px dashed var(--lw-glass-text);opacity:0.75}
.grule{border-top:1px solid #2C2C2A}
/* the knob with labelled detents */
.dial{position:relative;width:132px;height:100px}
.dial .knob{position:absolute;left:36px;bottom:0}
.det{position:absolute;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--lw-ink-print)}
.det.d1{left:2px;top:34px}.det.d2{left:57px;top:0}.det.d3{right:2px;top:34px}
/* the plan, month by month: phase colours, who runs it as text */
.plan-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:center;padding:16px 0;border-top:1px solid var(--lw-hair)}
.plan-row:last-child{border-bottom:1px solid var(--lw-hair)}
.plan-l{grid-column:1 / span 3}
.plan-c{grid-column:4 / span 9;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px}
.pc{height:24px;background:linear-gradient(90deg,var(--c) 0 75%,transparent 0) 0 0/var(--lw-seg-period) 100% round}
.pe{height:24px;background:linear-gradient(90deg,var(--lw-hair) 0 75%,transparent 0) 0 0/var(--lw-seg-period) 100% round}