:root { color-scheme: dark; --bg:#0c1420; --panel:#111d2b; --line:#293848; --fg:#e9f0f5; --muted:#a0b2c1; --accent:#bcdf96; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); overflow:hidden; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; }
#topleft { position:absolute; inset:14px auto 14px 14px; width:238px; padding:20px 16px; overflow:auto; z-index:4; }
.back { display:inline-block; color:var(--muted); font-size:12px; text-decoration:none; margin-bottom:32px; }
.eyebrow,.section-label { text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:600; color:var(--accent); }
h1 { font-size:24px; font-weight:600; letter-spacing:-.04em; line-height:1.1; margin:9px 0; }
.subtitle { color:var(--muted); font-size:12px; margin:0 0 24px; }
.btn { color:var(--fg); background:#1a2938; border:1px solid #354758; border-radius:7px; padding:8px 11px; font-size:12px; line-height:1.3; }
.btn:hover { background:#2c4152; }
.btn.primary { display:flex; justify-content:space-between; width:100%; background:var(--accent); color:#172719; border-color:var(--accent); font-weight:650; padding:12px; }
.btn.wide { width:100%; margin-top:8px; padding:10px; text-align:left; }
.btn.small { font-size:11px; padding:7px 9px; }
.btn.on { border-color:var(--accent); color:var(--accent); }
.btn[disabled] { opacity:.4; cursor:default; }
.section-label { color:var(--muted); margin:27px 0 10px; }
.explore-list { display:grid; gap:4px; }
.explore-list button { display:flex; align-items:center; gap:10px; padding:11px 2px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--fg); text-align:left; font-size:13px; }
.explore-list button:hover { color:var(--accent); }
.explore-list button>span:nth-child(2) { flex:1; }
.explore-list i { width:6px; height:28px; border-radius:3px; background:var(--c); }
.explore-list small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.controls { border-top:1px solid var(--line); margin-top:18px; padding-top:13px; }
summary { cursor:pointer; font-size:12px; color:var(--muted); }
.row { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.chip { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:6px; padding:7px; color:var(--fg); background:transparent; font-size:11px; }
.chip i { width:7px; height:7px; border-radius:50%; background:var(--c); }
.chip.on { border-color:var(--c); background:color-mix(in srgb,var(--c) 15%,transparent); }
.keys { margin-top:22px; font-size:10px; line-height:1.8; color:var(--muted); }
.keys b { font-weight:500; color:var(--fg); }
#stage { position:absolute; inset:0 330px 0 266px; }
#stage-head { position:absolute; top:25px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:3; }
#stage-head h2 { font-size:20px; letter-spacing:-.025em; font-weight:500; margin:7px 0 0; }
#app { position:absolute; inset:94px 0 52px; }
#app canvas { display:block; touch-action:none; }
.labels { position:absolute; inset:0; pointer-events:none; }
.lbl { color:#deebf0; display:flex; flex-direction:column; gap:4px; font-size:11px; white-space:nowrap; text-shadow:0 2px 4px #08121b; }
.lbl-name { font-weight:600; }
.lbl-sub { font-size:9px; color:#adc0cd; }
.lbl-part { padding:7px 9px; background:#142432eb; border:1px solid #435968; border-radius:6px; }
.lbl-part .lbl-name { color:#d4e9c1; }
.lbl-part.active { border-color:var(--accent); }
.lbl-cable .lbl-name { color:var(--c); }
#bench-tools { position:absolute; left:50%; transform:translateX(-50%); top:92px; display:flex; gap:8px; align-items:center; z-index:3; white-space:nowrap; }
.segmented { display:flex; background:#0c1621; border:1px solid #3a4b59; border-radius:8px; padding:3px; }
.segmented button { padding:7px 10px; color:var(--muted); background:none; border:0; border-radius:5px; font-size:11px; }
.segmented button.on { color:#172719; background:var(--accent); }
#model-note { position:absolute; bottom:17px; width:100%; text-align:center; font-size:10px; color:#8da2b3; }
#model-note a { color:#b6cbd8; margin-left:8px; }
#hint { position:absolute; bottom:46px; left:15px; right:15px; text-align:center; color:#c7d9e3; font-size:11px; pointer-events:none; }
#hint:empty { display:none; }
#flow-caption { position:absolute; bottom:76px; left:50%; transform:translateX(-50%); background:#163948; border:1px solid #5d9da5; padding:8px 12px; border-radius:20px; color:#bff2eb; font-size:12px; white-space:nowrap; pointer-events:none; }
#inspector { position:absolute; right:14px; top:14px; bottom:14px; width:302px; padding:22px 19px; overflow:auto; }
.ins-kicker { text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-size:10px; margin-bottom:12px; }
#inspector h2 { font-size:22px; letter-spacing:-.035em; line-height:1.15; font-weight:550; margin:0 0 12px; }
#inspector p { font-size:13px; line-height:1.65; }
#inspector h3 { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:24px 0 10px; }
.muted { color:var(--muted); }
.small { font-size:11px !important; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; }
.facts div { padding:10px; border:1px solid var(--line); border-radius:7px; }
.facts dt { font-size:10px; color:var(--muted); }
.facts dd { margin:5px 0 0; font-size:13px; }
.qa dt { font-size:10px; color:var(--accent); margin-top:18px; text-transform:uppercase; letter-spacing:.07em; }
.qa dd { font-size:12px; line-height:1.7; margin:5px 0 0; }
.detail-more { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
ul.parts,ul.ports { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
ul.parts button,ul.ports button { width:100%; display:flex; align-items:center; gap:9px; text-align:left; font-size:12px; line-height:1.4; background:#172737; border:1px solid #304454; color:var(--fg); border-radius:6px; padding:9px; }
ul.parts button:hover,ul.ports button:hover { border-color:var(--accent); }
ul.parts i,ul.ports i,.dot { display:inline-block; width:7px; height:7px; border-radius:2px; flex-shrink:0; }
.takeaway { padding:12px 14px; border-left:2px solid var(--accent); background:#20312d; color:#d6ebc5; }
#bit { position:absolute; bottom:43px; left:15px; right:15px; padding:16px 20px; z-index:3; background:#142332; }
#bit.hidden { display:none; }
.bit-head { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
#bit h3 { margin:12px 0 7px; font-size:20px; letter-spacing:-.025em; font-weight:550; }
#bit p { margin:0; font-size:13px; line-height:1.65; color:#c6d7e1; }
.bit-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.lesson-dots { display:flex; gap:4px; }
.lesson-dots i { height:3px; width:15px; border-radius:2px; background:#405464; }
.lesson-dots i.current { background:var(--accent); }
body.guided #app { bottom:var(--lesson-height,270px); }
body.guided #flow-caption { bottom:calc(var(--lesson-height,270px) + 8px); }
body.guided #hint { display:none; }
#lesson-outline { padding:0; margin:20px 0; list-style:none; counter-reset:lesson; }
#lesson-outline li { counter-increment:lesson; }
#lesson-outline button { color:#96aebb; width:100%; text-align:left; font-size:11px; background:none; border:0; padding:8px 0; line-height:1.5; display:flex; gap:8px; }
#lesson-outline button::before { content:counter(lesson,decimal-leading-zero); color:#66818c; font-size:10px; padding-top:1px; }
#lesson-outline button[aria-current="step"] { color:var(--accent); }
#rack-location { margin-top:18px; display:flex; align-items:center; gap:12px; }
.elevation { display:flex; flex-direction:column; gap:1px; padding:3px; border:1px solid #4b606c; width:32px; flex-shrink:0; }
.elevation i { display:block; height:3px; background:#415363; }
.elevation i.active { background:var(--accent); box-shadow:0 0 7px var(--accent); }
#rack-location p { font-size:11px; line-height:1.6; color:var(--muted); }
#rack-location strong { display:block; color:var(--fg); font-weight:500; }
@media(max-width:1150px) and (min-width:761px) { #topleft { width:208px; } #stage { left:230px; right:286px; } #inspector { width:264px; padding:18px 14px; } #stage-head h2 { font-size:17px; } .lbl-part .lbl-sub { display:none; } }
@media(max-width:760px) {
  #topleft { position:absolute; top:0; left:0; right:0; bottom:auto; width:auto; height:108px; border-radius:0; padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; column-gap:8px; overflow:hidden; }
  .back { grid-column:1/-1; margin:0 0 8px; font-size:10px; }
  #topleft>.eyebrow,#topleft h1,#topleft>.subtitle,#explore-controls,#rack-location,.controls,.keys,#lesson-outline { display:none !important; }
  #topleft .btn.primary,#topleft .btn.wide { margin:0; font-size:11px; height:38px; padding:10px; }
  #stage { left:0; right:0; top:108px; bottom:0; }
  #stage-head { top:12px; left:14px; right:14px; }
  #stage-head h2 { font-size:16px; }
  #stage-head .eyebrow { font-size:8px; }
  #app { top:112px; bottom:190px; }
  #bench-tools { top:66px; }
  #inspector { top:auto; bottom:0; left:0; right:0; height:175px; width:auto; border-radius:12px 12px 0 0; padding:14px 18px; }
  #inspector h2 { font-size:17px; margin-bottom:6px; }
  #inspector p { font-size:12px; margin:5px 0; }
  .ins-kicker { font-size:8px; margin-bottom:7px; }
  #model-note { display:none; }
  #hint { bottom:185px; }
  #flow-caption { bottom:185px; max-width:95%; font-size:10px; }
  .lbl-part { padding:5px; font-size:9px; }
  .lbl-part .lbl-sub { display:none; }
  body.guided #inspector { display:none; }
  #bit { bottom:10px; left:10px; right:10px; padding:12px 14px; }
  #bit h3 { font-size:17px; margin-top:8px; }
  #bit p { font-size:12px; line-height:1.55; }
  .bit-nav { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }