*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0B0B0F;--gold: #E8A838;--gold-dim: rgba(232,168,56,.15);--gold-border: rgba(232,168,56,.25);--cyan: #06B6D4;--cyan-dim: rgba(6,182,212,.12);--success: #10B981;--error: #EF4444;--orange: #F97316;--text: #E5E2ED;--text-sub: rgba(229,226,237,.55);--text-muted: rgba(229,226,237,.25);--card-bg: rgba(255,255,255,.028);--card-border: rgba(255,255,255,.07);--card-hover: rgba(255,255,255,.055);--radius: 14px;--radius-sm: 10px;--font-scale: 1}html[data-text-size=small]{--font-scale: .9}html[data-text-size=default]{--font-scale: 1}html[data-text-size=large]{--font-scale: 1.15}html[data-text-size=xlarge]{--font-scale: 1.35}html[data-contrast=high]{--text: #FFFFFF;--text-sub: rgba(255,255,255,.85);--text-muted: rgba(255,255,255,.6);--card-bg: rgba(255,255,255,.06);--card-border: rgba(255,255,255,.22);--card-hover: rgba(255,255,255,.12);--gold-border: rgba(232,168,56,.6)}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Instrument Sans,DM Sans,system-ui,sans-serif;font-size:calc(15px * var(--font-scale));-webkit-font-smoothing:antialiased;overflow:hidden}#root{height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg)}.phone-shell{width:100%;max-width:420px;height:100%;max-height:900px;position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}@media (max-width: 420px){.phone-shell{max-height:none}}.ambient-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(80px);opacity:.07}.glow-gold{width:300px;height:300px;background:var(--gold);top:-60px;left:50%;transform:translate(-50%)}.glow-cyan{width:200px;height:200px;background:var(--cyan);bottom:80px;right:-40px}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;z-index:1}.screen::-webkit-scrollbar{display:none}.screen-enter{animation:slideUp .32s cubic-bezier(.22,1,.36,1) both}.screen-exit{animation:slideDown .22s ease-in both}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.playfair{font-family:Playfair Display,Georgia,serif}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:Instrument Sans,sans-serif;font-size:15px;font-weight:600;transition:transform .12s ease,filter .12s ease,background .15s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.96)}.btn-gold{background:var(--gold);color:#0b0b0f}.btn-gold:hover{filter:brightness(1.1)}.btn-ghost{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text)}.btn-ghost:hover{background:var(--card-hover)}.btn-danger{background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:var(--error)}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);transition:background .15s,border-color .15s}.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.input{width:100%;padding:14px 16px;background:#ffffff0d;border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--text);font-family:Instrument Sans,sans-serif;font-size:15px;outline:none;transition:border-color .15s}.input:focus{border-color:var(--gold)}.input::placeholder{color:var(--text-muted)}.progress-bar{height:3px;background:#ffffff14;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .4s cubic-bezier(.22,1,.36,1)}@keyframes xpPop{0%{transform:scale(.6) translateY(0);opacity:1}70%{transform:scale(1.1) translateY(-18px);opacity:1}to{transform:scale(1) translateY(-28px);opacity:0}}.xp-pop{position:fixed;pointer-events:none;color:var(--gold);font-weight:700;font-size:18px;animation:xpPop .9s ease forwards;z-index:999}@keyframes revealSlide{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.reveal-panel{animation:revealSlide .28s cubic-bezier(.22,1,.36,1) both}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .35s ease}@keyframes correctPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}.correct-pulse{animation:correctPulse .25s ease}.bubble-host{background:#ffffff12;border:1px solid rgba(255,255,255,.1);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:14px;max-width:85%;align-self:flex-start}.bubble-user{background:var(--gold-dim);border:1px solid var(--gold-border);border-radius:18px 18px 4px;padding:12px 16px;font-size:14px;max-width:85%;align-self:flex-end;color:var(--gold);font-weight:500}@keyframes waveBar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.wave-bar{width:3px;background:var(--gold);border-radius:2px;animation:waveBar .8s ease-in-out infinite}@keyframes ringFill{0%{stroke-dashoffset:251}}@keyframes comboFlash{0%{transform:scale(1.4);opacity:1}to{transform:scale(1);opacity:1}}.combo-flash{animation:comboFlash .2s ease}.toggle-track{width:40px;height:22px;background:#ffffff1a;border-radius:11px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}.toggle-track.on{background:var(--gold)}.toggle-thumb{position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s cubic-bezier(.22,1,.36,1);box-shadow:0 1px 3px #0000004d}.toggle-track.on .toggle-thumb{transform:translate(18px)}.scroll-content{padding:24px;flex:1;display:flex;flex-direction:column;gap:0}.divider{height:1px;background:var(--card-border);margin:20px 0}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:9999}.loading-screen .logo{font-family:Playfair Display,Georgia,serif;font-size:48px;font-weight:900;color:var(--gold);letter-spacing:-1px}.loading-screen .tag{font-size:11px;color:var(--text-muted);letter-spacing:.18em;margin-top:6px;text-transform:uppercase}.loading-screen .spinner{margin-top:22px;width:24px;height:24px;border:2px solid rgba(232,168,56,.18);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}