:root{
  --ink:#14181a;
  --panel:#1c2123;
  --panel-2:#232a2c;
  --edge:#2e3639;
  --on-ink:#e4e7e5;
  --on-ink-dim:#8b948f;
  --brass:#c89a4e;
  --paper:#e7e8e2;
  --paper-2:#dee0d8;
  --fg:#171a18;
  --fg-dim:#646a65;
  --rule:#c6c9bf;
  --brass-ink:#856220;
  --ok:#3d7a52;
  --warn:#a9502f;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 16px}}
@media(max-width:520px){.masthead-note{display:none}}

/* ---------- eyebrow / drafting label ---------- */
.eyebrow{
  font-family:var(--cond);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin:0 0 6px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:var(--on-ink);border-bottom:1px solid var(--edge)}
.masthead-in{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-family:var(--mono);font-weight:600;font-size:17px;letter-spacing:.02em;color:var(--on-ink);text-decoration:none}
.brand span{color:var(--brass)}
.masthead-note{font-family:var(--cond);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim)}

/* ---------- instrument zone ---------- */
.instrument{background:var(--ink);color:var(--on-ink);padding:34px 0 46px}
.instrument h1{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(28px,4.6vw,44px);line-height:1.08;
  letter-spacing:-.01em;margin:0 0 10px;max-width:19ch;
}
.instrument h1 em{font-style:normal;color:var(--brass)}
.lede{color:var(--on-ink-dim);max-width:56ch;margin:0 0 28px;font-size:15px}
.instrument .eyebrow{color:var(--brass)}

.rig{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:26px;align-items:start}
@media(max-width:900px){.rig{grid-template-columns:1fr}}

/* dimension frame — the signature element */
.frame{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  grid-template-rows:minmax(0,1fr) 34px;
  min-height:390px;
}
@media(max-width:640px){.frame{min-height:300px;grid-template-columns:26px minmax(0,1fr) 26px}}

.stage{
  position:relative;grid-column:2;grid-row:1;
  background:var(--panel);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.stage.is-hot{border-color:var(--brass);background:var(--panel-2)}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage canvas[hidden]{display:none}

.drop{padding:28px;text-align:center;max-width:34ch}
.drop-key{
  font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:14px;color:var(--on-ink);margin:0 0 8px;
}
.drop-sub{font-size:13.5px;color:var(--on-ink-dim);margin:0 0 18px}
.pick{
  font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;
  background:none;color:var(--brass);border:1px solid var(--brass);
  padding:9px 18px;cursor:pointer;
}
.pick:hover{background:var(--brass);color:var(--ink)}
.pick:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.stage-msg{
  position:absolute;inset:auto 12px 12px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--on-ink-dim);
}
.stage-msg.is-error{color:#e08d6b}

/* dimension rules */
.dim{position:relative;display:flex;align-items:center;justify-content:center;color:var(--on-ink-dim)}
.dim-x{grid-column:2;grid-row:2}
.dim-z{grid-column:1;grid-row:1}
.dim-y{grid-column:3;grid-row:1}
.dim::before{content:"";position:absolute;background:var(--edge)}
.dim-x::before{left:0;right:0;top:16px;height:1px}
.dim-z::before,.dim-y::before{top:0;bottom:0;width:1px}
.dim-z::before{right:16px}
.dim-y::before{left:16px}
.dim .tick{position:absolute;background:var(--edge)}
.dim-x .tick{top:10px;width:1px;height:13px}
.dim-x .tick.a{left:0}.dim-x .tick.b{right:0}
.dim-z .tick,.dim-y .tick{height:1px;width:13px}
.dim-z .tick{right:10px}.dim-y .tick{left:10px}
.dim .tick.a{top:0}.dim .tick.b{bottom:0}
.dim-val{
  position:relative;background:var(--ink);padding:2px 8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dim-z .dim-val,.dim-y .dim-val{writing-mode:vertical-rl;padding:8px 2px}
.dim-z .dim-val{transform:rotate(180deg)}
.dim-val b{color:var(--brass);font-weight:500;margin-right:5px}
.is-live .dim-val{color:var(--on-ink)}

/* title block — readout */
.block{border:1px solid var(--edge);background:var(--panel)}
.block-hd{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--edge);
  font-family:var(--cond);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-dim);
}
.file-name{font-family:var(--mono);letter-spacing:0;text-transform:none;color:var(--brass);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:17ch;font-size:11.5px}
.rows{margin:0;padding:0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 14px;border-bottom:1px solid var(--edge)}
.row:last-child{border-bottom:0}
.row dt{font-family:var(--cond);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-dim);margin:0}
.row dd{margin:0;font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--on-ink)}
.row dd u{text-decoration:none;color:var(--on-ink-dim);font-size:11.5px;margin-left:3px}
.row.is-hero{padding:13px 14px;background:var(--panel-2)}
.row.is-hero dd{font-size:24px;font-weight:500;color:var(--brass)}
.flag{font-family:var(--cond);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.flag.ok{color:#79c48f}
.flag.bad{color:#e08d6b}
.detail{padding:0 14px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--on-ink-dim)}
.detail:empty{display:none}
.detail i{font-style:normal;color:#e08d6b}

/* input controls */
.controls{border:1px solid var(--edge);background:var(--panel);margin-top:18px}
.ctl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge)}
.ctl{background:var(--panel);padding:10px 14px}
.ctl label{display:block;font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim);margin-bottom:5px}
.ctl input,.ctl select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--edge);
  color:var(--on-ink);font-family:var(--mono);font-size:14px;padding:3px 0;
  font-variant-numeric:tabular-nums;
}
.ctl select{appearance:none;cursor:pointer}
.ctl select option{background:var(--panel);color:var(--on-ink)}
.ctl input:focus,.ctl select:focus{outline:0;border-bottom-color:var(--brass)}
.ctl-note{padding:9px 14px;border-top:1px solid var(--edge);font-size:11.5px;line-height:1.6;color:var(--on-ink-dim)}

/* ---------- reference zone ---------- */
.reference{padding:56px 0 20px}
.reference .eyebrow{color:var(--brass-ink)}
.ref-hd{max-width:62ch;margin:0 0 40px}
.ref-hd h2{font-family:var(--cond);font-weight:700;font-size:clamp(23px,3.2vw,32px);line-height:1.15;margin:0 0 8px}
.ref-hd p{margin:0;color:var(--fg-dim);font-size:15px}

.card{margin:0 0 46px;scroll-margin-top:20px}
.card h3{
  font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.01em;
  margin:0 0 4px;display:flex;align-items:baseline;gap:10px;
}
.card h3::after{content:"";flex:1;height:1px;background:var(--rule)}
.card-sub{margin:0 0 16px;color:var(--fg-dim);font-size:14px;max-width:64ch}

.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
table.wide{min-width:660px}
caption{caption-side:bottom;text-align:left;padding-top:10px;font-size:13px;color:var(--fg-dim);line-height:1.6}
th,td{padding:8px 14px 8px 0;text-align:left;border-bottom:1px solid var(--rule);vertical-align:baseline}
thead th{
  font-family:var(--cond);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);border-bottom:1px solid var(--fg);padding-bottom:7px;
}
tbody th{font-family:var(--mono);font-weight:500;color:var(--brass-ink);white-space:nowrap}
td{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.txt{font-family:var(--sans);color:var(--fg-dim);font-size:13.5px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:1px solid var(--fg)}

.rule-box{
  border-left:2px solid var(--brass-ink);padding:2px 0 2px 16px;margin:18px 0 0;
  font-size:14px;color:var(--fg-dim);max-width:66ch;
}
.rule-box b{color:var(--fg);font-weight:600}
.rule-box code{font-family:var(--mono);font-size:13px;color:var(--brass-ink)}

/* shrinkage calculator */
.calc{border:1px solid var(--rule);background:var(--paper-2);padding:16px;margin-top:20px;max-width:560px}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc label{display:block;font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:4px}
.calc input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:16px;color:var(--fg);padding:3px 0;font-variant-numeric:tabular-nums;
}
.calc input:focus{outline:0;border-bottom-color:var(--brass-ink)}
.calc-out{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid var(--rule)}
.calc-out span{font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.calc-out output{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--brass-ink);font-variant-numeric:tabular-nums}
.calc-hint{margin:12px 0 0;font-size:13px;color:var(--fg-dim);line-height:1.6}

/* gear / affiliate section */
.gear{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:22px;
}
.gear-item{background:var(--paper);padding:20px;display:flex;flex-direction:column}
.gear-tag{
  font-family:var(--cond);font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin:0 0 9px;
}
.gear-why{margin:0 0 13px;font-size:14px;line-height:1.62;color:var(--fg)}
.gear-crit{list-style:none;margin:0 0 16px;padding:0;font-size:13.5px;color:var(--fg-dim);line-height:1.55}
.gear-crit li{position:relative;padding-left:16px;margin-bottom:6px}
.gear-crit li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--brass-ink);
}
.gear-crit li:last-child{margin-bottom:0}
.gear-link{
  margin-top:auto;align-self:flex-start;
  font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.gear-link:hover{border-bottom-color:var(--brass-ink)}
.gear-link[href="#"]{opacity:.45;pointer-events:none}
.disclosure{
  margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-dim);
  border-left:2px solid var(--rule);padding-left:14px;max-width:66ch;
}

/* footer */
.foot{background:var(--ink);color:var(--on-ink-dim);padding:34px 0;font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:flex-start}
.foot strong{display:block;font-family:var(--cond);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:6px;font-weight:600}
.foot p{margin:0;max-width:44ch;line-height:1.65}
.foot a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid var(--edge)}
.foot a:hover{border-bottom-color:var(--brass)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px}
.instrument a:focus-visible,.instrument button:focus-visible{outline-color:var(--brass)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  .instrument,.masthead,.kit,.calc{display:none}
  .foot{background:none;color:#000;border-top:1px solid #000;padding:12px 0}
  .foot strong{color:#000}
  body{background:#fff;font-size:11pt}
  .reference{padding:0}
  .card{break-inside:avoid;page-break-inside:avoid;margin-bottom:22px}
  .tbl-scroll{overflow:visible}
  table{min-width:0}
  .rule-box{border-left-color:#000}
}

/* ══ multi-page nav ══════════════════════════════════════════════════ */
.nav{display:flex;gap:20px;flex-wrap:wrap}
.nav a{
  font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-ink-dim);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--on-ink)}
.nav a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass)}
@media(max-width:520px){.nav{gap:14px}.nav a{font-size:11px;letter-spacing:.06em}}

/* ══ progress ════════════════════════════════════════════════════════ */
.prog{height:2px;background:var(--edge);margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--brass);transition:width .12s linear}
.prog[hidden]{display:none}

/* ══ gcode: stat grid ════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.stat{background:var(--panel);padding:12px 14px}
.stat dt{font-family:var(--cond);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim);margin:0 0 4px}
.stat dd{margin:0;font-family:var(--mono);font-size:19px;color:var(--on-ink);font-variant-numeric:tabular-nums;line-height:1.2}
.stat dd u{text-decoration:none;color:var(--on-ink-dim);font-size:11px;margin-left:3px}
.stat.hero dd{color:var(--brass);font-size:23px}

/* ══ gcode: layer scrubber ═══════════════════════════════════════════ */
.scrub{border:1px solid var(--edge);border-top:0;background:var(--panel);padding:12px 14px}
.scrub-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.scrub-top span{font-family:var(--cond);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim)}
.scrub-top b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--brass);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--brass);background:transparent}
.scrub-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--on-ink-dim)}
.scrub-legend i{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:6px}

/* ══ thumbnail from slicer ═══════════════════════════════════════════ */
.thumb{border:1px solid var(--edge);background:var(--panel);padding:12px 14px;margin-top:18px}
.thumb img{display:block;max-width:100%;height:auto;image-rendering:auto;margin-top:9px;border:1px solid var(--edge)}
.thumb[hidden]{display:none}

/* ══ calculator cards (kalkulacky) ═══════════════════════════════════ */
.calcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:30px}
.calc-card{border:1px solid var(--rule);background:var(--paper);padding:20px;display:flex;flex-direction:column}
.calc-card h3{font-family:var(--cond);font-weight:700;font-size:18px;margin:0 0 5px}
.calc-card h3::after{display:none}
.calc-card > p{margin:0 0 16px;font-size:13.5px;color:var(--fg-dim);line-height:1.55}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.fields.one{grid-template-columns:1fr}
.field label{display:block;font-family:var(--cond);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:3px}
.field input,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:15px;color:var(--fg);padding:3px 0;font-variant-numeric:tabular-nums;
}
.field select{appearance:none;cursor:pointer}
.field input:focus,.field select:focus{outline:0;border-bottom-color:var(--brass-ink)}
.result{margin-top:auto;padding-top:15px}
.result-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--rule)}
.result-row span{font-family:var(--cond);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim)}
.result-row output{font-family:var(--mono);font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.result-row.big output{font-size:22px;font-weight:500;color:var(--brass-ink)}
.verdict{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--fg-dim);min-height:1.2em}
.verdict.warn{color:var(--warn)}
.verdict.good{color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chips li{list-style:none;font-family:var(--mono);font-size:12.5px;padding:3px 9px;border:1px solid var(--rule);color:var(--fg-dim)}
.chips li.hit{border-color:var(--brass-ink);color:var(--brass-ink)}
.calc-card ul.chips{margin:12px 0 0;padding:0}

/* ══ misc ════════════════════════════════════════════════════════════ */
.hint{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-dim)}
.instrument .hint{color:var(--on-ink-dim)}


/* ══ kontextový odkaz ve výsledku ════════════════════════════════════ */
.nudge{
  margin:0;padding:9px 0 0;font-size:13px;line-height:1.55;
  border-top:1px solid var(--rule);color:var(--fg-dim);
}
.nudge[hidden]{display:none}
.nudge a{
  font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brass-ink);text-decoration:none;white-space:nowrap;
}
.nudge a:hover{text-decoration:underline}
.instrument .nudge{border-top-color:var(--edge);color:var(--on-ink-dim);padding:9px 14px 12px}
.instrument .nudge a{color:var(--brass)}

/* ══ výběr tiskárny ══════════════════════════════════════════════════ */
.picker{border:1px solid var(--edge);background:var(--panel)}
.q{padding:14px;border-bottom:1px solid var(--edge)}
.q:last-of-type{border-bottom:0}
.q > p{
  margin:0 0 10px;font-family:var(--cond);font-weight:600;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim);
}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{
  font-size:13.5px;padding:7px 13px;border:1px solid var(--edge);cursor:pointer;
  color:var(--on-ink-dim);user-select:none;
}
.opts label:hover{border-color:var(--on-ink-dim);color:var(--on-ink)}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts input:checked + span{color:var(--ink)}
.opts label:has(input:checked){background:var(--brass);border-color:var(--brass);color:var(--ink)}
.opts label:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.verdict-box{border:1px solid var(--edge);border-top:0;background:var(--panel-2);padding:16px 14px}
.verdict-box h4{
  font-family:var(--cond);font-weight:700;font-size:18px;margin:0 0 8px;color:var(--brass);
}
.verdict-box p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--on-ink)}
.verdict-box ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--on-ink-dim)}
.verdict-box li{margin-bottom:5px}

/* ══ dýško ═══════════════════════════════════════════════════════════ */
#tipSlot[hidden]{display:none}