:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#393730;background:#ece8df;font-synthesis:none;--accent:#a32e32;--muted:#827b71}*{box-sizing:border-box}body{margin:0}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}#app{height:100svh;min-height:400px;position:relative;overflow:hidden}#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}.controls{position:absolute;right:24px;top:24px;width:224px;padding:18px;background:#faf8f2e8;border:1px solid #d9d3c7;border-radius:8px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 3px 18px #3a302008;font-size:12px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.text-button{padding:4px 0;font-size:11px;color:var(--muted)}.toggle-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 0;border-top:1px solid #e0d9ce;border-bottom:1px solid #e0d9ce;margin-bottom:18px;text-align:left}.switch{width:30px;height:18px;background:#ccc6bb;border-radius:20px;padding:3px;transition:background .2s}.switch:before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.toggle-row[aria-pressed=true] .switch{background:var(--accent)}.toggle-row[aria-pressed=true] .switch:before{transform:translate(12px)}.slider-group{margin:17px 0}.slider-label{display:flex;justify-content:space-between;font-size:11px}.slider-label output{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{display:block;appearance:none;width:100%;height:3px;background:linear-gradient(to right,var(--accent) var(--fill,50%),#dcd7cc var(--fill,50%));margin:13px 0 0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #f8f6ef}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--accent)}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;text-align:center;pointer-events:none;transition:opacity .3s}.loading.hidden{opacity:0}.loading-track{width:145px;height:2px;background:#d4cec1;margin-top:15px}.loading-track>div{height:100%;width:0;background:var(--accent);transition:width .2s}.pointer-marker{position:absolute;left:0;top:0;width:36px;height:36px;border:1px solid #a32e3270;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .2s;display:grid;place-items:center}.pointer-marker>span{width:3px;height:3px;border-radius:50%;background:var(--accent)}.pointer-marker.visible{opacity:1}.error{position:absolute;top:40%;left:50%;transform:translate(-50%);width:min(400px,90vw);padding:24px;background:#f8f5ee;border:1px solid #d9d3c7;border-radius:8px;text-align:center;font-size:13px;line-height:1.6}.error button{background:var(--accent);color:#fff;padding:8px 20px;border-radius:4px}@media(max-width:640px){.controls{inset:auto 12px 12px;width:auto;padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.panel-heading{grid-column:1/3;margin:0}.toggle-row{grid-column:3;grid-row:1;border:0;padding:0;margin:0;gap:8px;justify-content:flex-end;font-size:11px}.slider-group{margin:0}.pointer-marker{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.sound-controls{margin-top:22px}.sound-controls .toggle-row{margin-bottom:14px}.sound-status{font-size:9px;line-height:1.5;color:var(--muted);margin:12px 0 0}.controls{max-height:calc(100svh - 48px);overflow-y:auto}button:disabled{cursor:wait;opacity:.6}@media(max-width:640px){.sound-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding-top:12px;border-top:1px solid #e0d9ce}.sound-controls .toggle-row{grid-column:1;grid-row:1;justify-content:space-between;margin:0}.sound-controls .slider-group{margin:0}.sound-status{grid-column:1/-1;margin:0;text-align:center}.controls{max-height:calc(100svh - 24px)}}.rotate-step{display:none;position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);min-height:44px;padding:10px 18px;border:1px solid #d9d3c7;border-radius:24px;background:#faf8f2f0;box-shadow:0 3px 18px #3a302008;font-size:12px;align-items:center;gap:8px;touch-action:manipulation}.rotate-step span{font-size:20px;line-height:1}.rotate-step:active{background:#e7e1d7}@media(max-width:640px),(pointer:coarse){.rotate-step{display:inline-flex}}.key-controls{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:18px}.key-controls label{font-size:11px}.key-controls select{display:block;width:100%;min-height:36px;margin-top:7px;padding:6px 4px;border:1px solid #d9d3c7;border-radius:4px;background:#faf8f2;color:inherit;font:inherit}.key-controls select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:640px){.key-controls{grid-column:1/-1;margin:0}.key-controls select{min-height:44px;font-size:16px}}.tone-control{grid-column:1/-1}.artwork-link{display:block;margin-top:16px;padding-top:12px;border-top:1px solid #e0d9ce;color:var(--muted);font-size:11px;line-height:1.6;text-underline-offset:3px}.artwork-link:hover{color:var(--accent)}.artwork-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:640px){.artwork-link{grid-column:1/-1;margin:0;min-height:44px;text-align:center}}.interaction-hint{margin:0;font-size:11px;line-height:1.5}.sound-warning{margin:0 0 16px;padding:10px 12px;border:1px solid #d6b477;border-radius:5px;background:#fff3d9;color:#78531d;font-size:11px;line-height:1.5}@media(max-width:640px){.sound-warning{grid-column:1/-1;margin:0}}.sound-status:empty{display:none}.artwork-link-ending{white-space:nowrap}.sound-settings{display:contents}.settings-toggle,.mobile-warning{display:none}@media(max-width:640px),(pointer:coarse)and (max-width:1024px){.controls{top:auto;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;padding:4px 10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px;max-height:65svh;border-radius:9px}.sound-controls{display:contents}.controls #sound,.controls #random,.settings-toggle{grid-row:2;min-height:40px;margin:0;padding:0;border:0;font-size:11px;gap:6px;justify-content:center;white-space:nowrap}.controls #sound{grid-column:1}.controls #random{grid-column:2}.settings-toggle{display:flex;align-items:center;grid-column:3}.settings-chevron{font-size:16px;line-height:1}.settings-open .settings-chevron{transform:rotate(180deg)}.switch{flex-shrink:0;width:24px;height:14px;padding:2px}.switch:before{width:10px;height:10px}.toggle-row[aria-pressed=true] .switch:before{transform:translate(10px)}.panel-heading{grid-column:1/-1;order:2;margin:2px 0 8px;padding-top:7px;border-top:1px solid #e0d9ce;gap:12px}.interaction-hint{font-size:10px;line-height:1.3}.text-button{min-height:30px;padding:4px}.sound-warning{grid-column:1/-1;grid-row:1;order:1;margin:0;padding:0 0 5px;border:0;background:none;text-align:center;font-size:10px;line-height:1.4}.desktop-warning{display:none}.mobile-warning{display:inline}.sound-settings{grid-column:1/-1;order:3;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding-bottom:4px}.sound-settings .slider-group{margin:0}.slider-label{font-size:10px}.slider-label output{font-size:10px}input[type=range]{margin:10px 0 8px}.key-controls{grid-column:1/-1;display:grid;grid-template-columns:1fr .8fr 1fr;gap:8px;margin:0}.key-controls .tone-control{grid-column:auto}.key-controls label{font-size:10px;min-width:0}.key-controls select{margin-top:3px;min-height:32px;padding:4px 2px;font-size:16px}.sound-status{grid-column:1/-1;order:4;margin:0;padding:4px 0;font-size:10px;text-align:center}.artwork-link{grid-column:1/-1;order:5;margin:6px 0 0;padding:7px 0;min-height:30px;font-size:10px;text-align:center}.controls:not(.settings-open) .panel-heading,.controls:not(.settings-open) .sound-settings,.controls:not(.settings-open) .artwork-link{display:none}.rotate-step{top:max(8px,env(safe-area-inset-top));min-height:36px;padding:6px 12px;font-size:11px;gap:5px}.rotate-step span{font-size:17px}}.artwork-link{white-space:nowrap;font-size:10px;letter-spacing:-.15px;text-align:center}@media(min-width:641px)and (pointer:fine){.controls{width:268px}}#app{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#viewport,#viewport canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button.sound-warning{width:100%;text-align:left;touch-action:manipulation}button.sound-warning:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:640px),(pointer:coarse)and (max-width:1024px){button.sound-warning{min-height:32px;text-align:center;text-decoration:underline;text-underline-offset:3px}}