:root { color-scheme: light; --paper:#f7f5ef; --ink:#263b37; --muted:#7b8981; --green:#315e53; --line:#e4e8df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .hidden { display:none!important; }
.page-shell { max-width:1440px; padding:0 clamp(24px,6vw,88px); margin:auto; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:21px; font-weight:700; letter-spacing:.06em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green); color:white; font-size:24px; }
.header-note { font-size:13px; color:var(--muted); letter-spacing:.04em; }
.hero { display:grid; grid-template-columns:1fr .85fr; align-items:center; min-height:430px; gap:24px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-copy { padding:48px 0 55px; position:relative; z-index:1; }
.eyebrow,.section-kicker { color:#789187; font-size:11px; font-weight:700; letter-spacing:.25em; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; }.eyebrow-line { width:30px; height:1px; background:#8fa79a; }
h1 { font-family:Georgia,"Songti SC",serif; font-size:clamp(48px,5.3vw,78px); line-height:1.22; letter-spacing:-.045em; font-weight:500; margin:27px 0 20px; }
h1 em { color:var(--green); font-style:normal; }.hero-copy p { max-width:440px; color:var(--muted); font-size:15px; line-height:1.9; margin:0; }
.hero-link { display:inline-flex; align-items:center; gap:36px; margin-top:32px; padding-bottom:9px; border-bottom:1px solid var(--green); color:var(--green); font-size:14px; font-weight:600; transition:gap .2s; }.hero-link:hover { gap:44px; }
.hero-art { height:100%; min-height:350px; position:relative; display:grid; place-items:center; }
.hero-disc { width:min(34vw,370px); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle at center,#e2e9df 0 1px,#e9eee6 2px 15px); box-shadow:0 20px 60px #3c645319,inset 0 0 0 1px #dce6dc; position:relative; }
.hero-disc::before { content:""; position:absolute; inset:28%; border-radius:50%; background:#f1ddbf; box-shadow:0 0 0 16px #e1eadf; }.hero-disc::after { content:""; position:absolute; inset:48%; border-radius:50%; background:var(--green); }
.hero-note { position:absolute; font-family:Georgia,serif; color:#b2c8b9; }.hero-note-one { top:12%; right:12%; font-size:48px; transform:rotate(15deg); }.hero-note-two { left:7%; bottom:16%; font-size:39px; transform:rotate(-17deg); }.hero-note-three { right:3%; bottom:13%; font-size:31px; }
.library { padding:60px 0 90px; }.library-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }.library-heading h2 { font-family:Georgia,"Songti SC",serif; font-size:36px; font-weight:500; letter-spacing:-.04em; margin:12px 0 0; }.library-heading p { color:var(--muted); font-size:14px; margin:0 0 6px; }
.score-count { color:#89a194; font:500 16px -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:0; vertical-align:middle; margin-left:10px; }
.library-controls { display:flex; gap:12px; margin-top:29px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.search-field { width:min(100%,430px); height:46px; display:flex; align-items:center; gap:11px; background:white; border:1px solid #e3e6de; border-radius:9px; padding:0 15px; }.search-field:focus-within { border-color:#89a99c; box-shadow:0 0 0 3px #dce9df; }
.search-icon { color:#7d9a8b; font-size:29px; line-height:1; transform:rotate(-25deg); }.search-field input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; }.search-field input::placeholder { color:#a6afa8; }
.refresh-button { height:46px; padding:0 19px; color:var(--green); background:transparent; border:1px solid #d9e2d9; border-radius:9px; font-size:13px; font-weight:600; white-space:nowrap; }.refresh-button:hover { background:#e6ede6; }.refresh-button span { font-size:19px; vertical-align:-1px; }
.status { color:var(--muted); font-size:14px; }.status:empty { display:none; }
.score-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:30px 22px; margin-top:28px; }
.score-card { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; color:var(--ink); border-radius:12px; }.score-card:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.score-cover { display:grid; place-items:center; height:250px; padding:13px; overflow:hidden; border:1px solid #e5e6dd; border-radius:12px; background:#e9ece5; transition:transform .2s,box-shadow .2s; }.score-cover img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 6px 17px #213c3029; background:white; }
.score-card:hover .score-cover,.score-card:focus-visible .score-cover { transform:translateY(-4px); box-shadow:0 12px 25px #263b371c; }.score-card-body { display:block; padding:13px 3px 0; }.score-card strong,.score-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.score-card strong { font-size:15px; line-height:1.5; }.score-card small { color:var(--muted); font-size:12px; margin-top:3px; }
.empty-state { padding:80px 20px; text-align:center; color:var(--muted); }.empty-state>span { font:56px Georgia,serif; color:#b6c9b9; }.empty-state h3 { color:var(--ink); margin:12px 0 4px; }.empty-state p { margin:0; font-size:14px; }
footer { padding:25px 0 35px; border-top:1px solid var(--line); color:#9ba99e; text-align:center; font-size:12px; letter-spacing:.06em; }footer span { color:var(--green); }
.score-dialog { width:min(calc(100vw - 32px),1050px); height:min(calc(100vh - 32px),960px); max-width:none; max-height:none; padding:0; border:1px solid #e3e8df; border-radius:16px; background:#f7f8f4; color:var(--ink); box-shadow:0 24px 80px #132d2670; }.score-dialog::backdrop { background:#152620b8; backdrop-filter:blur(5px); }
.reader-toolbar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 28px; border-bottom:1px solid var(--line); background:#ffffffed; backdrop-filter:blur(12px); }.reader-label { color:#88a195; font-size:10px; font-weight:700; letter-spacing:.17em; }.reader-toolbar h2 { margin:4px 0 0; font-size:19px; }.reader-toolbar p { color:var(--muted); font-size:12px; margin:4px 0 0; }.reader-toolbar button { flex:none; padding:9px 15px; border:1px solid #dce5dc; border-radius:8px; color:var(--green); background:white; font-size:13px; }.reader-toolbar button:hover { background:#e6ede6; }
.reader-actions { display:flex; align-items:center; gap:8px; flex:none; }.reader-actions a { padding:9px 15px; border:1px solid #dce5dc; border-radius:8px; color:var(--green); background:white; font-size:13px; }.reader-actions a:hover { background:#e6ede6; }
@media(max-width:600px) { .reader-toolbar > div:first-child { min-width:0; }.reader-toolbar h2,.reader-toolbar p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.reader-actions a { padding:9px 8px; white-space:nowrap; } }
.score-pages { display:grid; justify-items:center; gap:28px; padding:30px 20px 50px; }.score-page { width:min(100%,820px); text-align:center; }.score-page img { display:block; max-width:100%; height:auto; margin:auto; background:white; box-shadow:0 7px 28px #23372b1a; }.score-page figcaption { margin-top:11px; color:var(--muted); font-size:12px; }
@media(max-width:760px) { .site-header { height:70px; }.header-note { display:none; }.hero { grid-template-columns:1fr; min-height:0; }.hero-copy { padding:47px 0 10px; }.hero-art { min-height:180px; height:180px; overflow:hidden; }.hero-disc { width:220px; transform:translateY(60px); }.hero-note-one { right:24%; top:10%; }.hero-note-two { left:20%; bottom:12%; }.hero-note-three { right:16%; }.library { padding-top:45px; }.library-heading h2 { font-size:30px; }.library-heading p { display:none; }.score-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 13px; }.score-cover { height:215px; } }
@media(max-width:440px) { .page-shell { padding:0 18px; }h1 { font-size:48px; }.score-cover { height:185px; padding:9px; }.score-card strong { font-size:14px; }.score-dialog { width:100vw; height:100vh; border:0; border-radius:0; }.reader-toolbar { padding:13px 16px; }.reader-toolbar button span { display:none; }.score-pages { padding:16px 8px 35px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }