:root{--text:#818384;--text-light:#fff;--bg:#0d0d0d;--bg-lighter:#1a1a1b;--border:#3a3a3c;--key-bg:var(--text);--max-width:500px;--green:#6aaa64;--yellow:#c9b458;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}:root[data-theme=light]{--text:#4b5563;--text-light:#111827;--bg:#f8fafc;--bg-lighter:#fff;--border:#d1d5db;--key-bg:#f3f4f6;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{height:100dvh;margin:0}main{width:100%;max-width:var(--max-width);flex-direction:column;height:100%;margin:0 auto;display:flex}header{letter-spacing:.18em;border-bottom:1px solid var(--border);text-align:center;text-transform:uppercase;padding:14px 20px 12px;font-size:12px;font-weight:700;position:relative}.theme-toggle{border:1px solid var(--border);background:var(--bg-lighter);width:32px;height:32px;color:var(--text-light);cursor:pointer;border-radius:999px;font-size:16px;line-height:1;position:absolute;top:50%;right:16px;transform:translateY(-50%)}p{margin:0}.guess{margin:0;padding:16px 20px 12px}.guess>p{text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;font-size:10px}.guess .guess-container{justify-content:center;gap:8px;display:flex}.guess .guess-container>div{border:2px solid var(--border);text-transform:uppercase;cursor:pointer;width:54px;height:54px;color:var(--text-light);-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex}.guess .guess-container>div[data-correctness="0"]{background:0 0}.guess .guess-container>div[data-correctness="1"]{background:var(--yellow)}.guess .guess-container>div[data-correctness="2"]{background:var(--green)}.search{justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.search input{background:var(--bg-lighter);border:1px solid var(--border);max-width:250px;height:38px;color:var(--text-light);border-radius:6px;outline:none;flex:1;padding:0 12px;font-size:14px}.search p{color:var(--text);font-size:12px}.mode{justify-content:space-between;gap:12px;padding:4px 16px 12px;display:flex}.mode>button{background:var(--bg-lighter);border:1px solid var(--border);color:var(--text-light);font-family:var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:6px;padding:8px 16px;font-size:10px;font-weight:700}.mode>button[data-mode=search]{background:var(--yellow);color:var(--text)}.mode .reset-button{background:#b91c1c;border-color:#ef4444}.mode .reset-button:hover{background:#dc2626}.results{flex:1;min-height:0;position:relative;overflow-y:auto}.results-spacer{width:100%;position:relative}.results-window{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:0;left:0;right:0}.result{box-sizing:border-box;background:var(--bg-lighter);border:1px solid var(--border);border-radius:10px;justify-content:space-between;align-items:center;width:100%;max-width:350px;min-height:58px;padding:10px 14px;display:flex}.result>p:first-of-type{text-transform:uppercase;color:var(--text-light);font-weight:700}.result>button{background:var(--green);color:var(--text-light);font-family:var(--sans);cursor:pointer;border:0;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700}.keyboard{padding:8px 4px}.keyboard .spacer{flex:.5}.keyboard .keyboard-row{gap:6px;width:100%;margin-top:6px;display:flex}.keyboard .keyboard-row>button{background:var(--key-bg);height:58px;color:var(--text-light);cursor:pointer;border:0;border-radius:6px;flex:1 0;padding:0;font-size:14px;font-weight:700}.keyboard .keyboard-row>button[data-correctness="0"]{background:var(--border)}.keyboard .keyboard-row>button[data-correctness="1"]{background:var(--yellow)}.keyboard .keyboard-row>button[data-correctness="2"]{background:var(--green)}.keyboard .keyboard-row>button{text-transform:uppercase;justify-content:center;align-items:center;display:flex}.keyboard .large-button{flex:1.5!important}
