:root{color-scheme:light;--font: "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--bg: #f5f5f7;--focus: #0a84ff;--surface: #080808;--surface-raised: #151515;--surface-edge: rgb(255 255 255 / .08);--surface-highlight: inset 0 1px 0 rgb(255 255 255 / .04);--shadow-lg: 0 1px 2px rgb(0 0 0 / .06), 0 24px 48px -28px rgb(0 0 0 / .38);--shadow-sm: 0 1px 2px rgb(0 0 0 / .06), 0 10px 24px -16px rgb(0 0 0 / .35);--fill-1: rgb(255 255 255 / .055);--fill-2: rgb(255 255 255 / .11);--fill-3: #292929;--on: #f5f5f7;--on-2: rgb(235 235 245 / .68);--on-3: rgb(235 235 245 / .34);--ease-out: cubic-bezier(.22, 1, .36, 1)}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-variable.woff2) format("woff2")}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased;color:var(--on);overflow-x:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.surface{background:var(--surface);box-shadow:var(--surface-highlight),0 0 0 .5px var(--surface-edge),var(--shadow-sm)}.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg-light);transition:background-color .4s var(--ease-out)}.backdrop[data-animate=false] .blob{animation-play-state:paused}.blob{position:absolute;border-radius:50%;animation:drift 60s ease-in-out infinite alternate}.blob-1{width:70vmax;height:70vmax;left:-12vmax;top:-10vmax;background:radial-gradient(closest-side,var(--bg-strong),transparent);opacity:.5}.blob-2{width:60vmax;height:60vmax;right:-14vmax;top:10vh;background:radial-gradient(closest-side,var(--bg-mid),transparent);opacity:.7;animation-duration:75s;animation-delay:-20s}.blob-3{width:50vmax;height:50vmax;left:25vw;bottom:-22vmax;background:radial-gradient(closest-side,var(--bg-strong),transparent);opacity:.25;animation-duration:90s;animation-delay:-40s}@keyframes drift{to{transform:translate3d(3vw,-2vh,0)}}.gradient-backdrop{position:fixed;inset:0;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}.gradient-fallback{position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity .6s var(--ease-out)}.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:overlay;opacity:.9}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{display:grid;justify-items:center;gap:6px;padding:4px 0;border-radius:14px}.swatch-preview{width:100%;aspect-ratio:1;border-radius:12px;opacity:.55;transition:opacity .2s var(--ease-out),transform .35s cubic-bezier(.34,1.56,.64,1)}.swatch:hover .swatch-preview{opacity:.85;transform:translateY(-3px) scale(1.04)}.swatch[aria-checked=true] .swatch-preview{opacity:1}.swatch:focus-visible{outline:none}.swatch:focus-visible .swatch-preview{opacity:1;transform:scale(1.06)}.swatch-label{font-size:12px;font-weight:500;color:var(--on-2)}.swatch[aria-checked=true] .swatch-label{color:var(--on)}.switch{position:relative;width:44px;height:26px;border-radius:999px;background:var(--fill-2);transition:background-color .2s var(--ease-out)}.switch[aria-checked=true]{background:#34c759}.switch:disabled{opacity:.4;cursor:default}.switch-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #00000040;transition:transform .25s var(--ease-out)}.switch[aria-checked=true] .switch-knob{transform:translate(18px)}@media (prefers-reduced-motion: reduce){.blob{animation:none}.backdrop,.switch,.switch-knob,.swatch-preview{transition:none}}.secondary{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px}.tip-anchor{position:relative;display:inline-flex}.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--on);transition:background-color .15s,color .15s}.icon-button:hover:not([aria-disabled]){background:var(--fill-2)}.icon-button[aria-disabled]{color:var(--on-3);cursor:default}.icon-motion{display:grid;place-items:center}.tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;padding:6px 10px;border-radius:8px;background:#1c1c20f0;box-shadow:var(--shadow-sm);color:var(--on);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .15s,transform .15s var(--ease-out)}.tooltip[data-open]{opacity:1;transform:translate(-50%)}.tooltip-left{left:auto;right:0;transform:translateY(4px)}.tooltip-left[data-open]{transform:none}@media (prefers-reduced-motion: reduce){.tooltip{transition:none}}.panel-scrim{position:fixed;inset:0;z-index:20;visibility:hidden}.panel-scrim[data-open]{visibility:visible}.panel{position:fixed;top:0;left:0;z-index:21;width:min(300px,calc(100vw - 32px));padding:16px;border-radius:24px;box-shadow:var(--surface-highlight),0 0 0 .5px var(--surface-edge),var(--shadow-lg);visibility:hidden;opacity:0;transform:translate(-8px) scale(.98);transform-origin:left top;transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}.panel[data-side=top]{transform:translateY(8px) scale(.98);transform-origin:bottom center}.panel[data-open]{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s}.panel:focus{outline:none}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-head h2{margin:0;font-size:16px;font-weight:600}.panel-close{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--on-2);transition:background-color .15s,color .15s}.panel-close:hover{background:var(--progress-color, var(--fill-2));color:var(--surface)}.panel-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:14px;font-weight:500}.panel-note{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--on-2)}@media (prefers-reduced-motion: reduce){.panel,.panel[data-open]{transition:none}}.segmented{position:relative;display:flex;padding:4px;border-radius:999px}.segment{position:relative;z-index:1;height:36px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--on-2);transition:color .2s var(--ease-out),background-color .2s var(--ease-out)}.segment:hover,.segment.is-active{color:var(--on)}.segment.is-active{color:var(--surface);font-weight:700}.segment:not(.is-active):hover{background:var(--surface-raised)}.segment:focus-visible{outline-offset:-2px}.segmented-thumb{position:absolute;top:4px;left:0;height:36px;border-radius:999px;background:var(--progress-color, var(--on));transition:background-color .4s var(--ease-out)}.card-wrap{width:100%;max-width:460px;container:card / inline-size}.card{--pad: clamp(12px, 3cqi, 16px);--block: clamp(150px, 40cqi, 196px);--digits: clamp(48px, calc((100cqi - 2 * var(--pad) - var(--block)) * .34), 124px);--ring: calc(var(--block) * .76);--radius: 28px;display:grid;grid-template-columns:minmax(0,1fr) var(--block);border-radius:var(--radius);box-shadow:var(--surface-highlight),0 0 0 .5px var(--surface-edge),var(--shadow-lg)}.card-info{display:grid;justify-items:center;min-width:0;align-content:center;padding:var(--pad)}.digits{display:flex;justify-content:center;font-size:var(--digits);font-weight:300;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;transition:opacity .3s var(--ease-out)}.card[data-status=paused] .digits{opacity:.72}.card[data-status=complete] .digits{opacity:.5}.digit{position:relative;display:inline-block;width:.62em;height:1.1em;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}.digit>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.colon{display:inline-flex;align-items:center;justify-content:center;width:.26em;height:1.1em;padding-bottom:.08em}.play-area{position:relative;display:grid;place-items:center;min-height:var(--block);border-radius:var(--radius);background:var(--surface-raised);box-shadow:var(--surface-highlight)}@container card (max-width: 419px){.card{--block: clamp(88px, 26cqi, 108px);--digits: clamp(56px, calc((100cqi - 2 * var(--pad)) * .31), 124px);--ring: calc(var(--block) * .78);grid-template-columns:minmax(0,1fr)}.card-info{padding:var(--pad) var(--pad) calc(var(--pad) * .6)}.play-area{height:var(--block)}}.ring{width:var(--ring);height:var(--ring);pointer-events:none}.ring svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg) scaleY(-1)}.ring circle{fill:none;stroke-width:8}.ring-track{stroke:#292929}.ring-arc{stroke:var(--progress-color, var(--on));stroke-linecap:round}.play-hit{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;color:var(--on);transition:background-color .15s}.play-hit:hover{background:var(--fill-1)}.play-icon{width:clamp(36px,calc(var(--ring) * .44),64px);height:clamp(36px,calc(var(--ring) * .44),64px)}.durations{display:grid;gap:8px}.duration-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500}.stepper{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--surface-raised)}.stepper-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--on);transition:background-color .15s,color .15s}.stepper-btn:hover:not(:disabled){background:var(--fill-2)}.stepper-btn:disabled{color:var(--on-3);cursor:default}.stepper-value{min-width:64px;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.toast-region{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:10}.toast{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:999px;font-size:14px;white-space:nowrap;animation:toast-in .25s var(--ease-out)}.toast-action{height:32px;padding:0 14px;border-radius:999px;background:var(--fill-2);font-weight:600;transition:background-color .15s}.toast-action:hover{background:var(--fill-3)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media (max-height: 520px){.card{--block: clamp(120px, calc(100dvh - 150px) , 196px)}}@media (prefers-reduced-motion: reduce){.toast{animation:none}.digits,.segment,.segmented-thumb{transition:none}}.app{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.stage{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.2vh,24px);width:min(100%,640px)}.secondary-row{display:flex;align-items:center;justify-content:center;gap:8px}.repo-link{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:5;padding:4px;border-radius:999px}@media (max-height: 520px){.app{padding-top:12px;padding-bottom:12px}.stage{gap:10px}}