:root { --ink:#f5f1e9; --paper:#10100f; --muted:#a6a39d; --line:#2b2b28; --white:#e9e6de; --red:#d94a3b; --teal:#26a6a6; --yellow:#e7bc3c; font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { position:fixed; inset:0; margin:0; background:radial-gradient(circle at 50% 50%, #262520 0, var(--paper) 62%); }
.overtime-alert { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:0; background:#ff1717; mix-blend-mode:screen; }.overtime-alert.is-active { animation:overtime-alert 1s steps(1,end); }
@keyframes overtime-alert { 0%,18%,36%,54%,72%,90% { opacity:.96; } 9%,27%,45%,63%,81%,100% { opacity:0; } }
button,input { font:inherit; }
.clock { position:relative; width:100vw; height:100dvh; min-height:0; touch-action:manipulation; }.clock.is-settings-open { pointer-events:none; }
.timer { --color:var(--white); position:absolute; display:none; transition:opacity .2s; }
.timer.is-dragging { opacity:.55; }.timer[data-drop-target="true"] .timer__button { box-shadow:inset 0 0 0 5px var(--paper); }
.timer[data-active="true"] { filter:brightness(1.15); }
.timer[data-active="true"][data-delay="false"] .time { animation:clock-pulse 1s ease-in-out infinite; color:#ff9f43; }
.timer[data-active="true"][data-delay="true"] .time { animation:delay-pulse 1s ease-in-out infinite; color:#b784ff; }
.timer[data-critical="true"] .time { animation:critical-pulse .55s ease-in-out infinite; color:#ff2727; }
@keyframes clock-pulse { 0%,100% { color:#ff9f43; text-shadow:0 0 8px #ff9f4366; transform:scale(1); } 50% { color:#ffd08c; text-shadow:0 0 24px #ff9f43; transform:scale(1.09); } }
@keyframes delay-pulse { 0%,100% { color:#b784ff; text-shadow:0 0 8px #b784ff66; transform:scale(1); } 50% { color:#e2caff; text-shadow:0 0 24px #b784ff; transform:scale(1.09); } }
@keyframes critical-pulse { 0%,100% { color:#ff2727; text-shadow:0 0 10px #ff272799; transform:scale(1); } 50% { color:#ffe0e0; text-shadow:0 0 28px #ff2727; transform:scale(1.12); } }
.timer__button { position:relative; width:100%; height:100%; border:0; color:var(--paper); background:var(--color); cursor:pointer; user-select:none; touch-action:none; -webkit-touch-callout:none; box-shadow:inset 0 0 0 2px rgb(0 0 0 / .12); }
.timer__content { position:absolute; inset:0; display:grid; place-content:center; text-align:center; transform:rotate(var(--orientation, 0deg)); }
.timer__content .hint { display:block; margin-top:12px; font-size:clamp(9px,1.8vw,13px); letter-spacing:.13em; font-weight:800; opacity:.5; }
.timer__helper { display:block; margin-top:5px; font-size:clamp(8px,1.7vw,11px); font-weight:800; letter-spacing:.05em; opacity:.56; }
.timer[data-delay="true"] .timer__helper { color:#7b32bd; opacity:1; }
.timer__button:active { transform:scale(.985); }
.timer__button .name { display:block; margin-bottom:4px; font-size:clamp(12px,2.8vw,19px); font-weight:800; letter-spacing:.12em; }
.timer__button .time { display:block; font-size:clamp(54px,13vw,100px); font-weight:800; letter-spacing:-.07em; font-variant-numeric:tabular-nums; line-height:.9; }
.timer--top,.timer--bottom { left:0; width:100%; height:30%; }.timer--top { top:0; }.timer--bottom { bottom:0; }
.timer--left,.timer--right { top:0; width:30%; height:100%; }.timer--left { left:0; }.timer--right { right:0; }
.timer--top .timer__button { clip-path:polygon(0 0,100% 0,70% 100%,30% 100%); }.timer--bottom .timer__button { clip-path:polygon(30% 0,70% 0,100% 100%,0 100%); }.timer--right .timer__button { clip-path:polygon(100% 0,100% 100%,0 70%,0 30%); }.timer--left .timer__button { clip-path:polygon(0 0,0 100%,100% 70%,100% 30%); }
.timer[data-slot="top"] { --color:var(--white); }.timer[data-slot="right"] { --color:var(--red); }.timer[data-slot="bottom"] { --color:var(--teal); }.timer[data-slot="left"] { --color:var(--yellow); }
.center { position:absolute; z-index:3; left:50%; top:50%; width:40vw; height:40dvh; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; border:0; border-radius:0; color:var(--ink); background:#191917; cursor:pointer; box-shadow:none; }
.center__readout { position:absolute; top:10px; left:6px; right:6px; display:grid; justify-items:center; gap:2px; }.center__readout--opposite { top:auto; bottom:10px; transform:rotate(180deg); }.center__label,.center__hint,.center__laps,.center__helper { color:var(--muted); font-size:clamp(8px,1.8vw,11px); font-weight:800; letter-spacing:.12em; }.center strong { font-size:clamp(36px,9vw,64px); line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }.center #sum-time,.center #sum-time-opposite { color:#d0cdc5; font-size:clamp(19px,4.6vw,31px); font-variant-numeric:tabular-nums; }.center__helper { font-size:clamp(7px,1.5vw,10px); letter-spacing:.04em; }.center__hint { margin-top:3px; opacity:.7; }.center__laps { position:absolute; left:8px; right:8px; top:50%; max-height:58px; overflow-y:auto; color:var(--yellow); text-align:left; white-space:normal; transform:translateY(-50%); }.center__laps ol { display:flex; flex-wrap:wrap; gap:5px 10px; margin:0; padding:0; list-style:none; }.center__laps li { flex:0 0 auto; font-size:clamp(8px,1.8vw,11px); letter-spacing:0; line-height:1.25; }
dialog { width:min(540px, calc(100% - 24px)); max-height:calc(100dvh - 24px); border:1px solid #393934; border-radius:22px; padding:0; overflow:hidden; color:var(--ink); background:#1a1a18; box-shadow:0 24px 80px #000c; } dialog::backdrop { background:#050505aa; backdrop-filter:blur(4px); }.settings-form { max-height:calc(100dvh - 24px); padding:24px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }.settings-form header,.settings-form footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }.settings-form header { margin-bottom:24px; }.eyebrow { margin:0 0 3px; color:var(--yellow); font-size:13px; font-weight:800; letter-spacing:.15em; }.settings-form h1 { margin:0; font-size:30px; letter-spacing:-.05em; }.icon-button { border:0; color:var(--ink); background:transparent; font-size:36px; cursor:pointer; }.settings-form label { display:grid; grid-template-columns:1fr auto; gap:8px 12px; margin:20px 0; font-size:17px; font-weight:700; }.settings-form input { grid-column:1/-1; width:100%; accent-color:var(--yellow); }.settings-form .duration-input { grid-column:auto; width:72px; padding:3px 0; border:0; color:var(--yellow); background:transparent; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; outline-color:var(--yellow); }.settings-form output { color:var(--yellow); font-variant-numeric:tabular-nums; }.setting-note { margin:22px 0; color:var(--muted); font-size:15px; line-height:1.4; }.settings-form footer { padding-top:18px; border-top:1px solid var(--line); }.settings-form footer button { border-radius:10px; padding:13px 17px; border:1px solid var(--line); font-size:16px; font-weight:800; cursor:pointer; }.ghost { color:var(--ink); background:transparent; }.primary { color:#171712; background:var(--yellow); border-color:var(--yellow)!important; }
.color-settings { margin:23px 0; }.color-settings > p { margin:0 0 8px; font-size:17px; font-weight:700; }.player-row { display:flex; align-items:center; justify-content:space-between; min-height:54px; border-top:1px solid var(--line); }.player-row:last-child { border-bottom:1px solid var(--line); }.player-row.is-dragging { opacity:.45; }.drag-handle { width:34px; border:0; color:var(--muted); background:transparent; cursor:grab; font-size:22px; letter-spacing:-3px; touch-action:none; }.player-row__name { flex:1; font-size:16px; font-weight:800; }.player-time-controls { display:flex; align-items:center; gap:4px; }.player-time-controls button,.orientation-button { border:0; border-radius:6px; color:var(--ink); background:#2d2d2a; cursor:pointer; font-weight:800; }.player-time-controls button { width:28px; height:30px; }.orientation-button { min-width:60px; height:30px; padding:0 6px; font-size:11px; }.player-time-controls input { width:58px; padding:2px; border:0; color:var(--yellow); background:transparent; text-align:center; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; outline-color:var(--yellow); }.color-settings input[type="color"] { width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }.color-settings input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }.color-settings input[type="color"]::-webkit-color-swatch { border:1px solid #0005; border-radius:50%; }
@media (orientation:landscape) { .timer--top,.timer--bottom { height:37%; }.timer--left,.timer--right { width:25%; }.timer--top .timer__button { clip-path:polygon(0 0,100% 0,75% 100%,25% 100%); }.timer--bottom .timer__button { clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); }.timer--right .timer__button { clip-path:polygon(100% 0,100% 100%,0 63%,0 37%); }.timer--left .timer__button { clip-path:polygon(0 0,0 100%,100% 63%,100% 37%); }.center { width:50vw; height:26dvh; } }