@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";:root{--color-bg:#0b0616;--color-bg-secondary:#1a1230;--color-surface:#ffffff0f;--color-surface-hover:#ffffff1a;--color-surface-active:#ffffff24;--color-border:#ffffff1f;--color-border-active:#ffffff52;--color-text:#f5f3fb;--color-text-muted:#f5f3fba6;--color-text-dim:#f5f3fb80;--color-correct:#6c5ce7;--color-correct-hi:#8778f5;--color-correct-text:#fff;--color-misplaced:#fdcb6e;--color-misplaced-hi:#ffd98a;--color-misplaced-text:#1a1230;--color-absent:#ffffff0f;--color-absent-text:#ffffff94;--color-initial:#e84393;--color-initial-hi:#ff6ab0;--color-initial-text:#fff;--color-tbd:#ffffff0a;--color-empty:transparent;--color-key:#ffffff14;--color-key-hover:#ffffff29;--color-key-text:#f5f3fb;--color-key-special:#6c5ce759;--color-key-special-hover:#6c5ce78c;--color-accent:#a29bfe;--color-accent-glow:#a29bfe59;--tile-size:clamp(44px, 11vw, 62px);--tile-gap:clamp(4px, 1vw, 8px);--tile-radius:12px;--key-height:clamp(48px, 7.5vh, 56px);--key-radius:10px;--header-height:64px;--flip-duration:.6s;--pop-duration:.12s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);color:var(--color-text);background:var(--color-bg);font-family:Inter,system-ui,-apple-system,sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background-image:radial-gradient(at 20%,#6c5ce71f 0%,#0000 55%),radial-gradient(at 80% 20%,#e843931a 0%,#0000 55%),radial-gradient(at 50% 100%,#fdcb6e0f 0%,#0000 45%);background-attachment:fixed}button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;font-family:inherit}button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sr-only:focus-visible{z-index:300;clip:auto;white-space:nowrap;background:var(--color-accent);color:#0b0616;border-radius:999px;width:auto;height:auto;margin:0;padding:10px 20px;font-size:.9rem;font-weight:700;text-decoration:none;position:fixed;top:8px;left:50%;overflow:visible;transform:translate(-50%);box-shadow:0 4px 16px #a29bfe80}@keyframes flip-in{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes pop{0%{transform:scale(.85)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-22px)}50%{transform:translateY(4px)}60%{transform:translateY(-10px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:scale(.92)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 10px var(--color-accent-glow)}50%{box-shadow:0 0 24px var(--color-accent-glow)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20vh)rotate(0)}to{opacity:0;transform:translateY(120vh)rotate(720deg)}}@keyframes float-y{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}