:root{--ivory: #F6F1EA;--oat: #EFE7DC;--cream: #FBF7F1;--stone: #E4D9CB;--sage: #8A9A7B;--olive: #6B7F5C;--olive-d: #556448;--gold: #C9B07A;--gold-soft: #E8D9B0;--clay: #C4A484;--taupe: #A08B78;--ink: #3F372F;--espresso: #2C241C;--muted: #8A7B6C;--miss: #E8C9C0;--panel: var(--cream);--panel2: #F3EBE1;--bg0: var(--ivory);--bg1: var(--oat);--green: var(--olive);--green-d: var(--olive-d);--sky: var(--sage);--coral: #C98474;--fox: #C4A484;--shadow: 0 10px 28px rgba(44, 36, 28, .06);--radius: 24px;--border: 1px solid var(--stone)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Outfit,system-ui,sans-serif;background:radial-gradient(900px 480px at 8% -8%,rgba(232,217,176,.45) 0%,transparent 55%),radial-gradient(700px 420px at 108% 8%,rgba(138,154,123,.18) 0%,transparent 50%),linear-gradient(180deg,var(--ivory),var(--oat));color:var(--ink);letter-spacing:.01em}body:before{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;opacity:.045;z-index:40;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}button,input{font-family:inherit}.app{min-height:100%;max-width:1040px;margin:0 auto;padding:28px 24px 48px;position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center;display:block;flex-shrink:0;background:var(--ivory)}.brand h1{font-family:Cormorant Garamond,Georgia,serif;font-size:2.15rem;font-weight:600;margin:0;letter-spacing:.12em;color:var(--espresso)}.brand small{display:block;color:var(--muted);font-weight:500;font-size:.82rem;letter-spacing:.04em}.icon-btn{border:var(--border);background:var(--cream);color:var(--espresso);width:46px;height:46px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer;font-size:1.1rem}.icon-btn:hover{background:var(--oat)}.icon-btn:active{transform:translateY(1px)}.card{background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);border:var(--border);padding:26px}.hero{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;margin-bottom:28px;padding:32px 30px}.hero h2{font-family:Cormorant Garamond,Georgia,serif;font-size:2.4rem;font-weight:600;letter-spacing:.06em;color:var(--espresso);margin:0 0 8px}.hero p{margin:0;color:var(--muted);font-size:1.08rem;font-weight:400;line-height:1.55}.name-row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;align-items:center}.name-row input{flex:1;min-width:180px;border:none;border-bottom:1.5px solid var(--taupe);background:transparent;color:var(--espresso);border-radius:0;padding:10px 2px 8px;font-size:1.12rem;font-weight:500}.name-row input::placeholder{color:var(--taupe);font-weight:400}.name-row input:focus{outline:none;border-bottom-color:var(--olive)}.btn{border:none;border-radius:999px;padding:11px 20px;font-weight:600;font-size:.98rem;cursor:pointer;letter-spacing:.02em;box-shadow:none}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--olive);color:#fbf7f1}.btn-primary:hover{background:var(--olive-d)}.btn-gold{background:var(--gold-soft);color:var(--espresso)}.btn-gold:hover{background:var(--gold);color:var(--espresso)}.btn-sky{background:var(--sage);color:#fbf7f1}.btn-ghost{background:transparent;color:var(--ink);border:var(--border)}.btn-ghost:hover{background:var(--oat)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.stats-row{display:flex;gap:10px;margin:4px 0 22px;flex-wrap:wrap}.chip{background:transparent;border:var(--border);border-radius:999px;padding:7px 14px;font-weight:500;color:var(--olive);font-size:.92rem}.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.level-card{text-align:left;background:var(--cream);color:var(--ink);border:var(--border);border-radius:22px;padding:18px 18px 16px;box-shadow:none;cursor:pointer;min-height:132px}.level-card:hover:not(:disabled){background:var(--oat)}.level-card:disabled{opacity:.48;cursor:not-allowed}.level-card .num{font-family:Outfit,sans-serif;color:var(--sage);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.level-card h3{margin:8px 0 6px;font-family:Cormorant Garamond,Georgia,serif;font-size:1.28rem;font-weight:600;color:var(--espresso)}.level-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45;font-weight:400}.stars{letter-spacing:3px;font-size:1rem;margin-top:12px;color:var(--gold)}.play-wrap{display:grid;gap:18px}.play-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.play-meta strong{font-family:Cormorant Garamond,Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--espresso)}.meters{display:flex;gap:10px;flex-wrap:wrap}.meter{background:var(--cream);border:var(--border);border-radius:16px;padding:8px 14px;font-weight:600;min-width:86px;text-align:center;color:var(--espresso)}.meter span{display:block;color:var(--muted);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.prompt-box{background:var(--cream);color:var(--espresso);border-radius:24px;border:var(--border);padding:32px 28px;min-height:150px;box-shadow:var(--shadow);font-size:2rem;line-height:1.75;font-weight:500;letter-spacing:.04em;word-break:break-word;font-family:Outfit,sans-serif}.ch{display:inline}.ch.done{color:var(--olive)}.ch.now{background:#8a9a7b38;color:var(--espresso);border-radius:8px;padding:0 5px;box-shadow:0 0 0 1px var(--gold)}.ch.space.now{padding:0 10px}.ch.miss{background:var(--miss);border-radius:8px;box-shadow:none}.hint{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--muted);font-weight:500}.hint-pill{display:inline-flex;align-items:center;background:#8a9a7b38;color:var(--olive-d);border-radius:999px;padding:4px 12px;font-weight:600;font-size:.92rem;letter-spacing:.04em}.hint strong{color:var(--olive);font-weight:600}.kb{background:var(--cream);border:var(--border);border-radius:24px;padding:18px 16px 16px}.kb-row{display:flex;justify-content:center;gap:8px;margin-bottom:8px}.key{min-width:52px;height:54px;border-radius:12px;background:#f3ebe1;display:grid;place-items:center;font-weight:600;text-transform:uppercase;border:var(--border);position:relative;color:var(--ink)}.key.hand-l{background:#e8ede3}.key.hand-r{background:#f1e6da}.key.hand-t{background:#ede6dc}.key.bump:after{content:"";width:10px;height:2px;background:var(--taupe);border-radius:2px;position:absolute;bottom:8px}.key.space{min-width:280px;text-transform:none;font-size:.82rem;letter-spacing:.08em}.key.next{background:#dce4d4;color:var(--espresso);box-shadow:0 0 0 1.5px var(--gold);border-color:var(--gold)}.hands{display:flex;justify-content:space-between;gap:20px;padding:4px 18px 10px}.hand{display:flex;gap:8px;align-items:flex-end}.finger{width:22px;border-radius:12px 12px 6px 6px;background:var(--sage);opacity:.38;transition:height .15s,opacity .15s,transform .15s}.finger.on{opacity:1;transform:translateY(-2px)}.finger.lp,.finger.rp{height:28px}.finger.lr,.finger.rr{height:36px}.finger.lm,.finger.rm{height:44px}.finger.li,.finger.ri{height:38px}.finger.th{height:22px;width:28px;border-radius:10px}.combo{font-family:Cormorant Garamond,Georgia,serif;color:var(--olive);font-size:1.35rem;min-height:1.4rem;font-weight:600}.result{text-align:center;padding:36px 24px}.result h2{font-family:Cormorant Garamond,Georgia,serif;font-size:2.3rem;font-weight:600;color:var(--espresso);margin:8px 0}.result p{color:var(--muted)}.big-stars{font-size:2.1rem;letter-spacing:8px;color:var(--gold)}.result .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.result .grid .meter{padding:14px 8px}.fox{width:140px;height:140px}.fox.oops{animation:wobble .45s ease}.fox.happy{animation:lift .5s ease}.fox.cheer{animation:lift 1.4s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes lift{0%,to{transform:translateY(0)}40%{transform:translateY(-4px)}}.welcome-code{margin-top:18px;padding-top:14px;border-top:1px solid var(--stone)}.welcome-code-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.welcome-code-label{color:var(--muted);font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.welcome-code-value{font-family:Cormorant Garamond,Georgia,serif;font-size:1.45rem;font-weight:600;letter-spacing:.18em;color:var(--olive-d)}.welcome-code-hint{margin:6px 0 8px;color:var(--muted);font-size:.88rem;line-height:1.45}.code-quiet{margin-top:14px}.code-quiet-line{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}.code-quiet-line strong{letter-spacing:.12em;color:var(--olive-d);font-weight:600}.code-quiet-sep{opacity:.5}.code-quiet-link{border:none;background:none;padding:0;margin:0;color:var(--olive);font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6b7f5c59}.code-quiet-link:hover{color:var(--olive-d);text-decoration-color:var(--olive-d)}.code-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}.code-form input{flex:1;min-width:140px;max-width:220px;border:none;border-bottom:1.5px solid var(--taupe);background:transparent;color:var(--espresso);padding:10px 2px 8px;font-size:1.1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.code-form input:focus{outline:none;border-bottom-color:var(--olive)}.sync-note{margin:10px 0 0;color:var(--olive-d);font-size:.88rem}.footer-note{text-align:center;color:var(--muted);margin-top:28px;font-size:.88rem}@media(max-width:720px){.hero{grid-template-columns:1fr;padding:22px}.prompt-box{font-size:1.4rem;padding:20px;line-height:1.7}.key{min-width:28px;height:40px;font-size:.8rem}.key.space{min-width:160px}}