@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;1,400&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--kb-font-heading:"Fraunces", serif;--kb-font-body:"Space Grotesk", sans-serif;--kb-bg:#4a1b3d;--kb-key:#6b2c5c;--kb-key-shadow:#2a0f22;--kb-text:#f0e4d3;--kb-accent:#3d9c82;--kb-accent-text:#0f2a22;--kb-copper:#c08a4e;--kb-copper-text:#3a2408;--kb-disabled:#5c2248;--kb-disabled-text:#a98ba0}body{font-family:var(--kb-font-body)}h1{font-family:var(--kb-font-heading);color:var(--kb-bg);text-align:center;font-size:2.25rem;font-style:italic;font-weight:600}h2{font-family:var(--kb-font-body);color:#6a6a6a;text-align:center;font-size:1.1rem;font-weight:400}.keyboard-container{background-color:var(--kb-bg);color:var(--kb-text);font-family:var(--kb-font-body);border-radius:12px;flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.keyboard-rows{flex-direction:column;gap:12px;width:100%;max-width:520px;display:flex}.keyboard-row{justify-content:center;gap:6px;width:100%;display:flex}.keyboard-key{background-color:var(--kb-key);height:52px;color:var(--kb-text);font-family:var(--kb-font-body);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 var(--kb-key-shadow);border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:transform 80ms,box-shadow 80ms,background-color .15s;display:flex;transform:translateY(0)}.keyboard-key:hover{background-color:var(--kb-accent);color:var(--kb-accent-text)}.keyboard-key:active{background-color:var(--kb-accent);color:var(--kb-accent-text);box-shadow:0 0 0 var(--kb-key-shadow);transform:translateY(4px)}.keyboard-toggle{border:2px solid var(--kb-copper);color:var(--kb-copper);font-family:var(--kb-font-body);cursor:pointer;background:0 0;border-radius:8px;padding:10px 20px;font-weight:500;transition:all .2s}.keyboard-toggle:hover{background:var(--kb-copper);color:var(--kb-copper-text)}.keyboard-toggle.disabled{border-color:var(--kb-disabled);background:var(--kb-disabled);color:var(--kb-disabled-text);cursor:not-allowed}.keyboard-toggle.disabled:hover{background:var(--kb-disabled);color:var(--kb-disabled-text)}textarea{border:2px solid var(--kb-key);background-color:var(--kb-text);width:100%;max-width:520px;min-height:56px;color:var(--kb-bg);box-sizing:border-box;border-radius:8px;margin:0 auto 24px;padding:0 20px;font-size:1.25rem;display:block}textarea:focus{border-color:var(--kb-accent);outline:none}textarea:disabled{color:var(--kb-bg);border-color:var(--kb-accent);cursor:default;opacity:1;background-color:#e8f4f0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}