:root{--bg-0: #0f141f;--bg-1: #151d2f;--bg-2: #1f2a3f;--surface: rgba(255, 255, 255, .08);--surface-strong: rgba(255, 255, 255, .14);--surface-border: rgba(255, 255, 255, .25);--text-main: #eff4ff;--text-subtle: rgba(239, 244, 255, .72);--accent: #72b6ff;--accent-strong: #3d95ff;--success: #67d9a2;--danger: #ff8b8b;--shadow-soft: 0 16px 32px rgba(4, 8, 15, .3);--shadow-hard: 0 24px 56px rgba(3, 7, 14, .5);--radius-xl: 28px;--radius-lg: 18px;--radius-md: 12px;--spacing-xl: 1.75rem;--spacing-lg: 1.2rem;--spacing-md: .85rem;--spacing-sm: .56rem;--dur-fast: .22s;--dur-mid: .42s;--dur-slow: .76s}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{color:var(--text-main);font-family:Avenir Next,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(160deg,var(--bg-0) 0%,var(--bg-1) 55%,var(--bg-2) 100%)}button{font:inherit}.app-shell{position:relative;min-height:100vh;padding:1.4rem 1rem 2.2rem;overflow-x:clip}.scene-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.orb{position:absolute;width:min(46vw,410px);aspect-ratio:1;border-radius:50%;opacity:.38;filter:blur(6px);will-change:transform}.orb-1{top:-12%;left:-8%;background:radial-gradient(circle,#72b6ff61,#72b6ff00 72%)}.orb-2{top:14%;right:-12%;background:radial-gradient(circle,#ffffff3d,#fff0 74%)}.orb-3{bottom:-18%;left:24%;background:radial-gradient(circle,#5c8fff4a,#5c8fff00 70%)}.grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(circle at center,black 25%,transparent 78%);mask-image:radial-gradient(circle at center,black 25%,transparent 78%)}.spot-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.13),transparent 42%)}.app-content{position:relative;z-index:2;margin:0 auto;max-width:1020px;display:grid;gap:var(--spacing-lg)}.hero-panel{border:1px solid var(--surface-border);background:linear-gradient(165deg,#ffffff1f,#ffffff08);border-radius:var(--radius-xl);padding:1.25rem 1.35rem;box-shadow:var(--shadow-hard);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-kicker{margin:0;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle)}.hero-panel h1{margin:.45rem 0 0;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.06}.hero-subtitle{margin:.58rem 0 0;color:var(--text-subtle)}.hero-meta{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}.hero-chip{border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:var(--text-main);padding:.38rem .7rem;font-size:.82rem}.mode-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.3rem;border-radius:999px;border:1px solid var(--surface-border);background:#ffffff17;overflow:clip}.tab-indicator{position:absolute;top:.3rem;width:calc(50% - .4rem);bottom:.3rem;border-radius:999px;background:#72b6ff38;pointer-events:none;z-index:0}.tab-btn{position:relative;z-index:1;border:0;border-radius:999px;background:transparent;color:var(--text-subtle);cursor:pointer;padding:.66rem .9rem;transition:color var(--dur-fast) ease}.tab-btn.active{color:var(--text-main);font-weight:600}.stats-ribbon{display:grid;gap:.58rem;grid-template-columns:repeat(4,minmax(0,1fr))}.stat-tile{border:1px solid var(--surface-border);background:var(--surface);border-radius:var(--radius-md);padding:.62rem .72rem;display:grid;gap:.22rem;min-height:68px}.stat-tile span{color:var(--text-subtle);font-size:.76rem}.stat-tile strong{font-size:1rem;letter-spacing:.01em}.streak-tile strong{color:#d6ecff}.stage-panel{position:relative;overflow:clip;border:1px solid var(--surface-border);background:linear-gradient(180deg,#ffffff21,#ffffff0d);border-radius:var(--radius-xl);padding:1.2rem;box-shadow:var(--shadow-hard);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;gap:var(--spacing-md)}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}.stage-label{color:var(--text-subtle);font-size:.9rem}.stage-tip{color:#eff4ff9e;font-size:.8rem}.text-btn{border:1px solid rgba(255,255,255,.26);border-radius:999px;background:#ffffff14;color:var(--text-main);padding:.33rem .7rem;cursor:pointer}.stage-word{margin:0;font-size:clamp(1.8rem,5.2vw,2.7rem);letter-spacing:.01em;text-wrap:balance}.stage-answer{margin:0;font-size:clamp(1.05rem,2.6vw,1.35rem);color:#d9ebff;transform-origin:top}.tilt-shell{will-change:transform;transform-style:preserve-3d}.flip-wrap{perspective:1200px}.flip-inner{position:relative;min-height:220px;transform-style:preserve-3d;will-change:transform}.flip-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.2);background:#ffffff14;display:grid;place-content:center;padding:.9rem;gap:.7rem;backface-visibility:hidden}.flip-back{transform:rotateY(180deg)}.face-kicker{margin:0;color:var(--text-subtle);letter-spacing:.08em;text-transform:uppercase;font-size:.77rem}.reduced-card{border:1px solid rgba(255,255,255,.2);background:#ffffff14;border-radius:var(--radius-lg);padding:.95rem;display:grid;gap:.55rem}.stage-actions,.stage-nav,.quiz-feedback{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.cta-btn,.ghost-btn{border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.24);cursor:pointer;padding:.62rem .92rem;color:var(--text-main);transition:transform var(--dur-fast) ease,background var(--dur-fast) ease}.cta-btn{background:linear-gradient(160deg,var(--accent),var(--accent-strong));border-color:#90c8fff2;color:#f7fbff}.cta-btn.success{background:linear-gradient(160deg,#53c692,#47b17f);border-color:#b2ffddeb}.cta-btn.danger{background:linear-gradient(160deg,#f98d8d,#f06c6c);border-color:#ffd8d8eb}.ghost-btn{background:#ffffff14}.cta-btn:hover,.ghost-btn:hover,.text-btn:hover,.tab-btn:hover,.quiz-option:hover{transform:translateY(-1px)}.quiz-options{display:grid;gap:.52rem}.quiz-content{display:grid;gap:var(--spacing-md)}.quiz-option{border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-md);background:#ffffff14;color:var(--text-main);text-align:left;padding:.7rem .85rem;cursor:pointer}.quiz-option:disabled{cursor:not-allowed}.quiz-option.selected{outline:1px solid rgba(255,255,255,.35);outline-offset:1px}.quiz-option.right{border-color:#67d9a2f2;background:#67d9a229}.quiz-option.wrong{border-color:#ff8b8bf2;background:#ff8b8b29}.quiz-feedback{border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-md);padding:.6rem .74rem;background:#ffffff14;align-items:center}.quiz-feedback p{margin:0;font-weight:600}.feedback-icon{width:26px;height:26px;border-radius:999px;display:grid;place-content:center;font-weight:700;font-size:.95rem}.feedback-icon.ok{background:#67d9a233;color:#9ef0c7}.feedback-icon.bad{background:#ff8b8b33;color:#ffc1c1}.quiz-feedback.ok{border-color:#67d9a2b3}.quiz-feedback.bad{border-color:#ff8b8bb3}.app-hint{margin:.25rem 0 0;text-align:center;color:var(--text-subtle);font-size:.84rem}.empty-state{border:1px solid var(--surface-border);background:var(--surface);border-radius:var(--radius-lg);padding:1rem}@media(max-width:860px){.stats-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.app-shell{padding:.88rem .72rem 1.45rem}.hero-panel,.stage-panel{border-radius:18px;padding:.92rem}.stats-ribbon{grid-template-columns:1fr 1fr}.stage-actions,.stage-nav,.quiz-feedback{display:grid;grid-template-columns:1fr}.cta-btn,.ghost-btn,.quiz-option,.tab-btn{width:100%}.tab-indicator{width:calc(50% - .4rem)}}@keyframes sheenMove{0%{transform:translate(-120%) rotate(8deg)}to{transform:translate(220%) rotate(8deg)}}@keyframes tilePulse{0%,to{box-shadow:0 0 #72b6ff1f}50%{box-shadow:0 0 0 8px #72b6ff05}}@keyframes shimmer{0%{opacity:.35}50%{opacity:.7}to{opacity:.35}}@keyframes successGlow{0%{box-shadow:0 0 #67d9a259}70%{box-shadow:0 0 0 14px #67d9a200}to{box-shadow:0 0 #67d9a200}}@keyframes failShake{0%{transform:translate(0)}20%{transform:translate(-6px)}45%{transform:translate(5px)}70%{transform:translate(-3px)}to{transform:translate(0)}}@keyframes optionPulse{0%{box-shadow:0 0 #67d9a273}75%{box-shadow:0 0 0 14px #67d9a200}to{box-shadow:0 0 #67d9a200}}@keyframes optionShake{0%{transform:translate(0)}22%{transform:translate(-5px)}45%{transform:translate(5px)}70%{transform:translate(-3px)}to{transform:translate(0)}}.stage-panel:after{content:"";position:absolute;inset:-40% auto -40% -35%;width:42%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.13) 50%,transparent 100%);pointer-events:none;animation:sheenMove 5.4s linear infinite;opacity:.6;will-change:transform}.stat-tile{animation:tilePulse 5.2s ease-in-out infinite}.hero-chip{animation:shimmer 4s ease-in-out infinite}.flashcard-stage.fx-known{animation:successGlow .36s ease-out}.flashcard-stage.fx-unknown{animation:failShake .32s ease}.quiz-option.pulse{animation:optionPulse .42s ease-out}.quiz-option.shake{animation:optionShake .3s ease}.motion-reduced .stage-panel:after,.motion-reduced .stat-tile,.motion-reduced .hero-chip,.motion-reduced .flashcard-stage.fx-known,.motion-reduced .flashcard-stage.fx-unknown,.motion-reduced .quiz-option.pulse,.motion-reduced .quiz-option.shake{animation:none!important}.motion-reduced .orb{filter:none;opacity:.22}@media(prefers-reduced-motion:reduce){.stage-panel:after,.stat-tile,.hero-chip,.flashcard-stage.fx-known,.flashcard-stage.fx-unknown,.quiz-option.pulse,.quiz-option.shake{animation:none!important}}