:root{--font-family:"Roboto Mono", monospace;--bg:#121212;--surface:#1a1a1a;--border:#2a2a2a;--text:#999;--text-strong:#ccc;--accent:#e0e0e0;--elapsed:#555;--lunch:#8a7a5a;--lunch-dim:#8a7a5a26;--radius:6px;--radius-sm:3px}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-family);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{min-height:100vh}.block-grid{background:var(--bg);box-sizing:border-box;z-index:0;flex-direction:column;gap:8px;padding:2rem;display:flex;position:fixed;inset:0;overflow:hidden}.block-row{flex:1;align-items:stretch;gap:12px;display:flex}.block-row-label{font-family:var(--font-family);color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0;align-items:center;width:48px;font-size:.85rem;font-weight:300;display:flex}.block-row-label-left{justify-content:flex-end}.block-row-label-right{justify-content:flex-start}.block-row-blocks{flex:1;grid-template-columns:repeat(60,1fr);gap:3px;display:grid}.block{cursor:default;border-radius:1px;transition:background-color .4s}.block-active{background-color:var(--border)}.block-elapsed{background-color:var(--elapsed)}.block-current{background:linear-gradient(to top, var(--elapsed) var(--fill,0%), var(--border) var(--fill,0%))}.lunch-separator{border-top:1px dashed #b43c3c66;border-bottom:1px dashed #b43c3c66;flex-shrink:0;align-items:center;gap:12px;padding:6px 0;display:flex}.lunch-separator-text{font-family:var(--font-family);color:#b43c3c;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius-sm);text-align:center;background:#b43c3c1a;border:1px dashed #b43c3c4d;width:100%;padding:4px 0;font-size:1.5rem;font-weight:400}@media (width<=768px){.block-grid{padding:1rem .5rem}.block-row-label{width:36px;font-size:.7rem}.block-row-blocks{gap:1px}}@media (width<=480px){.block-row-label{display:none}.block-row{gap:4px}}.settings{z-index:1001;opacity:0;pointer-events:none;transition:opacity .2s;position:fixed;top:1rem;right:1rem}body:hover .settings,.settings--open{opacity:1;pointer-events:auto}.settings-icon-btn{cursor:pointer;opacity:.6;background:0 0;border:none;align-items:center;padding:.25rem;transition:opacity .2s;display:flex}.settings-icon-btn:hover{opacity:1}.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:300px;margin-top:.5rem;padding:1.25rem;position:absolute;top:100%;right:0}.settings-panel h3{font-family:var(--font-family);color:var(--text);text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem;font-size:.75rem;font-weight:400}.settings-row{align-items:center;gap:.5rem;margin-bottom:.6rem;display:flex}.settings-row label{font-family:var(--font-family);width:90px;color:var(--text);font-size:.85rem;font-weight:300}.settings-row input[type=text]{background:var(--bg);border:1px solid var(--border);color:var(--text-strong);border-radius:var(--radius-sm);font-size:.85rem;font-family:var(--font-family);text-align:center;width:65px;padding:.4rem .6rem}.settings-row input[type=text]::placeholder,.settings-row span{color:var(--border)}.app{position:relative}.toolbar-btn{border:1px solid var(--border);color:var(--text);font-family:var(--font-family);letter-spacing:.05em;border-radius:var(--radius);cursor:pointer;white-space:nowrap;background:0 0;padding:.5rem .75rem;font-size:.75rem;font-weight:400;transition:border-color .2s}.toolbar-btn:hover{border-color:var(--text)}
