:root{color-scheme:light;--paper:#FFFCF0;--surface:#F2F0E5;--ink:#100F0F;--muted:#6F6E69;--line:#DAD8CE;--grid:#B7B5AC;--accent:#24837B;--accent-dark:#1C6C66;--accent-light:#BFE8D9;--accent-soft:#DDF1E4;font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}::selection{background:var(--accent-light);color:var(--ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input{caret-color:var(--accent)}input::placeholder{color:var(--muted)}p{margin:0}main{max-width:1080px;margin:auto;padding:42px 32px 24px}header h1{font-size:40px;line-height:1.15;letter-spacing:-.035em;font-weight:650;margin:0 0 12px}header p{font-size:18px;line-height:1.6;color:var(--muted)}
.entry{margin-top:26px}#hours-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}.sentence-clause{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:22px;min-width:0;max-width:100%}.sentence-clause input,.sentence-clause select{border:0;border-bottom:1px solid var(--grid);background:transparent;color:var(--ink);padding:10px 7px;min-height:46px;border-radius:0}.sentence-clause select{width:176px;min-width:0;padding-right:4px}#custom-skill{width:145px;min-width:0}#hours{width:66px;text-align:center;font-variant-numeric:tabular-nums;appearance:textfield}#hours::-webkit-inner-spin-button,#hours::-webkit-outer-spin-button{appearance:none;margin:0}.primary{min-height:44px;padding:0 18px;border:0;border-radius:7px;background:var(--accent);color:var(--paper);font-size:15px;font-weight:600}.primary:hover:not(:disabled){background:var(--accent-dark)}.feedback{display:flex;align-items:center;gap:14px;min-height:44px;font-size:13px;color:var(--accent-dark)}.text-button{background:none;border:0;padding:10px 2px;min-height:42px;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:var(--ink)}
.grid-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-top:8px;font-variant-numeric:tabular-nums}.grid-heading p:first-child{font-size:15px;color:var(--muted)}.grid-heading #done,.grid-heading #total-hours{font-size:28px;color:var(--ink);font-weight:600;letter-spacing:-.02em}.grid-heading p:last-child{font-size:14px}.paper-caption{display:flex;justify-content:space-between;gap:16px;margin:14px 0;color:var(--muted);font-size:12px;line-height:1.6}#paper{width:100%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;background:none;border:0;padding:0;color:inherit;text-align:left}.paper-group{aspect-ratio:1;width:100%;height:auto;display:block;overflow:visible}.paper-hour{fill:var(--surface);stroke:var(--grid);stroke-width:.45}.paper-hour.filled{fill:var(--accent);stroke:var(--accent)}.paper-partial{fill:var(--accent)}#paper:hover .paper-hour:not(.filled){stroke:var(--muted)}
footer{display:flex;justify-content:space-between;gap:12px;margin-top:25px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}footer>div{display:flex;gap:20px;align-items:center}a{color:var(--muted);text-underline-offset:4px}a:hover{color:var(--ink)}.motion-toggle{display:flex;align-items:center;gap:5px}.motion-toggle input{accent-color:var(--accent)}.skip:not(:focus),.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{position:absolute;top:4px;left:8px;background:var(--paper);color:var(--ink);z-index:2;padding:8px}
body:has(dialog[open]){overflow:hidden}dialog{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--paper);color:var(--ink);width:min(820px,calc(100vw - 32px));height:min(620px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);overflow:hidden}dialog::backdrop{background:rgb(16 15 15 / .27)}.counter-shell{height:100%;padding:32px;display:flex;flex-direction:column}.counter-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}h2{font-size:28px;letter-spacing:-.025em;font-weight:600;margin:0}.counter-heading .text-button{min-height:44px}#counter-hint{font-size:15px;line-height:1.6;color:var(--muted);margin-top:8px}#tile-tray{flex:1;min-height:0;overflow:auto;margin:24px -5px 20px;padding:5px;scrollbar-gutter:stable}#hour-tiles{display:grid;grid-template-columns:repeat(auto-fill,80px);gap:12px;align-content:start;justify-content:start}.hour-tile{width:80px;height:80px;padding:0;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:28px;font-weight:550;font-variant-numeric:tabular-nums}.hour-number{display:block}.hour-tile svg{position:absolute;width:38px;height:38px;inset:20px;fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.hour-tile.complete{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--paper)}.hour-tile.complete .hour-number{position:absolute;left:8px;top:6px;font-size:12px}.hour-tile:hover{box-shadow:inset 0 0 0 2px var(--paper)}.counter-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;flex-shrink:0}#tap-zone,#confirm{width:120px;height:64px;min-width:0;flex-shrink:0;border-radius:12px}#tap-zone{display:flex;align-items:baseline;justify-content:center;gap:6px;border:1px solid var(--accent-dark);border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);font-size:30px;font-weight:600;padding:12px}#tap-zone span{font-size:13px;font-weight:400}#tap-zone:hover:not(:disabled){background:var(--accent-light)}#tap-zone:active:not(:disabled){transform:scale(.96)}#confirm{padding:0 10px}
@media(max-width:650px){main{padding:28px 20px 20px}header h1{font-size:34px}header p{font-size:16px}.entry{margin-top:20px}#hours-form{gap:8px}.sentence-clause{font-size:18px;gap:7px}.sentence-clause select{width:146px}#custom-skill{width:130px}#hours{width:48px;padding:10px 3px}.primary{font-size:13px;padding:0 12px}.grid-heading #done,.grid-heading #total-hours{font-size:26px}#paper{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}footer{display:block}footer>div{margin-top:12px}.counter-shell{padding:22px}h2{font-size:23px}.hour-tile{width:64px;height:64px;font-size:23px}.hour-tile svg{width:30px;height:30px;inset:16px}#hour-tiles{grid-template-columns:repeat(auto-fill,64px);gap:10px}#counter-hint{font-size:13px}#tile-tray{margin-top:20px}#tap-zone,#confirm{width:112px;height:60px}.paper-caption{gap:10px;font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.primary,.hour-tile.complete{background:var(--accent-dark);border-color:var(--accent-dark)}.primary:hover:not(:disabled){background:#100F0F}

#done{background:none;border:0;padding:0;min-height:44px;text-decoration:none;font-variant-numeric:tabular-nums}#done:hover{color:var(--accent-dark)}#total-hours{width:8ch;max-width:100%;min-height:44px;padding:0;border:0;border-bottom:1px solid var(--accent);border-radius:0;background:transparent;font:inherit;font-variant-numeric:tabular-nums}#total-hours[aria-invalid="true"]{border-color:#AF3029}

.account-bar{display:flex;justify-content:flex-end;min-height:34px;margin-bottom:18px}.account-bar details{position:relative;font-size:13px}.account-bar summary{cursor:pointer;list-style:none;padding:8px 0;color:var(--ink,#100f0f)}.account-menu{position:absolute;right:0;top:100%;z-index:5;background:#fffcf0;border:1px solid #dad8ce;border-radius:8px;padding:16px;display:grid;gap:14px;box-shadow:0 8px 30px #100f0f0c;min-width:190px}.account-menu span{overflow-wrap:anywhere}.small-dialog{width:min(440px,calc(100% - 32px));height:fit-content;padding:28px;border:1px solid #dad8ce;border-radius:10px;background:#fffcf0;color:#100f0f}.small-dialog h2{font-size:24px;margin:0 0 14px}.small-dialog p{line-height:1.6}.simple-actions{display:flex;justify-content:space-between;gap:20px;margin-top:24px}.simple-actions .primary{padding:12px 18px;border-radius:5px}footer a{color:inherit}button:disabled{cursor:wait}#sync-status{font-size:12px}header{margin-top:0} [hidden]{display:none!important}