:root{--color-bg:#14161a;--color-scrim:#0000008c;--color-text:#f2f2f2;--color-text-muted:#b8bcc4;--color-focus:#ff7a59;--color-break:#4cc38a;--color-surface:#1e2128d9;--color-flag-none:#6b7078;--font-timer:clamp(64px, 18vw, 160px);--font-body:16px;--font-small:14px;--tap-min:44px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px}body{background:var(--color-bg);color:var(--color-text);font-size:var(--font-body);margin:0;font-family:system-ui,sans-serif}.timer{justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);display:grid}.timer p{margin:0}.timer__phase{font-size:var(--font-body);font-weight:700}.timer[data-phase=focus] .timer__phase{color:var(--color-focus)}.timer[data-phase=break] .timer__phase{color:var(--color-break)}.timer__remaining{font-size:var(--font-timer);font-variant-numeric:tabular-nums;line-height:1}.timer__next{color:var(--color-text-muted);font-size:var(--font-small)}.timer--skeleton{width:min(80vw,480px);height:var(--font-timer);margin:var(--space-6) auto;border-radius:var(--space-3);background:var(--color-surface)}.top-bar{padding:var(--space-2) var(--space-4);justify-content:space-between;align-items:center;display:flex}.top-bar h1{align-items:center;gap:var(--space-2);font-size:var(--font-body);white-space:nowrap;margin:0;display:flex}.top-bar__logo{width:auto;height:32px}.phase-view{justify-items:center;gap:var(--space-4);display:grid}.button{min-width:var(--tap-min);min-height:var(--tap-min);padding:0 var(--space-4);border:1px solid var(--color-text-muted);border-radius:var(--space-2);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{border-color:var(--color-focus);background:var(--color-focus);color:var(--color-bg);font-weight:700}.button--icon{padding:0;font-size:20px}.settings{box-sizing:border-box;width:min(400px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:var(--space-5);background:var(--color-bg);color:var(--color-text);border:none;margin:0 0 0 auto}.settings::backdrop,.confirm::backdrop{background:var(--color-scrim)}.settings h2{margin-top:0}.settings__section{gap:var(--space-3);margin:0 0 var(--space-5);border:none;padding:0;display:grid}.settings__section legend,.settings__heading{margin:0 0 var(--space-3);font-size:inherit;font-weight:700}.settings__links{margin:0;padding:0;list-style:none}.settings__links a{min-height:var(--tap-min);color:var(--color-text);align-items:center;display:inline-flex}.settings__choice{align-items:center;gap:var(--space-2);min-height:var(--tap-min);display:flex}.settings__choice input{width:24px;height:24px}.settings__durations{gap:var(--space-3);display:grid}.settings__field label{align-items:center;gap:var(--space-2);display:flex}.settings__field input{width:6em;min-height:var(--tap-min);font:inherit}.settings__presets{gap:var(--space-2);display:flex}.settings__note,.settings__error{margin:var(--space-1) 0 0;font-size:var(--font-small)}.settings__note{color:var(--color-text-muted)}.settings__error{color:var(--color-focus)}.confirm{max-width:min(400px, calc(100vw - 2 * var(--space-4)));padding:var(--space-5);border-radius:var(--space-3);background:var(--color-bg);color:var(--color-text);border:none}.confirm__actions{justify-content:flex-end;gap:var(--space-2);display:flex}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.background{z-index:-1;background:var(--color-bg);position:fixed;inset:0}.background__image{object-fit:cover;width:100%;height:100%}.background__scrim{background:var(--color-scrim);position:absolute;inset:0}.background-choices{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}.background-choice{min-height:var(--tap-min);border-radius:var(--space-2);cursor:pointer;display:block;position:relative;overflow:hidden}.background-choice input{top:var(--space-1);left:var(--space-1);width:20px;height:20px;margin:0;position:absolute}.background-choice__thumb{aspect-ratio:16/9;object-fit:cover;background:var(--color-surface);width:100%;display:block}.background-choice:has(input:checked){outline:3px solid var(--color-focus);outline-offset:-3px}:is(.background-choice:has(input:focus-visible),.background-actions__choose:has(input:focus-visible)){outline:2px solid var(--color-text);outline-offset:2px}.background-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.background-actions__choose{align-items:center;display:inline-flex}.background-actions__choose[data-disabled]{opacity:.5;cursor:not-allowed}.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top""notice""main""members""media";align-content:start;min-height:100vh;display:grid}@media (width>=1024px){.app{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top top""notice notice""main members""media members"}}.media-dock{padding:var(--space-4);grid-area:media}.youtube__frame:empty{display:none}.youtube__frame iframe{aspect-ratio:16/9;border:0;width:100%;height:auto;min-height:200px;display:block}@media (width>=1024px){.youtube__frame{max-width:356px}}.youtube__error{margin:var(--space-1) 0 var(--space-3);color:var(--color-focus);font-size:var(--font-small)}.youtube-settings{gap:var(--space-2);margin-top:var(--space-4);display:grid}.youtube-settings__title{font-weight:700}.youtube-settings__url{box-sizing:border-box;width:100%;min-height:var(--tap-min);padding:0 var(--space-2);font:inherit}.youtube-settings__actions{gap:var(--space-2);display:flex}.bgm{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.bgm__preset{min-height:var(--tap-min);padding:0 var(--space-2);border:1px solid var(--color-text-muted);border-radius:var(--space-2);background:var(--color-surface);color:var(--color-text);font:inherit}.bgm__volume{min-width:120px;max-width:240px;min-height:var(--tap-min);accent-color:var(--color-focus);flex:120px}.bgm__error{color:var(--color-focus);font-size:var(--font-small);flex-basis:100%;margin:0}.top-bar{gap:var(--space-4);grid-area:top}.top-bar__count{color:var(--color-text-muted);font-size:var(--font-small);margin:0 0 0 auto}.app__main{grid-area:main}.replaced{justify-content:center;align-items:center;gap:var(--space-3);margin:0 var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--space-2);background:var(--color-surface);flex-wrap:wrap;grid-area:notice;display:flex}.replaced__text{margin:0}.replaced__button{min-height:var(--tap-min);padding:0 var(--space-4);border:1px solid var(--color-text-muted);border-radius:var(--space-2);color:var(--color-text);font:inherit;background:0 0}.members{padding:var(--space-4);grid-area:members}.members[data-stale]{opacity:.5}.members--skeleton{min-height:160px;margin:var(--space-4);border-radius:var(--space-3);background:var(--color-surface)}.members__header{align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);font-size:var(--font-small);color:var(--color-text-muted);flex-wrap:wrap;display:flex}.members__heading{font-size:inherit;margin:0}.members__limit,.members__notice{margin:0 0 var(--space-3);font-size:var(--font-small);color:var(--color-text-muted)}.members__notice:empty{margin:0}.member__clap{min-width:var(--tap-min);min-height:var(--tap-min);border:1px solid var(--color-text-muted);border-radius:var(--space-2);background:var(--color-surface);color:var(--color-text);font-size:var(--font-body);cursor:pointer;flex:none}.member__clap:disabled{opacity:.4;cursor:not-allowed}.member__plus{color:var(--color-break);font-size:var(--font-small);flex:none;animation:1s ease-out forwards plus-one}@keyframes plus-one{to{opacity:0;transform:translateY(calc(-1 * var(--space-2)))}}.session-result{width:min(100%,360px);margin:0 auto var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--space-3);background:var(--color-surface)}.session-result__heading{margin:0 0 var(--space-2);font-size:var(--font-small);color:var(--color-text-muted)}.session-result__row{margin:0}.session-result__claps{margin-left:var(--space-2);font-weight:700;animation:.3s ease-out clap-bounce;display:inline-block}.session-result__finishers{margin-left:var(--space-2);font-weight:700}.global-counters{width:min(100%,360px);margin:0 auto var(--space-4);font-size:var(--font-small);color:var(--color-text-muted)}.global-counters__row{margin:0}.global-counters__value{margin-left:var(--space-2);color:var(--color-text);font-weight:700}@keyframes clap-bounce{40%{transform:scale(1.3)}}.members__list{gap:var(--space-1) var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.member{align-items:center;gap:var(--space-2);min-width:0;min-height:32px;font-size:var(--font-small);display:flex}.member__flag{background:var(--color-flag-none);object-fit:cover;border-radius:50%;flex:none;width:20px;height:20px;display:block}.member__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.member__badge{padding:0 var(--space-1);border:1px solid var(--color-text-muted);border-radius:var(--space-1);color:var(--color-text-muted);flex:none}.member__state{flex:none;margin-left:auto;display:flex}.member__dot{box-sizing:border-box;border-radius:50%;width:10px;height:10px}.member[data-state=focus] .member__dot{background:var(--color-focus)}.member[data-state=break] .member__dot{border:2px solid var(--color-break)}@media (width>=768px) and (width<=1023px){.members__list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=767px){.members__list{grid-template-columns:minmax(0,1fr)}.members:not([data-clap]) .members__list{overscroll-behavior:contain;max-height:232px;overflow-y:auto}}.entry-toast{right:var(--space-4);bottom:var(--space-4);left:var(--space-4);pointer-events:none;justify-content:center;display:flex;position:fixed}.entry-toast__message{padding:var(--space-2) var(--space-4);border-radius:var(--space-2);background:var(--color-surface);margin:0;animation:.2s ease-out entry-in}@keyframes entry-in{0%{opacity:0;transform:translateY(var(--space-2))}}@media (prefers-reduced-motion:reduce){.entry-toast__message,.session-result__claps,.member__plus{animation:none}}