*{box-sizing:border-box} :root{font:16px/1.45 ui-sans-serif,system-ui,-apple-system,sans-serif;color:#293c3b;background:#e4e3db;color-scheme:light}body{margin:0;height:100dvh;min-height:400px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))}header{display:flex;align-items:center;gap:12px;padding:12px 6px 0;z-index:1}h1{font-size:18px;line-height:1.2;letter-spacing:-.03em;font-weight:620;margin:0}h1 span{font-size:16px;font-weight:400;letter-spacing:0;color:#576661;margin-left:10px}#cycle{margin-left:auto;font-size:16px;color:#576661;font-variant-numeric:tabular-nums;min-width:0}main{position:relative;min-height:0;min-width:0}canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:3px}canvas:focus-visible{outline-offset:-3px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}button,a,select{font:inherit;color:inherit;min-width:44px;min-height:44px;touch-action:manipulation}button,button:hover,button[aria-pressed=true]{background:#334b46;color:#f4f0e5}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid #294b43;outline-offset:3px}a{text-decoration-thickness:1px;text-underline-offset:4px}footer{padding:0 0 max(8px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:6px;z-index:1}#phase{font-size:16px;margin:0;color:#4d615b;min-height:24px;text-align:center}nav{display:flex;align-items:center;gap:12px}nav button{width:48px;height:48px}nav button:hover::after{content:attr(aria-label);position:absolute;bottom:68px;pointer-events:none;font-size:14px;background:#f5f0e5;padding:5px 9px;border-radius:4px;box-shadow:0 1px 5px #20352b10;white-space:nowrap}.progress{display:flex;gap:5px;height:8px;align-items:center}.progress span{height:3px;width:8px;background:#78867d55;border-radius:3px;transition:height .2s,background .3s}.progress .done{background:#5a796c}.progress .active{background:#ba603b;height:7px}.loading{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;background:#e4e3db;color:#53645b}.loading span{height:2px;width:70px;background:#ac744c;justify-self:center;animation:breath 2s ease-in-out infinite}.loading[hidden],#overview[hidden],#error[hidden]{display:none}#overview{position:absolute;top:10px;left:50%;transform:translateX(-50%);border-radius:24px;padding:10px 18px;background:#eeeee5d9;backdrop-filter:blur(6px);box-shadow:0 3px 16px #334b4610;gap:12px}#error{position:absolute;inset:10% 6%;display:grid;place-content:center;justify-items:center;text-align:center;background:#e4e3db}#error p{max-width:36ch}#error button{border:1px solid #576661;border-radius:5px;padding:8px 18px}h2{font-size:26px;font-weight:550;letter-spacing:-.045em;line-height:1.2;margin:10px 0 18px}dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #b8c0b2;border-radius:12px;background:#f2f0e7;color:#293c3b;padding:24px;box-shadow:0 18px 70px #24382b22}dialog::backdrop{background:#22352d25;backdrop-filter:blur(5px)}.close{float:right;margin:-14px -14px 0 0;font-size:28px}dialog p{margin:12px 0 20px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #c7ccc0}.settings-row button{border-radius:7px;padding:8px 20px;min-width:70px;border:1px solid #9ba99c}.settings-row select{max-width:230px;min-width:0;background:transparent;border:0;border-bottom:1px solid #8a9b8c;padding:5px;flex-shrink:1}.settings-row label{flex-shrink:0}fieldset{border:0;border-top:1px solid #c7ccc0;margin:8px 0 0;padding:10px 0}legend{padding-right:10px}.view-controls{display:flex;flex-wrap:wrap;gap:8px}.view-controls button{border-radius:6px;border:1px solid #b9c3b5;padding:8px 12px}.fine{font-size:16px;color:#536257}.stats{font-variant-numeric:tabular-nums;color:#536257}dialog>a{display:flex;align-items:center;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes breath{50%{transform:scaleX(.4);opacity:.5}}@media(max-width:500px){header{padding-top:6px;gap:8px}h1 span{display:block;margin:4px 0 0}#cycle{font-size:14px}nav{gap:10px}footer{gap:4px}.settings-row select{max-width:165px}dialog{padding:20px}nav button:hover::after{display:none}}@media(max-height:500px){body{min-height:320px}header{padding-top:0}h1 span{display:inline-block;margin-left:8px}footer{gap:0;padding-bottom:0}.progress{display:none}#phase{position:absolute;left:16px;bottom:16px;max-width:calc(50vw - 145px);font-size:14px}nav button{height:44px;width:44px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(forced-colors:active){button[aria-pressed=true]{border:2px solid Highlight}.progress .active{outline:2px solid Highlight}dialog{border:1px solid CanvasText}}