#root{flex-direction:column;min-height:100dvh;display:flex}.route-fallback{padding:max(24px, env(safe-area-inset-top,0px)) 24px 24px;text-align:center;color:#3a3a3a;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;max-width:min(32rem,100%);margin:0 auto;font-family:sans-serif;display:flex}.route-fallback-title{margin:0;font-size:1.1rem;font-weight:600}.route-fallback-hint{color:#666;margin:0;font-size:.9rem}.route-fallback-hint code{background:#f0f0f0;border-radius:4px;padding:.12em .35em;font-size:.88em}.route-fallback-link{color:#c48a12;margin-top:.5rem;font-weight:600;text-decoration:none}.route-fallback-link:hover{text-decoration:underline}.control-app{--pad-x:clamp(12px, 4vw, 28px);--pad-y:clamp(12px, 3vw, 24px);box-sizing:border-box;width:100%;max-width:min(32rem,100%);min-height:100dvh;padding-left:max(var(--pad-x), env(safe-area-inset-left,0px));padding-right:max(var(--pad-x), env(safe-area-inset-right,0px));padding-bottom:max(var(--pad-y), env(safe-area-inset-bottom,0px));background:var(--bg,#fff);color:#3a3a3a;flex-direction:column;flex:auto;margin:0 auto;font-family:sans-serif;display:flex;position:relative}.control-app *,.control-app :before,.control-app :after{box-sizing:border-box}.app-logo{top:max(12px, env(safe-area-inset-top,0px));left:max(12px, env(safe-area-inset-left,0px));z-index:1;object-fit:contain;width:auto;max-width:min(45%,180px);height:clamp(28px,9vw,44px);max-height:min(44px,12vh);display:block;position:absolute}.control-header{padding:0 var(--pad-x) .5rem;padding-top:max(clamp(52px, 14vw, 72px), calc(env(safe-area-inset-top,0px) + clamp(40px, 12vw, 56px)));justify-content:center;align-items:center;display:flex}.control-header-text{flex-direction:column;align-items:center;gap:.35rem;max-width:100%;display:flex}.control-title{letter-spacing:.08em;text-align:center;text-transform:uppercase;text-wrap:balance;color:#1a1a1a;max-width:100%;margin:0;padding:0 .25rem;font-family:sans-serif;font-size:clamp(1.05rem,4.2vw,1.55rem);font-weight:800;line-height:1.15}.control-title-line{display:inline-block}.control-title-line--accent{color:var(--accent,#f8c74f)}.control-subtitle{letter-spacing:.08em;color:var(--accent,#f8c74f);margin:0;font-size:clamp(.8rem,3vw,1rem);font-weight:700}.device-select{appearance:none;letter-spacing:.08em;text-align:center;color:var(--accent,#f8c74f);cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f8c74f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .7rem center/.55rem no-repeat;border:1px solid #f8c74f8c;border-radius:999px;margin:0;padding:.2rem 1.6rem .2rem 1rem;font-family:inherit;font-size:clamp(.8rem,3vw,1rem);font-weight:700}.device-select:focus-visible{outline:2px solid var(--accent,#f8c74f);outline-offset:2px}.volume-setup-hint{text-align:center;color:#b00020;max-width:18rem;margin:0;padding:0 .5rem;font-size:clamp(.8rem,2.8vw,.9rem);font-weight:500;line-height:1.35}.volume-api-error{text-align:center;color:#b00020;max-width:18rem;margin:0;padding:0 .5rem;font-size:clamp(.75rem,2.6vw,.85rem);font-weight:500;line-height:1.35}.volume-api-error--save{color:#9a3400}.control-main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(22px,6vw,44px);width:100%;min-height:0;padding:clamp(16px,4vw,28px) 0 clamp(28px,9vw,56px);display:flex}.dial-wrap{aspect-ratio:1;width:min(88vw,72vmin,20rem);max-width:100%;position:relative}.dial-wrap--loading .dial-svg{pointer-events:none;cursor:wait;opacity:.72}.dial-svg{touch-action:none;cursor:pointer;width:100%;height:auto;display:block}.dial-svg:focus{outline:none}.dial-svg:focus-visible{outline:2px solid var(--accent,#f8c74f);outline-offset:min(8px, 2vw);border-radius:50%}.dial-tick{stroke:#0000001f;stroke-width:1px}.dial-face{fill:#f3f3f3;stroke:#00000014;stroke-width:1px;filter:drop-shadow(1px 2px 4px #00000014)drop-shadow(0 0 1px #0000000a)}.dial-arc{stroke:var(--accent,#f8c74f);stroke-width:3px;transition:stroke .2s}.dial-dot{transition:opacity .15s}.dial-readout{pointer-events:none;justify-content:center;align-items:center;padding:22%;display:flex;position:absolute;inset:0}.dial-readout-inner{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:.04em;margin:0;line-height:1;display:inline-flex}.dial-value{color:var(--accent,#f8c74f);font-size:clamp(2rem,9.5vmin,3.25rem);font-weight:700;line-height:1}.dial-percent{color:var(--accent,#f8c74f);font-size:clamp(1.1rem,4.8vmin,1.75rem);font-weight:600;line-height:1}.control-actions{width:100%;max-width:100%;padding:0 var(--pad-x);flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(16px,4vw,24px) clamp(20px,8vw,56px);display:flex}.action-item{flex-direction:column;flex:0 auto;align-items:center;gap:clamp(6px,2vw,10px);display:flex}.action-circle{cursor:pointer;color:#666;width:clamp(56px,18vw,80px);height:clamp(56px,18vw,80px);font:inherit;appearance:none;background:linear-gradient(145deg,#fafafa 0%,#ebebeb 100%);border:1px solid #0000001a;border-radius:50%;justify-content:center;align-items:center;margin:0;display:flex;box-shadow:inset 0 1px #ffffffe6,0 2px 8px #00000014}.action-circle:focus-visible{outline:2px solid var(--accent,#f8c74f);outline-offset:3px}.action-circle.action-circle--muted-on{border-color:var(--accent,#f8c74f);box-shadow:inset 0 1px #ffffffe6,0 0 16px #f8c74f73,0 2px 8px #0000001a}.action-circle.action-circle--muted-on .mute-icon{color:var(--accent,#f8c74f);filter:drop-shadow(0 0 8px #f8c74f8c)}.action-icon{justify-content:center;align-items:center;display:flex}.action-icon svg{width:clamp(22px,7vw,30px);height:auto;display:block}.action-label{letter-spacing:.12em;color:#757575;text-align:center;font-size:clamp(.58rem,2.4vw,.7rem);font-weight:600}.mute-icon svg{opacity:.95}@media (width<=360px){.control-actions{gap:clamp(16px,6vw,28px)}}@media (height>=700px){.control-main{gap:clamp(28px,5vh,48px)}}@media (width>=600px){.control-app{max-width:min(28rem,92vw)}}@media (prefers-reduced-motion:reduce){.dial-arc,.dial-dot{transition:none}}:root{font-family:sans-serif}#root{min-height:100vh}body{background:#fff;margin:0}