:root{--color-bg:#0f0f12;--color-surface:#18181c;--color-surface-hover:#1e1e24;--color-border:#2a2a32;--color-text:#e8e8ed;--color-text-muted:#9898a6;--color-accent:#7c6ef6;--color-accent-soft:rgba(124,110,246,.15);--color-success:#34d399;--color-focus:var(--color-accent);--font-sans:"DM Sans",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--text-base:1rem;--text-sm:0.875rem;--text-xs:0.75rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3rem;--text-display:3.5rem;--line-tight:1.25;--line-normal:1.5;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--page-padding:var(--space-4);--card-gap:var(--space-6);--section-gap:var(--space-10);--radius-sm:6px;--radius-md:10px;--radius-lg:14px}*,:after,:before{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--line-normal);color:var(--color-text);background:var(--color-bg);min-height:100vh}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.page{min-height:100vh;display:flex;flex-direction:column;padding:var(--page-padding);max-width:1400px;margin:0 auto}.page-header{padding:var(--space-8) 0 var(--space-6);text-align:center}.page-title{margin:0 0 var(--space-2);font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;color:var(--color-text)}.page-subtitle{margin:0;font-size:var(--text-base);color:var(--color-text-muted)}.page-main{flex:1 1;padding:var(--space-4) 0 var(--section-gap)}.section-heading{margin:0 0 var(--space-5);font-size:var(--text-2xl);font-weight:600;color:var(--color-text)}.pomodoro-section{margin-bottom:var(--section-gap)}.pomodoro-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);max-width:420px;margin:0 auto}.pomodoro-desc{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.pomodoro-phase{margin:0 0 var(--space-2);font-size:var(--text-base);font-weight:600;color:var(--color-accent)}.pomodoro-display-wrap{margin-bottom:var(--space-4)}.pomodoro-display{font-family:var(--font-mono);font-size:var(--text-4xl);font-weight:600;color:var(--color-text);letter-spacing:.02em}.pomodoro-progress-wrap{height:8px;background:var(--color-border);border-radius:999px;overflow:hidden;margin-bottom:var(--space-6)}.pomodoro-progress{height:100%;background:var(--color-accent);border-radius:999px;transition:width 1s linear}.pomodoro-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3)}.btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color .2s ease,opacity .2s ease,filter .2s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-secondary{background:var(--color-surface-hover);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.countdown-section{margin:0}.countdown-grid{display:grid;grid-gap:var(--space-8);gap:var(--space-8);list-style:none;margin:0;padding:0}@media (min-width:768px){.countdown-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-10)}}@media (min-width:1024px){.page{padding:var(--space-8)}.countdown-grid{grid-template-columns:repeat(3,1fr)}}.countdown-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:background-color .2s ease,border-color .2s ease}.countdown-card:hover{background:var(--color-surface-hover);border-color:var(--color-accent-soft)}.countdown-card--finished{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06)}.card-header{margin-bottom:var(--space-6)}.card-title{margin:0 0 var(--space-2);font-size:var(--text-xl);font-weight:600;color:var(--color-text);line-height:var(--line-tight)}.card-description{margin:0;font-size:var(--text-base);color:var(--color-text-muted)}.card-body{display:flex;flex-direction:column;gap:var(--space-5)}.countdown-block{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end}.countdown-block--primary{gap:var(--space-8)}.countdown-block--secondary{gap:var(--space-5)}.countdown-unit{display:flex;flex-direction:column;align-items:center;min-width:4rem}.countdown-unit--large{min-width:5rem}.countdown-value{font-family:var(--font-mono);font-weight:600;line-height:var(--line-tight);color:var(--color-accent);display:block}.countdown-unit--large .countdown-value{font-size:var(--text-display);font-size:clamp(2rem,5vw,3.5rem)}.countdown-unit--medium .countdown-value{font-size:var(--text-3xl);font-size:clamp(1.5rem,3vw,2rem)}.countdown-label{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-top:var(--space-1);font-weight:600}.countdown-unit--large .countdown-label{font-size:var(--text-base)}.countdown-summary{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--line-normal);padding-top:var(--space-2);border-top:1px solid var(--color-border)}.countdown-finished-msg{margin:0;font-size:var(--text-xl);font-weight:600;color:var(--color-success)}.page-footer{padding:var(--space-6) 0;border-top:1px solid var(--color-border);text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}.page-footer code{font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);background:var(--color-surface);border-radius:var(--radius-sm)}@media (max-width:479px){.page{padding:var(--space-3)}.countdown-card{padding:var(--space-5)}.countdown-unit--large .countdown-value{font-size:2.25rem}.countdown-unit--medium .countdown-value{font-size:1.5rem}}