.wp-demo {padding-top:36px;padding-bottom:30px;color:#26342e}
.wp-heading {display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:20px}
.wp-heading h1 {font:500 clamp(28px,3.4vw,44px)/1.2 var(--sans);letter-spacing:-1.5px}
.wp-heading p {font-size:14px;color:var(--muted);margin-top:10px}
.wp-heading>a {font-size:12px;white-space:nowrap}
.wp-viewer {background:#141d23;border:1px solid #263237;overflow:hidden}
.wp-viewport {position:relative;height:clamp(620px,58vw,760px);isolation:isolate;background:#141d23}
#wp-canvas {display:block;width:100%;height:100%;touch-action:pan-y}
.wp-loading {position:absolute;inset:0;display:grid;place-content:center;background:#172329;color:#cad6d7;font:12px var(--sans);z-index:10}
.wp-scene-label {position:absolute;left:22px;top:22px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.4px;color:#d4e7de;pointer-events:none;z-index:3}
.wp-scene-label i,.wp-feed i {width:5px;height:5px;border-radius:50%;background:#b9dd89;box-shadow:0 0 10px #b9dd8944;display:inline-block}
.wp-view-switch {position:absolute;right:18px;top:16px;display:flex;padding:3px;background:#101b20d9;border:1px solid #92b2aa30;border-radius:5px;z-index:5}
.wp-view-switch button {font-size:11px;color:#a6b6b5;background:none;border-radius:3px;padding:8px 12px}
.wp-view-switch button[aria-pressed=true] {background:#d8e6df;color:#182820}
.wp-cell-caption {position:absolute;bottom:20px;left:22px;right:22px;display:flex;justify-content:space-between;gap:20px;color:#94a7aa;font-size:9px;letter-spacing:1.3px;pointer-events:none}
.wp-sensors {position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:2;color:#d7e9e1}
.wp-feed {position:absolute;top:65px;width:50%;height:calc(56% - 65px);border-top:1px solid #7d999a40;border-bottom:1px solid #7d999a40;overflow:hidden}
.wp-feed-left {left:0;border-right:1px solid #7d999a40}
.wp-feed-right {right:0}
.wp-feed-title {position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font:9px var(--sans);letter-spacing:1.2px;gap:8px}
.wp-feed b {font-size:8px;font-weight:500;color:#a5f3d8;background:#0c2927e8;padding:6px 7px;border:1px solid #79d8be55;border-radius:3px}
.wp-feed-title>span {background:#101c23e0;padding:6px 7px;border-radius:3px}
.wp-feed i {margin-right:6px;background:#8ce8cf}
.wp-feed-readout {position:absolute;bottom:12px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px;font:9px ui-monospace,monospace;color:#d0e0e4;text-shadow:0 1px 3px #000;background:#101c23c9;padding:7px 9px;border-radius:3px}
.wp-feed-readout>span:last-child {color:#9eb8bc;font-size:8px;letter-spacing:.7px}
.wp-segmentation {position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.wp-mask {fill:#52e6c2;fill-opacity:.26;stroke:#7dffe0;stroke-width:.7;stroke-opacity:.65}
.wp-edge {fill:none;stroke:#e2fff3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wp-pixel-grid {fill:none;stroke:#baffea;stroke-width:.5;opacity:.27}
.wp-pixel-target {fill:#112a2d;stroke:#f1fff6;stroke-width:1.2}
.wp-cloud {position:absolute;top:56%;bottom:0;left:0;right:0;border-top:1px solid #b5c8c830}
.wp-cloud-title {position:absolute;left:20px;top:18px;font:9px var(--sans);letter-spacing:1.1px}
.wp-cloud-title p {font-size:9px;letter-spacing:0;color:#93b1b8;margin-top:10px;display:flex;align-items:center;gap:5px}
.wp-cloud-title i {display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:7px}.wp-cloud-title i:first-child {margin-left:0}
.wp-key-laser {background:#fc5a64}.wp-key-seam {background:#acffe3}.wp-key-volume {background:#ffc96e}
.wp-cloud-stats {position:absolute;left:20px;bottom:12px;font:9px ui-monospace,monospace;color:#809aa4;letter-spacing:.1px}
.wp-section-panel {position:absolute;right:0;top:0;bottom:0;width:45%;border-left:1px solid #95b9bd25;background:linear-gradient(110deg,#14263055,#14263000)}
.wp-section-heading {position:absolute;left:20px;right:18px;top:18px;font:9px var(--sans);letter-spacing:1px;color:#d8e9e9;display:flex;justify-content:space-between;gap:6px}
.wp-section-heading>span {font-size:7px;letter-spacing:.6px;color:#8daab1;align-self:center}
#wp-section {position:absolute;top:30px;bottom:30px;width:100%;height:calc(100% - 60px);overflow:hidden}
.wp-section-pole {fill:#1f3943;stroke:#77939c;stroke-width:.8}
.wp-section-attachment {fill:#284652;stroke:#779fa8;stroke-width:.8}
.wp-section-surface {fill:none;stroke:#7ac9d1;stroke-width:.7;opacity:.7}
.wp-section-bead {fill:url(#wp-bead-fill);stroke:#ffd486;stroke-width:.9}
.wp-section-crown {fill:none;stroke:#ffe3a5;stroke-width:1.7}
.wp-section-samples {fill:#9af2e5}
.wp-section-material {fill:#809fa9;font:8px var(--sans);letter-spacing:1px }
.wp-section-leader {fill:none;stroke:#edc17b;stroke-width:.7;opacity:.8}
.wp-section-bead-label {fill:#b9c9c9;font:9px var(--sans)}
.wp-section-area {fill:#ffe0a4;font:14px var(--sans);font-variant-numeric:tabular-nums}
.wp-section-scale {fill:none;stroke:#73929e;stroke-width:.8}
.wp-section-unit {fill:#73929e;font:8px ui-monospace,monospace}
.wp-section-legend {position:absolute;left:20px;right:10px;bottom:13px;display:flex;gap:16px;font:8px var(--sans);color:#92b2b8}
.wp-section-legend span {display:flex;align-items:center;gap:5px}.wp-section-legend i {width:5px;height:5px;display:block;border-radius:50%;background:#9af2e5}.wp-section-legend span+span i {background:#ffd486}
.wp-controls {display:flex;gap:14px;align-items:center;padding:15px 20px;background:#eef0e9;font-size:11px;color:#283d34}
.wp-controls button {background:none;white-space:nowrap;padding:7px}
#wp-play {display:flex;align-items:center;gap:8px;min-width:66px}
#wp-replay {font-size:20px;padding:3px}
#wp-timeline {flex:1;min-width:30px;height:3px;accent-color:#527660;cursor:pointer}
#wp-time {font-size:10px;font-variant-numeric:tabular-nums}
#wp-inspect {margin-left:10px;border-left:1px solid #b5c0b6;padding-left:20px}
.wp-sequence {display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule);margin-top:10px}
.wp-sequence button {text-align:left;padding:21px 0 18px;font-size:13px;background:none;color:#818d84;border-bottom:2px solid transparent}
.wp-sequence button span {font-size:9px;margin-right:13px;letter-spacing:1px}
.wp-sequence button[aria-pressed=true] {color:#273e2e;border-color:#607b50}
.wp-explanation {font-size:14px;line-height:1.8;margin:22px 0;color:#516058;min-height:26px}
.wp-notes {display:flex;justify-content:space-between;gap:40px;border-top:1px solid var(--rule);padding-top:22px;margin-top:28px;font-size:11px;color:var(--muted);line-height:1.8}
.wp-notes p {max-width:570px}
.wp-notes a {white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.wp-demo button:focus-visible,.wp-demo a:focus-visible {outline:2px solid #97b975;outline-offset:3px}
.wp-preview {padding:0;position:absolute;inset:0;height:100%;width:100%}
.wp-preview .wp-viewer,.wp-preview .wp-viewport {height:100%;width:100%;border:0}
.wp-preview :is(.wp-scene-label,.wp-view-switch,.wp-cell-caption) {display:none}
.wp-preview .wp-controls {position:absolute;right:9px;bottom:9px;padding:0;background:none;z-index:3}
.wp-preview .wp-controls>:not(#wp-play) {display:none}
.wp-preview #wp-play {font-size:10px;background:#f5f6eee8;border:1px solid #ffffff66;border-radius:3px;padding:6px 9px;min-width:58px;height:28px}
@media(max-width:760px) {
 .wp-heading h1 {font-size:30px}.wp-viewport {height:640px}
 .wp-scene-label {left:14px;font-size:8px; color:#d4e7de; }.wp-view-switch {right:10px}.wp-view-switch button {padding:7px 8px;font-size:10px}
 .wp-feed-title {left:12px;right:12px;font-size:8px}.wp-feed b {font-size:7px}
 .wp-feed-readout {left:12px;right:12px;font-size:8px; color:#d0e0e4; }.wp-cloud-title {left:14px}
 .wp-section-heading {left:14px;right:14px;font-size:8px; color:#d8e9e9; }.wp-section-heading>span {font-size:6px; color:#8daab1; }.wp-section-legend {left:14px;gap:10px;font-size:7px; color:#92b2b8; }
 .wp-notes {flex-direction:column;gap:12px}.wp-controls {padding:12px;gap:8px; color:#283d34; }#wp-inspect {font-size:10px;padding-left:12px;margin-left:4px}
 .wp-cell-caption {font-size:7px;left:14px;right:14px; color:#94a7aa; }
}
@media(max-width:480px) {
 .wp-demo:not(.wp-preview) {padding-top:24px}.wp-heading p {font-size:12px}.wp-heading h1 {font-size:28px}.wp-heading>a {font-size:10px}
 .wp-viewport {height:620px}.wp-feed-title {top:12px;left:9px;right:9px}.wp-feed b {font-size:6px;letter-spacing:.4px;padding:5px}.wp-feed-title>span {font-size:7px;letter-spacing:.7px;padding:5px; background:#101c23e0; }
 .wp-feed-readout {left:8px;right:8px;font-size:7px;padding:5px; color:#d0e0e4; }.wp-feed-readout>span:last-child {font-size:6px;letter-spacing:0; color:#9eb8bc; }
 .wp-cloud-title {top:15px;left:10px;font-size:8px;letter-spacing:.6px}.wp-cloud-title p {font-size:7px;gap:3px; color:#93b1b8; }.wp-cloud-title i {margin-left:3px;width:4px;height:4px}
 .wp-cloud-stats {left:10px;bottom:11px;font-size:7px; color:#809aa4; }
 .wp-section-panel {width:50%; border-left:1px solid #95b9bd25; }
 .wp-section-heading {left:10px;right:8px;font-size:7px;letter-spacing:.5px;display:block; color:#d8e9e9; }.wp-section-heading>span {display:block;font-size:6px;margin-top:5px; color:#8daab1; }
 .wp-section-legend {left:10px;font-size:6px;gap:8px;flex-wrap:wrap; color:#92b2b8; }.wp-section-legend span {gap:3px}
 #wp-section {top:40px;height:calc(100% - 70px)}
 .wp-sequence button {font-size:11px; color:#818d84; }.wp-sequence button span {margin-right:6px;font-size:8px}.wp-explanation {font-size:12px; color:#516058; }
 #wp-inspect {display:none}.wp-cell-caption span:last-child {max-width:120px;text-align:right;line-height:1.7}
}

/* Keep all four sensor panels legible within the Work page card. */
.wp-preview .wp-feed {top:0;height:56%;border-top:0}
.wp-preview .wp-feed-title {top:8px;left:8px;right:8px;font-size:7px;letter-spacing:.6px}
.wp-preview .wp-feed-title>span {font-size:7px;padding:4px 5px}
.wp-preview :is(.wp-feed b,.wp-feed-readout,.wp-cloud-title p,.wp-cloud-stats,.wp-section-heading>span,.wp-section-legend) {display:none}
.wp-preview .wp-cloud-title {top:8px;left:10px;font-size:7px;letter-spacing:.5px}
.wp-preview .wp-section-panel {width:50%}
.wp-preview .wp-section-heading {top:8px;left:10px;right:8px;font-size:7px;letter-spacing:.5px}
.wp-preview #wp-section {top:22px;bottom:8px;height:calc(100% - 30px)}
.wp-preview[data-view=sensors] .wp-controls {top:7px;bottom:auto;right:7px}
.wp-preview[data-view=sensors] #wp-play {min-width:0;width:25px;height:23px;padding:4px;justify-content:center}
.wp-preview[data-view=sensors] #wp-play span {display:none}