:root{color-scheme:dark;--bg:#0c111d;--surface:#101824;--panel:#121c2b;--line:#283547;--white:#f2f6fc;--muted:#8fa0b3;--cyan:#66e0d6;--orange:#ffa968;--gold:#d9b98a;--mono:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--white);font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}a{color:inherit;text-decoration:none}.application{min-height:100vh;background:radial-gradient(ellipse at 27% 0%,#18283a 0,transparent 40%),var(--bg)}
.header{height:72px;display:flex;align-items:center;gap:42px;padding:0 27px 0 29px;border-bottom:1px solid #293444;background:rgba(9,15,25,.96)}.brand{display:flex;align-items:center;gap:13px;min-width:275px}.brand-mark{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #5caaa6;border-radius:50%;position:relative;box-shadow:0 0 0 4px rgba(102,224,214,.045)}.brand-ring{position:absolute;width:24px;height:24px;border:2px solid #77ddcf;border-radius:50%;border-right-color:transparent;transform:rotate(23deg)}.brand-needle{height:18px;width:3px;background:#e4ac73;transform:rotate(34deg);border-radius:4px}.brand-copy{display:flex;flex-direction:column;gap:4px;letter-spacing:2px}.brand-copy strong{font-weight:800;font-size:17px}.brand-copy .faint{color:#8598ab;font-weight:400}.brand-copy small{font-family:var(--mono);letter-spacing:1.15px;font-size:8px;color:#9bacba}.header-middle{display:flex;align-items:center;gap:19px;flex:1;white-space:nowrap}.product-tag{font-family:var(--mono);font-size:10px;color:var(--cyan);border:1px solid #38645f;background:#12322e52;border-radius:3px;padding:8px 10px;letter-spacing:.9px}.header-divider{height:16px;width:1px;background:#2b384c}.header-path{font-family:var(--mono);letter-spacing:1.1px;font-size:10px;color:#b1c0cf}.header-path b{color:#5f7388;margin:0 7px}.header-right{display:flex;align-items:center;gap:23px;white-space:nowrap}.offline{display:flex;align-items:center;gap:8px;color:#c8d6de;font-size:9px;font-weight:700;letter-spacing:1.1px}.offline i{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}.build{font-family:var(--mono);font-size:10px;color:#7e8b9d}.build em{font-style:normal;color:#d0a77b}
.workspace{display:grid;grid-template-columns:minmax(550px,1fr) 340px;min-height:calc(100vh - 72px)}.main-area{min-width:0;padding:25px 27px 12px 27px;display:flex;flex-direction:column}.screen-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:23px}.eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--cyan);font-weight:600;margin:0 0 9px}.tiny-marker{display:inline-block;width:6px;height:6px;background:var(--cyan);transform:rotate(45deg);margin-right:8px}.dash{color:#56667a;padding:0 9px}.screen-heading h1{font-size:28px;line-height:1.12;margin:0 0 6px;letter-spacing:-.75px;font-weight:650}.screen-heading h1 span{font-weight:350;color:#b3c1cf}.screen-subtitle{font-size:12px;color:#8ea2b5;margin:0}.experiment-status{display:flex;flex-direction:column;position:relative;padding:11px 14px 10px 30px;border:1px solid #304453;background:#17243280;gap:5px;min-width:172px}.status-dot{position:absolute;top:14px;left:14px;background:var(--cyan);width:7px;height:7px;border-radius:50%;box-shadow:0 0 9px #36d1bb}.experiment-status span#run-status{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;color:#d6f2ef}.experiment-status small{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:#778c9d}.experiment-status.is-paused .status-dot{background:var(--orange);box-shadow:0 0 9px #e49c54}
.sensor-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #314053;background:linear-gradient(135deg,#162232,#111a29);margin-bottom:13px}.sensor{padding:16px 19px 14px;min-width:0}.sensor+.sensor{border-left:1px solid #2b3a4e}.sensor-name{font-family:var(--mono);font-size:9px;color:#a3b4c4;letter-spacing:1.05px;font-weight:650;display:flex;justify-content:space-between;gap:4px}.sensor-name span{color:#66788b}.sensor-val{display:flex;align-items:baseline;gap:7px;margin:11px 0 7px}.sensor-val strong{font-family:var(--mono);font-size:29px;letter-spacing:-1.5px;font-weight:500;color:#f4f7fb}.sensor-val>span:not(.contact-led){font-family:var(--mono);font-size:14px;color:#879dad}.sensor-foot{font-size:9px;color:#718499;letter-spacing:1px;font-family:var(--mono);white-space:nowrap}.sensor-val.contact{align-items:center;gap:10px;min-height:32px}.sensor-val.contact strong{font-size:24px;letter-spacing:.8px}.contact-led{height:10px;width:10px;border-radius:50%;background:#ff9868;box-shadow:0 0 10px #ff9868}.contact-led.is-closed{background:#64e8bd;box-shadow:0 0 11px #64e8bd}
.viewport{position:relative;min-height:380px;flex:1;border:1px solid #2b4356;overflow:hidden;background:#0d1a28;isolation:isolate}.viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.viewport-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 50%,transparent 34%,rgba(3,9,18,.4) 100%)}.viewport-grid{position:absolute;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(to right,#64839840 1px,transparent 1px),linear-gradient(to bottom,#64839840 1px,transparent 1px);background-size:49px 49px;mask-image:linear-gradient(to top,black,transparent 68%)}.vp-top-left,.vp-top-right,.vp-bottom-left,.vp-bottom-right{position:absolute;z-index:2;pointer-events:none}.vp-top-left{left:23px;top:21px}.frame-corner{position:absolute;left:-9px;top:-5px;width:8px;height:8px;border-top:1px solid #64b3c4;border-left:1px solid #64b3c4}.vp-index{font-size:10px;color:#95b8c6;letter-spacing:2px;font-family:var(--mono);margin-bottom:5px}.vp-index b{color:white}.vp-caption{font-size:9px;font-family:var(--mono);color:#718e9f;letter-spacing:.9px}.vp-top-right{right:22px;top:22px;text-align:right;display:flex;flex-direction:column;gap:12px}.vp-mode{font-family:var(--mono);font-size:9px;color:#b5d7d9;letter-spacing:1px}.tiny-white-led{display:inline-block;width:5px;height:5px;background:#cceeee;border-radius:50%;margin-right:6px}.vp-coord{font-family:var(--mono);font-size:9px;line-height:1.7;color:#5e7f96}.vp-bottom-left{bottom:17px;left:21px;display:flex;gap:12px;align-items:center;font-size:9px;letter-spacing:.8px;color:#8ba4b5;font-family:var(--mono)}.vp-bottom-left i{height:8px;width:1px;background:#456071}.orbit-icon{font-size:16px;color:#6dc9d0}.vp-bottom-right{right:19px;bottom:19px;font-family:var(--mono);font-size:9px;color:#6e91a1;letter-spacing:1px}.vp-bottom-right b{color:#8de0cb;font-size:10px}
.part-label{position:absolute;z-index:3;display:flex;align-items:flex-start;gap:9px;pointer-events:none;text-shadow:0 1px 5px #06101c;font-family:var(--mono);font-size:10px;color:#d7eaf2;line-height:1.3;background:#0d1c2aba;border:1px solid #28485a;padding:7px 9px;box-shadow:0 6px 25px #030c1533}.part-label small{display:block;color:#84a1b5;font-size:8px;letter-spacing:.8px;margin-top:3px}.label-dot{margin-top:4px;display:block;width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 7px #65dbd4}.label-dot.orange{background:var(--orange);box-shadow:0 0 7px #f5a965}.label-dot.gold{background:#dfc188;box-shadow:0 0 7px #dfc188}.label-disc{left:50%;top:27%}.label-contact{left:66%;top:52%}.label-heater{left:23%;top:70%}.fatal{position:absolute;inset:20%;border:1px solid #dd7777;background:#220e18ed;padding:25px;color:#ffd4d4;z-index:10}
.timeline-panel{border:1px solid #2b3c50;border-top:0;background:linear-gradient(180deg,#111e2c,#0e1825);height:205px;padding:15px 17px 8px;overflow:hidden}.timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px}.timeline-header>div:first-child{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:1.1px}.timeline-header strong{font-weight:650;color:#d6e4ea}.timeline-sub{color:#698398;font-size:9px;margin-left:11px}.legend{display:flex;align-items:center;gap:19px;font-family:var(--mono);font-size:9px;color:#a5b7c3;letter-spacing:.5px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:18px;height:2px;display:inline-block}.cyan-line{background:#61e0d3}.orange-line{background:#f0a26f}.axis-unit{color:#69849b!important}.timeline-panel canvas{width:100%;height:152px;display:block}.stage-footer{padding:13px 0 2px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;font-family:var(--mono);font-size:8px;letter-spacing:.35px;color:#657889}.stage-footer b{color:#98acbe;font-weight:500;margin-left:5px}
.controls{background:linear-gradient(155deg,#152233,#0f1826 54%);border-left:1px solid #2d3e50;overflow-y:auto;max-height:calc(100vh - 72px);scrollbar-width:thin;scrollbar-color:#496075 #121c29}.side-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 20px;border-bottom:1px solid #2c3d50;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.2px;color:#e2ebf4}.side-heading>div{display:flex;align-items:center;gap:10px}.side-icon{color:var(--cyan);font-size:17px}.side-version{font-weight:400;font-size:8px;color:#7b92a6}.side-section{padding:19px 20px 11px;border-bottom:1px solid #27364a}.side-section.compact{padding-top:18px;padding-bottom:18px}.panel-title{font-family:var(--mono);font-size:10px;font-weight:750;letter-spacing:1.25px;color:#cbd9e4;margin-bottom:19px;display:flex;gap:11px}.panel-title span{font-weight:500;color:var(--cyan);font-size:10px}.presets{padding-bottom:21px}.presets .panel-title{margin-bottom:15px}.presets-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset{border:1px solid #344559;background:#182739;color:#899eaf;font-family:var(--mono);font-size:9px;letter-spacing:.2px;padding:10px 3px;transition:background .15s}.preset.selected{border-color:#58bbae;color:#c9f3eb;background:#1c49464a}.preset:hover{border-color:#61e0d3}.control-row{margin-bottom:19px}.control-row label{display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:11px;color:#acbecc}.control-row output{color:#f1dfc4;font-family:var(--mono);font-size:11px}.control-row input[type=range],.dual-input input[type=range],.speed-row input[type=range]{width:100%;margin:12px 0 0;height:4px;accent-color:#6bdccd;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#4fa79e 0,#4fa79e var(--progress,50%),#334457 var(--progress,50%));border-radius:8px;cursor:pointer}.control-row input::-webkit-slider-thumb,.dual-input input::-webkit-slider-thumb,.speed-row input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:13px;width:13px;border-radius:50%;background:#c6f7f0;border:2px solid #1b5c5b;box-shadow:0 0 0 2px #73d9cf18}.control-row input::-moz-range-thumb,.dual-input input::-moz-range-thumb,.speed-row input::-moz-range-thumb{height:10px;width:10px;border-radius:50%;background:#c6f7f0;border:2px solid #1b5c5b}.range-ends{display:flex;justify-content:space-between;color:#647b91;font-family:var(--mono);font-size:9px;margin-top:8px;letter-spacing:.25px}.thresholds{border:1px solid #304657;background:#142538;margin-bottom:11px;padding:12px 13px;display:flex;flex-direction:column;gap:9px}.thresholds>span{font-family:var(--mono);font-size:9px;letter-spacing:.7px;color:#7393a9}.thresholds strong{font-size:17px;font-family:var(--mono);font-weight:500;color:#e9eef0}.thresholds strong i{font-style:normal;font-weight:300;color:#5caeac;margin:0 6px}.thresholds small{font-size:9px;color:#879fb0;line-height:1.5}.dual-input{display:flex;gap:16px}.dual-input label{width:50%;font-size:10px;color:#aec0cc}.dual-input output{display:block;font-family:var(--mono);font-size:12px;color:#f1dfc4;margin:8px 0}.dual-input input{margin-top:1px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.btn{height:35px;border:1px solid #4d6270;background:#1c2d3c;font-size:10px;font-family:var(--mono);letter-spacing:.7px;color:#d8e7ef;font-weight:700}.btn:hover{filter:brightness(1.17)}.btn.primary{background:#3e8e85;color:#061c1c;border-color:#67bcae}.btn.amber{grid-column:span 2;background:#392c29;border-color:#80614a;color:#f7ba83}.speed-row{margin-top:20px}.speed-row label{display:flex;justify-content:space-between;color:#9cb0be;font-size:9px;font-family:var(--mono);letter-spacing:.6px}.speed-row output{color:#e6c89a}.feedback-row{margin-top:18px;padding:11px 10px;border:1px solid #334b54;background:#17312f55}.feedback-row label{display:flex;align-items:center;gap:9px;color:#c0dad5;font-family:var(--mono);font-size:9px;letter-spacing:.3px;cursor:pointer}.feedback-row small{display:block;color:#759d98;font-size:9px;margin:7px 0 0 36px}.feedback-row input{position:absolute;opacity:0;width:1px;height:1px}.feedback-row input:checked+.switch{background:#226b65;border-color:#419c91}.feedback-row input:checked+.switch:after{background:#bdfff4;transform:translateX(11px)}.switch-row{display:flex;justify-content:space-between;margin:21px 0 0;gap:8px}.switch-row label{display:flex;align-items:center;gap:7px;color:#afbdc8;font-family:var(--mono);font-size:9px;cursor:pointer}.switch-row input{position:absolute;opacity:0;width:1px;height:1px}.switch{width:25px;height:14px;display:inline-block;background:#26384a;border:1px solid #526174;border-radius:10px;position:relative}.switch:after{content:'';width:9px;height:9px;background:#869bae;position:absolute;left:2px;top:1.5px;border-radius:50%;transition:transform .15s}.switch-row input:checked+.switch{background:#226b65;border-color:#419c91}.switch-row input:checked+.switch:after{background:#bdfff4;transform:translateX(11px)}.export{height:36px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 13px;margin-top:22px;background:transparent;border:1px solid #3a5367;color:#a9c8cd;font-family:var(--mono);font-size:10px;letter-spacing:.8px}.export:hover{color:#dbfff9;border-color:#69d1c7}.export span{font-size:18px}.event-section{padding-bottom:20px}.event-section .panel-title{margin-bottom:13px}.events{min-height:36px;max-height:170px;overflow-y:auto}.event-empty{font-size:10px;color:#7f95a7;line-height:1.6;margin:0;font-family:var(--mono)}.event-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #27384a;padding:9px 0;font-family:var(--mono);font-size:10px}.event-row .event-pill{color:#6de0be}.event-row.open .event-pill{color:#ffb483}.event-row small{color:#8ca3b5}.side-note{padding:19px 20px 27px}.side-note b{color:#9db6c0;letter-spacing:1px;font-size:9px;font-family:var(--mono)}.side-note p{color:#6f869c;font-size:10px;line-height:1.65;margin:7px 0 0}.hidden-callouts .part-label{display:none}
@media(max-width:1200px){.workspace{grid-template-columns:minmax(550px,1fr) 320px}.main-area{padding:20px 18px 10px}.header{gap:20px}.brand{min-width:235px}.build{display:none}.sensor{padding:13px}.sensor-foot{font-size:8px}.sensor-val strong{font-size:24px}.controls{max-height:calc(100vh - 72px)}}
@media(max-width:980px){.workspace{grid-template-columns:1fr}.controls{max-height:none;border-left:0;border-top:1px solid #2b3c4f;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.side-heading{grid-column:span 2}.main-area{min-height:850px}.viewport{min-height:445px}.side-section{border-right:1px solid #27364a}.side-note{grid-column:span 2}.header-middle{display:none}.header-right{margin-left:auto}}
@media(max-width:600px){.header{padding:0 13px;height:63px}.offline{display:none}.workspace{min-height:calc(100vh - 63px)}.main-area{padding:17px 11px 10px;min-height:800px}.screen-heading{align-items:flex-start}.screen-heading h1{font-size:22px}.experiment-status{display:none}.sensor-strip{grid-template-columns:repeat(2,1fr)}.sensor:nth-child(3){border-left:none;border-top:1px solid #2b3a4e}.sensor:nth-child(4){border-top:1px solid #2b3a4e}.sensor{padding:11px 12px}.sensor-val{margin:8px 0 5px}.sensor-foot{font-size:7px}.viewport{min-height:355px}.part-label{font-size:8px;padding:4px}.part-label small{font-size:7px}.vp-bottom-left{font-size:7px;gap:6px}.vp-bottom-right{display:none}.timeline-panel{padding:13px 9px}.timeline-sub,.axis-unit{display:none!important}.legend{gap:9px;font-size:8px}.stage-footer{font-size:7px}.controls{display:block}.side-heading{grid-column:auto}.side-note{grid-column:auto}}