:root{--aqua:#017b52;--aqua-dark:#017b52;--ink:#193d31;--muted:#758882;--line:#e6ecea;--bg:#f7faf9;--pale:#eafaf5;--sidebar:242px}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg)}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--aqua-dark);outline-offset:4px}svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}span[data-icon]{display:inline-flex;flex-shrink:0} [hidden]{display:none!important}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#fff;border-right:1px solid var(--line);padding:33px 22px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:750;letter-spacing:.03em}.brand small{display:block;font-size:9px;letter-spacing:.2em;color:#849590;margin-top:1px;font-weight:600}.brand-icon{width:43px;height:43px;border-radius:13px;background:var(--aqua);display:inline-flex!important;align-items:center;justify-content:center;color:#0b3d2c}.brand-icon svg{width:25px;height:25px}.nav-label{font-size:11px;letter-spacing:.11em;color:#8e9d98;margin:51px 13px 14px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border-radius:10px;font-size:14px;text-align:left;margin:5px 0;color:#76888a}.nav-item.active{background:var(--pale);color:#0f6a4c;font-weight:650}.nav-count{margin-left:auto;font-size:11px;background:#eef3f1;border-radius:6px;padding:0 7px;line-height:22px}.active .nav-count{background:#d1f0e6;color:#117252}.sidebar-bottom{margin-top:auto;padding:22px 12px 8px}.mini-mark{color:var(--aqua-dark)}.sidebar-bottom p{font-size:18px;font-weight:650;line-height:1.7}.small-muted{font-size:10px;color:#92a29d}.main-shell{margin-left:var(--sidebar)}.topbar{height:78px;border-bottom:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 48px;font-size:12px;color:#899a94}.breadcrumb span{padding:0 17px;color:#bfcac6}.breadcrumb strong{font-weight:500;color:#4b675e}.header-note{display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--aqua)}.mobile-brand{display:none}main{max-width:1450px;margin:auto;padding:39px 48px 24px}.hero{padding:29px 35px 25px;background:linear-gradient(115deg,#e3f9f2,#edf9f4 75%,#e7f5ef);border:1px solid #d9ede6;border-radius:18px;position:relative;overflow:hidden}.eyebrow{font-size:11px;color:#4a8672;letter-spacing:.16em;display:flex;align-items:center;gap:7px}.eyebrow span{width:5px;height:5px;background:var(--aqua-dark);border-radius:50%}h1{font-size:42px;letter-spacing:.015em;line-height:1.4;margin:13px 0 7px;font-weight:740}h1 span{color:#0f805b}.hero>p{font-size:13px;color:#608579;margin:0}.library-stats{display:flex;gap:26px;margin-top:26px;position:relative;z-index:1}.library-stats>span{font-size:11px;color:#6c8e83}.library-stats>span+span{border-left:1px solid #cce1da;padding-left:26px}.library-stats strong{font-size:18px;letter-spacing:.02em;color:#2b5849;margin-right:4px}.hero-decoration{position:absolute;right:70px;top:7px;width:240px;height:220px;pointer-events:none}.hero-decoration i{position:absolute;width:175px;height:175px;border:1px solid #bae2d5;border-radius:50%;right:0;top:17px;box-shadow:0 0 0 20px #d4eee633,0 0 0 42px #d4eee622}.hero-decoration span{position:absolute;font-size:140px;right:70px;top:-5px;transform:rotate(-14deg);color:#16af7c81;line-height:1.5}.hero-decoration b{position:absolute;font-size:48px;right:0;top:108px;transform:rotate(10deg);color:#84ccb4}.search-section{margin:30px 0 24px}.search-box{display:flex;align-items:center;background:white;border:1px solid #dde7e4;border-radius:12px;padding:0 18px;height:59px;gap:13px;box-shadow:0 4px 10px #1c473903}.search-box>span{color:#57a38a}.search-box:focus-within{border-color:var(--aqua-dark);box-shadow:0 0 0 3px #017b5218}.search-box input{border:0;outline:0;flex:1;min-width:0;color:var(--ink);font-size:14px;background:none;height:100%}.search-box input::placeholder{color:#9caaa9}.search-box input::-webkit-search-cancel-button{display:none}.search-box button{padding:8px;color:#819391}.search-box kbd{border:1px solid #e8eeec;border-radius:5px;color:#95a4a2;font-size:12px;padding:1px 8px}.filter-line{display:flex;justify-content:space-between;gap:14px;margin-top:17px;align-items:center;flex-wrap:wrap}.resource-filters{display:flex;gap:5px;flex-shrink:0}.filter{display:flex;align-items:center;gap:6px;border-radius:8px;font-size:12px;padding:8px 10px;color:#849492;white-space:nowrap}.filter svg{width:15px;height:15px}.filter.active{color:#19644b;background:#e1f5ee;font-weight:650}.filter:hover{background:#edf2f0}.select-group{display:flex;gap:8px}.select-group select{max-width:160px;font-size:11px;border:1px solid #dfe8e5;border-radius:7px;background:#fff;padding:8px 26px 8px 10px;color:#70817c;min-height:35px}.results-heading{display:flex;align-items:center;justify-content:space-between;margin:21px 0 15px}.results-heading h2{font-size:18px;margin:0;font-weight:650}.results-heading h2 span{font-size:11px;font-weight:500;margin-left:9px;color:#728e85;border-radius:6px;background:#eaf0ed;padding:3px 8px;vertical-align:middle}.results-heading>span{font-size:11px;color:#9ba9a6}.song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.song-card{background:#fff;border:1px solid #e3ebe7;border-radius:12px;padding:19px 20px 0;transition:border-color .2s,box-shadow .2s;min-width:0}.song-card:hover{border-color:#a4decb;box-shadow:0 5px 15px #155c4405}.card-top{display:flex;justify-content:space-between;align-items:center}.song-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#729589;font-size:11px;letter-spacing:.09em}.favorite{padding:3px;color:#a9b8b3}.favorite.saved{color:#117d59}.favorite.saved svg{fill:#d8f4eb}.song-title{display:block;text-align:left;font-size:18px;line-height:1.5;font-weight:650;padding:7px 0 0;width:100%;letter-spacing:.02em}.song-title:hover{color:#0c7b56}.song-subtitle{margin:5px 0 12px;font-size:11px;color:#8a9b96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-preview{font-size:12px;color:#8e9d98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:21px;margin-bottom:15px}.song-resources{border-top:1px solid #eef2ef;display:grid;grid-template-columns:repeat(4,1fr);padding:12px 0}.resource{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;padding:3px 0;min-height:29px;color:#6c837b}.resource+ .resource{border-left:1px solid #eef3ef}.resource svg{width:15px;height:15px}.resource:hover{color:var(--aqua-dark);background:#f1fcf8;border-radius:5px}.resource:disabled{color:#bac6c2;cursor:default}.youtube-resource{color:#69877d}.load-more{display:flex;align-items:center;justify-content:center;gap:9px;margin:28px auto 10px;border:1px solid #dce7e2;border-radius:9px;padding:10px 24px;background:#fff;font-size:12px;color:#728c83}.load-more svg{width:14px;height:14px}.loading{text-align:center;padding:35px;color:#809990;font-size:13px}.empty-state{text-align:center;padding:70px 20px;color:#7e938c}.empty-state>span{background:#e9f6ef;padding:18px;border-radius:50%}.empty-state svg{width:26px;height:26px}.empty-state h3{font-size:19px;color:var(--ink);margin:16px 0 7px}.empty-state p{font-size:13px}footer{margin-top:45px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--line);padding:21px 0;color:#97a8a1;font-size:10px}footer>span{font-weight:600;font-size:12px;color:#738d83}footer p{margin:0}footer small{font-size:10px}.mobile-nav{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.primary-btn{display:inline-flex;align-items:center;gap:8px;background:var(--aqua);color:#0c3e2e;border-radius:9px;padding:11px 19px;font-size:13px;font-weight:650}.secondary-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d8e9e1;background:#fff;border-radius:9px;padding:10px 17px;font-size:13px;color:#567d70}.icon-button{padding:9px;background:#f1f6f2;border-radius:50%;flex-shrink:0}.icon-button svg{width:18px;height:18px}dialog{width:min(800px,calc(100vw - 36px));max-height:90dvh;padding:0;border:0;border-radius:18px;box-shadow:0 25px 90px #16382d50;color:var(--ink);background:#fff;overflow:hidden}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#16382d60;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding:26px 30px 19px;flex-shrink:0}.dialog-header h2{font-size:25px;line-height:1.4;margin:7px 0}.dialog-header p{font-size:11px;color:#789388;margin:6px 0 0}.detail-tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--line);flex-shrink:0}.detail-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 20px;font-size:13px;color:#91a49a;border-bottom:3px solid transparent}.detail-tabs button[aria-selected=true]{border-bottom-color:var(--aqua);color:#0d6246;font-weight:650}.detail-tabs svg{width:17px;height:17px}.detail-content{padding:24px 30px 30px;overflow:auto;min-height:280px;overscroll-behavior:contain}.lyrics-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:11px;color:#89a193;gap:10px}.font-controls{display:flex;gap:5px}.font-controls button{border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:12px;color:#6e8a7b}.lyric-lines{font-size:17px;line-height:1.9}.lyric-lines p{margin:0 0 12px;white-space:pre-wrap}.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 21px}.score-frame{width:100%;height:50dvh;border:1px solid var(--line);border-radius:9px;background:#f1f5f3}.resource-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 15px}.resource-placeholder .resource-symbol{display:flex;width:65px;height:65px;align-items:center;justify-content:center;background:#e7f8f3;border-radius:18px;color:#14825e;margin:5px 0 10px}.resource-symbol svg{width:29px;height:29px}.resource-placeholder h3{margin:13px 0 6px;font-size:20px}.resource-placeholder p{font-size:13px;color:#869c91;max-width:400px;margin:0 0 20px}.resource-placeholder .primary-btn{margin-top:5px}audio{width:min(100%,420px);margin:15px 0}.youtube-frame{aspect-ratio:16/9;width:100%;border:0;border-radius:12px;background:#f4f7f4}.dialog-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 30px;border-top:1px solid var(--line);gap:15px;flex-shrink:0}.favorite-button{display:flex;align-items:center;gap:8px;color:#65907b;font-size:12px;white-space:nowrap}.favorite-button.saved{color:#09724f}.favorite-button.saved svg{fill:#d5f7ec}.dialog-footer>span{font-size:10px;color:#9aae9f;text-align:right;max-width:55%}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1a3b30;color:#fff;box-shadow:0 10px 30px #1c382f24;padding:11px 20px;border-radius:9px;font-size:13px;z-index:30;white-space:nowrap}
@media(min-width:1500px){.song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-decoration{right:95px}}
@media(max-width:1150px){:root{--sidebar:205px}.sidebar{padding:28px 16px}.brand{font-size:17px;gap:8px}.brand-icon{width:38px;height:38px}.brand small{font-size:8px}.topbar{padding:0 30px}main{padding:30px}.hero-decoration{right:25px;opacity:.8}.hero h1{font-size:35px}.hero{padding:25px}.resource-filters{gap:1px}.filter{padding:7px 8px}.filter-line{gap:12px}.select-group{margin-left:auto}.song-card{padding:16px 15px 0}.song-title{font-size:16px}}
@media(max-width:760px){.sidebar{display:none}.main-shell{margin:0}.topbar{height:68px;padding:0 20px}.breadcrumb,.header-note{display:none}.mobile-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700}.mobile-brand .brand-icon{width:33px;height:33px;border-radius:10px}.mobile-brand .brand-icon svg{width:20px;height:20px}main{padding:20px 18px 85px}.hero{padding:24px 23px 22px;border-radius:15px}.eyebrow{font-size:10px;letter-spacing:.1em}.hero h1{font-size:30px;margin:12px 0 10px}.hero>p{font-size:11px;max-width:220px;line-height:1.9}.hero-decoration{right:20px;top:12px;transform:scale(.32);transform-origin:right top;opacity:.6}.hero h1{padding-right:80px}.library-stats{gap:13px;margin-top:20px}.library-stats>span{font-size:9px}.library-stats>span+span{padding-left:13px}.library-stats strong{font-size:17px;margin-right:2px}.search-section{margin:22px 0 20px}.search-box{height:54px;padding:0 13px;gap:9px}.search-box input{font-size:16px}.search-box kbd{display:none}.filter-line{margin-top:13px;gap:12px;display:block}.resource-filters{justify-content:space-between;gap:0}.filter{font-size:11px;padding:8px 7px;gap:4px}.filter svg{width:14px;height:14px}.select-group{margin-top:12px;justify-content:flex-end}.select-group select{font-size:10px;max-width:145px;padding:7px 20px 7px 8px;min-height:32px}.results-heading{margin:20px 0 13px}.results-heading h2{font-size:17px}.results-heading>span{font-size:10px}.song-grid{grid-template-columns:1fr;gap:12px}.song-card{padding:17px 19px 0;border-radius:12px}.song-title{font-size:18px}.song-code{font-size:10px}.song-subtitle{font-size:11px;margin-bottom:9px}.song-preview{font-size:12px;margin-bottom:13px}.song-resources{padding:10px 0}.resource{font-size:12px;min-height:32px;gap:7px}.resource svg{width:16px;height:16px}.mobile-nav{display:flex;position:fixed;inset:auto 0 0;height:calc(64px + env(safe-area-inset-bottom));padding:6px 0 calc(6px + env(safe-area-inset-bottom));background:#fffffff2;backdrop-filter:blur(10px);border-top:1px solid #e0ebe5;z-index:6;box-shadow:0 -5px 30px #174c3705}.mobile-nav button{width:50%;font-size:10px;color:#91a598;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.mobile-nav button.active{color:#097551;font-weight:650}.mobile-nav button.active svg{fill:#daf7ee;stroke:#0a815a}.mobile-nav svg{width:21px;height:21px}footer{margin-top:30px;flex-wrap:wrap;gap:5px;font-size:9px}footer p{display:none}footer small{font-size:9px}dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0;margin:0}.dialog-header{padding:24px 21px 17px}.dialog-header h2{font-size:23px}.detail-tabs{padding:0 10px;justify-content:space-around}.detail-tabs button{padding:13px 11px;font-size:12px;gap:5px}.detail-content{padding:23px 22px;flex:1;min-height:0}.lyric-lines{font-size:18px;line-height:1.95}.lyrics-toolbar{margin-bottom:23px;flex-wrap:wrap}.dialog-footer{padding:15px 21px calc(15px + env(safe-area-inset-bottom))}.score-frame{height:60dvh}.toast{bottom:84px}.empty-state{padding:50px 15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:760px){.filter{min-height:44px}.resource{min-height:40px}.favorite{padding:10px;margin:-7px}.detail-tabs button{min-height:48px}}

.song-category{display:flex;align-items:baseline;gap:7px;margin:0 0 12px;min-width:0}.category-label{font-size:11px;color:#758982;flex-shrink:0}.category-tag{display:inline-block;min-width:0;padding:4px 9px;border-radius:7px;background:#eafaf5;color:#017b52;font-size:11px;line-height:1.6;overflow-wrap:anywhere}

/* Subtle feedback for browsing and opening song resources. */
.song-card{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;animation:card-appear .32s ease-out}
.song-title,.category-tag,.resource,.favorite,.filter,.nav-item,.detail-tabs button,.detail-actions a,.icon-button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.resource svg,.favorite svg{transition:transform .2s ease}
.song-card:focus-within{border-color:#017b52;box-shadow:0 0 0 2px #017b521a}
@keyframes card-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 .song-card:hover{background:#f4fcf9;border-color:#017b52;box-shadow:0 9px 24px #017b5218;transform:translateY(-3px)}
 .song-card:hover .category-tag{background:#017b52;color:#0b4834}
 .song-title:hover{color:#017b52}
 .resource:not(:disabled):hover{background:#017b52;color:#0b4834;border-radius:6px}
 .resource:not(:disabled):hover svg{transform:translateY(-2px)}
 .favorite:hover{background:#d9f6ec;color:#017b52}
 .favorite:hover svg{transform:scale(1.1)}
 .detail-tabs button:hover{background:#eafaf5;color:#017b52}
 .icon-button:hover{background:#d9f6ec;transform:rotate(8deg)}
}
.resource:not(:disabled):active,.favorite:active{background:#d9f6ec;transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.song-card{animation:none!important}*,*::before,*::after{animation:none!important;transition:none!important}.song-card:hover,.resource svg,.favorite svg,.icon-button:hover{transform:none!important}}

@media(hover:hover) and (pointer:fine){.filter:hover{background:#d9f6ec;color:#017b52}.detail-actions a:hover{box-shadow:0 3px 10px #017b5220}}

.brand-icon, .primary-btn, .song-card:hover .category-tag, .resource:not(:disabled):hover { color: #fff; }