:root{font-family:Arial,Helvetica,sans-serif;color:#22272b;background:#fff;font-synthesis:none;font-size:16px;--ink:#22272b;--muted:#626b73;--line:#dce0e3;--accent:#245b9c}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}a{color:#245b9c;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
header,footer{max-width:1120px;padding:22px 28px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.5px;white-space:nowrap}.brand span{font-weight:400;color:var(--muted)}.device{font-size:13px;color:var(--muted)}
main{max-width:1040px;margin:auto;padding:8px 28px 0}.intro{margin:14px 0 22px}.intro h1{font-size:28px;letter-spacing:-.7px;font-weight:600;margin:0 0 8px}.intro p{font-size:14px;margin:0;color:var(--muted)}h1{font-size:32px;letter-spacing:-.6px}h2{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.3px}h3{font-size:17px;line-height:1.4;font-weight:600}p{line-height:1.65;color:var(--muted)}
button{min-height:44px;border:1px solid #cdd3d8;border-radius:6px;padding:10px 14px;background:#fff;color:var(--ink);cursor:pointer;font-size:14px}button:hover{background:#f2f4f6;border-color:#a1a9b0}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #3576bf;outline-offset:3px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:12px;color:var(--muted)}.toolbar>span::before{content:'●';font-size:7px;color:#486c51;margin-right:6px}.toolbar-actions{display:flex;gap:8px}.toolbar button{font-size:12px;padding:8px 12px;background:#fafbfc}#wide[aria-pressed=true]{border-color:#245b9c;background:#eff5fb;color:#245b9c}
#counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}.counter{background:#fff;border:1px solid #cbd1d6;border-radius:8px;padding:18px;min-width:0}.counter.active{border-color:#7d8993}.counter-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.name{width:100%;min-width:0;min-height:44px;font-weight:600;border:1px solid transparent;background:transparent;padding:8px 6px;border-radius:4px;color:var(--ink)}.name:hover{border-color:var(--line)}.name:focus{border-color:#8da9c9;background:#fafcff}.select{white-space:nowrap;font-size:11px;padding:6px 10px;min-width:80px;background:#fafbfc;border-color:var(--line)}
.number{height:140px;min-height:140px;display:flex;align-items:center;justify-content:center;font-size:108px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-3px;margin:12px 0 18px;white-space:nowrap}.count-controls{display:grid;grid-template-columns:1fr 2fr;gap:12px;max-width:620px;margin:auto}.count-controls button{height:88px;font-size:40px;font-weight:400;border-radius:6px;user-select:none;-webkit-user-select:none}.count-controls .plus{background:#27343e;color:white;border-color:#27343e}.count-controls .plus:hover{background:#17232d}.minor{display:flex;justify-content:center;gap:14px;margin-top:8px}.minor button{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:44px}
.bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.bottom button{font-size:12px}.bottom #add{border-style:dashed}#undo{margin-left:auto}#combined{margin-left:auto;font-size:14px;font-weight:600}#notice{font-size:13px;min-height:20px;margin:12px 0;color:#4d5b67}#notice:empty{display:none}.notice{border:1px solid var(--line);padding:12px}.custom-link{text-align:center;font-size:14px;margin:10px 0 0}.custom-link a{display:inline-flex;align-items:center;min-height:44px;gap:8px}.shortcuts{max-width:650px;margin:0 auto 18px;font-size:12px;text-align:center;border:0}.shortcuts summary{color:var(--muted)}summary{cursor:pointer;min-height:44px;padding:13px 0;line-height:1.5;color:#38434d}details{border-bottom:1px solid var(--line)}details p{font-size:14px;margin-top:0}
.about{border-top:1px solid var(--line);padding-top:32px;margin-top:32px;padding-bottom:32px}.about>p{max-width:780px;font-size:15px}.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 40px}.examples article{border-top:2px solid #cdd3d8;padding-top:4px}.examples p{font-size:14px}.examples a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}.about>h2{margin-top:0}.about details{font-size:14px}footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer a{color:var(--muted)}
.setup{max-width:740px;margin:auto}.setup>h1{margin-top:16px}.setup>p{font-size:15px}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}.preset-grid button{text-align:left;padding:18px;min-height:94px;font-size:16px;font-weight:600}.preset-grid small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}.preset-grid button[aria-pressed=true]{border-color:#245b9c;background:#f1f6fc}.panel{border-top:1px solid var(--line);padding:24px 0;margin:24px 0}.panel h2{margin:0 0 8px}.panel>p{font-size:14px}.label-row{display:flex;gap:10px;margin:10px 0}.label-row input{width:100%;min-width:0;min-height:48px;padding:11px 12px;border:1px solid #cdd3d8;border-radius:5px;font-size:16px}.label-row button{min-width:48px;flex-shrink:0}label{display:block;font-size:14px;font-weight:600;margin:16px 0 10px}textarea{width:100%;border:1px solid #cdd3d8;border-radius:5px;padding:12px;font-size:16px;min-height:100px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.primary{background:#27343e;color:#fff;border-color:#27343e}.primary:hover{background:#17232d;color:#fff}
.wide-view main{max-width:1640px}.wide-view .reading{max-width:984px;margin-left:auto;margin-right:auto}.wide-view .ad-slot{max-width:970px;margin-left:auto;margin-right:auto}
.ad-slot:not([hidden]){min-height:150px;margin:40px auto;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:970px}.ad-label{display:block;font-size:10px;letter-spacing:.3px;color:#7c848b;text-align:center;margin-bottom:10px}#ad-content{min-height:90px;max-width:100%;overflow:hidden}.ad-slot[data-preview]{background:#fafbfc}.ad-slot[data-preview] #ad-content{display:flex;align-items:center;justify-content:center;color:#7c848b;font-size:12px}
.focus-mode header,.focus-mode .about,.focus-mode footer,.focus-mode .custom-link,.focus-mode .shortcuts,.focus-mode .ad-slot{display:none}.focus-mode main{max-width:none;padding:0}.focus-mode #tool{background:#fff;min-height:100dvh;padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.focus-mode .intro,#tool:fullscreen .intro{display:none}#tool:fullscreen{background:#fff;padding:24px;overflow:auto}#tool:fullscreen .custom-link,#tool:fullscreen .shortcuts{display:none}
.confirm-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #c5cdd4;border-radius:8px;padding:24px;background:#fff;color:var(--ink);box-shadow:0 10px 50px #0002}.confirm-dialog::backdrop{background:#1b283780}.confirm-dialog h2{margin-top:0;font-size:22px}.confirm-dialog p{font-size:15px}.confirm-dialog .actions{display:grid;grid-template-columns:1fr 1fr}.confirm-dialog button{min-height:48px}
@media(max-width:900px){#wide{display:none}}
@media(max-width:600px){
 header{padding:12px 16px;min-height:52px;gap:12px}.brand{font-size:19px}.device{display:none}header>a:not(.brand){font-size:12px;min-height:44px;display:flex;align-items:center}main{padding:0 16px}.intro{margin:12px 0}.intro h1{font-size:26px;margin:0 0 4px}.intro p{font-size:12px;line-height:1.5}
 .toolbar{margin-bottom:8px}.toolbar-actions{gap:0}.toolbar button{padding:8px 10px}.counter{padding:12px}.counter-head{gap:4px}.select{min-width:74px;padding:6px;font-size:11px}.name{font-size:16px;padding:6px}.number{font-size:80px;height:96px;min-height:96px;margin:8px 0 12px}.count-controls button{height:84px}.minor{margin-top:4px}.minor button{padding:8px 10px}
 .bottom{gap:8px}.bottom button{padding:8px 10px}.bottom #combined{order:3;flex-basis:100%;margin:0;text-align:center;padding:8px}.custom-link{margin-top:8px}.shortcuts{margin-bottom:12px}.about{margin-top:24px;padding-top:24px}.examples{grid-template-columns:1fr;gap:20px;margin:24px 0 32px}.examples h3{margin-bottom:6px}.examples p{margin-top:0;margin-bottom:0}.examples a{margin-top:0}.about>p{font-size:14px}h2{font-size:21px}
 .setup>h1{font-size:28px;margin:16px 0 8px}.setup>p{font-size:14px}.preset-grid{gap:10px;margin:18px 0}.preset-grid button{padding:12px;font-size:15px}.preset-grid small{font-size:11px}.panel{padding:20px 0;margin:20px 0}.label-row{gap:8px}.actions{gap:8px}.actions button{width:100%;min-height:50px}.confirm-dialog .actions button{width:auto;min-height:48px}.confirm-dialog{padding:20px}.ad-slot:not([hidden]){min-height:160px;margin-top:32px;margin-bottom:32px}#ad-content{min-height:100px}footer{padding:22px 16px max(22px,env(safe-area-inset-bottom));flex-wrap:wrap}
}
@media(max-width:359px){.brand{font-size:17px}.intro h1{font-size:24px}.intro p{font-size:11px}.preset-grid button{padding:10px}.bottom button{padding:8px}.select{min-width:68px}}
@media(min-width:601px) and (max-width:960px) and (max-height:500px){
 header{padding:6px 20px;min-height:44px}.device{display:none}main{padding:0 20px}.intro{margin:0 0 4px}.intro p{display:none}.intro h1{font-size:23px;margin:4px 0}.toolbar{margin-bottom:6px}#counters{grid-template-columns:1fr}.counter{display:grid;grid-template-columns:1fr 1.5fr;gap:0 18px;padding:10px 14px}.counter-head,.minor{grid-column:1/-1}.number{font-size:72px;height:88px;min-height:88px;margin:0}.count-controls{width:100%;margin:0;align-self:center}.count-controls button{height:76px}.minor{margin:0}.bottom{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.wide-view header,.wide-view footer{max-width:1640px}
.examples{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.examples{grid-template-columns:1fr}}