:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#d6f3f6;background:#041119;font-synthesis:none;--cyan:#51f4dc;--muted:#86a6ad;--line:#1a3943;--panel:#0a1c26}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input,select{font:inherit}button{cursor:pointer;min-height:48px;border-radius:12px;border:1px solid transparent;padding:12px 17px;font-weight:650;transition:background .2s,transform .2s}button:disabled{cursor:wait;opacity:.45}button:not(:disabled):active{transform:scale(.98)}a{color:inherit}input,select{width:100%;background:#06141d;border:1px solid #294450;border-radius:10px;color:#edfaff;min-height:48px;padding:12px;outline:none}input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #51f4dc18}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}label{display:block;color:#a8c7cc;font-size:.85rem;font-weight:600;margin:16px 0 8px}p{font-size:.93rem;line-height:1.65;color:#acc7cd}h1{font-size:clamp(2rem,7vw,3.7rem);line-height:1.12;letter-spacing:-.055em;font-weight:600;margin:12px 0 20px}h1 em{font-style:normal;color:var(--cyan)}h2{font-size:1.7rem;letter-spacing:-.04em;font-weight:600;margin:10px 0 16px}h3{font-size:1.08rem;font-weight:600;letter-spacing:-.02em;margin:10px 0 15px}.ambient{pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse at 92% 2%,#0a55543b,transparent 45%),radial-gradient(ellipse at 0 70%,#09343f40,transparent 50%);z-index:-1}.shell{max-width:1040px;margin:auto;padding:0 24px 110px}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}.brand{text-decoration:none;display:flex;gap:12px;align-items:center;font-size:1.3rem;letter-spacing:.2em;font-weight:750}.brand small{display:block;font-size:.53rem;letter-spacing:.17em;margin-top:6px;color:#7aa0a7}.brand-icon{display:grid;place-content:center;letter-spacing:0;width:43px;height:43px;border:1px solid #3ce4d87a;color:var(--cyan);border-radius:13px;background:#153e4140;box-shadow:inset 0 0 18px #51f4dc0d}.connection{white-space:nowrap;border:1px solid var(--line);padding:8px 11px;border-radius:50px;font-size:.72rem;color:#99b9bf;display:flex;align-items:center;gap:7px}.connection i,.mode-dot{width:6px;height:6px;border-radius:50%;background:#f2b05c;display:inline-block}.connection.online i{background:var(--cyan);box-shadow:0 0 10px #51f4dc}.welcome{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:38px 0 7px}.eyebrow,.section-tag{font-size:.64rem;letter-spacing:.16em;font-weight:650;color:#7eabad}.eyebrow{line-height:1.7}.mini-orb,.orb{position:relative;width:80px;height:80px;border-radius:50%;border:1px solid #3d9e9c;box-shadow:0 0 40px #1de2d515,inset 0 0 25px #1de2d515;flex-shrink:0}.mini-orb:before,.orb:before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid transparent;border-top-color:#51f4dc;border-bottom-color:#51f4dc;animation:orbit 18s linear infinite}.mini-orb:after,.orb:after{content:"";position:absolute;inset:23px;border-radius:50%;background:radial-gradient(circle,#74ffeb,#1c707e);box-shadow:0 0 30px #51f4dc33}.mode-strip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;background:#08232b66;padding:15px 17px;margin:5px 0 32px}.mode-strip strong{font-size:.8rem;font-weight:550}.mode-strip small{display:block;color:#7da6ad;font-size:.72rem;margin-top:4px}.mode-dot{background:var(--cyan);flex-shrink:0}#clock{margin-left:auto;font-size:.9rem;font-variant-numeric:tabular-nums;color:#b9d9de}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-heading h2{margin-bottom:0}.panel{border:1px solid var(--line);background:linear-gradient(140deg,#0c242ee8,#081822f0);border-radius:18px;padding:23px;margin:20px 0}.panel p:first-of-type{margin-top:10px}.primary{background:var(--cyan);color:#031a1b;box-shadow:0 4px 25px #32dcc514}.primary:hover{background:#91ffe9}.secondary{border-color:#35545d;background:#102b35;color:#d2f3f4}.secondary:hover{background:#193e47}.quiet-button{background:transparent;border-color:var(--line);color:#8db7be;font-size:.8rem;padding:10px 12px}.quiet-button:hover{background:#173541}.full{width:100%}.all-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.lamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lamp-card{position:relative;background:#0b2029;border:1px solid #29444c;border-radius:16px;padding:20px;overflow:hidden}.lamp-card.on{border-color:#3c9c8d;background:radial-gradient(ellipse at 100% 0,#2d8a6f24,transparent 80%),#0b2029}.lamp-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.lamp-symbol{height:35px;width:35px;display:grid;place-content:center;color:var(--cyan);background:#17413e80;border-radius:10px;font-size:1.1rem}.lamp-card h3{margin:16px 0 5px}.lamp-card p{font-size:.76rem;margin:0 0 16px;min-height:20px}.lamp-card .all-controls{margin:0}.lamp-card button{min-height:42px;padding:8px;font-size:.8rem}.badge{font-size:.62rem;padding:5px 8px;letter-spacing:.08em;border-radius:6px;background:#1b363f;color:#96b9be}.on .badge{color:var(--cyan);background:#17483e}.offline .badge{color:#ffc67b;background:#4b3224}.slider-heading{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.slider-heading label{margin:0}.slider-heading output{color:var(--cyan);font-variant-numeric:tabular-nums}input[type=range]{min-height:40px;padding:0;accent-color:var(--cyan);border:0;background:transparent}.color-row{display:flex;align-items:center;gap:12px;margin:18px 0}.color-row label{flex:1;margin:0}.color-row input{width:60px;padding:5px;cursor:pointer}.inline-form{display:flex;gap:10px}.inline-form input{min-width:0}.inline-form button{flex-shrink:0}.intro{color:#8fadb5;max-width:580px}.note{color:#7f9fa9;font-size:.74rem;line-height:1.65}.error{color:#ffad96;font-size:.85rem}.command-result{white-space:pre-wrap;border-left:3px solid var(--cyan);padding:18px;background:#0b2931;border-radius:0 12px 12px 0;line-height:1.65;font-size:.87rem}.view{animation:appear .25s ease}.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.health-item{border:1px solid var(--line);background:var(--panel);padding:19px;border-radius:14px;display:flex;align-items:center;gap:10px}.health-item small{display:block;color:#8baab2;margin-top:6px}.health-dot{width:7px;height:7px;border-radius:50%;background:#e8af66}.health-item.ok .health-dot{background:var(--cyan)}.health-item.error .health-dot{background:#ff846e}.message-list{padding:0;list-style:none}.message-list li{border-bottom:1px solid var(--line);padding:20px 0;display:flex;gap:15px;align-items:start}.message-list time{color:#70a7ad;font-size:.7rem;white-space:nowrap;padding-top:5px}.message-list p{margin:0;font-size:.85rem}.counter{border:1px solid #355059;border-radius:50%;height:32px;width:32px;display:grid;place-content:center;color:var(--cyan);font-size:.8rem}.pair-screen{max-width:560px;margin:40px auto;text-align:center}.pair-screen .panel{text-align:left}.pair-screen .primary{display:flex;justify-content:space-between;width:100%;margin-top:22px}.orb{width:100px;height:100px;margin:20px auto 34px}.orb:after{inset:31px}footer{font-size:.75rem;letter-spacing:.23em;display:flex;justify-content:space-between;gap:15px;color:#4e7b84;margin-top:45px;border-top:1px solid var(--line);padding-top:20px}footer span{font-size:.53rem;letter-spacing:.1em}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:100%;width:580px;background:#071922f5;border:1px solid #22404a;border-radius:22px 22px 0 0;padding:9px 12px calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;backdrop-filter:blur(18px);z-index:5}nav button{background:transparent;color:#6f969f;font-size:.65rem;font-weight:500;min-width:65px;padding:5px 14px}nav button span{display:block;font-size:1.4rem;line-height:1.5}nav button.active{color:var(--cyan);background:#173d3d70}.toast{position:fixed;bottom:105px;left:50%;transform:translateX(-50%);background:#123d44;color:#e0fbf6;padding:14px 20px;border:1px solid #3c8b88;border-radius:12px;box-shadow:0 8px 35px #0007;max-width:90vw;width:max-content;font-size:.85rem;z-index:9}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}[hidden]{display:none!important}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}@media(min-width:760px){.settings-panel{max-width:none}.view{max-width:780px;margin:auto}.lamp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pair-screen{margin-top:65px}}@media(max-width:430px){.shell{padding:0 18px 110px}header{height:84px}.brand{font-size:1.05rem}.brand-icon{width:36px;height:36px}.brand small{font-size:.45rem}.connection{font-size:.61rem;padding:7px 9px}.welcome{padding-top:28px}.mini-orb{width:60px;height:60px}.mini-orb:after{inset:18px}.lamp-grid{gap:10px}.lamp-card{padding:15px}.panel{padding:19px}.section-heading .quiet-button{font-size:.68rem;padding:9px}.mode-strip{padding:12px;gap:9px}.mode-strip strong{font-size:.73rem}.inline-form button{padding:10px;font-size:.8rem}.lamp-card h3{font-size:.92rem}footer span{font-size:.44rem}.health-item{padding:15px;font-size:.85rem}.eyebrow{font-size:.56rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}