:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#e5e7eb;background-color:#020617;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--muted-foreground: #9ca3af;--border-subtle: rgba(148, 163, 184, .6);--accent: #22c55e;--accent-soft: rgba(34, 197, 94, .8)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,#020617 0% 45%,#020617);display:flex;justify-content:center;align-items:center;color:inherit}#root{width:100%}button{cursor:pointer;font-family:inherit}button:focus-visible{outline:2px solid rgba(34,197,94,.8);outline-offset:2px}.app{max-width:520px;margin:0 auto;padding:2.5rem 1.75rem 2.25rem;display:flex;flex-direction:column;gap:2rem;align-items:stretch}.app-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}.app-title-group h1{margin:0;font-size:2.4rem;letter-spacing:.04em}.app-subtitle{display:block;margin-top:.35rem;font-size:.92rem;color:var(--muted-foreground);text-align:center}.cycle-indicator{display:flex;align-items:center;gap:.4rem;justify-content:center;margin-top:.65rem}.cycle-dot{width:.65rem;height:.65rem;border-radius:999px;border:1px solid var(--border-subtle);background:transparent}.cycle-dot--filled{background:var(--accent-soft);border-color:var(--accent)}.app-main{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr);gap:1.5rem;align-items:flex-start}.timer-card,.metrics-card{background:#111827d9;border-radius:1.5rem;padding:1.75rem 1.75rem 1.5rem;border:1px solid rgba(148,163,184,.2);box-shadow:0 18px 45px #0f172aa6,0 0 0 1px #0f172acc;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.metrics-card{padding:1.2rem 1.4rem}.metrics-title{margin:0 0 .35rem;font-size:1rem}.metrics-subtitle{display:none}.mode-switcher{display:inline-flex;padding:.25rem;border-radius:999px;background:#0f172ae6;border:1px solid rgba(51,65,85,.7);margin-bottom:1rem}.mode-pill{border-radius:999px;border:none;background:transparent;font-size:.9rem;padding:.4rem .9rem;color:var(--muted-foreground);transition:background .2s ease,color .2s ease,transform .12s ease}.mode-pill--active{background:radial-gradient(circle at top left,#4ade80,#22c55e);color:#020617;font-weight:600}.mode-pill:not(.mode-pill--active):hover{background:#94a3b81f}.mode-description{margin:0 0 1.25rem;font-size:.95rem;color:var(--muted-foreground)}.timer-display{display:flex;align-items:center;justify-content:center;border-radius:1.35rem;padding:1.4rem 1rem;margin-bottom:1.25rem;background:radial-gradient(circle at top,#60a5fa29,#0f172ae6);border:1px solid rgba(148,163,184,.28)}.timer-display--focus{background:radial-gradient(circle at top,#34d39938,#0f172af2)}.timer-display--shortBreak{background:radial-gradient(circle at top,#818cf838,#0f172af2)}.timer-display--longBreak{background:radial-gradient(circle at top,#f8fafc2e,#0f172afa)}.time-text{font-size:clamp(2.8rem,5vw,3.8rem);font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums}.timer-controls{display:flex;gap:.75rem;margin-top:.5rem}.primary-button,.ghost-button{flex:1;border-radius:999px;font-weight:600;border:none;padding:.65rem 1.25rem;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.primary-button{background:linear-gradient(to right,#22c55e,#4ade80);color:#022c22;box-shadow:0 10px 30px #22c55e73,0 0 0 1px #16a34ab3}.primary-button:hover{filter:brightness(1.05)}.ghost-button{background:transparent;color:var(--muted-foreground);border:1px solid rgba(148,163,184,.6)}.ghost-button:hover:not(:disabled){background:#0f172ae6}.ghost-button:disabled{opacity:.4;cursor:default}.session-stats{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted-foreground)}.metrics-card .session-stats{margin:0;padding:0;border:none;align-items:center}.session-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}.session-stat-label{opacity:.9;font-size:.9rem}.session-stat-value{font-weight:600;font-size:1.1rem}.session-stats-reset{margin-top:.6rem;border-radius:999px;border:1px solid rgba(148,163,184,.6);background:transparent;color:var(--muted-foreground);padding:.25rem .7rem;font-size:.78rem}.session-stats-reset:hover:not(:disabled){background:#0f172ae6}.session-stats-reset:disabled{opacity:.4;cursor:default}.session-actions{display:flex;justify-content:center;gap:.5rem;margin-top:.4rem}.app-main{display:flex;flex-direction:column;gap:1.5rem;align-items:stretch}.timer-edit{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;width:100%}.timer-edit-label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--muted-foreground);width:100%}.timer-edit-label input{border-radius:999px;border:1px solid rgba(148,163,184,.8);background:#0f172af2;color:inherit;padding:.4rem .9rem;font-size:.9rem;width:100%;text-align:center}.timer-edit-actions{display:flex;gap:.5rem}.presets{margin-top:.9rem;display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;color:var(--muted-foreground)}.presets-label{opacity:.8}.presets-label-hint{color:var(--muted-foreground);opacity:.9}.presets-buttons{display:flex;flex-wrap:wrap;gap:.4rem}.preset-button{border-radius:999px;border:1px solid rgba(148,163,184,.6);background:transparent;color:inherit;padding:.25rem .75rem;font-size:.78rem}.preset-button:hover{background:#0f172ae6}.tips-card h2{margin:0 0 .75rem;font-size:1.15rem}.tips-card ul{list-style:none;margin:0 0 .75rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}.inline-key{display:inline-block;padding:.05rem .5rem;border-radius:999px;background:#0f172ae6;border:1px solid rgba(148,163,184,.6);font-size:.85em}.tips-footer{margin:0;font-size:.85rem;color:var(--muted-foreground)}.app-footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted-foreground);margin-top:.5rem}