*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{color:#2a2521;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:radial-gradient(at 50% 38%,#f7f3ee 0%,#ece7e0 58%,#ddd6cd 100%);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}button,input{font:inherit;color:inherit}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{position:fixed;inset:0}.stage{position:absolute;inset:0}.stage__canvas{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;width:100%;height:100%;display:block}.hud{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:#ffffff80;border-radius:999px;align-items:center;gap:14px;padding:6px 16px 6px 6px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 1px 2px #2a252114,inset 0 0 0 1px #2a25210f}.hud__reset{color:#2a2521;cursor:pointer;background:#ffffffb3;border:0;border-radius:50%;place-items:center;width:36px;height:36px;padding:0;transition:background-color .2s;display:grid}.hud__reset:hover{background:#fff}.hud__volume{letter-spacing:.08em;text-transform:uppercase;color:#7d746b;align-items:center;gap:10px;font-size:11px;font-weight:600;display:flex}.hud__range{accent-color:#2a2521;cursor:pointer;width:120px;margin:0}.hud__reset:focus-visible,.hud__range:focus-visible,.pad__key:focus-visible{outline-offset:2px;outline:2px solid #2a2521}.toast{top:max(16px, env(safe-area-inset-top));letter-spacing:.04em;color:#f4efe8;pointer-events:none;white-space:nowrap;background:#2a2521d1;border-radius:999px;margin:0;padding:7px 14px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}.toast[hidden]{display:none}.pad{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pad__title{letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;font-size:13px;font-weight:700}.pad__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.pad__key{cursor:pointer;background:#f1ebdf;border:1px solid #2a25211f;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:40px;padding:6px 4px;display:flex}.pad__key[aria-pressed=true]{box-shadow:0 0 0 2px #f0a43a,0 0 12px #f0a43a99}.pad__label{letter-spacing:.04em;font-size:10px;font-weight:700}.pad__thumb{border-radius:4px;width:100%;height:auto;display:block}.app[data-mode=scene] .pad:focus-within,.app[data-mode=loading] .pad:focus-within{top:max(12px, env(safe-area-inset-top));clip-path:none;white-space:normal;background:#fffffff0;border-radius:12px;width:min(420px,100% - 32px);height:auto;margin:0;padding:14px;left:50%;overflow:visible;transform:translate(-50%);box-shadow:0 12px 32px #2a252129}.app[data-mode=fallback]{justify-content:center;align-items:center;padding:16px 16px 96px;display:flex;overflow-y:auto}.app[data-mode=fallback] .stage,.app[data-mode=fallback] .hud__reset{display:none}.app[data-mode=fallback] .pad{clip-path:none;white-space:normal;background:linear-gradient(#e3e5e8,#d5d7da);border:8px solid #6e3a1d;border-radius:14px;width:min(460px,100%);height:auto;margin:0;padding:18px;position:static;overflow:visible;box-shadow:0 18px 40px #2a252138}.app[data-mode=fallback] .pad__grid{gap:8px}.app[data-mode=fallback] .pad__key{padding:6px}.app[data-mode=fallback] .pad__label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}