/* Layout: one narrow tool column, tab bar of four jobs, inputs on top, ranked answers below — reads like a pocket reference card */
:root{
  --bg:#e8eaed; --panel:#ffffff; --panel2:#f2f3f5; --ink:#14181d; --mute:#5b6673; --line:#d2d7dd;
  --blue:#1d56b0; --blue-soft:#e3ebf8; --acc:#2563c9; --on-acc:#ffffff; --good:#1f7a4d; --warn:#9a6a08; --bad:#a3302a;
  --mark:"Barlow Condensed","Arial Narrow",sans-serif;   /* the Benchsmith wordmark only */
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--body); --mono:var(--body);   /* polish pass (8 Oct): one face for the whole app, numbers lined up */
  --rc:14px; --rk:10px;   /* two corner sizes: cards and lists, controls */
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);margin:0;font-variant-numeric:tabular-nums}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:flex;flex-direction:column;gap:14px}
header h1{font:700 2.1rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:0}
header p{margin:.3rem 0 0;color:var(--mute);font-size:.9rem}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--line);padding:4px;border-radius:var(--rk);position:sticky;top:env(safe-area-inset-top,0px);z-index:2}
.tabs button{font:600 1.02rem/1 var(--display);border:0;border-radius:var(--rk);padding:.7rem .2rem;background:transparent;color:var(--mute);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--blue)}
.tabs button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rk);padding:16px;display:flex;flex-direction:column;gap:14px}
.lbl{font:500 .72rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.row{display:flex;flex-wrap:wrap;gap:10px}
.f{display:flex;flex-direction:column;gap:5px;flex:1 1 90px;min-width:0}
input,select{font:500 1.15rem var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:.55rem .6rem;width:100%;min-width:0}
select{font:500 .95rem var(--body)}
.hint{font-size:.85rem;color:var(--mute);margin:0}
.results{display:flex;flex-direction:column;gap:8px}
.res{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rk);border-left:4px solid var(--line)}
.res.g{border-left-color:var(--good)}.res.w{border-left-color:var(--warn)}.res.b{border-left-color:var(--bad)}
.res .name{font:700 1.3rem/1.1 var(--display);}
.res .dims{font:500 .95rem var(--mono);font-variant-numeric:tabular-nums}
.res .dev{font:500 .8rem var(--mono);text-align:right;align-self:start}
.res.g .dev{color:var(--good)}.res.w .dev{color:var(--warn)}.res.b .dev{color:var(--bad)}
.res .note{grid-column:1/-1;font-size:.83rem;color:var(--mute)}
.bpic{background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:8px}
.bpic svg{width:100%;height:auto;display:block}
.bpic .ring{stroke:var(--ink);stroke-width:1}
.bpic .hl{stroke:var(--mute);stroke-width:.8}
.bpic .roll{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.2}
.bpic .edge{stroke:var(--ink);stroke-width:1}
.bpic .shaft{stroke:var(--mute);stroke-width:1;stroke-dasharray:5 3}
.bpic .cl2{stroke:var(--mute);stroke-width:.7;stroke-dasharray:8 2 2 2}
.bpic .dm{stroke:var(--mute);stroke-width:.6}
.bpic .ah{fill:var(--mute)}
.bpic .cage{fill:var(--ink);stroke:none}
.bpic .dt{fill:var(--mute);font:500 10px var(--mono)}
.bpic svg{max-height:340px}
.bpic .bcap{font-size:.88rem;color:var(--mute);padding:4px 4px 0}
.bpic .bcap b{color:var(--ink);font-family:var(--display);font-size:1.05rem;}
.res[data-bi]{cursor:pointer}
.res.pick{background:var(--blue-soft)}
.res[data-bi]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.chip{display:inline-block;font:500 .7rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--blue-soft);color:var(--blue);padding:.3rem .45rem;border-radius:4px;margin-right:6px;vertical-align:middle}
.big{font:700 2.3rem/1 var(--display);color:var(--blue)}
table{border-collapse:collapse;width:100%;font:500 .92rem var(--mono);font-variant-numeric:tabular-nums}
th{font:500 .7rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
.tscroll{overflow-x:auto}
.pcdsvg{width:100%;max-width:260px;align-self:center}
.pcdsvg circle.pc{fill:none;stroke:var(--mute);stroke-dasharray:4 3}
.pcdsvg circle.h{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.5}
.pcdsvg text{fill:var(--ink);font:500 9px var(--mono)}
.pcdsvg line{stroke:var(--mute);stroke-width:.6}
.foot{font-size:.8rem;color:var(--mute);text-align:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--rk);overflow:hidden}
.seg button{font:500 .85rem var(--body);border:0;background:var(--panel);color:var(--mute);padding:.4rem .75rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.tabs button{font-size:.95rem}
.viewer{background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);aspect-ratio:1/1;max-width:100%;display:flex}
.viewer svg{width:100%;height:100%}
.viewer .cut{fill:none;stroke:var(--ink);stroke-width:.35;vector-effect:non-scaling-stroke}
.viewer .cl{stroke:var(--mute);stroke-width:.6;stroke-dasharray:6 3 1 3;vector-effect:non-scaling-stroke}
#view text{fill:var(--blue);font-family:var(--mono)}
.chat{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:2px}
.msg{padding:9px 12px;border-radius:var(--rk);max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.93rem}
.msg.u{align-self:flex-end;background:var(--acc);color:var(--on-acc)}
.msg.a{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.msg.e{align-self:flex-start;color:var(--bad);border:1px solid var(--bad);background:transparent}
.ask{display:flex;gap:8px}
.ask textarea{flex:1;min-width:0;font:400 .95rem var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:.55rem .6rem;resize:vertical;min-height:2.8rem}
.btn{font:600 1rem/1 var(--display);border:0;border-radius:var(--rk);padding:.75rem 1rem;background:var(--acc);color:var(--on-acc);cursor:pointer}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dims{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font:500 .9rem var(--mono);font-variant-numeric:tabular-nums}
.dims li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:3px}
.dims li span:first-child{font-family:var(--body);color:var(--mute)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}
.check input{width:auto;margin-top:.2rem}
.make-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:680px){.make-grid{grid-template-columns:1fr 1fr}}
.make-grid>*{min-width:0}
details summary{cursor:pointer;color:var(--mute);font-size:.85rem}
details textarea{width:100%;min-height:9rem;font:400 .8rem var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:.5rem;margin-top:6px}
.status{font-size:.85rem;color:var(--mute);min-height:1.2em}
.wc{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--rk);padding:12px}
.wout{font-size:.92rem;line-height:1.5;font-variant-numeric:tabular-nums}
.wout b{font-family:var(--display);font-size:1.25rem;}
.wout .m{color:var(--mute)}
.wc select{font:500 .95rem var(--body)}
.wc input[type=range]{padding:0;accent-color:var(--blue)}
/* engineering sheet: always white paper, black ink, like a plotted drawing */
:root{--paper:#ffffff;--pink:#111111;--pthin:#333333;--pdim:#1a1a1a}
.viewer.sheet{aspect-ratio:210/297;background:var(--paper);border-color:var(--line)}
.viewer.v3d{background:#3a4552;aspect-ratio:1/1;position:relative;touch-action:none}
.fitb{position:absolute;right:8px;top:8px;font:600 .8rem var(--body);padding:6px 10px;border-radius:var(--rk);border:1px solid rgba(255,255,255,.25);background:rgba(20,26,33,.7);color:#fff;cursor:pointer}
.viewer.v3d canvas{width:100%;height:100%;display:block;cursor:grab}
.btn{padding:.7rem .85rem}
.block{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:500 .85rem var(--body);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);padding:.4rem .8rem;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.chips button:focus-visible,.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bbody{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.bdiag{flex:0 0 120px;width:120px;height:120px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rk)}
.bdiag .o{fill:var(--blue-soft);stroke:var(--ink);stroke-width:1}
.bdiag .tl{stroke:var(--blue);stroke-width:1}
.bdiag .tc{fill:var(--blue)}
.bdiag .tt{fill:var(--panel);font:700 9px var(--mono);text-anchor:middle;dominant-baseline:central}
.bfields{flex:1 1 200px;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.bfields .f .lbl b{color:var(--blue);margin-right:4px}
[hidden]{display:none!important}
.tn{display:flex;flex-direction:column;gap:10px}
.tn-step{border:1px solid var(--line);border-radius:var(--rk);padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.tn-f{border-left:3px solid var(--blue);padding:6px 0 6px 10px;display:flex;flex-direction:column;gap:8px}
.tn-h{display:flex;align-items:center;gap:8px}.tn-h b{font:700 1rem var(--display);}.tn-h .m{color:var(--mute);font-size:.85rem}.tn-h .sp{flex:1}
.tn .x{border:1px solid var(--line);background:var(--panel);color:var(--mute);border-radius:var(--rk);min-width:2.2rem;height:2.2rem;cursor:pointer;font:600 .9rem var(--body)}
.tn .x:disabled{opacity:.35;cursor:default}.tn .x:focus-visible{outline:2px solid var(--blue)}
.tn-v{padding:.5rem 0;font-variant-numeric:tabular-nums}.tn-v .m{color:var(--mute);font-size:.85rem}
.tn-add button{font-size:.8rem;padding:.35rem .7rem}
.thr{display:flex;flex-direction:column;gap:8px}
.fit-g{color:var(--good)}.fit-w{color:var(--warn)}.fit-b{color:var(--bad)}
.tn-ends{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.pad{background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);aspect-ratio:1/1;max-width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.pad svg{width:100%;height:100%;display:block;touch-action:none}
.pad .grid{stroke:var(--line);stroke-width:.6;vector-effect:non-scaling-stroke}
.pad .shape{fill:var(--blue-soft);stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke;fill-rule:evenodd}
.pad .ink{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pad .gap{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.pad .chip rect{fill:var(--panel);stroke:var(--line);vector-effect:non-scaling-stroke}
.pad .chip.set rect{fill:var(--acc);stroke:var(--acc)}
.pad .chip.auto rect{fill:var(--panel);stroke:var(--good);stroke-dasharray:3 2}
.pad .chip.sel rect{stroke:var(--warn);stroke-width:2.5}
.pad .chip text{fill:var(--mute);font-family:var(--mono);font-weight:600;text-anchor:middle;dominant-baseline:central}
.pad .chip.set text{fill:var(--on-acc)}
.pad .chip.auto text{fill:var(--good)}
.pad .chip{cursor:pointer}
.pad .corner{fill:var(--panel);stroke:var(--blue);stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer}
.pad .corner.on{fill:var(--blue)}
.pad .corner.sel{stroke:var(--warn);stroke-width:3}
.pad .datum{fill:var(--warn)}
.pad .ghost{fill:none;stroke:var(--mute);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.pad .rec{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.pad .cutl{fill:none;stroke:var(--bad);stroke-width:1.5;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.pad .bad{fill:none;stroke:var(--bad);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pad .chip.tag rect{fill:var(--bg);stroke:var(--mute);vector-effect:non-scaling-stroke}
.pad .chip.tag text{fill:var(--ink)}
.sheet-ed{border:1px solid var(--line);border-radius:var(--rk);padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.sheet-ed .ttl{font:700 1.1rem var(--display);}
.skprev{flex:0 0 150px;width:150px;height:150px}
.skprev .o{fill:var(--blue-soft);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.skprev .h{fill:var(--bg);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.skprev .cl{stroke:var(--warn);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.sklist{display:flex;flex-direction:column;gap:6px}
.skrow{display:grid;grid-template-columns:1.6rem 5.2rem repeat(3,minmax(0,1fr)) 2rem;gap:6px;align-items:end}
.skrow .no{font:700 .95rem var(--display);color:var(--blue);padding-bottom:.6rem}
.skrow .f .lbl{font-size:.62rem}
.skrow input,.skrow select{font-size:.95rem;padding:.45rem .4rem}
.skrow .x{border:1px solid var(--line);background:var(--panel);color:var(--mute);border-radius:var(--rk);height:2.3rem;cursor:pointer}
.skrow .x:focus-visible{outline:2px solid var(--blue)}

/* ===== workshop layout: drawing pinned on top, editor below, tabs at the bottom ===== */
body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1180px;padding-block:0 24px;gap:12px}
header.top{position:sticky;top:0;z-index:6;background:var(--bg);display:flex;align-items:center;gap:10px;height:50px;padding:0}
header.top h1{font:700 1.45rem/1 var(--mark);letter-spacing:.05em;text-transform:uppercase;margin:0;flex:1}
header.top .seg button{padding:.3rem .6rem;font-size:.8rem}
.page{display:flex;flex-direction:column;gap:12px;max-width:720px;width:100%;margin:0 auto}
.page[hidden]{display:none!important}
.panel{border-radius:var(--rc)}
.pg-h{display:flex;align-items:center;gap:10px}.pg-h h2,.pg-t{font:700 1.5rem/1 var(--display);margin:0;flex:1}
.seg{border-radius:var(--rk);background:var(--panel)}
.seg button{padding:.45rem .8rem}
.seg.sub{align-self:flex-start}
input.txt,.txt{font:500 .95rem var(--body)}
/* make page */
.mkpage{max-width:none;display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.stage{position:sticky;top:50px;z-index:4;background:var(--bg);padding-bottom:6px}
.vbox{position:relative;height:clamp(230px,42vh,440px);border-radius:var(--rc);overflow:hidden;background:#f6f4ee;border:1px solid var(--line)}
.vbox .viewer.sheet,.vbox .viewer.cutv{top:40px;bottom:54px;height:auto}
/* full-screen viewer */
.fsb{position:absolute;right:8px;top:8px;z-index:2;width:32px;height:30px;border:0;border-radius:var(--rk);background:rgba(20,24,29,.82);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.fsb svg{width:16px;height:16px}
.vbox .fitb{right:46px}
.fsx,.fsbar{display:none}
body.fsv{overflow:hidden}
body.fsv .stage{position:fixed;inset:0;z-index:50;padding:0;background:#14181d}
body.fsv .vbox,body.fsv[data-mode=sketch] .vbox{height:100%;border-radius:0;border:0;background:#14181d}
body.fsv .vbox .viewer.sheet,body.fsv .vbox .viewer.cutv,body.fsv[data-mode=sketch] .vbox .viewer.sheet{top:58px;bottom:calc(64px + env(safe-area-inset-bottom,0px));touch-action:none}
body.fsv .vbox .viewer.v3d{top:58px;bottom:calc(64px + env(safe-area-inset-bottom,0px));height:auto}
body.fsv .tiles,body.fsv .fsb,body.fsv .vchips.vw,body.fsv .fab,body.fsv .addbar{display:none!important}
body.fsv .vchips{left:56px;top:12px}
body.fsv .vbox .fitb{right:10px;top:12px}
body.fsv .fsx{display:grid;place-items:center;position:absolute;left:10px;top:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:#2b3138;color:#fff;font-size:1.1rem;cursor:pointer}
body.fsv .fsbar{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:3;height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 12px env(safe-area-inset-bottom,0px);align-items:center;justify-content:space-between;gap:10px;color:#b9c2cc;font:.8rem/1.3 var(--body)}
.fsbar button{font:600 .8rem var(--body);border:0;border-radius:var(--rk);padding:.5rem .85rem;background:#2b3138;color:#fff;cursor:pointer;white-space:nowrap}
.fsbar .zp{background:transparent;color:#fff;padding:.5rem .4rem}
body.fsv.rot .vbox .viewer.sheet,body.fsv.rot .vbox .viewer.cutv{top:calc(50% - (64px + env(safe-area-inset-bottom,0px) - 58px)/2);left:50%;right:auto;bottom:auto;width:calc(100vh - 122px - env(safe-area-inset-bottom,0px));height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
.fsx:focus-visible,.fsb:focus-visible,.fsbar button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.vbox .viewer{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto;width:100%;height:100%;max-width:none}
.viewer.sheet{background:#f6f4ee}
.viewer.cutv{background:#f6f4ee;--ink:#151515;--mute:#666;--blue:#1d56b0}
.viewer.v3d{background:#3a4552}
.vchips{position:absolute;left:8px;top:8px;display:flex;gap:4px;z-index:2}
.vchips button,.fitb{font:600 .78rem var(--body);border:0;border-radius:var(--rk);padding:.38rem .75rem;background:rgba(20,24,29,.82);color:#fff;cursor:pointer}
.vchips button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.vchips.vw{top:auto;bottom:62px}
.fitb{position:absolute;right:8px;top:8px;left:auto;z-index:2}
.tiles{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;z-index:2;pointer-events:none}
.tile{flex:1;min-width:0;background:rgba(20,24,29,.86);border-radius:var(--rk);padding:4px 9px;color:#fff;pointer-events:auto;cursor:pointer;border:0;text-align:left}
.tile span{display:block;font:500 .62rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:#aab4bf}
.tile b{display:block;font:700 1.02rem/1.15 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7b8590;margin:0}
.editor{display:flex;flex-direction:column;gap:10px;min-width:0;padding-bottom:64px}
.modes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.modes button{flex:none;font:500 .85rem var(--body);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);padding:.45rem .9rem;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.phead{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc)}
.ph-sum{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--ink);padding:10px 12px;cursor:pointer;text-align:left;font:inherit}
.ph-sum>span:first-child{flex:1;min-width:0}
.ph-sum b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-sum #ph-sub{font-size:.8rem;color:var(--mute)}
.ph-ed{color:var(--mute)}
.ph-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px}
#mk-build,#mk-sketch,#mk-turn,#mk-chat{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:12px}
details.sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:0 12px}
details.sec>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 0;font:700 1.05rem var(--display);color:var(--ink)}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:'›';color:var(--mute);font-size:1.3rem;transition:transform .15s}
details.sec[open]>summary::after{transform:rotate(90deg)}
details.sec[open]{padding-bottom:12px}
details.sec .wc{border:0;padding:0;margin-bottom:12px}
#mk-build details.sec{border:0;padding:0;background:none}
#mk-build details.sec>summary{font:400 .85rem var(--body);text-transform:none;letter-spacing:0;color:var(--mute);padding:6px 0}
.dims li{padding:4px 0}
/* export */
.fab{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:8;font:700 1.05rem/1 var(--display);background:var(--acc);color:var(--on-acc);border:0;border-radius:var(--rc);padding:14px 20px;box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer}
.fab[hidden]{display:none}
.xbg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20}
.xsheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:720px;margin:0 auto;background:var(--panel);border-radius:var(--rc) 20px 0 0;border-top:1px solid var(--line);padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow-y:auto}
.xbg[hidden],.xsheet[hidden]{display:none!important}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto}
.okbox{background:var(--bg);border-radius:var(--rk);padding:10px;color:var(--mute);font-size:.85rem}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex button{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--rc);padding:10px 12px;color:var(--ink);cursor:pointer;font:inherit}
.ex button b{display:block;font:700 1.05rem var(--display);}
.ex button span{font-size:.78rem;color:var(--mute)}
.ex button:disabled{opacity:.4;cursor:not-allowed}
.ex button:not(:disabled):hover{border-color:var(--acc)}
.ex button[hidden]{display:none}
.x{border:1px solid var(--line);background:var(--panel);color:var(--mute);border-radius:var(--rk);min-width:2.3rem;height:2.3rem;cursor:pointer;font:600 .9rem var(--body)}
/* bottom nav */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--panel);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;background:none;border:0;color:var(--mute);font:500 .72rem var(--body);cursor:pointer}
.bnav button[aria-current="page"]{color:var(--blue)}
.bnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.bnav button:focus-visible,.modes button:focus-visible,.vchips button:focus-visible,.fab:focus-visible,.ex button:focus-visible,.tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* turned: folded rows */
.srow{width:100%;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:10px 12px;color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.srow .no{font:700 1.15rem var(--display);color:var(--blue);min-width:1.1rem}
.srow .sz{font:500 .98rem var(--mono)}
.srow .ft{font-size:.78rem;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.srow .chev{color:var(--mute);font-size:1.1rem;margin-left:auto}
.tn-step.open{border-color:var(--acc)}
.ftags{display:flex;flex-wrap:wrap;gap:6px}
.ftag{font:500 .8rem var(--body);padding:.38rem .65rem;border-radius:var(--rk);background:var(--bg);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.ftag[aria-pressed="true"]{border-color:var(--acc);background:var(--blue-soft)}
.ftag.add{border-style:dashed;color:var(--mute);background:none}
/* parts library */
.newpick{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:12px;display:flex;flex-direction:column;gap:8px}
.search{width:100%;padding:.7rem .8rem;border-radius:var(--rc);background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.lib{display:flex;flex-direction:column;gap:8px}
.card{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:8px}
.card.cur{border-color:var(--acc)}
.card .open{display:flex;gap:10px;align-items:center;flex:1;min-width:0;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit;padding:0}
.thumb{width:64px;height:64px;border-radius:var(--rk);background:#f6f4ee;flex:none;display:flex}
.thumb svg{width:100%;height:100%}
.thumb path{fill:none;stroke:#151515;stroke-width:1.4;vector-effect:non-scaling-stroke}
.card .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .s{font-size:.8rem;color:var(--mute)}
.card .acts{display:flex;flex-direction:column;gap:4px}
.card .acts button{font:500 .75rem var(--body);border:1px solid var(--line);background:var(--bg);color:var(--mute);border-radius:var(--rk);padding:.3rem .55rem;cursor:pointer}
.card .acts button.danger{color:var(--bad);border-color:var(--bad)}
body[data-mode=sketch] .vbox{height:clamp(170px,27vh,300px)}
body[data-mode=sketch] .tiles{display:none}
body[data-mode=sketch] .vchips.vw{bottom:8px}
body[data-mode=sketch] .vbox .viewer.sheet{bottom:42px}
.vchips.vw button{padding:.3rem .6rem;font-size:.72rem}
@media (min-width:900px){
  .mkpage{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .vbox{height:calc(100vh - 140px);max-height:none}
}

.buy{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.buy .bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.buy .bh b{font:700 1.05rem var(--display);flex:1}
.buy select{max-width:170px;font:500 .85rem var(--body);padding:.35rem .5rem}
.near{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:700 1rem var(--display);background:var(--acc);color:var(--on-acc);border-radius:var(--rk);padding:.8rem 1rem}
.near:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sup{background:var(--bg);border:1px solid var(--line);border-radius:var(--rc);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.sup.feat{border-color:var(--acc)}
.sup .t{font-weight:600}.sup .s{font-size:.8rem;color:var(--mute)}
.sup .fb{font:600 .65rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-left:6px}
.sup .acts{display:flex;gap:6px;flex-wrap:wrap}
.sup .acts a,.sup .acts button{font:600 .8rem var(--body);text-decoration:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);padding:.45rem .75rem;cursor:pointer}
.supform{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rc);padding:12px}
#ld-tab table{font-size:.85rem}

.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tool .t{font-weight:600}.tool .w{font-size:.85rem;color:var(--mute)}
.tool .acts{display:flex;gap:6px;flex-wrap:wrap}
.tool .acts a{font:600 .8rem var(--body);text-decoration:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--rk);padding:.45rem .75rem}
.tool .acts a.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.tsug{display:flex;flex-direction:column;gap:6px}
.tsug:empty{display:none}
.tsug .lbl{margin-top:4px}
.tsug .tool{background:var(--bg)}

.jlb{position:relative;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);height:2.2rem;min-width:2.6rem;font-size:1.05rem;cursor:pointer}
.jlb span{position:absolute;top:-6px;right:-6px;background:var(--acc);color:var(--on-acc);font:700 .7rem var(--body);border-radius:99px;min-width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center;padding:0 4px}
.jlb span[hidden]{display:none}
/* photo → part */
body.ph-trace .vbox{height:clamp(280px,50vh,560px)}
body.ph-trace .editor{min-height:calc(100vh - 120px)}
body.ph-trace .vbox>.viewer:not(#view-ph),body.ph-trace .vchips,body.ph-trace .fitb,body.ph-trace .fsb,body.ph-trace .tiles,body.ph-trace .vempty{display:none!important}
.viewer.phv{background:#1b2027;touch-action:none;user-select:none;-webkit-user-select:none}
.viewer.phv svg{width:100%;height:100%;display:block}
.ph-zoom{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(20,24,29,.86);color:#fff;font:600 .8rem var(--body);border-radius:var(--rk);padding:4px;pointer-events:auto;white-space:nowrap}
.ph-zoom span{min-width:3.2em;text-align:center;font-variant-numeric:tabular-nums}
.ph-zoom button{border:0;background:rgba(255,255,255,.12);color:#fff;font:700 .9rem var(--body);min-width:40px;height:36px;border-radius:var(--rk);padding:0 10px;cursor:pointer}
.ph-zoom button:active{background:rgba(255,255,255,.28)}
.ph-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;color:#cfd6de}
.ph-empty b{font-size:1.15rem;color:#fff}.ph-empty span{font-size:.85rem;max-width:300px}
.ph-steps{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ph-steps button{flex:1;white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);padding:.5rem .6rem;font:700 .78rem var(--body);cursor:pointer}
.ph-steps button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}.ph-steps button:disabled{opacity:.45}
.ph-tip{margin:4px 0;font:700 .92rem var(--body);color:var(--ink)}
.ph-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ph-tools{display:flex;gap:6px;flex-wrap:wrap}
.ph-tools button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rk);padding:.55rem .75rem;font:700 .85rem var(--body);cursor:pointer}
.ph-tools button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.ph-cards{display:flex;gap:8px}.ph-cards button{flex:1;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--rc);padding:10px 6px;font:700 .8rem var(--body);cursor:pointer}
.ph-cards button b{display:block;font-size:1.3rem;margin-bottom:2px}.ph-cards button[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
#mk-photo .btn:disabled{opacity:.45}

.jlb[aria-pressed="true"]{background:var(--acc);border-color:var(--acc)}
@media (max-width:400px){header.top{gap:6px}header.top h1{font-size:1.2rem}.jlb{min-width:2.3rem}}
/* bearing number + photo read + decoder */
.bn-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:10px}.bn-row .f{flex:1;min-width:0}
.bn-row input{font-family:var(--mono,monospace);text-transform:uppercase;letter-spacing:.03em}
.bn-photo{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:var(--rk);background:var(--acc);color:var(--on-acc);height:3.05rem;min-width:4.4rem;font-size:1.15rem;cursor:pointer}
.bn-photo span{font:700 .7rem var(--body)}
.bn-photo[hidden]{display:none}
.bread{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:10px;margin:-2px 0 12px}
.bread img{width:84px;height:84px;object-fit:cover;border-radius:var(--rk);flex:none;background:#0002}
.bread .t{flex:1;min-width:0;font-size:.85rem;color:var(--mute)}.bread .t b{display:block;font:800 1.15rem var(--mono,monospace);color:var(--ink);word-break:break-all;margin:2px 0}
.bread .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bread .acts button{font:700 .82rem var(--body);border-radius:var(--rk);padding:.45rem .7rem;border:1.5px solid var(--acc);background:transparent;color:var(--acc);cursor:pointer}
.bread .acts button.p{background:var(--acc);color:var(--on-acc)}
.bdec:empty{display:none}
.bdec{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:var(--rc);padding:10px 12px;margin:0 0 12px}
.bdec h3{margin:0 0 4px;font:700 .95rem var(--body)}.bdec h3 code{font:800 1.05rem var(--mono,monospace);color:var(--acc)}
.bdec table{width:100%;border-collapse:collapse;font-size:.84rem}
.bdec td{font-family:var(--body);letter-spacing:0;padding:6px 4px;border-top:1px solid var(--line);vertical-align:top;text-align:left}
.bdec td:first-child{font:800 .9rem var(--mono,monospace);color:var(--acc);white-space:nowrap;width:1%;padding-right:10px}
.bdec .q{color:var(--mute)}
.bdec .eq{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.bdec .eq button{font:600 .78rem var(--mono,monospace);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--rk);padding:.32rem .6rem;cursor:pointer}
.bdec .eq button i{font-style:normal;color:var(--mute);font-family:var(--body);margin-left:4px}
/* glove mode */
body.glove .f input,body.glove .f select{min-height:3.6rem;font-size:1.45rem}
body.glove .lbl{font-size:.82rem}
body.glove .seg button,body.glove .subseg button{min-height:3rem;font-size:.98rem}
body.glove .bnav button{min-height:4.2rem}
body.glove header.top .seg button{min-height:0;font-size:.8rem}
.bn-row input::placeholder{text-transform:none;letter-spacing:0}
body.glove .res{padding:14px}
.kp{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#1f252c;padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.45)}
.kp[hidden]{display:none}
.kp .kt{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#cfd6de;font:600 .9rem var(--body);margin:0 4px 8px}
.kp .kt b{font:800 1.5rem var(--mono,monospace);color:#fff;flex:1;text-align:right;overflow:hidden;white-space:nowrap}
.kp .kt button{border:0;background:transparent;color:#cfd6de;font-size:1.2rem;padding:.2rem .4rem;cursor:pointer}
.kp .kg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kp .kg button{height:3.7rem;border:0;border-radius:var(--rc);background:#3a434d;color:#fff;font:700 1.55rem var(--body);cursor:pointer;touch-action:manipulation}
.kp .kg button:active{background:#56616d}
.kp .kg .a{background:var(--acc);color:var(--on-acc);font-size:1.15rem}.kp .kg .m{background:#b8322a;font-size:1rem}.kp .kg .m.on{background:#e04a3f}
.kp .kg .m[hidden]{display:none}
body.kp-open{padding-bottom:300px}
.addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--rk);overflow:hidden;background:var(--bg)}
.qty button{border:0;background:none;color:var(--ink);font:600 1.1rem var(--body);width:2.4rem;height:2.4rem;cursor:pointer}
.qty input{width:3rem;text-align:center;border:0;border-radius:0;padding:.3rem;background:none}
.jcat{font:700 .95rem var(--display);color:var(--mute);margin:10px 0 4px}
.jrow{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:8px 10px;margin-bottom:6px}
.jrow .h{display:flex;align-items:center;gap:8px}
.jrow .l{flex:1;min-width:0}.jrow .l b{font:500 1rem var(--mono)}.jrow .l span{display:block;font-size:.75rem;color:var(--mute)}
.jrow input.note{font:400 .85rem var(--body);padding:.35rem .5rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:var(--bg);font:600 .85rem var(--body);padding:.6rem 1rem;border-radius:var(--rk);max-width:90vw}
.toast[hidden]{display:none}

.addbar{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:9;background:var(--panel);border-top:1px solid var(--acc);display:flex;align-items:center;gap:8px;padding:8px 12px;box-shadow:0 -4px 14px rgba(0,0,0,.25)}
.addbar[hidden]{display:none}
.addbar .ab-l{flex:1;min-width:0}.addbar .ab-l b{display:block;font:600 1rem var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.addbar .ab-l span{display:block;font-size:.72rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addbar .btn{padding:.65rem .9rem}
body.hasbar{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
/* bearing results: groups of slim tiles, one open panel under its row */
.bg h4{margin:4px 0 6px;font:600 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
.bg-n{margin:0 0 6px;font-size:.8rem;color:var(--warn)}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:var(--rk);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.bt b{font:700 1.08rem/1.1 var(--display);}
.bt small{font:500 .7rem/1.25 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.bt em{font:700 .6rem/1 var(--body);font-style:normal;letter-spacing:.08em;color:var(--warn)}
.bt.best{border:2px solid var(--warn);padding:6px 7px}
.bt.dim{opacity:.72}.bt.miss{opacity:.5}
.bt.open{opacity:1;background:var(--blue-soft);border-color:var(--blue)}
.bt.best.open{border-color:var(--warn)}
.bt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bp{grid-column:1/-1;background:var(--bg);border:1px solid var(--line);border-radius:var(--rk);padding:10px 12px;font-size:.88rem}
.bp-r{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.bp-r span{color:var(--mute)}.bp-r b{font:600 .88rem var(--mono);text-align:right}
.bp .ok{font-style:normal;color:var(--good);font-size:1.05rem}
.bp hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.bp-w{margin:8px 0 0;color:var(--warn);font-weight:600;font-size:.84rem}
.tn-w{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}.tn-w:empty{display:none}.tn-w .bp-w{margin:0;flex:1 1 14em}
.bp-sup{display:block;margin:10px 0 6px;padding:.75rem;border-radius:var(--rk);background:var(--acc);color:var(--on-acc);text-align:center;font-weight:600;text-decoration:none}
.bp-src{margin:0;font-size:.68rem;color:var(--mute)}
body.glove .bt{padding:12px 10px}
/* exact solid being built (geometry/occt.js) */
.occ-pill{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;padding:5px 12px;border-radius:999px;font:600 .8rem/1.3 var(--body);white-space:nowrap;pointer-events:none;
  background:rgba(58,44,8,.88);color:#e8b84a;border:1px solid rgba(232,184,74,.45);transition:opacity .4s}
.occ-pill.ready{background:rgba(12,52,32,.88);color:#6fd39b;border-color:rgba(111,211,155,.45)}
.occ-pill.fade{opacity:0}
.occ-pill:not(.ready):not(.fade){animation:occ-pulse 1.2s ease-in-out infinite}
@keyframes occ-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.occ-pill{animation:none!important}}
.credits h3{font:600 .95rem var(--body);margin:12px 0 4px}
.credits p{margin:4px 0}
.credits a{color:var(--blue);overflow-wrap:anywhere}
/* Photo fullscreen: the photo view fills the screen (Fullscreen API or a fixed overlay); controls clear the notch and home bar */
.ph-fsbtn{position:absolute;top:8px;right:8px;z-index:2;border:0;border-radius:var(--rk);background:rgba(20,24,29,.86);color:#fff;font:700 .8rem var(--body);height:36px;padding:0 12px;cursor:pointer}
#view-ph.ph-fs{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;margin:0!important;z-index:1000;background:#0b0e12}
#view-ph.ph-fs:fullscreen{width:100vw!important;height:100vh!important}
body.ph-fs-on{overflow:hidden}
.ph-fs-top{position:absolute;z-index:2;left:calc(env(safe-area-inset-left,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);top:calc(env(safe-area-inset-top,0px) + 8px);display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.ph-fs-top>*{pointer-events:auto}
.ph-fs-z{background:rgba(20,24,29,.86);color:#fff;font:600 .8rem var(--body);border-radius:var(--rk);padding:9px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ph-fs-tip{flex:0 1 auto;max-width:60%;background:rgba(20,24,29,.9);color:#fff;font:600 .82rem/1.35 var(--body);border-radius:var(--rc);padding:8px 14px;text-align:center}
.ph-fs-tip button{border:0;border-radius:var(--rk);background:#2f6fd6;color:#fff;font:700 .8rem var(--body);padding:4px 10px;margin-left:4px;cursor:pointer}
.ph-fs-x{border:0;border-radius:var(--rk);background:rgba(20,24,29,.86);color:#fff;font:700 1.05rem var(--body);width:40px;height:40px;cursor:pointer}
.ph-zoom.ph-zoom-fs{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
.ph-zoom button[aria-pressed=true]{background:#2f6fd6}
body.ph-fs-on .stage{z-index:60}   /* the photo sits inside .stage: lift it over the header, nav bar and add bar */
body.ph-fs-on .toast{z-index:70}
/* issues: gold badge next to Fit, the "things to check" sheet, the Export label */
.vtr{position:absolute;right:46px;top:8px;z-index:2;display:flex;gap:6px;align-items:center}
.vbox .vtr .fitb{position:static}
body.fsv .vtr{right:10px;top:12px}
body.ph-trace .vtr{display:none!important}
@media (max-width:399px){.vtr{flex-direction:column-reverse;align-items:flex-end}}   /* narrow phones: the badge sits under Fit, clear of the view chips */
.isb{font:700 .78rem var(--body);border:0;border-radius:99px;padding:.38rem .7rem;background:#e0b04a;color:#1d1503;cursor:pointer;box-shadow:0 0 0 0 rgba(240,190,60,0)}
.isb:focus-visible{outline:2px solid #fff;outline-offset:2px}
.isb.pulse{animation:is-glow 1.5s ease-in-out infinite}
@keyframes is-glow{0%,100%{box-shadow:0 0 0 0 rgba(240,190,60,0)}50%{box-shadow:0 0 10px 4px rgba(240,190,60,.8)}}
.is-sheet:not([hidden]){animation:is-up .22s ease-out}
@keyframes is-up{from{transform:translateY(100%)}to{transform:none}}
.is-list{display:flex;flex-direction:column;gap:10px}
.is-c{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--rk);padding:10px 12px;background:var(--panel2)}
.is-c b{display:block}.is-c p{margin:4px 0 8px;font-size:.9rem}
.is-a{display:flex;flex-wrap:wrap;gap:8px}
.is-hl{outline:3px solid #e0b04a;outline-offset:2px;border-radius:var(--rk);transition:outline-color .6s}
.bk-bar{display:flex;flex-direction:column;gap:6px;padding-top:8px}body:not([data-mode=block]) .bk-bar{display:none!important}
.stage,.bk-bar{min-width:0;max-width:100%}.bk-tools{min-width:0;max-width:100%}
.bk-proc{display:flex}.bk-proc button{flex:1;min-height:44px}
.bk-tools{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.bk-tools::-webkit-scrollbar{display:none}
.bk-tools button{flex:0 0 68px}.bk-tools button.off{display:none}
.bk-tools button{min-height:58px;border:1px solid var(--line);border-radius:var(--rk);background:var(--panel);color:var(--ink);font:500 1.15rem var(--mono);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;cursor:pointer}
.bk-tools button b{font:600 .74rem var(--display);}
.bk-tools button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.bk-hint{margin:0;font-size:.95rem;font-weight:600;color:var(--blue)}
.bk-ops{display:flex;flex-direction:column;gap:6px}.bk-ops:empty{display:none}.bk-ops .lbl{margin:0}
.bk-stk{margin:0;font:500 .9rem var(--mono);color:var(--mute)}
.bk-op{display:flex;gap:6px;align-items:stretch}.bk-op .srow{padding:8px 10px;flex:1;min-width:0;gap:8px}
.bk-op .no{font-size:1rem;min-width:3.2rem;white-space:nowrap}
.bk-sum{display:flex;flex-direction:column;min-width:0;flex:1}.bk-sum .ft{flex:none}
.bk-tag{font:700 .68rem var(--display);padding:3px 6px;border-radius:var(--rk);background:var(--line);color:var(--ink)}
.bk-tag.bk-drill{background:#2f6fd6;color:#fff}.bk-tag.bk-turn{background:#7a5bd0;color:#fff}.bk-tag.bk-mill{background:#2e8b57;color:#fff}
.bk-mv{display:flex;flex-direction:column;gap:4px}.bk-mv button{flex:1;min-width:44px;min-height:26px;border:1px solid var(--line);border-radius:var(--rk);background:var(--panel);color:var(--ink);font-size:.8rem;cursor:pointer;padding:0}
.bk-mv button:disabled{opacity:.3;cursor:default}
.bk-w{color:var(--warn);font-weight:700}
.bk-kind{align-self:flex-start;margin-bottom:6px}.bk-taprow select{min-height:3rem}.bk-tapn{margin:0}
.bk-sheet{gap:10px;max-height:52vh;padding-top:4px}.bk-sheet.full{max-height:90vh}
.bk-grab{align-self:center;width:64px;height:22px;border:0;background:none;padding:0;cursor:pointer;flex:none;position:relative}.bk-grab::after{content:"";position:absolute;left:10px;right:10px;top:8px;height:5px;border-radius:3px;background:var(--line)}
.bk-sheet .row{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}.bk-sheet .row>*{min-width:0}.bk-sheet .row>.seg{grid-column:1/-1}
.bk-sdat{align-self:flex-start;min-height:40px;padding:0 14px;border-radius:var(--rc);border:1px solid #e0b04a;background:none;color:var(--ink);font:600 .85rem var(--body);cursor:pointer}
.bk-vchips{display:flex;gap:6px}.bk-vchips[hidden]{display:none!important}
.bk-vchips button{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;border-radius:var(--rk);border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 .85rem var(--body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-vchips button.on{border-color:#2f6fd6;color:var(--blue)}
.bk-pop{position:absolute;left:8px;right:8px;top:56px;z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:10px;display:flex;flex-direction:column;gap:6px;max-height:calc(100% - 64px);overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.bk-pop .lbl{margin:0}.bk-pop>button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:var(--rk);background:var(--bg);color:var(--ink);font:500 .95rem var(--body);text-align:left;cursor:pointer}
.bk-pop>button[aria-pressed=true]{border-color:#e0b04a;box-shadow:inset 4px 0 0 #e0b04a}.bk-pop small{color:var(--mute);margin-left:auto}
.bk-pop .seg{display:flex}.bk-pop .seg button{flex:1;min-height:44px}.bk-pop .check{min-height:44px}.bk-sheet .tn-h b{font:700 1.15rem var(--display);}.bk-sheet .tn-h .sp{flex:1}
.bk-x0,.bk-ok{min-width:52px;height:52px;border-radius:var(--rk);font:700 1.35rem var(--body);cursor:pointer}
.bk-x0{border:1px solid var(--line);background:var(--bg);color:var(--mute)}.bk-ok{border:0;background:var(--good);color:#fff;margin-left:6px}
.bk-thru{align-self:flex-end;min-height:3rem;display:flex;align-items:center;gap:8px}.bk-thru input{width:26px;height:26px}
.bk-endrow{align-items:flex-end}.bk-endrow .seg button{min-height:3rem}#bk-tarow{flex:0 1 110px}
body.bk-on .fab,body.bk-on .addbar{display:none!important}
body.glove .bk-tools button{min-height:66px}
.ftag.warn{border-color:var(--warn);color:var(--warn);font-weight:600}
.fab-w{display:block;margin-top:5px;font:600 .7rem/1 var(--body);letter-spacing:0;text-transform:none;color:#ffe2a0}
@media (prefers-reduced-motion:reduce){.isb.pulse,.is-sheet:not([hidden]){animation:none}.is-hl{transition:none}}
/* More page footer: share, install, privacy, feedback, version, disclaimer */
.appfoot{display:flex;flex-direction:column;gap:8px;padding:14px 2px 4px;margin-top:4px;border-top:1px solid var(--line)}
.af-act{display:flex;flex-wrap:wrap;gap:10px}
.af-act .btn{min-height:48px;flex:1 1 150px}
.af-links{margin:0;font-size:.9rem;color:var(--mute)}
.af-links a{color:var(--blue);display:inline-block;padding:10px 2px}
.disc{margin:0;font-size:.78rem;color:var(--mute)}

/* ---------- account: sign-in sheet (#ac) and the Parts-tab row (#acct). Glove-size targets throughout */
.acct{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.acct[hidden],.acct [hidden],.ac-v[hidden]{display:none!important}
.acct-who{margin:0;overflow-wrap:anywhere}
.acct-plan{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.acct-plan[hidden]{display:none!important}.acct-plan p{margin:0 0 8px}
/* upgrade sheet (PAYMENTS-PLAN.md): above the export sheet */
.up-bg{z-index:30}.xsheet.up{z-index:31;max-height:92vh;overflow:auto}
.up-line{margin:0 0 12px;color:var(--mute)}
.up-not{display:block;width:100%;background:none;border:0;padding:12px;color:var(--mute);font:inherit;cursor:pointer;min-height:48px}
.acct-sync{background:none;border:0;padding:0;min-height:3rem;text-align:left;font:inherit;color:var(--mute);cursor:pointer}
.acct-sync.bad{color:var(--bad);font-weight:600}
.acct-sync.off{color:var(--ink);font-weight:600}
.ac-v{display:flex;flex-direction:column;gap:12px}
.ac-v .f{flex:none}
.ac-big{min-height:3.4rem;width:100%;font-size:1.08rem}
.acct .row .ac-big,.ac-v .row .ac-big{flex:1 1 140px;width:auto}
.about-priv{display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
.btn.ghost.ac-danger{color:var(--bad);border-color:var(--bad)}
.btn.ac-red{background:var(--bad);color:#fff}
.ac-confirm{border:1px solid var(--bad);border-radius:var(--rc);padding:12px;display:flex;flex-direction:column;gap:10px}
.ac-confirm p{margin:0}
.ac-lnk{background:none;border:0;color:var(--blue);font:600 1rem var(--body);min-height:3rem;cursor:pointer;text-decoration:underline;align-self:center;padding:0 1rem}
.ac-msg{margin:0;color:var(--bad);font-weight:600}
.ac-msg:empty{display:none}
.ac-msg.ok{color:var(--good)}
.ac-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ac-otp input{min-height:3.8rem;font-size:1.7rem;text-align:center;padding:0}
.ac-pwrow{display:flex;gap:8px}
.ac-pwrow input{flex:1}
.ac-eye{min-width:3.4rem;min-height:3rem;padding:0;font-size:1.2rem}
body.glove .ac-big{min-height:4rem;font-size:1.2rem}
body.glove .ac-otp input{min-height:4.4rem}
body.glove .bk-mv button{min-width:58px}
.bk-hf{display:flex;flex-direction:column;gap:10px}#bk-tend{align-self:flex-start}#bk-tend button{min-height:3rem}
/* examples (Parts → + New, empty Parts list, the example sheet) */
.xm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xm-h{grid-column:1/-1;margin:10px 0 0;font:700 .8rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.xm-h:first-child{margin-top:0}
.xm-card{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--rc);padding:0;overflow:hidden;color:var(--ink);cursor:pointer;font:inherit;display:flex;flex-direction:column}
.xm-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#3a4552}
.xm-card b{display:block;font:700 1rem var(--display);padding:6px 10px 0}
.xm-card span{display:block;font-size:.76rem;color:var(--mute);padding:0 10px 10px}
.xm-card:hover{border-color:var(--acc)}.xm-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.xm-img{width:100%;max-height:42vh;object-fit:contain;border-radius:var(--rc);background:#3a4552}
.xm-tags{display:flex;flex-wrap:wrap;gap:6px}
.xm-tags span{font:600 .78rem var(--display);padding:4px 10px;border-radius:var(--rc);background:var(--bg);border:1px solid var(--line)}
.xm-go{min-height:52px}
/* drawing sheet settings (Drawing view: Sheet) and the sheet switch (drawing / process sheet) */
.dft-pop{position:absolute;left:8px;top:90px;z-index:5;width:min(300px,calc(100% - 16px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--rc);padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px}
.dft-pop[hidden]{display:none!important}
.dft-pop .lbl{margin:2px 0 0}
.dft-pop .seg{display:flex}.dft-pop .seg button{flex:1;min-height:44px;font-size:.82rem}
.vchips.sh-sw{top:48px;bottom:auto;left:8px}
.vchips.sh-sw[hidden]{display:none!important}
body.fsv .vchips.sh-sw{top:auto;left:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px))}   /* full screen: just above the bottom bar, clear of the view chips */
.sh-sw button[hidden]{display:none!important}
.up-terms{margin:4px 0 0;text-align:center;color:var(--mute);font-size:.85rem}

/* ================= Polish pass (8 Oct, Sherwin approved the mockup): one face, two corner sizes (--rc cards, --rk
   controls), three button kinds (blue = the one main action, grey = the rest, plain icon buttons), line icons, segmented
   controls that fit the width, lists like phone lists, messages from the bottom. Glove mode keeps its bigger sizes. */
:root{--s1:var(--panel);--s2:var(--panel2);--acc-soft:var(--blue-soft);--violet:#6b4fc4}
.btn{font:600 .95rem/1 var(--body)}
.btn.ghost{background:var(--s2);color:var(--ink);border:0}
.btn.ghost.ac-danger{background:var(--s2);color:var(--bad);border:0}
/* segmented controls: one track, the picked one raised */
.seg,.modes,.bk-proc{display:flex;background:var(--s2);border:0;border-radius:var(--rk);padding:3px;gap:2px;overflow:hidden}
.seg button,.modes button,.bk-proc button{flex:1 1 0;min-width:0;font:500 .85rem/1.1 var(--body);border:0;border-radius:8px;background:transparent;color:var(--mute);padding:.55rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.seg button[aria-pressed="true"],.modes button[aria-pressed="true"],.bk-proc button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.seg.sub{align-self:stretch}
header.top .seg{flex:none}
header.top .seg button{flex:none;padding:.35rem .55rem;font-size:.8rem}
/* header icon buttons */
.jlb{border:0;background:transparent;color:var(--ink);width:40px;min-width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:var(--rk)}
.jlb .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jlb[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue)}
.addbar .jlb{background:var(--s2)}
/* Make: modes and the part's name + Export on top */
.mktop{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:900px){.mktop{grid-column:1/-1}}
.phead{background:transparent;border:0}
.ph-top{display:flex;align-items:center;gap:10px}
.ph-sum{flex:1;min-width:0;padding:4px 2px}
.ph-sum b{font-size:1.12rem}
.fab{position:static;flex:none;box-shadow:none;border-radius:var(--rk);padding:0 18px;height:44px;font:600 .95rem/1 var(--body);display:inline-flex;align-items:center;gap:6px}
.fab[hidden]{display:none}
body.glove .fab{height:56px;padding:0 22px}
/* the view: segmented view switch, round icon buttons, numbers in one strip */
.vchips{background:rgba(17,20,23,.72);border-radius:var(--rk);padding:3px;gap:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vchips button{border-radius:8px;background:transparent;padding:.4rem .7rem;color:#c9d1d9}
.vchips button[aria-pressed="true"]{background:#3a424b;color:#fff}
.fitb,.fsb{border-radius:var(--rk);border:0;background:rgba(17,20,23,.72)}
.fsb{width:34px;height:34px}
.tiles{gap:0;background:rgba(17,20,23,.78);border-radius:var(--rk);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.tile{background:transparent;border-radius:0;padding:6px 10px}
.tile+.tile{border-left:1px solid rgba(255,255,255,.12)}
.tile span{font:500 .68rem var(--body);letter-spacing:0;text-transform:none;color:#a9b3bd}
.tile b{font:600 1rem/1.2 var(--body)}
/* From stock tools: a grid of equal tiles, no outlines */
.bk-vchips button{border:0;background:var(--s2);color:var(--ink);border-radius:var(--rk)}
.bk-vchips button.on{background:var(--blue-soft);color:var(--blue);border:0}
.bk-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;overflow:visible}
.bk-tools button{border:0;background:var(--s2);border-radius:var(--rk);font:500 1.15rem var(--body)}
.bk-tools button b{font:500 .74rem var(--body);letter-spacing:0;text-transform:none}
.bk-tools button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
/* messages come up from the bottom, in the app's colours */
.toast{left:12px;right:12px;transform:none;max-width:560px;margin:0 auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));background:var(--panel2);color:var(--ink);border:1px solid var(--line);font:500 .9rem/1.35 var(--body);padding:.75rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,.28)}
/* part thumbnails in the app's colours */
.thumb{background:var(--s2)}
.thumb path{stroke:var(--ink);opacity:.85}
/* segment labels never cut: each takes its own width, the track shares out the rest */
.seg button,.modes button,.bk-proc button{flex:1 0 auto;overflow:visible;text-overflow:clip}
.bk-kind{align-self:stretch}
/* rows (process sheet, sketch rows, Turned steps): grey cards, quiet numbers, small plain tags */
.srow{background:var(--s1);border:0;border-radius:var(--rk)}
.srow .no{font:600 .8rem var(--body);color:var(--mute)}
.srow .sz{font:500 .95rem var(--body)}
.bk-op .no{font-size:.8rem;min-width:2.8rem}
.bk-tag{font:600 .66rem/1 var(--body);letter-spacing:.03em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:var(--s2);color:var(--mute)}
.bk-tag.bk-drill{background:var(--s2);color:var(--blue)}.bk-tag.bk-turn{background:var(--s2);color:var(--violet)}.bk-tag.bk-mill{background:var(--s2);color:var(--good)}
.bk-mv button{border:0;background:var(--s2)}
.panel .srow{background:var(--s2)}
/* My parts: one grouped list per day group, ⋯ opens Copy / Delete for that row */
.lib{gap:6px}
.lib-h{font:600 .74rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:10px 4px 2px}
.lib-g{background:var(--s1);border-radius:var(--rc);overflow:hidden}
.lib-g .card{background:transparent;border:0;border-radius:0;padding:10px 8px 10px 12px}
.lib-g .card+.card{border-top:1px solid var(--line)}
.lib-g .card.cur{box-shadow:inset 3px 0 0 var(--acc)}
.lib-g .card .thumb{width:52px;height:52px}
.lib-g .card .more{flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--mute);border-radius:var(--rk);display:grid;place-items:center;cursor:pointer}
.lib-g .card .more svg{width:22px;height:22px;fill:currentColor}
.lib-g .card .more[aria-expanded="true"]{background:var(--s2);color:var(--ink)}
.lib-g .card .acts{display:none;flex-direction:row;gap:6px}
.lib-g .card.menu .acts{display:flex}
.lib-g .card .acts button{border:0;background:var(--s2);color:var(--ink);font:600 .85rem var(--body);min-height:40px;padding:0 12px}
.lib-g .card .acts button.danger{background:var(--bad);color:#fff;border:0}
/* Find: cards without side rails, chips as grey controls, the add bar on a hairline */
.addbar{border-top:1px solid var(--line)}
.chips button{border:0;background:var(--s2)}
.chips button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue)}
details.sec{border:0;background:var(--s1)}
.bdec{background:var(--s2);border:0;border-radius:var(--rc)}
.bdec .eq button{border:0;background:var(--panel);font-family:var(--body)}
.bdec td{border-top-color:var(--line)}
/* the tools stay one row that scrolls sideways (the stage above the editor stays short) */
.bk-tools{display:flex;overflow-x:auto}
.bk-tools button{flex:0 0 72px}
.editor{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* the last control sits just above the tab bar */
/* export sheet: grey cards, a quiet close button */
.ex button{background:var(--s2);border:0}
.ex button b{font:600 1rem var(--body)}
.ex button:not(:disabled):hover{border:0;box-shadow:inset 0 0 0 1.5px var(--acc)}
.pg-h .x{border:0;background:var(--s2);border-radius:var(--rk)}
/* units: one button that opens the three choices (8 Oct) */
header.top{position:sticky}
.u-btn{display:flex;align-items:center;gap:3px;height:36px;padding:0 10px;border:0;border-radius:var(--rk);background:var(--s2);color:var(--ink);font:600 .85rem var(--body);cursor:pointer}
.u-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.u-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--acc)}
.u-menu{position:absolute;right:0;top:48px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);box-shadow:0 10px 26px rgba(0,0,0,.2);padding:5px;display:grid;min-width:180px}
.u-menu button{display:flex;justify-content:space-between;gap:12px;border:0;background:transparent;color:var(--ink);font:500 .95rem var(--body);padding:12px;border-radius:8px;cursor:pointer;text-align:left}
.u-menu button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue);font-weight:600}
body.glove .u-btn{height:48px;padding:0 14px}
body.glove .u-menu button{padding:16px}

/* ================= Home, the side panel, Tutorials (8 Oct) ================= */
.nav-btn{order:-1}
.nav-av{width:36px;height:36px;border-radius:50%;border:0;background:var(--s2);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;overflow:hidden;flex:none}
.nav-av .ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-av img{width:100%;height:100%;object-fit:cover}
.nav-av b{font:600 .9rem var(--body)}
.soon{flex:none;font:600 .64rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:#fbf0d9;color:#8a5a00;white-space:nowrap}
/* Home */
.hm-hi{font:600 1.35rem/1.25 var(--body);margin:6px 2px 2px;text-wrap:balance}
.hm-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hm-t{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:var(--s1);border:0;border-radius:var(--rc);padding:12px;color:var(--ink);cursor:pointer;min-height:68px;font:inherit}
.hm-t i{grid-row:1/3;width:40px;height:40px;border-radius:var(--rk);background:var(--s2);display:grid;place-items:center}
.hm-t .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-t b{font:600 .95rem/1.2 var(--body)}
.hm-t span{font-size:.75rem;color:var(--mute);line-height:1.25}
.hm-t.big{grid-column:1/-1;background:var(--acc);color:var(--on-acc)}
.hm-t.big i{background:rgba(255,255,255,.18)}
.hm-t.big span{color:rgba(255,255,255,.82)}
.hm-t:focus-visible,.np-i:focus-visible,.hm-p:focus-visible,.hm-tut:focus-visible,.nav-av:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (min-width:600px){.hm-tiles{grid-template-columns:repeat(4,1fr)}.hm-t{grid-template-columns:1fr;grid-template-rows:auto;row-gap:6px;align-content:start}.hm-t i{grid-row:auto}.hm-t.big{grid-column:span 2}}
.hm-p{width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.hm-pt{flex:1;min-width:0;display:flex;flex-direction:column}
.hm-pt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-pt span{font-size:.78rem;color:var(--mute)}
.hm-p .chev{color:var(--mute);font-size:1.2rem;padding-right:6px}
.hm-tut{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--s1);border:0;border-radius:var(--rc);padding:14px;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.hm-tut b{display:block;font-weight:600}.hm-tut span span{font-size:.78rem;color:var(--mute)}
.tut-list{display:grid;gap:8px}
.tut{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--s1);border-radius:var(--rc);padding:14px}
.tut b{font-weight:600}
/* the panel */
.np{position:fixed;left:0;top:0;bottom:0;z-index:25;width:min(300px,86vw);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:calc(12px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px));overflow-y:auto;box-shadow:8px 0 28px rgba(0,0,0,.22)}
.np[hidden]{display:none!important}
.np-brand{font:700 1.3rem/1 var(--mark);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px 10px}
.np-acct{border:1px solid var(--line);border-radius:var(--rc);padding:10px;display:grid;gap:8px;margin-bottom:6px}
.np-acct .btn{width:100%;padding:.6rem}
.np-who{display:flex;align-items:center;gap:10px;min-width:0}
.np-who img,.np-ini{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.np-ini{display:grid;place-items:center;background:#5b4636;color:#fff;font:600 1rem var(--body)}
.np-who span{min-width:0;display:flex;flex-direction:column}
.np-who b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-who small{font-size:.76rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-plan{margin:0;font-size:.8rem;color:var(--mute)}
.np-i{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--rk);background:transparent;color:var(--ink);font:500 .92rem var(--body);text-align:left;cursor:pointer}
.np-i .ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.np-i.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.np-i:hover:not(.on){background:var(--s2)}
.np-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-n{margin-left:auto;font-size:.76rem;color:var(--mute);max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-i .soon{margin-left:auto}
.np-sub{margin-left:20px;padding-left:8px;border-left:1px solid var(--line);display:grid}
.np-sub .np-i{min-height:40px;font-size:.86rem}
.np-add{color:var(--blue)}
.np-hr{height:1px;background:var(--line);margin:6px 4px}
.np-foot{margin:auto 0 0;padding:12px 10px 0;font-size:.76rem;color:var(--mute)}
.np-foot a{color:var(--mute)}
body.glove .np-i{min-height:56px;font-size:1.02rem}
/* parts page: a project's name in the title, "All parts" back */
#lib-all{margin-left:auto}
/* wide screens (1024 px up): the panel is part of the page, the tab bar goes, the pages get the room */
@media (min-width:1024px){
  .np{z-index:5;box-shadow:none;width:260px}
  body{padding-left:260px}
  .nav-btn,.bnav,header.top h1{display:none!important}
  header.top{justify-content:flex-end}
  .editor{padding-bottom:32px}
  .addbar{left:260px;bottom:0}
  .toast{left:272px;bottom:20px}
  .page{max-width:1100px}
  #p-find,#p-more,#p-parts,#p-tut{max-width:820px}
}
/* narrow phones (≤ 400 px): the header keeps ☰, the name, glove, order list, units and the account button on one line */
@media (max-width:400px){header.top{gap:2px}header.top h1{font-size:1.1rem}.jlb{width:36px;min-width:36px}.u-btn{padding:0 7px}.nav-av{width:34px;height:34px}}
@media (max-width:350px){header.top h1{font-size:.95rem}}
/* the Order list tab (opens the parts list sheet), its count on the icon */
.bnav .bn-list{position:relative}
.bnav .bn-list #jl-n{position:absolute;top:4px;left:calc(50% + 6px);background:var(--acc);color:var(--on-acc);font:700 .66rem/1 var(--body);border-radius:99px;min-width:1.15rem;height:1.15rem;display:flex;align-items:center;justify-content:center;padding:0 4px}
.bnav .bn-list #jl-n[hidden]{display:none}
.bnav .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.hm-q{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:48px}
.hm-q .ico{width:18px;height:18px;flex:none;stroke:var(--mute);fill:none;stroke-width:1.8;stroke-linecap:round}
.hm-q input{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--body);padding:12px 0;color:var(--ink)}
.hm-q input:focus{outline:none}.hm-q:focus-within{border-color:var(--acc);box-shadow:0 0 0 2px var(--blue-soft)}
.hm-qm{margin:-4px 6px 0}
body.glove .hm-q{min-height:60px}
.pj-bar{background:var(--s1);border-radius:var(--rc);padding:12px;display:grid;gap:10px}
.pj-bar .btn{width:100%}
/* the one plain sentence on Home that says what Benchsmith is (also what search engines quote, 9 Oct) */
.hm-say{margin:-2px 2px 2px;font-size:.84rem;line-height:1.45;color:var(--mute);max-width:62ch}
.hm-say b{color:var(--ink);font-weight:600}
.np-foot{line-height:1.8}

/* ================= Find: the bearing drawn (10 Oct) ================= */
:root{--seal:#c2493b;--note:#6b4fc4;--note-soft:#f1ecfb;--note-ink:#3d2a6b;--hl:var(--blue)}
.bhero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px;align-items:center;background:var(--s1);border:0;border-radius:var(--rc);padding:10px}
.bhero[hidden]{display:none}
.bhero .bh-sec svg{max-height:240px}
.bhero .bcap{text-align:center;padding-top:2px}
.bhero .bcap b{font:600 1rem var(--body)}
.bh-face svg{width:100%;height:auto;display:block;max-height:220px}
.f-ring{fill:var(--s2);stroke:var(--ink);stroke-width:.7}
.f-gap{fill:var(--bg);stroke:var(--ink);stroke-width:.5}
.f-ball{fill:var(--blue-soft);stroke:var(--blue);stroke-width:.6}
.f-bore{fill:var(--bg);stroke:var(--ink);stroke-width:.8}
.f-seal{fill:none}.f-seal.rub{stroke:var(--seal)}.f-seal.met{stroke:#9aa7b4}
.bhero .bh-sec .dt{font:600 12.5px var(--body)}
.bh-face .dt{fill:var(--mute);font:500 9px var(--body)}
/* tap a row of the number: its part of the drawing lights up */
.bhero g[class^="bd-"] .dm,.bhero g[class^="bd-"] .ah{transition:stroke .15s,fill .15s}
.bhero[data-hl="bore"] .bd-bore .dm,.bhero[data-hl="series"] .bd-od .dm,.bhero[data-hl="series"] .bd-w .dm,.bhero[data-hl="width"] .bd-w .dm{stroke:var(--hl);stroke-width:1.3}
.bhero[data-hl="bore"] .bd-bore .ah,.bhero[data-hl="series"] .bd-od .ah,.bhero[data-hl="series"] .bd-w .ah,.bhero[data-hl="width"] .bd-w .ah{fill:var(--hl)}
.bhero[data-hl="bore"] .bd-bore .dt,.bhero[data-hl="series"] .bd-od .dt,.bhero[data-hl="series"] .bd-w .dt,.bhero[data-hl="width"] .bd-w .dt{fill:var(--hl);font-weight:700}
.bhero[data-hl="bore"] .f-bore{stroke:var(--hl);stroke-width:2}
.bhero[data-hl="series"] .f-ring:first-child{stroke:var(--hl);stroke-width:2}
.bhero[data-hl="seal"] .f-seal{filter:drop-shadow(0 0 3px var(--hl))}.bhero[data-hl="seal"] .f-seal.met{stroke:var(--hl)}
.bdec tr[data-hl]{cursor:pointer}
.bdec tr[data-hl]:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.bdec tr.on td{background:var(--blue-soft)}
.bdec tr.on td:first-child{border-radius:8px 0 0 8px}.bdec tr.on td:last-child{border-radius:0 8px 8px 0}
/* bench notes: the rule behind the answer, two lines; one switch in the side panel hides them */
.bnotes{display:grid;gap:8px}.bnotes:empty{display:none}
.bnote{background:var(--note-soft);color:var(--note-ink);border-radius:var(--rc);padding:10px 12px;font-size:.86rem;line-height:1.45}
.bnote b{font-weight:700}
.bnote-h{display:flex;align-items:center;gap:6px;font:700 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--note);margin-bottom:6px}
.bnote-h svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
body.notes-off .bnote,body.notes-off .bnotes{display:none!important}
/* same bore, other sizes, to scale */
.bladder{background:var(--s1);border-radius:var(--rk);padding:6px 4px;margin:0 0 6px}
.bladder svg{width:100%;height:auto;display:block;max-height:130px}
.l-ring{fill:var(--s2);stroke:var(--mute);stroke-width:.8}.l-on{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.4}
.l-n{font:700 8.5px var(--body);fill:var(--mute)}.l-n.on{fill:var(--ink)}
.bladder .dt{fill:var(--mute);font:500 8px var(--body)}

/* ================= PCD as a DRO (10 Oct): a readout is a dark display in any theme, so its colours are its own ================= */
.dro{background:linear-gradient(#0e1411,#070a08);border:1px solid #1d2a22;border-radius:var(--rc);padding:10px;display:grid;gap:8px;box-shadow:inset 0 0 0 1px rgba(125,255,154,.05),0 6px 20px rgba(0,0,0,.25)}
.dro[hidden]{display:none}
.dro-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dro-tog{display:flex;background:#0f1712;border:1px solid #1c2b21;border-radius:8px;padding:2px}
.dro-tog button{font:700 .74rem/1 var(--body);letter-spacing:.06em;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:#5f8f6b;cursor:pointer;min-height:36px}
.dro-tog button[aria-pressed="true"]{background:#1d3a26;color:#7dff9a}
.dro-hole{margin-left:auto;font:700 .8rem var(--body);letter-spacing:.04em;color:#9ad8a9}
.dro-ax{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;background:#0a0f0c;border:1px solid #17251c;border-radius:9px;padding:6px 10px}
.dro-ax .l{font:700 1.3rem var(--mark);color:#9ad8a9}
.dro-ax .v{font:400 2.15rem/1.05 "Share Tech Mono",ui-monospace,Menlo,monospace;color:#7dff9a;text-align:right;letter-spacing:.05em;text-shadow:0 0 10px rgba(125,255,154,.4);white-space:nowrap;overflow:hidden}
.dro-ax .u{font:600 .62rem var(--body);letter-spacing:.06em;color:#5f8f6b;min-width:2.6em}
.dro-ax.sm{opacity:.8}.dro-ax.sm .v{font-size:1.45rem}
.dro-from{margin:0;font-size:.78rem;color:#9ad8a9;opacity:.85}
.dro-step{display:grid;grid-template-columns:60px 1fr 60px;gap:8px}
.dro-step button{min-height:56px;border:0;border-radius:var(--rk);background:var(--s2);color:var(--ink);font:700 1.3rem var(--body);cursor:pointer}
.dro-step button.go{background:#2fb06a;color:#05230f;font-size:1.05rem}
.dro-step button:disabled{opacity:.35;cursor:default}
.dro-step button:focus-visible,.dro-tog button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
body.glove .dro-step button{min-height:72px}body.glove .dro-ax .v{font-size:2.5rem}
.pcdsvg{max-width:300px}
.pcdsvg circle.h{cursor:pointer}
.pcdsvg circle.h.done{fill:#1f4a2f;stroke:#4fd08a}
.pcdsvg circle.h.now{fill:#2fb06a;stroke:#0d5a2e;stroke-width:2}
.pcdsvg text.now{font-weight:700}
.pcdsvg line.mv{stroke:#2fb06a;stroke-width:1.6;stroke-dasharray:4 3}
#ptab tr.on td{background:var(--blue-soft);font-weight:600}
#p-pcd .bnotes{margin-top:2px}
/* thread: the best match as a close-up of its form (10 Oct) */
.thero{background:var(--s1);border:0;border-radius:var(--rc);padding:8px 10px}
.thero[hidden]{display:none}
.thero .tm{fill:var(--s2);stroke:var(--ink);stroke-width:1}
.thero .tl{stroke-width:1;stroke-dasharray:4 3}
.thero .tl.mj{stroke:var(--blue)}.thero .tl.mn{stroke:var(--mute)}.thero .tl.me{stroke:var(--good);stroke-width:1.4;stroke-dasharray:none}
.thero .tt{font:600 10.5px var(--body);fill:var(--ink)}
.thero .tt.mj{fill:var(--blue)}.thero .tt.mn{fill:var(--mute)}.thero .tt.me{fill:var(--good)}
.thero .tp{stroke:var(--ink);stroke-width:.9}
.thero .bcap{text-align:center;font-size:.84rem;color:var(--mute)}.thero .bcap b{color:var(--ink);font:600 .98rem var(--body)}

/* dividing head (10 Oct): the answer big, the plate drawn */
.dv-big:empty{display:none}
.dv-big{display:flex;flex-direction:column;gap:2px;padding:4px 2px}
.dv-big b{font:700 1.7rem/1.1 var(--body);color:var(--ink)}
.dv-big span{font-size:.85rem;color:var(--mute)}
.dhero{background:var(--s1);border:0;border-radius:var(--rc);padding:8px}
.dhero[hidden]{display:none}
.dhero svg{max-height:300px}
.dp-plate{fill:var(--s2);stroke:var(--mute);stroke-width:1}
.dp-hub{fill:var(--bg);stroke:var(--mute)}
.dp-other{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:1 4}
.dp-sector{fill:rgba(217,164,65,.16);stroke:none}
.dp-h{fill:var(--bg);stroke:var(--mute);stroke-width:.5}
.dp-h.in{fill:#a9873f;stroke:#a9873f}
.dp-h.pin,.dp-h.end{fill:#d9a441;stroke:#7a5a17;stroke-width:.8}
.dp-arm{stroke:#d9a441;stroke-width:2.4;stroke-linecap:round}
.dp-crank{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round}
.dp-knob{fill:var(--ink)}
.dp-t{font:700 12px var(--body);fill:#e6b75a}
.dp-c{font:600 10px var(--body);fill:var(--mute)}
.dv-opt{width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--panel);cursor:pointer}
.dv-opt.on{box-shadow:inset 0 0 0 2px var(--blue)}

/* circlip, seal, O-ring (10 Oct): same panels as the other drawings */
#cl-pic,#os-pic,#or-pic{background:var(--s1);border:0;border-radius:var(--rc)}
#p-clip .bnotes,#p-seal .bnotes,#p-or .bnotes{margin-top:4px}

/* ---------- Make screen (11 Oct, make/make-screen.js): one question, a big button per way of making a part, the rest
   under "More ways", the last parts; "← Make" in the editor instead of the mode strip */
#p-mk.picking>:not(#mk-pick){display:none!important}
#p-mk:not(.picking)>#mk-pick{display:none}
#mk-pick{grid-column:1/-1;width:100%;max-width:640px}
#mk-pick .hm-hi{margin:4px 0 14px}
.mk-big{display:grid;gap:10px}
.mk-big .hm-t,#mk-sh-list .hm-t{width:100%;grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:2px;min-height:78px;padding:14px;cursor:pointer;color:var(--ink);font:inherit}
.mk-big .hm-t i,#mk-sh-list .hm-t i{grid-row:1/3;width:48px;height:48px}
.mk-big .hm-t .ico{width:28px;height:28px}
.mk-big .hm-t b{font-size:1.1rem}
.mk-big .hm-t span,#mk-sh-list .hm-t span{font-size:.85rem}
.mk-more{display:block;margin:10px 0 6px;background:none;border:0;color:var(--acc);font:600 1rem/1.2 var(--body);padding:14px 4px;min-height:48px;cursor:pointer}
.mk-back{background:none;border:0;color:var(--acc);font:600 1rem/1.2 var(--body);padding:8px 4px;min-height:44px;cursor:pointer;align-self:flex-start}
.mk-sheet{position:fixed;inset:0;z-index:70}
.mk-sh-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.mk-sh{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--bg);border-radius:var(--rc) var(--rc) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px}
.mk-sh h3{margin:0 0 2px;font:600 1.05rem/1.3 var(--body)}
#mk-sh-list{display:grid;gap:10px}

/* ---------- Lists (11 Oct, jobs.js): Today pinned, named lists, one list; the naming sheet and the list picker */
.jl-card{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--rc);padding:12px 14px;margin-bottom:8px;min-height:56px;cursor:pointer;font:inherit}
.jl-card>span:first-child{min-width:0}
.jl-card b{display:block;font:600 1rem/1.25 var(--body);overflow-wrap:anywhere}
.jl-card span span{display:block;font-size:.8rem;color:var(--mute);margin-top:2px}
.jl-card.today{border-color:var(--acc)}
.jl-card .chev{color:var(--mute);font-size:1.2rem}
.jl-newc b{color:var(--acc)}
.jl-newb{width:100%;min-height:48px;margin-top:4px}
#jl-one .pg-h{justify-content:space-between}
#jl-ed{margin:4px 0 8px}
.jrow button.l{background:none;border:0;padding:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;min-height:40px}
.jrow button.l:disabled{cursor:default}
.jrow button.l:not(:disabled) b{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.jrow.jnote input{flex:1;min-width:0}
.jl-more{gap:8px;margin:10px 0}
.jl-more .btn{flex:1 1 140px;min-height:44px}
.jl-sheet{z-index:80}
.jl-sheet .row{gap:8px;margin-top:10px}
.jl-sheet .row .btn{flex:1;min-height:48px}
#jpk-list{display:grid;gap:0;max-height:55vh;overflow:auto}
.ab-split{display:flex}
.ab-split #ab-add{border-radius:var(--rk) 0 0 var(--rk)}
.addbar .btn.ab-to{border-radius:0 var(--rk) var(--rk) 0;border-left:1px solid rgba(255,255,255,.35);padding:.65rem .7rem;min-width:44px}

/* ---------- the upgrade sheet (11 Oct pricing): one card, Founder / yearly / monthly, the first one is the main button */
.up-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--rc);padding:14px;margin:0 0 10px;display:grid;gap:8px}
.up-body{margin:0 0 4px;font:600 1.02rem/1.35 var(--body);color:var(--ink)}
.up-buy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:56px;border-radius:var(--rk);border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;padding:8px 12px}
.up-buy b{font:700 1.05rem/1.2 var(--body)}
.up-buy span{font-size:.82rem;color:var(--mute)}
.up-buy.main{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.up-buy.main span{color:inherit;opacity:.85}
.up-fcopy{margin:-2px 2px 4px;font-size:.82rem;color:var(--mute);line-height:1.35}
.up-buy:disabled{opacity:.6;cursor:default}.up-buy.busy{opacity:1}.up-buy.busy b::after{content:' …'}
.up-lock{margin:4px 2px 0;font-size:.82rem;color:var(--mute);text-align:center}
.np-pro{color:var(--acc);font-weight:700}
.up-buy.unknown span{font-style:italic}

/* ---------- plan badges (11 Oct): PRO (accent blue), FOUNDER (gold, crown); the avatar's ring. Gold in two shades so the
   ring and crown keep 3:1 against the page and the pill text 7:1 against its gold, on both themes */
:root{--gold:#9a7200;--gold-bg:#f6d36a;--gold-ink:#3b2a00}
.pbadge{display:inline-flex;align-items:center;gap:3px;font:700 .64rem/1 var(--body);letter-spacing:.06em;padding:3px 6px;border-radius:99px;margin-left:6px;vertical-align:middle;flex:none;white-space:nowrap}
.pbadge.pro{background:var(--acc);color:var(--on-acc)}
.pbadge.founder{background:var(--gold-bg);color:var(--gold-ink)}
.pbadge .crown{width:12px;height:12px;fill:currentColor}
.np-nm{display:flex;align-items:center;min-width:0}
.np-nm b{min-width:0}
.nav-av{position:relative;overflow:visible}
#nav-avl{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.nav-av.ring-pro{box-shadow:0 0 0 2px var(--acc)}
.nav-av.ring-founder{box-shadow:0 0 0 2px var(--gold)}
.av-crown{position:absolute;top:-6px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--bg);display:grid;place-items:center;pointer-events:none}
.av-crown .crown{width:12px;height:12px;fill:var(--gold)}
.np-who .np-nm{flex-direction:row;align-items:center}
.np-who .pbadge{display:inline-flex;flex-direction:row}
/* ================= Benchsmith v2 (12 Oct; design-v2/HANDOFF.md, the mockups Sherwin approved) =================
   Dark glass on a deep blue-black page: tokens first, then the parts every screen is built from (glass card, input, buttons,
   segmented control, chips, step chips, toggle, the header, the floating tab bar). Loaded after styles.css, so these win.
   Work views stay plain and high-contrast (Sherwin's rule): the drawing sheet, the 3D view, the sketch pad and the photo
   keep solid backgrounds; glass goes on the chrome around them. v2 is dark only. */

/* ---------- tokens. The selector matches styles.css's old dark-mode blocks in weight, so v2 wins on every phone */
:root,:root:not([data-v1]){
  --text:#e8eef5; --text-2:#9fb0c4; --text-3:#a9b7c8; --label:#93a1b2; --link:#8fbcff;
  --blue:#6ea8ff; --blue-2:#2f6fe0; --gold:#f3c650; --x:#5cc8ff; --y:#ffb547;
  --ok:#7ee08f; --ok-t:#9be6a6; --warn:#f0c46a; --warn-bg:rgba(232,181,74,.16); --bad:#ff8f86;
  /* the names the older CSS uses, mapped onto v2 */
  --bg:#080d14; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08); --s1:var(--panel); --s2:var(--panel2);
  --ink:var(--text); --mute:var(--text-2); --line:rgba(255,255,255,.1);
  --blue-soft:rgba(110,168,255,.16); --acc:var(--blue-2); --acc-soft:var(--blue-soft); --on-acc:#ffffff; --good:var(--ok-t);
  --violet:#b9a2ff; --seal:#e0705f; --note:#c9a2ff; --note-soft:rgba(201,162,255,.09); --note-ink:#e5d6ff; --hl:var(--blue);
  --gold-bg:#f3c650; --gold-ink:#3a2704;
  /* type: Barlow Condensed for the wordmark, titles and big answers; Plex Sans for words; Plex Mono for numbers */
  --mark:"Barlow Condensed","Arial Narrow",sans-serif;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* surfaces */
  --glass:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --glass-bd:rgba(255,255,255,.09);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35);
  --field:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  --field-bd:rgba(255,255,255,.12);
  --field-sh:inset 0 1px 0 rgba(255,255,255,.08);
  --btn:linear-gradient(180deg,#7fb2ff 0%,#2f6fe0 60%,#1f55c4 100%);
  --btn-bd:rgba(180,210,255,.5);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px rgba(47,111,224,.45);
  --sheet:linear-gradient(180deg,rgba(24,35,52,.95) 0%,rgba(11,16,25,.97) 100%);
  --scrim:rgba(3,6,11,.58);
  --rc:22px; --rk:14px;
  --tabbar:calc(92px + env(safe-area-inset-bottom,0px));   /* room the floating tab bar takes at the bottom */
  color-scheme:dark;
}

/* ---------- the page: base colour, three soft glows, a faint blueprint grid behind the top */
html{background:#080d14}
body{background:transparent;color:var(--text);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-color:#080d14;
  background-image:radial-gradient(120% 55% at 50% -14%,#22406a 0%,rgba(34,64,106,0) 58%),
    radial-gradient(60% 40% at 110% 55%,rgba(232,181,74,.14) 0%,rgba(232,181,74,0) 70%),
    radial-gradient(70% 45% at -20% 90%,rgba(47,111,224,.22) 0%,rgba(47,111,224,0) 70%)}
body::after{content:"";position:absolute;left:0;right:0;top:0;height:640px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(140,170,210,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,210,.06) 1px,transparent 1px);
  background-size:22px 22px;-webkit-mask-image:radial-gradient(90% 50% at 50% 18%,#000 25%,transparent 80%);mask-image:radial-gradient(90% 50% at 50% 18%,#000 25%,transparent 80%)}
::selection{background:rgba(110,168,255,.35)}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hint{color:var(--text-2);font-size:13.5px;line-height:1.45}
.lbl{font:600 11px/1.25 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.big{font:700 34px/1 var(--display);color:var(--text)}
.pg-h h2,.pg-t{font:700 28px/1 var(--display);letter-spacing:.01em}
.wrap{gap:10px}
.page{gap:10px}

/* ---------- glass card */
.glass,.panel,details.sec,#mk-build,#mk-sketch,#mk-turn,.newpick,.pj-bar,.supform,.lib-g,.np-acct,.up-card,.sheet-ed{
  border-radius:var(--rc);border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh)}
.panel{padding:16px}
details.sec{padding:0 14px}
details.sec>summary{font:700 19px/1.1 var(--display);letter-spacing:.01em;color:var(--text)}
details.sec>summary::after{color:var(--label)}
#mk-build details.sec{box-shadow:none;border:0;background:none}

/* lists of words and numbers (the part's summary, the job card): sentences in Plex Sans, the label column muted */
.dims{font:500 14px/1.4 var(--body)}
.dims li span:first-child{white-space:nowrap}
/* result rows: the size line reads as words with lined-up numbers */
.res{border-radius:16px;border:1px solid var(--glass-bd);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.res .dims,.res .dev{font:500 14px/1.45 var(--body);font-variant-numeric:tabular-nums}
.res .dev{font-weight:600}
.okbox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--text-2)}
.okbox input{width:22px;height:22px;margin-top:0;flex:none}
/* list cards (Lists, the parts picker) are glass too */
.jl-card{background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--glass-sh);border-radius:18px}
.jl-card.today{border-color:rgba(140,185,255,.45);background:linear-gradient(180deg,rgba(110,168,255,.16),rgba(47,111,224,.06))}

/* ---------- inputs: 48 tall, glass, numbers in Plex Mono 600 */
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color])),select,textarea{
  color:#eef3f8;border:1px solid var(--field-bd);border-radius:14px;background:var(--field);box-shadow:var(--field-sh)}
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color])){min-height:48px;font:600 21px/1.2 var(--mono);padding:0 12px}
input.txt,.txt,input:where([type=email],[type=password],[type=search],[type=text]){font:500 16px/1.3 var(--body)}
input::placeholder,textarea::placeholder{color:#7f8ea1;opacity:1;font-weight:400}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:rgba(110,168,255,.55)}
select{min-height:48px;font:500 15px/1.2 var(--body);padding:0 34px 0 12px;-webkit-appearance:none;appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px,var(--field)}
select option{background:#101826;color:var(--text)}
textarea{padding:10px 12px}
input[type=checkbox],input[type=radio]{accent-color:var(--blue-2)}
input[type=range]{accent-color:var(--blue)}

/* ---------- buttons: blue glass for the one main action, plain glass for the rest */
.btn{min-height:50px;padding:0 18px;border-radius:15px;border:1px solid var(--btn-bd);background:var(--btn);box-shadow:var(--btn-sh);color:#fff;font:600 16px/1.15 var(--body)}
.btn.ghost,.btn.ghost.ac-danger{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none;color:#c9d3dd;font:600 15px/1.15 var(--body)}
.btn.ghost.ac-danger{color:var(--bad)}
.btn.ac-red{background:linear-gradient(180deg,#ff9a8c 0%,#d9473b 60%,#b0322a 100%);border-color:rgba(255,190,180,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(210,60,50,.35)}
.btn:disabled{opacity:.5}
.btn:not(:disabled):active{transform:translateY(1px)}
/* the header's square glass buttons, the close buttons on sheets */
.hbtn,.pg-h .x{width:44px;min-width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--text);display:grid;place-items:center;padding:0}

/* ---------- segmented control: one glass track, the picked one blue */
.seg,.modes,.bk-proc{display:flex;min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:3px;gap:3px;overflow:hidden}
.seg button,.modes button,.bk-proc button{flex:1 0 auto;min-width:0;border-radius:11px;border:1px solid transparent;background:transparent;color:#9aa8b8;font:600 14px/1.1 var(--body);padding:0 12px;white-space:nowrap;box-shadow:none}
.seg button[aria-pressed="true"],.modes button[aria-pressed="true"],.bk-proc button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn-bd);color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(47,111,224,.35)}
.seg.sm{min-height:30px;padding:2px;border-radius:10px}.seg.sm button{font-size:12px;border-radius:8px;padding:0 9px}
.seg button:disabled{opacity:.45}

/* ---------- chips: pick one or several (blocks, layers, filters, seal types) */
.chips{gap:8px}
.chips button,.chip-b{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#c9d3dd;font:600 14px/1.1 var(--body);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.chips button[aria-pressed="true"],.chip-b[aria-pressed="true"]{background:var(--btn);border-color:var(--btn-bd);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(47,111,224,.35)}
.chip{font:600 10.5px/1 var(--body);letter-spacing:.12em;background:rgba(110,168,255,.14);color:#9cc4ff;padding:4px 7px;border-radius:7px}

/* ---------- step chips (a process in steps: idle, now, done, skipped) */
.stc{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 8px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#9aa8b8;font:600 10.5px/1 var(--body);white-space:nowrap}
.stc::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.stc.on{background:var(--btn);border-color:var(--btn-bd);color:#fff}
.stc.on::before{opacity:1;animation:stc-dot .8s ease-in-out infinite alternate}
.stc.done{background:rgba(124,227,140,.14);border-color:rgba(124,227,140,.3);color:#9be6a6}
.stc.done::before{opacity:1}
.stc.skip{opacity:.4}
@keyframes stc-dot{to{opacity:.35}}

/* ---------- toggle switch: <button class="tgl" role="switch" aria-checked> */
.tgl{position:relative;width:50px;height:30px;flex:none;padding:0;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);transition:background .25s;cursor:pointer}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#ffffff,#d4dbe3);box-shadow:0 2px 5px rgba(0,0,0,.4);transition:left .32s cubic-bezier(.3,1.4,.5,1)}
.tgl[aria-checked="true"]{background:var(--btn);border-color:var(--btn-bd)}
.tgl[aria-checked="true"]::after{left:23px}

/* ---------- badges: FOUNDER (gold), PRO (blue), SOON, and the result badges */
.pbadge{height:21px;padding:0 8px;border-radius:7px;font:700 13px/1 var(--mark);letter-spacing:.12em;gap:4px}
.pbadge.founder{background:linear-gradient(180deg,#fbe7a6 0%,#e0b24e 55%,#a97a22 100%);color:#3a2704;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.35)}
.pbadge.founder .crown{display:none}
.pbadge.pro{background:var(--btn);color:#fff;border:1px solid var(--btn-bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.soon{font:700 10.5px/1 var(--body);letter-spacing:.12em;padding:4px 7px;border-radius:7px;background:rgba(243,198,80,.14);border:1px solid rgba(243,198,80,.3);color:#f3c97a}
.bdg{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bdg.ok{background:rgba(124,227,140,.14);color:var(--ok-t)}
.bdg.close{background:var(--warn-bg);color:var(--warn)}

/* ---------- sheets, menus, messages: glass over a dimmed page */
.xbg,.mk-sh-bg{background:var(--scrim)}
.xsheet,.mk-sh{background:var(--sheet);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.grab,.bk-grab::after{background:rgba(255,255,255,.22)}
.u-menu,.dft-pop,.bk-pop{background:var(--sheet);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.u-menu button{border-radius:11px;color:var(--text)}
.u-menu button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(110,168,255,.24),rgba(47,111,224,.13));color:#d6e6ff}
.toast{background:rgba(18,26,38,.92);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);bottom:calc(var(--tabbar) + 8px)}

/* the side panel: a glass drawer on a phone (Stage 2 gives it the v2 rows, icons and toggles) */
.np{width:min(318px,88vw);border-radius:0 28px 28px 0;border-right:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(24,35,52,.9) 0%,rgba(11,16,25,.94) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:20px 0 60px rgba(0,0,0,.6),inset -1px 0 0 rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.08)}
.np-brand{font:700 26px/1 var(--mark);letter-spacing:.1em}
@media (min-width:1024px){.np{width:260px;border-radius:0;box-shadow:none}}
/* the Make page's view sticks under the 56 px header */
.stage{top:56px}

/* ---------- header: menu · wordmark · glove · units · avatar */
header.top{height:56px;margin-inline:-16px;padding:0 14px 0 6px;gap:8px;background:transparent;transition:background-color .25s,box-shadow .25s}
header.top.scrolled{background:rgba(9,14,22,.78);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.25)}
header.top h1{font:700 23px/1 var(--mark);letter-spacing:.1em;text-transform:uppercase;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.nav-btn{width:44px;min-width:44px;height:44px;border:0;background:none;color:var(--text)}
.nav-btn .ico{width:24px;height:24px;stroke-width:1.8}
.nav-btn .dot{fill:var(--blue);stroke:none}
#glove .ic{width:28px;height:28px}
.hbtn>span[data-ic]{position:static;display:block;min-width:0;width:auto;height:auto;padding:0;background:none;border-radius:0}
#glove[aria-pressed="true"]{border-color:rgba(140,185,255,.5);background:linear-gradient(180deg,rgba(110,168,255,.28),rgba(47,111,224,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 14px rgba(110,168,255,.3)}
.u-btn{height:44px;padding:0 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--text);font:600 14px/1 var(--body)}
.u-btn[aria-expanded="true"]{border-color:rgba(140,185,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(110,168,255,.35)}
.u-menu{top:56px;right:14px}
.nav-av{width:38px;height:38px;margin-left:2px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:var(--field);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.nav-av .ico{width:20px;height:20px}
#nav-avl b{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:#2e8f97;color:#f2fbfb;font:600 17px/1 var(--body)}
.nav-av.ring-pro{border-color:transparent;box-shadow:0 0 0 2px var(--blue)}
.nav-av.ring-founder{border-color:transparent;box-shadow:0 0 0 2px rgba(243,198,80,.85)}
.av-crown{position:absolute;top:-9px;right:-9px;width:21px;height:21px;background:none;border-radius:0;display:block}
.av-crown .ic{width:21px;height:21px}
@media (max-width:374px){header.top{gap:6px;padding-right:10px}header.top h1{font-size:20px;letter-spacing:.08em}.u-btn{padding:0 10px}}
@media (max-width:340px){header.top{gap:4px}header.top h1{font-size:17px;letter-spacing:.05em}.hbtn,#glove{width:40px;min-width:40px;height:40px}.u-btn{height:40px;padding:0 8px}}

/* ---------- the floating glass tab bar: Home (vise) · Find (caliper) · Calc (index plate) · Lists (book) */
body{padding-bottom:var(--tabbar)}
.bnav{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:68px;padding:0;border-radius:24px;border:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);
  background:rgba(14,20,29,.82);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.5);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.bnav button{position:relative;height:60px;padding:0;gap:3px;justify-content:center;color:#7d8a99;font:500 11.5px/1.1 var(--body)}
.bnav .bn-ic{display:block;width:30px;height:30px;filter:grayscale(1) brightness(.95);opacity:.72;transition:filter .3s,opacity .3s}
.bnav .bn-ic .ic{width:30px;height:30px}
.bnav button:hover .bn-ic{filter:none;opacity:1}
.bnav button[aria-current="page"]{color:#9cc4ff;font-weight:600}
.bnav button[aria-current="page"] .bn-ic{filter:none;opacity:1}
.bnav button[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.bnav .bn-list #jl-n{top:2px;left:calc(50% + 8px);background:var(--btn);border:1px solid var(--btn-bd);color:#fff}
body.glove .bnav{height:78px}body.glove .bnav button{min-height:70px;height:70px;font-size:12.5px}
body.glove{--tabbar:calc(102px + env(safe-area-inset-bottom,0px))}
/* everything that sits just above the tab bar */
.editor{padding-bottom:calc(var(--tabbar) + 16px)}
.addbar{bottom:calc(var(--tabbar) - 4px);left:12px;right:12px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(16,23,34,.9);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
body.hasbar{padding-bottom:calc(var(--tabbar) + 76px)}
body.hasbar .toast{bottom:calc(var(--tabbar) + 76px)}
@media (min-width:1024px){.addbar{left:272px;bottom:12px}.toast{bottom:20px}:root,:root:not([data-v1]){--tabbar:0px}}

/* ---------- the views over the work (drawing sheet, 3D, cut): small dark glass controls; the work itself stays plain */
.vchips,.tiles,.ph-zoom{background:rgba(14,20,29,.82);border:1px solid rgba(255,255,255,.1);border-radius:12px;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vchips button{border-radius:9px;color:#c9d3dd;font:600 12.5px/1 var(--body)}
.vchips button[aria-pressed="true"]{background:var(--btn);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.fitb,.fsb,.ph-fsbtn{background:rgba(14,20,29,.82);border:1px solid rgba(255,255,255,.12);border-radius:11px;color:#e8eef5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------- reduced motion: everything stops, the end state shows */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ================= v2 screens (stage 2) ================= */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes fadein{from{opacity:0}}
@keyframes slidein{from{transform:translateX(-104%)}}
@keyframes sheen{0%,62%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Home (design-v2/screens/home.html) */
#p-home{gap:12px;max-width:560px}
.hm-head{margin:2px 0 0}
#p-home .hm-hi{margin:0;font:700 32px/1 var(--display);letter-spacing:.01em;text-wrap:balance}
.hm-sub{margin:5px 0 0;font-size:14px;color:var(--text-2)}
.hm-q{height:52px;min-height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);display:flex;align-items:center;gap:10px;padding:0 6px 0 10px}
.hm-q:focus-within{border-color:rgba(140,185,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 3px rgba(110,168,255,.18),0 12px 32px rgba(0,0,0,.35)}
.hm-qi{width:30px;height:30px;flex:none}.hm-qi .ic{width:30px;height:30px}
.hm-q input{flex:1;min-width:0;height:40px;min-height:40px;border:0;background:none;box-shadow:none;color:var(--text);font:400 15px/1.2 var(--body);padding:0;border-radius:0}
.hm-q input:focus-visible{outline:none}
.hm-go{width:42px;height:42px;flex:none;border-radius:12px;background:var(--btn);border:1px solid var(--btn-bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(47,111,224,.45);display:grid;place-items:center;color:#fff;padding:0;cursor:pointer}
.hm-go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.glove .hm-q{height:60px}body.glove .hm-go{width:50px;height:50px}
.hm-hero{display:block;width:100%;text-align:left;color:var(--text);border-radius:22px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);padding:12px 12px 14px;font:inherit;cursor:pointer}
.hm-hh{display:flex;justify-content:space-between;align-items:center}
.hm-hh .lbl{letter-spacing:.16em}
.hm-dots{display:flex;gap:5px}.hm-dots i{display:block;height:5px;width:5px;border-radius:3px;background:#3a4656;transition:width .3s,background .3s}.hm-dots i.on{width:16px;background:var(--blue)}
.hm-hv{display:block;margin:0 auto;max-width:326px}.hm-hv svg{display:block;width:100%;height:auto;overflow:visible}
.hm-hf{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.hm-hc{font:700 42px/.9 var(--display);transform-origin:left bottom;white-space:nowrap}
.hm-hn{text-align:right;min-width:0}.hm-hn b{display:block;font:600 14px/1.3 var(--body)}.hm-hn small{display:block;font:500 12.5px/1.3 var(--mono);color:#93a1b2;white-space:nowrap}
.hm-ql{margin:2px 0 0;letter-spacing:.16em}
#p-home .hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#p-home .hm-t{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;height:100px;min-height:100px;padding:10px 10px 11px;border-radius:18px;border:1px solid rgba(255,255,255,.1);
  background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px rgba(0,0,0,.3);color:var(--text);text-align:left;font:inherit;animation:rise .5s ease-out both}
#p-home .hm-t:first-child{animation-delay:.05s}#p-home .hm-t:nth-child(2){animation-delay:.1s}#p-home .hm-t:nth-child(3){animation-delay:.15s}
#p-home .hm-t:nth-child(4){animation-delay:.2s}#p-home .hm-t:nth-child(5){animation-delay:.25s}#p-home .hm-t:nth-child(6){animation-delay:.3s}
#p-home .hm-t .ic{width:44px;height:44px}
.hm-tt{display:flex;flex-direction:column;gap:1px;min-width:0}
.hm-tt b{font:600 14px/1.25 var(--body)}
.hm-tt>span{font-size:11.5px;line-height:1.3;color:#93a1b2}
body.glove #p-home .hm-t{height:112px}
#p-home .hm-tut{display:flex;align-items:center;gap:12px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:var(--glass);box-shadow:var(--glass-sh);padding:10px 14px 10px 10px;min-height:64px}
#p-home .hm-tut .hm-tt{flex:1}
#p-home .hm-tut .hm-tt>span{font-size:12.5px}
.hm-tut [data-ic] .ic{width:36px;height:36px}
#p-home .hm-say{margin:6px 2px 0;font-size:12.5px;line-height:1.5;color:#7f8ea1}
#p-home .hm-say b{color:var(--text-2);font-weight:600}
#p-home .lib-h{margin:4px 2px 0;font:600 11px/1.2 var(--body);letter-spacing:.16em;color:var(--label)}
.hm-p .chev{color:var(--label)}

/* ---------- the menu (design-v2/screens/menu.html): glass drawer, account card, rows with machined icons, the gliding pill */
.np{padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));gap:10px;animation:slidein .62s cubic-bezier(.2,.9,.25,1) both}
.xbg#np-bg{animation:fadein .45s ease-out both}
.np-brand{height:50px;display:flex;align-items:center;padding:0 6px;flex:none}
.np-x{position:fixed;right:12px;top:calc(14px + env(safe-area-inset-top,0px));z-index:26;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;color:var(--text);padding:0;cursor:pointer;animation:fadein .5s ease-out .25s both}
.np-x svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
/* the account card */
.np-acct{position:relative;overflow:hidden;flex:none;display:flex;flex-direction:column;gap:12px;padding:14px;margin:0;border-radius:20px;animation:rise .5s ease-out .18s both}
#np-acct-in{display:contents}
.np-acct .np-who{order:0;position:relative;display:flex;align-items:center;gap:12px;min-width:0}
.np-acct .np-acb{order:1;display:flex;flex-direction:column;gap:8px}
.np-acct .np-acc{order:2}
.np-acct>.np-plan,#np-acct-in>.np-plan{margin:0;font-size:14px;color:var(--text-2)}
.np-acct .btn{width:100%;min-height:44px;padding:0 12px;border-radius:13px;font-size:15px}
.np-av{position:relative;width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#49b3bb 0%,#2e8f97 55%,#1d6168 100%);color:#f2fbfb;font:600 23px/1 var(--body);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.np-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.np-av b{font-weight:600}
.np-seal{position:absolute;right:-12px;top:-12px;width:28px;height:28px}.np-seal .ic{width:28px;height:28px}
.np-wt{display:flex;flex-direction:column;gap:3px;min-width:0}
.np-wt .np-nm{display:flex;align-items:center;gap:8px;min-width:0}
.np-wt .np-nm b{font:600 18px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.np-wt .pbadge{margin-left:0}
.np-wt small{font-size:13px;line-height:1.3;color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.np-acc{position:relative;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:#eef3f8;font:600 14.5px var(--body);
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;width:100%}
.np-acc svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.np-sheen{display:none}
.np-acct.founder{border:1px solid rgba(243,198,80,.34);background:linear-gradient(135deg,rgba(243,198,80,.18) 0%,rgba(243,198,80,.05) 42%,rgba(255,255,255,.03) 100%);box-shadow:inset 0 1px 0 rgba(255,236,180,.2),0 10px 26px rgba(0,0,0,.35)}
.np-acct.founder .np-sheen{display:block;position:absolute;left:-60%;top:-40%;width:220%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,240,200,.16) 50%,rgba(255,255,255,0) 58%);animation:sheen 5s ease-in-out 1s infinite;pointer-events:none}
.np-acct.founder .np-av{box-shadow:0 0 0 2px #f3c650,0 0 0 5px rgba(243,198,80,.18),0 6px 14px rgba(0,0,0,.4)}
.np-acct.founder .np-wt small.np-plan{color:#dccb9c}
.np-acct.pro{border-color:rgba(140,185,255,.3);background:linear-gradient(135deg,rgba(110,168,255,.16) 0%,rgba(47,111,224,.05) 45%,rgba(255,255,255,.03) 100%)}
.np-acct.pro .np-av{box-shadow:0 0 0 2px var(--blue),0 6px 14px rgba(0,0,0,.4)}
.np-acct.out #np-pro{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;color:#c9d3dd}
/* rows */
.np-nav{position:relative;display:flex;flex-direction:column;flex:none}
.np-pill{position:absolute;left:0;right:0;top:0;height:50px;border-radius:14px;border:1px solid rgba(140,185,255,.36);background:linear-gradient(180deg,rgba(110,168,255,.24) 0%,rgba(47,111,224,.13) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(47,111,224,.22);transition:top .45s cubic-bezier(.3,1.35,.5,1),left .45s cubic-bezier(.3,1.35,.5,1),height .3s;pointer-events:none}
.np-pill.jump{transition:none}
.np-i{position:relative;height:50px;min-height:50px;padding:0 10px 0 6px;gap:12px;border-radius:14px;color:#e3e9f0;font:500 16.5px/1.2 var(--body);background:none}
.np-i:hover:not(.on){background:rgba(255,255,255,.04)}
.np-i.on{background:none;color:#d6e6ff;font-weight:500}
.np-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;filter:grayscale(1) brightness(1.05);opacity:.62;transition:filter .35s,opacity .35s}
.np-ic .ic{width:32px;height:32px}.np-ic .ico{width:20px;height:20px;stroke:#9fb0c4;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.np-i.on .np-ic,.np-i:hover .np-ic,.np-sw[aria-checked="true"] .np-ic,.np-ic.on{filter:none;opacity:1}
.np-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-n{margin-left:auto;font-size:13.5px;color:#8d9bab;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-c{margin-left:auto;font:500 14px var(--mono);color:#8d9bab}
.np-c:empty{display:none}
.np-sub{margin-left:22px;padding-left:0;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}
.np-sub .np-i{min-height:50px;font-size:16px}
.np-add,.np-add.on{color:#9cc4ff}
.np-i .soon{margin-left:auto}
.np-hr{height:1px;margin:0 8px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));flex:none}
.np-tg{display:flex;flex-direction:column;flex:none;animation:rise .45s ease-out .55s both}
.np-sw .tgl{margin-left:auto}
.np-sw[aria-checked="true"] .tgl{background:var(--btn);border-color:var(--btn-bd)}
.np-sw[aria-checked="true"] .tgl::after{left:23px}
.np-wait{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--link);white-space:nowrap}
.np-q{color:var(--text-2);font-size:15px}
.np-foot{margin:auto 0 0;padding:12px 6px 0;font-size:12.5px;color:#7f8ea1;line-height:1.8}
.np-foot a{color:#8d9bab}
/* rows rise in as the drawer opens */
.np-nav>.np-i,.np-sub{animation:rise .45s ease-out both}
.np-nav>:nth-child(2){animation-delay:.24s}.np-nav>:nth-child(3){animation-delay:.28s}.np-nav>:nth-child(4){animation-delay:.32s}.np-nav>:nth-child(5){animation-delay:.36s}
.np-nav>:nth-child(6){animation-delay:.4s}.np-nav>:nth-child(7){animation-delay:.44s}.np-nav>:nth-child(8){animation-delay:.48s}.np-nav>:nth-child(9){animation-delay:.52s}
body.glove .np-i{height:56px;min-height:56px;font-size:17px}
@media (min-width:1024px){
  .np,.np-acct,.np-nav>.np-i,.np-sub,.np-tg,.xbg#np-bg{animation:none}
  .np-x{display:none!important}
  .np{padding-top:8px}
}
.np-who .np-av{display:grid;place-items:center;flex-direction:row}
.np-who .np-av img{width:100%;height:100%}

/* ---------- screen titles with the back arrow (Find, Dividing head, Bolt circle) */
.v2p{background:none;border:0;box-shadow:none;padding:0;gap:12px}
.v2h{display:flex;align-items:center;gap:4px}
.v2back{width:44px;height:44px;flex:none;margin-left:-12px;display:grid;place-items:center;border:0;background:none;color:#c9d3dd;padding:0;cursor:pointer;border-radius:12px}
.v2back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2t{margin:0;font:700 28px/1 var(--display);letter-spacing:.01em}
.v2s{margin:3px 0 0;font-size:13px;color:var(--text-2)}
/* the caliper runs fast while it measures */
.fast{--d:.9s;--it:infinite}
.fast .k-sl{animation:k-sl var(--d) ease-in-out var(--it)}
.fast .k-nd{transform-origin:26px 19px;animation:k-nd var(--d) ease-in-out var(--it)}
/* an input with its unit inside, on the right */
.u-in{position:relative;display:block}
.u-in input{padding-right:34px;width:100%}
.u-in i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:400 12px var(--body);font-style:normal;color:#7f8ea1;pointer-events:none}
.lbl i{font-style:normal;text-transform:none;letter-spacing:.06em;font-weight:600}

/* ---------- Find › Bearing (design-v2/screens/find.html) */
.b-sz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.b-sz .f{gap:6px}
.b-sz input{font-size:20px}
.b-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.b-go .ic{width:28px;height:28px}
#p-brg .bn-row{margin:0;align-items:flex-end}
#p-brg .bn-row input{font-size:18px}
#p-brg .bn-row .lbl{letter-spacing:.12em}
.b-msg{padding:16px;border-radius:16px;font-size:14px;line-height:1.55}
.b-msg.idle{border:1px dashed rgba(143,188,255,.35);color:var(--text-3)}
.b-msg.warn{background:rgba(232,181,74,.12);border:1px solid rgba(232,181,74,.3);color:#f6dca0}
.b-feat{border-radius:22px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);padding:12px;display:flex;flex-direction:column;gap:10px;animation:rise .45s ease-out both}
.bf-top{display:flex;gap:8px;align-items:stretch}
.bf-pic{position:relative;width:min(186px,52%);flex:none;overflow:hidden}
.bf-pic svg{display:block;width:100%;height:auto;overflow:visible}
.bf-face{display:block;padding:6px 18px}.bf-face svg{width:100%;height:auto;display:block}
.bf-scan{position:absolute;left:2px;top:0;width:2px;height:100%;background:#8fbcff;box-shadow:0 0 12px #6ea8ff;animation:bscan 1s ease-in-out both}
@keyframes bscan{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(180px);opacity:0}}
.bf-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.bf-txt .bdg{align-self:flex-start}
.bf-code{font:700 34px/.95 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-type{font-size:13.5px;font-weight:600}
.bf-sz{font:500 12px/1.3 var(--mono);color:#93a1b2}
.bf-var{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bf-var .lbl{width:54px}
.bf-var .chip-b{min-height:36px;height:36px;padding:0 12px;border-radius:11px;font-size:13px}
.bf-note{margin:0;font-size:13px;color:#f6dca0}
.bf-more{border-top:1px solid rgba(255,255,255,.08);padding-top:2px}
.bf-more>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:40px;font:600 13.5px var(--body);color:var(--text-2)}
.bf-more>summary::-webkit-details-marker{display:none}
.bf-more>summary::after{content:'›';font-size:20px;color:var(--label);transition:transform .15s}
.bf-more[open]>summary::after{transform:rotate(90deg)}
.bf-more .bp{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.bdg.miss{background:rgba(255,255,255,.06);color:#a9b7c8}
.b-oth{display:flex;flex-direction:column;gap:8px}
.bo-h{display:flex;justify-content:space-between;align-items:baseline;margin-top:2px}
.bo-h .lbl{letter-spacing:.16em}
.bo-n{font-size:12px;color:#8b99aa}
.bo-row{display:flex;align-items:center;gap:10px;min-height:64px;padding:0 12px 0 6px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:var(--glass);color:var(--text);text-align:left;font:inherit;cursor:pointer;animation:rise .45s ease-out both}
.bo-pic{width:76px;height:56px;flex:none;display:grid;place-items:center}
.bo-pic svg{width:76px;height:56px;overflow:visible}
.bo-face{display:block;width:46px}.bo-face svg{width:46px;height:auto}.bo-face .dt{display:none}
.bo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bo-l{display:flex;align-items:baseline;gap:8px;min-width:0}
.bo-l b{font:700 21px/1.1 var(--display);white-space:nowrap}
.bo-l span{font-size:12.5px;color:#a3b1c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-t small{font:500 12px var(--mono);color:#8796a8}
.bo-row .bdg{flex:none;font-size:10.5px;letter-spacing:.08em;padding:0 8px}
.bo-all{min-height:44px;border-radius:14px;border:1px dashed rgba(143,188,255,.3);background:none;color:var(--link);font:600 14px var(--body);cursor:pointer}
#p-brg #bres{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:var(--glass)}
#p-brg .bdec{border-radius:18px;border:1px solid rgba(255,255,255,.09);background:var(--glass);box-shadow:var(--glass-sh)}
#p-brg .bdec:empty{display:none}
#p-brg .bhero{border:1px solid rgba(255,255,255,.09);background:var(--glass);border-radius:18px}
body.glove .b-sz input{min-height:3.6rem}
@media (max-width:374px){.bf-code{font-size:26px!important}.bo-l b{font-size:18px}.bo-pic{width:60px}.bo-pic svg{width:60px;height:44px}}

/* ---------- Calc › Dividing head (design-v2/screens/dividing-head.html) */
#p-div{gap:10px}
.dv-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dv-in .f{gap:6px}
.dv-in input{font-size:22px}
.dv-plate{height:48px;width:100%;border-radius:14px;border:1px solid rgba(243,198,80,.35);background:rgba(243,198,80,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:0;cursor:pointer}
.dv-plate b{font:600 15px var(--mono);color:#f6d47e}
.dv-plate span{font-size:11px;color:#c9a85a}
.dv-spd{min-height:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dv-spd button{font-size:12.5px;padding:0 4px}
.dv-res{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:84px}
.dv-big{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0}
.dv-big b{font:700 34px/1 var(--display);white-space:nowrap;color:var(--text)}
.dv-big span{font-size:13.5px;color:var(--text-3)}
.dv-blank{width:88px;height:84px;flex:none;overflow:visible}
.dv-blank .dv-teeth{animation:dv-teeth .25s linear infinite;animation-play-state:paused}
.dv-blank.cutting .dv-teeth{animation-play-state:running}
.dv-c1,.dv-c2,.dv-c3{transform-box:fill-box}
.dv-c1{animation:dv-chA .6s ease-out infinite}.dv-c2{animation:dv-chB .55s ease-out infinite .15s}.dv-c3{animation:dv-chC .5s ease-out infinite .3s}
@keyframes dv-teeth{to{stroke-dashoffset:-6}}
@keyframes dv-chA{0%{transform:none;opacity:1}100%{transform:translate(-16px,-10px) rotate(-120deg);opacity:0}}
@keyframes dv-chB{0%{transform:none;opacity:1}100%{transform:translate(15px,-12px) rotate(140deg);opacity:0}}
@keyframes dv-chC{0%{transform:none;opacity:1}100%{transform:translate(4px,-18px) rotate(90deg);opacity:0}}
.dv-stage{position:relative;width:300px;height:300px;align-self:center;flex:none}
.dv-rim{position:absolute;left:8px;top:8px;width:284px;height:284px;border-radius:50%;background:linear-gradient(180deg,#b4bec9 0%,#66717d 45%,#262c34 100%);box-shadow:0 16px 34px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45)}
.dv-face{position:absolute;left:11.5px;top:11.5px;width:277px;height:277px;border-radius:50%;
  background:radial-gradient(circle,transparent 0 62%,rgba(20,26,34,.22) 100%),conic-gradient(from -45deg,#f5f8fb 0%,#c3ccd5 7%,#8995a2 20%,#a3aeb9 29%,#dfe5ea 43%,#f5f8fb 50%,#c3ccd5 57%,#8995a2 70%,#a3aeb9 79%,#dfe5ea 93%,#f5f8fb 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 2px 3px rgba(255,255,255,.5)}
.dv-svg{position:relative;display:block;width:300px;height:300px}
.dv-sec{transition:opacity .3s}
.dv-ctr{position:absolute;top:-4px;display:flex;flex-direction:column}
.dv-ctr.l{left:-6px}.dv-ctr.r{right:-6px;align-items:flex-end}
.dv-ctr span{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--label)}
.dv-ctr b{font:600 22px var(--mono);color:var(--text)}
.dv-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.dv-steps .stc{padding:0 2px;gap:4px}
.dv-instr{margin:0;font-size:13.5px;line-height:1.4;color:#dbe5f0;min-height:38px}
.dv-btns{display:flex;gap:10px}
.dv-btns .btn{min-height:50px}
.dv-btns #dv-go{flex:1}
.dv-head .row{margin-bottom:10px}
.dv-head #dres{margin-top:10px}
.dv-head .dv-opt{background:rgba(255,255,255,.04)}
@media (max-width:340px){.dv-stage{transform:scale(.9);margin:-15px auto}}

/* ---------- Calc › Bolt circle (design-v2/screens/bolt-circle.html) */
#p-pcd{gap:10px}
.pc-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pc-in .f{gap:6px}
.pc-diag{position:relative;width:100%;aspect-ratio:358/272;border-radius:22px;border:1px solid rgba(255,255,255,.09);overflow:hidden;
  background:radial-gradient(80% 70% at 50% 45%,rgba(110,168,255,.10) 0%,rgba(110,168,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35)}
.pc-rim{position:absolute;left:15.642%;top:4.779%;width:68.715%;height:90.441%;border-radius:50%;background:linear-gradient(180deg,#a2adb9 0%,#56616d 50%,#20262d 100%);box-shadow:0 14px 28px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.4)}
.pc-face{position:absolute;left:16.620%;top:6.066%;width:66.760%;height:87.868%;border-radius:50%;
  background:radial-gradient(circle,transparent 0 60%,rgba(8,12,18,.3) 100%),conic-gradient(from -45deg,#aab5c0 0%,#7b8793 8%,#4b5561 20%,#5d6874 29%,#919daa 43%,#aab5c0 50%,#7b8793 57%,#4b5561 70%,#5d6874 79%,#919daa 93%,#aab5c0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 2px 3px rgba(255,255,255,.35)}
.pc-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-svg .h{cursor:pointer}
#pc-tgt{transform-box:fill-box;transform-origin:center;animation:pc-pr 1.5s ease-out infinite}
@keyframes pc-pr{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.55);opacity:0}}
.pc-c1,.pc-c2,.pc-c3,.pc-c4{transform-box:fill-box}
.pc-c1{animation:dv-chA .5s ease-out infinite}.pc-c2{animation:dv-chB .45s ease-out infinite .12s}.pc-c3{animation:dv-chC .5s ease-out infinite .25s}.pc-c4{animation:pc-chD .42s ease-out infinite .3s}
@keyframes pc-chD{0%{transform:none;opacity:1}100%{transform:translate(-6px,14px) rotate(-90deg);opacity:0}}
.pc-st{position:absolute;top:11px;display:flex;flex-direction:column;gap:1px}
.pc-st.l{left:14px}.pc-st.r{right:14px;align-items:flex-end}
.pc-st span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.pc-st b{font:600 14px var(--mono);color:var(--text)}
.pc-tap{position:absolute;left:14px;bottom:10px;margin:0;font-size:11px;color:#8d9bab}
/* the DRO: black glass display, one row an axis, the digits in the axis colour */
#p-pcd .dro{border-radius:22px;border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
#p-pcd .dro-bar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
#p-pcd .dro-tog{min-height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);padding:2px;gap:2px}
#p-pcd .dro-tog button{min-height:34px;padding:0 10px;border-radius:8px;font:700 12px/1 var(--body);letter-spacing:.08em;color:#8d9bab}
#p-pcd .dro-tog button[aria-pressed="true"]{color:#fff}
.dro-hole{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.dro-hole b{font:700 12px/1 var(--body);letter-spacing:.1em;color:#dfe8f2;white-space:nowrap}
.dro-dots{display:flex;gap:3px}.dro-dots:empty{display:none}
.dro-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18)}.dro-dots i.d{background:#7ee08f}.dro-dots i.c{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8)}
.dro-disp{position:relative;border-radius:14px;border:1px solid #1a242e;background:#03060a;box-shadow:inset 0 2px 12px rgba(0,0,0,.9);padding:6px 10px;display:flex;flex-direction:column;overflow:hidden}
.dro-disp::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
#p-pcd .dro-ax{display:flex;align-items:center;gap:8px;height:46px;border-radius:9px;padding:0 4px;background:transparent;border:0;transition:background .2s}
.dro-ax.x{--c:#5cc8ff;--cg:rgba(92,200,255,.55);--cb:rgba(92,200,255,.14);--cbd:rgba(92,200,255,.4);--ck:#bfeaff;--cu:#5d8fa8}
.dro-ax.y{--c:#ffb547;--cg:rgba(255,181,71,.55);--cb:rgba(255,181,71,.14);--cbd:rgba(255,181,71,.4);--ck:#ffe2b0;--cu:#a8875d}
#p-pcd .dro-ax.mv.x{background:rgba(92,200,255,.09)}#p-pcd .dro-ax.mv.y{background:rgba(255,181,71,.09)}
#p-pcd .dro-ax .l{width:30px;height:30px;flex:none;border-radius:8px;background:var(--cb);border:1px solid var(--cbd);color:var(--c);display:grid;place-items:center;font:700 20px/1 var(--display)}
.dro-ax .w{width:24px;height:24px;flex:none;stroke:var(--c);stroke-opacity:.75}.dro-ax .w .f{fill:var(--c);stroke:none}.dro-ax .w .k{fill:var(--ck);stroke:none}
.dro-ax .s7{flex:1 1 192px;min-width:0;max-width:192px;height:auto;aspect-ratio:192/40;fill:var(--c);filter:drop-shadow(0 0 4px var(--cg))}
.dro-ax .s7 .off{fill-opacity:.07}
#p-pcd .dro-ax .u{font:600 12px var(--body);color:var(--cu);letter-spacing:0;min-width:0;text-transform:none}
#p-pcd .dro-from{margin:0;font-size:12.5px;line-height:1.35;color:#b8c6d6;min-height:34px;opacity:1}
.pc-btns{display:flex;gap:10px}.pc-btns .btn{min-height:50px}.pc-btns #pd-next{flex:1}
.pc-tab .hint{margin-bottom:8px}
body.glove #p-pcd .dro-tog button{min-height:44px}
/* the sub-section bars (Find: Bearing … O-ring; Calc: PCD … About) share out the width and never cut a label */
.seg.sub button{flex:1 1 auto;padding:0 8px}
@media (max-width:374px){.seg.sub button{padding:0 5px;font-size:13px}.addbar{gap:6px;padding:6px 8px}.addbar .qty button{width:2rem}.addbar .qty input{width:2.2rem}}
#np-shop.joined .np-wait{color:var(--ok-t)}#np-shop.joined .np-ic{filter:none;opacity:1}
/* wider screens: the v2 screens stay a phone-width column, centred; on a PC the menu panel is wide enough for its card */
@media (min-width:600px){#p-find,#p-more{max-width:560px}}
@media (min-width:1024px){.np{width:300px}body{padding-left:300px}.addbar{left:312px}.toast{left:312px}#p-find,#p-more{max-width:560px}}

/* ================= v2 screens (stage 3: the rest of the app, design-v2/ROLLOUT.md) ================= */
/* a screen's own miniature beside its title; it plays once each time the screen opens (a hidden page restarts its animations) */
.v2i{width:40px;height:40px;flex:none;display:grid;place-items:center;margin-right:6px}
.v2i .ic{width:100%;height:100%}
.v2back+.v2i{margin-left:-6px}
.v2tb{flex:1;min-width:0}
.pg-h.v2h{gap:8px}.pg-h.v2h .v2i{margin-right:0}
.pg-h .v2t{flex:none;overflow-wrap:anywhere}

/* ---------- Tutorials: the planned videos as glass rows */
#p-tut{max-width:560px}
.tut-list{gap:10px}
.tut{min-height:64px;padding:10px 14px 10px 10px;gap:12px;justify-content:flex-start;border-radius:18px;border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh)}
.tut b{flex:1;min-width:0;font:600 15px/1.3 var(--body)}
.tut-p{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.tut-p::after{content:"";position:absolute;left:16px;top:13px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #7d8a99}

/* ---------- My parts: the nut and the count in the header; the rows were made glass in stage 1 */
#p-parts .pg-h{flex-wrap:wrap}
#lib-sub:empty{display:none}
#p-parts .search{min-height:48px;padding-left:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8ea1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 12px center/18px,var(--field)}
.lib-h{font:600 11px/1.2 var(--body);letter-spacing:.16em;color:var(--label);margin:10px 4px 4px}
.lib-g .card+.card{border-top-color:rgba(255,255,255,.07)}
.lib-g .card.cur{box-shadow:inset 3px 0 0 var(--blue)}
.lib-g .card .more[aria-expanded="true"]{background:rgba(255,255,255,.08);color:var(--text)}
.lib-g .card .acts button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text)}
.lib-g .card .acts button.danger{background:linear-gradient(180deg,#ff9a8c 0%,#d9473b 60%,#b0322a 100%);border-color:rgba(255,190,180,.5)}
.newpick .ex{gap:10px}
.ex button{min-height:64px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:10px 12px}
.ex button b{font:600 15px/1.25 var(--body);color:var(--text)}
.ex button span{font-size:12px;line-height:1.3;color:#93a1b2}
.ex button:not(:disabled):hover{border:1px solid rgba(140,185,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ---------- About: one glass card for the words and the two policy links, then the credits */
#p-about{max-width:560px}
.abt-c{border-radius:var(--rc);border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh);padding:16px;display:flex;flex-direction:column;gap:10px}
.abt-c p{margin:0}
.abt-l{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.abt-l .ac-big{flex:1 1 150px;width:auto;min-height:50px;font-size:15px}
.credits h3{font:600 15px/1.3 var(--body);color:var(--text)}
.credits p{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.credits a{color:var(--link)}
.credits code{font:500 12.5px var(--mono);color:#c9d3dd}

/* ---------- Lists sheet: the book in its header */
#jl .pg-h .v2i{margin-right:0;width:38px;height:38px}

/* ---------- Upgrade sheet: one glass card; Founder is the gold card with the seal (as the menu's founder card), the plans glass */
.up-line{color:var(--text-2)}
.up-body{font:600 16px/1.35 var(--body);color:var(--text)}
.up-buy{min-height:58px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:var(--text)}
.up-buy b{font:600 16px/1.2 var(--body)}
.up-buy span{font-size:12.5px;color:var(--text-2)}
.up-buy.main{background:var(--btn);border-color:var(--btn-bd);box-shadow:var(--btn-sh);color:#fff}
#up-founder{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;text-align:left;padding:10px 14px 10px 10px;min-height:68px;border-radius:18px;
  border:1px solid rgba(243,198,80,.34);background:linear-gradient(135deg,rgba(243,198,80,.18) 0%,rgba(243,198,80,.05) 42%,rgba(255,255,255,.03) 100%);box-shadow:inset 0 1px 0 rgba(255,236,180,.2),0 10px 26px rgba(0,0,0,.35);color:#f6e2ae}
#up-founder.main{border-color:rgba(243,198,80,.6);box-shadow:inset 0 1px 0 rgba(255,236,180,.25),0 0 0 1px rgba(243,198,80,.18),0 10px 26px rgba(0,0,0,.35)}
#up-founder .up-seal{grid-row:1/3;width:44px;height:44px;display:block}#up-founder .up-seal .ic{width:44px;height:44px}
#up-founder b{color:#fbe7a6}#up-founder span{color:#d9bf7f;opacity:1}
.up-fcopy,.up-lock,.up-terms{color:var(--text-2)}
.up-not{color:var(--text-2)}
#up-founder:focus-visible{outline-color:#f3c650}

/* ---------- Find › Thread: the best match as a card (name, badge, its form drawn with a pitch gauge seated in it, the readouts
   in the drawing's colours), the other candidates as rows; tap one to draw it */
#p-thr{--t-mj:#5cc8ff;--t-mn:#b89cff;--t-me:#ffb547;--t-pt:#e8eef5;--t-td:#7ee08f}
.t-sz{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.t-sz .f{gap:6px}.t-sz input{font-size:20px}
.t-feat{border-radius:22px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;animation:rise .35s ease both}
.t-feat[hidden]{display:none}
.tf-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tf-code{display:block;font:700 34px/.95 var(--display);letter-spacing:.01em;overflow-wrap:anywhere}
#p-thr .thero{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:8px 8px 6px;margin:2px 0 0}
#p-thr .thero .tm{fill:#2b3542;stroke:#c9d3dd;stroke-width:1}
#p-thr .thero .tl.mj{stroke:var(--t-mj)}#p-thr .thero .tt.mj{fill:var(--t-mj)}
#p-thr .thero .tl.mn{stroke:var(--t-mn)}#p-thr .thero .tt.mn{fill:var(--t-mn)}
#p-thr .thero .tl.me{stroke:var(--t-me)}#p-thr .thero .tt.me{fill:var(--t-me)}
#p-thr .thero .tt{font:600 10.5px var(--body);fill:#c9d3dd}
#p-thr .thero .tp{stroke:var(--t-pt)}
#p-thr .thero .bcap{font-size:12px;color:#8796a8;padding-top:2px}#p-thr .thero .bcap b{font:600 12.5px var(--body);color:#c9d3dd}
.thero .tg{animation:tg-in .8s cubic-bezier(.3,1.35,.5,1) .2s both}
.thero .tg.up{animation-name:tg-up}
.thero .tg.still{animation:none}
.thero .tgs{font:600 8.5px var(--mono);fill:var(--t-pt);letter-spacing:.04em}
@keyframes tg-in{from{transform:translateY(-18px);opacity:0}}
@keyframes tg-up{from{transform:translateY(18px);opacity:0}}
.tf-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.tf-c{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tf-c .lbl{font-size:10px;letter-spacing:.12em;white-space:nowrap}
.tf-c b{font:700 26px/1 var(--display);white-space:nowrap}
.tf-c b i{font:500 11px var(--body);font-style:normal;color:#7f8ea1;margin-left:3px}
.tf-c.mj b{color:var(--t-mj)}.tf-c.mn b{color:var(--t-mn)}.tf-c.pt b{color:var(--t-pt)}.tf-c.td b{color:var(--t-td)}
.tf-c.mj{border-color:rgba(92,200,255,.25)}.tf-c.mn{border-color:rgba(184,156,255,.25)}.tf-c.td{border-color:rgba(126,224,143,.22)}
.tf-note{margin:4px 2px 0;font-size:13px;line-height:1.45;color:var(--text-2)}
/* the cutaway row on the Thread, Circlip, Oil seal and O-ring cards (12 Oct): the bearing card's .bf-top; a long name (a nut's
   7/16-14 UNC-2B) wraps rather than being cut short */
.t-feat .bf-code{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#p-thr .t-oth{gap:8px}
#p-thr .t-oth>.hint{margin:0}
.t-row{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:8px 12px 8px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.09);
  background:var(--glass);color:var(--text);text-align:left;font:inherit;cursor:pointer;animation:rise .35s ease both}
.t-row:hover{border-color:rgba(140,185,255,.35)}
.tr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.t-row .name{display:flex;align-items:baseline;gap:8px;min-width:0;font:inherit}
.t-row .name b{font:700 21px/1.1 var(--display);white-space:nowrap}
.t-row .name span{font-size:12.5px;color:#a3b1c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-row small{font:500 12px/1.35 var(--mono);color:#8796a8}
.t-row .bdg{flex:none;font-size:10.5px;letter-spacing:.08em;padding:0 8px}
.t-oth .t-row:nth-of-type(2){animation-delay:.05s}.t-oth .t-row:nth-of-type(3){animation-delay:.1s}.t-oth .t-row:nth-of-type(4){animation-delay:.15s}.t-oth .t-row:nth-of-type(5){animation-delay:.2s}
body.glove .t-sz input{min-height:3.6rem}body.glove .t-row{min-height:72px}
@media (max-width:374px){.tf-code{font-size:28px}.tf-c b{font-size:22px}.t-row .name b{font-size:18px}}
/* the text back links (Lists ‹ a list, Make ‹ the part picker): link blue, a rounded hit area so the focus ring follows it */
.mk-back{color:var(--link);border-radius:12px;padding:0 10px;margin-left:-10px;font:600 15px/1 var(--body)}
.mk-back:hover{background:rgba(255,255,255,.05)}

/* ---------- Make › What are you making: glass cards that rise in, each with its machine (chuck, flange, mill); the ones
   still waiting for their icon keep the line icon in a glass square */
.mkpick .hm-hi{margin:2px 0 4px;font:700 32px/1 var(--display);letter-spacing:.01em}
.mk-big{gap:10px}
.mk-big .hm-t,#mk-sh-list .hm-t{border-radius:20px;border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh);column-gap:14px;padding:12px 14px 12px 12px;text-align:left;animation:rise .4s ease both}
.mk-big .hm-t:nth-child(2){animation-delay:.06s}.mk-big .hm-t:nth-child(3){animation-delay:.12s}
.mk-big .hm-t:hover,#mk-sh-list .hm-t:hover{border-color:rgba(140,185,255,.35)}
.mk-big .hm-t i,#mk-sh-list .hm-t i{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#c9d3dd}
.mk-big .hm-t.mk-v2 i{background:none;border:0}
.hm-t.mk-v2 i .ic{width:52px;height:52px}
.mk-big .hm-t b,#mk-sh-list .hm-t b{font:600 17px/1.25 var(--body);color:var(--text);align-self:end}
.mk-big .hm-t span,#mk-sh-list .hm-t span{font-size:13px;line-height:1.35;color:#93a1b2;align-self:start}
.mk-more{color:var(--link);border-radius:12px;padding:0 10px;margin:8px 0 2px -10px;font:600 15px/1 var(--body)}
.mk-more:hover{background:rgba(255,255,255,.05)}
#mk-sheet h3{font:700 22px/1.1 var(--display);letter-spacing:.01em;margin:2px 0 10px}
#mk-sh-list{display:grid;gap:10px;margin-bottom:10px}
body.glove .mk-big .hm-t{min-height:92px}

/* ---------- glove keypad: a glass sheet, glass keys, numbers in Plex Mono; Next is the blue button, Say it the red one */
.kp{background:var(--sheet);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:24px 24px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px))}
.kp .kt{margin:0 2px 10px;color:var(--label);font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.kp .kt b{font:600 32px/1 var(--mono);color:#fff;letter-spacing:0;text-transform:none}
.kp .kt button{width:44px;height:44px;flex:none;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--text);font-size:18px;padding:0}
.kp .kg{gap:8px}
.kp .kg button{height:64px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.3);color:#fff;font:600 27px/1 var(--mono)}
.kp .kg button:active{background:rgba(110,168,255,.24);transform:translateY(1px)}
.kp .kg .a{background:var(--btn);border-color:var(--btn-bd);box-shadow:var(--btn-sh);font:600 18px/1 var(--body)}
.kp .kg .m{background:linear-gradient(180deg,#ff9a8c 0%,#d9473b 60%,#b0322a 100%);border-color:rgba(255,190,180,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(210,60,50,.3);font:600 16px/1 var(--body)}
.kp .kg .m.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 3px rgba(255,140,120,.45),0 6px 16px rgba(210,60,50,.4)}

/* ---------- Make editors: Stock and Photo get the same glass panel as Plate, Sketch and Turned; the part's name in the
   title font; the photo steps as the blue-glass segmented pick */
#mk-block,#mk-photo{border-radius:var(--rc);border:1px solid var(--glass-bd);background:var(--glass);box-shadow:var(--glass-sh);padding:12px}
#mk-block .block{border-top-color:rgba(255,255,255,.08)}
.ph-sum b{font:700 26px/1.05 var(--display);letter-spacing:.01em}
.ph-sum #ph-sub{font-size:13px;color:var(--text-2)}
.ph-steps{gap:6px}
.ph-steps button{min-height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#c9d3dd;font:600 13px/1 var(--body)}
.ph-steps button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn-bd);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(47,111,224,.35)}
#ph-ui>.ph-steps{margin-bottom:10px}
#mk-sh-list .hm-t.mk-v2 i{background:none;border:0}
/* the photo editor: the camera miniature over the empty view and in its button */
.ph-empty b{display:flex;flex-direction:column;align-items:center;gap:6px;font:700 24px/1.1 var(--display);letter-spacing:.01em}
.ph-empty b .ic{width:44px;height:44px}
#ph-ui [data-pa="photo"]{display:inline-flex;align-items:center;gap:8px}#ph-ui [data-pa="photo"] .ic{width:28px;height:28px;flex:none}

/* ---------- Find › Circlip, Oil seal, O-ring: Thread's card and rows (find/find-v2.js). The drawing is the setup in section,
   light lines on the dark card; the numbers you cut or buy carry the colour of their readout. Each has one motion: the clip
   drops into its groove, the seal presses in from the air side, the ring springs round then squashes in its gland. */
.f-card{--c-g:#7ee08f;--c-m:#ffb547;--c-t:#b89cff;--c-s:#5cc8ff;--c-h:#ffb547;--c-w:#7ee08f}
.f-sz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px;align-items:end}
.f-sz .f{gap:6px}.f-sz input{font-size:20px}
.f-card .f-pic{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:8px 8px 6px;margin:2px 0 0}
.f-card .f-pic .bcap{font-size:12px;color:#8796a8;padding:4px 2px 0}.f-card .f-pic .bcap b{font:600 12.5px var(--body);color:#c9d3dd}
.f-card .c-g{fill:var(--c-g)}
.f-card .c-m .dm,.f-card .c-t .dm,.f-card .c-w .dm{stroke-width:.8}
.f-card .c-m .dm{stroke:var(--c-m)}.f-card .c-m .ah,.f-card .c-m .dt{fill:var(--c-m)}
.f-card .c-t .dm{stroke:var(--c-t)}.f-card .c-t .ah,.f-card .c-t .dt{fill:var(--c-t)}
.f-card .c-w .dm{stroke:var(--c-w)}.f-card .c-w .ah,.f-card .c-w .dt{fill:var(--c-w)}
.f-card .dt.c-s{fill:var(--c-s)}.f-card .dt.c-h{fill:var(--c-h)}.f-card .dt.c-g{fill:var(--c-g)}
.tf-c.cg b{color:var(--c-g)}.tf-c.cm b{color:var(--c-m)}.tf-c.ct b{color:var(--c-t)}.tf-c.cs b{color:var(--c-s)}.tf-c.ch b{color:var(--c-h)}.tf-c.cw b{color:var(--c-w)}.tf-c.cq b{color:#e8eef5}
.tf-c.cg,.tf-c.cw{border-color:rgba(126,224,143,.22)}.tf-c.cm,.tf-c.ch{border-color:rgba(255,181,71,.25)}.tf-c.ct{border-color:rgba(184,156,255,.25)}.tf-c.cs{border-color:rgba(92,200,255,.25)}
.f-card .tf-g:has(>.tf-c:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.f-card .kc-drop{animation:kc-in .7s cubic-bezier(.3,1.4,.5,1) .2s both}.f-card .kc-drop.up{animation-name:kc-up}
.f-card .ks-in{animation:ks-in .8s cubic-bezier(.25,1.2,.5,1) .2s both}
.f-card .ko-sq{transform-box:fill-box;transform-origin:center;animation:ko-sq .9s cubic-bezier(.3,1.35,.5,1) .25s both}
.f-card .still .kc-drop,.f-card .still .ks-in,.f-card .still .ko-sq{animation:none}
@keyframes kc-in{from{transform:translateY(-12px);opacity:0}}
@keyframes kc-up{from{transform:translateY(12px);opacity:0}}
@keyframes ks-in{from{transform:translateX(28px);opacity:0}}
@keyframes ko-sq{from{transform:scale(var(--sx,1),var(--sy,1))}}
body.glove .f-sz input{min-height:3.6rem}
#p-seal .b-sz input{font-size:20px}
.t-row .tr-why{font:400 12.5px/1.35 var(--body);color:#93a1b2}

/* ---------- full-screen viewer: the plain work in the dark v2 frame, glass buttons round it */
body.fsv .stage,body.fsv .vbox,body.fsv[data-mode=sketch] .vbox{background:#080d14}
body.fsv .fsx{top:7px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--text)}
body.fsv .vchips{left:62px}
body.fsv .fsbar{color:var(--text-2);font:13px/1.35 var(--body);border-top:1px solid rgba(255,255,255,.06)}
.fsbar button{min-height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);font:600 14px/1 var(--body);padding:0 14px}
.fsbar .zp{border:0;background:transparent}
.ph-fs-x{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(14,20,29,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* ---------- the stock op sheet: its title in the display font, ✕ a glass square, ✓ green glass */
.bk-sheet .tn-h b{font:700 22px/1.1 var(--display);letter-spacing:.01em}
.bk-x0{border-radius:15px;border:1px solid rgba(255,255,255,.12);background:var(--field);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--text-2)}
.bk-ok{border-radius:15px;border:1px solid rgba(150,240,165,.5);background:linear-gradient(180deg,#9df0a9 0%,#3fbf5a 60%,#2a9a45 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px rgba(60,190,90,.3);color:#06210d}

/* ================= Stage 4 (QA): every tap target at least 44 x 44 (HANDOFF section 6.4), glove mode bigger ================= */
/* segmented controls: the track 50 tall with 2 px inside, so each segment is 44; glove 58 / 52 */
.seg,.modes,.bk-proc{min-height:50px;padding:2px}
body.glove .seg,body.glove .modes,body.glove .bk-proc{min-height:58px}
@media (max-width:374px){.seg button,.modes button{white-space:normal;line-height:1.1;padding:0 6px}}
body.glove .seg button{white-space:normal;line-height:1.1}
#p-pcd .dro-tog{min-height:48px;padding:2px}#p-pcd .dro-tog button{min-height:44px}
body.glove #p-pcd .dro-tog button{min-height:52px}
/* the avatar stays a 38 px circle; its hit area reaches 44 */
.nav-av{position:relative}.nav-av::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.hm-go{width:44px;height:44px}
.hm-q input{height:50px;min-height:50px}
.bf-var .chip-b{min-height:44px;height:44px}
/* checkboxes: a 22 px box in a 44 px row; fold-outs: a 44 px heading */
label.check{min-height:44px;align-items:center}
.check input[type=checkbox],.check input[type=radio]{width:22px;height:22px;margin:0;flex:none}
details>summary{min-height:44px;display:flex;align-items:center}
#mk-build details.sec>summary{min-height:44px}
.bf-more>summary{min-height:44px}
input[type=range]{min-height:44px}
/* the view chips over the work: 36 tall, their hit area 44; the second row moved down to clear the first */
.vchips button,.fitb{min-height:36px;padding:0 12px;position:relative}
.vchips button::after,.fitb::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.vchips.sh-sw{top:58px}
.fsb{width:40px;height:40px;position:absolute}.fsb::after{content:"";position:absolute;inset:-2px}
/* the add bar: on a narrow phone the label gets its own line, so every button can be 44 */
.addbar .qty button{width:44px;height:44px}
.addbar .qty input{min-height:44px}
.addbar .jlb{width:44px;min-width:44px;height:44px}
@media (max-width:420px){
  .addbar{flex-wrap:wrap;row-gap:6px}
  .addbar .ab-l{flex:1 0 100%}
  .addbar .qty{margin-right:auto}
  body.hasbar{padding-bottom:calc(var(--tabbar) + 118px)}
  body.hasbar .toast{bottom:calc(var(--tabbar) + 118px)}
}
.addbar .qty input{width:44px}
.chips button,.chip-b{min-height:44px;min-width:44px}
.vchips button{min-width:44px}
#p-pcd .dro-tog button{min-width:44px}
/* list rows: the name, the − / + and the ✕ at 44 */
.jrow button.l{min-height:44px}
.jrow .qty button{width:44px;height:44px}.jrow .qty input{width:44px;min-height:44px}
.jrow .x{width:44px;min-width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--field);color:var(--text-2)}
.ph-steps button{min-height:44px}

/* Make is in beta (Sherwin, 13 Oct: too much of it still breaks): a blue pill on every way into it */
.beta{flex:none;font:700 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:7px;background:rgba(110,168,255,.16);border:1px solid rgba(110,168,255,.4);color:#9cc4ff;white-space:nowrap}
#p-home .hm-t{position:relative}
#p-home .hm-t>.beta{position:absolute;top:8px;right:8px}
.np-i>.np-t:has(+.beta){flex:none}
.np-i>.beta{margin-left:8px}
.mk-beta{display:flex;align-items:flex-start;gap:10px;margin:-4px 0 14px;font-size:13px;line-height:1.4;color:var(--text-2)}
.mk-beta .beta{margin-top:1px}

/* the drawing PDF's paper and sheets, on the Export sheet */
.ex-dp{display:grid;gap:8px;margin:4px 0 14px}
.ex-dp .lbl{margin:6px 0 0}
.ex-dp .seg{display:flex;height:44px}
#ex-dp-sh{display:grid;gap:8px}
#ex-dp-sh[hidden]{display:none!important}
/* Benchsmith "machined miniature" icons — animation rules.
   Put class="ic" on every icon <svg viewBox="0 0 48 48">, and a state class on the svg or any ancestor:
     .lp  loop forever (showcase, founder seal)
     .on  play once (selected tab / menu item / toggle just switched on) — re-add the class to replay
     .hv  play while hovered (inactive items)
   Gradients live in icon-defs.svg — include that once per page (hidden) before any icon renders.
   Respect reduced motion: the last rule turns every animation off. */
.ic{display:block;overflow:visible}
.ic *{transform-box:view-box}
.lp{--d:2.6s;--it:infinite}
.on{--d:2.6s;--it:1}
.hv:hover{--d:2.6s;--it:infinite}
:is(.lp,.on,.hv:hover) .k-vj{animation:k-vj var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-vh{transform-origin:44.2px 26.5px;animation:k-vh var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-sl{animation:k-sl var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-nd{transform-origin:26px 19px;animation:k-nd var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-crk{transform-origin:24px 23.5px;animation:k-crk 6s cubic-bezier(.5,0,.3,1) var(--it)}
:is(.lp,.on,.hv:hover) .k-arm{transform-origin:24px 23.5px;animation:k-arm 6s ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-cov{transform-origin:9px 26px;animation:k-cov var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-rib{transform-origin:27px 42px;animation:k-rib var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-chk{transform-origin:24px 23.5px;animation:k-chk var(--d) cubic-bezier(.6,0,.3,1) var(--it)}
:is(.lp,.on,.hv:hover) .k-blur{animation:k-blur var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-chip{transform-box:fill-box;transform-origin:center;animation:k-chip var(--d) ease-out var(--it)}
:is(.lp,.on,.hv:hover) .k-nutd{animation:k-nutd var(--d) cubic-bezier(.5,0,.3,1) var(--it)}
:is(.lp,.on,.hv:hover) .k-f1{animation:k-f1 var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-f2{animation:k-f2 var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-f3{animation:k-f3 var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-unf{transform-origin:19px 29px;animation:k-unf var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-fac{animation:k-fac var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-cd{transform-origin:19px 29px;animation:k-cd var(--d) ease-out var(--it)}
:is(.lp,.on,.hv:hover) .k-spk{transform-origin:9px 9px;animation:k-spk var(--d) ease-out var(--it)}
:is(.lp,.on,.hv:hover) .k-cage{transform-origin:24px 23.5px;animation:k-spin 2.5s linear var(--it)}
:is(.lp,.on,.hv:hover) .k-ir{transform-origin:24px 23.5px;animation:k-spin 1s linear var(--it)}
:is(.lp,.on,.hv:hover) .k-tw{animation:k-tw var(--d) ease-in-out var(--it)}
:is(.lp,.hv:hover) .k-tb{transform-origin:24px 11px;animation:k-tb .65s linear infinite}
.on .k-tb{transform-origin:24px 11px;animation:k-tb .65s linear 4}
:is(.lp,.on,.hv:hover) .k-drl{animation:k-drl 6s ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-glv{transform-origin:24px 44px;animation:k-glv var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-scr{animation:k-scr var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-ln{animation:k-ln var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-seal{transform-origin:24px 21.5px;animation:k-seal var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-gl{animation:k-gl var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-tbl{animation:k-tbl var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-qul{animation:k-qul var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-ham{transform-origin:17.8px 42px;animation:k-ham var(--d) cubic-bezier(.5,0,.4,1) var(--it)}
:is(.lp,.on,.hv:hover) .k-hsp{transform-origin:43px 18px;animation:k-hsp var(--d) ease-out var(--it)}
:is(.lp,.on,.hv:hover) .k-l2{transform-origin:0 0;animation:k-l2 var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-l3{transform-origin:0 0;animation:k-l3 var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-l4{transform-origin:0 0;animation:k-l4 var(--d) ease-in-out var(--it)}
@keyframes k-vj{0%,100%{transform:none}35%,62%{transform:translateX(3px)}}
@keyframes k-vh{0%,100%{transform:none}25%{transform:scaleY(-1)}50%{transform:none}75%{transform:scaleY(-1)}}
@keyframes k-sl{0%,100%{transform:none}50%{transform:translateX(9px)}}
@keyframes k-nd{0%,100%{transform:none}50%{transform:rotate(560deg)}}
@keyframes k-crk{0%{transform:rotate(0)}13%,25%{transform:rotate(450deg)}38%,50%{transform:rotate(900deg)}63%,75%{transform:rotate(1350deg)}88%,100%{transform:rotate(1800deg)}}
@keyframes k-arm{0%,13%{transform:rotate(0)}19%,38%{transform:rotate(90deg)}44%,63%{transform:rotate(180deg)}69%,88%{transform:rotate(270deg)}94%,100%{transform:rotate(360deg)}}
@keyframes k-cov{0%,100%{transform:none}35%,65%{transform:scaleX(.16)}}
@keyframes k-rib{0%,100%{transform:rotate(0)}25%{transform:rotate(9deg)}75%{transform:rotate(-9deg)}}
@keyframes k-chk{0%{transform:rotate(0)}55%,100%{transform:rotate(720deg)}}
@keyframes k-blur{0%,8%,55%,100%{opacity:0}20%,40%{opacity:1}}
@keyframes k-chip{0%,30%{opacity:0;transform:none}38%{opacity:1}70%{opacity:0;transform:translate(8px,6px) rotate(40deg)}100%{opacity:0}}
@keyframes k-nutd{0%,8%{transform:none}20%{transform:translateY(-5px)}70%,100%{transform:none}}
@keyframes k-f1{0%,20%{fill:#e2e8ef}29%{fill:#b9c3ce}37%{fill:#7d8996}45%{fill:#e2e8ef}53%{fill:#b9c3ce}61%{fill:#7d8996}70%,100%{fill:#e2e8ef}}
@keyframes k-f2{0%,20%{fill:#b9c3ce}29%{fill:#7d8996}37%{fill:#e2e8ef}45%{fill:#b9c3ce}53%{fill:#7d8996}61%{fill:#e2e8ef}70%,100%{fill:#b9c3ce}}
@keyframes k-f3{0%,20%{fill:#7d8996}29%{fill:#e2e8ef}37%{fill:#b9c3ce}45%{fill:#7d8996}53%{fill:#e2e8ef}61%{fill:#b9c3ce}70%,100%{fill:#7d8996}}
@keyframes k-unf{0%,6%{transform:scale(1);opacity:0}12%{transform:scale(1);opacity:1}55%{transform:scale(.1);opacity:1}58%,100%{transform:scale(.1);opacity:0}}
@keyframes k-fac{0%,6%{transform:none;opacity:0}12%{transform:none;opacity:1}55%{transform:translate(-8.1px,8.1px);opacity:1}60%,100%{transform:translate(-8.1px,8.1px);opacity:0}}
@keyframes k-cd{0%,10%{transform:scale(1)}14%,55%{transform:scale(0)}68%,100%{transform:scale(1)}}
@keyframes k-spk{0%,60%{transform:scale(0) rotate(0)}72%{transform:scale(1.2) rotate(45deg)}85%{transform:scale(1) rotate(90deg)}100%{transform:scale(0) rotate(90deg)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-tw{0%{transform:none}30%{transform:translateY(1.6px)}40%{transform:translateY(1px)}70%{transform:translateY(2.6px)}80%{transform:translateY(2px)}100%{transform:none}}
@keyframes k-tb{0%{transform:scaleX(1)}25%{transform:scaleX(.08)}50%{transform:scaleX(-1)}75%{transform:scaleX(-.08)}100%{transform:scaleX(1)}}
@keyframes k-drl{0%,2%{transform:translate(30.25px,26.32px)}8%{transform:translate(30.25px,28.4px)}12%,18%{transform:translate(30.25px,26.32px)}22%{transform:translate(36.5px,31px)}26%{transform:translate(36.5px,33px)}30%,34%{transform:translate(36.5px,31px)}38%{transform:translate(30.25px,35.68px)}42%{transform:translate(30.25px,37.7px)}46%,50%{transform:translate(30.25px,35.68px)}54%{transform:translate(17.75px,35.68px)}58%{transform:translate(17.75px,37.7px)}62%,66%{transform:translate(17.75px,35.68px)}70%{transform:translate(11.5px,31px)}74%{transform:translate(11.5px,33px)}78%,82%{transform:translate(11.5px,31px)}86%{transform:translate(17.75px,26.32px)}90%{transform:translate(17.75px,28.4px)}94%,96%{transform:translate(17.75px,26.32px)}100%{transform:translate(30.25px,26.32px)}}
@keyframes k-glv{0%,100%{transform:none}20%{transform:rotate(-10deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-6deg)}85%{transform:rotate(3deg)}}
@keyframes k-scr{0%,6%{transform:translate(12px,26px)}60%{transform:translate(39px,26px)}72%{transform:translate(39px,22px)}88%{transform:translate(12px,22px)}96%,100%{transform:translate(12px,26px)}}
@keyframes k-ln{0%,6%{stroke-dashoffset:27;opacity:1}60%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes k-seal{0%,100%{transform:none}30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
@keyframes k-gl{0%,20%{transform:translateX(-30px)}70%,100%{transform:translateX(40px)}}
@keyframes k-tbl{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(3px)}}
@keyframes k-qul{0%,30%,100%{transform:none}45%,55%{transform:translateY(2.4px)}}
@keyframes k-ham{0%,100%{transform:none}32%{transform:rotate(-14deg)}46%{transform:rotate(26deg)}52%{transform:rotate(21deg)}58%{transform:rotate(26deg)}82%{transform:none}}
@keyframes k-hsp{0%,44%{transform:scale(0);opacity:0}48%{transform:scale(1.3);opacity:1}62%{transform:scale(.6);opacity:0}100%{opacity:0}}
@keyframes k-l2{0%,100%{transform:none}50%{transform:rotate(5deg)}}
@keyframes k-l3{0%,100%{transform:none}50%{transform:rotate(10deg)}}
@keyframes k-l4{0%,100%{transform:none}50%{transform:rotate(15deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Stage 3 icons (12 Oct): their motions, same states as icons.css (.lp loops, .on plays once, .hv plays while hovered) */
:is(.lp,.on,.hv:hover) .k-clp{transform-origin:24px 23px;animation:k-clp var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-osk{transform-origin:24px 20px;animation:k-osk var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-ors{transform-origin:24px 27px;animation:k-ors var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-krf{animation:k-krf var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-trc{animation:k-trc var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-eml{animation:k-eml var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-emc{animation:k-emc var(--d) linear var(--it)}
:is(.lp,.on,.hv:hover) .k-slt{animation:k-slt var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-skw{animation:k-skw var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-sks{animation:k-sks var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-pen{animation:k-pen var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-ph4{animation:k-ph4 var(--d) ease-out var(--it)}
:is(.lp,.on,.hv:hover) .k-phl{animation:k-phl var(--d) ease-in-out var(--it)}
:is(.lp,.on,.hv:hover) .k-phf{animation:k-phf var(--d) ease-out var(--it)}
@keyframes k-clp{0%,8%{transform:none}20%{transform:scale(1.12)}34%,50%{transform:translateY(-5.5px) scale(1.12)}64%{transform:scale(1.12)}72%{transform:scale(.97)}80%,100%{transform:none}}
@keyframes k-osk{0%{transform:translateX(-6.6px) scaleX(.25);opacity:0}6%{opacity:1}25%{transform:none}44%{opacity:1}50%{transform:translateX(6.6px) scaleX(.25);opacity:0}50.01%{transform:translateX(-6.6px) scaleX(.25);opacity:0}56%{opacity:1}75%{transform:none}94%{opacity:1}100%{transform:translateX(6.6px) scaleX(.25);opacity:0}}
@keyframes k-ors{0%,10%{transform:none}30%,44%{transform:scale(1.04,.7)}58%{transform:scale(.98,1.08)}68%,100%{transform:none}}
@keyframes k-krf{0%,4%{stroke-dashoffset:54;stroke:#ffb347;opacity:1}76%{stroke-dashoffset:0;stroke:#ffb347;opacity:1}88%{stroke-dashoffset:0;stroke:#262c34;opacity:1}100%{stroke-dashoffset:0;stroke:#262c34;opacity:0}}
@keyframes k-trc{0%,4%{transform:translate(34.5px,24.5px)}10%{transform:translate(33.09px,27.4px)}16%{transform:translate(29.25px,29.52px)}22%{transform:translate(24px,30.3px)}28%{transform:translate(18.75px,29.52px)}34%{transform:translate(14.91px,27.4px)}40%{transform:translate(13.5px,24.5px)}46%{transform:translate(14.91px,21.6px)}52%{transform:translate(18.75px,19.48px)}58%{transform:translate(24px,18.7px)}64%{transform:translate(29.25px,19.48px)}70%{transform:translate(33.09px,21.6px)}76%{transform:translate(34.5px,24.5px)}80%,100%{transform:translate(34.5px,24.5px)}}
@keyframes k-eml{0%,8%{transform:translate(17.4px,15.4px)}22%{transform:translate(17.4px,23.4px)}70%{transform:translate(30.6px,27.6px)}84%{transform:translate(30.6px,19.6px)}100%{transform:translate(17.4px,15.4px)}}
@keyframes k-emc{0%,22%,70%,100%{opacity:0;transform:none}30%,46%,62%{opacity:1;transform:translate(-1px,-.6px)}38%,54%{opacity:.4;transform:translate(-2px,-1.4px)}}
@keyframes k-slt{0%,22%{stroke-dashoffset:14;opacity:1}70%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes k-skw{0%,6%{stroke-dashoffset:23;opacity:1}52%{stroke-dashoffset:0;opacity:1}62%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes k-sks{0%,56%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
@keyframes k-pen{0%,6%{transform:translate(13.6px,26.1px)}16%{transform:translate(17px,26.2px)}28%{transform:translate(21.5px,27.6px)}40%{transform:translate(27px,29.3px)}52%{transform:translate(34.4px,30.9px)}66%{transform:translate(34.4px,27.4px)}88%,100%{transform:translate(13.6px,26.1px)}}
@keyframes k-ph4{0%,22%{opacity:0;transform:scale(1.6)}32%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}
@keyframes k-phl{0%,36%{stroke-dashoffset:42;opacity:1}76%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes k-phf{0%,8%{opacity:0}12%{opacity:.85}24%,100%{opacity:0}}
.ic .k-ph4{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}