#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.theme-toggle{position:fixed;top:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;border:none;background:#0000000d;color:#86868b;font-size:1.25rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0}.theme-toggle:hover{background:#0000001a;transform:scale(1.05)}h1{font-size:2.5rem;margin-bottom:3rem;color:#1d1d1f;font-weight:600;letter-spacing:-.02em;transition:color .3s ease}h1 img{vertical-align:middle;margin-right:10px;opacity:.9}.card{padding:2em}.play-button{font-size:1.25rem;padding:0;border-radius:50%;border:none;background:linear-gradient(180deg,#fff,#f5f5f7);color:#1d1d1f;cursor:pointer;transition:all .3s cubic-bezier(.25,.1,.25,1);font-weight:500;letter-spacing:-.01em;width:140px;height:140px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 1px 3px #0000000f,0 4px 12px #00000014,0 0 0 1px #0000000a,inset 0 1px #fffc}.play-button span{position:relative;z-index:2}.play-button:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -90deg,rgba(0,122,255,.12) var(--progress, 0%),transparent var(--progress, 0%));opacity:var(--progress-opacity, 0);transition:opacity .4s ease;pointer-events:none;z-index:0}.play-button.playing:before{background:conic-gradient(from -90deg,rgba(255,255,255,.15) var(--progress, 0%),transparent var(--progress, 0%))}.play-button:hover{transform:scale(1.03);box-shadow:0 2px 6px #00000014,0 8px 24px #0000001f,0 0 0 1px #0000000a,inset 0 1px #fffc}.play-button:active{transform:scale(.98)}.play-button.playing{background:linear-gradient(180deg,#1d1d1f,#0a0a0a);color:#fff;box-shadow:0 1px 3px #0000001f,0 4px 16px #0003,inset 0 1px #ffffff1a}.play-button.playing:hover{background:linear-gradient(180deg,#2d2d2f,#1a1a1a)}.status{margin-top:2.5rem;color:#86868b;font-size:1rem;font-weight:400;letter-spacing:-.01em;transition:color .3s ease}.interval-select{font-size:inherit;font-family:inherit;font-weight:500;color:#1d1d1f;background:transparent;border:none;border-radius:4px;padding:2px 6px;margin:0 2px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:all .2s ease;background-color:#0000000a}.interval-select:hover:not(:disabled){background-color:#00000014}.interval-select:focus{outline:none;background-color:#007aff1a}.interval-select:disabled{cursor:default;color:#86868b;background-color:transparent}.dark .theme-toggle{background:#ffffff14;color:#a1a1a6}.dark .theme-toggle:hover{background:#ffffff1f}.dark h1{color:#f5f5f7}.dark h1 img{filter:invert(1) brightness(.9)}.dark .play-button{background:linear-gradient(180deg,#2c2c2e,#1c1c1e);color:#f5f5f7;box-shadow:0 1px 3px #0000004d,0 4px 12px #0006,0 0 0 1px #ffffff0f,inset 0 1px #ffffff14}.dark .play-button:before{background:conic-gradient(from -90deg,rgba(10,132,255,.25) var(--progress, 0%),transparent var(--progress, 0%))}.dark .play-button:hover{box-shadow:0 2px 6px #0006,0 8px 24px #00000080,0 0 0 1px #ffffff14,inset 0 1px #ffffff14}.dark .play-button.playing{background:linear-gradient(180deg,#f5f5f7,#e8e8ed);color:#1d1d1f;box-shadow:0 1px 3px #0003,0 4px 16px #ffffff1a,inset 0 1px #ffffff80}.dark .play-button.playing:before{background:conic-gradient(from -90deg,rgba(0,0,0,.12) var(--progress, 0%),transparent var(--progress, 0%))}.dark .play-button.playing:hover{background:linear-gradient(180deg,#fff,#f5f5f7)}.dark .status{color:#6e6e73}.dark .interval-select{color:#f5f5f7;background-color:#ffffff14}.dark .interval-select:hover:not(:disabled){background-color:#ffffff1f}.dark .interval-select:focus{background-color:#0a84ff33}.dark .interval-select:disabled{color:#6e6e73;background-color:transparent}.dark .interval-select option{background-color:#1c1c1e;color:#f5f5f7}:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#1d1d1f;background-color:#fbfbfd;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease}:root.dark{color:#f5f5f7;background-color:#000}:root.dark body{background-color:#000}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:none;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f5f5f7;cursor:pointer;transition:all .2s ease}button:focus,button:focus-visible{outline:none}