:root{--content-width:92%;--header-height:56px;--tap-size:44px;--input-height:36px;--input-width:calc(3ch + 20px);--counter-gap:24px;--section-gap:16px;--panel-padding:16px;--radius-panel:12px;--radius-tile:10px;--radius-input:6px;--mark-size:22px;--toggle-width:44px;--toggle-height:24px;--color-bg:#333;--color-panel:#555;--color-panel-border:#6a6a6a;--color-tile:#646263;--color-text:#e8e8e8;--color-text-muted:#9aa0a6;--color-input-bg:#555;--color-input-border:#6e6e6e;--color-input-focus:#009844;--color-header:#009844;--color-header-icon:#fff;--color-toggle-track-off:#202020;--color-toggle-track-on:#f24e57;--color-toggle-knob:#fff;--mark-red:#f24e57;--mark-green:#5c9826;--mark-yellow:#febf1e;--mark-blue:#649bd3;--mark-triangle:#febf1e;--mark-reset:#cfd3d6}*{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}#root{flex-direction:column;min-height:100dvh;display:flex}.header{height:var(--header-height);background:var(--color-header);justify-content:center;align-items:center;display:flex}.home-link{min-width:var(--tap-size);min-height:var(--tap-size);justify-content:center;align-items:center;display:flex}.flower{width:36px;height:36px}.mode-bar{width:var(--content-width);min-height:calc(var(--tap-size) + 24px);align-items:center;gap:8px;margin:0 auto;padding:12px 0;display:flex}.mode-sign{font-size:22px;font-weight:700;line-height:1}.toggle{appearance:none;width:var(--toggle-width);height:var(--toggle-height);border-radius:calc(var(--toggle-height) / 2);background:var(--color-toggle-track-off);cursor:pointer;flex-shrink:0;margin:0;position:relative}.toggle:before{content:"";background:var(--color-toggle-knob);border-radius:50%;width:18px;height:18px;position:absolute;top:3px;left:3px}.toggle:checked{background:var(--color-toggle-track-on)}.toggle:checked:before{left:23px}.reset{width:var(--tap-size);height:var(--tap-size);color:var(--mark-reset);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-left:auto;padding:0;display:flex}main{width:var(--content-width);gap:var(--section-gap);flex-direction:column;margin:0 auto;padding:4px 0 24px;display:flex}.panel{background:var(--color-panel);border-radius:var(--radius-panel);padding:var(--panel-padding);grid-template-columns:1fr 1fr;gap:12px;display:grid}.panel.plain{grid-template-columns:1fr}.panel.grouped{border:1px solid var(--color-panel-border)}.panel.grouped>.counter:first-child:nth-last-child(odd){grid-column:1/-1}.counter{justify-content:center;align-items:center;gap:var(--counter-gap);display:flex}.value{height:var(--input-height);width:100%;max-width:var(--input-width);border-radius:var(--radius-input);border:1px solid var(--color-input-border);background:var(--color-input-bg);min-width:0;color:var(--color-text);text-align:center;padding:0 8px;font-size:16px}.value::placeholder{color:var(--color-text-muted)}.value:focus{outline:2px solid var(--color-input-focus);outline-offset:-1px}.tile{width:var(--tap-size);height:var(--tap-size);border-radius:var(--radius-tile);background:var(--color-tile);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.mark-dot{width:var(--mark-size);height:var(--mark-size);border-radius:50%;display:block}.mark-red{background:var(--mark-red)}.mark-green{background:var(--mark-green)}.mark-yellow{background:var(--mark-yellow)}.mark-blue{background:var(--mark-blue)}.mark-triangle{background:var(--mark-triangle);clip-path:polygon(50% 0%,100% 100%,0% 100%);width:24px;height:21px;display:block}.notfound{flex:1;justify-content:center;align-items:center;font-size:64px;display:flex}.mark-target{background:radial-gradient(circle, var(--mark-red) 0 40%, var(--mark-green) 40% 100%);border-radius:50%;width:24px;height:24px;display:block}