:root{--bg: #222222;--pad-bg: #222222;--teal: #4fa894;--teal-glow: rgba(79, 168, 148, .18);--muted: #8a9a96;--font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;color-scheme:dark}html,body{height:100%}body{visibility:visible;background:var(--bg);color:var(--teal);font-family:var(--font-ui);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding-inline:16px;padding-block:24px;box-sizing:border-box}.grid{width:100%;max-width:1000px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pad{aspect-ratio:2 / 1;max-width:100%;background:var(--pad-bg);border:2px solid var(--teal);border-radius:10px;color:var(--teal);font:700 clamp(14px,2.4vw,22px) / 1 var(--font-ui);letter-spacing:.02em;cursor:pointer;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent}@media(hover:hover){.pad:hover{background:var(--teal-glow)}}.pad:disabled{opacity:.45;cursor:progress;background:linear-gradient(100deg,transparent 30%,var(--teal-glow) 50%,transparent 70%) var(--pad-bg);background-size:250% 100%;animation:shimmer 1.4s linear infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-150% 0}}.pad:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.pad[aria-pressed=true]{background:var(--teal);color:var(--bg);box-shadow:0 0 24px var(--teal-glow)}.logo{width:clamp(120px,12vw,120px);height:auto}.volume{width:100%;max-width:1000px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.volume input{flex:1;accent-color:var(--teal);cursor:pointer}.status{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-height:1em;display:flex;align-items:center;gap:8px}.status.loading:before{content:"";width:12px;height:12px;border:2px solid var(--teal-glow);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:480px){.grid{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){.pad{transition:none}.pad:disabled,.status.loading:before{animation:none}.volume select,.volume select::picker-icon,.volume ::picker(select){transition:none}}.volume select{font:inherit;color:var(--teal);background:var(--pad-bg);border:2px solid var(--teal);border-radius:6px;padding:4px 8px}@supports (appearance: base-select){.volume select,.volume ::picker(select){appearance:base-select}.volume select{min-width:180px;padding:8px 12px;border-radius:10px;transition:background-color .25s ease}.volume select:hover,.volume select:open{background:var(--teal-glow)}.volume select:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.volume select::picker-icon{color:var(--teal);transition:rotate .2s ease}.volume select:open::picker-icon{rotate:180deg}.volume ::picker(select){margin-top:6px;padding:4px;background:var(--bg);border:2px solid var(--teal);border-radius:10px;box-shadow:0 8px 24px #0006;opacity:0;translate:0 -4px;transition:opacity .15s ease,translate .15s ease,overlay .15s allow-discrete,display .15s allow-discrete}.volume select:open::picker(select){opacity:1;translate:0 0}@starting-style{.volume select:open::picker(select){opacity:0;translate:0 -4px}}.volume option{padding:8px 12px;border-radius:6px;color:var(--teal);cursor:pointer}.volume option:hover,.volume option:focus-visible{background:var(--teal-glow);outline:none}.volume option:checked{background:var(--teal);color:var(--bg)}.volume option::checkmark{display:none}}