*{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;align-items:center;justify-content:center;padding:.75rem;transition:background-color .3s,color .3s;position:relative}.app.light{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#1e293b}.app.light .btn{background:linear-gradient(180deg,#f1f5f9,#e2e8f0);color:#1e293b;box-shadow:0 2px 4px #0000000d,0 1px 2px #0000001a;border:1px solid rgba(0,0,0,.05)}.app.light .btn-primary{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #2563eb4d,0 1px 2px #0000001a}.app.light .btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #dc26264d,0 1px 2px #0000001a}.app.light input,.app.light select{background:#fff;border:1px solid #cbd5e1;color:#1e293b;box-shadow:inset 0 1px 2px #0000000d}.app.light .indicator-wrapper{background:#fff9;box-shadow:0 25px 50px -12px #0000001a,0 0 0 1px #fffc inset}.app.light .progress-bg{stroke:#e2e8f0}.app.light .progress-fill{stroke:#3b82f6;filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}.app.dark{background:linear-gradient(135deg,#0f172a,#1e293b);color:#f1f5f9}.app.dark .btn{background:linear-gradient(180deg,#334155,#1e293b);color:#f1f5f9;box-shadow:0 2px 4px #0003,0 1px 2px #0000004d;border:1px solid rgba(255,255,255,.05)}.app.dark .btn-primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 12px #3b82f666,0 1px 2px #0003}.app.dark .btn-danger{background:linear-gradient(180deg,#f87171,#ef4444);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 12px #ef444466,0 1px 2px #0003}.app.dark input,.app.dark select{background:#1e293b;border:1px solid #475569;color:#f1f5f9;box-shadow:inset 0 1px 3px #0000004d}.app.dark .indicator-wrapper{background:#1e293b99;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d inset}.app.dark .progress-bg{stroke:#334155}.app.dark .progress-fill{stroke:#60a5fa;filter:drop-shadow(0 0 12px rgba(96,165,250,.5))}.top-controls{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.75rem}.indicator-select select{padding:.4rem .6rem;font-size:.8rem;font-family:Inter,sans-serif;border-radius:.5rem;cursor:pointer;transition:all .2s}.indicator-select select:focus{outline:none;border-color:#3b82f6}.theme-toggle{background:transparent;border:none;font-size:1.25rem;cursor:pointer;padding:.4rem;opacity:.7;transition:opacity .2s,transform .2s}.theme-toggle:hover{opacity:1;transform:scale(1.1)}.app.light .theme-toggle{color:#1e293b}.app.dark .theme-toggle{color:#f1f5f9}.container{text-align:center;width:100%;max-width:1800px;padding:0 .5rem}.indicator-wrapper{position:relative;width:min(85vw,85vh,1800px);height:min(85vw,85vh,1800px);min-width:280px;min-height:280px;margin:0 auto;border-radius:50%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);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{transition:stroke .3s}.progress-fill{transition:stroke-dashoffset .3s ease,stroke .3s}.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,4vw,4rem);margin-bottom:clamp(.75rem,2vw,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}.input-group input:focus{outline:none;border-color:#3b82f6;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}.timer-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,3vw,3rem)}.timer-display{font-size:clamp(2.5rem,12vw,12rem);font-family:JetBrains Mono,monospace;font-weight:500;letter-spacing:-.02em}.timer-display.finished{opacity:.4}.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}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0) scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}@media(max-width:400px){.time-inputs{flex-direction:column;align-items:center}.top-controls{top:.75rem;right:.75rem;gap:.5rem}}@media(min-width:800px){.indicator-select select{padding:.5rem .75rem;font-size:.9rem}.theme-toggle{font-size:1.5rem}}