:root{color-scheme:dark;--bg:#292d25;--panel:#33382e;--ink:#e7e5da;--line:#727966;--accent:#c0c9aa;--muted:#bfc2b5;font:17px system-ui,sans-serif}html[data-ui-inverted=false]{color-scheme:light;--bg:#e5e2d8;--panel:#eeebe3;--ink:#34372d;--line:#9a9f8e;--accent:#606a51;--muted:#62675b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}main{max-width:760px;margin:auto;padding:28px 22px 50px}header,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}header{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:38px}.brand{font-size:1.65rem;display:flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:-.06em}.badge{font-size:.75rem;border:1px solid var(--line);border-radius:20px;padding:7px 12px}a{color:inherit}h1{font:clamp(2rem,6vw,3.3rem)/1.12 Georgia,serif;letter-spacing:-.03em}h2{font-size:1.35rem}h3{font-size:1.05rem;margin-top:28px}p,li{line-height:1.65}li{margin:10px 0}section,details{margin-top:24px}#pairing,#remote{background:var(--panel);padding:clamp(16px,4vw,28px);border:1px solid var(--line);border-radius:20px}label{display:block;margin:22px 0 8px}button,input,select,textarea{font:inherit;max-width:100%;border-radius:10px}button,select,input:not([type=range]),textarea{padding:12px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}button{background:var(--accent);color:var(--bg);cursor:pointer}button:disabled{opacity:.5;cursor:wait}.secondary,.text-button{color:var(--ink);background:transparent}.text-button{border:0;text-decoration:underline;padding:5px;font-size:.85rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}select,textarea{width:100%}input[type=range]{display:block;width:100%;accent-color:var(--accent);margin:14px 0;min-height:28px}output{float:right;font-variant-numeric:tabular-nums}.code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.code-row input{flex:1;min-width:140px}#code{letter-spacing:.25em;font-variant-numeric:tabular-nums;max-width:230px}#listen{margin-top:18px}.small{font-size:.85rem;color:var(--muted)}.notice,#status{padding:13px 16px;border-left:3px solid var(--accent);background:var(--panel);font-size:.95rem}#status{border:1px solid var(--line);border-radius:10px}.steps{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}#layers>article{border-top:1px solid var(--line);margin-top:22px;padding-top:5px}#layers .track-tools{display:flex;align-items:center;gap:20px;justify-content:space-between}.track-tools label{margin-top:8px;flex:1}.add-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.add-row label{flex:1;min-width:180px}.add-row select{margin-top:8px}#saved>article{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:10px 0}details{border-top:1px solid var(--line);padding-top:20px}summary{cursor:pointer;font-weight:600;line-height:1.5}footer{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:35px;padding-top:24px;font-size:.85rem;color:var(--muted)}[hidden]{display:none!important}@media(max-width:420px){main{padding:18px 12px 35px}.track-tools{flex-wrap:wrap}.code-row button{flex:1}header{margin-bottom:25px}}

.audio-pair-feedback{border:1px solid var(--accent);border-radius:12px;padding:14px;margin-top:16px}.audio-pair-feedback label{margin:12px 0 6px;font-size:.85rem}.audio-pair-feedback meter,.audio-pair-feedback progress{display:block;width:100%;height:16px;accent-color:var(--accent)}#audio-pair-state{font-weight:600;margin:0}.audio-pair-feedback.listening #audio-pair-state:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:9px;animation:mic-pulse 1.2s ease-in-out infinite}@keyframes mic-pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.audio-pair-feedback.listening #audio-pair-state:before{animation:none}}

.support-button{display:inline-block;background:var(--accent);color:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 18px;text-decoration:none;font-weight:600}.project-support{border-top:1px solid var(--line);padding-top:22px}

.alexa-activation{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.alexa-activation p{flex-basis:100%}.alexa-activation .secondary{background:transparent;color:var(--ink)}

#remote input[type=range]{touch-action:pan-y;user-select:none}