*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;min-height:100vh;line-height:1.6;overflow-x:hidden}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}:root{--color-bg-primary:#f8fafc;--color-bg-secondary:#fff;--color-bg-tertiary:#f1f5f9;--color-bg-elevated:#fff;--color-bg-glass:#0000000a;--color-bg-glass-hover:#00000014;--color-bg-glass-active:#0000001f;--color-sakura:#ffb7c5;--color-sakura-deep:#ff6b95;--color-fuji:#7c73e6;--color-fuji-deep:#5a4fcf;--color-matcha:#68d391;--color-matcha-deep:#38a169;--color-sunset:#fbd38d;--color-sunset-deep:#d69e2e;--color-ocean:#63b3ed;--color-ocean-deep:#3182ce;--color-torii:#fc8181;--color-torii-deep:#e53e3e;--color-n5:#10b981;--color-n5-bg:#10b98126;--color-n4:#3b82f6;--color-n4-bg:#3b82f626;--color-n3:#f59e0b;--color-n3-bg:#f59e0b26;--color-n2:#f97316;--color-n2-bg:#f9731626;--color-n1:#ef4444;--color-n1-bg:#ef444426;--color-text-primary:#0f172a;--color-text-secondary:#475569;--color-text-muted:#64748b;--color-text-accent:#5a4fcf;--color-success:#48bb78;--color-success-bg:#48bb7826;--color-error:#fc8181;--color-error-bg:#fc818126;--color-warning:#f6e05e;--color-warning-bg:#f6e05e26;--color-info:#63b3ed;--color-info-bg:#63b3ed26;--color-border:#0000001a;--color-border-hover:#00000026;--color-border-active:#00000040;--color-border-accent:#7c73e666;--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-primary-hover:linear-gradient(135deg, #7b8ff0 0%, #8b5fbb 100%);--gradient-sakura:linear-gradient(135deg, #ffb7c5 0%, #ff6b95 100%);--gradient-matcha:linear-gradient(135deg, #68d391 0%, #38a169 100%);--gradient-fire:linear-gradient(135deg, #f97316 0%, #ef4444 100%);--gradient-ocean:linear-gradient(135deg, #63b3ed 0%, #3b82f6 100%);--gradient-sunset:linear-gradient(135deg, #fbd38d 0%, #f97316 100%);--gradient-dark:linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);--gradient-card:linear-gradient(135deg, #fff 0%, #f8fafc 100%);--gradient-glow:radial-gradient(ellipse at center, #7c73e61a 0%, transparent 70%);--font-primary:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-japanese:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;--font-display:"Outfit", "Inter", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--text-xs:clamp(.7rem, .65rem + .25vw, .75rem);--text-sm:clamp(.8rem, .75rem + .25vw, .875rem);--text-base:clamp(.875rem, .85rem + .25vw, 1rem);--text-lg:clamp(1rem, .95rem + .3vw, 1.125rem);--text-xl:clamp(1.125rem, 1.05rem + .4vw, 1.25rem);--text-2xl:clamp(1.25rem, 1.1rem + .6vw, 1.5rem);--text-3xl:clamp(1.5rem, 1.2rem + .8vw, 1.875rem);--text-4xl:clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem);--text-5xl:clamp(2.25rem, 1.8rem + 1.5vw, 3rem);--text-hero:clamp(2.5rem, 2rem + 3vw, 4.5rem);--text-kanji-lg:clamp(3rem, 2.5rem + 3vw, 5rem);--text-kanji-xl:clamp(5rem, 4rem + 5vw, 8rem);--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--shadow-xs:0 1px 3px #0000000d;--shadow-sm:0 4px 12px #7c73e614;--shadow-md:0 8px 24px #7c73e61f;--shadow-lg:0 16px 40px #7c73e629;--shadow-xl:0 24px 56px #7c73e633;--shadow-glow-sm:0 0 12px #7c73e633;--shadow-glow:0 0 24px #7c73e64d;--shadow-glow-lg:0 0 40px #7c73e666;--shadow-sakura:0 0 30px #ffb7c533;--shadow-success:0 0 20px #48bb784d;--shadow-error:0 0 20px #fc81814d;--ease-out:cubic-bezier(.4, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-bounce:cubic-bezier(.68, -.55, .265, 1.55);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--duration-slower:.6s;--z-base:1;--z-dropdown:100;--z-sticky:200;--z-navbar:500;--z-modal-backdrop:900;--z-modal:1000;--z-toast:1100;--z-tooltip:1200;--z-overlay:1500;--z-particle:2000;--sidebar-width:280px;--max-content-width:1200px;--max-lesson-width:720px}body{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-base);flex-direction:column;min-height:100dvh;display:flex}.jp,[lang=ja]{font-family:var(--font-japanese)}#bg-effects{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}#bg-gradient{background:radial-gradient(80% 60% at 50% -10%,#7c73e614 0%,#0000 60%),radial-gradient(60% 40% at 80% 80%,#ffb7c50a 0%,#0000 50%),radial-gradient(40% 50% at 10% 60%,#63b3ed0a 0%,#0000 50%);position:absolute;inset:0}#bg-particles{position:absolute;inset:0}.inline-icon{vertical-align:middle;width:1.2em;height:1.2em;margin-top:-.2em;display:inline-block}#bg-chars{position:absolute;inset:0}.floating-char{color:var(--color-text-primary);font-family:var(--font-japanese);pointer-events:none;opacity:.03;will-change:transform;animation:linear forwards floatUp;position:absolute;bottom:-30px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.04}90%{opacity:.04}to{opacity:0;transform:translateY(-110vh)rotate(360deg)}}#app{flex-direction:column;flex:1;min-height:100dvh;padding-bottom:120px;display:flex;position:relative}#page-container{flex:1;position:relative}#page-content{width:100%;min-height:100vh}.progress-bar{background:var(--color-bg-elevated);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:var(--color-fuji);border-radius:var(--radius-full);height:100%;transition:width .3s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ffffff1a}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{color:var(--color-text-primary);background:#7c73e64d}:focus-visible{outline:2px solid var(--color-fuji);outline-offset:2px;border-radius:var(--radius-sm)}.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}.container{width:100%;max-width:var(--max-content-width);padding:0 var(--space-6);margin:0 auto}.container-narrow{width:100%;max-width:var(--max-lesson-width);padding:0 var(--space-6);margin:0 auto}.text-gradient{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-gradient-sakura{background:var(--gradient-sakura);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-center{text-align:center}.text-muted{color:var(--color-text-secondary)}.text-sm{font-size:var(--text-sm)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.font-display{font-family:var(--font-display)}.font-japanese{font-family:var(--font-japanese)}.font-mono{font-family:var(--font-mono)}.font-medium{font-weight:var(--weight-medium)}.font-semibold{font-weight:var(--weight-semibold)}.font-bold{font-weight:var(--weight-bold)}.font-extrabold{font-weight:var(--weight-extrabold)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.floating-char{display:none}}.card{background:var(--gradient-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden}.card:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff08 0%,#0000 50%);position:absolute;inset:0}.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-sm);transform:translateY(-4px)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-glow);transform:translateY(-6px)}.card-interactive:active{transform:translateY(-2px)}.card-n5{border-color:#10b98133}.card-n5:hover{border-color:#10b98166;box-shadow:0 0 20px #10b98126}.card-n4{border-color:#3b82f633}.card-n4:hover{border-color:#3b82f666;box-shadow:0 0 20px #3b82f626}.card-n3{border-color:#f59e0b33}.card-n3:hover{border-color:#f59e0b66;box-shadow:0 0 20px #f59e0b26}.card-n2{border-color:#f9731633}.card-n2:hover{border-color:#f9731666;box-shadow:0 0 20px #f9731626}.card-n1{border-color:#ef444433}.card-n1:hover{border-color:#ef444466;box-shadow:0 0 20px #ef444426}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;transition:all var(--duration-normal) var(--ease-out);-webkit-user-select:none;user-select:none;letter-spacing:.02em;line-height:1;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";opacity:0;transition:opacity var(--duration-fast) var(--ease-out);pointer-events:none;background:linear-gradient(#ffffff26,#0000);position:absolute;inset:0}.btn:hover:after{opacity:1}.btn:active{transform:scale(.97)}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm), var(--shadow-glow-sm)}.btn-primary:hover{box-shadow:var(--shadow-md), var(--shadow-glow);transform:translateY(-2px)}.btn-secondary{background:var(--color-bg-glass);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg-glass-hover);border-color:var(--color-border-hover);transform:translateY(-2px)}.btn-success{background:var(--gradient-matcha);color:#fff;box-shadow:var(--shadow-sm), var(--shadow-success)}.btn-danger{background:var(--gradient-fire);color:#fff;box-shadow:var(--shadow-sm), var(--shadow-error)}.btn-ghost{color:var(--color-text-secondary);background:0 0}.btn-ghost:hover{background:var(--color-bg-glass);color:var(--color-text-primary)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}.btn-xl{padding:var(--space-5) var(--space-10);font-size:var(--text-lg)}.btn-icon{border-radius:var(--radius-md);width:40px;height:40px;font-size:var(--text-lg);padding:0}.btn-pulse{animation:2s infinite btnPulse}@keyframes btnPulse{0%,to{box-shadow:var(--shadow-sm), 0 0 0 0 #7c73e666}50%{box-shadow:var(--shadow-md), 0 0 0 12px #7c73e600}}.badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;display:inline-flex}.badge-n5{background:var(--color-n5-bg);color:var(--color-n5)}.badge-n4{background:var(--color-n4-bg);color:var(--color-n4)}.badge-n3{background:var(--color-n3-bg);color:var(--color-n3)}.badge-n2{background:var(--color-n2-bg);color:var(--color-n2)}.badge-n1{background:var(--color-n1-bg);color:var(--color-n1)}.badge-success{background:var(--color-success-bg);color:var(--color-success)}.badge-error{background:var(--color-error-bg);color:var(--color-error)}.badge-info{background:var(--color-info-bg);color:var(--color-info)}.avatar{border-radius:var(--radius-full);background:var(--gradient-primary);width:40px;height:40px;font-size:var(--text-lg);border:2px solid var(--color-border);flex-shrink:0;justify-content:center;align-items:center;display:flex}.avatar-sm{width:32px;height:32px;font-size:var(--text-base)}.avatar-lg{width:56px;height:56px;font-size:var(--text-2xl)}.avatar-xl{width:80px;height:80px;font-size:var(--text-4xl)}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-glass);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--duration-normal) var(--ease-out)}.input::placeholder{color:var(--color-text-muted)}.input:focus{border-color:var(--color-fuji);box-shadow:var(--shadow-glow-sm);background:var(--color-bg-glass-hover);outline:none}.input-lg{padding:var(--space-4) var(--space-5);font-size:var(--text-lg);border-radius:var(--radius-lg)}.input-search{padding-left:var(--space-12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:var(--space-4) center}.progress-bar{border-radius:var(--radius-full);background:#ffffff0f;width:100%;height:8px;position:relative;overflow:hidden}.progress-bar-fill{border-radius:var(--radius-full);background:var(--gradient-primary);height:100%;transition:width var(--duration-slow) var(--ease-out);position:relative}.progress-bar-fill:after{content:"";border-radius:inherit;background:linear-gradient(90deg,#0000,#ffffff4d);width:30px;position:absolute;top:0;bottom:0;right:0}.progress-bar-lg{height:12px}.progress-bar-sm{height:4px}#navbar{width:100%;height:0;z-index:var(--z-navbar);pointer-events:none;position:fixed;bottom:0;left:0}.radial-menu-container{z-index:var(--z-navbar);pointer-events:auto;position:fixed;bottom:2rem;right:2rem}.radial-menu-center{background:var(--gradient-primary);color:#fff;width:60px;height:60px;box-shadow:var(--shadow-md);cursor:pointer;z-index:10;transition:transform var(--ease-spring) .3s, box-shadow .3s;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:relative}.radial-menu-center:hover{box-shadow:var(--shadow-lg);transform:scale(1.05)}.radial-menu-center.active{transform:rotate(45deg)}.radial-menu-items{width:0;height:0;position:absolute;top:50%;left:50%}.radial-menu-item{background:var(--color-bg-elevated);border:1px solid var(--color-border);width:50px;height:50px;color:var(--color-text-secondary);box-shadow:var(--shadow-sm);opacity:0;z-index:5;border-radius:50%;justify-content:center;align-items:center;margin:-25px 0 0 -25px;font-size:1.25rem;text-decoration:none;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(0)scale(0)}.radial-menu-item:hover{color:var(--color-fuji);border-color:var(--color-fuji);z-index:50;transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) scale(1.15)!important}.radial-menu-item.active{color:#fff;background:var(--color-fuji);border-color:var(--color-fuji)}.radial-menu-container.open .radial-menu-item{--angle:calc(180deg + (var(--i) * 18deg));--radius:130px;opacity:1;transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) scale(1)}.radial-tooltip{background:var(--color-text-primary);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:opacity .2s,transform .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(-10px)}.radial-menu-item:hover .radial-tooltip{opacity:1;transform:translate(-50%)translateY(-5px)}.floating-stats{z-index:var(--z-navbar);pointer-events:auto;gap:.5rem;display:flex;position:fixed;top:1rem;left:1rem}.floating-stat{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border);border-radius:20px;align-items:center;gap:.25rem;padding:.25rem .75rem;font-size:.875rem;font-weight:700;display:flex}.floating-stat.streak{color:var(--color-torii)}.floating-stat.xp{color:var(--color-sunset-deep)}.floating-actions{z-index:var(--z-navbar);pointer-events:auto;gap:.5rem;display:flex;position:fixed;top:1rem;right:1rem}.floating-btn{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border);cursor:pointer;width:40px;height:40px;color:var(--color-text-primary);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:all .2s;display:flex}.floating-btn:hover{background:var(--color-bg-glass-hover);transform:scale(1.05)}@keyframes fireFlicker{0%,to{transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.2)}}.navbar-mobile-toggle{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:40px;height:40px;color:var(--color-text-primary);cursor:pointer;justify-content:center;align-items:center;display:none}@media (width<=768px){.navbar-mobile-toggle{display:flex}}.transform-style-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden}.rotate-y-180,.is-flipped{transform:rotateY(180deg)}.flashcard-menu-content{flex-direction:column;gap:1.25rem;max-width:800px;margin:0 auto;padding:0 1.5rem;display:flex}.fc-grid-5{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width>=640px){.fc-grid-5{grid-template-columns:repeat(5,1fr)}}.fc-grid-5 .btn{width:100%;padding:1rem 0;font-size:1.125rem}.fc-grid-2{grid-template-columns:1fr;gap:1.5rem;display:grid}@media (width>=640px){.fc-grid-2{grid-template-columns:repeat(2,1fr)}}.fc-grid-2 .cat-btn{text-align:center;width:100%;padding:1.5rem;transition:all .2s}.fc-grid-2 .cat-btn:hover{box-shadow:var(--shadow-md);transform:scale(1.05)}.fc-cat-selected{border:2px solid var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-light);transform:scale(1.02)}.fc-icon-box{border-radius:1rem;justify-content:center;align-items:center;width:4rem;height:4rem;margin:0 auto 1rem;display:flex}.fc-icon-box i{width:2rem;height:2rem}.fc-start-btn{align-items:center;padding:1rem 4rem;font-size:1.25rem;transition:transform .2s,box-shadow .2s;display:inline-flex}.fc-start-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #646cff66}.fc-preview-card{background:linear-gradient(135deg, var(--color-primary), var(--color-accent,#a855f7));color:#fff;border-radius:1.25rem;padding:1.5rem;transition:all .3s}.fc-preview-enter{animation:.3s ease-out fcPreviewSlideIn}@keyframes fcPreviewSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fc-preview-inner{align-items:center;gap:1.25rem;display:flex}.fc-preview-icon{background:#fff3;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;display:flex}.fc-preview-icon i{color:#fff;width:1.5rem;height:1.5rem}.fc-preview-info{flex:1}.fc-preview-title{letter-spacing:.02em;margin-bottom:.25rem;font-size:1.125rem;font-weight:700}.fc-preview-count{align-items:baseline;gap:.5rem;display:flex}.fc-preview-number{font-size:2rem;font-weight:800;line-height:1}.fc-preview-label{opacity:.85;font-size:.875rem}.fc-player-content{width:100%;max-width:600px;height:calc(100vh - var(--navbar-height));flex-direction:column;margin:0 auto;padding:2rem 1.5rem;display:flex}.fc-player-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.fc-player-body{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;display:flex}.fc-player-footer{justify-content:space-between;gap:1.5rem;width:100%;margin-top:2rem;padding-bottom:1rem;display:flex}.fc-nav-btn{box-shadow:var(--shadow-sm);border-radius:1rem;flex:1;justify-content:center;align-items:center;padding:1rem;font-size:1.125rem;transition:all .2s;display:flex}.fc-nav-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.fc-nav-next{box-shadow:0 4px 14px #646cff63}.fc-nav-next:hover{box-shadow:0 6px 20px #646cff66}.fc-card-container{perspective:1200px;width:100%;max-width:400px;height:450px;margin:0 auto}.fc-card-face{border:4px solid var(--color-surface);border-radius:1.5rem;flex-direction:column;justify-content:center;align-items:center;padding:2rem;transition:transform .2s;display:flex;box-shadow:0 10px 40px -10px #0000001a}.fc-card-face:hover{transform:scale(1.02)}.fc-hint-badge{background-color:var(--color-surface-hover);border-radius:9999px;align-items:center;margin-top:3rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.fc-icon-btn{transition:background-color .2s}.fc-icon-btn:hover{background-color:var(--color-surface-hover)}.fc-kanji-readings{text-align:center;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;margin-top:1.5rem;padding:0 1rem;display:grid}.fc-meaning-box{border-top:1px solid var(--color-border);text-align:center;width:100%;margin-top:1.5rem;padding-top:1rem;font-size:1.125rem;font-weight:700}#toast-container{top:calc(var(--navbar-height) + var(--space-4));right:var(--space-4);z-index:var(--z-toast);gap:var(--space-3);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-bg-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:all;min-width:300px;max-width:420px;animation:toastIn var(--duration-slow) var(--ease-spring);display:flex;position:relative;overflow:hidden}.toast-icon{flex-shrink:0;font-size:1.3rem}.toast-message{font-size:var(--text-sm);flex:1}.toast-close{color:var(--color-text-muted);font-size:var(--text-lg);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease-out)}.toast-close:hover{color:var(--color-text-primary)}.toast-progress{background:var(--gradient-primary);border-radius:0 0 var(--radius-lg) var(--radius-lg);height:3px;animation:linear forwards toastProgress;position:absolute;bottom:0;left:0}.toast-success{border-left:3px solid var(--color-success)}.toast-error{border-left:3px solid var(--color-error)}.toast-warning{border-left:3px solid var(--color-warning)}.toast-info{border-left:3px solid var(--color-info)}@keyframes toastIn{0%{opacity:0;transform:translate(100%)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}.toast-out{animation:toastOut var(--duration-normal) var(--ease-out) forwards}@keyframes toastOut{to{opacity:0;transform:translate(100%)scale(.9)}}@keyframes toastProgress{0%{width:100%}to{width:0%}}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-modal-backdrop);padding:var(--space-6);animation:fadeIn var(--duration-normal) var(--ease-out);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:480px;max-height:90vh;box-shadow:var(--shadow-xl);animation:modalIn var(--duration-slow) var(--ease-spring);position:relative;overflow-y:auto}.modal-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.modal-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold)}.modal-close{color:var(--color-text-muted);font-size:var(--text-xl);padding:var(--space-2);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out)}.modal-close:hover{background:var(--color-bg-glass);color:var(--color-text-primary)}.modal-body{color:var(--color-text-secondary);line-height:1.7}.modal-footer{gap:var(--space-3);margin-top:var(--space-6);justify-content:flex-end;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.xp-popup{z-index:var(--z-overlay);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-sunset);text-shadow:0 0 10px #fbd38d80;pointer-events:none;animation:xpFloat 1.5s var(--ease-out) forwards;position:fixed}@keyframes xpFloat{0%{opacity:1;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-40px)scale(1.2)}to{opacity:0;transform:translateY(-80px)scale(.8)}}#level-up-overlay{z-index:var(--z-overlay);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#level-up-overlay.active{animation:fadeIn var(--duration-slow) var(--ease-out);display:flex}.level-up-content{text-align:center;animation:levelUpIn .8s var(--ease-spring)}.level-up-number{font-family:var(--font-display);font-size:clamp(5rem,10vw,10rem);font-weight:var(--weight-black);background:var(--gradient-sunset);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;line-height:1}.level-up-label{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin-top:var(--space-4)}.level-up-title{font-family:var(--font-japanese);font-size:var(--text-xl);color:var(--color-text-secondary);margin-top:var(--space-2)}@keyframes levelUpIn{0%{opacity:0;transform:scale(.3)rotate(-10deg)}50%{transform:scale(1.1)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}#particle-container{pointer-events:none;z-index:var(--z-particle);position:fixed;inset:0}.particle{pointer-events:none;border-radius:2px;position:fixed}.screen-flash{z-index:var(--z-overlay);pointer-events:none;animation:screenFlash .4s var(--ease-out) forwards;position:fixed;inset:0}.screen-flash-success{background:radial-gradient(circle,#48bb7826 0%,#0000 70%)}.screen-flash-error{background:radial-gradient(circle,#fc818126 0%,#0000 70%)}@keyframes screenFlash{0%{opacity:0}30%{opacity:1}to{opacity:0}}.quiz-feedback-panel{max-width:var(--max-lesson-width,720px);background:var(--color-bg-elevated);border-top:2px solid var(--color-border);z-index:100;flex-direction:column;gap:1rem;width:100%;margin:0 auto;padding:1.5rem;animation:.3s ease-out slideUp;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 25px #0003}.quiz-feedback-panel.correct{background:linear-gradient(#48bb7826, #48bb7826), var(--color-bg-elevated);border-top-color:var(--color-success)}.quiz-feedback-panel.incorrect{background:linear-gradient(#fc818126, #fc818126), var(--color-bg-elevated);border-top-color:var(--color-error)}.quiz-feedback-header{justify-content:space-between;align-items:center;font-size:1.25rem;font-weight:700;display:flex}.quiz-feedback-panel.correct .quiz-feedback-header{color:var(--color-success)}.quiz-feedback-panel.incorrect .quiz-feedback-header{color:var(--color-error)}.quiz-feedback-content{color:var(--color-text-secondary);font-size:.95rem;line-height:1.4}.quiz-feedback-jp{color:var(--color-text-primary);margin-bottom:.25rem;font-size:1.1rem;font-weight:700}.quiz-feedback-reading{color:var(--color-muted);margin-bottom:.25rem;font-size:.85rem}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.prompt-with-ruby{cursor:help;display:inline-block;position:relative}.prompt-with-ruby:after{content:attr(data-ruby);background:var(--color-bg-elevated);color:var(--color-text-primary);opacity:0;pointer-events:none;white-space:nowrap;border:1px solid var(--color-border);letter-spacing:normal;border-radius:.5rem;padding:.25rem .75rem;font-family:Inter,sans-serif;font-size:1rem;font-weight:700;transition:opacity .2s,transform .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.prompt-with-ruby:hover:after{opacity:1;transform:translate(-50%)translateY(-5px)}.char-with-ruby{cursor:help;transition:color .2s;display:inline-block;position:relative}.char-with-ruby:hover{color:var(--color-fuji)}.char-with-ruby:after{content:attr(data-ruby);background:var(--color-bg-elevated);color:var(--color-text-primary);opacity:0;pointer-events:none;white-space:nowrap;border:1px solid var(--color-border);letter-spacing:normal;border-radius:.4rem;padding:.2rem .5rem;font-family:Inter,sans-serif;font-size:1rem;font-weight:700;transition:opacity .2s cubic-bezier(.175,.885,.32,1.275),transform .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;bottom:110%;left:50%;transform:translate(-50%)translateY(5px);box-shadow:0 4px 12px #00000026}.char-with-ruby:hover:after{opacity:1;transform:translate(-50%)translateY(0)}.page-enter{animation:pageEnter var(--duration-slow) var(--ease-out) forwards}.page-exit{animation:pageExit var(--duration-normal) var(--ease-out) forwards}@keyframes pageEnter{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes pageExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}.landing-page{min-height:100vh;padding-top:0}.hero{text-align:center;min-height:100dvh;padding:var(--space-8) var(--space-6);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-bg-orb{filter:blur(80px);opacity:.4;pointer-events:none;border-radius:50%;animation:8s ease-in-out infinite orbFloat;position:absolute}.hero-bg-orb-1{background:#7c73e626;width:400px;height:400px;animation-delay:0s;top:10%;left:20%}.hero-bg-orb-2{background:#ffb7c51f;width:300px;height:300px;animation-delay:-3s;top:50%;right:15%}.hero-bg-orb-3{background:#63b3ed1a;width:350px;height:350px;animation-delay:-5s;bottom:10%;left:40%}@keyframes orbFloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(20px,-30px)scale(1.05)}66%{transform:translate(-15px,20px)scale(.95)}}.hero-content{z-index:2;max-width:800px;position:relative}.hero-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-glass);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-8);animation:fadeInUp .8s var(--ease-out) both;display:inline-flex}.hero-badge-dot{background:var(--color-success);border-radius:50%;width:8px;height:8px;animation:2s infinite dotPulse}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.hero-title{font-family:var(--font-display);font-size:var(--text-hero);font-weight:var(--weight-black);letter-spacing:-.02em;margin-bottom:var(--space-6);animation:fadeInUp .8s var(--ease-out) .1s both;line-height:1.1}.hero-title-jp{font-family:var(--font-japanese);font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-sakura);margin-top:var(--space-3);opacity:.9;display:block}.hero-subtitle{font-size:var(--text-xl);color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--space-10);animation:fadeInUp .8s var(--ease-out) .2s both;line-height:1.7}.hero-actions{justify-content:center;align-items:center;gap:var(--space-4);animation:fadeInUp .8s var(--ease-out) .3s both;flex-wrap:wrap;display:flex}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.features-section{padding:var(--space-24) var(--space-6);position:relative}.features-section-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);text-align:center;margin-bottom:var(--space-4)}.features-section-subtitle{text-align:center;color:var(--color-text-secondary);font-size:var(--text-lg);max-width:600px;margin:0 auto var(--space-16)}.features-grid{gap:var(--space-6);max-width:var(--max-content-width);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 auto;display:grid}.feature-card{padding:var(--space-8);text-align:center;transition:all var(--duration-slow) var(--ease-out)}.feature-card-icon{margin-bottom:var(--space-5);transition:transform var(--duration-slow) var(--ease-spring);font-size:3rem;display:block}.feature-card:hover .feature-card-icon{transform:scale(1.15)translateY(-4px)}.feature-card-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-3)}.feature-card-desc{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.7}.jlpt-section{padding:var(--space-24) var(--space-6)}.jlpt-cards{gap:var(--space-4);max-width:var(--max-content-width);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 auto;display:grid}.jlpt-card{padding:var(--space-6);text-align:center;cursor:pointer}.jlpt-card-level{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-black);margin-bottom:var(--space-3);line-height:1}.jlpt-card-name{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--weight-medium);margin-bottom:var(--space-4)}.jlpt-card-stats{justify-content:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);display:flex}.stats-section{padding:var(--space-16) var(--space-6);text-align:center}.stats-grid{justify-content:center;gap:var(--space-12);max-width:var(--max-content-width);flex-wrap:wrap;margin:0 auto;display:flex}.stat-item{text-align:center}.stat-value{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--weight-black);margin-bottom:var(--space-2);line-height:1}.stat-label{font-size:var(--text-sm);color:var(--color-text-secondary)}.landing-footer{padding:var(--space-12) var(--space-6);border-top:1px solid var(--color-border);text-align:center}.landing-footer-text{color:var(--color-text-muted);font-size:var(--text-sm)}.landing-footer-links{justify-content:center;gap:var(--space-6);margin-top:var(--space-4);display:flex}.landing-footer-link{color:var(--color-text-secondary);font-size:var(--text-sm);transition:color var(--duration-fast) var(--ease-out)}.landing-footer-link:hover{color:var(--color-fuji)}.dashboard-page{padding:var(--space-8) var(--space-6);max-width:var(--max-content-width);margin:0 auto}.welcome-banner{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--gradient-primary);margin-bottom:var(--space-8);position:relative;overflow:hidden}.welcome-banner:before{content:"";pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='400' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='300' y='180' font-size='150' opacity='0.08' fill='white' font-family='sans-serif'%3E🎌%3C/text%3E%3C/svg%3E") 100%/contain no-repeat;position:absolute;inset:0}.welcome-banner-content{z-index:1;position:relative}.welcome-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);color:#fff;margin-bottom:var(--space-2)}.welcome-subtitle{color:#fffc;font-size:var(--text-base)}.welcome-stats{gap:var(--space-6);margin-top:var(--space-6);display:flex}.welcome-stat{align-items:center;gap:var(--space-2);color:#fff;font-weight:var(--weight-semibold);display:flex}.dashboard-grid{gap:var(--space-6);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.daily-goal{padding:var(--space-8);flex-direction:column;align-items:center;display:flex}.daily-goal-ring{width:140px;height:140px;margin-bottom:var(--space-4);position:relative}.daily-goal-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.daily-goal-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:8px}.daily-goal-ring-fill{fill:none;stroke:url(#goalGradient);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-out)}.daily-goal-ring-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.daily-goal-xp{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold)}.daily-goal-label{font-size:var(--text-xs);color:var(--color-text-secondary)}.daily-goal-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}.daily-goal-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary)}.level-cards{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.level-card{padding:var(--space-5);cursor:pointer}.level-card-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.level-card-level{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold)}.level-card-percent{font-size:var(--text-sm);font-weight:var(--weight-semibold)}.level-card-name{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3)}.quick-actions{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.quick-action{align-items:center;gap:var(--space-4);padding:var(--space-5);cursor:pointer;display:flex}.quick-action-icon{border-radius:var(--radius-md);background:var(--color-bg-glass);justify-content:center;align-items:center;width:48px;height:48px;font-size:1.8rem;display:flex}.quick-action-text{flex:1}.quick-action-title{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin-bottom:var(--space-1)}.quick-action-desc{font-size:var(--text-xs);color:var(--color-text-secondary)}.activity-chart{padding:var(--space-6)}.activity-chart-title{font-weight:var(--weight-semibold);margin-bottom:var(--space-5)}.activity-bars{align-items:flex-end;gap:var(--space-2);height:120px;display:flex}.activity-bar-col{align-items:center;gap:var(--space-2);flex-direction:column;flex:1;display:flex}.activity-bar{border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--gradient-primary);width:100%;max-width:32px;transition:height var(--duration-slow) var(--ease-out);opacity:.7;min-height:4px}.activity-bar.today{opacity:1;box-shadow:var(--shadow-glow-sm)}.activity-bar-label{font-size:var(--text-xs);color:var(--color-text-muted)}.level-map-page{padding:var(--space-8) var(--space-6);max-width:var(--max-lesson-width);margin:0 auto}.level-map-header{text-align:center;margin-bottom:var(--space-12)}.level-map-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}.level-map-subtitle{color:var(--color-text-secondary);font-size:var(--text-base)}.level-map-path{align-items:center;gap:var(--space-2);flex-direction:column;display:flex;position:relative}.lesson-node{align-items:center;gap:var(--space-4);width:100%;max-width:400px;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-glass);border:1px solid var(--color-border);transition:all var(--duration-normal) var(--ease-out);cursor:pointer;display:flex;position:relative}.lesson-node:hover:not(.lesson-node-locked){border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-sm);transform:translateY(-3px)}.lesson-node-locked{opacity:.4;cursor:not-allowed}.lesson-node-locked:hover{transform:none}.lesson-node-completed{background:#48bb780d;border-color:#48bb784d}.lesson-node-current{border-color:var(--color-border-accent);box-shadow:var(--shadow-glow-sm);animation:3s infinite currentPulse}@keyframes currentPulse{0%,to{box-shadow:var(--shadow-glow-sm)}50%{box-shadow:var(--shadow-glow)}}.lesson-node-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.lesson-node-info{flex:1;min-width:0}.lesson-node-title{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin-bottom:var(--space-1);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lesson-node-desc{font-size:var(--text-xs);color:var(--color-text-secondary)}.lesson-node-status{flex-shrink:0;font-size:1.2rem}.lesson-connector{background:linear-gradient(to bottom, var(--color-border), transparent);width:2px;height:24px}.lesson-connector-completed{background:linear-gradient(#48bb7866,#48bb781a)}.level-section-header{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0 var(--space-4);background:var(--color-bg-glass);border-radius:var(--radius-lg);width:100%;max-width:400px;display:flex}.level-section-icon{font-size:1.5rem}.level-section-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg)}.review-page{max-width:var(--max-content-width);padding:5rem var(--space-6) var(--space-6) var(--space-6);min-height:calc(100vh - var(--navbar-height));flex-direction:column;margin:0 auto;display:flex}.lesson-page{max-width:var(--max-lesson-width);padding:var(--space-6);flex-direction:column;min-height:100dvh;margin:0 auto;display:flex}.lesson-progress{margin-bottom:var(--space-8)}.lesson-progress-info{margin-bottom:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);justify-content:space-between;display:flex}.lesson-content{padding:var(--space-8) 0;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.lesson-item-kanji{font-family:var(--font-japanese);font-size:var(--text-kanji-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-4);animation:fadeInUp .5s var(--ease-out);line-height:1.2}.lesson-item-reading{font-family:var(--font-japanese);font-size:var(--text-2xl);color:var(--color-sakura);margin-bottom:var(--space-2);animation:fadeInUp .5s var(--ease-out) .1s both}.lesson-item-romaji{font-family:var(--font-mono);font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-6);animation:fadeInUp .5s var(--ease-out) .15s both}.lesson-item-meaning{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:var(--space-4);animation:fadeInUp .5s var(--ease-out) .2s both}.lesson-item-pos{padding:var(--space-1) var(--space-3);background:var(--color-bg-glass);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-6);animation:fadeInUp .5s var(--ease-out) .25s both;display:inline-flex}.lesson-item-example{background:var(--color-bg-glass);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);width:100%;max-width:500px;animation:fadeInUp .5s var(--ease-out) .3s both}.lesson-item-example-jp{font-family:var(--font-japanese);font-size:var(--text-lg);margin-bottom:var(--space-2)}.lesson-item-example-en{font-size:var(--text-sm);color:var(--color-text-secondary)}.lesson-nav{padding:var(--space-6) 0;border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-top:auto;display:flex}.quiz-page{max-width:var(--max-lesson-width);padding:5rem var(--space-6) var(--space-6) var(--space-6);min-height:calc(100vh - var(--navbar-height));flex-direction:column;margin:0 auto;display:flex}.quiz-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.quiz-hearts{gap:var(--space-1);font-size:1.3rem;display:flex}.quiz-heart-lost{opacity:.2;filter:grayscale()}.quiz-xp-display{align-items:center;gap:var(--space-2);font-weight:var(--weight-bold);color:var(--color-sunset);display:flex}.quiz-question{padding:var(--space-6) 0;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.quiz-question-text{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:var(--space-4);text-align:center}.quiz-question-prompt{font-family:var(--font-japanese);font-size:var(--text-kanji-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-8);animation:fadeInUp .4s var(--ease-out)}.quiz-options{gap:var(--space-3);grid-template-columns:1fr 1fr;width:100%;max-width:500px;display:grid}.quiz-option{padding:var(--space-4) var(--space-5);background:var(--color-bg-glass);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-base);text-align:center;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-japanese)}.quiz-option:hover{border-color:var(--color-border-hover);background:var(--color-bg-glass-hover);transform:translateY(-2px)}.quiz-option.selected{border-color:var(--color-fuji);background:#7c73e61a}.quiz-option.correct{border-color:var(--color-success);background:var(--color-success-bg);animation:correctBounce .5s var(--ease-spring)}.quiz-option.incorrect{border-color:var(--color-error);background:var(--color-error-bg);animation:shake .5s var(--ease-out)}@keyframes correctBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.quiz-fill-input{width:100%;max-width:400px;padding:var(--space-4);font-family:var(--font-japanese);font-size:var(--text-xl);text-align:center;background:var(--color-bg-glass);border:2px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:border-color var(--duration-fast) var(--ease-out)}.quiz-fill-input:focus{border-color:var(--color-fuji);outline:none}.quiz-fill-input.correct{border-color:var(--color-success)}.quiz-fill-input.incorrect{border-color:var(--color-error);animation:shake .5s var(--ease-out)}.quiz-footer{padding:var(--space-6) 0;justify-content:center;display:flex}.quiz-results{text-align:center;padding:var(--space-12)}.quiz-results-score{font-family:var(--font-display);font-size:var(--text-hero);font-weight:var(--weight-black);margin-bottom:var(--space-4);animation:fadeInUp .6s var(--ease-spring)}.quiz-results-label{font-size:var(--text-xl);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.quiz-results-stats{justify-content:center;gap:var(--space-8);margin-bottom:var(--space-8);display:flex}.quiz-results-stat{text-align:center}.quiz-results-stat-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold)}.quiz-results-stat-label{font-size:var(--text-sm);color:var(--color-text-secondary)}.quiz-results-xp{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);color:var(--color-sunset);margin-bottom:var(--space-8);animation:fadeInUp .6s var(--ease-spring) .2s both}.quiz-results-actions{justify-content:center;gap:var(--space-4);display:flex}.dictionary-page{max-width:var(--max-content-width);padding:var(--space-8) var(--space-6);margin:0 auto}.dictionary-header{text-align:center;margin-bottom:var(--space-8)}.dictionary-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);margin-bottom:var(--space-4)}.dictionary-search-wrap{max-width:600px;margin:0 auto var(--space-6)}.dictionary-filters{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.filter-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--color-bg-glass);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.filter-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary)}.filter-btn.active{border-color:var(--color-fuji);color:var(--color-fuji);background:#7c73e626}.dictionary-results{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.dict-entry{padding:var(--space-5);cursor:pointer}.dict-entry-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:flex-start;display:flex}.dict-entry-kanji{font-family:var(--font-japanese);font-size:var(--text-2xl);font-weight:var(--weight-bold)}.dict-entry-reading{font-family:var(--font-japanese);font-size:var(--text-sm);color:var(--color-sakura);margin-bottom:var(--space-2)}.dict-entry-meaning{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6}.leaderboard-page{max-width:var(--max-content-width);padding:var(--space-8) var(--space-6);margin:0 auto}.leaderboard-header{text-align:center;margin-bottom:var(--space-8)}.leaderboard-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}.leaderboard-subtitle{color:var(--color-text-secondary)}.league-tabs{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.league-tab{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--color-bg-glass);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);display:flex}.league-tab:hover{border-color:var(--color-border-hover)}.league-tab.active{border-color:var(--color-border-active);color:var(--color-text-primary);background:var(--color-bg-glass-active)}.podium{justify-content:center;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-10);padding:var(--space-4) 0;display:flex}.podium-place{text-align:center;animation:fadeInUp .6s var(--ease-spring) both}.podium-place:first-child{animation-delay:.2s}.podium-place:nth-child(2){animation-delay:0s}.podium-place:nth-child(3){animation-delay:.4s}.podium-avatar{margin-bottom:var(--space-3)}.podium-name{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin-bottom:var(--space-1);text-overflow:ellipsis;white-space:nowrap;max-width:100px;overflow:hidden}.podium-xp{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-sunset);margin-bottom:var(--space-3)}.podium-bar{border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100px;padding-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);justify-content:center;align-items:flex-start;display:flex}.podium-bar-1{color:#fff;background:linear-gradient(gold,#b8860b);height:120px}.podium-bar-2{color:#fff;background:linear-gradient(silver,gray);height:90px}.podium-bar-3{color:#fff;background:linear-gradient(#cd7f32,#8b4513);height:70px}.leaderboard-table{border-collapse:collapse;width:100%}.leaderboard-row{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);transition:background var(--duration-fast) var(--ease-out);border-bottom:1px solid var(--color-border);display:flex}.leaderboard-row:hover{background:var(--color-bg-glass)}.leaderboard-row.current-user{border:1px solid var(--color-border-accent);border-radius:var(--radius-md);background:#7c73e614;position:sticky;bottom:0}.leaderboard-rank{width:36px;font-family:var(--font-display);font-weight:var(--weight-bold);text-align:center;color:var(--color-text-secondary)}.leaderboard-rank-up{color:var(--color-success)}.leaderboard-rank-down{color:var(--color-error)}.leaderboard-user{align-items:center;gap:var(--space-3);flex:1;min-width:0;display:flex}.leaderboard-username{font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.leaderboard-user-level{font-size:var(--text-xs);color:var(--color-text-muted)}.leaderboard-xp{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--color-sunset);text-align:right;min-width:80px}.leaderboard-streak{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-secondary);min-width:60px;display:flex}.profile-page{max-width:var(--max-content-width);padding:var(--space-8) var(--space-6);margin:0 auto}.profile-header{text-align:center;margin-bottom:var(--space-10)}.profile-avatar-ring{width:100px;height:100px;margin:0 auto var(--space-4);position:relative}.profile-avatar-ring .avatar{width:100%;height:100%;font-size:3rem}.profile-avatar-level{background:var(--gradient-primary);color:#fff;border-radius:var(--radius-full);width:32px;height:32px;font-size:var(--text-xs);font-weight:var(--weight-bold);border:3px solid var(--color-bg-primary);justify-content:center;align-items:center;display:flex;position:absolute;bottom:-4px;right:-4px}.profile-name{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}.profile-title{font-family:var(--font-japanese);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.profile-stats{justify-content:center;gap:var(--space-8);flex-wrap:wrap;display:flex}.profile-stat{text-align:center}.profile-stat-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold)}.profile-stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-1)}.badges-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));display:grid}.badge-item{padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-bg-glass);border:1px solid var(--color-border);transition:all var(--duration-normal) var(--ease-out);text-align:center;flex-direction:column;align-items:center;display:flex}.badge-item.unlocked{border-color:#fbd38d4d}.badge-item.locked{opacity:.3;filter:grayscale()}.badge-item-icon{margin-bottom:var(--space-2);font-size:2rem}.badge-item-name{font-family:var(--font-japanese);font-size:var(--text-xs);font-weight:var(--weight-semibold);margin-bottom:var(--space-1)}.badge-item-desc{color:var(--color-text-muted);font-size:.65rem}.heatmap{padding:var(--space-4) 0;gap:3px;display:flex;overflow-x:auto}.heatmap-week{flex-direction:column;gap:3px;display:flex}.heatmap-day{width:14px;height:14px;transition:all var(--duration-fast) var(--ease-out);background:#ffffff0a;border-radius:3px}.heatmap-day.level-1{background:#7c73e633}.heatmap-day.level-2{background:#7c73e666}.heatmap-day.level-3{background:#7c73e699}.heatmap-day.level-4{background:#7c73e6cc}.heatmap-day:hover{outline:1px solid var(--color-fuji);transform:scale(1.3)}.review-page{max-width:var(--max-lesson-width);padding:5rem var(--space-6) var(--space-8) var(--space-6);margin:0 auto}.flashcard-container{perspective:1000px;width:100%;max-width:400px;height:380px;margin:0 auto}.flashcard{width:100%;height:100%;transition:transform .6s var(--ease-out);transform-style:preserve-3d;cursor:pointer;position:relative}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-face{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--gradient-card);border:1px solid var(--color-border);backface-visibility:hidden;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.flashcard-back{transform:rotateY(180deg)}.flashcard-kanji{font-family:var(--font-japanese);font-size:clamp(2.5rem,12vw,4.5rem);font-weight:var(--weight-bold);margin-bottom:var(--space-4);text-align:center;word-wrap:break-word;overflow-wrap:break-word;width:100%;line-height:1.2}.flashcard-reading{font-family:var(--font-japanese);font-size:var(--text-xl);color:var(--color-sakura)}.flashcard-meaning{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:var(--space-3);text-align:center;line-height:1.3}.flashcard-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.review-buttons{justify-content:center;gap:var(--space-3);margin-top:var(--space-8);display:flex}.kanji-detail-page{max-width:var(--max-content-width);padding:var(--space-8) var(--space-6);margin:0 auto}.kanji-display{text-align:center;margin-bottom:var(--space-10)}.kanji-character{font-family:var(--font-japanese);font-size:var(--text-kanji-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-4);line-height:1;display:inline-block;position:relative}.kanji-meanings{font-size:var(--text-xl);color:var(--color-text-secondary);margin-bottom:var(--space-3)}.kanji-info-grid{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.kanji-info-card{padding:var(--space-5)}.kanji-info-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2)}.kanji-info-value{font-size:var(--text-lg);font-weight:var(--weight-semibold)}.kanji-readings{gap:var(--space-2);flex-wrap:wrap;display:flex}.kanji-reading-tag{padding:var(--space-1) var(--space-3);background:var(--color-bg-glass);border-radius:var(--radius-full);font-family:var(--font-japanese);font-size:var(--text-sm)}.kanji-compounds{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.kanji-compound{padding:var(--space-3) var(--space-4);background:var(--color-bg-glass);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out)}.kanji-compound:hover{border-color:var(--color-border-hover)}.kanji-compound-word{font-family:var(--font-japanese);font-weight:var(--weight-semibold)}.kanji-compound-reading{font-family:var(--font-japanese);font-size:var(--text-xs);color:var(--color-sakura)}.kanji-compound-meaning{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-1)}.kanji-stroke-viewer{width:200px;height:200px;margin:0 auto var(--space-6);background:var(--color-bg-glass);border:1px solid var(--color-border);border-radius:var(--radius-lg);position:relative;overflow:hidden}.kanji-stroke-svg{width:100%;height:100%}.kanji-stroke-path{fill:none;stroke:var(--color-text-primary);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.kanji-stroke-animated{animation:.8s ease-in-out forwards drawStroke}@keyframes drawStroke{0%{stroke-dashoffset:var(--stroke-length,200)}to{stroke-dashoffset:0}}.stroke-controls{justify-content:center;gap:var(--space-2);margin-top:var(--space-4);display:flex}@media (width<=1024px){.features-grid{grid-template-columns:repeat(2,1fr)}.jlpt-cards{grid-template-columns:repeat(3,1fr)}.podium-bar{width:80px}}@media (width<=768px){.hero{padding:var(--space-4)}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn{width:100%}.features-grid{grid-template-columns:1fr}.jlpt-cards{grid-template-columns:repeat(2,1fr)}.stats-grid{gap:var(--space-6)}.welcome-stats{gap:var(--space-3);flex-wrap:wrap}.dashboard-grid{grid-template-columns:1fr}.level-cards{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:1fr}.lesson-node{max-width:100%}.lesson-node:nth-child(odd),.lesson-node:nth-child(2n){margin-left:0;margin-right:0}.quiz-options{grid-template-columns:1fr}.podium{gap:var(--space-2)}.podium-bar{width:70px}.leaderboard-streak{display:none}.dictionary-results{grid-template-columns:1fr}.badges-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}#toast-container{left:var(--space-4);right:var(--space-4)}.toast{min-width:auto;max-width:none}}@media (width<=480px){.jlpt-cards,.level-cards{grid-template-columns:1fr}.quiz-results-stats{gap:var(--space-4);flex-direction:column}.profile-stats{gap:var(--space-4)}.league-tabs{gap:var(--space-1)}.league-tab{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}}