:root { color-scheme: dark; --ink:#e9f1eb; --muted:#95a69c; --line:rgba(229,242,233,.13); --green:#baff35; --dark:#07110d; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 82% 25%,#173323 0%,transparent 28%), linear-gradient(125deg,#07110d 0%,#0b1711 56%,#06100c 100%); font-family:Manrope,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; opacity:.2; pointer-events:none; background-image:linear-gradient(rgba(186,255,53,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(186,255,53,.06) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.app-shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.topbar { min-height:108px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; letter-spacing:.14em; font-family:"DM Mono",monospace; font-size:.78rem; font-weight:500; }
.brand-mark { width:30px; display:flex; gap:3px; align-items:end; height:21px; }.brand-mark i { display:block; width:7px; background:var(--green); border-radius:99px; }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:21px}
.status { border:1px solid var(--line); border-radius:999px; padding:8px 12px 8px 10px; font:500 .68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }.status::before{content:""; display:inline-block; width:7px;height:7px;background:#68736c;border-radius:50%;margin-right:7px}.status--active{color:var(--green);border-color:rgba(186,255,53,.35)}.status--active::before{background:var(--green);box-shadow:0 0 12px var(--green)}.status--error{color:#ff9b83}.status--error::before{background:#ff795e}
.hero { min-height:540px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; border-bottom:1px solid var(--line); }.eyebrow { margin:0 0 18px; color:var(--green); letter-spacing:.13em; text-transform:uppercase; font:500 .7rem "DM Mono",monospace; }.hero h1,.how-it-works h2 { margin:0; letter-spacing:-.065em; line-height:.94; }.hero h1 { font-size:clamp(3.6rem,7vw,6.4rem); font-weight:800; }.intro { max-width:470px; margin:28px 0 26px; color:#b3c0b7; line-height:1.65; font-size:1.01rem; }.primary-button { cursor:pointer; min-height:52px; border:0; padding:0 20px; border-radius:4px; background:var(--green); color:#102010; font:700 .87rem Manrope,sans-serif; transition:transform .2s,box-shadow .2s; }.primary-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(186,255,53,.22)}.primary-button:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:4px}.button-icon{margin-right:9px;font-size:.7rem}.help-text { margin:14px 0 0; font-size:.75rem; color:var(--muted); }.flash-note { max-width:450px; min-height:18px; margin:8px 0 0; color:#c7d4c9; font-size:.71rem; line-height:1.5; }.flash-note--ready{color:var(--green)}.flash-note--fallback{color:#ffc982}
.led-stage { min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }.led-halo { position:absolute; width:310px; height:310px; border-radius:50%; background:radial-gradient(circle,rgba(186,255,53,.03) 0%,transparent 68%); transition:background .18s ease,transform .18s ease; }.led { width:184px;height:184px;border-radius:50%;z-index:1; display:grid;place-items:center; background:linear-gradient(135deg,#25332c,#0d1711 66%); border:1px solid rgba(255,255,255,.1); box-shadow:inset 12px 12px 28px rgba(255,255,255,.04),inset -15px -15px 26px rgba(0,0,0,.6),0 18px 32px rgba(0,0,0,.3); transition:background .12s,box-shadow .12s,transform .12s; }.led-core { width:128px;height:128px;border-radius:50%; background:radial-gradient(circle at 35% 28%,#40564a,#142219 55%,#0b120e); }.led-base{ width:100px;height:48px;margin-top:-5px;border:1px solid rgba(255,255,255,.1); border-top:0; background:linear-gradient(90deg,#17251c,#314137,#17251c);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%); }.led-label{z-index:2;margin:23px 0 0;font:500 .72rem "DM Mono",monospace;letter-spacing:.18em;color:var(--muted)}.led--on{background:radial-gradient(circle at 33% 25%,#eeffc8,#baff35 44%,#589c15 83%);box-shadow:inset 12px 12px 28px rgba(255,255,255,.35),inset -15px -15px 26px rgba(76,121,12,.55),0 0 40px rgba(186,255,53,.8),0 0 120px rgba(186,255,53,.28);transform:scale(1.025)}.led--on .led-core{background:radial-gradient(circle at 35% 28%,#f7ffe9,#d5ff73 45%,#8ec628)}.led-stage--on .led-halo{background:radial-gradient(circle,rgba(186,255,53,.32),transparent 68%);transform:scale(1.15)}.led-label--on{color:var(--green)}
.control-panel { display:grid;grid-template-columns:1fr 1fr; gap:66px; padding:37px 0 42px; border-bottom:1px solid var(--line); }.meter-meta{display:flex;justify-content:space-between;gap:20px;color:#cbd6cd;font:500 .71rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}.meter-meta output{color:var(--green)}.meter { position:relative;margin-top:13px;height:8px;background:#1a2b21;border-radius:10px;overflow:visible}.meter span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#59ab29,var(--green));transition:width .08s}.meter b{position:absolute;top:-5px;width:2px;height:18px;background:white;box-shadow:0 0 5px white;left:35%;transition:left .1s}.threshold-control p {margin:11px 0 0;color:var(--muted);font-size:.72rem}.threshold-control input{margin:16px 0 0;width:100%;accent-color:var(--green);cursor:pointer}
.how-it-works{padding:80px 0 86px;display:grid;grid-template-columns:.82fr 1.18fr;gap:70px}.how-it-works h2{font-size:clamp(2rem,3.8vw,3.5rem)}.how-it-works ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}.how-it-works li{display:grid;grid-template-columns:55px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}.how-it-works li span{font:500 .71rem "DM Mono",monospace;color:var(--green)}.how-it-works li p{margin:0;color:#c6d2c9;font-size:.94rem}footer{width:min(1180px,calc(100% - 48px));margin:auto;padding:23px 0 30px;border-top:1px solid var(--line);color:#718079;font:.67rem "DM Mono",monospace;letter-spacing:.09em}footer span{padding:0 7px;color:var(--green)}
@media(max-width:720px){.app-shell,footer{width:min(100% - 32px,1180px)}.topbar{min-height:78px}.hero{grid-template-columns:1fr;gap:5px;padding:65px 0 22px}.hero h1{font-size:clamp(3.3rem,16vw,5rem)}.led-stage{min-height:290px}.led{width:142px;height:142px}.led-core{width:99px;height:99px}.control-panel,.how-it-works{grid-template-columns:1fr;gap:34px}.control-panel{padding:28px 0}.how-it-works{padding:55px 0}.status{font-size:.6rem}.brand{font-size:.68rem}}