/* © 2026 HowItWorks3D. All rights reserved.
   Unauthorized copying, reproduction, modification, extraction,
   redistribution, resale, or commercial use prohibited without
   prior written permission. */
.dc-page .workspace{align-items:stretch}.dc-page .viewer-shell{min-width:0;display:flex;flex-direction:column}.dc-page .viewport{min-height:390px;flex:1}.dc-page .component-list{max-height:660px}.dc-page .inspector{overflow:auto}.dc-inspect{padding:25px}.dc-inspect h2{font-size:25px;margin:16px 0}.dc-inspect p,.dc-learning p,.dc-guide p{color:#a8b8c7;line-height:1.75;font-size:14px}.dc-inspect h3{margin:22px 0 12px;font-size:13px}.dc-primary{background:#b4cde0!important;color:#162632!important;padding:12px 17px!important;border-radius:7px;display:inline-flex;gap:9px;align-items:center;font-weight:600}.dc-inspect .dc-primary{margin-top:18px}.dc-path,.dc-options{display:flex;gap:12px;padding:12px 16px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #293541;font-size:12px}.dc-path button,.dc-options button,.dc-guide-controls button{display:inline-flex;align-items:center;gap:6px}.dc-options{border-top:1px solid #293541;border-bottom:0}.dc-options label{display:flex;gap:8px;align-items:center}.dc-page select{background:#202d39;color:#cbd8e4;border:1px solid #3c4e5f;border-radius:5px;padding:5px;font-size:11px}.dc-workload{margin-top:30px;padding-top:6px;border-top:1px solid #2d3b47}.dc-workload small,.dc-guide small{color:#8ea2b4;font-size:11px;line-height:1.6;display:block}.dc-meter{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:11px;margin:14px 0;gap:6px}.dc-meter strong{font-weight:500;color:#b6cdde}.dc-meter meter{width:100%;height:5px;accent-color:#81b8b0}.dc-guide{margin-top:20px;padding:25px 30px;display:flex;align-items:center;gap:30px;justify-content:space-between}.dc-guide h2{margin:10px 0;font-size:24px}.dc-guide p{max-width:720px;margin:0 0 8px}.dc-guide-controls{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;max-width:370px}.dc-guide-controls button:not(.dc-primary){border:1px solid #405262;border-radius:6px;padding:9px}.dc-page button:disabled{opacity:.35}.dc-learning{padding:32px;margin-top:25px}.dc-learning h2{margin:14px 0 28px}.dc-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.dc-learning h3{font-size:16px;margin:12px 0}.dc-learning #about-model{border-top:1px solid #31414f;margin-top:25px;padding-top:15px}.dc-learning details{margin:24px 0}.dc-model-label,.dc-flow-label{white-space:nowrap;background:#15232eea;border:1px solid #4d6879;border-radius:5px;padding:7px 10px;color:#d6e7ed;font-size:11px;pointer-events:none}.dc-flow-label{font-size:10px}.dc-fallback{padding:90px 35px;line-height:1.8}.dc-page :focus-visible{outline:2px solid #aadbd2;outline-offset:3px}.dc-page .viewport canvas{touch-action:pan-y}.dc-page .is-fullscreen .viewport{min-height:0}.dc-page .is-fullscreen{overflow:auto}.dc-page .viewer-actions{gap:9px}.dc-page .loading-dom{color:#b9cddd}@media(max-width:1180px){.dc-inspect{padding:20px}.dc-guide{gap:20px}.dc-lessons{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.dc-page .viewport{height:380px;min-height:380px}.dc-page .viewer-toolbar{flex-wrap:wrap;gap:10px}.dc-page .viewer-actions{margin-left:auto}.dc-page .dc-path{gap:8px;font-size:10px}.dc-guide{padding:22px;display:block}.dc-guide-controls{margin-top:18px}.dc-lessons{grid-template-columns:1fr;gap:12px}.dc-learning{padding:22px}.dc-page .inspector{max-height:none}.dc-page .component-list{max-height:70vh}.dc-page .viewport-text .live-status{display:none}.dc-page .view-caption{max-width:75%}.dc-page .view-caption span{font-size:12px}.dc-page .heading-note{display:none}.dc-page .site-header nav a:last-child{display:none}}.dc-part-labels{display:flex;flex-wrap:wrap;gap:6px;width:100%}.dc-part-labels button{border:1px solid #405262;padding:6px 8px;border-radius:4px;font-size:10px}.dc-part-labels button.active{background:#395267}.dc-follow{color:#b6d4e5!important}.dc-page .viewport{overflow:hidden}.dc-page .viewer-shell{height:auto;min-height:700px}.dc-page .dc-guide{margin:0;border:0;border-top:1px solid #293541;border-radius:0;padding:18px 20px;display:block}.dc-page .dc-guide h2{font-size:18px}.dc-page .dc-guide p{font-size:12px;line-height:1.6}.dc-guide-controls{margin-top:12px;max-width:none}.dc-page .dc-guide .eyebrow{font-size:9px}.dc-page .dc-guide .dc-primary{padding:9px 12px!important;font-size:12px}@media(max-width:640px){.dc-page .viewer-shell{height:auto;min-height:0}.dc-page .viewport{flex:none;height:380px;min-height:380px}.dc-page .dc-options{font-size:11px;gap:10px}.dc-page .dc-guide{padding:18px}.dc-page .viewport-text{top:16px}}.dc-page .viewport{background:radial-gradient(ellipse at 50% 65%,#132d43,#0b1826 55%,#080f18);min-height:510px}.dc-page .viewer-toolbar .dc-label-toggle{display:flex;gap:6px;align-items:center;font-size:11px}.dc-page .viewer-toolbar .dc-label-toggle.active{background:#163b58;color:#a7dbff;border-color:#3e8abb}.dc-page .live-status{color:#86c5f5;letter-spacing:.7px}.dc-scene-labels{position:relative;pointer-events:none;overflow:hidden}.dc-scene-labels svg{position:absolute;inset:0;overflow:visible;pointer-events:none}.dc-scene-labels polyline{fill:none;stroke:#78b5d3;stroke-width:1;opacity:.52;stroke-dasharray:3 3}.dc-scene-labels circle{fill:#90d7ff;stroke:#0c2133;stroke-width:1.5}.dc-scene-labels .chosen polyline{stroke:#bcf0ff;stroke-width:1.7;opacity:1;stroke-dasharray:none}.dc-scene-labels button{position:absolute;top:0;left:0;min-height:32px;border:1px solid #385870;border-left:3px solid #7ebcf2;border-radius:5px;background:#0c1b2af2;box-shadow:0 3px 15px #0005;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#d4e7f7;padding:6px 7px;display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.35;text-align:left;white-space:normal;pointer-events:auto;transition:background .15s,border-color .15s}.dc-scene-labels button span{font:9px monospace;color:#73b7e4;flex-shrink:0}.dc-scene-labels button:hover,.dc-scene-labels button.selected{background:#174668;border-color:#8ad4ff;color:#fff}.dc-page .dc-labels-visible .camera-controls{flex-direction:row;bottom:12px;right:14px;z-index:12}.dc-page .dc-labels-visible .view-caption{bottom:18px;max-width:calc(100% - 190px)}.dc-page .dc-labels-visible .view-caption small{display:none}.dc-label-summary{display:flex;width:100%;gap:7px;align-items:center;font-size:10px;color:#93bddb;line-height:1.5}.dc-page .dc-options{background:#0b1520}@media(max-width:640px){.dc-page .viewport{height:490px;min-height:490px}.dc-scene-labels button{font-size:9px;padding:5px;gap:4px;min-height:32px}.dc-scene-labels button span{font-size:8px}.dc-page .dc-labels-visible .view-caption{display:none}.dc-page .viewer-actions .dc-label-toggle span{display:inline}.dc-page .viewport-text .eyebrow{font-size:6px;letter-spacing:.8px}.dc-page .live-status{display:flex!important;font-size:6px}.dc-page .dc-label-summary{font-size:9px}}.dc-scene-labels g .dc-label-hit-line{stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}.dc-scene-labels .dc-label-hit-pin{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}.dc-journey-marker{display:block;padding:8px 12px;background:#0b2237ee;border:1px solid #72c9ef;border-radius:6px;color:#d9f5ff;white-space:nowrap;font-size:11px;pointer-events:none;box-shadow:0 4px 20px #0008}.dc-user-device{width:175px;padding:14px;background:#101e30;border:2px solid #7bb4d9;border-bottom:6px solid #6e8aa1;border-radius:8px;box-shadow:0 10px 30px #0007;color:#e1f0ff;pointer-events:none}.dc-user-device span,.dc-user-device small{display:block;font-size:9px;color:#94c8e4;letter-spacing:.5px}.dc-user-device strong{display:block;font-size:13px;line-height:1.5;margin:8px 0}.dc-journey-hud{position:absolute;z-index:15;bottom:12px;left:12px;right:12px;padding:12px;background:#081523ed;border:1px solid #315770;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.dc-journey-hud strong,.dc-journey-hud small{display:block;line-height:1.5}.dc-journey-hud strong{font-size:12px;color:#e0f3ff}.dc-journey-hud small{font-size:8px;color:#9bc6df;letter-spacing:.5px}.dc-journey-hud button{padding:6px;min-height:30px}.dc-page .dc-journey-active .view-caption,.dc-page .dc-journey-active .camera-controls{display:none}@media(max-width:700px){.dc-journey-hud{flex-direction:column;align-items:flex-start}.dc-journey-marker{font-size:9px;padding:6px}.dc-user-device{width:125px;padding:9px}.dc-user-device strong{font-size:11px}}.dc-moving-marker{transform:translateY(-50px)}.dc-user-device{transform:translateY(-20px)}.dc-scene-labels .hovered polyline:not(.dc-label-hit-line){stroke:#e0f8ff;stroke-width:3;opacity:1;stroke-dasharray:none}.dc-scene-labels .hovered circle:not(.dc-label-hit-pin){fill:#fff;stroke:#80d9ff;stroke-width:3}.dc-page .viewer-shell:not(.is-fullscreen):not(.is-expanded) .viewport{flex:0 0 auto;height:clamp(510px,60vh,720px);min-height:0;contain:size layout}@media(max-width:640px){.dc-page .viewer-shell:not(.is-fullscreen):not(.is-expanded) .viewport{height:490px}}.dc-page .viewer-shell:is(.is-fullscreen,.is-expanded){height:100dvh;min-height:0}.dc-page .viewer-shell:is(.is-fullscreen,.is-expanded) .viewport{flex:1 1 0;height:auto;min-height:240px;contain:size layout}