@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');:root{font-family:Manrope,system-ui,sans-serif;color:#f5f7ff;background:#0a1020}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0a1020}button{font:inherit;cursor:pointer;border:0;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:300px;padding:30px 22px;background:#f8f9fd;color:#17213c;display:flex;flex-direction:column;gap:18px}.brand{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#5f7cff;color:#fff}.eyebrow{font:500 10px 'DM Mono';letter-spacing:.16em;color:#8790a7;margin:18px 0 0}.presets{display:grid;gap:8px}.preset{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;background:transparent;padding:12px;border-radius:12px;text-align:left;color:#65708a}.preset span{font-size:18px}.preset b{font-size:13px}.preset small{font:12px 'DM Mono'}.preset.active{background:#e8edff;color:#2846bf}.swatches{display:flex;gap:12px}.swatch{width:28px;height:28px;border-radius:50%;background:var(--swatch);outline:0}.swatch.selected{outline:3px solid #fff;box-shadow:0 0 0 2px var(--swatch)}.blue{--swatch:#5f7cff}.green{--swatch:#35c59a}.coral{--swatch:#ff806b}.violet{--swatch:#9b6cff}.side-links{display:grid;gap:6px;border-top:1px solid #e1e5ef;padding-top:14px}.side-links button{background:transparent;text-align:left;color:#65708a;padding:7px 0;font-size:12px}.sponsor{margin-top:auto;background:#eef1f8;border-radius:14px;padding:14px;display:grid;gap:7px}.sponsor small{font:10px 'DM Mono';letter-spacing:.12em;color:#8992a9}.sponsor strong{font-size:13px}.sponsor span{font-size:11px;color:#7c8498;line-height:1.4}.sponsor button{background:#5f7cff;color:#fff;border-radius:8px;padding:9px;font-size:11px;font-weight:700}footer{font-size:10px;color:#9aa2b4}.timer-area{--accent:#5f7cff;flex:1;min-width:0;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#172853 0,#0d1832 34%,#080e1d 80%);display:flex;flex-direction:column;padding:28px 42px}.timer-area:before{content:'';position:absolute;inset:0;opacity:.15;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,#000 30%,transparent)}header,.bottom-note{position:relative;display:flex;justify-content:space-between;align-items:center}.status{font:11px 'DM Mono';letter-spacing:.12em;color:#9daaca}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#35c59a;margin-right:8px;box-shadow:0 0 12px #35c59a}.icon-button{background:#ffffff12;border:1px solid #ffffff20;border-radius:9px;padding:8px 12px}.timer-content{position:relative;display:grid;place-items:center;align-content:center;flex:1}.mode-label{font:11px 'DM Mono';letter-spacing:.2em;color:#9daaca;margin:0 0 22px}.watch{width:min(52vw,490px);height:min(52vw,490px);min-width:300px;min-height:300px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 0deg,rgba(255,255,255,.1) 0deg);position:relative;box-shadow:0 0 60px color-mix(in srgb,var(--accent),transparent 70%)}.watch:before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid #ffffff25;background:radial-gradient(circle,#142345 0,#0b1429 70%)}.watch:after{content:'';position:absolute;inset:28px;border-radius:50%;border:1px dashed #ffffff2b}.watch-inner{position:relative;z-index:1;text-align:center}.time{font:500 clamp(62px,10vw,124px) 'DM Mono';letter-spacing:-.09em}.timer-subtitle{color:#aab6d0;font-size:13px;margin-top:12px}.controls{display:flex;gap:26px;align-items:center;margin-top:32px}.controls button{border-radius:50%;width:68px;height:68px;background:#ffffff10;border:1px solid #ffffff2a;font-size:18px}.controls .primary{width:150px;border:0;background:var(--accent);box-shadow:0 10px 30px color-mix(in srgb,var(--accent),transparent 60%);font-weight:800}.controls span{font-size:11px;display:block;margin-top:4px}.hint{color:#8795b6;font-size:12px;margin:22px 0 0}.hint kbd{background:#ffffff12;border:1px solid #ffffff22;border-radius:4px;padding:3px 6px;font:11px 'DM Mono'}.bottom-note{font-size:11px;color:#697895}.bottom-note span:last-child{color:#4f6081}body[data-theme=green] .timer-area{--accent:#35c59a}body[data-theme=coral] .timer-area{--accent:#ff806b}body[data-theme=violet] .timer-area{--accent:#9b6cff}.presentation .sidebar{display:none}.presentation .timer-area{padding:40px}.presentation .watch{width:min(62vw,650px);height:min(62vw,650px)}@media(max-width:760px){.app-shell{display:block}.sidebar{width:100%;padding:18px;gap:12px}.presets{grid-template-columns:1fr 1fr}.sponsor,footer,.side-links{display:none}.timer-area{min-height:calc(100vh - 260px);padding:18px}.watch{width:78vw;height:78vw;min-width:250px;min-height:250px}.controls{gap:12px}.controls button{width:58px;height:58px}.controls .primary{width:120px}.bottom-note{display:none}}