.container.svelte-s1u17b{font-family:var(--serif);min-height:calc(100vh - var(--header-height));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3vw,24px)}.controls.svelte-s1u17b{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,24px);align-items:center;justify-content:center}.radio-group.svelte-s1u17b{display:flex;gap:0}.radio-group.svelte-s1u17b label:where(.svelte-s1u17b){position:relative;cursor:pointer}.radio-group.svelte-s1u17b input:where(.svelte-s1u17b){position:absolute;opacity:0;width:0;height:0}.radio-group.svelte-s1u17b .pill:where(.svelte-s1u17b){display:inline-block;padding:clamp(4px,.8vw,5px) clamp(8px,1.5vw,14px);border:1px solid var(--color-3);font-family:inherit;font-size:clamp(13px,1.5vw,15px);color:var(--color-3);background:var(--bg-color);opacity:.8;cursor:pointer;transition:background .15s,color .15s,border-color .15s;-webkit-user-select:none;user-select:none}.radio-group.svelte-s1u17b label:where(.svelte-s1u17b):first-child .pill:where(.svelte-s1u17b){border-radius:clamp(2px,.5vw,4px) 0 0 clamp(2px,.5vw,4px)}.radio-group.svelte-s1u17b label:where(.svelte-s1u17b):last-child .pill:where(.svelte-s1u17b){border-radius:0 clamp(2px,.5vw,4px) clamp(2px,.5vw,4px) 0;border-left:none}.radio-group.svelte-s1u17b input:where(.svelte-s1u17b):checked+.pill:where(.svelte-s1u17b){background:var(--color-1, #333);color:var(--bg-color);border-color:var(--color-1, #333);opacity:1;font-weight:700}.palette-wrap.svelte-s1u17b{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vw,8px)}.palette.svelte-s1u17b{--btn-size: clamp(24px, 4vw, 30px);--btn-gap: clamp(2px, .5vw, 4px);display:flex;flex-wrap:wrap;gap:var(--btn-gap);justify-content:center;width:calc(14 * var(--btn-size) + 13 * var(--btn-gap));max-width:95vw}.char-btn.svelte-s1u17b{width:var(--btn-size);height:var(--btn-size);border:1px solid var(--color-3);background:var(--bg-color);color:var(--color-3);font-family:inherit;font-size:clamp(10px,1.5vw,13px);opacity:.8;font-weight:700;cursor:pointer;border-radius:clamp(2px,.5vw,4px);transition:background .12s,color .12s,border-color .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center}.char-btn.svelte-s1u17b:hover{opacity:.8}.char-btn.active.svelte-s1u17b{background:var(--color-1);color:var(--bg-color);border-color:var(--color-1);opacity:1}.info-bar.svelte-s1u17b{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,28px);font-size:clamp(15px,1.5vw,17px);justify-content:center;color:var(--color-1)}.info-bar.svelte-s1u17b strong:where(.svelte-s1u17b){font-weight:600}.grid-container.svelte-s1u17b{--grid-size: 15;--grid-max-width: 600px;--grid-padding: 20px;--gap-size: clamp(1px, .3vw, 2px);--available-width: calc(100vw - 2 * var(--grid-padding));--cell-from-viewport: calc((var(--available-width) - (var(--grid-size) - 1) * var(--gap-size)) / var(--grid-size));--cell-from-max: calc((var(--grid-max-width) - (var(--grid-size) - 1) * var(--gap-size)) / var(--grid-size));--cell-size: min(var(--cell-from-viewport), var(--cell-from-max), 34px);--grid-width: calc(var(--grid-size) * var(--cell-size) + (var(--grid-size) - 1) * var(--gap-size));display:flex;justify-content:center;width:100%;max-width:calc(var(--grid-max-width) + 2 * var(--grid-padding));padding:0 var(--grid-padding);box-sizing:border-box}.grid.svelte-s1u17b{display:grid;grid-template-columns:repeat(var(--grid-size),var(--cell-size));gap:var(--gap-size);border:clamp(2px,.5vw,4px) solid black;background:#696969;width:var(--grid-width)}.cell.svelte-s1u17b{position:relative;width:var(--cell-size);height:var(--cell-size);transition:background .18s ease;display:flex;align-items:center;justify-content:center}.cell.svelte-s1u17b:hover{outline:clamp(1px,.25vw,2px) solid #fff;outline-offset:clamp(-1px,-.25vw,-2px);z-index:2}.cell-letter.svelte-s1u17b{font-size:clamp(10px,min(2vw,2vh),16px);font-weight:900;color:#fff;transition:opacity .18s ease;pointer-events:none}.tip.svelte-s1u17b{display:none;position:absolute;bottom:calc(100% + clamp(3px,.8vw,6px));left:50%;transform:translate(-50%);background:#222;color:#eee;font-size:clamp(14px,1.3vw,16px);padding:clamp(2px,.4vw,3px) clamp(4px,.8vw,7px);border-radius:clamp(2px,.5vw,4px);white-space:nowrap;z-index:10;border:1px solid var(--gray);pointer-events:none}.cell.svelte-s1u17b:hover .tip:where(.svelte-s1u17b){display:block}