:root{--background:#f6f0e4;--background-alt:#ede5d8;--foreground:#3d2b1f;--foreground-soft:#594335;--primary-color:#594335;--primary-hover:#4a3629;--primary-light:#59433514;--text-main:#3d2b1f;--text-color:#3d2b1f;--text-muted:#7a6a5f;--text-light:#a39387;--text-faint:#c5b8af;--accent-red:#c87686;--accent-red-hover:#b5606e;--accent-red-light:#c8768614;--accent-yellow:#b08a4a;--accent-yellow-light:#b08a4a1a;--accent-brown:#8d6e63;--accent-brown-light:#8d6e631f;--accent-blue:#2471a3;--accent-blue-light:#dbeafe;--accent-green:#1e8449;--accent-green-light:#d1fae5;--accent-sakura:#f2a7b7;--accent-sakura-light:#f2a7b726;--surface:#fff;--surface-raised:#fdfaf6;--surface-overlay:#fdfaf6f2;--card-bg:#ffffffb3;--card-bg-solid:#fdfaf6;--border-color:#dcd3c9;--border-strong:#c5b8af;--border-faint:#ede7e0;--shadow-xs:0 1px 2px #5943350f;--shadow-sm:0 1px 4px #59433514, 0 1px 2px #5943350a;--shadow-md:0 4px 12px #5943351a, 0 2px 4px #5943350f;--shadow-lg:0 8px 24px #5943351f, 0 4px 8px #59433514;--shadow-xl:0 16px 40px #59433524, 0 6px 12px #59433514;--shadow-inset:inset 0 1px 3px #59433514;--shadow-focus:0 0 0 3px #59433533;--shadow-focus-red:0 0 0 3px #c8768633;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--text-xs:.75rem;--text-sm:.85rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--transition-fast:all .15s ease;--transition-base:all .2s ease;--transition-slow:all .35s ease;--transition-spring:all .25s cubic-bezier(.34, 1.56, .64, 1);--z-base:1;--z-raised:10;--z-overlay:100;--z-modal:1000;--z-toast:9999;--nav-btn-bg:white;--nav-btn-border:#ccc;--nav-btn-text:#666;--tooltip-bg:#2c1f15;--tooltip-text:#fff;--tooltip-border:#4a3629;--tooltip-muted:#a39387;--audio-btn-bg:#fff;--audio-btn-accent:var(--accent-blue);--audio-btn-light:var(--accent-blue-light);--audio-timer-text:#1e8449;--font-main:var(--font-shippori), serif;--font-heading:var(--font-shippori), serif;--font-reading:var(--font-shippori), "Yu Mincho", "Hiragino Mincho ProN", serif;--story-page-max:1380px;--story-page-gutter:48px;--story-bg:var(--background);--story-surface:#ffffffc2;--story-surface-soft:#ffffffb3;--story-surface-strong:#fff;--story-paper:var(--surface-raised);--story-cover-bg:#eadfce;--story-ink:var(--text-main);--story-copy:var(--foreground-soft);--story-muted:var(--text-muted);--story-subtle:#8a7a70;--story-accent:var(--accent-red);--story-accent-soft:var(--accent-red-light);--story-accent-line:#c8768638;--story-accent-strong-line:#c8768659;--story-accent-saved:#fff5f8;--story-tag-bg:var(--accent-brown-light);--story-tag-text:#6b5548;--story-control-bg:#fff;--story-control-overlay:#ffffffeb;--story-control-text:#68584d;--story-line:var(--border-color);--story-line-faint:var(--border-faint);--story-line-strong:var(--border-strong);--story-cover-line:#48301e1f;--story-marker-bg:#59433514;--story-marker-line:#59433524;--story-shadow-xs:0 4px 14px #48301e0d;--story-shadow-sm:0 5px 16px #48301e0e;--story-shadow-md:0 6px 18px #48301e0f;--story-shadow-lg:0 8px 24px #48301e17;--story-radius-sm:6px;--story-radius-md:8px;--story-radius-lg:10px;--story-radius-pill:999px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--foreground);font-family:var(--font-main);letter-spacing:.04em;min-height:100vh;line-height:1.85;font-size:var(--text-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:-1;filter:blur(50px);background:radial-gradient(at 8% 15%,#c876860a 0%,#0000 38%),radial-gradient(at 92% 80%,#b08a4a0a 0%,#0000 38%),radial-gradient(at 55%,#59433506 0%,#0000 55%),radial-gradient(at 25% 85%,#f2a7b708 0%,#0000 35%);width:100%;height:100%;position:fixed;top:0;left:0}.container{max-width:1200px;margin:0 auto;padding:1rem}@media (min-width:768px){.container{padding:2rem}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:.08em;color:var(--text-main);font-weight:700;line-height:1.4}h1{font-size:var(--text-4xl);letter-spacing:.1em}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{color:var(--text-color);line-height:1.85}a{color:var(--primary-color);transition:var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-red)}:focus-visible{outline:2px solid var(--accent-red);outline-offset:2px;border-radius:var(--radius-xs)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:var(--shadow-focus-red);outline:none}.textbook-grid{grid-template-columns:repeat(1,1fr);gap:2rem;display:grid}@media (min-width:600px){.textbook-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:900px){.textbook-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1200px){.textbook-grid{grid-template-columns:repeat(4,1fr)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);border:2px solid var(--background)}::-webkit-scrollbar-thumb:hover{background:var(--text-light)}.hide-ruby rt{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s}.fade-in{animation:.5s ease-in fadeIn}.vertical-text{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.3em}rt{opacity:.9;font-size:.7em;font-weight:700}.child-level-btn:hover{background-color:var(--text-main)!important;color:#fff!important;border:1px solid var(--text-main)!important}.hover-tooltip{cursor:pointer;margin-bottom:1px;padding:0 0 1px;line-height:1.1;transition:all .2s;display:inline-block;position:relative}.hover-tooltip:hover{color:var(--accent-red)}.marked-word,.underline{border-bottom:2px dotted var(--accent-red);opacity:.9;cursor:pointer;padding-bottom:1px;transition:all .2s}.marked-word:hover{opacity:1;background-color:#c876860d;border-bottom-style:dotted}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-98%)scale(.99)}to{opacity:1;transform:translate(-50%,-100%)scale(1)}}@keyframes vocabFadeIn{0%{opacity:0;scale:.97}to{opacity:1;scale:1}}@keyframes vocabFadeOut{0%{opacity:1;scale:1}to{opacity:0;scale:.97}}.vocab-tooltip:before{content:"";z-index:-1;background:0 0;position:absolute;inset:-40px -30px}.hover-tooltip:after{content:attr(data-tooltip);background-color:var(--text-main);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:100;border-radius:4px;padding:4px 8px;font-size:.8rem;transition:opacity .2s;position:absolute;bottom:150%;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #0003}.is-story-layout .hover-tooltip:after{display:none!important}.hover-tooltip:hover:after{opacity:1}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-10px)rotate(5deg)}to{transform:translateY(0)rotate(0)}}.audio-phrase{transition:color .1s,background-color .1s}.active-audio-word{color:var(--accent-red);background-color:#c876860d;border-radius:4px;font-weight:700}.header{flex-wrap:wrap;align-items:center;gap:.75rem;min-height:2rem;margin-bottom:.15rem;display:flex}.title{font-family:var(--font-heading);color:var(--text-color);height:3.8rem;min-height:2.4rem;margin:0 0 .2rem;font-size:1.4rem;font-weight:700;line-height:1.3}.nav-link-btn{color:var(--text-light);box-shadow:none;cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:20px;align-items:center;gap:8px;padding:8px 12px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.nav-link-btn:hover{color:var(--accent-red);transform:translate(-4px)}.nav-link-btn.back-btn:before{content:"←";font-size:1.1em;transition:transform .2s}.nav-circle-btn{border:1px solid var(--border-color);background-color:var(--nav-btn-bg);width:44px;height:44px;color:var(--text-main);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:all .2s;display:inline-flex;box-shadow:0 2px 8px #0000000d}.nav-circle-btn:hover:not(.disabled){border-color:var(--accent-red);color:var(--accent-red);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.nav-circle-btn.disabled{opacity:.3;cursor:default}.shared-audio-btn{background-color:var(--audio-btn-bg);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:.85rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 2px 8px #0000000d}.shared-audio-btn:hover:not(:disabled){border-color:var(--audio-btn-accent);color:var(--accent-red);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.shared-toggle-btn{color:var(--text-main);cursor:pointer;text-align:center;white-space:nowrap;background:#8d6e631a;border:1px solid #0000;border-radius:20px;justify-content:center;align-items:center;min-width:120px;height:38px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.shared-toggle-btn:hover:not(.active){background:#8d6e6326}.shared-toggle-btn.active{background:var(--accent-brown);color:#fff}@media (max-width:767px){.shared-toggle-btn{min-width:90px;padding:6px 10px;font-size:.8rem}}.card{background:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.card-hover{background:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:var(--transition-base);cursor:pointer}.card-hover:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong);transform:translateY(-3px)}.card-elevated{background:var(--surface);border:1px solid var(--border-faint);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md)}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);font-family:var(--font-main);font-size:var(--text-sm);letter-spacing:.03em;cursor:pointer;transition:var(--transition-base);white-space:nowrap;border:none;padding:10px 22px;font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-xs), inset 0 1px 0 #ffffff1a}.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-md);color:#fff;transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:var(--shadow-xs);transform:translateY(0)}.btn-secondary{background:var(--surface);color:var(--primary-color);border:1.5px solid var(--border-color);box-shadow:var(--shadow-xs)}.btn-secondary:hover:not(:disabled){border-color:var(--primary-color);background:var(--primary-light);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-ghost{color:var(--text-muted);background:0 0;border:1px solid #0000}.btn-ghost:hover:not(:disabled){background:var(--primary-light);color:var(--primary-color)}.btn-danger{background:var(--accent-red);color:#fff;box-shadow:var(--shadow-xs)}.btn-danger:hover:not(:disabled){background:var(--accent-red-hover);box-shadow:var(--shadow-md);color:#fff;transform:translateY(-1px)}.btn-sm{font-size:var(--text-xs);border-radius:var(--radius-sm);padding:6px 14px}.btn-lg{font-size:var(--text-base);border-radius:var(--radius-lg);padding:14px 32px}.btn-icon{border-radius:var(--radius-md);width:38px;height:38px;padding:9px}.input{background:var(--surface);border:1.5px solid var(--border-color);border-radius:var(--radius-md);width:100%;font-family:var(--font-main);font-size:var(--text-base);color:var(--text-main);transition:var(--transition-fast);padding:10px 14px;line-height:1.5}.input::placeholder{color:var(--text-faint)}.input:hover{border-color:var(--border-strong)}.input:focus{border-color:var(--primary-color);box-shadow:var(--shadow-focus);background:var(--surface);outline:none}.input:disabled{background:var(--background-alt);color:var(--text-light);cursor:not-allowed}.label{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-2);letter-spacing:.03em;font-weight:600;display:block}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.04em;white-space:nowrap;align-items:center;padding:3px 10px;font-weight:700;display:inline-flex}.badge-primary{background:var(--primary-light);color:var(--primary-color);border:1px solid #59433526}.badge-red{background:var(--accent-red-light);color:var(--accent-red);border:1px solid #c8768626}.badge-gold{background:var(--accent-yellow-light);color:var(--accent-yellow);border:1px solid #b08a4a33}.badge-green{background:var(--accent-green-light);color:var(--accent-green);border:1px solid #1e844933}.badge-sakura{background:var(--accent-sakura-light);color:#9b3563;border:1px solid #f2a7b74d}.divider{border:none;border-top:1px solid var(--border-color);margin:var(--space-6) 0}.divider-ornament{align-items:center;gap:var(--space-3);margin:var(--space-8) 0;color:var(--text-faint);font-size:var(--text-sm);display:flex}.divider-ornament:before,.divider-ornament:after{content:"";border-top:1px solid var(--border-color);flex:1}.section-heading{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--text-main);letter-spacing:.1em;margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-color);font-weight:700;position:relative}.section-heading:after{content:"";background:var(--accent-red);border-radius:var(--radius-full);width:48px;height:2px;position:absolute;bottom:-2px;left:0}.empty-state{padding:var(--space-16) var(--space-6);text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-4);opacity:.6;font-size:2.5rem}.empty-state-title{font-size:var(--text-base);color:var(--text-muted);margin-bottom:var(--space-2);font-weight:600}.empty-state-body{font-size:var(--text-sm);color:var(--text-light);line-height:1.7}.alert{gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.65;display:flex}.alert-warning{color:#92400e;background:#fffbea;border:1px solid #fcd34d}.alert-error{color:var(--accent-red);background:#fff1f2;border:1px solid #c8768640}.alert-info{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe}.alert-success{background:var(--accent-green-light);color:var(--accent-green);border:1px solid #1e844933}.skeleton{background:linear-gradient(90deg, var(--border-faint) 25%, var(--border-color) 50%, var(--border-faint) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite skeleton-shimmer}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.anim-fade-in-up{animation:.4s ease-out forwards fadeInUp}.anim-fade-in-down{animation:.35s ease-out forwards fadeInDown}.anim-fade-in-scale{animation:.3s ease-out forwards fadeInScale}.text-muted{color:var(--text-muted)}.text-light{color:var(--text-light)}.text-red{color:var(--accent-red)}.text-gold{color:var(--accent-yellow)}.text-primary{color:var(--primary-color)}.font-heading{font-family:var(--font-heading)}.font-reading{font-family:var(--font-reading)}.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}.modal-overlay{-webkit-backdrop-filter:blur(3px);z-index:var(--z-modal);padding:var(--space-5);background:#1e0f088c;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--surface-raised);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-xl);width:100%;max-width:540px;animation:.25s ease-out fadeInScale}@media (max-width:600px){.hide-mobile{display:none!important}.card,.card-hover,.card-elevated{padding:var(--space-4)}.modal-content{padding:var(--space-6)}}@media (min-width:601px){.hide-desktop{display:none!important}}