@font-face{font-family:DM;src:url('/fonts/font-0.ttf')}
@font-face{font-family:DM;src:url('/fonts/font-2.ttf');font-weight:600}
:root{--bg:#e5e7df;--panel:#f3f4ee;--ink:#252822;--muted:#71766b;--line:#25282214;--accent:#61744d;--accent-ink:#40552f;--yellow:#e3ae1b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 DM,Arial,sans-serif}
header{position:sticky;top:0;z-index:5;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.brand{font-size:28px;font-weight:600;letter-spacing:-2px;text-decoration:none;color:inherit}
.brand span{font-size:14px;font-weight:400;letter-spacing:0;margin-left:12px}
.site-nav{display:flex;gap:4px}
.site-nav a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:5px;border:1px solid transparent}
.site-nav a:hover{background:var(--panel)}
.site-nav a[aria-current=page]{color:var(--ink);border-color:#2528221c;background:var(--panel);font-weight:600}
button{font:inherit;color:inherit;border:1px solid #2528221c;border-radius:5px;padding:7px 11px;background:transparent;cursor:pointer}
button:hover{background:#e5e7df}
button:focus-visible,input:focus-visible,#viewer:focus-visible{outline:2px solid #687b4e;outline-offset:2px}
button[aria-pressed=true]{background:var(--accent);border-color:transparent;color:#fff}
button.primary{background:var(--accent);color:#fff;border-color:transparent}
button.primary:hover{background:#536541}
h1{font-size:30px;line-height:1.1;letter-spacing:-1px;margin:6px 0 10px}
h2{font-size:18px;letter-spacing:-.3px;margin:0 0 8px}

/* hero: model + panel */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:calc(100dvh - 60px);border-bottom:1px solid var(--line)}
.stage{position:relative;min-height:520px}
#viewer{position:absolute;inset:0;outline:none}
#viewer canvas{display:block;width:100%;height:100%;cursor:grab}
#viewer canvas:active{cursor:grabbing}
#loading{position:absolute;inset:45% 0;text-align:center;color:#687b4e}
.view-hint{position:absolute;top:16px;left:28px;color:var(--muted);font-size:11px;pointer-events:none}
.view-toggles{position:absolute;left:28px;bottom:20px;display:flex;gap:6px;flex-wrap:wrap}
.view-toggles button{background:#f3f4eecc;backdrop-filter:blur(4px)}
.view-toggles button[aria-pressed=true]{background:var(--accent)}
.pick-label{position:absolute;right:20px;bottom:20px;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:12px;box-shadow:0 4px 18px #25282214}
.pick-label b{display:block;font-size:13px}
.panel{background:var(--panel);border-left:1px solid var(--line);padding:26px 28px 28px;overflow:auto}
.eyebrow{margin:0;font-size:11px;letter-spacing:.4px;color:var(--muted)}
.status{color:#9a5b12}
.lede{color:#3b3f37;margin:0 0 16px}
.figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:0 0 22px}
.figures div{background:var(--panel);padding:10px 12px}
.figures dt,.readout dt{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.figures dd{margin:2px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.mech{border-top:1px solid var(--line);padding-top:18px}
.mech-note{color:#4a4e45;font-size:13px;margin:0 0 14px}
.slider-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.slider-label output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
input[type=range]{width:100%;accent-color:#687b4e;margin:6px 0 10px}
.mech-buttons{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px}
.readout dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.ind{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.ind-off{background:#b9bdb2}.ind-green{background:#3fa34d;box-shadow:0 0 0 3px #3fa34d30}.ind-red{background:#c0272d}
.force-bar{position:relative;height:8px;border-radius:4px;background:#dfe2d8;margin:6px 0 10px}
.force-bar span{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:#8a9b75;transition:width .08s}
.force-bar span.ok{background:#3fa34d}
.force-bar .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.warn{margin:12px 0 0;padding:10px 12px;border-radius:6px;background:#fbefc9;border:1px solid #e3ae1b66;font-size:12.5px;color:#5a4206}
.cmp{width:100%;border-collapse:collapse;font-size:12px;margin:14px 0 0}
.cmp th,.cmp td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:400}
.compare{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.compare a{color:var(--accent-ink)}
.mech-status{font-size:13px;margin:0;min-height:40px;color:var(--accent-ink)}

/* sequence */
.sequence{padding:26px 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.steps{list-style:none;margin:10px 0 8px;padding:0;display:flex;gap:0;overflow-x:auto}
.steps li{flex:1;min-width:92px}
.steps button{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:#888e80;font-size:11px;padding:6px 2px;position:relative;border-radius:0}
.steps button:before{content:'';position:absolute;left:-50%;right:50%;top:18px;height:1px;background:#25282220}
.steps li:first-child button:before{display:none}
.steps button span{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border:1px solid #c7cdbf;border-radius:50%;background:var(--bg);font-size:10px}
.steps button[aria-pressed=true]{background:transparent;color:var(--accent-ink);font-weight:600}
.steps button[aria-pressed=true] span{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-text{max-width:900px;margin:6px auto 0;text-align:center;color:#3b3f37;min-height:42px}

/* BOM */
.bom{padding:28px 28px 40px;max-width:1500px;margin:0 auto}
.bom-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.bom-sub{color:var(--muted);font-size:12px;margin:0}
.bom-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
#bom-search{flex:1;min-width:220px;max-width:420px;font:inherit;padding:8px 11px;border:1px solid #2528221c;border-radius:5px;background:var(--panel)}
.chips{display:flex;gap:4px}
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.bom-table{width:100%;border-collapse:collapse;font-size:13px}
.bom-table th{position:sticky;top:0;text-align:left;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:400;padding:10px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.bom-table td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.bom-table tr{cursor:pointer}
.bom-table tbody tr:hover{background:#eceee6}
.bom-table tr.sel{background:#e3ead8}
.bom-table tr.child td{background:#f7f8f3}
.bom-table tr.child td:nth-child(2){padding-left:24px}
.bom-table tr.child td:nth-child(2):before{content:'└ ';color:#b4b9ad}
.c-img{width:96px}
.thumb{width:88px;height:66px;display:grid;place-items:center;border-radius:5px;background:#fff;border:1px solid var(--line);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb svg{width:34px;height:34px;opacity:.55}
.pn{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mb{display:inline-block;font-size:10px;letter-spacing:.8px;padding:2px 7px;border-radius:10px;border:1px solid #2528221c}
.mb.MAKE{background:#fbefc9;border-color:#e3ae1b66}.mb.BUY{background:#dfe8f3;border-color:#2f5d9e44}
.sup{display:block;color:var(--muted);font-size:11px}
.in3d{display:inline-block;margin-left:6px;font-size:9px;color:var(--accent-ink);border:1px solid #61744d55;border-radius:3px;padding:0 4px;vertical-align:1px}
.empty{padding:30px;text-align:center;color:var(--muted)}
footer{text-align:center;padding:14px 12px 18px;font-size:10px;color:#858b7e;border-top:1px solid var(--line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1000px){
 .hero{grid-template-columns:1fr;min-height:0}
 .stage{height:62vh;min-height:380px}
 .panel{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:600px){
 header{height:54px;padding:0 16px}
 .brand{font-size:24px}.brand span{display:none}
 .site-nav a{padding:6px 8px;font-size:13px}
 .view-hint{left:16px}.view-toggles{left:16px;right:16px;bottom:14px}
 .view-toggles button{padding:6px 9px;font-size:12px}
 .pick-label{left:16px;right:16px;bottom:58px;max-width:none}
 .panel,.sequence,.bom{padding-left:16px;padding-right:16px}
 h1{font-size:25px}
 .readout{grid-template-columns:1fr 1fr}
 .bom-table thead{display:none}
 .bom-table,.bom-table tbody{display:block}
 .bom-table tr{display:grid;grid-template-columns:76px 1fr auto;column-gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
 .bom-table tr[hidden]{display:none}
 .bom-table td{display:block;padding:0;border:0}
 .bom-table td:nth-child(1){grid-row:1/5}
 .bom-table td:nth-child(2){grid-column:2}
 .bom-table td:nth-child(4){grid-column:3;grid-row:1}
 .bom-table td:nth-child(4):before{content:'× '}
 .bom-table td:nth-child(3){grid-column:2/4;font-size:12.5px}
 .bom-table td:nth-child(5){grid-column:2/4;font-size:11px;color:var(--muted)}
 .bom-table td:nth-child(6){grid-column:2/4;margin-top:3px}
 .bom-table td:nth-child(6) .sup{display:inline;margin-left:6px}
 .bom-table td:nth-child(7){display:none}
 .bom-table tr.child td{background:transparent}
 .bom-table tr.child{background:#f7f8f3}
 .bom-table tr.child td:nth-child(2){padding-left:0}
 .thumb{width:72px;height:54px}
}