:root{color-scheme:dark;--bg:#06070c;--ink:#f3f5fc;--ink-2:#99a2bd;--ink-3:#6d7692;--glass:#ffffff0e;--glass-2:#ffffff1a;--edge:#ffffff1f;--edge-2:#ffffff47;--blur:blur(26px) saturate(180%);--sheen:inset 0 1px 0 #ffffff29, inset 0 -1px 0 #ffffff0a;--lift:0 24px 48px -24px #000000e6;--r:20px;--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 6.2 8 10.4l4.2-4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--oc-g:#ff9a3c;--oc-c:#ff4d7d;--dr-g:#38d0ff;--dr-c:#9d7bff;--accent:var(--oc-g);--accent-on:#06070c;--step-0:1.0625rem;--step--1:.9375rem;--step--2:.8125rem;--step-1:1.3125rem;--step-2:1.6875rem;--gap:1.125rem;--tap:44px}body[data-bank=oc-g]{--accent:var(--oc-g)}body[data-bank=oc-c]{--accent:var(--oc-c)}body[data-bank=dr-g]{--accent:var(--dr-g)}body[data-bank=dr-c]{--accent:var(--dr-c)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:radial-gradient(140% 90% at 50% -20%, #161c33 0%, #0a0c16 45%, var(--bg) 100%), var(--bg);min-height:100dvh;color:var(--ink);font-family:var(--font-thmanyah-sans);font-size:var(--step-0);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0;font-weight:300;line-height:1.6;overflow-x:hidden}body:before,body:after{content:"";z-index:-1;pointer-events:none;aspect-ratio:1;filter:blur(90px);opacity:.42;background:var(--accent);border-radius:50%;width:min(78vw,40rem);transition:background .5s;position:fixed}body:before{inset-block-start:-20vh;inset-inline-start:-14vw}body:after{background:color-mix(in oklab, var(--accent) 40%, #4b5cff);opacity:.34;inset-block-end:-24vh;inset-inline-end:-16vw}@media (prefers-reduced-motion:no-preference){body:before{animation:20s ease-in-out infinite alternate drift}body:after{animation:26s ease-in-out infinite alternate-reverse drift}}@keyframes drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(7vw,9vh)scale(1.2)}}h1,h2,h3,h4,h5,h6{font-feature-settings:"salt" 1}button,select,input,textarea{font:inherit;color:inherit}option,selectedcontent,dialog,::picker(select){font-family:inherit}:where(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{max-width:40rem;padding:1rem 1.125rem calc(2rem + env(safe-area-inset-bottom));gap:var(--gap);flex-direction:column;min-height:100dvh;margin-inline:auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:1rem;display:flex}.wordmark{font-size:var(--step-1);letter-spacing:-.01em;align-items:center;gap:.5rem;margin:0;font-weight:700;line-height:1;display:flex}.mark{grid-template-columns:1fr 1fr;gap:2px;width:1.15em;height:1.15em;display:grid}.mark i{opacity:.22;border-radius:2px;transition:opacity .3s,box-shadow .3s}.mark i:first-child{background:var(--oc-g)}.mark i:nth-child(2){background:var(--oc-c)}.mark i:nth-child(3){background:var(--dr-g)}.mark i:nth-child(4){background:var(--dr-c)}body[data-bank=oc-g] .mark i:first-child,body[data-bank=oc-c] .mark i:nth-child(2),body[data-bank=dr-g] .mark i:nth-child(3),body[data-bank=dr-c] .mark i:nth-child(4){opacity:1;box-shadow:0 0 10px}.icon-btn,.card,.btn,.dial,.durations button,.clock-controls button,.mute,.field select{background:var(--glass);-webkit-backdrop-filter:var(--blur);border:1px solid var(--edge);box-shadow:var(--sheen), var(--lift)}.icon-btn{min-height:var(--tap);font-size:var(--step--1);cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:0 .875rem;font-weight:400;transition:border-color .2s,background .2s;display:inline-flex}.icon-btn:hover{border-color:var(--edge-2);background:var(--glass-2)}.icon-btn svg{flex:none;width:18px;height:18px}.icon-btn .count{font-size:var(--step--2);color:var(--accent);font-variant-numeric:tabular-nums}.fields{grid-template-columns:1fr 1fr;gap:.625rem;display:grid}@media (width<=26rem){.fields{grid-template-columns:1fr}}.field{gap:.35rem;display:grid;position:relative}.field>span{font-size:var(--step--2);color:var(--ink-3);letter-spacing:.02em}.field select{appearance:base-select;width:100%;height:3.25rem;font-size:var(--step--1);text-align:start;cursor:pointer;border-radius:14px;justify-content:flex-start;align-items:center;padding-inline:1rem 3rem;font-weight:500;transition:border-color .2s,background .2s;display:flex}.field select:hover{border-color:var(--edge-2);background:var(--glass-2)}.field select selectedcontent{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field select::picker-icon{display:none}.field:after{content:"";background:var(--ink-2);width:3rem;height:3.25rem;-webkit-mask:var(--chevron) center / 15px 15px no-repeat;mask:var(--chevron) center / 15px 15px no-repeat;pointer-events:none;transition:rotate .32s cubic-bezier(.34,1.4,.64,1),background .2s;position:absolute;inset-block-end:0;inset-inline-end:0}.field:has(select:open):after{background:var(--accent);rotate:180deg}::picker(select){appearance:base-select;border:1px solid var(--edge);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sheen), 0 30px 60px -20px #000000e6;opacity:1;background:#0e101ab8;border-radius:16px;margin-block-start:.4rem;padding:.35rem;transition:opacity .18s,translate .18s cubic-bezier(.2,.9,.3,1);translate:0}@starting-style{::picker(select){opacity:0;translate:0 -.5rem}}option{min-height:var(--tap);font-size:var(--step--1);color:var(--ink-2);background:0 0;border-radius:11px;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex}option:hover,option:focus{background:var(--glass-2);color:var(--ink)}option:checked{color:var(--ink);font-weight:500}option::checkmark{content:"●";color:var(--accent);font-size:.7em}.card{border-radius:28px;flex:auto;align-content:center;gap:1.25rem;min-height:10rem;padding:1.75rem 1.375rem;transition:border-color .35s,background .35s,box-shadow .35s;display:grid;position:relative;overflow:hidden}.card:before{content:"";pointer-events:none;background:linear-gradient(#ffffff12,#0000);height:55%;position:absolute;inset:0 0 auto}.card[data-state=rolling],.card[data-state=topic],.card[data-state=running]{background:linear-gradient(155deg, color-mix(in oklab, var(--accent) 20%, transparent), #ffffff0a);border-color:color-mix(in oklab, var(--accent) 40%, var(--edge))}.card[data-state=done]{border-color:color-mix(in oklab, var(--accent) 65%, transparent);box-shadow:var(--sheen), var(--lift), 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent), 0 0 44px -6px color-mix(in oklab, var(--accent) 55%, transparent)}.reel{position:relative}.card[data-state=rolling] .reel{-webkit-mask-image:linear-gradient(#0000,#000 16% 84%,#0000);mask-image:linear-gradient(#0000,#000 16% 84%,#0000)}.topic{letter-spacing:-.015em;text-wrap:pretty;margin:0;font-size:clamp(1.5rem,6.2vw,3.25rem);font-weight:500;line-height:1.32}.card[data-state=ready] .topic{color:var(--ink-2);font-size:clamp(1.25rem,4.6vw,1.75rem);font-weight:300}@media (prefers-reduced-motion:no-preference){.topic[data-roll=spin]{animation:.15s linear slot}.topic[data-roll=land]{animation:.5s cubic-bezier(.16,1,.3,1) land}}@keyframes slot{0%{opacity:.25;filter:blur(7px);transform:translateY(.9em)}to{opacity:1;filter:blur();transform:none}}@keyframes land{0%{opacity:.4;filter:blur(5px);transform:translateY(.55em)scale(.97)}60%{filter:blur();transform:translateY(-.06em)scale(1.015)}to{opacity:1;transform:none}}.exhausted{justify-items:start;gap:.75rem;display:grid}.exhausted p{font-size:var(--step-1);margin:0;font-weight:500}.actions{grid-template-columns:1fr 1fr;gap:.625rem;display:grid}.btn{min-height:3.5rem;font-size:var(--step-0);cursor:pointer;border-radius:16px;padding:0 1rem;font-weight:500;transition:background .2s,border-color .2s,opacity .2s,transform .12s;position:relative;overflow:hidden}.btn:hover:not(:disabled){background:var(--glass-2);border-color:var(--edge-2)}.btn:active:not(:disabled){transform:scale(.985)}.btn-primary{background:linear-gradient(150deg, color-mix(in oklab, var(--accent) 88%, #fff), var(--accent));border-color:color-mix(in oklab, var(--accent) 70%, transparent);color:var(--accent-on);box-shadow:var(--sheen), 0 16px 34px -14px color-mix(in oklab, var(--accent) 80%, transparent);font-weight:700}.btn-primary:hover:not(:disabled){background:linear-gradient(150deg, #fff, var(--accent));border-color:var(--accent)}.btn:disabled{opacity:.32;cursor:not-allowed}.timer{justify-items:center;gap:.75rem;display:grid}.run{width:min(24rem,90vw);padding:1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));border:1px solid var(--edge);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sheen), 0 40px 80px -30px #000000f2;color:var(--ink);opacity:0;transition:opacity .26s ease, scale .26s cubic-bezier(.2, .9, .3, 1), display .26s allow-discrete, overlay .26s allow-discrete;background:#0a0c14b8;border-radius:32px;scale:.94}.run[open]{opacity:1;justify-items:center;gap:1.25rem;display:grid;scale:1}@starting-style{.run[open]{opacity:0;scale:.94}}.run::backdrop{-webkit-backdrop-filter:blur(6px);transition:background .26s, display .26s allow-discrete, overlay .26s allow-discrete;background:#03040800}.run[open]::backdrop{background:#030408a8}@starting-style{.run[open]::backdrop{background:#03040800}}@media (prefers-reduced-motion:reduce){.run,.run::backdrop{transition:none}}.run-topic{text-align:center;font-size:var(--step--1);color:var(--ink-2);text-wrap:balance;margin:0;line-height:1.5}.dial{aspect-ratio:1;border-radius:50%;place-items:center;width:min(62vw,14.5rem);padding:0;display:grid;position:relative}.dial svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}[dir=rtl] .dial svg{transform:rotate(-90deg)scaleY(-1)}.dial circle{fill:none;stroke-width:5px;stroke-linecap:round;stroke-dasharray:100}.dial .track{stroke:#ffffff17}.dial .prog{stroke:var(--accent);stroke-dashoffset:0;filter:drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 70%, transparent));transition:stroke-dashoffset .22s linear,stroke .3s}.dial[data-running=true]{border-color:color-mix(in oklab, var(--accent) 30%, var(--edge))}.clock-value{letter-spacing:.02em;font-size:clamp(2rem,9vw,2.75rem);font-weight:300;line-height:1;position:relative}.dial[data-running=true] .clock-value{color:var(--accent)}@media (prefers-reduced-motion:no-preference){.dial[data-warn=true] .clock-value{animation:1s ease-in-out infinite pulse}}@keyframes pulse{50%{opacity:.45}}.durations{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.durations button{min-height:var(--tap);min-width:var(--tap);font-size:var(--step--1);cursor:pointer;color:var(--ink-2);box-shadow:none;border-radius:999px;padding:0 .9rem;transition:color .2s,border-color .2s,background .2s}.durations button[aria-checked=true]{color:var(--accent-on);background:var(--accent);border-color:var(--accent);box-shadow:0 10px 26px -12px color-mix(in oklab, var(--accent) 85%, transparent);font-weight:700}.durations button:disabled{opacity:.35;cursor:not-allowed}.mute{width:var(--tap);height:var(--tap);cursor:pointer;color:var(--ink-2);border-radius:999px;place-items:center;padding:0;transition:color .2s,border-color .2s,background .2s;display:grid}.mute:hover{color:var(--ink);border-color:var(--edge-2);background:var(--glass-2)}.mute svg{display:block}.clock-controls{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.clock-controls button{min-height:var(--tap);font-size:var(--step--1);cursor:pointer;box-shadow:none;border-radius:999px;padding:0 .9rem;transition:border-color .2s,background .2s}.clock-controls button:hover{border-color:var(--edge-2);background:var(--glass-2)}.clock-controls .btn-primary{min-height:var(--tap);background:linear-gradient(150deg, color-mix(in oklab, var(--accent) 88%, #fff), var(--accent));border-color:color-mix(in oklab, var(--accent) 70%, transparent);color:var(--accent-on);padding-inline:1.75rem}.clock-controls .btn-primary:hover{background:linear-gradient(150deg, #fff, var(--accent))}.scrim{backdrop-filter:blur(3px);background:#03040899;border:0;padding:0;position:fixed;inset:0}.drawer{width:min(24rem,92vw);-webkit-backdrop-filter:var(--blur);border-inline-end:1px solid var(--edge);z-index:2;background:#0a0c14b8;flex-direction:column;transition:transform .24s cubic-bezier(.3,.8,.3,1);display:flex;position:fixed;inset-block:0;inset-inline-start:0;transform:translate(-100%)}[dir=rtl] .drawer{transform:translate(100%)}.drawer[data-open=true]{transform:none}@media (prefers-reduced-motion:reduce){.drawer,.switch .track:after{transition:none}}.drawer-head{border-bottom:1px solid var(--edge);justify-content:space-between;align-items:center;padding:1rem 1.125rem .75rem;display:flex}.drawer-head h2{font-size:var(--step-1);margin:0;font-weight:700}.drawer-note{font-size:var(--step--1);color:var(--ink-2);border-bottom:1px solid var(--edge);background:#ffffff08;margin:0;padding:.875rem 1.125rem;line-height:1.55}.drawer-body{overscroll-behavior:contain;flex:1;overflow-y:auto}.drawer-foot{padding:.875rem 1.125rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--edge);gap:.75rem;display:grid}.switch{min-height:var(--tap);font-size:var(--step--1);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;display:flex}.switch input{opacity:0;pointer-events:none;position:absolute}.switch .track{border:1px solid var(--edge);background:#ffffff0f;border-radius:999px;flex:none;width:46px;height:26px;transition:background .15s,border-color .15s;position:relative}.switch .track:after{content:"";background:var(--ink-2);border-radius:999px;width:18px;height:18px;transition:transform .15s,background .15s;position:absolute;inset-block-start:3px;inset-inline-start:3px}.switch input:checked+.track{background:var(--accent);border-color:var(--accent)}.switch input:checked+.track:after{background:var(--accent-on);transform:translate(-20px)}[dir=ltr] .switch input:checked+.track:after{transform:translate(20px)}.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:3px}.hist{margin:0;padding:0;list-style:none}.hist li{border-bottom:1px solid #ffffff12;grid-template-columns:1fr auto;align-items:center;gap:.25rem .75rem;padding:.75rem 1.125rem;display:grid}.hist .text{font-size:var(--step--1);line-height:1.45}.hist .meta{font-size:var(--step--2);color:var(--ink-3);flex-wrap:wrap;grid-column:1;gap:.1rem .75rem;display:flex}.hist .meta b{color:var(--accent);font-weight:500}.hist .meta time{margin-inline-start:auto}.hist .del{width:var(--tap);height:var(--tap);cursor:pointer;color:var(--ink-3);background:0 0;border:1px solid #0000;border-radius:10px;grid-area:1/2/span 2;place-items:center;display:grid}.hist .del:hover{border-color:var(--edge);color:var(--ink);background:var(--glass)}.empty{color:var(--ink-3);font-size:var(--step--1);text-align:center;padding:2.5rem 1.125rem}.link-btn{min-height:var(--tap);font-size:var(--step--1);color:var(--ink-3);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;justify-self:start;padding:.5rem 0;text-decoration:underline}.link-btn:hover{color:var(--ink)}.stop{justify-content:center;align-items:start;gap:.75rem}.stop .code{font-size:var(--step--1);letter-spacing:.18em;color:var(--accent);margin:0}.stop h1{letter-spacing:-.015em;margin:0;font-size:clamp(1.75rem,7vw,2.75rem);font-weight:500;line-height:1.25}.stop .say{color:var(--ink-2);max-width:30ch;margin:0 0 .75rem}.stop .btn{place-items:center;padding-inline:1.75rem;text-decoration:none;display:grid}.install{max-width:26rem;-webkit-backdrop-filter:var(--blur);border:1px solid var(--edge);box-shadow:var(--sheen), var(--lift);color:var(--ink);font-size:var(--step--1);z-index:3;background:#0c0e18bf;border-radius:18px;align-items:center;gap:.75rem;margin-inline:auto;padding:.875rem 1rem;display:flex;position:fixed;inset-block-end:calc(.75rem + env(safe-area-inset-bottom));inset-inline:.75rem}.install p{flex:1;margin:0;line-height:1.45}.install button{border:1px solid var(--accent);background:var(--accent);min-height:40px;color:var(--accent-on);font-size:var(--step--1);cursor:pointer;border-radius:999px;padding:0 .875rem;font-weight:500}.install button.ghost{color:var(--ink-3);background:0 0;border-color:#0000}
