:root{font:15px system-ui,-apple-system,sans-serif;background:#0a121c;color:#eaf2f9;color-scheme:dark;--line:#344b60;--muted:#9eb2c5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#15354b,transparent 60%),#0a121c}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{border:1px solid #486176;color:#eaf2f9;background:#203244;border-radius:7px;padding:10px 12px;cursor:pointer;min-height:42px}button:hover{background:#2d4458}button:focus-visible,a:focus-visible{outline:3px solid #a8ed49;outline-offset:3px}button.primary{background:#a8ed49;border-color:#a8ed49;color:#101c15;font-weight:800}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.demo-header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 28px;border-bottom:1px solid var(--line);background:#0c1722}.brand{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:.08em}.brand img{width:40px;height:40px}.sample-label{font-size:11px;font-weight:800;color:#a8ed49;border:1px solid #71964d;padding:7px;border-radius:5px}.demo-header>button{margin-left:auto}.demo-header>a:last-child{font-size:13px;color:var(--muted)}main{max-width:1560px;margin:auto;padding:28px}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:28px}.intro h1{font-size:clamp(27px,3vw,44px);letter-spacing:-.035em;margin:8px 0 12px}.intro p{max-width:700px;color:var(--muted);line-height:1.6;margin:0}.eyebrow{color:#a8ed49;font-size:11px;font-weight:850;letter-spacing:.15em}.try-steps{max-width:300px;border-left:3px solid #a8ed49;padding:8px 16px;flex:none}.try-steps strong,.try-steps span{display:block}.try-steps span{font-size:13px;color:var(--muted);line-height:1.7;margin-top:7px}.demo-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;align-items:start}.control-demo,.fan-demo{background:#132231c9;border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:16px 20px}.panel-head h2{font-size:14px;letter-spacing:.09em;margin:0}.panel-head>span{font-size:10px;color:var(--muted);letter-spacing:.07em}.connected{color:#a8ed49!important}.demo-clock-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px}.demo-clock-row span,.fan-clock-row span{display:block;color:var(--muted);font-size:13px}.demo-clock-row strong,.fan-clock-row strong{display:block;font:800 clamp(46px,5vw,78px) ui-monospace,monospace;letter-spacing:-.08em;color:#a8ed49;line-height:1.2}.demo-clock-row small,.fan-clock-row small{display:inline-block;margin-top:7px;font-size:12px;font-weight:800}.clock-buttons{display:flex;flex-direction:column;gap:9px}.flag-buttons,.call-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 20px 18px}.flag-buttons button{font-size:12px;font-weight:700;border-left:5px solid #a5b7c5}.flag-buttons button.green{border-color:#50da91}.flag-buttons button.yellow{border-color:#ffda39}.flag-buttons button.red{border-color:#ff5665}.flag-buttons button.black{border-color:#06090c}.flag-buttons button[aria-pressed=true]{box-shadow:0 0 0 2px #8ba4b4}.call-buttons button{font-size:12px;font-weight:800;min-height:48px}.alert-button{background:#a72c40!important;border-color:#ff6b7b!important}.demo-operations{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px 20px}.demo-operations h3,.fan-posts h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.mini-card{padding:12px;border:1px solid var(--line);background:#1a2b3a;border-radius:7px;margin-bottom:8px}.mini-card strong{display:block;margin-bottom:7px;font-size:13px}.mini-card p{font-size:12px;color:var(--muted);margin:6px 0;overflow-wrap:anywhere}.mini-card button{font-size:11px;min-height:34px;padding:6px 9px}.mechanical{border-left:4px solid #ff943e}.demo-timeline{border-top:1px solid var(--line);padding:16px 20px}.demo-timeline>header{display:flex;align-items:center;justify-content:space-between;gap:8px}.demo-timeline h3{font-size:13px}.demo-timeline button{font-size:11px;min-height:34px}#demoLog{max-height:260px;overflow:auto}.demo-log-entry{font-size:12px;padding:10px 0;border-bottom:1px solid #2d4153}.demo-log-entry time{color:#8eaac0;display:inline-block;margin-right:8px}.demo-log-entry span{display:block;color:var(--muted);margin-top:5px}.demo-log-entry.is-alert{color:#ff9ba4;border-left:4px solid #ff5969;padding-left:10px}.fan-clock-row{text-align:center;padding:18px}.fan-clock-row strong{font-size:clamp(64px,7vw,104px)}.fan-clock-row small{padding:7px 12px;background:#264538;border-radius:5px}.demo-map{height:clamp(260px,27vw,430px);padding:8px 20px;background:#0b1723}#demoMap{width:100%;height:100%}.demo-zone{fill:none;stroke:#ffdf32;stroke-width:10;stroke-linecap:butt;opacity:.95}.demo-zone.local{animation:sector 1.8s ease-in-out infinite}.demo-marker{fill:transparent;stroke:transparent;stroke-width:4}.demo-marker.report{stroke:#ff6a70;fill:#b23b5533}.demo-updates{height:100px;padding:10px 20px;border-top:1px solid var(--line);overflow:hidden}.demo-updates header{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.demo-updates h3{font-size:10px;margin:0 0 8px}.demo-updates p{font-size:12px;margin:0;line-height:23px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.fan-posts{padding:0 20px 12px}.fan-posts p{font-size:12px;margin:6px 0}.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 20px;border-top:1px solid var(--line);gap:15px}.demo-stats strong{font-size:24px;display:block}.demo-stats span{font-size:10px;color:var(--muted)}.fan-footnote{padding:0 20px 15px;color:var(--muted);font-size:11px;line-height:1.5}.demo-tabs{display:none}footer{color:#7c94a9;padding:25px 0;font-size:11px}.demo-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#2d4534;border:1px solid #a8ed49;border-radius:8px;padding:14px 20px;z-index:20;max-width:95vw}dialog{background:#172938;color:#eaf2f9;border:1px solid #698296;border-radius:12px;padding:0;width:min(600px,94vw);max-height:90dvh}dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}dialog form{padding:0 20px 20px}dialog .panel-head{padding:18px 0}dialog label{display:block;font-size:13px;margin-top:13px}dialog input:not([type=checkbox]),dialog select,dialog textarea{display:block;width:100%;border:1px solid #637b8e;background:#0d1b27;border-radius:6px;padding:11px;margin-top:6px;color:#edf5fb;min-height:44px}dialog fieldset{border:0;padding:0;margin:17px 0}dialog legend{font-size:13px;color:var(--muted)}.demo-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.demo-colors label{margin:0;padding:9px;border:1px solid #425e73;border-radius:6px;display:flex;align-items:center;gap:7px}.demo-colors i{width:12px;height:12px;background:var(--color);border-radius:2px;border:1px solid #ffffff60}#demoHint{color:var(--muted);font-size:12px;line-height:1.6}#demoError{color:#ff919c;font-size:13px}.demo-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px}.demo-form-actions label{margin:0 auto 0 0;font-size:12px}@keyframes sector{50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.demo-zone.local{animation:none}}@media(max-width:850px){main{padding:18px 14px}.demo-header{gap:12px;padding:12px 14px}.brand{font-size:12px}.brand img{width:30px;height:30px}.sample-label{font-size:9px}.demo-header>button{font-size:11px;padding:8px;min-height:34px}.intro{display:block;margin-bottom:18px}.intro p{font-size:13px}.try-steps{max-width:none;margin-top:15px;padding:5px 12px}.try-steps strong{font-size:12px}.try-steps span{font-size:12px;margin:0}.demo-tabs{display:flex;margin-bottom:12px;gap:8px}.demo-tabs button{flex:1}.demo-tabs button[aria-pressed=true]{background:#a8ed49;color:#122016;font-weight:800}.demo-grid{display:block}.demo-grid[data-mobile=control] .fan-demo,.demo-grid[data-mobile=fan] .control-demo{display:none}.demo-clock-row{padding:18px}.demo-clock-row strong{font-size:64px}.panel-head{padding:14px}.demo-map{height:min(45dvh,380px)}.demo-operations{grid-template-columns:1fr 1fr;padding:0 12px 12px;gap:8px}.flag-buttons,.call-buttons{padding:0 12px 14px;gap:6px}.flag-buttons button{padding:8px;font-size:11px}.demo-timeline{padding:14px}#demoLog{max-height:230px}.demo-form-actions label{flex-basis:100%;padding-bottom:9px}}