.cg,.cg-result{--cg-acc: #6D28D9;--cg-on: color-mix(in srgb, var(--cg-acc) 12%, var(--cell));--cg-warn: #b7791f}:root[data-palette=colorblind] :is(.cg,.cg-result){--cg-acc: #0072b2;--cg-warn: #e69f00}:root[data-look=dusk] :is(.cg,.cg-result),:root[data-look=ink] :is(.cg,.cg-result){--cg-acc: #a98bf0}.cg{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:560px;margin:0 auto;user-select:none;-webkit-user-select:none}.cg-top{display:flex;align-items:center;gap:6px;min-height:44px}.cg-label{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}.cg-label b{font-family:var(--font-display);font-size:1.08rem}.cg-label>span{color:var(--ink-2);font-size:.9rem;font-variant-numeric:tabular-nums}.cg-gap{flex:1 1 auto}.cg-icon{flex:none;min-width:44px;min-height:44px;padding:6px 8px;font-size:1.2rem;font-weight:800}.cg-board{--cell: 26px;display:flex;flex-wrap:wrap;gap:6px calc(var(--cell) * .55);justify-content:center;padding:6px 0 4px}.cg-word{display:inline-flex;gap:3px;align-items:flex-end}.cg-cell{width:var(--cell);min-height:max(36px,calc(var(--cell) * 1.55));padding:0;border:0;border-radius:6px;background:transparent;display:grid;grid-template-rows:1fr auto;justify-items:center;cursor:pointer;color:var(--ink);scroll-margin-bottom:220px}.cg-g{align-self:end;width:100%;height:calc(var(--cell) * .95);display:grid;place-items:end center;padding-bottom:2px;border-bottom:2.5px solid var(--ink);font-family:var(--font-display);font-weight:800;font-size:calc(var(--cell) * .78);line-height:1}.cg-c{font-size:max(12px,calc(var(--cell) * .5));font-weight:700;color:var(--ink-2);line-height:1.25;letter-spacing:.02em}.cg-mark{align-self:flex-end;padding-bottom:calc(var(--cell) * .62);font-family:var(--font-display);font-weight:800;font-size:calc(var(--cell) * .7);line-height:1;color:var(--ink-2)}.cg-cell.is-on{background:var(--cg-on)}.cg-cell.is-cursor{background:color-mix(in srgb,var(--cg-acc) 22%,var(--cell));box-shadow:inset 0 0 0 2px var(--cg-acc)}.cg-cell.is-cursor .cg-g{border-bottom-color:var(--cg-acc)}.cg-cell.is-fixed .cg-g{color:var(--cg-acc)}.cg-cell.is-double .cg-g{border-bottom-color:var(--cg-warn);border-bottom-style:double;border-bottom-width:4px}.cg-cell.is-wrong .cg-g{color:var(--coral);border-bottom:3px dotted var(--coral)}.cg-cell.is-done .cg-g{color:var(--ink);border-bottom-color:var(--leaf)}.cg-cell:disabled{cursor:default}.cg-cell:focus-visible{outline:3px solid var(--sky);outline-offset:1px}.cg-msg{min-height:1.4em;text-align:center;color:var(--ink-2);font-size:1rem;font-weight:600;line-height:1.3}.cg-msg.is-good{color:var(--leaf)}.cg-msg.is-bad{color:var(--coral)}.cg-msg.is-note{color:var(--ink)}.cg-counts{padding:6px 8px;border-radius:14px;background:var(--bg-2);min-width:0}.cg-counts-title{margin:0 0 4px;font-weight:700;font-size:.9rem}.cg-counts-list{display:flex;gap:6px;margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain}.cg-counts-list li{flex:none}.cg-count{min-height:44px;min-width:64px;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--cell);color:var(--ink);display:inline-flex;align-items:center;gap:4px;cursor:pointer;font:inherit}.cg-count b{font-family:var(--font-display)}.cg-count-n{color:var(--ink-2);font-size:.85rem}.cg-count-g{margin-left:2px;padding:0 5px;border-radius:6px;background:var(--cg-on);color:var(--cg-acc);font-weight:800}.cg-count.is-on{border-color:var(--cg-acc)}.cg-counts-note{margin:2px 0 0;color:var(--ink-2);font-size:.85rem}.cg-dock{position:static;z-index:2;display:grid;gap:8px;padding:8px 0 calc(6px + env(safe-area-inset-bottom));background:var(--bg)}.cg.is-docked .cg-dock{position:sticky;bottom:0;box-shadow:0 -8px 12px -10px #00000040}.cg-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cg-tool{min-height:44px;padding:4px 6px;font-size:.95rem;gap:5px;line-height:1.1}.cg-tool:disabled{opacity:.5}.cg-tool.is-on{background:var(--cg-on);border-color:var(--cg-acc)}.cg-tool.is-pulse{animation:cg-pulse calc(1.2s * var(--motion)) ease-in-out 3}@keyframes cg-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 45%,transparent)}}.cg-ico{display:inline-grid;place-items:center}.cg-ico svg,.cg-key svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cg-kb{display:grid;gap:6px;touch-action:manipulation}.cg-kb-row{display:flex;gap:5px;justify-content:center}.cg-key{position:relative;flex:1 1 0;min-width:0;max-width:46px;height:44px;padding:0;border-radius:9px;border:1.5px solid var(--line);background:var(--cell);color:var(--ink);box-shadow:0 2px 0 var(--line);font-family:var(--font-display);font-weight:800;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}.cg-key:active:not(:disabled){transform:translateY(1px);box-shadow:none}.cg-key.is-wide{flex:1.5 1 0;max-width:70px}.cg-key.is-used{background:var(--cg-on)}.cg-key.is-used:after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--cg-acc)}.cg-done{text-align:center;padding:4px}.cg-done.is-in{animation:cg-in calc(.35s * var(--motion)) ease-out}@keyframes cg-in{0%{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}.cg-done h2{margin:0 0 8px;font-family:var(--font-display);font-size:1.2rem}.cg-quote{margin:0 0 10px;padding:14px 16px;border-radius:16px;background:var(--bg-2);text-align:left}.cg-quote p{margin:0 0 8px;font-family:var(--font-display);font-size:1.2rem;line-height:1.35;user-select:text;-webkit-user-select:text}.cg-quote footer{display:grid;gap:2px;color:var(--ink-2);font-size:.95rem}.cg-quote footer b{color:var(--ink)}.cg-done-line{margin:0 0 10px;color:var(--ink-2)}.cg-done-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.cg-done-buttons .suvi-btn{min-height:48px;min-width:140px}.cg-help p{margin:0 0 10px}@media(pointer:fine)and (min-width:700px){.cg-key{height:48px;max-width:48px}.cg.is-docked .cg-dock{position:static;box-shadow:none}}:root[data-text-size=large] .cg-label b{font-size:1rem}:root[data-text-size=large] .cg-label>span{font-size:.85rem}:root[data-text-size=large] .cg-tool{font-size:calc(.95rem * 16 / 19)}:root[data-text-size=large] .cg-key{font-size:calc(1.1rem * 16 / 19)}:root[data-text-size=large] .cg-count{font-size:calc(1rem * 16 / 19)}
