@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap";:root{--bg: #0a0b0c;--card-bg: #14151a;--panel-bg: rgba(20, 21, 26, .95);--text: #8a8f9a;--text-dim: #4a4f5a;--accent: #00d4ff;--work: #ff00ff;--brk: #00ff88;--danger: #ff3366;--border: #2a2f3a;--shadow: 0 4px 24px rgba(0, 0, 0, .6);--font-mono: "JetBrains Mono", monospace;--font-display: "Orbitron", sans-serif}.header{display:flex;flex-direction:column;gap:8px}.clock-card{background:var(--card-bg);border:1px solid var(--border);border-radius:24px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:20px}.config-grid{gap:10px!important}.config-field label{font-size:.6rem!important}.config-field input{padding:8px!important;font-size:.8rem!important}.audio-controls{gap:8px!important}@media(min-width:1025px){body{align-items:stretch}.app{max-width:1600px;width:100%;height:100vh;padding:20px 30px;margin:0 auto;display:grid;grid-template-columns:1fr min(30vw,380px);grid-template-rows:auto 1fr auto;grid-template-areas:"header side" "clock side" "penalty side";gap:20px;align-items:center}.header{grid-area:header;flex-direction:row!important;justify-content:space-between!important;border-bottom:1px solid var(--border);padding-bottom:30px;align-self:start}.clock-card{grid-area:clock;background:transparent;border:none;box-shadow:none;height:100%;justify-content:center}.ring-wrapper{width:min(30vw,350px)!important;height:min(30vw,350px)!important}.clock-time{font-size:min(8vw,6rem)!important}.side-panel{grid-area:side;background:var(--panel-bg);padding:30px 20px;border-radius:32px;border:1px solid var(--border);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);height:auto;min-height:400px;justify-content:center;gap:40px;box-shadow:var(--shadow),0 0 60px #00000080}.penalty-banner{grid-area:penalty;align-self:end}}.header__title{font-family:var(--font-display);font-size:2.2rem;color:var(--accent);text-shadow:0 0 20px rgba(0,212,255,.4);display:flex;align-items:center;gap:12px}.header__title span{color:var(--text);font-family:var(--font-mono);font-size:1rem}.cycle-dot{width:12px;height:12px;border-radius:50%;background:var(--border);transition:all .3s ease}.ring-wrapper{position:relative;width:280px;height:280px;display:flex;justify-content:center;align-items:center}.ring-bg-circle{position:absolute;width:90%;height:90%;border-radius:50%;border:2px solid var(--border);background:#14151a66}.ring-svg{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}.clock-face{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;pointer-events:none}.clock-time{font-family:var(--font-display);font-size:5rem;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(255,255,255,.1)}.clock-sublabel{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-top:10px}.btn{width:100%;padding:18px;border-radius:18px;border:none;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.btn--start{background:linear-gradient(135deg,var(--work),#b000b0);color:#fff;box-shadow:0 0 20px #f0f3}.btn--break{background:linear-gradient(135deg,var(--brk),#00a040);color:#fff;box-shadow:0 0 20px #0f83}.btn--danger{background:linear-gradient(135deg,var(--danger),#c00040);color:#fff}.btn--ghost{background:var(--border);color:var(--text);border:1px solid var(--border)}.state-pill{background:var(--card-bg);padding:8px 16px;border-radius:20px;border:1px solid var(--border);font-size:.7rem;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}.state-pill__dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.penalty-banner{background:#ff33661a;border:1px solid var(--danger);padding:20px;border-radius:20px;display:flex;align-items:center;gap:15px}.penalty-banner__text{color:var(--danger);font-size:.9rem;font-weight:600}.penalty-banner__text small{display:block;font-size:.7rem;opacity:.7;font-weight:400}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}:root{--bg: #0a0b0c;--card-bg: #14151a;--panel-bg: rgba(26, 28, 36, .9);--text: #8a8f9a;--text-dim: #4a4f5a;--accent: #00d4ff;--work: #ff00ff;--brk: #00ff88;--danger: #ff3366;--border: #2a2f3a;--shadow: 0 4px 24px rgba(0, 0, 0, .6);--font-mono: "JetBrains Mono", monospace;--font-display: "Orbitron", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);background:var(--bg) center/cover no-repeat fixed;color:var(--text);min-height:100vh;font-family:var(--font-mono);display:flex;justify-content:center;align-items:center;overflow-x:hidden}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.03) 0px,rgba(0,0,0,.03) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999;opacity:.15}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0a0b0ccc,#0a0b0cf2);z-index:-1}.app{width:100%;max-width:450px;padding:20px;display:flex;flex-direction:column;gap:20px}.header{display:flex;flex-direction:column;gap:10px}.clock-card{background:var(--card-bg);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:25px;position:relative}.side-panel{display:flex;flex-direction:column;gap:15px}@media(min-width:1025px){body{align-items:stretch}.app{max-width:1400px;width:100%;height:100vh;padding:20px 30px;margin:0 auto;display:grid;grid-template-columns:1fr min(30vw,380px);grid-template-rows:auto 1fr auto;grid-template-areas:"header side" "clock side" "penalty side";gap:20px;align-items:center}.header{grid-area:header;border-bottom:1px solid var(--border);padding-bottom:30px;flex-direction:row;justify-content:space-between;align-items:center;align-self:start}.clock-card{grid-area:clock;height:100%;background:transparent;border:none;box-shadow:none;display:flex;justify-content:center;align-items:center;padding:0;margin:0}.ring-wrapper{width:min(30vw,350px);height:min(30vw,350px);margin:0 auto}.clock-time{font-size:min(8vw,6rem)!important;text-shadow:0 0 80px rgba(0,212,255,.2)}.clock-sublabel{font-size:1.5rem!important;letter-spacing:5px!important}.side-panel{grid-area:side;background:var(--panel-bg);padding:30px 20px;border-radius:32px;border:1px solid var(--border);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);display:flex;flex-direction:column;justify-content:center;gap:40px;height:auto;min-height:400px;align-self:center;box-shadow:var(--shadow),0 0 60px #0009}.actions{flex-direction:column;gap:20px}.actions .btn{padding:25px;font-size:1.3rem}.penalty-banner{grid-area:penalty;margin-top:auto;align-self:end;width:100%}}.header__title{font-family:var(--font-display);font-size:2.2rem;color:var(--accent);text-shadow:0 0 20px rgba(0,212,255,.5);display:flex;align-items:center;gap:10px}.header__title span{color:var(--text);font-family:var(--font-mono);font-weight:400;font-size:1rem}.header__sub{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px}.cycle-row{display:flex;align-items:center;gap:15px}.cycle-label{font-size:.7rem;text-transform:uppercase;color:var(--text-dim);font-weight:700}.cycle-dots{display:flex;gap:8px}.cycle-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:all .3s ease}.cycle-dot.active{background:var(--accent);box-shadow:0 0 10px var(--accent)}.cycle-dot.long-break{background:var(--brk);box-shadow:0 0 10px var(--brk)}.ring-wrapper{position:relative;width:240px;height:240px;display:flex;justify-content:center;align-items:center;transition:all .3s ease}.ring-bg-circle{position:absolute;width:90%;height:90%;border-radius:50%;border:2px solid var(--border);background:#1a1c2480}.ring-svg{position:absolute;transform:rotate(-90deg);width:100%;height:100%}.ring-track{fill:none;stroke:var(--border);stroke-width:4}.ring-progress{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.clock-face{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;z-index:10;pointer-events:none}.clock-time{font-family:var(--font-display);font-size:4.5rem;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;margin:0;transition:all .4s ease}.clock-time.overtime{color:var(--danger);text-shadow:0 0 40px var(--danger)}.clock-sublabel{font-size:.8rem;color:var(--text-dim);margin-top:10px;text-transform:uppercase;letter-spacing:2px}.state-pill{background:var(--card-bg);padding:8px 20px;border-radius:30px;font-size:.7rem;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border)}.state-pill__dot{width:10px;height:10px;border-radius:50%;background:var(--text-dim)}[data-state=WORK_TIMER] .state-pill__dot{background:var(--work);box-shadow:0 0 10px var(--work)}[data-state=BREAK_TIMER] .state-pill__dot{background:var(--brk);box-shadow:0 0 10px var(--brk)}[data-state$=OVERTIME] .state-pill__dot{background:var(--danger);animation:blink 1s infinite}.actions{display:flex;gap:12px}.btn{flex:1;padding:16px;border-radius:16px;border:none;font-family:var(--font-mono);font-weight:700;cursor:pointer;transition:all .2s ease;color:#fff;text-transform:uppercase;font-size:.9rem}.btn:active{transform:scale(.95)}.btn--start{background:linear-gradient(135deg,var(--work),#c000c0);box-shadow:0 0 20px #ff00ff4d}.btn--break{background:linear-gradient(135deg,var(--brk),#00a040);box-shadow:0 0 20px #00ff884d}.btn--danger{background:linear-gradient(135deg,var(--danger),#a00020);box-shadow:0 0 20px #ff33664d}.btn--ghost{background:var(--card-bg);color:var(--text);border:1px solid var(--border)}.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--border)}.penalty-banner{background:#ff33661a;border:1px solid var(--danger);padding:15px 25px;border-radius:16px;display:flex;align-items:center;gap:15px;animation:slideDown .5s ease}.penalty-banner__text{font-size:.9rem;color:var(--danger);font-weight:600}.penalty-banner__text small{display:block;font-size:.7rem;opacity:.8;font-weight:400}.config-toggle{background:var(--card-bg);padding:20px;border-radius:16px;border:1px solid var(--border);display:flex;justify-content:space-between;cursor:pointer;margin-top:10px}.config-body{max-height:0;overflow:hidden;transition:all .5s ease;background:var(--panel-bg);border-radius:0 0 16px 16px}.config-body.open{max-height:700px;padding:30px;border:1px solid var(--border);border-top:none}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px;width:100%}.config-field{display:flex;flex-direction:column;gap:6px}.config-field label{font-size:.7rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.config-field input{background:var(--bg);border:1px solid var(--border);padding:10px 12px;color:var(--text);border-radius:12px;font-family:var(--font-mono);outline:none;font-size:.9rem;width:100%}.config-field input:focus{border-color:var(--accent);background:var(--card-bg)}.audio-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.config-computed{background:#0003;padding:15px;border-radius:16px;display:flex;flex-direction:column;gap:10px}.computed-item{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text-dim)}.computed-item span{display:flex;align-items:center;gap:8px}.computed-item__value{color:var(--text);font-weight:700;font-family:var(--font-display)}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.app.svelte-1n46o8q{width:100%}