@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@600;700;900&display=swap');

:root {
  --ink: #352a2a;
  --muted: #786969;
  --wine: #5e2432;
  --wine-deep: #401923;
  --brick: #a64f46;
  --gold: #c48d45;
  --cream: #f6efe4;
  --paper: #fbf8f1;
  --sage: #84938a;
  --line: #dfd3c5;
  --shadow: 0 18px 50px rgba(65, 28, 31, .11);
  --serif: 'Noto Serif TC', 'Songti TC', serif;
  --sans: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.paper-grain { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251,248,241,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(94,36,50,.12); }
.header-inner { max-width: 1240px; margin: auto; padding: 16px 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong { display: block; font-family: var(--serif); font-size: 20px; letter-spacing: .08em; line-height: 1.2; color: var(--wine); }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .18em; line-height: 1.5; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--wine); display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-13deg); }
.brand-mark span { display: block; width: 2px; background: var(--wine); border-radius: 4px; }
.brand-mark span:nth-child(1) { height: 10px; }.brand-mark span:nth-child(2) { height: 17px; }.brand-mark span:nth-child(3) { height: 13px; }
.top-nav { display: flex; gap: 28px; color: var(--muted); font-size: 14px; }
.top-nav a { position: relative; transition: color .2s ease; }.top-nav a:hover { color: var(--wine); }.top-nav a::after { content: ''; position: absolute; height: 1px; width: 0; bottom: 0; left: 0; background: var(--gold); transition: width .2s ease; }.top-nav a:hover::after { width: 100%; }

.hero { max-width: 1240px; min-height: 500px; padding: 80px 70px 80px; margin: 0 auto; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 530px; height: 530px; border: 1px solid rgba(166,79,70,.16); border-radius: 50%; right: 130px; top: -70px; box-shadow: 0 0 0 30px rgba(166,79,70,.025), 0 0 0 60px rgba(166,79,70,.025); }
.hero-copy { max-width: 660px; position: relative; z-index: 1; }
.eyebrow, .section-kicker { color: var(--brick); font-size: 12px; letter-spacing: .24em; font-weight: 800; margin: 0 0 20px; }
.eyebrow span { display: inline-block; width: 28px; border-top: 2px solid var(--gold); vertical-align: middle; margin-right: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 900; letter-spacing: .02em; }
h1 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.25; color: var(--wine-deep); margin: 0 0 22px; }
h1 em, h2 em { color: var(--brick); font-style: normal; }
.hero-lede { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 2; margin-bottom: 32px; }
.primary-cta { display: inline-flex; align-items: center; gap: 22px; background: var(--wine); color: #fff8ef; padding: 13px 20px 13px 24px; font-weight: 700; font-size: 15px; box-shadow: 5px 5px 0 var(--gold); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }.primary-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--gold); background: var(--wine-deep); }.primary-cta span { font-size: 22px; line-height: .8; }
.hero-record { position: absolute; right: 68px; top: 65px; width: 380px; height: 380px; transform: rotate(10deg); }.record-shadow { position: absolute; width: 330px; height: 330px; right: 16px; top: 42px; border-radius: 50%; background: rgba(64,25,35,.2); filter: blur(18px); }.record { position: relative; width: 340px; height: 340px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #1b1117 0 2px, #2e1b21 3px 4px, #130d12 5px 7px); box-shadow: -12px 20px 0 rgba(50,24,27,.1), inset 0 0 0 8px #21131a; }.record::before { content: ''; position: absolute; inset: 21px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }.record-label { position: absolute; width: 116px; height: 116px; border-radius: 50%; top: 112px; left: 112px; background: var(--gold); border: 7px solid #b97635; color: #4e2630; display: grid; place-items: center; text-align: center; font-family: var(--serif); line-height: 1.35; font-size: 18px; }.record-hole { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #24141a; top: 164px; left: 164px; border: 3px solid #dab06d; }.hero-record > p { position: absolute; right: 0; bottom: -18px; color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .24em; line-height: 1.5; text-align: right; }.hero-record > p span { color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.hero-stamp { position: absolute; right: 35%; bottom: 38px; transform: rotate(-10deg); width: 76px; height: 76px; border: 1px solid var(--brick); border-radius: 50%; color: var(--brick); display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 14px; line-height: 1.35; opacity: .85; }

.quick-stats { max-width: 1110px; margin: 0 auto 68px; padding: 22px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 32px; }.quick-stats div { display: flex; align-items: baseline; gap: 10px; }.quick-stats strong { font-family: var(--serif); color: var(--wine); font-size: 31px; }.quick-stats span { color: var(--muted); font-size: 13px; }.quick-stats p { color: var(--muted); font-size: 13px; text-align: right; margin: 0; }
.content-section { max-width: 1180px; margin: 0 auto; padding: 0 30px 94px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }.section-heading h2, .how-intro h2, .check-section h2 { font-size: clamp(30px, 3.4vw, 47px); color: var(--wine-deep); line-height: 1.35; margin: 0; }.section-note { max-width: 330px; color: var(--muted); font-size: 14px; line-height: 1.9; margin: 0; }
.toolbar { background: #f0e6d9; padding: 15px; margin-bottom: 18px; border: 1px solid #e0d1c1; }.search-box { background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 12px; }.search-box span { font-size: 27px; color: var(--wine); line-height: 1; }.search-box input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 15px; min-width: 0; }.search-box input::placeholder { color: #9b8982; }.filter-wrap { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }.filter-wrap + .filter-wrap { margin-top: 10px; }.filter-label { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }.filter-list { display: flex; flex-wrap: wrap; gap: 7px; }.filter-btn { background: transparent; border: 1px solid #c8b8a8; padding: 5px 12px; border-radius: 20px; color: var(--muted); font-size: 13px; transition: all .18s ease; }.filter-btn:hover, .filter-btn.active { background: var(--wine); color: #fff8ef; border-color: var(--wine); }.filter-btn.active { box-shadow: 2px 2px 0 rgba(196,141,69,.7); }
.result-line { font-size: 13px; color: var(--muted); margin-bottom: 13px; }.result-line span:first-child { color: var(--wine); font-weight: 800; }.result-divider { color: var(--gold); }
.song-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.song-card { background: #fffdfa; border: 1px solid var(--line); box-shadow: 0 6px 0 rgba(94,36,50,.06); display: flex; flex-direction: column; min-height: 100%; transition: transform .2s ease, box-shadow .2s ease; }.song-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.thumb-wrap { position: relative; aspect-ratio: 16 / 8.9; overflow: hidden; background: var(--wine-deep); }.thumb-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; filter: sepia(.3) saturate(.78) contrast(.95); opacity: .86; transition: transform .4s ease; }.song-card:hover .thumb-wrap img { transform: scale(1.04); }.thumb-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(52,22,27,.64), rgba(52,22,27,.05)); }.play-badge { position: absolute; left: 14px; bottom: 13px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,247,236,.94); color: var(--wine); display: grid; place-items: center; font-size: 16px; padding-left: 2px; }.year-badge { position: absolute; right: 11px; top: 10px; color: #fff9f2; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: rgba(64,25,35,.76); padding: 3px 8px; }.song-body { padding: 17px 18px 16px; display: flex; flex-direction: column; flex: 1; }.song-card h3 { color: var(--wine-deep); font-family: var(--serif); font-size: 22px; line-height: 1.35; margin: 0 0 2px; }.artist { color: var(--brick); font-size: 13px; font-weight: 700; margin: 0 0 11px; }.song-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }.tag { font-size: 11px; color: var(--muted); background: #f2eae0; padding: 2px 8px; border-radius: 2px; }.song-hook { border-left: 2px solid var(--gold); padding-left: 10px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 15px; }.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #ede2d7; padding-top: 12px; }.usage-label { font-size: 11px; color: var(--sage); font-weight: 700; }.detail-btn, .youtube-btn { border: 0; background: transparent; color: var(--wine); font-size: 13px; font-weight: 800; padding: 4px 0; }.detail-btn:hover, .youtube-btn:hover { color: var(--brick); text-decoration: underline; }.youtube-btn { background: var(--wine); color: #fff8ef; padding: 7px 10px; white-space: nowrap; }.youtube-btn:hover { color: #fff; background: var(--brick); text-decoration: none; }
.empty-state { text-align: center; padding: 60px 20px; border: 1px dashed var(--line); color: var(--muted); }.empty-state > span { font-family: var(--serif); font-size: 42px; color: var(--gold); }.empty-state h3 { font-family: var(--serif); color: var(--wine); margin-bottom: 4px; }.empty-state p { margin-bottom: 10px; }.text-button { background: transparent; border: 0; color: var(--wine); text-decoration: underline; font-weight: 700; }

.how-section { background: var(--wine-deep); color: #f9efe4; padding: 80px max(30px, calc((100% - 1120px) / 2)); display: grid; grid-template-columns: .9fr 1.4fr; gap: 80px; position: relative; overflow: hidden; }.how-section::after { content: '♫'; position: absolute; right: 7%; top: 15px; font-family: var(--serif); font-size: 220px; line-height: 1; color: rgba(196,141,69,.12); transform: rotate(13deg); }.how-intro { position: relative; z-index: 1; }.how-intro .section-kicker { color: #dca775; }.how-intro h2 { color: #fff7ed; }.how-intro p:last-child { max-width: 370px; color: #d9c4b5; font-size: 15px; line-height: 2; margin-top: 18px; }.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; position: relative; z-index: 1; align-items: stretch; }.step-card { padding: 22px 17px; border-top: 1px solid #b57461; border-bottom: 1px solid rgba(255,255,255,.14); }.step-no { color: #dca775; font-family: var(--serif); font-size: 17px; }.step-card h3 { color: #fff7ed; font-family: var(--serif); font-size: 22px; margin: 20px 0 10px; }.step-card p { color: #d9c4b5; font-size: 13px; line-height: 1.9; margin: 0; }
.directions-section { max-width: 1120px; margin: 0 auto; padding: 84px 30px 92px; }.directions-heading { margin-bottom: 32px; }.direction-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.direction-card { min-height: 250px; padding: 17px 15px; background: #f0e6d9; border: 1px solid #e0d1c1; display: flex; flex-direction: column; justify-content: space-between; }.direction-card:nth-child(2), .direction-card:nth-child(4) { background: #fffdfa; }.direction-no { color: var(--gold); font-family: var(--serif); font-size: 16px; }.direction-card h3 { color: var(--wine); font-family: var(--serif); font-size: 22px; margin: 12px 0 7px; }.direction-card p { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0 0 15px; }.direction-card small { display: block; color: var(--brick); font-size: 11px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 10px; }
.worksheet-section { background: #eadfd1; padding: 72px max(30px, calc((100% - 1120px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }.worksheet-copy h2 { font-size: clamp(30px, 3.4vw, 47px); color: var(--wine-deep); line-height: 1.35; margin: 0; }.worksheet-copy p:last-child { max-width: 480px; color: var(--muted); font-size: 15px; line-height: 2; margin: 18px 0 0; }.download-panel { background: var(--paper); border: 1px solid #d6c4b3; padding: 26px 28px; box-shadow: 7px 7px 0 rgba(94,36,50,.1); }.download-label { color: var(--wine); font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 0 0 4px; }.download-meta { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 18px; }.download-actions { display: flex; gap: 9px; flex-wrap: wrap; }.download-btn { display: inline-flex; align-items: center; gap: 17px; background: var(--wine); color: #fff8ef; padding: 9px 14px; font-size: 13px; font-weight: 800; }.download-btn span { font-size: 20px; line-height: .7; }.download-btn:hover { background: var(--brick); }.download-btn.outline { background: transparent; border: 1px solid var(--wine); color: var(--wine); }.download-btn.outline:hover { background: var(--wine); color: #fff8ef; }
.check-section { max-width: 1120px; margin: 0 auto; padding: 84px 30px 95px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }.check-section > div:first-child > p:last-child { color: var(--muted); font-size: 15px; margin-top: 18px; }.checklist { border-top: 1px solid var(--line); }.checklist label { display: flex; gap: 15px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); cursor: pointer; }.checklist input { appearance: none; width: 23px; height: 23px; border: 1px solid #bd9a83; background: #fffdfa; margin: 4px 0 0; flex: 0 0 auto; position: relative; }.checklist input:checked { background: var(--wine); border-color: var(--wine); }.checklist input:checked::after { content: '✓'; color: #fff; font-size: 16px; position: absolute; left: 4px; top: -1px; }.checklist strong { display: block; color: var(--wine); font-size: 15px; }.checklist small { color: var(--muted); font-size: 12px; }
.site-footer { background: #2c1b20; color: #ddc8b6; }.footer-inner { max-width: 1180px; margin: auto; padding: 23px 30px; display: flex; gap: 25px; align-items: center; font-size: 12px; }.footer-mark { font-family: var(--serif); font-weight: 700; font-size: 17px; color: #f2d5b6; }.footer-inner p { margin: 0; flex: 1; }.footer-inner span { color: #a99183; }

.song-dialog { width: min(650px, calc(100% - 32px)); border: 0; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px rgba(27,12,16,.36); }.song-dialog::backdrop { background: rgba(43,20,24,.62); backdrop-filter: blur(3px); }.dialog-close { position: absolute; right: 13px; top: 10px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(64,25,35,.45); color: white; font-size: 24px; line-height: 1; z-index: 2; }.dialog-head { background: var(--wine-deep); color: #fff6ec; padding: 30px 32px 25px; }.dialog-head .section-kicker { color: #dfaa77; margin-bottom: 9px; }.dialog-head h2 { color: #fff6ec; margin: 0 0 4px; font-size: 32px; }.dialog-head p { color: #e2cfc0; margin: 0; font-size: 14px; }.dialog-body { padding: 25px 32px 30px; }.dialog-section { border-left: 2px solid var(--gold); padding-left: 15px; margin-bottom: 20px; }.dialog-section h3 { color: var(--wine); font-family: var(--serif); font-size: 17px; margin: 0 0 3px; }.dialog-section p { color: var(--muted); font-size: 14px; line-height: 1.9; margin: 0; }.prompt-box { background: #f0e6d9; padding: 14px 17px; }.prompt-box p { color: var(--ink); font-weight: 600; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }.dialog-actions a { background: var(--wine); color: white; padding: 8px 14px; font-size: 13px; font-weight: 800; }

@media (max-width: 960px) { .hero { padding: 65px 42px 80px; }.hero-record { right: -65px; opacity: .36; }.hero-stamp { right: 22%; }.song-grid { grid-template-columns: repeat(2, 1fr); }.how-section { grid-template-columns: 1fr; gap: 30px; }.direction-grid { grid-template-columns: repeat(3, 1fr); }.worksheet-section { gap: 42px; }.check-section { gap: 45px; } }
@media (max-width: 680px) { body { font-size: 15px; }.header-inner { padding: 13px 18px; }.top-nav { gap: 12px; font-size: 12px; }.top-nav a:nth-child(2), .top-nav a:nth-child(3) { display: none; }.brand strong { font-size: 17px; }.brand small { font-size: 9px; }.hero { min-height: 540px; padding: 58px 24px 80px; align-items: flex-start; }.hero-record { right: -100px; top: 250px; transform: rotate(10deg) scale(.7); opacity: .24; }.hero::before { right: -190px; top: 200px; }.hero-stamp { right: 16px; bottom: 30px; }.hero-lede { font-size: 15px; max-width: 490px; }.quick-stats { margin: 0 20px 52px; padding: 17px 0; gap: 12px; grid-template-columns: repeat(3, 1fr); }.quick-stats div { display: block; text-align: center; }.quick-stats strong { display: block; font-size: 25px; }.quick-stats span { font-size: 11px; }.quick-stats p { grid-column: 1 / -1; text-align: center; font-size: 11px; margin-top: 5px; }.content-section { padding: 0 18px 68px; }.section-heading { display: block; }.section-note { margin-top: 16px; font-size: 13px; }.section-kicker { font-size: 10px; }.toolbar { padding: 12px; }.filter-wrap { align-items: flex-start; }.filter-list { flex: 1; }.filter-btn { font-size: 12px; padding: 4px 9px; }.song-grid { grid-template-columns: 1fr; gap: 18px; }.song-card h3 { font-size: 21px; }.how-section { padding: 62px 24px; }.steps { grid-template-columns: 1fr; gap: 0; }.step-card { padding: 18px 0; }.step-card h3 { margin: 10px 0 5px; }.directions-section { padding: 63px 24px 68px; }.direction-grid { grid-template-columns: 1fr; gap: 10px; }.direction-card { min-height: auto; display: grid; grid-template-columns: 45px 1fr; gap: 6px; }.direction-card h3 { margin: 0 0 4px; }.direction-card p { margin-bottom: 9px; }.worksheet-section { padding: 62px 24px; display: block; }.download-panel { margin-top: 30px; padding: 22px 20px; }.download-actions { display: grid; }.download-btn { justify-content: space-between; }.check-section { padding: 63px 24px 75px; display: block; }.checklist { margin-top: 35px; }.footer-inner { padding: 20px 18px; display: block; }.footer-inner p { margin: 5px 0; }.dialog-head, .dialog-body { padding-left: 22px; padding-right: 22px; }.dialog-head h2 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }