.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}:root{--color-bg: #FAF6F0;--color-bg-alt: #F0EBE3;--color-bg-subtle: #F5F0E8;--color-surface: #ffffff;--color-white: #ffffff;--color-text: #3D3229;--color-text-muted: #6E645B;--color-primary: #8B6B4A;--color-primary-hover: #6E5539;--color-secondary: #e07a5f;--color-accent: #4A7C30;--color-accent-hover: #3D6828;--color-accent-light: rgba(74, 124, 48, .15);--color-success: #27ae60;--color-error: #c0392b;--color-warning: #f39c12;--color-border: rgba(60, 42, 25, .12);--color-error-bg: #fef2f2;--color-overlay-light: rgba(60, 42, 25, .15);--color-overlay-medium: rgba(60, 42, 25, .25);--color-overlay-heavy: rgba(60, 42, 25, .5);--color-speaker-a-bg: #FFF8E7;--color-speaker-a-border: #E8D5A8;--color-speaker-b-bg: #F5F0E8;--color-speaker-b-border: #DDD5C8;--color-speaker-c-bg: #fff3e0;--color-speaker-c-border: #ffcc80;--color-speaker-d-bg: #F3E8F0;--color-speaker-d-border: #D4BFD0;--color-success-light: rgba(39, 174, 96, .1);--color-success-lighter: rgba(39, 174, 96, .05);--color-error-light: rgba(192, 57, 43, .1);--color-level-a1: #27ae60;--color-level-a2: #2ecc71;--color-level-b1: #3498db;--color-level-b2: #9b59b6;--color-level-c1: #e74c3c;--color-level-c2: #c0392b;--color-pos-noun: #4A7C30;--color-pos-verb: #3498db;--color-pos-adj: #9b59b6;--color-pos-adv: #e07a5f;--color-pos-default: #6E645B;--font-body: "Nunito", system-ui, -apple-system, "Hiragino Maru Gothic Pro", "Zen Maru Gothic", "Segoe UI", Roboto, sans-serif;--font-heading: "Nunito", system-ui, -apple-system, "Hiragino Maru Gothic Pro", "Zen Maru Gothic", "Segoe UI", Roboto, sans-serif;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--border-radius-xs: 2px;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 16px;--border-radius-pill: 9999px;--border-radius-circle: 50%;--max-width: 900px;--max-width-desktop: 1100px;--transition-fast: .15s ease;--transition-normal: .2s ease;--shadow-sm: 0 2px 8px rgba(60, 42, 25, .06);--shadow-md: 0 4px 12px rgba(60, 42, 25, .1);--shadow-lg: 0 4px 20px rgba(60, 42, 25, .15);--shadow-up: 0 -2px 10px rgba(60, 42, 25, .1);--shadow-modal: 0 8px 32px rgba(60, 42, 25, .2);--shadow-handle: 0 1px 3px rgba(60, 42, 25, .2);--shadow-mobile-nav: -4px 0 20px rgba(60, 42, 25, .1);--shadow-pop: 0 4px 16px rgba(60, 42, 25, .12);--shadow-card-mobile: 0 2px 12px rgba(60, 42, 25, .08);--border-radius: var(--border-radius-md)}@media(min-width:1024px){:root{--max-width: 1100px}}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;line-height:1.7;overflow-x:hidden}body{margin:0;font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}@media(max-width:600px){html{font-size:14px}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;color:var(--color-primary);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md);line-height:1.3}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}p{margin:var(--spacing-md) 0}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-secondary)}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-md)}main{flex:1;padding:var(--spacing-lg) 0}table{width:100%;border-collapse:collapse;margin:var(--spacing-md) 0}th,td{padding:var(--spacing-sm) var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border)}th{background-color:var(--color-bg-alt);font-weight:600;color:var(--color-primary)}tr:hover{background-color:var(--color-bg-alt)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mt-lg{margin-top:var(--spacing-lg)}.audio-btn,.word-btn,.char-btn,.check-btn,.reset-btn,.reset-quiz-btn,.nav-link{min-height:48px;min-width:48px}body.menu-open,body.modal-open{overflow:hidden}@media(max-width:600px){h1{font-size:1.75rem}h2{font-size:1.35rem}}@media(min-width:768px){.container{padding:0 var(--spacing-lg)}}.site-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0}.site-header .container{display:flex;justify-content:space-between;align-items:center}.logo{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--color-primary)}.logo:hover{color:var(--color-secondary)}.main-nav{display:flex;gap:var(--spacing-md)}.main-nav a{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);transition:background var(--transition-fast)}.main-nav a:hover{background:var(--color-bg-alt)}.mobile-menu-btn{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:8px;background:none;border:none;cursor:pointer;z-index:1001}.hamburger-line{display:block;width:24px;height:2px;background:var(--color-primary);border-radius:var(--border-radius-xs);transition:all var(--transition-fast)}.mobile-menu-btn.is-open .hamburger-line:nth-child(1){transform:rotate(45deg) translate(4px,4px)}.mobile-menu-btn.is-open .hamburger-line:nth-child(2){opacity:0}.mobile-menu-btn.is-open .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}.nav-overlay{display:none;position:fixed;inset:0;background:var(--color-overlay-medium);z-index:999}.nav-overlay.is-visible{display:block}@media(max-width:600px){.site-header .container{flex-direction:row;flex-wrap:nowrap}.mobile-menu-btn{display:flex}.main-nav{position:fixed;top:0;right:-100%;width:80%;max-width:300px;height:100vh;height:100dvh;background:var(--color-surface);flex-direction:column;padding:var(--spacing-xl) var(--spacing-lg);padding-top:calc(var(--spacing-xl) + 60px + env(safe-area-inset-top,0px));box-shadow:var(--shadow-mobile-nav);transition:right var(--transition-normal);z-index:1000;gap:var(--spacing-md)}.main-nav.is-open{right:0}.main-nav a{padding:var(--spacing-sm) 0;font-size:1.1rem;border-bottom:1px solid var(--color-border)}}.site-footer{background:var(--color-bg-alt);border-top:1px solid var(--color-border);padding:var(--spacing-lg) 0;margin-top:auto;text-align:center;color:var(--color-text-muted);font-size:.9rem}.breadcrumb{background:var(--color-bg-alt);padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border)}.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);font-size:.9rem}.breadcrumb li{display:flex;align-items:center}.breadcrumb li:not(:last-child):after{content:">";margin-left:var(--spacing-sm);color:var(--color-text-muted)}.breadcrumb a{color:var(--color-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);transition:background var(--transition-fast)}.breadcrumb a:hover{background:var(--color-surface);color:var(--color-secondary)}.breadcrumb span[aria-current=page]{color:var(--color-text-muted);padding:var(--spacing-xs) var(--spacing-sm)}.auth-menu{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:var(--spacing-md)}.auth-login-btn{background:var(--color-primary);color:var(--color-white);border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.9rem;transition:background var(--transition-fast)}.auth-login-btn:hover{background:var(--color-primary-hover)}.auth-user{display:flex;align-items:center;gap:var(--spacing-sm)}.auth-email{font-size:.85rem;color:var(--color-text-muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-logout-btn{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.85rem;transition:all var(--transition-fast)}.auth-logout-btn:hover{background:var(--color-bg-alt);color:var(--color-text)}.auth-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.auth-modal[hidden]{display:none}.auth-modal-backdrop{position:absolute;inset:0;background:var(--color-overlay-heavy)}.auth-modal-content{position:relative;background:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-lg);width:90%;max-width:400px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.auth-modal-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-text-muted);padding:var(--spacing-xs);line-height:1}.auth-modal-close:hover{color:var(--color-text)}.auth-modal-title{font-size:1.25rem;font-weight:600;margin:0 0 var(--spacing-md) 0;color:var(--color-text)}.auth-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.auth-form[hidden]{display:none}.auth-info{font-size:.9rem;color:var(--color-text-muted);margin:0;line-height:1.5}.auth-form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.auth-form-group label{font-size:.9rem;font-weight:500;color:var(--color-text)}.auth-form-group input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:1rem;transition:border-color var(--transition-fast)}.auth-form-group input:focus{outline:none;border-color:var(--color-primary)}.auth-otp-input{font-size:1.5rem;font-family:monospace;text-align:center;letter-spacing:.5em;padding:var(--spacing-sm) var(--spacing-md)}.auth-error{background:var(--color-error-bg);color:var(--color-error);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.9rem}.auth-error[hidden]{display:none}.auth-submit-btn{background:var(--color-primary);color:var(--color-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:1rem;cursor:pointer;transition:background var(--transition-fast);min-height:48px}.auth-submit-btn:hover:not(:disabled){background:var(--color-primary-hover)}.auth-submit-btn:disabled{opacity:.7;cursor:not-allowed}.auth-submit-btn .btn-loading[hidden],.auth-submit-btn .btn-text[hidden]{display:none}.auth-resend-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.auth-resend-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.85rem;padding:0;transition:opacity var(--transition-fast)}.auth-resend-btn:disabled{color:var(--color-text-muted);cursor:not-allowed;opacity:.6}.auth-resend-btn:hover:not(:disabled){text-decoration:underline}.auth-change-email-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:.85rem;padding:0}.auth-change-email-btn:hover{color:var(--color-text);text-decoration:underline}.auth-success{text-align:center;padding:var(--spacing-lg)}.auth-success .success-message{color:var(--color-success);font-size:1rem}@media(max-width:600px){.auth-menu{margin-left:0}.auth-email{max-width:100px}.auth-modal-content{width:95%;padding:var(--spacing-md)}.auth-menu{margin-left:0;margin-top:var(--spacing-md);flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.auth-email{max-width:none}.auth-user{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.auth-otp-input{font-size:1.25rem}.auth-resend-row{flex-direction:column;align-items:flex-start}}.lang-dropdown{position:relative;margin-left:var(--spacing-sm)}.lang-dropdown-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);cursor:pointer;color:var(--color-text-muted);transition:all var(--transition-fast)}.lang-dropdown-btn:hover{background:var(--color-bg-subtle);border-color:var(--color-primary);color:var(--color-primary)}.lang-dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);z-index:1000}.lang-dropdown-menu[hidden]{display:none}.lang-option{display:block;padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text);text-decoration:none;font-size:.9rem;transition:background var(--transition-fast)}.lang-option:hover{background:var(--color-bg-subtle)}.lang-option.is-active{color:var(--color-primary);font-weight:500}@media(max-width:600px){.lang-dropdown{margin-left:0;margin-top:var(--spacing-sm)}.lang-dropdown-menu{position:static;box-shadow:none;border:none;background:transparent}.lang-dropdown-menu[hidden]{display:none}.lang-option{padding:var(--spacing-xs) 0}}.lang-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center}.lang-modal[hidden]{display:none}.lang-modal-backdrop{position:absolute;inset:0;background:var(--color-overlay-heavy)}.lang-modal-content{position:relative;background:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-xl);width:90%;max-width:400px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-modal);text-align:center}.lang-modal-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:none;border:none;font-size:1.75rem;cursor:pointer;color:var(--color-text-muted);padding:var(--spacing-xs);line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);transition:all var(--transition-fast)}.lang-modal-close:hover{background:var(--color-bg-alt);color:var(--color-text)}.lang-modal-header{margin-bottom:var(--spacing-lg)}.lang-modal-header h2{margin:0 0 var(--spacing-sm);font-size:1.5rem}.lang-modal-header p{margin:0;color:var(--color-text-muted);font-size:1.1rem}.lang-modal-actions{margin-bottom:var(--spacing-lg)}.lang-btn-confirm{width:100%;padding:var(--spacing-md);font-size:1.1rem;min-height:56px}.lang-modal-divider{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);color:var(--color-text-muted);font-size:.9rem}.lang-modal-divider:before,.lang-modal-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.lang-modal-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.lang-modal .lang-option{display:flex;align-items:center;gap:var(--spacing-md);width:100%;padding:var(--spacing-md);background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast);text-align:left}.lang-modal .lang-option:hover{border-color:var(--color-primary);background:var(--color-surface)}.lang-option-name{font-size:1.1rem;font-weight:500;color:var(--color-text)}.lang-option-sub{font-size:.85rem;color:var(--color-text-muted);margin-left:auto}@media(max-width:600px){.lang-modal-content{width:95%;padding:var(--spacing-lg)}.lang-modal .lang-option{padding:var(--spacing-sm) var(--spacing-md)}}.paywall-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center}.paywall-modal[hidden]{display:none}.paywall-backdrop{position:absolute;inset:0;background:var(--color-overlay-heavy)}.paywall-content{position:relative;background:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-xl);width:90%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);text-align:center}.paywall-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-text-muted);padding:var(--spacing-xs);line-height:1}.paywall-close:hover{color:var(--color-text)}.paywall-title{font-size:1.5rem;font-weight:700;margin:0 0 var(--spacing-xs) 0;color:var(--color-text)}.paywall-subtitle{font-size:1rem;color:var(--color-text-muted);margin:0 0 var(--spacing-lg) 0}.paywall-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.paywall-plan{position:relative;border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-lg) var(--spacing-md);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.paywall-plan[data-plan=annual]{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.paywall-plan-badge{position:absolute;top:calc(-1 * var(--spacing-sm));background:var(--color-primary);color:var(--color-white);font-size:.75rem;font-weight:600;padding:2px var(--spacing-sm);border-radius:var(--border-radius-sm);text-transform:uppercase}.paywall-plan-name{font-size:1rem;font-weight:600;margin:0;color:var(--color-text)}.paywall-plan-price{display:flex;align-items:baseline;gap:2px}.paywall-plan-amount{font-size:1.75rem;font-weight:700;color:var(--color-text)}.paywall-plan-period{font-size:.9rem;color:var(--color-text-muted)}.paywall-plan-detail{font-size:.8rem;color:var(--color-text-muted);margin:0}.paywall-plan-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background:var(--color-surface);color:var(--color-text);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.paywall-plan-btn:hover:not(:disabled){background:var(--color-bg-alt)}.paywall-plan-btn-primary{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.paywall-plan-btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.paywall-plan-btn:disabled{opacity:.7;cursor:not-allowed}.paywall-footer{font-size:.85rem;color:var(--color-text-muted);margin:0}@media(max-width:600px){.paywall-plans{grid-template-columns:1fr}.paywall-content{padding:var(--spacing-lg) var(--spacing-md)}}.trial-banner{background:var(--color-accent-bg);border-bottom:1px solid var(--color-accent);padding:var(--spacing-sm) var(--spacing-md)}.trial-banner[hidden]{display:none}.trial-banner-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.trial-banner-text{font-size:.9rem;color:var(--color-text)}.trial-banner-cta{background:var(--color-primary);color:var(--color-white);border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.85rem;cursor:pointer;transition:background var(--transition-fast);white-space:nowrap}.trial-banner-cta:hover{background:var(--color-primary-hover)}.trial-banner-dismiss{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:1.2rem;padding:0 var(--spacing-xs);line-height:1}.trial-banner-dismiss:hover{color:var(--color-text)}.trial-banner-urgent{background:var(--color-warning-bg, #fff3cd);border-bottom-color:var(--color-warning, #ffc107)}.trial-banner-expired{background:var(--color-error-bg);border-bottom-color:var(--color-error)}@media(max-width:600px){.trial-banner-content{flex-direction:column;gap:var(--spacing-sm);text-align:center}}