:root{color-scheme:dark;--bg:#070a16;--fg:#dfe6ff;--dim:#8d97c2;--chip:rgba(255,255,255,.07);--line:rgba(255,255,255,.14);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.ui{position:fixed;left:0;right:0;text-align:center;pointer-events:none;padding:0 12px}
.top{top:calc(env(safe-area-inset-top,0px) + 18px)}
.bot{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
.count{color:var(--dim);font-size:14px;letter-spacing:.04em}
.clock{font-size:44px;font-weight:200;letter-spacing:.06em;margin:2px 0}
.phase{color:var(--dim);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:8px;pointer-events:auto}
button{font:inherit;color:var(--dim);background:none;border:0;padding:8px;cursor:pointer;transition:color .2s}
button:hover,button.on{color:var(--fg)}
.ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;padding:0;font-size:20px;line-height:1}
a.ic{color:var(--dim);text-decoration:none;cursor:pointer;transition:color .2s}
a.ic:hover{color:var(--fg)}
.ic:hover{background:rgba(255,255,255,.08)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#snd .son{display:none}#snd.on .son{display:block}#snd.on .soff{display:none}
.chips{display:flex;gap:22px;overflow-x:auto;padding:6px 28px;margin-top:6px;scrollbar-width:none;pointer-events:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips>:first-child{margin-left:auto}.chips>:last-child{margin-right:auto}
.opt{padding:4px 1px;font-size:14px;letter-spacing:.06em;white-space:nowrap;border-bottom:1px solid transparent;flex:none}
.opt .n{font-size:12px;opacity:.7;margin-left:2px}
.opt.on{color:var(--fg);border-bottom-color:var(--fg)}
#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:5}
#modal[hidden]{display:none}
.glass{max-width:380px;max-height:80%;overflow:auto;padding:22px 24px;border-radius:20px;text-align:left;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.glass h2{margin:0 0 8px;font-weight:300;letter-spacing:.08em;font-size:20px}
.glass h3{margin:14px 0 2px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.glass p{margin:0;font-size:14px;color:var(--fg)}
.glass input{font:inherit;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--line);width:110px;padding:4px 2px;outline:none;user-select:text;-webkit-user-select:text}
.glass .x{display:block;margin:16px 0 0 auto;padding:4px 2px}
.toast{color:var(--dim);font-size:13px;min-height:18px;margin-bottom:4px}