:root{--bg: #ffffff;--bg-secondary: #f5f5f7;--text: #1d1d1f;--text-secondary: #6e6e73;--accent: #0071e3;--accent-hover: #0077ed;--border: #d2d2d7;--toggle-bg: #e5e5e5;--toggle-knob: #ffffff;--tool-gradient-start: #ff6b6b;--tool-gradient-end: #ee5a5a}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #000000;--bg-secondary: #1c1c1e;--text: #f5f5f7;--text-secondary: #98989d;--accent: #2997ff;--accent-hover: #40a9ff;--border: #38383a;--toggle-bg: #3a3a3c;--toggle-knob: #ffffff}}[data-theme=dark]{--bg: #000000;--bg-secondary: #1c1c1e;--text: #f5f5f7;--text-secondary: #98989d;--accent: #2997ff;--accent-hover: #40a9ff;--border: #38383a;--toggle-bg: #3a3a3c;--toggle-knob: #ffffff}[data-theme=light]{--bg: #ffffff;--bg-secondary: #f5f5f7;--text: #1d1d1f;--text-secondary: #6e6e73;--accent: #0071e3;--accent-hover: #0077ed;--border: #d2d2d7;--toggle-bg: #e5e5e5;--toggle-knob: #ffffff}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{height:100%}.app{min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text);transition:background-color .3s,color .3s}header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.header-left{display:flex;align-items:center;gap:.75rem}.tool-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--tool-gradient-start),var(--tool-gradient-end))}.tool-icon svg{width:24px;height:24px}.tool-name{font-size:1.25rem;font-weight:600}.header-right{display:flex;align-items:center;gap:1.5rem}.back-link{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .2s ease}.back-link:hover{color:var(--accent)}.theme-toggle{display:flex;align-items:center;gap:.5rem}.theme-toggle svg{width:16px;height:16px;stroke:var(--text-secondary);fill:none;stroke-width:2}.toggle-switch{position:relative;width:44px;height:24px;background:var(--toggle-bg);border-radius:12px;cursor:pointer;transition:background .2s ease}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--toggle-knob);border-radius:50%;box-shadow:0 1px 3px #0003;transition:transform .2s ease}[data-theme=dark] .toggle-switch:after,:root:not([data-theme=light]) .toggle-switch:after{transform:translate(20px)}@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .toggle-switch:after{transform:translate(0)}}.config-section{position:relative;z-index:10}.config-bar{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 3rem 1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);overflow:hidden;max-height:100px;opacity:1;transition:max-height .3s ease,opacity .2s ease,padding .3s ease,border-color .3s ease}.config-section.collapsed .config-bar{max-height:0;padding:0;opacity:0;border-bottom-color:transparent}.config-toggle{position:absolute;right:.5rem;top:0;height:100%;background:none;border:none;cursor:pointer;padding:0 .5rem;display:flex;align-items:center;gap:.35rem;color:var(--text-secondary);transition:color .2s ease;z-index:1}.config-section.collapsed .config-toggle{height:auto;padding:.3rem .6rem;background:var(--bg-secondary);border-radius:0 0 .5rem .5rem;border:1px solid var(--border);border-top:none}.config-toggle:hover{color:var(--text)}.config-toggle svg{width:18px;height:18px;transition:transform .3s ease}.config-toggle svg.rotated{transform:rotate(180deg)}.config-toggle-label{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.setting-select{display:flex;align-items:center;gap:.5rem}.setting-select label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.setting-select select{padding:.4rem .6rem;font-size:.85rem;font-family:Inter,sans-serif;border-radius:.5rem;cursor:pointer;transition:all .2s;background:var(--bg);border:1px solid var(--border);color:var(--text)}.setting-select select:focus{outline:none;border-color:var(--accent)}.setting-checkbox{display:flex;align-items:center;gap:.4rem}.setting-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent)}.setting-checkbox label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.container{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;max-width:1800px;margin:0 auto;padding:1rem}.indicator-wrapper{position:relative;width:min(80vw,70vh,1800px);height:min(80vw,70vh,1800px);min-width:280px;min-height:280px;margin:0 auto;border-radius:50%;background:var(--bg-secondary);box-shadow:0 25px 50px -12px #0000001a;transition:border-radius .3s,box-shadow .3s}.indicator-wrapper:has(.progress-square){border-radius:1.5rem}.progress-indicator{position:absolute;top:0;left:0;width:100%;height:100%}.progress-circle{transform:rotate(-90deg)}.progress-bg{stroke:var(--border);transition:stroke .3s}.progress-fill{transition:stroke-dashoffset .3s ease,stroke .3s}.app.blue .progress-fill{stroke:#3b82f6;filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}.app.green .progress-fill{stroke:#22c55e;filter:drop-shadow(0 0 8px rgba(34,197,94,.4))}.app.red .progress-fill{stroke:#ef4444;filter:drop-shadow(0 0 8px rgba(239,68,68,.4))}.app.purple .progress-fill{stroke:#a855f7;filter:drop-shadow(0 0 8px rgba(168,85,247,.4))}.app.orange .progress-fill{stroke:#f97316;filter:drop-shadow(0 0 8px rgba(249,115,22,.4))}.indicator-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75%;max-width:1200px;display:flex;flex-direction:column;align-items:center;justify-content:center}h1{font-size:clamp(1.25rem,min(4vw,5vh),4rem);margin-bottom:clamp(.75rem,min(2vw,3vh),3rem);font-weight:500;letter-spacing:-.02em;opacity:.9}.input-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,3vw,3rem)}.time-inputs{display:flex;gap:clamp(.5rem,3vw,3rem);justify-content:center}.input-group{display:flex;flex-direction:column;gap:clamp(.25rem,.5vw,.75rem)}.input-group label{font-size:clamp(.6rem,1.5vw,1.5rem);font-weight:500;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.input-group input{width:clamp(55px,15vw,200px);padding:clamp(.4rem,2vw,1.5rem);font-size:clamp(1rem,4vw,3rem);font-family:JetBrains Mono,monospace;text-align:center;border-radius:clamp(.5rem,1vw,1rem);transition:all .2s;background:var(--bg);border:1px solid var(--border);color:var(--text)}.input-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f633}.input-group input::-webkit-outer-spin-button,.input-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-group input[type=number]{-moz-appearance:textfield}.duration-mode,.until-mode{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,3vw,3rem)}.input-buttons{display:flex;gap:clamp(.5rem,2vw,1.5rem);justify-content:center;flex-wrap:wrap}.until-input-group{display:flex;flex-direction:column;align-items:center;gap:clamp(.25rem,.5vw,.75rem)}.until-input-group label{font-size:clamp(.6rem,1.5vw,1.5rem);font-weight:500;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.until-input{width:clamp(150px,40vw,400px);padding:clamp(.4rem,2vw,1.5rem);font-size:clamp(1rem,4vw,3rem);font-family:JetBrains Mono,monospace;text-align:center;border-radius:clamp(.5rem,1vw,1rem);transition:all .2s;background:var(--bg);border:1px solid var(--border);color:var(--text)}.until-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f633}.until-input::placeholder{opacity:.4}.until-hint{font-size:clamp(.5rem,1.2vw,1rem);opacity:.4}.timer-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,3vw,3rem)}.timer-display{font-size:clamp(2.5rem,min(12vw,16vh),12rem);font-family:JetBrains Mono,monospace;font-weight:500;letter-spacing:-.02em}.timer-display.finished{opacity:.4}.end-time-info{font-size:clamp(.7rem,2vw,1.25rem);opacity:.5;margin-top:clamp(.5rem,1vw,1rem)}.controls{display:flex;gap:clamp(.4rem,1.5vw,1.5rem);justify-content:center;flex-wrap:wrap}.btn{padding:clamp(.4rem,1.5vw,1.25rem) clamp(.6rem,2vw,2.5rem);font-size:clamp(.75rem,2vw,2rem);font-family:Inter,sans-serif;font-weight:500;border-radius:clamp(.5rem,1vw,1rem);cursor:pointer;transition:all .15s;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text)}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0) scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--tool-gradient-start),var(--tool-gradient-end));color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #ff6b6b4d}.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #dc26264d}.btn-success{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #22c55e4d}.btn-stop{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #dc26264d}@keyframes fade-alarm{0%,to{opacity:1}50%{opacity:.3}}@keyframes slow-flash{0%,to{opacity:1}50%{opacity:.2}}@keyframes fast-flash{0%,to{opacity:1}50%{opacity:.2}}.app.alarming.alarm-fade .indicator-wrapper{animation:fade-alarm 2s ease-in-out infinite}.app.alarming.alarm-slow .indicator-wrapper{animation:slow-flash 1s steps(2,end) infinite}.app.alarming.alarm-fast .indicator-wrapper{animation:fast-flash .3s steps(2,end) infinite}@media(max-width:640px){.tool-name{font-size:1.1rem}.header-right{gap:1rem}.back-link{font-size:.8rem}.config-bar{flex-wrap:wrap;gap:.75rem;padding:.75rem 2.5rem .75rem 1rem}.setting-select{flex-direction:column;align-items:flex-start;gap:.25rem}.config-toggle{right:.25rem}}@media(max-width:400px){.time-inputs{flex-direction:column;align-items:center}header{padding:.75rem 1rem}}@media(min-width:800px){.setting-select select{padding:.5rem .75rem;font-size:.9rem}}
