:root{--primary-color:#e74c3c;--primary-hover:#c0392b;--secondary-color:#3498db;--secondary-hover:#2980b9;--success-color:#27ae60;--success-hover:#219a52;--background:#f8fafc;--surface:#fff;--text-primary:#2d3748;--text-secondary:#718096;--text-muted:#a0aec0;--border:#e2e8f0;--ring-track:#dbe2ec;--shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--border-radius:12px;--border-radius-lg:16px;--transition:all .2s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0}button,input,.btn,.settings-btn{touch-action:manipulation}body{color:var(--text-primary);overflow-x:hidden;background:linear-gradient(160deg,#fbe9e7 0%,#eef1f5 100%);min-height:100vh;padding:20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{background:var(--surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;max-width:500px;margin:0 auto}.header{background:linear-gradient(135deg,var(--primary-color),#ff6b6b);color:#fff;text-align:center;position:relative;overflow:hidden;padding:2rem}.header:before{content:"";position:absolute;z-index:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");inset:0}.title{position:relative;z-index:1;margin-bottom:.5rem;font-size:2rem;font-weight:700}.subtitle{opacity:.9;position:relative;z-index:1;font-size:1rem;font-weight:300}.main{padding:2rem}.timer-section{text-align:center;margin-bottom:2rem}.timer-mode{display:flex;justify-content:space-between;align-items: center;margin-bottom:2rem;padding:0 1rem}.mode-text{color:var(--primary-color);font-size:1.25rem;font-weight:600}.session-counter{color:var(--text-secondary);background:var(--background);border-radius:20px;padding:.5rem 1rem;font-size:.875rem;font-weight:500}.timer-circle{position:relative;display:flex;justify-content:center;align-items: center;margin:2rem auto}.progress-ring{width:min(280px,72vw);height:auto;transform:rotate(-90deg)}.progress-ring__background{fill:none;stroke:var(--ring-track);stroke-width:10}.progress-ring__progress{fill:none;stroke:var(--primary-color);stroke-width:10;stroke-linecap:round;stroke-dasharray:816.8;stroke-dashoffset:816.8;transition:stroke-dashoffset 1s ease-in-out}.timer-content{position:absolute;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%)}.timer-display{color:var(--text-primary);font-variant-numeric:tabular-nums;margin-bottom:.5rem;font-size:3rem;font-weight:700}.timer-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.btn{display:flex;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);text-decoration:none;position:relative;overflow:hidden;border:none;justify-content:center;align-items: center;gap:.5rem;min-height:44px;padding:1rem 1.5rem;font-size:1rem;font-weight:600}.btn:before{content:"";position:absolute;background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;top:0;left:-100%}.btn-primary{background:var(--primary-color);color:#fff;box-shadow:var(--shadow)}.btn-secondary{background:var(--secondary-color);color:#fff;box-shadow:var(--shadow)}.btn-outline{color:var(--text-primary);border:2px solid var(--border);background:0 0}.btn:active{transform:translateY(1px)scale(.99)}.btn-primary:active{background:var(--primary-hover)}.btn-secondary:active{background:var(--secondary-hover)}.btn-outline:active{background:var(--background)}@media (hover:hover) and (pointer:fine){.btn:hover:before{left:100%}.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-secondary:hover{background:var(--secondary-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-outline:hover{background:var(--background);transform:translateY(-2px)}}.btn:focus-visible{outline:3px solid var(--secondary-color);outline-offset:2px}.settings-btn:focus-visible{outline:3px solid var(--secondary-color);outline-offset:2px}.settings-close:focus-visible{outline:3px solid var(--secondary-color);outline-offset:2px}.input-group input:focus-visible{outline:3px solid var(--secondary-color);outline-offset:2px}.option-item input:focus-visible{outline:3px solid var(--secondary-color);outline-offset:2px}.btn-icon{stroke-width:2.5;width:20px;height:20px;font-size:1.1rem}.settings-section{margin-bottom:2rem}.settings-toggle{text-align:center;margin-bottom:1rem}.settings-icon{vertical-align:middle;width:18px;height:18px;margin-right:6px}.settings-btn{display:inline-flex;background:var(--background);border-radius:var(--border-radius);cursor:pointer;color:var(--text-secondary);transition:var(--transition);border:none;justify-content:center;align-items: center;min-height:44px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500}.settings-btn:active{transform:translateY(1px)}@media (hover:hover) and (pointer:fine){.settings-btn:hover{background:var(--border);color:var(--text-primary)}}.settings-panel{overflow-y:auto;border-radius:var(--border-radius-lg);background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-lg);border:none;width:min(440px,100vw - 2rem);max-height:min(80vh,640px);margin:auto;padding:1.5rem;inset:0}.settings-panel[open]{display:block;animation:dialogPop .2s ease-out}.settings-panel::backdrop{backdrop-filter:blur(2px);background:#00000080}.settings-header{display:flex;justify-content:space-between;align-items: center;margin-bottom:1.25rem}.settings-title{color:var(--text-primary);font-size:1.25rem;font-weight:600}.settings-close{display:inline-flex;border-radius:var(--border-radius);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;justify-content:center;align-items: center;width:44px;height:44px}.settings-close:active{transform:scale(.94)}@media (hover:hover) and (pointer:fine){.settings-close:hover{background:var(--background);color:var(--text-primary)}}.shortcut-hint{border-top:1px solid var(--border);color:var(--text-secondary);text-align:center;margin-top:1.25rem;padding-top:1rem;font-size:.8125rem;line-height:1.8}.shortcut-hint kbd{color:var(--text-primary);background:var(--background);border:1px solid var(--border);border-radius:6px;padding:.1rem .4rem;font-family:inherit;font-size:.75rem;font-weight:600}@keyframes dialogPop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-bottom:1.5rem}.setting-item label{display:block;color:var(--text-secondary);margin-bottom:.5rem;font-size:.875rem;font-weight:500}.input-group{position:relative;display:flex;align-items: center}.input-group input{border:2px solid var(--border);border-radius:var(--border-radius);background:var(--surface);color:var(--text-primary);transition:var(--transition);width:100%;min-height:44px;padding:.75rem;font-size:1rem}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #e74c3c1a}.input-suffix{position:absolute;color:var(--text-muted);pointer-events:none;font-size:.875rem;right:.75rem}.settings-options{display:flex;flex-direction:column;gap:1rem}.option-item{display:flex;align-items: center;gap:.75rem}.option-item input[type=checkbox]{accent-color:var(--primary-color);width:18px;height:18px}.option-item label{color:var(--text-primary);cursor:pointer;font-size:.875rem}.stats-section{margin-bottom:2rem}.stats-section h3{text-align:center;color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:600}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-item{background:var(--background);border-radius:var(--border-radius);text-align:center;transition:var(--transition);padding:1.5rem}@media (hover:hover) and (pointer:fine){.stat-item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}}.stat-number{color:var(--primary-color);margin-bottom:.25rem;font-size:2rem;font-weight:700}.stat-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}@media (max-width:480px){body{min-height:100dvh;padding:0}.app{display:flex;border-radius:0;flex-direction:column;min-height:100dvh;margin:0}.header{padding:1rem 1.25rem}.title{margin-bottom:.1rem;font-size:1.5rem}.subtitle{font-size:.85rem}.main{display:flex;flex-direction:column;flex:1;justify-content:safe center;gap:1.5rem;padding:1rem 1.25rem 1.25rem}.timer-section{margin-bottom:0}.timer-mode{margin-bottom:.5rem}.timer-circle{margin:.4rem auto}.progress-ring{width:min(72vw,34vh)}.timer-display{font-size:2.25rem}.controls{gap:.6rem;margin-top:1rem}.btn{flex:1;padding:.85rem .75rem}.settings-section,.settings-toggle{margin-bottom:0}.settings-grid{grid-template-columns:1fr 1fr}.stats-section{margin-bottom:0}.stats-section h3{margin-bottom:.6rem;font-size:1rem}.stat-item{padding:.85rem}.stat-number{font-size:1.5rem}.settings-panel{border-radius:var(--border-radius-lg)var(--border-radius-lg)0 0;width:100%;max-width:100%;max-height:85vh;margin:auto 0 0}.settings-panel[open]{animation:sheetUp .25s ease-out}}@media (max-width:480px) and (max-height:740px){.header{padding:.75rem 1.25rem}.main{gap:1rem}.progress-ring{width:min(64vw,30vh)}.timer-mode{margin-bottom:.25rem}.controls{margin-top:.75rem}.stats-section h3{margin-bottom:.4rem}.stat-item{padding:.7rem}}@media (prefers-color-scheme:dark){:root{--background:#1a202c;--surface:#2d3748;--text-primary:#f7fafc;--text-secondary:#cbd5e0;--text-muted:#a0aec0;--border:#4a5568;--ring-track:#5a6884}body{background:linear-gradient(160deg,#232c3d 0%,#161b27 100%)}.header{background:linear-gradient(135deg,#9b2c20,#c0392b)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.btn:active,.settings-btn:active,.settings-close:active{transform:none}.progress-ring__progress{transition:none}}