:root{--ink:#171716;--muted:#6f6d67;--paper:#f3f1ea;--panel:#fffef9;--line:#d9d5ca;--red:#d92d24;--red-dark:#a51914;--green:#18845d;--shadow:0 18px 50px #221e1614}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background:radial-gradient(circle at 85% 8%, #d92d2417, transparent 27rem), linear-gradient(#17171606 1px, transparent 1px), linear-gradient(90deg, #17171606 1px, transparent 1px), var(--paper);background-size:auto,24px 24px,24px 24px,auto;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}main{width:min(1180px,100% - 40px);margin:0 auto;padding:58px 0 80px}.hero{grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-bottom:32px;display:grid}.brand-mark{aspect-ratio:1;background:var(--ink);width:74px;box-shadow:7px 7px 0 var(--red);border-radius:20px;grid-template-columns:repeat(2,1fr);gap:7px;padding:10px;display:grid;transform:rotate(4deg)}.brand-mark span{border:2px solid #fff;border-radius:50%}.brand-mark span:first-child{background:var(--red)}.eyebrow,.section-number{color:var(--red);letter-spacing:.14em;text-transform:uppercase;margin:0 0 7px;font-size:.72rem;font-weight:800}h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.1rem,5vw,4.35rem);line-height:.96}.lede{max-width:720px;color:var(--muted);margin:13px 0 0;font-size:1.06rem;line-height:1.55}.connection-pill{border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:#fffef9b3;border-radius:999px;align-items:center;gap:9px;padding:10px 14px;font-size:.8rem;font-weight:750;display:flex}.connection-pill span{background:#a6a39c;border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 4px #a6a39c26}.connection-pill.online{color:var(--green)}.connection-pill.online span{background:var(--green);box-shadow:0 0 0 4px #18845d24}.browser-warning{color:#755019;background:#fff5df;border:1px solid #e7b264;border-radius:14px;justify-content:space-between;gap:20px;margin-bottom:18px;padding:15px 18px;display:flex}.command-bar,.save-bar{border:1px solid var(--line);background:var(--ink);color:#fff;box-shadow:var(--shadow);border-radius:18px;justify-content:space-between;align-items:center;gap:24px;padding:20px 22px;display:flex}.command-bar{margin-bottom:20px}.command-bar>div,.save-bar>div{gap:3px;display:grid}.status-label{color:#aaa79f;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:800}.error-message{color:#ff9f96;margin:3px 0 0;font-size:.84rem}button.primary,button.secondary{border-radius:11px;min-height:44px;padding:0 18px;font-weight:800;transition:transform .15s,background .15s,opacity .15s}button.primary{border:1px solid var(--red);background:var(--red);color:#fff;box-shadow:0 8px 20px #d92d2440}button.secondary{color:#fff;background:0 0;border:1px solid #4f4e4a}button.primary:hover,button.secondary:hover{transform:translateY(-1px)}button.primary:disabled,button.secondary:disabled{cursor:not-allowed;opacity:.45;transform:none}.workspace{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;transition:opacity .18s;display:grid}.workspace.locked{pointer-events:none;opacity:.44;filter:grayscale(.25)}.panel{border:1px solid var(--line);background:var(--panel);min-width:0;box-shadow:var(--shadow);border-radius:20px;padding:27px}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;padding-bottom:18px;display:flex}h2{letter-spacing:-.025em;margin:0;font-size:1.4rem}.firmware{border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:6px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 16px;display:grid}.field-grid.compact{margin-top:23px}label>span{margin-bottom:7px;font-size:.78rem;font-weight:800;display:block}input[type=number],select{border:1px solid var(--line);width:100%;height:45px;color:var(--ink);background:#fff;border-radius:10px;outline:none;padding:0 12px}input[type=number]:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px #d92d241a}label small{color:var(--muted);margin-top:6px;font-size:.7rem;line-height:1.35;display:block}.color-control{grid-template-columns:1fr 110px;align-items:stretch;gap:17px;display:grid}.color-row{gap:10px;display:flex}input[type=color]{border:1px solid var(--line);background:#fff;border-radius:10px;width:66px;height:48px;padding:4px}.color-row code{border:1px solid var(--line);background:#fff;border-radius:10px;flex:1;place-items:center;font-size:.78rem;display:grid}.color-preview{background:#211f1d;border-radius:14px;place-items:center;display:grid;position:relative;overflow:hidden}.color-preview:before{background:radial-gradient(circle, var(--cake-color), transparent 64%);content:"";opacity:.52;position:absolute;inset:0}.color-preview span{z-index:1;background:var(--cake-color);width:31px;height:31px;box-shadow:0 0 15px var(--cake-color), 0 0 35px var(--cake-color);border:5px solid #6e6a63;border-radius:50%}.toggle-list{border:1px solid var(--line);background:var(--line);border-radius:13px;gap:1px;margin-top:24px;display:grid;overflow:hidden}.toggle{cursor:pointer;background:#fff;justify-content:space-between;align-items:center;gap:16px;padding:15px;display:flex;position:relative}.toggle div{gap:3px;display:grid}.toggle strong{font-size:.82rem}.toggle div span{color:var(--muted);margin:0;font-size:.7rem;font-weight:500}.toggle input{opacity:0;position:absolute}.toggle i{background:#ccc9c1;border-radius:999px;flex:0 0 42px;height:24px;transition:background .15s;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 2px 5px #0000002e}.toggle input:checked+i{background:var(--red)}.toggle input:checked+i:after{transform:translate(18px)}.test-panel,.save-bar{grid-column:1/-1}.test-heading{align-items:center;margin-bottom:16px}button.secondary.small{border-color:var(--line);min-height:37px;color:var(--ink);font-size:.76rem}.panel-copy{color:var(--muted);margin:0 0 23px;font-size:.84rem}.led-map{grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:9px;display:grid}.led-map button{aspect-ratio:1;border:1px solid var(--line);min-width:0;color:var(--muted);background:#f4f1e9;border-radius:50%;font-size:.72rem;font-weight:800;transition:border .12s,color .12s,transform .12s;position:relative}.led-map button:before{border-radius:inherit;content:"";border:2px solid #dad6cd;position:absolute;inset:7px}.led-map button span{z-index:1;position:relative}.led-map button:hover{border-color:var(--red);color:var(--red);transform:scale(1.05)}.save-bar{z-index:5;border-color:#373633;position:sticky;bottom:18px}.save-bar span{color:#aaa79f;font-size:.76rem}button.save{min-width:190px}@media (max-width:780px){main{width:min(100% - 24px,640px);padding-top:30px}.hero{grid-template-columns:auto 1fr}.connection-pill{grid-column:1/-1;justify-self:start}.workspace{grid-template-columns:1fr}.panel,.test-panel,.save-bar{grid-column:auto}.command-bar,.save-bar{flex-direction:column;align-items:flex-start}.command-bar button,.save-bar button{width:100%}}@media (max-width:480px){.brand-mark{border-radius:15px;width:58px}h1{font-size:2.2rem}.field-grid,.color-control{grid-template-columns:1fr}.color-preview{min-height:80px}.panel{padding:21px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}