:root {
  --viewer: #003a4a;
  --viewer-line: rgba(255, 255, 255, 0.14);
  --green-dark: #3f6214;
  --line-dark: #dce6e4;
  --viewer-text: #f4f7f6;
}

.explorer-shell {
  --line: var(--viewer-line);
  --white: var(--viewer-text);
}

.exploded-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 62px;
  padding: 0 clamp(18px, 3vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
}
.exploded-header .brand { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:850; letter-spacing:.11em; text-decoration:none; }
.exploded-header nav { display:flex; align-items:center; gap:clamp(13px,2vw,30px); font-size:12px; }
.exploded-header nav a { text-decoration:none; color:#38433f; }
.exploded-header nav a.active { font-weight:800; color:var(--seeed-blue); }

.intro {
  width: min(var(--max),100%);
  margin: 0 auto;
  padding: clamp(70px,8vw,130px) clamp(22px,4vw,72px) clamp(70px,7vw,110px);
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  align-items:end;
  gap:clamp(40px,7vw,130px);
}
.intro-kicker,.section-id,.rail-title,.inspector-kicker,.view-label { font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.intro-kicker { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin-bottom:-10px; }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--seeed-green); box-shadow:0 0 0 6px rgba(143,195,31,.16); }
.intro h1 { margin:0; font-size:clamp(68px,9vw,152px); line-height:.79; letter-spacing:-.073em; font-weight:790; }
.intro h1 em { font-style:normal; color:var(--green-dark); }
.intro-copy { padding-bottom:10px; }
.intro-copy > p { margin:0 0 32px; font-size:clamp(18px,1.55vw,24px); line-height:1.48; color:#42504a; max-width:650px; }
.intro-meta { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-dark); }
.intro-meta span { padding:15px 10px 0 0; border-right:1px solid var(--line-dark); font-size:11px; color:#68736e; }
.intro-meta span:last-child { border-right:0; padding-left:10px; }
.intro-meta span:nth-child(2) { padding-left:10px; }
.intro-meta strong { display:block; font-size:27px; color:var(--seeed-blue); letter-spacing:-.04em; }

.explorer-shell {
  width:min(100%,1900px);
  margin:0 auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 320px;
  min-height:790px;
  background:var(--viewer);
  color:var(--viewer-text);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.group-rail,.inspector { padding:24px 18px; background:#022c38; }
.group-rail { border-right:1px solid var(--line); overflow:auto; }
.inspector { border-left:1px solid var(--line); }
.rail-title,.inspector-kicker { color:#85928c; margin-bottom:18px; }
.group-button {
  width:100%; display:grid; grid-template-columns:28px 1fr; text-align:left; gap:0 8px;
  border:0; border-top:1px solid var(--line); padding:16px 3px; background:transparent; color:#cbd1ce;
}
.group-button:last-child { border-bottom:1px solid var(--line); }
.group-button span { grid-row:1 / span 2; color:#68746e; font-size:10px; }
.group-button strong { font-size:13px; font-weight:720; }
.group-button small { color:#69756f; font-size:10px; margin-top:3px; }
.group-button.active { color:var(--white); }
.group-button.active span { color:var(--seeed-green); }
.group-button.active strong::after { content:""; display:inline-block; width:6px; height:6px; margin-left:7px; border-radius:50%; background:var(--seeed-green); }
.rail-note { margin-top:24px; padding:14px; border:1px solid var(--line); color:#7d8a84; font-size:10px; line-height:1.55; }

.viewport-panel { min-width:0; display:grid; grid-template-rows:58px minmax(0,1fr); }
.viewport-topbar { display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); }
.viewport-topbar > div:first-child { display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; min-width:0; }
.view-label { color:var(--white); }
.load-state { color:#65716b; font-size:10px; }
.selection-line { color:#9aa59f; font-size:12px; letter-spacing:0; text-transform:none; font-weight:500; }
.selection-line strong { color:#f7f8f3; font-weight:700; }
.view-actions { display:flex; gap:10px; align-items:center; }
.view-filter { display:flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(0,0,0,.15); }
.view-filter-label { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#9aaba3; }
.view-actions button { padding:7px 10px; border:1px solid var(--line); background:transparent; color:#c3cac6; border-radius:999px; font-size:10px; }
.view-actions button:hover { border-color:#77827c; color:white; }
.view-actions button:disabled { opacity:.35; color:#6d756f; border-color:#3a4440; cursor:not-allowed; pointer-events:none; }
#view-empty { position:absolute; inset:0; z-index:8; display:grid; place-items:center; background:#fbfcf8; color:#003a4a; }
#view-empty[hidden] { display:none !important; }
#assembly-mode-controls,
#assembly-version-controls { display:flex; gap:4px; }
#assembly-mode-controls[hidden],
#assembly-version-controls[hidden] { display:none !important; }
#assembly-mode-controls button,
#assembly-version-controls button { padding:7px 10px; border:1px solid var(--line); background:transparent; color:#c3cac6; border-radius:999px; font-size:10px; }
#assembly-mode-controls button[aria-pressed="true"],
#assembly-version-controls button[aria-pressed="true"] { background:#9fd21b; color:#003a4a; }
#assembly-status { font-size:12px; color:#c3cac6; }
.explode-control[hidden] { display:none !important; }
.viewport { position:relative; overflow:hidden; min-height:650px; background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
  radial-gradient(circle at 50% 50%,#0c4a5c 0,#003a4a 64%);
  background-size:36px 36px,36px 36px,auto;
}
.viewport::before { content:""; position:absolute; inset:9%; border:1px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }
#model-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:4; }
.reference-ghost { position:absolute; inset:15% 25%; z-index:1; opacity:.035; filter:grayscale(1) invert(1); pointer-events:none; }
.reference-ghost img { width:100%; height:100%; object-fit:contain; }
.fallback-map { position:absolute; inset:18% 11%; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; opacity:.42; transition:opacity .3s; }
.fallback-layer { flex:1; min-height:260px; border:1px dashed rgba(255,255,255,.26); display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; font-size:10px; letter-spacing:.18em; color:#85918b; }
.layer-dispense { min-height:420px; border-color:rgba(143,195,31,.6); color:var(--seeed-green); }
.group-labels { position:absolute; z-index:5; left:6%; right:6%; bottom:42px; display:grid; grid-template-columns:repeat(5,1fr); text-align:center; pointer-events:none; font-size:9px; letter-spacing:.13em; color:rgba(255,255,255,.26); }
.viewport-help { position:absolute; z-index:6; left:16px; bottom:13px; font-size:9px; letter-spacing:.11em; color:#56625c; }
.step-download { position:absolute; z-index:7; right:16px; bottom:14px; display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; background:#9fd21b; color:#003a4a; font-size:13px; font-weight:750; letter-spacing:.02em; text-decoration:none; box-shadow:0 8px 18px rgba(0,0,0,.28); }
.step-download:hover { background:#b6e34a; }

.inspector { overflow:auto; }
.part-index { color:var(--seeed-green); font-size:10px; letter-spacing:.12em; margin-bottom:28px; }
.inspector h2 { margin:0 0 12px; font-size:34px; line-height:.98; letter-spacing:-.045em; color:var(--viewer-text); }
.part-role { color:#8e9b95; font-size:13px; line-height:1.55; margin:0 0 24px; }
.part-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px; }
.part-facts div { padding:12px 8px 12px 0; border-right:1px solid var(--line); }
.part-facts div:last-child { border-right:0; padding-left:8px; }
.part-facts div:nth-child(2) { padding-left:8px; }
.part-facts span { display:block; color:#64716b; font-size:8px; letter-spacing:.12em; margin-bottom:4px; }
.part-facts strong { font-size:11px; }
.part-size { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 16px; }
.part-size span { color:#64716b; font-size:8px; letter-spacing:.12em; }
.part-size strong { font-size:13px; }
.version-card { border:1px solid var(--line); padding:15px; margin-bottom:10px; }
.version-card.current { border-color:rgba(143,195,31,.35); background:rgba(143,195,31,.05); }
.version-card.previous { opacity:.7; }
.version-card > div { display:flex; justify-content:space-between; gap:14px; }
.version-card span { font-size:8px; letter-spacing:.13em; color:var(--seeed-green); }
.version-card strong { font-size:11px; }
.version-card p { margin:10px 0 0; color:#7e8a84; font-size:11px; line-height:1.5; }
.source-link { display:block; margin-top:20px; padding:12px 0; color:#dce1de; border-bottom:1px solid var(--line); font-size:11px; text-decoration:none; }
.source-link:hover { color:var(--seeed-green); }
.revision-badge { display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--seeed-green); font-size:9px; letter-spacing:.1em; }
.revision-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--seeed-green); }

.replacement-principle,.parts-section,.how-to-update,.cta-band { width:min(var(--max),100%); margin:0 auto; padding-left:clamp(22px,4vw,72px); padding-right:clamp(22px,4vw,72px); }
.replacement-principle { padding-top:clamp(90px,9vw,150px); padding-bottom:clamp(90px,9vw,150px); }
.section-id { color:#68736e; margin-bottom:26px; }
.replacement-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,8vw,150px); align-items:end; }
.replacement-grid h2,.parts-heading h2,.update-copy h2,.cta-band h2 { margin:0; font-size:clamp(44px,5vw,82px); line-height:.93; letter-spacing:-.055em; }
.replacement-grid p { margin:0 0 34px; font-size:19px; line-height:1.55; color:#44514b; }
.revision-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.revision-flow span { padding:22px 10px; font-size:22px; font-weight:800; letter-spacing:-.04em; }
.revision-flow small { font-size:8px; color:#728079; letter-spacing:.12em; }
.revision-flow i { font-style:normal; color:#8a9690; }

.parts-section { border-top:1px solid var(--line-dark); padding-top:clamp(90px,9vw,150px); padding-bottom:clamp(90px,9vw,150px); }
.parts-heading { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,7vw,120px); align-items:end; margin-bottom:70px; }
.parts-heading p { margin:0; color:#58655f; font-size:17px; line-height:1.55; }
.part-group { margin-top:58px; }
.part-group-heading { display:grid; grid-template-columns:220px 1fr; border-top:2px solid var(--seeed-blue); padding-top:13px; margin-bottom:15px; }
.part-group-heading strong { font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.part-group-heading p { margin:0; color:#69756f; font-size:12px; }
.part-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.part-card { position:relative; min-height:260px; padding:18px; display:flex; flex-direction:column; border:1px solid var(--line-dark); background:rgba(255,255,255,.24); transition:transform .18s,background .18s; }
.part-card:hover { transform:translateY(-4px); background:#f6f8f5; }
.part-card-top { display:flex; justify-content:space-between; gap:12px; color:#79857f; font-size:9px; letter-spacing:.11em; }
.part-card h3 { margin:auto 0 10px; font-size:22px; line-height:1.02; letter-spacing:-.04em; }
.part-card p { margin:0; min-height:45px; color:#68746e; font-size:11px; line-height:1.45; }
.part-card-bottom { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:12px; border-top:1px solid var(--line-dark); font-size:9px; }
.part-card-bottom a { text-decoration:none; font-weight:800; }
.part-card.has-replacement { border-color:#76a10c; box-shadow:inset 0 3px 0 var(--seeed-green); }
.part-card.has-replacement .part-card-top span:last-child { color:#567900; font-weight:900; }

.how-to-update { border-top:1px solid var(--line-dark); padding-top:clamp(90px,9vw,150px); padding-bottom:clamp(90px,9vw,150px); }
.update-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(50px,8vw,150px); align-items:start; }
.update-copy p { max-width:620px; margin:28px 0 0; color:#59665f; font-size:17px; line-height:1.58; }
code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.update-grid pre { margin:0; padding:28px; overflow:auto; background:var(--seeed-blue); color:#dbe5df; border-radius:12px; font-size:12px; line-height:1.65; }

.cta-band { margin-bottom:70px; padding-top:54px; padding-bottom:54px; display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; background:var(--seeed-blue); color:white; border-radius:14px; }
.cta-band h2 { color: white; }
.cta-band > div > span { display:block; margin-bottom:24px; color:var(--seeed-green); font-size:9px; font-weight:900; letter-spacing:.14em; }
.cta-band h2 { font-size:clamp(38px,4.4vw,70px); }
.cta-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.cta-actions a { color:white; text-decoration:none; font-size:14px; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:5px; }


@media (max-width: 1180px) {
  .explorer-shell { grid-template-columns:180px minmax(0,1fr); }
  .inspector { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; }
  .inspector-kicker { margin:0; }
  .part-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 860px) {
  .exploded-header nav a:not(.active):not(:last-child) { display:none; }
  .intro,.replacement-grid,.parts-heading,.update-grid,.cta-band { grid-template-columns:1fr; }
  .intro-kicker { grid-column:auto; }
  .intro-meta { margin-top:34px; }
  .explorer-shell { display:block; }
  .group-rail { border-right:0; border-bottom:1px solid var(--line); }
  #group-buttons { display:grid; grid-template-columns:repeat(5,1fr); }
  .group-button { padding:10px 4px; }
  .group-button small,.group-button span,.rail-note { display:none; }
  .viewport { min-height:570px; }
  .inspector { display:block; }
  .part-grid { grid-template-columns:repeat(2,1fr); }
  .part-group-heading { grid-template-columns:1fr; gap:8px; }
}
@media (max-width: 560px) {
  .brand span:last-child { display:none; }
  .intro h1 { font-size:58px; }
  .intro-meta { grid-template-columns:1fr; }
  .intro-meta span { border-right:0; border-bottom:1px solid var(--line-dark); padding:10px 0; }
  .intro-meta span:nth-child(2),.intro-meta span:last-child { padding-left:0; }
  #group-buttons { grid-template-columns:repeat(2,1fr); }
  .viewport { min-height:500px; }
  .viewport-topbar { align-items:flex-start; padding:12px; height:auto; }
  .load-state { display:none; }
  .group-labels { display:none; }
  .revision-flow { grid-template-columns:1fr auto 1fr; }
  .revision-flow span:nth-of-type(3),.revision-flow i:nth-of-type(2) { display:none; }
  .part-grid { grid-template-columns:1fr; }
  .cta-band { border-radius:22px 22px 70px 22px; }
}


/* 3D display standard, pipeline and finish criteria */
.display-standard,.model-pipeline,.finish-criteria {
  width:min(var(--max),100%); margin:0 auto;
  padding:clamp(90px,9vw,150px) clamp(22px,4vw,72px);
  border-top:1px solid var(--line-dark);
}
.model-pipeline { background:var(--surface-alt); }
.standard-heading,.pipeline-heading,.finish-heading {
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,7vw,130px); align-items:end; margin-bottom:56px;
}
.standard-heading h2,.pipeline-heading h2,.finish-heading h2 { margin:0; font-size:clamp(44px,5vw,82px); line-height:.93; letter-spacing:-.055em; }
.standard-heading p,.pipeline-heading p,.finish-heading p { margin:0; max-width:680px; color:#4a5751; font-size:18px; line-height:1.55; }
.standard-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.standard-grid article { min-height:230px; padding:24px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.standard-no { display:block; margin-bottom:36px; color:var(--green-dark); font-size:10px; font-weight:900; letter-spacing:.14em; }
.standard-grid h3,.pipeline-steps h3 { margin:0 0 12px; font-size:22px; letter-spacing:-.035em; }
.standard-grid p,.pipeline-steps p { margin:0; color:#59665f; font-size:13px; line-height:1.6; }
.model-states { margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-dark); }
.model-states > div { padding:20px; border-right:1px solid var(--line-dark); display:grid; grid-template-columns:20px 1fr; gap:2px 10px; align-items:center; }
.model-states > div:last-child { border-right:0; }
.model-states span { font-size:8px; font-weight:900; letter-spacing:.14em; color:#748078; }
.model-states strong { grid-column:2; font-size:11px; font-weight:650; }
.state-swatch { grid-row:1 / span 2; width:14px; height:30px; border:1px solid rgba(17,23,21,.25); display:block; }
.state-swatch.current { background:#d5ff4b; }
.state-swatch.baseline { background:#9aa9a1; }
.state-swatch.previous { background:rgba(154,169,161,.22); }
.state-swatch.proposed { background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(17,23,21,.18) 4px 5px); border-style:dashed; }
.pipeline-steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.pipeline-steps article { min-height:255px; padding:24px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); display:flex; flex-direction:column; }
.pipeline-steps article > span { margin-bottom:38px; color:var(--green-dark); font-size:10px; font-weight:900; letter-spacing:.14em; }
.pipeline-steps code { margin-top:auto; padding-top:20px; color:#6a756f; font-size:10px; }
.tool-stack { margin-top:64px; display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(35px,7vw,120px); align-items:start; }
.tool-kicker { display:block; margin-bottom:18px; font-size:9px; font-weight:900; letter-spacing:.14em; color:#65716b; }
.tool-stack-copy h3 { margin:0 0 16px; font-size:38px; line-height:1; letter-spacing:-.045em; }
.tool-stack-copy p { margin:0; color:#59665f; font-size:14px; line-height:1.65; }
.tool-list { border-top:1px solid var(--line-dark); }
.tool-list a { display:grid; grid-template-columns:1fr 1.5fr auto; gap:18px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line-dark); text-decoration:none; }
.tool-list a:hover strong { color:var(--green-dark); }
.tool-list strong { font-size:13px; }
.tool-list span { font-size:11px; color:#5f6c65; }
.tool-list small { font-size:8px; letter-spacing:.12em; color:#76817b; }
.finish-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.finish-grid div { min-height:120px; padding:22px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); display:grid; grid-template-columns:85px 1fr; gap:15px; align-items:start; }
.finish-grid span { color:var(--green-dark); font-size:9px; font-weight:900; letter-spacing:.13em; }
.finish-grid strong { font-size:15px; line-height:1.45; font-weight:650; }

@media (max-width: 900px) {
  .standard-heading,.pipeline-heading,.finish-heading,.tool-stack { grid-template-columns:1fr; }
  .standard-grid { grid-template-columns:1fr 1fr; }
  .model-states { grid-template-columns:1fr 1fr; }
  .model-states > div:nth-child(2) { border-right:0; }
  .model-states > div:nth-child(-n+2) { border-bottom:1px solid var(--line-dark); }
  .pipeline-steps { grid-template-columns:1fr 1fr; }
  .tool-list a { grid-template-columns:1fr auto; }
  .tool-list a span { grid-column:1 / -1; }
}
@media (max-width: 600px) {
  .standard-grid,.pipeline-steps,.finish-grid,.model-states { grid-template-columns:1fr; }
  .standard-grid article,.pipeline-steps article,.finish-grid div,.model-states > div { border-right:1px solid var(--line-dark); }
  .model-states > div { border-bottom:1px solid var(--line-dark); }
  .model-states > div:last-child { border-bottom:0; }
}

/* Compact workbench: tabs, model, one inspector. */
.workbench-page { background: var(--paper); }
.wb-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: calc(100vh - 72px);
  min-height: 520px;
}
.wb-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 22px 0;
}
.wb-bar .eyebrow { margin: 0; }
.wb-bar p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.wb-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 22px 12px;
  overflow-x: auto;
}
.wb-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcf8;
  color: var(--seeed-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.wb-tabs button[aria-selected="true"] {
  border-color: var(--seeed-green);
  background: #f3f8e8;
  box-shadow: inset 0 -2px 0 var(--seeed-green);
}
.wb-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr) minmax(230px, 1fr);
  min-height: 0;
  margin: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #003a4a;
}
.workbench-page .wb-stage .viewport-panel {
  grid-template-rows: 44px minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}
.workbench-page .wb-stage .viewport { min-height: 0; height: 100%; }
.wb-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fbfcf8;
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.wb-inspector #inspector-content { overflow: auto; flex: 1; min-height: 0; padding: 4px 18px 8px; }
.wb-feed-head { flex: none; padding: 18px 18px 0; }
.wb-welcome { margin-top: 6px; }
.wb-feed { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 8px; }
.wb-card { margin-top: 10px; padding: 12px; border: 1px solid #d5e0d8; border-radius: 10px; background: white; }
.wb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wb-card-title { margin: 0; color: var(--seeed-blue); font-size: 15px; font-weight: 650; line-height: 1.35; }
.wb-card-who { margin-top: 4px; color: #657d3e; font-size: 12px; font-weight: 700; }
.wb-up { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 28px; padding: 2px 8px; border: 1px solid #c9d5cf; border-radius: 999px; background: white; color: var(--seeed-blue); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.wb-up svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wb-up[aria-pressed="true"] { border-color: #8fc31f; background: #f3f8e8; color: #3f6214; }
.wb-up[aria-pressed="true"] svg { fill: currentColor; }
.wb-inspector h2 { margin: 0 0 8px; color: var(--seeed-blue); font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; }
.wb-inspector h3 { margin: 14px 0 4px; color: #4c7413; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.wb-inspector p, .wb-inspector dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.wb-inspector a { color: var(--seeed-blue); font-weight: 700; }
.wb-kicker { margin: 0 0 6px; color: #657d3e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wb-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e1e8e3; }
.wb-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-block-head h3 { margin: 0; }
.wb-raw { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9d5cf; border-radius: 50%; color: var(--seeed-blue); background: white; }
.wb-raw svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.image-zoom { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 12px; border: 0; background: #111; }
.image-zoom img { width: 100%; max-height: calc(100vh - 64px); object-fit: contain; }
.image-zoom button { position: absolute; top: 8px; right: 8px; border: 0; background: white; color: #003a4a; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.image-zoom::backdrop { background: rgba(0,0,0,.72); }
.upload-dialog.upload-dialog form, .upload-compact { gap: 8px; }
.upload-dialog .upload-compact .form-grid { gap: 8px; }
.upload-dialog .file-zone { padding: 8px; }
.wb-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wb-proof-grid figure { margin: 0; }
.wb-proof-grid img, .wb-submission img, .wb-submission video { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; background: #e7ece8; }
.wb-proof-grid figcaption, .wb-submission figcaption { margin-top: 4px; color: #657d3e; font-size: 11px; font-weight: 700; }
.wb-cad { display: inline-flex; margin-top: 10px; min-height: 36px; padding: 7px 12px; font-size: 12px; }
.upload-example { margin: 0; }
.upload-example[hidden] { display: none; }
.wb-submission { margin-top: 10px; padding: 12px; border: 1px solid #d5e0d8; border-radius: 10px; background: white; }
.wb-submission h4 { margin: 0; color: var(--seeed-blue); font-size: 14px; }
.wb-submission p { margin-top: 6px; }
.wb-submission .media { display: grid; gap: 8px; margin-top: 8px; }
.wb-inspector details { margin-top: 14px; }
.wb-inspector summary { cursor: pointer; color: var(--seeed-blue); font-size: 12px; font-weight: 700; }
.wb-inspector details p { margin-top: 8px; }
.wb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 0; }
.wb-facts dt { color: #657d3e; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.wb-back {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--seeed-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.wb-upload { margin: 8px 18px 16px; align-self: flex-start; min-height: 40px; padding: 8px 14px; font-size: 12px; }
.wb-ideas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fbfcf8;
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.wb-ideas-head { padding: 18px 18px 0; }
.wb-ideas h2 { margin: 0; color: var(--seeed-blue); font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; }
.idea-scroll { flex: 1; min-height: 0; overflow: auto; margin: 12px 0; }
.idea-scroll.is-scrolling { overflow: hidden; mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.idea-track { display: flex; flex-direction: column; gap: 22px; padding: 0 18px; }
.idea-scroll.is-scrolling .idea-track { animation: idea-rise var(--idea-duration, 24s) linear infinite; }
.idea-scroll.is-scrolling:hover .idea-track, .idea-scroll.is-scrolling:focus-within .idea-track { animation-play-state: paused; }
.idea-line { margin: 0; color: var(--seeed-blue); font-size: 15px; font-weight: 650; line-height: 1.45; }
.idea-line span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
.idea-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.idea-thumbs button { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #e7ece8; cursor: zoom-in; }
.idea-thumbs img { width: 100%; height: 100%; object-fit: cover; }
@keyframes idea-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.wb-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 10px 22px 12px;
  list-style: none;
}
.wb-strip li { min-width: 0; color: var(--muted); font-size: 11px; }
.wb-strip strong { display: block; color: var(--seeed-blue); font-size: 12px; font-weight: 650; }
.wb-strip .is-now strong { color: #3f6214; }
.upload-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.upload-dialog::backdrop { background: rgba(0, 58, 74, .45); }
.upload-dialog h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.15; letter-spacing: -.04em; }
.upload-dialog .dialog-top { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.upload-dialog .dialog-close { border: 0; background: transparent; color: var(--seeed-blue); font-size: 20px; line-height: 1; cursor: pointer; }
.upload-dialog form { display: grid; gap: 12px; margin-top: 14px; }
.upload-dialog label { display: grid; gap: 6px; color: var(--seeed-blue); font-size: 12px; font-weight: 700; }
.upload-dialog input, .upload-dialog select, .upload-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid #c9d5cf; border-radius: 6px; background: white; color: var(--ink); font: inherit; font-weight: 500; }
.upload-dialog .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upload-dialog .file-zone { padding: 12px; border: 1px dashed #b7c8c0; border-radius: 8px; background: white; }
.upload-dialog .file-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.upload-dialog .dialog-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 16px; }
.upload-dialog .upload-status, .upload-dialog .upload-target, .upload-dialog .form-note, .upload-dialog .dialog-intro { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.upload-dialog .upload-status[data-state="error"] { color: #8a3b2a; }
.upload-dialog .upload-status[data-state="ok"] { color: #3f6214; }
@media (max-width: 860px) {
  .wb-workspace { height: auto; min-height: 0; }
  .wb-stage { grid-template-columns: 1fr; }
  .workbench-page .wb-stage .viewport { height: 420px; min-height: 420px; }
  .wb-inspector, .wb-ideas { border-left: 0; border-top: 1px solid var(--line); }
  .wb-ideas { min-height: 280px; }
  .wb-tabs { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .upload-dialog .form-grid, .wb-facts, .wb-strip { grid-template-columns: 1fr; }
  .wb-bar, .wb-tabs, .wb-strip { padding-inline: 16px; }
  .wb-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .wb-tabs button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-tabs button { transition: none; }
  .idea-scroll.is-scrolling .idea-track { animation: none; }
  .idea-scroll { overflow: auto; mask-image: none; }
}
.software-demo { position: absolute; inset: 0; z-index: 5; display: flex; overflow: auto; padding: 18px; background: #062f3b; }
.software-demo.is-vending { display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 12px; background: #0e1418; }
.software-demo.is-operator { display: block; overflow: hidden; padding: 0; background: #f6faef; }
.software-demo[hidden] { display: none !important; }
.software-demo.is-invite { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; background: #fbfcf8; color: #003a4a; }
.software-empty { margin: 0; display: grid; place-items: center; }
.idea-invite { display: grid; justify-items: center; gap: 16px; max-width: 340px; text-align: center; }
.idea-invite p { margin: 0; color: #003a4a; font-size: 20px; font-weight: 650; letter-spacing: -.03em; line-height: 1.35; }
#view-empty .wb-upload, .software-empty .wb-upload { margin: 0; align-self: center; }
.ops-frame { width: 100%; height: 100%; border: 0; display: block; background: #f6faef; }
.wio-stage { flex: 1; width: 100%; height: 100%; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; align-content: stretch; }
.wio-bezel { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 10px; container-type: size; background: #11181d; border-radius: 18px; box-shadow: inset 0 0 0 2px #2a343c, 0 16px 40px rgba(0,0,0,.35); }
.wio-slot { width: min(100cqw, calc(100cqh * 320 / 240)); aspect-ratio: 320 / 240; max-height: 100%; overflow: hidden; background: #06283E; }
.wio-lcd { width: 320px; height: 240px; position: relative; transform-origin: 0 0; overflow: hidden; background: #06283E; color: #EAF4F9; font-family: "Courier New", ui-monospace, monospace; }
.lcd-status, .lcd-hint { position: absolute; left: 0; width: 320px; height: 26px; background: #001018; font-size: 8px; }
.lcd-status { top: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid #8FC31F; }
.lcd-status b { color: #8FC31F; }
.lcd-status span { color: #8FAEC2; }
.lcd-status em { margin-left: auto; color: #8FC31F; font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.lcd-status em i, .lcd-mark { display: block; }
.lcd-mark { width: 12px; height: 12px; border-radius: 3px; background: #8FC31F; }
.lcd-status em i { width: 6px; height: 6px; border-radius: 50%; background: #8FC31F; }
.lcd-hint { top: 214px; border-top: 1px solid #1E3C52; color: #8FAEC2; line-height: 26px; padding-left: 12px; white-space: nowrap; }
.lcd-medal { position: absolute; left: 130px; top: 50px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; background: #082C40; }
.lcd-medal svg { width: 32px; height: 32px; }
.lcd-medal.accent-green { background: #142A0A; }
.lcd-medal.accent-red { background: #321012; }
.lcd-medal.accent-amber { background: #322406; }
.lcd-medal.accent-info { background: #082432; }
.accent-green { color: #8FC31F; }
.accent-red { color: #FF5B62; }
.accent-amber { color: #FFB020; }
.accent-info { color: #43B4E4; }
.is-muted { color: #8FAEC2; }
.lcd-copy { position: absolute; left: 12px; right: 12px; top: 116px; text-align: center; }
.lcd-kicker { font-size: 8px; }
.lcd-headline { margin-top: 6px; color: #EAF4F9; font-size: 22px; line-height: 1; }
.lcd-sub { margin-top: 8px; color: #8FAEC2; font-size: 8px; }
.lcd-dispense { position: absolute; left: 18px; top: 44px; width: 284px; }
.lcd-dispense-title { margin-top: 10px; font-size: 24px; line-height: 1; }
.lcd-dispense-servo { margin-top: 10px; color: #8FAEC2; font-size: 16px; }
.lcd-dispense .lcd-sub { margin-top: 12px; }
.lcd-dispense b { position: absolute; right: 0; top: 56px; font-size: 16px; }
.lcd-progress { position: absolute; left: 18px; top: 168px; width: 284px; height: 14px; border: 1px solid #1E3C52; border-radius: 4px; }
.lcd-progress span { display: block; height: 10px; margin: 1px 2px; background: #8FC31F; border-radius: 3px; }
.lcd-select-head { position: absolute; top: 6px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: baseline; font-size: 16px; }
.lcd-select-head em { margin-left: auto; color: #8FAEC2; font-size: 8px; font-style: normal; }
.lcd-balance { position: absolute; top: 30px; left: 8px; width: 304px; display: flex; justify-content: space-between; padding-bottom: 4px; border-bottom: 1px solid #1E3C52; color: #8FAEC2; font-size: 8px; }
.lcd-row { position: absolute; left: 6px; width: 308px; height: 27px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 5px; background: #082C40; font-size: 16px; }
.lcd-row.is-hot { background: #142A0A; box-shadow: inset 0 0 0 1px #8FC31F; }
.lcd-row span { flex: 1; overflow: hidden; font-size: 13px; white-space: nowrap; }
.lcd-row em { color: #8FAEC2; font-size: 8px; font-style: normal; }
.lcd-row strong { min-width: 46px; font-size: 14px; text-align: right; }
.wio-lcd .lcd-buy, .wio-lcd .lcd-clear { position: absolute; height: 30px; border-radius: 6px; border: 2px solid #8FC31F; background: transparent; color: #8FC31F; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.wio-lcd .lcd-buy { left: 10px; width: 180px; }
.wio-lcd .lcd-clear { left: 200px; width: 110px; border-color: #FF5B62; color: #FF5B62; }
.wio-lcd .lcd-buy.is-hot { background: #8FC31F; color: #06283E; }
.wio-lcd .lcd-clear.is-hot { background: #FF5B62; color: #06283E; }
.wio-dock { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; }
.wio-controls { width: auto; flex: none; display: flex; align-items: center; gap: 16px; }
.wio-key-a, .wio-pad button { border: 0; border-radius: 8px; background: #1c262c; color: #d5e2ea; font-weight: 800; cursor: pointer; }
.wio-key-a { width: 44px; height: 36px; }
.wio-pad { display: grid; grid-template-columns: 34px 34px 34px; grid-template-areas: ". up ." "left press right" ". down ."; gap: 4px; }
.wio-pad [data-key="up"] { grid-area: up; }
.wio-pad [data-key="left"] { grid-area: left; }
.wio-pad [data-key="press"] { grid-area: press; }
.wio-pad [data-key="right"] { grid-area: right; }
.wio-pad [data-key="down"] { grid-area: down; }
.wio-pad button { height: 30px; }
.wio-caption { margin: 0; color: #9fb0ba; font-size: 12px; text-align: center; }
.rfid-row { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; align-items: center; }
.rfid-card { flex: 1 1 0; width: auto; min-width: 0; min-height: 58px; padding: 8px 10px; border: 0; border-top: 4px solid #8FC31F; border-radius: 8px; background: linear-gradient(#fff, #f4f7f2); color: #06283E; text-align: left; box-shadow: 0 8px 18px rgba(0,0,0,.25); cursor: pointer; }
.rfid-card span, .rfid-card small { display: block; overflow: hidden; }
.rfid-card span { font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.rfid-card small { color: #4d6573; letter-spacing: 0; font-size: 10px; line-height: 1.25; white-space: normal; }
.rfid-card:disabled { opacity: .45; cursor: default; }