/* 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;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16191d; --panel:#1f2328; --panel2:#272c32; --ink:#e8ebee; --mute:#959ea8; --line:#343a42;
  --blue:#7fb0ff; --blue-soft:#1c2a3f; --acc:#2f6fd6; --on-acc:#ffffff; --good:#5cc08c; --warn:#e0b04a; --bad:#ef7a72; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16191d; --panel:#1f2328; --panel2:#272c32; --ink:#e8ebee; --mute:#959ea8; --line:#343a42;
  --blue:#7fb0ff; --blue-soft:#1c2a3f; --acc:#2f6fd6; --on-acc:#ffffff; --good:#5cc08c; --warn:#e0b04a; --bad:#ef7a72; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);margin:0}
.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:8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:2}
.tabs button{font:600 1.02rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;border:0;border-radius:5px;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:8px;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:6px;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:6px;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);letter-spacing:.03em}
.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:8px;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;letter-spacing:.03em}
.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:6px;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:6px;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:8px;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:6px;padding:.55rem .6rem;resize:vertical;min-height:2.8rem}
.btn{font:600 1rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:6px;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:6px;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:8px;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;letter-spacing:.02em}
.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:6px;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:999px;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:6px}
.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:8px;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);letter-spacing:.04em;text-transform:uppercase}.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:6px;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:8px;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:8px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.sheet-ed .ttl{font:700 1.1rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.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:6px;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(--display);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:12px}
.pg-h{display:flex;align-items:center;gap:10px}.pg-h h2,.pg-t{font:700 1.5rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;margin:0;flex:1}
.seg{border-radius:10px;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:14px;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:99px;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:99px;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:99px;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:9px;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);letter-spacing:.03em;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:99px;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:12px}
.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:12px;padding:12px}
details.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;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);letter-spacing:.05em;text-transform:uppercase;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);letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:var(--on-acc);border:0;border-radius:14px;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:20px 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:10px;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:12px;padding:10px 12px;color:var(--ink);cursor:pointer;font:inherit}
.ex button b{display:block;font:700 1.05rem var(--display);letter-spacing:.05em;text-transform:uppercase}
.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:8px;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:10px;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:8px;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:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.search{width:100%;padding:.7rem .8rem;border-radius:12px;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:12px;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:8px;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:7px;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);letter-spacing:.05em;text-transform:uppercase;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);letter-spacing:.06em;text-transform:uppercase;background:var(--acc);color:var(--on-acc);border-radius:10px;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:12px;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:8px;padding:.45rem .75rem;cursor:pointer}
.supform{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
#ld-tab table{font-size:.85rem}

.tool{background:var(--panel);border:1px solid var(--line);border-radius:12px;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:8px;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:10px;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:8px;bottom:8px;background:rgba(20,24,29,.82);color:#fff;font:600 .75rem var(--body);border-radius:99px;padding:.3rem .7rem;pointer-events:auto}
.ph-zoom button{border:0;background:none;color:#8fc3ff;font:700 .75rem var(--body);padding:0;cursor:pointer}
.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:10px;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:10px;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:12px;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:10px;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:12px;padding:10px;margin:-2px 0 12px}
.bread img{width:84px;height:84px;object-fit:cover;border-radius:8px;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:8px;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:12px;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:99px;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:12px;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:10px;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);letter-spacing:.06em;text-transform:uppercase;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:10px;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:10px;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))}