:root{--bg:#121213;--surface:#0f1011;--text:#f8f8f8;--surface-border:#222326;--muted:#3a3a3c;--tile-border:#4a4a4d;--tile-bg:#121213;--tile-focus:#6aaa64;--tile-correct:#538d4e;--tile-present:#b59f3b;--tile-absent:#3a3a3c;--key:#7f8286;--key-shadow:#4a4d51;--panel-btn-bg:#1b1d20;--panel-btn-fg:#f7f7f7;--panel-btn-border:#54565a;--gap:10px;--tile-size:clamp(48px, 10vw, 62px)}:root[data-theme=light]{--bg:#f3f3f1;--surface:#fff;--text:#1a1a1b;--surface-border:#d6d7db;--muted:#c7c7ca;--tile-border:#d5d5d8;--tile-bg:#fff;--tile-absent:#a6a6aa;--key:#d6d7da;--key-shadow:#b8b9bd;--panel-btn-bg:#ededee;--panel-btn-fg:#1f2021;--panel-btn-border:#cbcbcf}html{color:var(--text);background:var(--bg);font-family:Nimbus Mono PS,Courier New,monospace;font-weight:400;overflow-x:hidden}body{place-items:center;width:100%;min-height:100dvh;margin:0;padding:12px;display:grid}.pindle{justify-content:center;width:100%;display:flex;& .pindle__container{border:1px solid var(--surface-border);background:var(--surface);border-radius:6px;justify-items:center;gap:20px;width:min(390px,100%);margin:0 auto;padding:24px;display:grid;box-shadow:0 18px 42px #00000059}}@media (width<=430px){body{padding:10px}.pindle{& .pindle__container{gap:16px;padding:16px}}.pindle-game{& .pindle-game__row{gap:8px}}}.pindle-hint{background:var(--panel-btn-bg);width:34px;height:34px;color:var(--panel-btn-fg);cursor:pointer;border:0;border-radius:2px;place-items:center;font-size:1rem;display:grid;position:fixed;inset-block-start:10px;inset-inline-end:10px;& svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}}.pindle-theme{z-index:10;gap:6px;display:flex;position:fixed;inset-block-start:10px;inset-inline-start:10px}.pindle-theme__button{background:var(--panel-btn-bg);width:34px;height:34px;color:var(--panel-btn-fg);cursor:pointer;border:0;border-radius:2px;place-items:center;display:grid;& svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}&.is-active{background:#2f3236;outline:1px solid #5f6368}}:root[data-theme=light]{& .pindle-theme__button.is-active{background:#d8dade;outline-color:#a4a7ad}}.pindle-game{gap:var(--gap);display:grid;& .pindle-game__row{grid-template-columns:repeat(4, var(--tile-size));gap:var(--gap);display:grid}& .pindle-game__tile{width:var(--tile-size);aspect-ratio:1;text-transform:uppercase;border:2px solid var(--muted);background:var(--tile-bg);color:var(--text);border-radius:2px;place-items:center;font-size:clamp(1.4rem,3vw,1.9rem);transition:border-color .18s,transform .12s;animation:.24s both rise-in;display:grid;&:focus{border-color:var(--tile-focus);outline:none;transform:scale(1.03)}&.is-active{border-color:#7b7d80}&.is-correct{background:var(--tile-correct);border-color:var(--tile-correct);color:#fff}&.is-present{background:var(--tile-present);border-color:var(--tile-present);color:#fff}&.is-absent{background:var(--tile-absent);border-color:var(--tile-absent);color:#fff}}}.pindle-keyboard{gap:8px;display:grid;& .pindle-keyboard__row{grid-template-columns:repeat(3,minmax(64px,1fr));gap:8px;width:100%;display:grid}& .pindle-keyboard__key{border:1px solid color-mix(in srgb, var(--key), white 18%);background:var(--key);color:#fff;letter-spacing:.02em;text-shadow:0 1px #00000059;min-height:50px;box-shadow:0 2px 0 var(--key-shadow), 0 8px 14px #0000003d, inset 0 1px 0 #ffffff29;user-select:none;border-radius:2px;place-items:center;font-size:1.1rem;font-weight:700;transition:transform .1s,filter .2s,box-shadow .2s;display:grid;&:hover{cursor:pointer;filter:brightness(1.06);box-shadow:0 3px 0 var(--key-shadow), 0 10px 16px #00000047, inset 0 1px 0 #fff3;transform:translateY(-1px)scale(1.01)}&:active{box-shadow:0 1px 0 var(--key-shadow), 0 5px 8px #00000040, inset 0 1px 0 #ffffff1f;transform:translateY(2px)scale(.98)}&.is-correct{background:var(--tile-correct);border-color:var(--tile-correct)}&.is-present{background:var(--tile-present);border-color:var(--tile-present)}&.is-absent{background:var(--tile-absent);border-color:var(--tile-absent)}}}.pindle-message{min-height:1.2em;color:color-mix(in srgb, var(--text), #89909a 35%);text-align:center;margin:0;font-size:.95rem;& small{color:color-mix(in srgb, var(--text), #9aa1aa 45%);margin-block-start:4px;font-size:.78em;display:block}}.pindle-share{border:1px solid var(--panel-btn-border);background:var(--panel-btn-bg);min-height:44px;color:var(--panel-btn-fg);cursor:pointer;border-radius:2px;padding:0 14px;font-size:.95rem;font-weight:700}.is-hidden{display:none}@keyframes rise-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}