/* 徐柯雯 · Four palettes, one quiet workspace. */
body{--serif:'Songti SC','STSong','SimSun',serif;transition:background-color .25s,color .25s}
body[data-theme=ink]{--bg:#f2f0e9;--card:#fbfaf6;--ink:#292e2a;--muted:#737a72;--line:#dedfd6;--purple:#53685b;--soft:#e7eae1;--green:#416c58;--red:#a34336;--untyped:#777d75;--seal:#a1493a;--tabs:#e7e8df}
body[data-theme=paper]{--bg:#f6f2e9;--card:#fffdf7;--ink:#40382f;--muted:#847a6c;--line:#e6dfd1;--purple:#8b7053;--soft:#f0e9dc;--green:#60765a;--red:#ad5141;--untyped:#8b8174;--seal:#aa5141;--tabs:#eee7db}
body[data-theme=night]{--bg:#181e21;--card:#20282b;--ink:#e0e5de;--muted:#9ba8a1;--line:#34403e;--purple:#b6c7b6;--soft:#2d3b35;--green:#96bfa2;--red:#e49688;--untyped:#a2afa7;--seal:#c48d75;--tabs:#25302f}
body[data-theme=lavender]{--bg:#f7f7fb;--card:#fff;--ink:#343144;--muted:#858096;--line:#e9e6f1;--purple:#796b9b;--soft:#f0ecf7;--green:#4e8a72;--red:#b55e70;--untyped:#928b9f;--seal:#9b7995;--tabs:#eeebf4}
header{gap:48px;background:var(--card);border-color:var(--line)}
.brand{gap:13px;font-weight:400;font-size:24px;letter-spacing:4px;font-family:var(--serif)}
.brand-name{display:flex;flex-direction:column;gap:3px;line-height:1.35}
.brand-en{margin:0;font:8px/1.5 'Segoe UI',sans-serif;letter-spacing:3.4px;color:var(--muted)}
.logo{width:31px;height:38px;border:1px solid var(--seal);background:transparent;color:var(--seal);border-radius:2px;font:22px/1 var(--serif);letter-spacing:0;transform:rotate(-3deg);position:relative}
.logo:after{content:'';position:absolute;inset:2px;border:1px solid var(--seal);opacity:.4}
nav{gap:26px}.nav{font-size:12px;letter-spacing:1px}.nav.active{font-weight:500}.nav.active:after{height:2px}
.theme-control{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;color:var(--muted);letter-spacing:1px}
.theme-control select{background:transparent;border:1px solid var(--line);border-radius:3px;font-size:12px;padding:7px 25px 7px 10px;color:var(--ink);max-width:130px}
main{position:relative}.intro{min-height:144px;position:relative;padding-bottom:20px;border-bottom:1px solid var(--line);isolation:isolate}
.intro h1{font:400 35px/1.7 var(--serif);letter-spacing:4px;margin:5px 0}.intro h1 em{font-weight:400;color:var(--purple)}
.intro p{font-size:12px;letter-spacing:1.3px}.eyebrow{font-size:9px;font-weight:400;letter-spacing:3px}
.daily{align-self:flex-end;margin-bottom:8px}.intro>div{z-index:1}
.practice-card,.side-card,.keyboard-card,.listen-card,.library-item,.time-summary>div{border-radius:6px;box-shadow:none}
button,select,.input-wrap,.tabs,.import-card,.empty{border-radius:4px}.tabs,body.dark .tabs{background:var(--tabs)}
.tabs .selected{box-shadow:none}.tabs button{color:var(--muted)}.tabs button.selected{color:var(--purple)}
.stats strong,.time-summary strong{font-weight:350}.time-summary{gap:0;border:1px solid var(--line);border-radius:5px;background:var(--card)}
.time-summary>div{border:0;background:transparent;border-right:1px solid var(--line);padding:15px 24px}.time-summary>div:last-child{border:0}
.time-summary strong{font-size:18px;letter-spacing:1px}.time-summary span{letter-spacing:2px}
.input-wrap{border-color:var(--line)}.import-card{border-color:var(--line);background:var(--card)}.key,body.dark .key{border-color:var(--line);border-bottom-color:var(--line);color:var(--muted);border-radius:3px;box-shadow:none}
.key.home{border-bottom-color:var(--purple);color:var(--purple)}.key.next,.key.pressed,body.dark .key.next,body.dark .key.pressed{background:var(--soft);border-color:var(--purple);color:var(--purple)}
#textDisplay{color:var(--untyped)}.char.correct{color:var(--green)}.char.incorrect{color:var(--red)}
.primary{background:var(--purple);color:var(--card);border-color:var(--purple)}.primary:hover{background:var(--ink);color:var(--card)}
.upload{border-color:var(--purple)}dialog{border-radius:8px}.aplayer,body.dark .aplayer{background:var(--card);color:var(--ink)}
.aplayer .aplayer-list ol li:hover,.aplayer .aplayer-list ol li.aplayer-list-light{background:var(--soft)}
.aplayer .aplayer-info,.aplayer .aplayer-list ol li{border-color:var(--line)}.aplayer .aplayer-author,.aplayer .aplayer-list-author{color:var(--muted)!important}
.aplayer .aplayer-list-index{color:var(--muted)!important}.aplayer .aplayer-icon path{fill:var(--muted)}.aplayer .aplayer-pic{background-color:var(--purple)!important}
#playerDock{border-color:var(--line);box-shadow:0 8px 32px #1e30200a;border-radius:6px}.brand-signature{font-family:var(--serif);letter-spacing:2px;color:var(--ink)}
body[data-theme=ink]{background-image:radial-gradient(ellipse at 100% 0%,#7782730b,transparent 60%),repeating-linear-gradient(35deg,transparent 0 3px,#706e5d03 3px 4px)}
body[data-theme=ink] .intro:before{content:'';position:absolute;right:0;bottom:0;width:53%;height:170px;z-index:0;pointer-events:none;opacity:.75;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 180'%3E%3Cpath fill='%23707b6b' opacity='.06' d='M0 180L70 137 99 141 180 60 211 92 253 49 290 110 347 75 412 130 480 83 544 126 620 99V180Z'/%3E%3Cpath fill='%2349564b' opacity='.07' d='M0 180L90 160 178 119 209 137 273 89 310 123 353 106 420 150 485 119 534 150 620 122V180Z'/%3E%3Cpath fill='%2349564b' opacity='.05' d='M0 180L143 158 247 164 330 145 412 163 514 145 620 158V180Z'/%3E%3Ccircle cx='460' cy='42' r='21' fill='none' stroke='%239f6b56' stroke-width='1' opacity='.2'/%3E%3C/svg%3E") right bottom/contain no-repeat}
body[data-theme=ink] .intro h1,body[data-theme=ink] .article-head h2{font-family:var(--serif)}
body[data-theme=ink] .time-summary>div:first-child strong{color:var(--seal)}
@media(max-width:1000px){header{gap:25px;padding-inline:25px}.brand-en{display:block}nav{gap:18px}.theme-control span{display:none}}
@media(max-width:700px){header{height:auto;min-height:104px;display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:14px 20px 0}.brand{font-size:22px;gap:10px;letter-spacing:4px}.brand .logo{font-size:20px;width:28px;height:34px}.brand-en{display:block;font-size:7px}.theme-control{grid-column:2;grid-row:1}.theme-control select{font-size:11px;padding:6px 10px;max-width:115px}nav{grid-row:2;grid-column:1/-1;gap:0;justify-content:space-between;height:41px;margin-top:10px}.nav{padding:0 7px;font-size:11px;letter-spacing:.6px}.intro{min-height:145px;padding-bottom:18px}.intro h1{font-size:27px;letter-spacing:2px}.intro p{font-size:11px;letter-spacing:.5px}.intro:before{width:80%!important;opacity:.4!important}.time-summary>div{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}.time-summary{display:flex;flex-direction:column}.time-summary strong{font-size:15px}.time-summary span{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){body{transition:none}}