:root{--out-bg:#00324b;--out-bg-light:#386075;--out-bg-dark:#002131;--out-timer:#f5f5f5;--out-progress:#ff4b4b;--out-time:#ff3030;--active-warning:#ff3030;--out-scale:1;--out-chroma:#00ff00;--out-font:Inter;--out-weight:900}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:default}.hidden{display:none!important}.output-stage{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at top,var(--out-bg-light) 0%,var(--out-bg) 46%,var(--out-bg-dark) 100%);color:var(--out-timer)}body.flat-output .output-stage{background:var(--out-bg)}body.light-output .output-stage{--out-bg:#f5f7fb;--out-bg-light:#fff;--out-bg-dark:#dfe7f1;--out-timer:#0f172a}body.chroma-output .output-stage{background:var(--out-chroma)!important}
.output-timer{font-family:var(--out-font),sans-serif;font-size:calc(clamp(4rem,21vmin,24rem)*var(--out-scale));font-weight:var(--out-weight);font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:.012em;text-align:center;color:var(--out-timer)}body.shadow-output:not(.chroma-output) .output-timer{text-shadow:.02em .02em .05em rgba(0,0,0,.55)}.output-timer.warning{color:var(--active-warning)}.output-timer.overtime{color:var(--out-time)!important}.output-timer.flash{animation:timerFlash .7s steps(1,end) infinite}body.chroma-output .output-timer{color:#fff;-webkit-text-stroke:.035em #000;text-shadow:none!important}body.chroma-output.chroma-invert .output-timer{color:#000;-webkit-text-stroke:.035em #fff}
.output-paused,.output-finished{margin-top:2vmin;font-weight:950;letter-spacing:.2em;font-size:clamp(1rem,2.4vmin,2.3rem)}.output-paused{color:#fbbf24}.output-finished{color:var(--out-time)}
.output-progress{width:min(72vw,1100px);height:clamp(7px,1.2vmin,18px);background:rgba(15,23,42,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin-top:3vmin;transition:opacity .35s ease}.output-progress>div{height:100%;width:100%;background:var(--out-progress);transition:width .1s linear}.output-progress.overtime{opacity:0}
.output-banner{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);width:min(88vw,1500px);padding:1.3vmin 3vmin;border-radius:12px;background:rgba(6,13,24,.88);border:1px solid rgba(255,255,255,.26);color:#fff;text-align:center;font-family:var(--out-font),sans-serif;font-weight:800;font-size:clamp(1.1rem,3.2vmin,3.2rem);box-shadow:0 14px 40px rgba(0,0,0,.38);backdrop-filter:blur(10px)}.output-banner.warning{border-color:var(--active-warning);color:var(--active-warning)}.output-banner.flash{animation:messageFlash .7s steps(1,end) infinite}body.chroma-output .output-banner{background:#000;border:2px solid #fff;color:#fff;box-shadow:none;backdrop-filter:none}body.chroma-output.chroma-invert .output-banner{background:#fff;border-color:#000;color:#000}
.preview-mode .output-timer{font-size:calc(clamp(2rem,17vmin,12rem)*var(--out-scale))}.preview-mode .output-paused,.preview-mode .output-finished{font-size:clamp(.7rem,2vmin,1.2rem)}.preview-mode .output-progress{margin-top:2vmin;width:70vw}.preview-mode .output-banner{bottom:4%;font-size:clamp(.55rem,2.5vmin,1.1rem);padding:.8vmin 2vmin;border-radius:7px}
.fullscreen-hotspot{position:fixed;right:0;bottom:0;width:140px;height:110px;z-index:100;display:flex;align-items:flex-end;justify-content:flex-end;padding:14px}.output-fullscreen-btn{opacity:0;transform:translateY(6px);pointer-events:none;border:1px solid rgba(255,255,255,.25);background:rgba(7,14,24,.82);color:#fff;border-radius:10px;padding:10px 14px;font:800 .82rem/1 Inter,sans-serif;cursor:pointer;backdrop-filter:blur(10px);transition:.14s}.fullscreen-hotspot:hover .output-fullscreen-btn,.fullscreen-hotspot:focus-within .output-fullscreen-btn{opacity:1;transform:none;pointer-events:auto}.preview-mode .fullscreen-hotspot{display:none!important}
@keyframes timerFlash{0%,49%{opacity:1}50%,100%{opacity:.12}}@keyframes messageFlash{0%,49%{opacity:1}50%,100%{opacity:.08}}