:root{--color-ink: #201b18;--color-paper: #f4ede2;--color-paper-strong: #efe3d2;--color-panel: rgba(252, 247, 239, .78);--color-panel-strong: rgba(255, 251, 245, .92);--color-line: rgba(56, 37, 20, .12);--color-line-strong: rgba(56, 37, 20, .24);--color-accent: #a64f2a;--color-accent-strong: #7f3418;--color-accent-soft: rgba(166, 79, 42, .12);--color-gold: #bea36a;--color-olive: #5f6654;--color-muted: #6f6258;--color-muted-soft: #8f8176;--color-on-accent: #fff8f3;--bg-body: radial-gradient(circle at top, rgba(255, 255, 255, .28), transparent 28%), linear-gradient(180deg, #f7f0e5 0%, #ebe0cf 42%, #e4d6c3 100%);--bg-surface: var(--color-panel);--bg-surface-hover: rgba(255, 248, 240, .96);--bg-card: var(--color-panel-strong);--bg-card-hover: rgba(255, 250, 244, .98);--bg-overlay: rgba(35, 23, 15, .42);--score-bg: #fffefb;--text-primary: var(--color-ink);--text-secondary: var(--color-muted);--text-muted: var(--color-muted-soft);--text-on-primary: var(--color-on-accent);--border-color: var(--color-line);--border-color-hover: var(--color-line-strong);--glow-color: rgba(166, 79, 42, .12);--header-glow: rgba(190, 163, 106, .35);--slider-track: rgba(127, 52, 24, .18);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4.5rem;--font-display: "Times New Roman", "Noto Serif TC", serif;--font-body: "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.375rem;--font-size-2xl: clamp(1.9rem, 2.8vw, 3rem);--font-size-3xl: clamp(3rem, 7vw, 5.75rem);--radius-sm: .45rem;--radius-md: .85rem;--radius-lg: 1.2rem;--radius-xl: 1.75rem;--radius-full: 9999px;--shadow-sm: 0 10px 24px rgba(62, 41, 23, .08);--shadow-md: 0 22px 48px rgba(62, 41, 23, .12);--shadow-lg: 0 36px 80px rgba(62, 41, 23, .16);--shadow-glow: 0 18px 40px rgba(166, 79, 42, .14);--transition-fast: .16s ease;--transition-normal: .24s ease;--transition-slow: .42s ease;--container-max-width: 1320px;--header-height: 5.5rem}[data-theme=dark]{--color-ink: #f6ecdf;--color-paper: #171411;--color-paper-strong: #211b17;--color-panel: rgba(30, 24, 20, .82);--color-panel-strong: rgba(35, 29, 24, .96);--color-line: rgba(255, 232, 204, .08);--color-line-strong: rgba(255, 232, 204, .18);--color-accent: #d07a46;--color-accent-strong: #f19b66;--color-accent-soft: rgba(240, 155, 102, .12);--color-gold: #c6ab6a;--color-olive: #9ba786;--color-muted: #cab9a6;--color-muted-soft: #9f8e7d;--color-on-accent: #1c130d;--bg-body: radial-gradient(circle at top, rgba(154, 108, 56, .16), transparent 28%), linear-gradient(180deg, #171411 0%, #14110f 36%, #100d0b 100%);--bg-surface: var(--color-panel);--bg-surface-hover: rgba(44, 36, 30, .98);--bg-card: var(--color-panel-strong);--bg-card-hover: rgba(50, 40, 34, .98);--bg-overlay: rgba(0, 0, 0, .45);--score-bg: #fffefb;--text-primary: var(--color-ink);--text-secondary: var(--color-muted);--text-muted: var(--color-muted-soft);--text-on-primary: #1f150e;--border-color: var(--color-line);--border-color-hover: var(--color-line-strong);--glow-color: rgba(208, 122, 70, .22);--header-glow: rgba(198, 171, 106, .26);--slider-track: rgba(240, 155, 102, .22);--shadow-sm: 0 10px 24px rgba(0, 0, 0, .28);--shadow-md: 0 24px 54px rgba(0, 0, 0, .34);--shadow-lg: 0 44px 100px rgba(0, 0, 0, .42);--shadow-glow: 0 24px 48px rgba(208, 122, 70, .16)}body,body *,body *:before,body *:after{transition:background-color var(--transition-normal),color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--font-size-base);color:var(--text-primary);background:var(--bg-body);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;opacity:.24;mix-blend-mode:soft-light}a{color:inherit;text-decoration:none}button{font:inherit;border:none;outline:none;cursor:pointer}#app{min-height:100vh;min-width:0}.app-shell{min-height:100vh;display:flex;flex-direction:column;min-width:0}#app-header{position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#1813102e;border-bottom:1px solid var(--border-color)}.header-inner,#breadcrumb,.app-layout-container,#app-footer{width:min(calc(100% - 2rem),var(--container-max-width));margin:0 auto}.header-inner{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:1rem 0}.brand-group{display:grid;gap:.2rem;max-width:42rem;min-width:0}.brand-kicker,.section-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}.site-title,.hero-title,.view-title,.panel-title{font-family:var(--font-display);font-weight:700;letter-spacing:.01em}.site-title{font-size:clamp(2rem,3vw,2.8rem);line-height:1}.site-title a:hover{text-shadow:0 0 16px var(--header-glow)}.site-subtitle{max-width:38rem;color:var(--text-secondary);font-size:var(--font-size-sm)}.header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}.header-cta-btn,.theme-toggle{min-height:2.8rem;padding:.7rem 1rem;border-radius:var(--radius-full);border:1px solid var(--border-color);background:var(--bg-surface);box-shadow:var(--shadow-sm)}.header-cta-btn{display:inline-flex;align-items:center;gap:.6rem}.header-cta-btn:hover,.theme-toggle:hover{transform:translateY(-1px);background:var(--bg-surface-hover);border-color:var(--border-color-hover)}.header-cta-label,.theme-toggle-text{font-size:var(--font-size-sm);font-weight:600}.header-cta-icon{color:var(--color-accent)}#breadcrumb{display:none;padding:1rem 0 0}#breadcrumb.visible{display:block}.breadcrumb-list{list-style:none;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;color:var(--text-muted);font-size:var(--font-size-sm)}.breadcrumb-list li:after{content:" / ";color:var(--color-gold);margin-left:.45rem}.breadcrumb-list li:last-child:after{display:none}.breadcrumb-list li:last-child{color:var(--text-primary)}.app-layout-container{flex:1;display:block;padding:1.25rem 0 3rem;min-width:0}#app-content{width:100%;min-width:0}.app-sidebar{display:none}.sidebar-content{padding:1rem;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.sidebar-title{padding:0 0 var(--space-md);margin-bottom:var(--space-sm);border-bottom:1px solid var(--border-color);font-size:var(--font-size-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.tree-root{display:grid;gap:.35rem}.tree-chapter-header{display:flex;align-items:center;gap:.5rem;padding:.8rem .9rem;border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary)}.tree-chapter-header:hover{background:var(--bg-surface-hover)}.tree-chapter-icon{transition:transform var(--transition-normal);color:var(--color-gold)}.tree-chapter.collapsed .tree-chapter-icon{transform:rotate(-90deg)}.tree-song-list{max-height:1000px;overflow:hidden;transition:max-height var(--transition-slow);padding-left:.65rem}.tree-chapter.collapsed .tree-song-list{max-height:0}.tree-song-item{display:block;padding:.65rem .9rem;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-size-sm)}.tree-song-item:hover,.tree-song-item.active{background:var(--color-accent-soft);color:var(--text-primary)}.hero-panel,.editorial-panel,.overview-panel,.player-hero,.card,.list-item,.player-controls,.tone-tabs,.score-display,.loading-indicator,.error-message,.empty-state,.intro-cta-wrapper{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hero-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);gap:var(--space-xl);padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--border-color);border-radius:min(2.2rem,6vw);background:linear-gradient(135deg,#fffcf8eb,#f8eee199),radial-gradient(circle at right top,rgba(190,163,106,.25),transparent 36%);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;align-items:start}[data-theme=dark] .hero-panel{background:linear-gradient(135deg,#241d18f2,#1b1714d6),radial-gradient(circle at right top,rgba(198,171,106,.16),transparent 36%)}.hero-panel:after{content:"";position:absolute;inset:auto -10% -32% auto;width:22rem;height:22rem;border-radius:50%;border:1px solid rgba(190,163,106,.24)}.hero-copy{position:relative;z-index:1;min-width:0;max-width:42rem}.hero-title{font-size:clamp(2.7rem,5vw,5rem);line-height:.98;max-width:8em;margin-top:.35rem;text-wrap:balance;word-break:keep-all;overflow-wrap:normal}.hero-description,.section-summary,.editorial-copy,.player-hero-note p{color:var(--text-secondary)}.hero-description{max-width:34rem;margin-top:1rem;font-size:1.04rem}.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.5rem}.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.9rem 1.35rem;border-radius:var(--radius-full);font-weight:600;border:1px solid transparent}.btn-primary{color:var(--text-on-primary);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--bg-surface);border-color:var(--border-color)}.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}.hero-aside{display:grid;gap:1rem;min-width:0;align-content:start}.hero-image-frame{position:relative;overflow:hidden;border-radius:2rem;border:1px solid var(--border-color);background:radial-gradient(circle at center,#fff9f2fa,#ece0d0e0);box-shadow:var(--shadow-md);aspect-ratio:1 / 1;min-height:22rem;display:flex;align-items:center;justify-content:center;padding:1rem}.hero-image{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 36px rgba(80,44,21,.18))}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;min-width:0}.stat-card,.mini-stat{padding:1rem;border-radius:var(--radius-lg);border:1px solid var(--border-color);background:var(--bg-card)}.stat-label,.mini-stat-label{display:block;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted)}.stat-value,.mini-stat-value{display:block;margin-top:.35rem;font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}.mini-stat-text{font-size:1.1rem;line-height:1.2}.editorial-panel,.overview-panel,.player-hero{margin-top:var(--space-xl);padding:clamp(1.35rem,3vw,2.3rem);border:1px solid var(--border-color);border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:var(--shadow-md)}.editorial-panel{display:grid;gap:1.4rem}.panel-title{margin-top:.25rem;font-size:clamp(1.7rem,3vw,2.6rem)}.editorial-copy{display:grid;gap:1rem;max-width:64rem}.editorial-copy strong{color:var(--color-accent)}.editorial-signoff{display:flex;align-items:center;gap:.75rem}.signoff-line{width:3.5rem;height:1px;background:var(--color-gold)}.author-name{font-family:var(--font-display);font-size:1.15rem}.view-section{margin-top:var(--space-xl)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}.view-title{font-size:var(--font-size-2xl);line-height:1}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.card{padding:1.3rem;border:1px solid var(--border-color);border-radius:var(--radius-xl);background:var(--bg-card);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;position:relative}.card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(166,79,42,.03));opacity:0;transition:opacity var(--transition-fast)}.card:hover{transform:translateY(-4px);border-color:var(--border-color-hover);background:var(--bg-card-hover);box-shadow:var(--shadow-glow)}.card:hover:after{opacity:1}.book-card{display:grid;grid-template-rows:auto auto 1fr auto;min-height:16rem}.book-card-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}.book-card-icon{font-size:1.6rem}.book-card-id{font-size:var(--font-size-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.card-title{font-family:var(--font-display);font-size:1.65rem;line-height:1.05}.card-subtitle{margin-top:.7rem;color:var(--text-secondary)}.book-card-footer{margin-top:1.4rem;display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-sm);color:var(--text-secondary)}.book-card-arrow{color:var(--color-accent);font-weight:700}.overview-panel,.player-hero{display:flex;align-items:end;justify-content:space-between;gap:var(--space-lg);min-width:0}.overview-stats{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.list-grid{display:grid;gap:.8rem;min-width:0}.chapter-grid,.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}.list-item{display:flex;align-items:center;gap:1rem;min-height:5.4rem;padding:1rem 1.15rem;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow-sm)}.list-item:hover{transform:translate(4px);border-color:var(--border-color-hover);background:var(--bg-card-hover)}.list-item-number{width:3rem;min-width:3rem;aspect-ratio:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color-accent-soft);color:var(--color-accent);font-family:var(--font-display);font-size:1.1rem}.list-item-body{display:grid;gap:.2rem;min-width:0;flex:1}.list-item-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.list-item-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.list-item-arrow{color:var(--color-gold);font-weight:700;font-size:1.1rem}.player-hero-note{max-width:20rem;padding:1rem 1.1rem;border-radius:var(--radius-lg);background:var(--color-accent-soft);border:1px solid var(--border-color);min-width:0}.player-note-label{display:block;margin-bottom:.35rem;font-size:var(--font-size-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}.player-container{display:grid;gap:1rem;margin-top:1rem;min-width:0}.tone-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:var(--shadow-sm)}.tone-tab{min-height:3.2rem;padding:.85rem 1rem;border-radius:var(--radius-md);color:var(--text-secondary);background:transparent}.tone-tab:hover,.tone-tab.active{color:var(--text-on-primary);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong))}.loading-indicator,.error-message,.empty-state{padding:1.4rem;border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid var(--border-color)}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:.8rem}.loading-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(166,79,42,.18);border-top-color:var(--color-accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.score-display{min-height:25rem;border-radius:var(--radius-xl);border:1px solid var(--border-color);background:linear-gradient(180deg,#ffffffad,#ffffffe0),var(--score-bg);box-shadow:var(--shadow-md);overflow:auto;min-width:0}.score-display>*{max-width:100%}.player-controls{display:grid;gap:1rem;padding:1rem;border-radius:var(--radius-xl);border:1px solid var(--border-color);background:var(--bg-surface);box-shadow:var(--shadow-sm);min-width:0}.controls-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;min-width:0}.control-btn{min-width:2.9rem;height:2.9rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);box-shadow:var(--shadow-sm)}.control-btn:hover,.control-btn.active{color:var(--text-on-primary);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong))}.control-btn.play-btn{min-width:3.5rem;height:3.5rem}.control-slider,.transpose-control{display:flex;align-items:center;gap:.8rem;width:100%;min-width:0;flex-wrap:wrap}.control-slider label,.transpose-control>label{min-width:3rem;color:var(--text-secondary);font-size:var(--font-size-sm)}.control-slider input[type=range]{flex:1;height:5px;appearance:none;background:var(--slider-track);border-radius:var(--radius-full)}.control-slider input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent)}.slider-value{min-width:3rem;text-align:right;font-size:var(--font-size-sm)}.transpose-direction{display:flex;gap:.75rem}.radio-label{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--font-size-sm)}.radio-label input[type=radio]{accent-color:var(--color-accent)}.transpose-control select{flex:1;min-width:0;min-height:2.7rem;padding:.7rem .9rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary)}.transpose-direction,.radio-label,.control-slider label,.transpose-control>label,.slider-value{flex-shrink:0}.transpose-control select:focus{outline:none;border-color:var(--color-accent)}.progress-bar-container{width:100%;height:8px;margin-top:.5rem;overflow:hidden;border-radius:var(--radius-full);background:#a64f2a1f}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--color-accent),var(--color-gold))}.progress-text{color:var(--text-secondary);font-size:var(--font-size-sm)}.empty-state{text-align:center;color:var(--text-secondary)}.empty-state-icon{font-size:2rem;margin-bottom:.5rem}#app-footer{padding:1.5rem 0 2.2rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:space-between;gap:1rem}.footer-meta{text-align:right}.at-cursor-bar{background:#a64f2a1f!important}.at-cursor-beat{background:#bea36a2e!important}@media(max-width:1100px){.hero-panel,.overview-panel,.player-hero{grid-template-columns:1fr;flex-direction:column;align-items:stretch}.card-grid,.chapter-grid,.song-grid{grid-template-columns:1fr 1fr}.hero-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:1280px){.hero-panel{grid-template-columns:minmax(0,1fr) minmax(16rem,.72fr)}.card-grid,.chapter-grid,.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stats{grid-template-columns:1fr}.player-hero-note{max-width:none}}@media(max-width:820px){.header-inner,#app-footer,.section-heading{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:space-between}.hero-panel,.hero-stats,.card-grid,.chapter-grid,.song-grid,.tone-tabs{grid-template-columns:1fr}.controls-row,.transpose-control{align-items:stretch}.control-slider,.transpose-control{flex-direction:column}.transpose-direction{width:100%;justify-content:space-between}.site-subtitle,.hero-description{font-size:var(--font-size-base)}.hero-title{font-size:clamp(2rem,12vw,3.2rem);line-height:1.02;max-width:none;letter-spacing:0;word-break:break-word;overflow-wrap:anywhere}.hero-copy{max-width:100%}.hero-panel{padding:1.25rem}.hero-image-frame{min-height:18rem;padding:.9rem}.hero-image{object-position:center top}.hero-actions{gap:.75rem}.overview-panel{margin-bottom:1rem}.chapter-grid,.song-grid{margin-top:0}.btn-primary,.btn-secondary{min-width:0;padding:.85rem 1.15rem}}@media(min-width:1024px){.app-layout-container{display:block}.app-layout-container:has(.app-sidebar.visible){display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1.25rem;align-items:start}.app-sidebar.visible{display:block;position:sticky;top:calc(var(--header-height) + 1rem);max-height:calc(100vh - var(--header-height) - 2rem);overflow-y:auto}}