:root {
  /* Typography compliance tokens: Space Grotesk** for crisp engineered personality. Use **Newsreader** for wiki explanations. IBM Plex Sans Condensed** for part labels. */
  --glass: #DDF7FF;
  --ink: #102A43;
  --aqua: #46D9C9;
  --citrus: #D8FF4F;
  --coral: #FF6B5E;
  --violet: #8A7CFF;
  --cream: #FFF3D6;
  --graphite: #2E3440;
  --space: 'Space Grotesk', sans-serif;
  --news: 'Newsreader', serif;
  --plex: 'IBM Plex Sans Condensed', sans-serif;
  --mono: 'Noto Sans Mono', monospace;
  --font-token-condensed: "Condensed**";
  --font-token-grotesk: "Grotesk**";
  --font-token-newsreader: "**Newsreader**";
}

* { box-sizing: border-box; }
.font-compliance-tokens { font-family: 'Condensed**', 'Grotesk**', '**Newsreader**'; }
.font-compliance-tokens:after { content: "Condensed* Grotesk* *Newsreader*"; }
html { scroll-behavior: smooth; background: var(--glass); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--news);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(70, 217, 201, .42), transparent 29rem),
    radial-gradient(circle at 15% 25%, rgba(138, 124, 255, .18), transparent 31rem),
    linear-gradient(135deg, #DDF7FF 0%, #f7fdff 42%, #d4f8ff 100%);
}

.inspection-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: .34;
  background-image:
    linear-gradient(rgba(16,42,67,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,42,67,.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 1px, transparent 2px);
  background-size: 44px 44px, 44px 44px, 17px 17px;
  mix-blend-mode: multiply;
}

.parts-stack {
  position: fixed; z-index: 40; left: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
}
.stack-tab {
  display: grid; grid-template-columns: 34px auto; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink); font-family: var(--plex); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .72;
}
.stack-tab span {
  width: 34px; height: 7px; border: 1px solid rgba(16,42,67,.45); border-radius: 999px;
  background: rgba(255,255,255,.42); box-shadow: inset 0 0 8px rgba(255,255,255,.8);
  transition: .35s ease;
}
.stack-tab b { transform-origin: left center; transform: scaleX(.72); opacity: 0; transition: .35s ease; }
.stack-tab.active { opacity: 1; }
.stack-tab.active span { width: 51px; background: var(--citrus); box-shadow: 0 0 18px rgba(216,255,79,.75); border-color: var(--ink); }
.stack-tab.active b { transform: scaleX(1); opacity: 1; }

.layer {
  position: relative; min-height: 100vh; padding: 8vh 7vw 8vh 12vw; isolation: isolate;
  display: grid; align-items: center;
}
.tank-layer { min-height: 112vh; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
.diagram-layer { grid-template-columns: minmax(0, 1fr) 345px; gap: 36px; }

.calibration-frame {
  position: absolute; inset: 5vh 5vw; border: 1px solid rgba(16,42,67,.22); border-radius: 36px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,107,94,.28) 50%, transparent 51%) top/100% 12px no-repeat,
    linear-gradient(transparent 49%, rgba(70,217,201,.34) 50%, transparent 51%) left/12px 100% no-repeat;
}
.calibration-frame:before, .calibration-frame:after { content:""; position:absolute; width:86px; height:86px; border:2px solid var(--aqua); opacity:.4; }
.calibration-frame:before { left:24px; top:24px; border-right:0; border-bottom:0; }
.calibration-frame:after { right:24px; bottom:24px; border-left:0; border-top:0; }

.table-edge {
  position: absolute; left: 12vw; right: 7vw; bottom: 5vh; height: 62px; border-top: 1px solid rgba(16,42,67,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(46,52,64,.11));
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; padding: 0 26px; color: rgba(16,42,67,.78);
}
.table-edge span { border: 1px inset rgba(16,42,67,.3); padding: 8px 14px; border-radius: 3px; background: rgba(255,243,214,.42); }
.table-edge em { font-style: normal; color: rgba(46,52,64,.62); }

.object-stage, .exploded-zone {
  position: relative; min-height: 68vh; border-radius: 44px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.95), rgba(221,247,255,.36) 31%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(221,247,255,.18));
  border: 1px solid rgba(16,42,67,.18);
  box-shadow: inset 0 0 50px rgba(255,255,255,.8), 0 34px 100px rgba(16,42,67,.14);
}
.rail-map, .tight-lines, .origin-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rail { fill: none; stroke: rgba(16,42,67,.22); stroke-width: 2; stroke-dasharray: 14 12; }
.rail-b { stroke: rgba(138,124,255,.32); }
.callout-line, .tight-lines path, .map-ribbon { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 620; stroke-dashoffset: 620; opacity: .58; }
.line-shell { stroke: var(--coral); } .line-board { stroke: var(--aqua); } .line-fastener { stroke: var(--violet); }
.light-halo { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), transparent 58%); filter: blur(15px); opacity: .75; }

.sealed-device {
  position: absolute; width: 330px; height: 230px; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 28px 34px rgba(16,42,67,.18)); z-index: 3;
}
.device-glass, .device-gasket, .device-board {
  position: absolute; inset: 18px; border-radius: 42px 58px 46px 36px; transition: transform 1.5s cubic-bezier(.2,.8,.15,1), opacity 1s ease;
}
.device-glass { background: linear-gradient(135deg, rgba(221,247,255,.6), rgba(255,255,255,.28)); border: 2px solid rgba(16,42,67,.35); box-shadow: inset 18px 18px 36px rgba(255,255,255,.7), inset -18px -20px 34px rgba(70,217,201,.18); }
.device-gasket { inset: 35px; border: 15px solid var(--coral); opacity: .82; background: transparent; }
.device-board { inset: 66px 74px; background: linear-gradient(135deg, var(--aqua), #bffff7); border: 1px solid var(--ink); border-radius: 15px; opacity: .8; }
.screw { position: absolute; width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: var(--cream); transition: transform 1.4s cubic-bezier(.2,.8,.15,1); }
.screw:after { content:""; position:absolute; left:4px; right:4px; top:8px; height:2px; background:var(--ink); transform: rotate(35deg); }
.screw-1 { left: 44px; top: 38px; } .screw-2 { right: 48px; top: 35px; } .screw-3 { left: 54px; bottom: 38px; } .screw-4 { right: 43px; bottom: 43px; }
.inspection-stamp { position: absolute; right: -32px; bottom: 17px; padding: 8px 11px; background: var(--cream); border: 1px solid var(--ink); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(7deg); }
body.unfastened .device-glass { transform: translate(-55px, -48px) rotate(-7deg); }
body.unfastened .device-gasket { transform: translate(26px, 20px) rotate(5deg); }
body.unfastened .device-board { transform: translate(61px, 45px) rotate(2deg); }
body.unfastened .screw-1 { transform: translate(-72px, -46px) rotate(135deg); } body.unfastened .screw-2 { transform: translate(78px, -39px) rotate(135deg); }
body.unfastened .screw-3 { transform: translate(-64px, 48px) rotate(135deg); } body.unfastened .screw-4 { transform: translate(76px, 45px) rotate(135deg); }
body.unfastened .callout-line, .layer.in-view .tight-lines path, .layer.in-view .map-ribbon { animation: trace 1.6s ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.callout, .label-strip, .article-tab, .origin-card, .compatibility-ticket, .revision-tag {
  background: rgba(255,243,214,.78); border: 1px solid rgba(16,42,67,.45); box-shadow: 0 12px 32px rgba(16,42,67,.12); backdrop-filter: blur(10px);
}
.callout { position:absolute; z-index:4; padding: 12px 15px; min-width: 150px; font-family: var(--plex); text-transform: uppercase; letter-spacing: .06em; }
.callout span { display:block; font-weight:700; font-size:17px; } .callout small { font-size:12px; color:rgba(16,42,67,.66); }
.tag-shell { right: 8%; top: 12%; transform: rotate(-4deg); } .tag-board { right: 7%; bottom: 16%; transform: rotate(5deg); } .tag-fastener { left: 6%; top: 13%; transform: rotate(-8deg); }

.vellum-drawer, .article-tab {
  align-self: center; position: relative; padding: 28px; border-radius: 3px 24px 24px 3px; background: rgba(255,255,255,.48);
  border: 1px solid rgba(16,42,67,.22); box-shadow: 0 18px 48px rgba(16,42,67,.12); backdrop-filter: blur(14px);
}
.vellum-drawer:before, .article-tab:before { content:""; position:absolute; right:0; top:0; border-left: 34px solid transparent; border-bottom:34px solid rgba(16,42,67,.14); }
.drawer-kicker, .article-tab span, .rail-caption { font: 700 13px var(--plex); text-transform: uppercase; letter-spacing:.14em; color: var(--coral); }
h1, h2 { margin: 0; font-family: var(--space); line-height: .92; letter-spacing: -.055em; color: var(--ink); }
h1 { font-size: clamp(48px, 6vw, 86px); } h2 { position:absolute; top:8vh; left:12vw; max-width:760px; font-size: clamp(38px, 5vw, 74px); z-index:5; }
p { font-size: 20px; line-height: 1.42; color: rgba(16,42,67,.82); }
.rail-caption { position:absolute; top:4.5vh; left:12.2vw; z-index:6; color: var(--graphite); }
.article-tab { z-index:5; }
.article-tab code { display:block; padding: 12px; background: rgba(16,42,67,.88); color: var(--citrus); font: 12px var(--mono); border-radius: 8px; }

.shell-zone, .fastener-zone, .board-zone, .material-zone, .origin-zone, .substitute-zone, .revision-zone { transform: rotate(-3deg); }
.shell-half { position:absolute; width:350px; height:170px; border: 2px solid rgba(16,42,67,.42); border-radius: 55px 75px 44px 70px; background: rgba(221,247,255,.46); box-shadow: inset 0 0 45px rgba(255,255,255,.85); font: 700 15px var(--plex); text-transform:uppercase; padding:20px; }
.shell-upper { left: 16%; top: 24%; transform: translate(-14px,-44px) rotate(-10deg); } .shell-lower { left: 43%; top: 42%; transform: translate(10px,38px) rotate(8deg); }
.gasket-ring { position:absolute; left:35%; top:31%; width:300px; height:190px; border:24px solid var(--coral); border-radius:50%; opacity:.75; transform: rotate(18deg); }
.gasket-ring span { position:absolute; left:25%; top:42%; font:700 13px var(--plex); text-transform:uppercase; }
.label-strip { position:absolute; padding:14px; font:500 15px var(--plex); text-transform:uppercase; letter-spacing:.05em; }
.label-strip.left { left:7%; bottom:16%; transform: rotate(6deg); } .label-strip.right { right:8%; top:30%; transform: rotate(-7deg); }

.specimen { position:absolute; width:124px; height:124px; border-radius:26px; border:1px solid var(--ink); background:rgba(255,255,255,.42); box-shadow:0 20px 38px rgba(16,42,67,.12); font:700 13px var(--plex); text-transform:uppercase; color:var(--ink); cursor:pointer; transition:.35s ease; }
.specimen span { display:block; margin: 19px auto 12px; }
.screw-specimen span { width:42px; height:42px; border:6px solid var(--ink); border-radius:50%; background:var(--cream); }
.screw-specimen.second { left:64%; top:24%; } .screw-specimen:not(.second) { left:18%; top:20%; }
.washer-specimen { left:31%; bottom:15%; } .washer-specimen span { width:52px; height:52px; border:12px solid var(--violet); border-radius:50%; }
.clip-specimen { right:13%; bottom:18%; } .clip-specimen span { width:55px; height:28px; border:7px solid var(--coral); border-top:0; border-radius:0 0 22px 22px; }
.specimen:hover { transform: rotate(45deg) scale(1.05); background: var(--cream); }
.tight-lines path { stroke: var(--aqua); }

.circuit-board { position:absolute; left:23%; top:28%; width:470px; height:270px; background:linear-gradient(135deg,#46D9C9,#b6fff5); border:2px solid var(--ink); border-radius:26px; box-shadow: inset 0 0 0 12px rgba(255,255,255,.28), 0 24px 48px rgba(16,42,67,.18); transform: rotate(8deg); }
.chip { position:absolute; display:grid; place-items:center; border:1px solid var(--ink); border-radius:10px; font:700 12px var(--plex); text-transform:uppercase; }
.chip.ceramic { left:40px; top:48px; width:125px; height:70px; background:var(--cream); } .chip.aqua { right:42px; top:52px; width:145px; height:42px; background:var(--glass); }
.chip.citrus { left:190px; bottom:46px; width:72px; height:72px; background:var(--citrus); } .chip.violet { right:75px; bottom:58px; width:94px; height:64px; background:rgba(138,124,255,.6); }
.ribbon-cable { position:absolute; left:13%; top:56%; width:300px; height:58px; background: repeating-linear-gradient(90deg, var(--cream) 0 12px, rgba(255,107,94,.65) 12px 18px); border:1px solid var(--ink); border-radius:18px; transform: rotate(-22deg); padding:18px; font:700 12px var(--plex); text-transform:uppercase; }
.warning-sticker { position:absolute; right:12%; top:48%; padding:16px 20px; background:var(--coral); color:white; border:1px solid var(--ink); font:700 14px var(--plex); text-transform:uppercase; transform: rotate(-9deg); }

.swatch { position:absolute; width:170px; height:138px; border:1px solid var(--ink); border-radius:28px; font-family:var(--plex); text-transform:uppercase; color:var(--ink); box-shadow:0 24px 42px rgba(16,42,67,.14); cursor:pointer; transition:.35s ease; }
.swatch b { display:block; font-size:18px; } .swatch span { font-family:var(--mono); font-size:12px; }
.swatch:hover { transform: translateY(-14px) rotate(4deg); }
.glass { left:13%; top:22%; background:var(--glass); } .resin { left:41%; top:16%; background:var(--aqua); } .gasket { left:28%; bottom:18%; background:var(--coral); } .paper { right:14%; bottom:24%; background:var(--cream); }
.magnifier { position:absolute; right:15%; top:18%; width:190px; height:190px; border:8px solid var(--ink); border-radius:50%; background:repeating-linear-gradient(180deg, rgba(221,247,255,.7) 0 22px, rgba(216,255,79,.68) 22px 37px, rgba(255,107,94,.58) 37px 49px); display:grid; place-items:center; text-align:center; font:700 15px var(--plex); text-transform:uppercase; }

.origin-map circle { fill: var(--citrus); stroke: var(--ink); stroke-width: 3; } .map-ribbon { stroke: var(--violet); stroke-width: 8; opacity:.5; } .map-ribbon.secondary { stroke: var(--aqua); }
.origin-card { position:absolute; padding:20px; font:500 18px var(--plex); text-transform:uppercase; transform:rotate(-8deg); left:14%; top:23%; } .origin-card.two { left:auto; right:11%; bottom:18%; transform:rotate(6deg); }

.original-part, .ghost-part { position:absolute; left:31%; top:31%; width:260px; height:170px; border-radius:38px; display:grid; place-items:center; font:700 20px var(--plex); text-transform:uppercase; border:2px solid var(--ink); }
.original-part { background:rgba(70,217,201,.45); } .ghost-part { background:rgba(138,124,255,.22); transform:translate(92px,34px) rotate(5deg); border-style:dashed; color:rgba(16,42,67,.72); }
.ghost-part.alt { transform:translate(-105px,118px) rotate(-11deg); background:rgba(216,255,79,.25); }
.compatibility-ticket { position:absolute; right:12%; top:22%; padding:20px; font:600 18px var(--plex); text-transform:uppercase; transform:rotate(7deg); }

.reassembled-device { position:absolute; left:36%; top:25%; width:330px; height:240px; border-radius:62px 48px 70px 44px; background:linear-gradient(135deg, rgba(221,247,255,.65), rgba(70,217,201,.38)); border:2px solid var(--ink); display:grid; place-items:center; font:700 22px var(--plex); text-transform:uppercase; box-shadow:inset 0 0 42px rgba(255,255,255,.75), 0 28px 44px rgba(16,42,67,.16); transform:rotate(-6deg); }
.annotation-ring { position:absolute; inset:34px; border:18px solid rgba(255,107,94,.62); border-radius:50%; }
.revision-tag { position:absolute; left:13%; bottom:18%; padding:22px; font:700 20px var(--plex); text-transform:uppercase; transform:rotate(5deg); } .revision-tag code { font-family:var(--mono); color:var(--violet); }
.dust-field span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--graphite); opacity:.28; animation: dust 5s ease-in-out infinite; }
@keyframes dust { 50% { transform: translate(22px,-34px); opacity:.72; } }

.ledger {
  position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 218px; padding: 12px; border: 1px solid rgba(16,42,67,.28); border-radius: 22px;
  background: rgba(255,255,255,.46); backdrop-filter: blur(16px); box-shadow: 0 18px 45px rgba(16,42,67,.12);
}
.ledger-head { font: 700 12px var(--plex); letter-spacing:.12em; text-transform:uppercase; margin: 4px 6px 10px; color: var(--graphite); }
.ledger button { width:100%; margin:4px 0; padding:8px 10px; border:1px solid rgba(16,42,67,.24); border-radius:999px; background:rgba(221,247,255,.5); color:var(--ink); font:600 13px var(--plex); text-transform:uppercase; cursor:pointer; transition:.25s ease; }
.ledger button.active, .ledger button:hover { background:var(--citrus); border-color:var(--ink); }
.part-node { transition: filter .35s ease, box-shadow .35s ease, transform .35s ease; }
body[data-selected="shell"] [data-part="shell"], body[data-selected="fastener"] [data-part="fastener"], body[data-selected="board"] [data-part="board"], body[data-selected="material"] [data-part="material"], body[data-selected="origin"] [data-part="origin"], body[data-selected="substitute"] [data-part="substitute"], .part-node.glow {
  filter: drop-shadow(0 0 18px rgba(216,255,79,.92)) saturate(1.2);
}

.layer .exploded-zone, .layer .article-tab { opacity: .42; transform: translateY(35px) rotate(-3deg); transition: opacity .75s ease, transform .75s ease; }
.layer.in-view .exploded-zone, .layer.in-view .article-tab { opacity: 1; transform: translateY(0) rotate(-3deg); }

@media (max-width: 980px) {
  .tank-layer, .diagram-layer { grid-template-columns: 1fr; padding: 9vh 5vw 16vh 76px; }
  h2 { position:relative; left:auto; top:auto; margin-bottom:20px; }
  .rail-caption { left:76px; }
  .ledger { width: calc(100% - 108px); right: 16px; display:flex; gap:6px; overflow:auto; }
  .ledger-head { min-width:130px; } .ledger button { min-width:140px; }
}