@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap";
.reading-page-container{background:var(--brand-bg-dark);min-height:100vh;color:var(--brand-text);font-family:var(--brand-font);scroll-behavior:smooth}.reading-nav{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#020617cc,#0000);justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:fixed;top:0;left:0;right:0}.back-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;transition:all .3s;display:flex}.back-btn:hover{background:#ffffff26;border-color:#ffffff4d}.nav-logo{letter-spacing:2px;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#ec4899,#f97316);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:800}.nav-spacer{width:120px}.reading-hero{justify-content:center;align-items:center;height:60vh;display:flex;position:relative;overflow:hidden}.reading-hero .hero-background{opacity:.8;background:linear-gradient(135deg,#4c1d95 0%,#831843 50%,#9a3412 100%);position:absolute;inset:0}.reading-hero .hero-background:before{content:"";background-image:radial-gradient(circle at 30% 40%,#ec48994d 0%,#0000 50%),radial-gradient(circle at 70% 70%,#f973164d 0%,#0000 50%);position:absolute;inset:0}.hero-overlay{z-index:1;background:#0000004d;position:absolute;inset:0}.hero-content{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:20px;animation:1s ease-out fadeInUp;display:flex;position:relative}.hero-logo-img{object-fit:cover;border:4px solid #ec489980;border-radius:50%;width:160px;height:160px;box-shadow:0 0 40px #ec48994d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-icon{color:#ec4899;filter:drop-shadow(0 0 20px #ec489980)}.reading-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#fff 0%,#fbbf24 100%);-webkit-background-clip:text;background-clip:text;margin:0;font-size:3.2rem;font-weight:900}.reading-tagline{color:#cbd5e1;margin:0;font-size:1.4rem}.reading-main-content{max-width:1200px;margin:0 auto;padding:60px 40px 100px}.section-header{text-align:center;margin-bottom:50px}.section-header h2{letter-spacing:-1px;margin-bottom:12px;font-size:2.5rem;font-weight:800}.decorative-line{background:linear-gradient(90deg,#ec4899,#f97316);border-radius:2px;width:60px;height:4px;margin:0 auto}.episodes-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:32px;display:grid}.episode-card{background:var(--brand-bg-card);-webkit-backdrop-filter:var(--brand-glass-blur);backdrop-filter:var(--brand-glass-blur);box-shadow:var(--brand-glass-shadow);cursor:pointer;border:1px solid #ffffff0d;border-radius:20px;transition:all .4s cubic-bezier(.16,1,.3,1);overflow:hidden}.episode-card:hover{background:var(--brand-bg-card-hover);border-color:#ec489966;transform:translateY(-6px);box-shadow:0 20px 40px -10px #00000080}.episode-card.playing{background:#ec489914;border-color:#ec4899}.episode-cover{aspect-ratio:16/9;background:#1e293b;width:100%;position:relative;overflow:hidden}.episode-cover img{object-fit:cover;width:100%;height:100%}.placeholder-cover{color:#475569;background:linear-gradient(135deg,#1e293b,#334155);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.episode-overlay{opacity:0;background:#0009;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.episode-card:hover .episode-overlay,.episode-card.playing .episode-overlay{opacity:1}.play-btn{cursor:pointer;color:#fff;background:0 0;border:none;transition:transform .2s}.play-btn:hover{transform:scale(1.1)}.episode-info{padding:24px}.episode-info h3{color:#fff;margin:0 0 12px;font-size:1.5rem;font-weight:700}.episode-description{color:#94a3b8;margin:0 0 16px;font-size:.95rem;line-height:1.6}.episode-meta{color:#64748b;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:.85rem;display:flex}.episode-duration,.episode-reading-time{align-items:center;gap:4px;display:flex}.episode-reading-time{color:#38bdf8}.episode-genre-tag{color:#ec4899;background:#ec48991a;border:1px solid #ec489933;border-radius:4px;padding:2px 8px;font-size:.75rem;font-weight:600}.episode-tags{font-size:.8rem}.read-text-btn{color:#ec4899;cursor:pointer;background:#ec48991a;border:1px solid #ec48994d;border-radius:12px;width:100%;padding:12px;font-weight:600;transition:all .3s}.read-text-btn:hover{background:#ec489933;border-color:#ec489980}.episode-actions{gap:12px;margin-top:8px;display:flex}.sns-gen-quick-btn-reading{color:#a855f7;cursor:pointer;background:#a855f71a;border:1px solid #a855f74d;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;font-weight:600;transition:all .3s;display:flex}.sns-gen-quick-btn-reading:hover{background:#a855f733;border-color:#a855f780;transform:translateY(-2px)}.video-link-btn{color:#ef4444;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;transition:all .3s;display:flex}.video-link-btn:hover{background:#ef444433;border-color:#ef4444;transform:scale(1.05)}.text-modal-overlay{z-index:3000;background:#000000d9;justify-content:center;align-items:center;padding:20px;animation:.4s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.text-modal-content{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);background:#0f172abf;border:1px solid #ffffff1a;border-radius:32px;flex-direction:column;width:100%;max-width:900px;max-height:90vh;animation:.4s cubic-bezier(.16,1,.3,1) zoomIn;display:flex;position:relative;overflow:hidden;box-shadow:0 40px 100px #000c,inset 0 0 40px #ec48991a}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-immersive-bg{filter:blur(80px)brightness(.4);opacity:.6;z-index:0;pointer-events:none;background-position:50%;background-size:cover;position:absolute;inset:0}.text-modal-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#0f172a99;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.header-left{align-items:center;gap:24px;display:flex}.text-modal-header h3{color:#fff;text-overflow:ellipsis;white-space:nowrap;max-width:300px;margin:0;font-size:1.25rem;font-weight:700;overflow:hidden}.text-modal-header button{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;padding:10px;transition:all .2s;display:flex}.text-modal-header button:hover{color:#fff;background:#ffffff26;transform:rotate(90deg)}.text-modal-body{z-index:5;scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;background:linear-gradient(#0000,#0f172a4d);flex:1;padding:60px 80px 100px;overflow-y:auto}.text-modal-body::-webkit-scrollbar{width:6px}.text-modal-body::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.reading-story-header{text-align:center;margin-bottom:80px;animation:.8s ease-out both fadeInUp}.story-meta-top{color:#ec4899;text-transform:uppercase;letter-spacing:2px;justify-content:center;gap:12px;margin-bottom:16px;font-size:.8rem;font-weight:700;display:flex}.story-title{letter-spacing:.02em;color:#fff;margin-bottom:24px;font-family:Noto Serif JP,serif;font-size:3.5rem;font-weight:900;line-height:1.4}.story-author-box{color:#94a3b8;justify-content:center;align-items:center;gap:8px;margin-bottom:40px;font-size:1rem;display:flex}.author-name,.narrator-name{color:#fff;font-weight:600}.story-divider{justify-content:center;align-items:center;gap:20px;margin-bottom:40px;display:flex}.story-divider .symbol{color:#ec489980;font-size:1.5rem}.story-intro-desc{color:#cbd5e1;background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;max-width:600px;margin:0 auto;padding:24px 32px;font-size:1.1rem;font-style:italic;line-height:1.8}.reading-text-content{letter-spacing:.05em;color:#e2e8f0;text-align:justify;max-width:65ch;margin:0 auto;font-family:Noto Serif JP,serif;font-size:1.25rem;line-height:2.2}.text-line{margin-bottom:2rem;animation:1s ease-out both fadeInUp}.text-line:nth-child(2n){animation-delay:.1s}.text-line:nth-child(3n){animation-delay:.2s}.story-end-mark{color:#fff3;justify-content:center;align-items:center;gap:20px;margin-top:100px;display:flex}.end-line{background:linear-gradient(90deg,#0000,currentColor);flex:1;max-width:100px;height:1px}.end-line:last-child{background:linear-gradient(270deg,#0000,currentColor)}.end-symbol{letter-spacing:4px;font-size:1.2rem;font-weight:800}.ruby-toggle-wrapper{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:10px;padding:6px 14px;display:flex}.ruby-toggle-label{color:#fffc;font-size:.85rem;font-weight:500}.ruby-toggle{width:36px;height:20px;display:inline-block;position:relative}.ruby-toggle input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#fff3;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;width:14px;height:14px;transition:all .3s;position:absolute;bottom:3px;left:3px;box-shadow:0 2px 4px #0003}input:checked+.slider{background-color:#ec4899}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.modal-video-link{color:#fff;background:#ef4444;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s;display:flex;box-shadow:0 4px 12px #ef44444d}.modal-video-link:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 6px 16px #ef444466}.nav-actions{align-items:center;gap:12px;display:flex}.bgm-toggle-nav-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:10px;padding:8px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.bgm-toggle-nav-btn:hover{background:#ffffff26;border-color:#ffffff4d}.bgm-toggle-nav-btn.active{color:#ec4899;background:#ec489933;border-color:#ec4899}.bgm-toggle-nav-btn.playing svg{animation:2s ease-in-out infinite musicPulse}@keyframes musicPulse{0%{transform:scale(1)}50%{transform:scale(1.2)rotate(15deg)}to{transform:scale(1)}}.bgm-toggle-nav-btn .btn-text{font-size:.9rem;font-weight:600}.bgm-flyout-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2500;background:#0f172ae6;border:1px solid #ffffff1a;border-radius:24px;width:320px;animation:.3s cubic-bezier(.16,1,.3,1) flyoutIn;position:fixed;top:80px;right:40px;overflow:hidden;box-shadow:0 20px 50px #00000080}@keyframes flyoutIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.flyout-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.flyout-header .header-title{color:#ec4899;align-items:center;gap:8px;font-weight:700;display:flex}.close-flyout-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:50%;padding:4px;transition:all .2s}.close-flyout-btn:hover{color:#fff;background:#ffffff1a}.flyout-controls{background:#ffffff05;padding:20px}.main-playback{align-items:center;gap:16px;margin-bottom:20px;display:flex}.playback-btn{color:#fff;cursor:pointer;background:#ec4899;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;box-shadow:0 4px 15px #ec48994d}.playback-btn:hover{background:#db2777;transform:scale(1.05)}.volume-control-wrapper{background:#ffffff0d;border-radius:12px;flex:1;align-items:center;gap:10px;padding:8px 12px;display:flex}.bgm-volume-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex:1;height:4px}.bgm-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px #00000080}.shuffle-btn{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.shuffle-btn.active{color:#38bdf8;background:#38bdf81a;border-color:#38bdf8}.current-track-info{flex-direction:column;gap:4px;display:flex}.current-track-info .label{color:#64748b;text-transform:uppercase;letter-spacing:1px;font-size:.7rem}.current-track-info .track-name{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600;overflow:hidden}.flyout-track-list{max-height:300px;padding:16px 20px;overflow-y:auto}.flyout-track-list h4{color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px;font-size:.8rem}.track-items{flex-direction:column;gap:8px;display:flex}.track-item-btn{color:#cbd5e1;cursor:pointer;text-align:left;background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:12px;padding:10px;transition:all .2s;display:flex;position:relative}.track-item-btn:hover{background:#ffffff14;border-color:#ffffff1a}.track-item-btn.active{color:#fff;background:#ec48991a;border-color:#ec48994d}.track-item-btn .item-dot{background:#475569;border-radius:50%;width:6px;height:6px}.track-item-btn.active .item-dot{background:#ec4899;box-shadow:0 0 10px #ec4899}.playing-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;width:12px;height:12px;position:absolute;right:12px}.empty-msg{color:#64748b;text-align:center;padding:20px;font-size:.85rem;font-style:italic}.reading-footer{text-align:center;color:#64748b;background:0 0;border-top:1px solid #ffffff0d;padding:60px 40px;font-size:.9rem}.bgm-artist{color:#94a3b8;font-size:.8rem}.bgm-bar-center{flex:1;justify-content:center;display:flex}.bgm-volume-control{background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:12px;padding:8px 20px;display:flex}.bgm-volume-control input[type=range]{appearance:none;background:#ffffff1a;border-radius:2px;width:120px;height:4px}.bgm-volume-control input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#ec4899;border-radius:50%;width:14px;height:14px;box-shadow:0 0 10px #ec489980}.volume-label{color:#94a3b8;font-variant-numeric:tabular-nums;min-width:35px;font-size:.8rem}.bgm-bar-right{flex:1;justify-content:flex-end;align-items:center;gap:16px;display:flex}.bgm-mode-btn{color:#64748b;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.bgm-mode-btn.active{color:#ec4899;background:#ec48991a;border-color:#ec489933}.bgm-action-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.bgm-action-btn:hover{background:#ffffff1a;transform:scale(1.05)}.bgm-list-trigger{color:#0f172a;cursor:pointer;background:#fff;border:none;border-radius:12px;padding:10px 20px;font-size:.85rem;font-weight:700;transition:all .2s}.bgm-list-trigger:hover{background:#f8fafc;transform:translateY(-2px);box-shadow:0 4px 12px #fff3}.bgm-modal-list{background:#1e293b;border:1px solid #ffffff1a;border-radius:24px;flex-direction:column;width:350px;animation:.4s cubic-bezier(.16,1,.3,1) listSlideUp;display:flex;position:absolute;bottom:95px;right:40px;overflow:hidden;box-shadow:0 20px 60px #0009}@keyframes listSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-list-header{background:#0003;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:20px;display:flex}.modal-list-header h3{color:#fff;margin:0;font-size:1rem}.close-list-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none}.modal-list-content{max-height:400px;padding:12px;overflow-y:auto}.modal-bgm-item{cursor:pointer;border:1px solid #0000;border-radius:16px;align-items:center;gap:16px;padding:12px;transition:all .2s;display:flex;position:relative}.modal-bgm-item:hover{background:#ffffff0d}.modal-bgm-item.active{background:#ec48991a;border-color:#ec48994d}.item-icon{color:#64748b;background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.modal-bgm-item.active .item-icon{color:#fff;background:#ec4899}.item-text{flex:1}.item-title{color:#fff;font-size:.9rem;font-weight:700}.item-artist{color:#64748b;font-size:.75rem}.now-playing-badge{color:#fff;text-transform:uppercase;background:#ec4899;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:800}.no-bgm-message{text-align:center;color:#64748b;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;display:flex}.no-bgm-message p{margin:0;font-size:.9rem}.reading-page-container{padding-bottom:80px}.reading-footer{text-align:center;border-top:1px solid #ffffff0d;padding:60px 0 80px}.reading-footer p{color:#475569;margin:4px 0}.powered-by{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#ec4899,#f97316);-webkit-background-clip:text;background-clip:text;font-weight:700;margin-top:12px!important}@media (max-width:768px){.reading-title{font-size:2.2rem}.episodes-grid{grid-template-columns:1fr;gap:24px}.reading-nav{padding:16px 20px}.text-modal-content{border-radius:0;max-width:100%;max-height:100vh}.text-modal-body{padding:40px 24px 80px}.story-title{font-size:2rem}.reading-text-content{font-size:1.1rem}.header-left .ruby-toggle-wrapper{display:none}}@media (max-width:480px){.reading-hero{height:50vh}.reading-main-content{padding:40px 16px 60px}.episode-info{padding:16px}.episode-info h3{font-size:1.2rem}}.illustrations-gallery{border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;margin:40px 0;padding:32px 0}.illustrations-gallery-header{align-items:center;gap:12px;margin-bottom:24px;display:flex}.gallery-label{color:#ffffffe6;letter-spacing:.05em;font-family:Noto Serif JP,serif;font-size:1.1rem;font-weight:700}.gallery-count{color:#fff6;font-size:.85rem;font-style:italic}.illustrations-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.illustration-figure{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;margin:0;transition:all .3s;overflow:hidden}.illustration-figure:hover{border-color:#ec48994d;transform:translateY(-2px);box-shadow:0 8px 32px #0000004d}.illustration-img{object-fit:contain;width:100%;transition:transform .4s;display:block}.illustration-figure:hover .illustration-img{transform:scale(1.03)}.illustration-caption{color:#fff9;text-align:center;border-top:1px solid #ffffff0d;padding:12px 16px;font-family:Noto Serif JP,serif;font-size:.85rem;line-height:1.6}.illustrations-gallery-grid:has(.illustration-figure:only-child){grid-template-columns:1fr;max-width:600px;margin:0 auto}@media (max-width:768px){.illustrations-gallery-grid{grid-template-columns:1fr}.illustrations-gallery{margin:24px 0;padding:24px 0}}.illustrations-ai-notice{text-align:right;color:#ffffff4d;margin:12px 0 0;font-size:.75rem;font-style:italic}