:root{--bg: #222222;--teal: #4fa894;--teal-dim: rgba(79, 168, 148, .35);--teal-soft: rgba(79, 168, 148, .12);--glow: rgba(79, 168, 148, .55);--muted: #8a9a96;--font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;--space-1: 8px;--space-2: 16px;--space-3: 24px;--ease-out: cubic-bezier(.23, 1, .32, 1);--fade: 1.5s;color-scheme:dark}body{visibility:visible;min-height:100dvh;margin:0;background:var(--bg);color:var(--teal);font-family:var(--font-ui);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding-inline:var(--space-2);padding-block:max(var(--space-3),env(safe-area-inset-top)) max(var(--space-3),env(safe-area-inset-bottom));box-sizing:border-box}.logo{display:flex;align-items:center;gap:14px}.mark{width:40px;height:40px}.wordmark{font-size:26px;font-weight:300;letter-spacing:.14em;margin-right:-.14em;color:var(--teal)}.grid{width:100%;max-width:1000px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1)}.pad{position:relative;isolation:isolate;aspect-ratio:2 / 1;background:#ffffff05;border:1px solid var(--teal-dim);border-radius:12px;color:var(--teal);font:300 clamp(20px,3.4vw,40px) / 1 var(--font-ui);letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out),transform .14s var(--ease-out),color var(--fade) var(--ease-out)}.pad:before,.pad:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--fade) var(--ease-out)}.pad:before{background:var(--teal)}.pad:after{box-shadow:0 0 36px 2px var(--glow)}.pad[aria-pressed=true]{border-color:var(--teal);color:var(--bg)}.pad[aria-pressed=true]:not(.pending):before{opacity:1}.pad[aria-pressed=true]:not(.pending):after{opacity:1;animation:breathe 4.5s ease-in-out var(--fade) infinite}.pad.pending{color:var(--teal);background:var(--teal-soft)}.pad:active:not(:disabled){transform:scale(.98)}.pad:focus-visible{outline:2px solid var(--teal);outline-offset:3px}@media(hover:hover)and (pointer:fine){.pad:hover:not(:disabled){border-color:var(--teal);background:var(--teal-soft)}}.pad:disabled{opacity:.45;cursor:progress;background:linear-gradient(100deg,transparent 30%,var(--teal-soft) 50%,transparent 70%);background-size:250% 100%;animation:shimmer 1.4s linear calc(var(--i, 0) * 60ms) infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-150% 0}}@keyframes breathe{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.controls{width:100%;max-width:1000px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.control{display:flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.control:last-child{flex:1;min-width:200px}.control input[type=range]{flex:1;accent-color:var(--teal);cursor:pointer}.segmented{display:flex;gap:2px;padding:2px;border:1px solid var(--teal-dim);border-radius:10px}.seg{background:none;border:0;border-radius:8px;padding:8px 16px;font:600 12px / 1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s var(--ease-out),color .16s var(--ease-out),transform .14s var(--ease-out)}.seg[aria-pressed=true]{background:var(--teal);color:var(--bg)}.seg:active{transform:scale(.98)}.seg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}@media(hover:hover)and (pointer:fine){.seg[aria-pressed=false]:hover{background:var(--teal-soft);color:var(--teal)}}.status{font-size:14px;font-weight:400;letter-spacing:.01em;color:var(--teal);min-height:1.2em;display:flex;align-items:center;gap:var(--space-1)}.status.loading:before{content:"";width:12px;height:12px;border:2px solid var(--teal-soft);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){.pad:active:not(:disabled),.seg:active{transform:none}.pad:after,.pad:disabled,.status.loading:before{animation:none}}