:root{--bg-app: #0a0a0a;--color-regular: #e6e6e6;--color-highlight: #ffffff;--color-interact: #7aa2f7;--color-secondary: #5c5c5c;--color-success: #3ddc84;--color-failure: #f7768e;--color-progress: #2a2a2a;--color-void: #141414;--color-grid: #1f1f1f;--stroke-grid: 1px;--font-scale-goal: .5;--font-scale-time: .28;--segment-gap: .5em;--check-scale: 1;--focus-goal-scale: 1;--focus-meta-scale: 1;--focus-check-scale: 1;--motion-easing: ease-out;--font-primary: "Howfar Primary", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "Howfar Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace}@font-face{font-family:Howfar Primary;src:url(/fonts/howfar-primary.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Howfar Mono;src:url(/fonts/howfar-mono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{background:var(--bg-app);color:var(--color-regular);font-family:var(--font-primary);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}input,button{font-family:inherit;color:inherit;background:transparent;border:0;outline:none}.deck{height:100vh;height:100dvh;width:100vw;width:100dvw;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none}@supports (animation-timing-function: linear){.deck{scroll-behavior:smooth}}.deck::-webkit-scrollbar{display:none}.slide{position:relative;height:100vh;height:100dvh;width:100vw;width:100dvw;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}.slide__mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#000;opacity:var(--mask-opacity, 0);pointer-events:none}.focus{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--color-void);padding:6vh 6vw}.focus__fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;background:var(--color-progress);z-index:0}.focus__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%}.focus__meta{font-family:var(--font-mono);font-size:calc(3.2vh * var(--focus-meta-scale));letter-spacing:.05em;color:var(--color-highlight)}.focus__goal{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;font-size:calc(clamp(4vh,9vh,14vw) * var(--focus-goal-scale));font-weight:400;line-height:1.1;color:var(--color-highlight);word-break:break-word}.focus__goal--empty{color:var(--color-secondary);font-weight:400}.focus__goal--completed{color:var(--color-success)}.focus__goal--failed{color:var(--color-failure)}.focus__status{display:flex;align-items:center;justify-content:center;width:calc(12vh * var(--focus-check-scale));height:calc(12vh * var(--focus-check-scale));font-size:calc(12vh * var(--focus-check-scale) * .4);color:var(--color-grid);cursor:pointer}.focus__status:hover{color:var(--color-highlight)}.focus__status--hidden{opacity:0;pointer-events:none}.focus__idle{flex:1;display:flex;align-items:center;justify-content:center;font-size:4vh;color:var(--color-secondary)}.visualizer{display:flex;flex-direction:column;background:var(--bg-app)}.hour-row{display:flex;flex:1 1 0;min-height:0}.hour-row+.hour-row{border-top:var(--stroke-grid) solid var(--color-grid)}.segment{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;overflow:hidden;background:var(--color-void);border-left:var(--stroke-grid) solid var(--color-grid)}.segment:first-child{border-left:0}.segment__fill{position:absolute;inset:0 auto 0 0;height:100%;z-index:0;background:var(--color-progress)}.segment__body{position:relative;z-index:1;display:flex;align-items:center;gap:var(--segment-gap);width:100%;height:100%;padding:0 0 0 var(--segment-gap)}.segment__time{flex:none;font-family:var(--font-mono);font-size:calc(var(--font-scale-time) * (100vh / var(--rows, 17)));color:var(--color-secondary);-webkit-user-select:none;user-select:none}.segment__input{flex:1 1 auto;min-width:0;font-size:calc(var(--font-scale-goal) * (100vh / var(--rows, 17)));line-height:1;color:var(--color-regular);background:transparent;text-overflow:ellipsis;white-space:nowrap}.segment__input:focus:not(.segment__input--completed):not(.segment__input--failed),.segment--active .segment__input:not(.segment__input--completed):not(.segment__input--failed){color:var(--color-highlight)}.segment__input--completed{color:var(--color-success)}.segment__input--failed{color:var(--color-failure)}.segment__check{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:100%;aspect-ratio:1 / 1;padding:0;font-size:calc(var(--font-scale-goal) * var(--check-scale) * .8 * (100vh / var(--rows, 17)));color:var(--color-grid);cursor:pointer}.segment__check:hover{color:var(--color-highlight)}.hub{background:var(--bg-app);display:flex;align-items:center;justify-content:center}.hub__content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;text-align:center;padding:6vh 8vw}.hub__brand{font-size:5vh;font-weight:600;color:var(--color-highlight)}.hub__tagline{font-size:2.4vh;color:var(--color-secondary);margin-top:-2vh}.share-qr{display:flex;flex-direction:column;align-items:center;gap:1vh}.share-qr img{background:#fff;padding:1vh}.share-qr__hint,.share-qr--empty{font-size:1.7vh;color:var(--color-secondary);text-align:center}.about-article h1{font-size:2.8vh;color:var(--color-highlight);margin-bottom:1vh}.about-article h2{font-size:2.3vh;color:var(--color-highlight);margin-top:2vh;margin-bottom:.8vh}.about-article h3{font-size:2vh;color:var(--color-regular);margin-top:1.6vh;margin-bottom:.6vh}.about-article p{font-size:1.9vh;line-height:1.45;color:var(--color-regular)}.hub__nav{display:flex;flex-wrap:wrap;gap:1.5vw;justify-content:center}.hub__note{max-width:80vw}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#000000b8;padding:4vh 4vw}.modal__panel{width:min(92vw,72vh);max-height:86vh;display:flex;flex-direction:column;background:var(--bg-app);border:var(--stroke-grid) solid var(--color-grid)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:1.6vh 2vw;border-bottom:var(--stroke-grid) solid var(--color-grid)}.modal__title{font-size:2.4vh;color:var(--color-highlight)}.modal__close{font-size:3vh;line-height:1;color:var(--color-secondary);cursor:pointer;padding:0 .5vw}.modal__body{overflow-y:auto;padding:2vh 2vw;display:flex;flex-direction:column;gap:1.6vh}.modal__footer{padding:1.6vh 2vw;border-top:var(--stroke-grid) solid var(--color-grid)}.modal__footer-inline{margin-top:1vh}.modal__hint{font-size:1.8vh;color:var(--color-secondary)}.share-fields{border:0;display:flex;flex-direction:column;gap:1.2vh}.share-fields__row{display:flex;align-items:flex-start;gap:1vw;font-size:2vh;color:var(--color-regular);cursor:pointer}.share-fields__row--disabled{opacity:.45;cursor:not-allowed}.field__text{background:var(--color-void);color:var(--color-regular);padding:.6vh 1vw;font-size:2.2vh;min-width:20vw}.field{display:flex;align-items:center;justify-content:space-between;gap:2vw;font-size:2.2vh}.field__label{color:var(--color-regular)}.field__control{display:flex;align-items:center;gap:1vw;color:var(--color-interact)}.field input[type=number],.field select{background:var(--color-void);color:var(--color-regular);padding:.6vh 1vw;font-size:2.2vh;min-width:7vw}.field input[type=range]{accent-color:var(--color-interact);width:24vw}.field input[type=color]{width:4vh;height:4vh;padding:0;background:none;cursor:pointer}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(20vw,1fr));gap:1.6vh 2vw}.swatch{display:flex;align-items:center;justify-content:space-between;gap:1vw;font-size:1.9vh;color:var(--color-regular)}.switch{position:relative;width:7vh;height:3.4vh;background:var(--color-void);border:var(--stroke-grid) solid var(--color-grid);cursor:pointer}.switch__knob{position:absolute;top:0;left:0;height:100%;width:50%;background:var(--color-secondary)}.switch--on .switch__knob{left:50%;background:var(--color-interact)}.actions{display:flex;flex-wrap:wrap;gap:1.5vw}.btn{background:var(--color-void);color:var(--color-interact);padding:1.2vh 2vw;font-size:2.1vh;cursor:pointer;border:var(--stroke-grid) solid var(--color-grid)}.btn:hover{color:var(--color-highlight)}.btn--ghost{color:var(--color-secondary)}.credits{margin-top:2vh;font-size:1.6vh;color:var(--color-secondary)}.credits a{color:var(--color-secondary)}.import-status{font-size:1.8vh;color:var(--color-secondary)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}