:root{
  --paper:#DEE3DE; --paper-hi:#EFF2EE; --card:#FBFCFA;
  --ink:#0D1315; --ink-60:#56625F; --ink-30:#98A39F;
  --line:#C2CAC3; --line-soft:#D5DBD5;
  --graphite:#12181B; --graphite-2:#1D2529; --on-dark:#E6EBE7; --on-dark-60:#93A09C;
  --c1:#1F3FD6; --c2:#D8214E; --c3:#DE8A0E; --cB:#0E8A6E;
  --display:'Anybody','Arial Narrow',sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.02;text-transform:uppercase}
h1{font-variation-settings:'wdth' 112,'wght' 800;font-size:clamp(2.6rem,7.2vw,5.2rem);letter-spacing:-.01em}
h2{font-variation-settings:'wdth' 78,'wght' 700;font-size:clamp(1.7rem,4.6vw,2.9rem)}
h3{font-variation-settings:'wdth' 85,'wght' 700;font-size:1.05rem;letter-spacing:.06em}
h4{font-variation-settings:'wdth' 90,'wght' 600;font-size:.82rem;letter-spacing:.1em}
a{color:inherit}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin:0 0 14px}
.eyebrow.on-dark{color:var(--on-dark-60)}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.hide{display:none !important}

.topbar{position:sticky;top:0;z-index:50;background:var(--graphite);color:var(--on-dark);border-bottom:1px solid #000}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:52px}
.navlinks{display:flex;gap:18px;order:1;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-60);text-decoration:none;white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
.navlinks a:hover{color:var(--on-dark);border-bottom-color:var(--c1)}

.hero{background:var(--graphite);color:var(--on-dark);padding:44px 0 0;overflow:hidden}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:#7E93FF}
.lede{max-width:46ch;color:var(--on-dark-60);font-size:1.02rem}
.hero-grid{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:36px;align-items:center}
.stage-wrap{position:relative;padding-bottom:10px}
#stage{width:100%;height:auto;display:block}
.stage-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--graphite-2);color:var(--on-dark);border:1px solid #333B3F;padding:7px 11px;border-radius:var(--r);cursor:pointer}
.chip:hover{border-color:var(--c1);color:#fff}
.chip:disabled{opacity:.35;cursor:default}
.chip:disabled:hover{border-color:#333B3F;color:var(--on-dark)}
.chip[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:#fff}
.readout{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2A3337;border:1px solid #2A3337;margin:22px 0 8px}
.readout div{background:var(--graphite);padding:12px 14px}
.readout .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-60)}
.readout .v{font-family:var(--display);font-variation-settings:'wdth' 90,'wght' 700;font-size:1.65rem;line-height:1.15;color:#fff}
.readout .u{font-size:.72rem;color:var(--on-dark-60);font-family:var(--mono)}
.hero-note{font-family:var(--mono);font-size:.68rem;color:var(--on-dark-60);letter-spacing:.04em;padding-bottom:26px}

.sec{padding:64px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:28px}
.sec-head p{margin:0;max-width:52ch;color:var(--ink-60);font-size:.95rem}
.marker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--c1);border:1px solid var(--c1);padding:3px 7px;border-radius:99px}

.calc{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.panel-sticky{position:sticky;top:66px;max-height:calc(100vh - 80px);overflow-y:auto}
.fieldset{border:0;padding:0;margin:0 0 18px}
.fieldset:last-child{margin-bottom:0}
.flabel{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px}
.flabel b{font-family:var(--mono);font-weight:600;color:var(--ink);letter-spacing:0}
.seg{display:flex;gap:4px}
.seg button{flex:1;background:var(--paper-hi);border:1px solid var(--line);padding:8px 4px;border-radius:var(--r);cursor:pointer;font-family:var(--mono);font-size:.78rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}
select,input[type=text],input[type=number]{width:100%;background:var(--paper-hi);border:1px solid var(--line);border-radius:var(--r);padding:8px 9px;font-size:.9rem}
input[type=range]{width:100%;accent-color:var(--c1)}
.rings{display:flex;gap:8px}
.ringbox{flex:1;position:relative}
.ringbox .dot{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%}
.ringbox input{padding-left:22px;font-family:var(--mono)}
.cogs-input{font-family:var(--mono);font-size:.82rem}
.hint{font-size:.74rem;color:var(--ink-60);margin:6px 0 0;line-height:1.4}
.linkbtn{background:none;border:0;padding:0;color:var(--c1);font-family:var(--mono);font-size:.72rem;text-decoration:underline;cursor:pointer}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.duo label{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.duo label > select,.duo label > input{width:100%}
.minilab{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-30);display:block;margin-bottom:3px;line-height:1.3}

.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--c1)}
.tab.b[aria-selected="true"]{border-bottom-color:var(--cB)}
.tab .x{color:var(--ink-30);margin-left:6px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.stat{background:var(--card);padding:14px 15px}
.stat .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.stat .v{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 700;font-size:1.5rem;line-height:1.2;margin-top:3px}
.stat .s{font-family:var(--mono);font-size:.7rem;color:var(--ink-60)}

.block{margin-bottom:34px}
.block-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.block-title h3{font-size:.92rem}
.legend{font-family:var(--mono);font-size:.68rem;color:var(--ink-60)}
.scroller{overflow-x:auto;border:1px solid var(--line);background:var(--card);border-radius:var(--r)}
table.matrix{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:.8rem}
table.matrix th,table.matrix td{padding:7px 4px;text-align:center;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);white-space:nowrap}
table.matrix thead th{background:var(--paper-hi);font-weight:600;font-size:.72rem}
table.matrix th.rh{text-align:left;padding-left:10px;font-weight:600;min-width:64px}
table.matrix td{cursor:pointer;position:relative}
table.matrix td.sel{outline:2px solid var(--ink);outline-offset:-2px;font-weight:600}
table.matrix td.cross::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(13,19,21,.16) 4px 5px)}
svg.chart{display:block;width:100%;height:auto}
.chartbox{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:14px}
.hubchips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.hubchips button{font-family:var(--mono);font-size:.72rem;background:var(--paper-hi);border:1px solid var(--line);border-radius:var(--r);padding:5px 9px;cursor:pointer}
.hubchips button[aria-pressed="true"]{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.concept{background:var(--card);padding:20px 18px}
.concept h3{margin-bottom:10px}
.concept p{font-size:.9rem;color:var(--ink-60);margin-bottom:12px}
.formula{font-family:var(--mono);font-size:.78rem;background:var(--paper-hi);border-left:2px solid var(--c1);padding:9px 11px;margin-bottom:12px;line-height:1.5;overflow-x:auto}
.live{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 700;font-size:1.35rem}
.live small{font-family:var(--mono);font-size:.7rem;font-weight:400;color:var(--ink-60);letter-spacing:.04em}

.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.prose{max-width:62ch}
.prose h3{margin:26px 0 8px}
.prose p{font-size:.95rem}
.prose ul{font-size:.95rem;color:var(--ink-60);padding-left:18px;margin:0 0 1em}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}

.deltas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px}
.delta{background:var(--card);padding:15px}
.delta .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);margin-bottom:6px}
.delta .ab{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:.95rem}
.delta .a{color:var(--c1);font-weight:600}
.delta .b{color:var(--cB);font-weight:600}
.delta .d{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 700;font-size:1.25rem;margin-top:6px}
.emptybox{border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink-60);font-size:.92rem}

.seq{border:1px solid var(--line);background:var(--card);border-radius:var(--r);overflow:hidden;font-family:var(--mono);font-size:.8rem}
.seq .row{display:grid;grid-template-columns:34px 1fr 1fr 1fr;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line-soft);align-items:center}
.seq .row:last-child{border-bottom:0}
.seq .row.head{background:var(--paper-hi);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.seq .row.dup{opacity:.45}
.seq .n{color:var(--ink-30)}
.seq .tagx{font-size:.66rem;border:1px solid var(--line);padding:0 5px;border-radius:99px;color:var(--ink-60)}

.libbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.libbar input{max-width:280px}
.libbar select{max-width:190px}
table.lib{border-collapse:collapse;width:100%;font-size:.86rem}
table.lib th,table.lib td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.lib th{background:var(--paper-hi);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0}
table.lib td.cg{font-family:var(--mono);font-size:.76rem;color:var(--ink-60);white-space:normal;min-width:230px}
table.lib tr:hover td{background:var(--paper-hi)}
.tag{font-family:var(--mono);font-size:.66rem;border:1px solid var(--line);padding:1px 6px;border-radius:99px}
.load{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper-hi);border:0;padding:5px 10px;border-radius:var(--r);cursor:pointer}
.load:hover{background:var(--c1)}
.load.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.load.ghost:hover{background:var(--paper-hi);color:var(--ink)}
.libwrap{max-height:520px;overflow:auto;border:1px solid var(--line);background:var(--card);border-radius:var(--r)}

.ramp-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.eqswap{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:14px}
.eqcard{background:var(--card);padding:16px 18px;flex:1 1 240px}
.eqcard .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.eqcard b{display:block;font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 700;font-size:1.7rem;line-height:1.15;margin:4px 0 2px}
.eqcard span.s{font-family:var(--mono);font-size:.72rem;color:var(--ink-60)}
.eqarrow{background:var(--card);padding:16px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto}
.eqarrow .a{font-family:var(--display);font-variation-settings:'wdth' 70,'wght' 700;font-size:1.6rem;color:var(--c1)}
.eqarrow .p{font-family:var(--mono);font-size:.78rem;color:var(--ink-60)}
.rampkey{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-family:var(--mono);font-size:.7rem;color:var(--ink-60)}
.rampkey span{display:flex;align-items:center;gap:6px}
.rampkey i{width:9px;height:9px;border-radius:2px;display:inline-block}


@media(max-width:900px){
  .hero-grid,.calc,.two,.ramp-grid{grid-template-columns:1fr}
  .panel-sticky{position:static;max-height:none}
  .hero{padding-top:30px}
  .sec{padding:46px 0}
  .readout{margin-top:16px}
  .seq .row{grid-template-columns:26px 1fr 1fr;font-size:.74rem}
  .seq .row span:nth-child(4){display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- portada ---------- */
body.is-cover{background:var(--graphite);color:var(--on-dark)}
body.is-cover .topbar{border-bottom:1px solid #222A2E}
.cover{background:var(--graphite);color:var(--on-dark);padding:56px 0 70px;min-height:calc(100vh - 52px);display:flex;flex-direction:column;justify-content:center;gap:48px}
.cover-grid{display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:40px;align-items:center}
.cover h1{color:#fff;font-size:clamp(2.8rem,8vw,6rem)}
.cover h1 em{font-style:normal;color:#7E93FF}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:#2A3337;border:1px solid #2A3337}
.door{background:var(--graphite);padding:22px 20px;text-decoration:none;color:var(--on-dark);display:flex;flex-direction:column;gap:8px;transition:background .15s}
.door:hover{background:var(--graphite-2)}
.door .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--c1)}
.door b{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 700;font-size:1.5rem;line-height:1.1;color:#fff;text-transform:uppercase}
.door span:last-child{font-size:.88rem;color:var(--on-dark-60);line-height:1.5}
body.is-cover @media(max-width:900px){.cover{min-height:0;padding:34px 0 44px;gap:32px}.cover-grid{grid-template-columns:1fr}}

.hero-slim{padding:26px 0 0}
.hero-slim .readout{margin-top:0}
.hero-slim .hero-grid{gap:28px;align-items:center}
@media(max-width:900px){.hero-slim{padding:18px 0 0}}

/* ---------- calculadora compacta ---------- */
.tools{display:flex;gap:6px;margin-left:8px}
.tools button{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--graphite-2);color:var(--on-dark);border:1px solid #333B3F;padding:6px 10px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.tools button:hover{border-color:var(--c1);color:#fff}
.tools button[aria-expanded="true"]{background:var(--c1);border-color:var(--c1);color:#fff}
.topbar .wrap{gap:12px}
.navlinks{margin-left:auto}

.calc-app{padding:16px 0 40px}
.calc-grid{display:grid;grid-template-columns:308px minmax(0,1fr);gap:20px;align-items:start}
.calc-side{position:sticky;top:64px;max-height:calc(100vh - 76px);overflow:auto}
.panel-calc{padding:14px}
.panel-calc .fieldset{margin-bottom:13px}
.panel-calc .hint{font-size:.7rem}
.calc-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.calc-main .readout{margin:0;background:var(--line);border-color:var(--line);grid-template-columns:repeat(4,1fr)}
.calc-main .readout div{background:var(--card)}
.calc-main .readout .k{color:var(--ink-60)}
.calc-main .readout .v{color:var(--ink)}
.calc-main .readout .u{color:var(--ink-60)}
.viewbar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.views{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.views::-webkit-scrollbar{display:none}
.views button{background:none;border:0;border-bottom:2px solid transparent;padding:7px 11px;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60);white-space:nowrap}
.views button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--c1)}
.help{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink-60);font-family:var(--mono);font-size:.7rem;line-height:1;cursor:pointer;padding:0}
.help:hover{border-color:var(--c1);color:var(--c1)}
.flabel .help{margin-left:6px}
.view .chartbox{padding:10px}
.stage-box{border:1px solid var(--line);background:var(--graphite);border-radius:var(--r);padding:12px}
.stage-box #stage{width:100%;height:auto;display:block}
.stage-box .hero-note{padding-bottom:8px}
.calc-main .stats{margin:0}
#diagBox:empty,#diagLegend:empty{display:none}

/* ---------- cortines ---------- */
.drawer{position:fixed;inset:52px 0 auto 0;z-index:60;background:var(--paper-hi);border-bottom:2px solid var(--ink);
  box-shadow:0 18px 40px rgba(13,19,21,.22);max-height:calc(100vh - 52px);overflow:auto;animation:dropin .18s ease-out}
@keyframes dropin{from{transform:translateY(-12px);opacity:.4}to{transform:none;opacity:1}}
.drawer-inner{padding:18px 20px 26px}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;
  position:sticky;top:0;background:var(--paper-hi);padding:4px 0 10px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:clamp(1.3rem,3vw,2rem)}
.drawer-close{background:none;border:1px solid var(--line);border-radius:var(--r);width:34px;height:34px;cursor:pointer;font-size:1rem;color:var(--ink-60)}
.drawer-close:hover{border-color:var(--ink);color:var(--ink)}
.drawer .block{margin-bottom:20px}
.drawer .prose h3{margin-top:16px}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(13,19,21,.35)}

/* ---------- saber-ne més ---------- */
.pop{position:absolute;z-index:70;max-width:390px;background:var(--card);border:1px solid var(--ink);
  border-radius:var(--r);box-shadow:0 12px 30px rgba(13,19,21,.2);padding:15px 16px}
.pop h4{font-size:.9rem;margin-bottom:8px}
.pop p{font-size:.86rem;color:var(--ink-60);margin:0 0 .7em;line-height:1.5}
.pop a{font-family:var(--mono);font-size:.72rem;color:var(--c1)}
.pop .x{position:absolute;top:8px;right:9px;background:none;border:0;cursor:pointer;color:var(--ink-30);font-size:.9rem}

@media(max-width:900px){
  .calc-grid{grid-template-columns:1fr}
  .calc-side{position:static;max-height:none}
  .calc-main .readout{grid-template-columns:repeat(2,1fr)}
  .navlinks{margin-left:0}
  .drawer{inset:52px 0 0 0;max-height:none}
}

.abtools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.editbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#0E8A6E;color:#fff;padding:9px 14px;border-radius:var(--r);font-family:var(--mono);font-size:.78rem}
.editbar .load{border-color:rgba(255,255,255,.5);color:#fff}
.editbar .load:hover{background:rgba(255,255,255,.15);color:#fff}
body.editing-b .panel-calc{border-color:var(--cB);box-shadow:inset 3px 0 0 var(--cB)}

/* ---------- editor de dents ---------- */
.tooth-editor{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px 14px 10px}
.te-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.te-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.te-row{display:flex;align-items:center;gap:8px;margin:2px 0}
.te-lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);width:58px;flex:0 0 auto}
.te-track{position:relative;flex:1;height:46px;min-width:0;touch-action:none}
.te-ruler{position:relative;height:22px;margin-left:66px;margin-right:38px;border-top:1px solid var(--line)}
.te-ruler i{position:absolute;top:0;width:1px;background:var(--line);height:5px}
.te-ruler i.m{height:9px;background:var(--ink-30)}
.te-ruler span{position:absolute;top:9px;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;color:var(--ink-30)}
.te-add{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px dashed var(--line);background:none;
  color:var(--ink-30);font-size:1rem;line-height:1;cursor:pointer}
.te-add:hover{border-color:var(--c1);color:var(--c1)}
.cog-chip{position:absolute;top:50%;transform:translate(-50%,-50%);cursor:grab;touch-action:none;user-select:none;
  display:flex;align-items:center;justify-content:center}
.cog-chip.drag{cursor:grabbing;z-index:5}
.cog-chip svg{display:block;overflow:visible}
.cog-chip .n{position:absolute;font-family:var(--mono);font-size:.72rem;font-weight:600;pointer-events:none;color:var(--ink)}
.cog-chip .rm{position:absolute;top:-3px;right:-5px;width:15px;height:15px;border-radius:50%;border:0;
  background:var(--paper);color:var(--ink-30);font-size:.62rem;line-height:15px;padding:0;cursor:pointer;opacity:0;transition:opacity .12s}
.cog-chip:hover .rm,.cog-chip.sel .rm{opacity:1}
.cog-chip .rm:hover{background:var(--c2);color:#fff}
.cog-chip.sel .n{color:#fff}
.te-ghost{position:absolute;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.75rem;
  background:var(--ink);color:var(--paper-hi);padding:2px 6px;border-radius:var(--r);pointer-events:none}
@media(max-width:900px){.te-lab{width:44px;font-size:.56rem}.te-ruler{margin-left:52px}}

/* ---------- lectura en viu, sempre a la vista ---------- */
.livebar{position:sticky;top:52px;z-index:40;display:flex;gap:0;align-items:stretch;overflow-x:auto;scrollbar-width:none;
  background:var(--ink);color:var(--paper-hi);border-radius:var(--r);padding:0 2px}
.livebar::-webkit-scrollbar{display:none}
.livebar div{display:flex;align-items:baseline;gap:6px;padding:7px 12px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.livebar div:last-child{border-right:0}
.livebar .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:#8A9A9F}
.livebar b{font-family:var(--mono);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.livebar .big b{font-size:1.15rem;color:#fff}
.livebar .u{font-family:var(--mono);font-size:.64rem;color:#8A9A9F}

/* ---------- tot una mica més atapeït ---------- */
.calc-app{padding:10px 0 32px}
.calc-main{gap:9px}
.calc-grid{gap:16px}
.panel-calc{padding:12px}
.panel-calc .fieldset{margin-bottom:11px}
.panel-calc .flabel{margin-bottom:6px}
.panel-calc select,.panel-calc input[type=text],.panel-calc input[type=number]{padding:6px 8px;font-size:.85rem}
.panel-calc .seg button{padding:6px 4px}
.tooth-editor{padding:9px 12px 7px}
.te-head{margin-bottom:6px}
.te-track{height:40px}
.view .chartbox{padding:8px}
.views button{padding:6px 10px}
.calc-main .stats .stat{padding:9px 11px}
.calc-main .stats .v{font-size:1.15rem}
.calc-main .stats .k{font-size:.58rem}
.calc-main .stats .s{font-size:.66rem}
@media(max-width:900px){
  .livebar{top:52px;border-radius:0;margin:0 -20px;padding:0 6px}
  .livebar div{padding:6px 10px}
}

/* sense marca a la capçalera: primer la navegació, després les eines */
.topbar .wrap{gap:14px}
.navlinks{margin-left:0;order:0}
.tools{margin-left:auto;order:1}
#langSel{order:2;margin-left:0}
@media(max-width:640px){.topbar .wrap{gap:8px}.tools button{padding:6px 8px;font-size:.66rem}}

#unitSel,#langSel{width:auto;background:var(--graphite-2);border-color:#333B3F;color:var(--on-dark);
  font-family:var(--mono);font-size:.7rem;padding:5px 6px}
#unitSel{order:3}

/* els camps de plats són estrets: fora fletxes i menys encoixinat, que hi càpiguen dues xifres */
.ringbox input{padding-left:19px;padding-right:2px;text-align:center;-moz-appearance:textfield}
.ringbox input::-webkit-outer-spin-button,.ringbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ringbox .dot{left:6px;width:7px;height:7px}

/* interruptor de muntatge sempre a la vista */
.abswitch{display:flex;gap:2px;background:var(--graphite-2);border:1px solid #333B3F;border-radius:var(--r);padding:2px}
.abswitch button{font-family:var(--mono);font-size:.74rem;font-weight:600;background:none;border:0;color:var(--on-dark-60);
  padding:4px 11px;border-radius:2px;cursor:pointer;line-height:1.2}
.abswitch button[aria-pressed="true"]{background:var(--c1);color:#fff}
.abswitch button[data-ab="B"][aria-pressed="true"]{background:var(--cB)}
body.editing-b .panel-calc{border-color:var(--cB);box-shadow:inset 3px 0 0 var(--cB)}
body.editing-b .livebar{box-shadow:inset 3px 0 0 var(--cB)}

/* deltes compactes dins de la calculadora */
.calc-main .deltas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.calc-main .delta{background:var(--card);padding:8px 11px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline}
.calc-main .delta .k{grid-column:1/3;font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-60)}
.calc-main .delta .a{font-family:var(--mono);font-size:.9rem;color:var(--c1);font-weight:600}
.calc-main .delta .b{font-family:var(--mono);font-size:.9rem;color:var(--cB);font-weight:600;justify-self:end}
.calc-main .delta .d{grid-column:1/3;font-family:var(--mono);font-size:.68rem;color:var(--ink-60)}
.abswitch button.hide{display:none}
.abswitch button[data-ab="new"],.abswitch button[data-ab="drop"]{color:var(--on-dark-60);padding:4px 8px}
.abswitch button[data-ab="new"]:hover,.abswitch button[data-ab="drop"]:hover{color:#fff}

.metricbar{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.metricbar .seg{flex:0 0 auto}
.metricbar .seg button{padding:5px 12px;font-size:.72rem}
.metricbar .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}

.tablefold{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:8px 10px}
.tablefold summary{cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-60)}
.tablefold summary:hover{color:var(--ink)}
.tablefold .scroller{margin-top:9px;border:0}

.wheelhint:empty{display:none}
.wheelhint{border-left:2px solid var(--c1);padding-left:9px;margin-top:9px;color:var(--ink)}

.rampbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 16px;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.rampbar label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.rampbar .minilab{grid-column:1/3;margin-bottom:0}
.rampbar input[type=range]{width:100%}
.rampbar b{font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.seq .row{grid-template-columns:30px 1.4fr 1fr 1.2fr 1fr}
@media(max-width:900px){.seq .row{grid-template-columns:24px 1.3fr 1fr 1fr}.seq .row span:nth-child(4){display:none}}

/* colors de la columna «a la rampa»: la llista d'ordre va substituir la llista antiga */
.seq .row .warn{color:var(--c2);font-weight:600}
.seq .row .ok{color:#B77400;font-weight:600}
.seq .row .good{color:#177A5C;font-weight:600}
.seq .row .over{color:var(--ink-30)}
.seq .row.dup{opacity:.5}

.l10n{background:#FFF4D6;border-bottom:1px solid #E8D9A8;padding:7px 20px;font-size:.78rem;color:#5A4A1E;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.l10n a{color:#8A6A12;font-family:var(--mono);font-size:.72rem}