*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#1a1a1a;color:#fff}.app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.timer-banner{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.75rem 1.25rem;background:#ffffff14;flex-shrink:0;width:100%}.time-inputs{display:flex;gap:.75rem}.time-input{display:flex;align-items:center;gap:.25rem}.time-input input{width:52px;padding:.35rem .25rem;border:none;background:#ffffff1a;color:#fff;border-radius:4px;font-size:.95rem;text-align:center;font-variant-numeric:tabular-nums}.time-input input:focus{outline:1px solid rgba(255,255,255,.4)}.time-input span{font-size:.85rem;color:#ffffff80}.timer-controls{display:flex;gap:.5rem}.timer-controls button{padding:.35rem .75rem;border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#fff;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background .15s}.timer-controls button:hover:not(:disabled){background:#ffffff2e}.timer-controls button:disabled{opacity:.35;cursor:default}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%}#grid-canvas{display:block}