@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/RobotoMono-Regular-C1AIH9xa.ttf) format("truetype")}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/RobotoMono-Bold-1p48U8xl.ttf) format("truetype")}:root{--bg-color: #111111;--text-color: #f0f0f0;--accent-color: #ff4400;--accent-dim: #ff440020;--border-color: #333333;--surface-color: #222222;--grid-unit: 8px;--border-width: 2px;--radius-sm: 4px;--radius-md: 8px;--font-mono: "Roboto Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-mono);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;width:100vw;overflow:hidden}#root{height:100%;width:100%}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}.app-shell{display:grid;place-items:center;min-height:100vh;width:100%;padding:calc(var(--grid-unit) * 2);gap:calc(var(--grid-unit) * 2);max-width:100%;margin:0 auto}.timer-card{display:flex;flex-direction:column;width:100%;max-width:400px;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-color);position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001a}.timer-header{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--grid-unit) * 2);border-bottom:var(--border-width) solid var(--border-color)}.header-titles{display:flex;flex-direction:column}.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6}.header-title{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:-.05em}.mode-chip{display:flex;align-items:center;gap:var(--grid-unit);padding:var(--grid-unit) calc(var(--grid-unit) * 2);border:var(--border-width) solid var(--border-color);border-radius:999px;font-size:.875rem;font-weight:700;text-transform:uppercase}.chip-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-color)}.mode-chip[data-mode=work] .chip-dot{background-color:var(--accent-color)}.mode-chip[data-mode=break] .chip-dot{background-color:#0c4}.mode-chip[data-mode=longBreak] .chip-dot{background-color:#08f}.timer-display-container{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;padding:calc(var(--grid-unit) * 4) 0}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--border-width);background-color:var(--border-color);border-top:var(--border-width) solid var(--border-color)}.tile-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--grid-unit) * 2);background-color:var(--bg-color);transition:all .1s ease;height:100%;min-height:80px;width:100%}.tile-button:hover{background-color:var(--surface-color)}.tile-button:active{background-color:var(--border-color);color:var(--bg-color)}.tile-button.active{background-color:var(--accent-color);color:var(--bg-color)}.tile-icon{width:24px;height:24px;margin-bottom:var(--grid-unit)}.tile-icon svg{width:100%;height:100%;fill:currentColor}.tile-label{font-size:.75rem;text-transform:uppercase;font-weight:700}@media(min-width:768px){.app-shell{padding:calc(var(--grid-unit) * 4)}.timer-card{border-width:4px;max-width:480px}.controls-grid{grid-template-columns:repeat(3,1fr)}}.timer-display{font-size:clamp(4rem,15vw,8rem);font-weight:700;line-height:1;letter-spacing:-.05em;color:var(--text-color);display:flex;align-items:baseline;justify-content:center;width:100%}.timer-separator{opacity:.5;margin:0 .1em}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:100;backdrop-filter:blur(4px)}.modal-panel{background-color:var(--bg-color);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);width:90%;max-width:400px;box-shadow:0 4px 24px #00000080;overflow:hidden}.modal-header{padding:calc(var(--grid-unit) * 2);border-bottom:var(--border-width) solid var(--border-color)}.modal-subtitle{font-size:.875rem;opacity:.7;margin-top:var(--grid-unit)}.modal-form{display:flex;flex-direction:column}.modal-grid{display:grid;grid-template-columns:1fr auto;gap:var(--border-width);background-color:var(--border-color);border-top:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.modal-cell-label{background-color:var(--bg-color);padding:calc(var(--grid-unit) * 2);display:flex;align-items:center;font-weight:700;font-size:.875rem;text-transform:uppercase}.modal-cell-input{background-color:var(--bg-color);padding:calc(var(--grid-unit) * 2);display:flex;align-items:center;justify-content:flex-end}.modal-cell-input input{background-color:var(--surface-color);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-color);padding:var(--grid-unit);width:80px;text-align:right;font-family:inherit;font-size:1rem}.modal-cell-input input:focus{outline:none;border-color:var(--accent-color)}.input-suffix{font-size:.875rem;opacity:.5;margin-left:var(--grid-unit)}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--border-width);background-color:var(--border-color);border-top:var(--border-width) solid var(--border-color)}.modal-button{padding:calc(var(--grid-unit) * 2);font-weight:700;text-transform:uppercase;font-size:.875rem;transition:background-color .2s}.modal-button--secondary{background-color:var(--bg-color)}.modal-button--secondary:hover{background-color:var(--surface-color)}.modal-button--primary{background-color:var(--text-color);color:var(--bg-color)}.modal-button--primary:hover{opacity:.9}.progress-container{width:80%;height:8px;background-color:var(--surface-color);overflow:hidden;margin-top:calc(var(--grid-unit) * 4)}.progress-bar{height:100%;background-color:var(--text-color);transition:width 1s linear}.progress-bar.active{background-color:var(--accent-color)}.modal-option{padding:calc(var(--grid-unit) * 2);border-bottom:var(--border-width) solid var(--border-color);background-color:var(--bg-color)}.checkbox-label{display:flex;align-items:center;gap:calc(var(--grid-unit) * 1.5);cursor:pointer;font-weight:700;font-size:.875rem;text-transform:uppercase}.checkbox-label input[type=checkbox]{width:1.2em;height:1.2em;accent-color:var(--accent-color)}