:root { --muted:#666; --rule:#e3e5e7; --wash:#f7f9fb; }
button, input, select {font:inherit;color:inherit}
button {cursor:pointer}
button, select, input {border-radius:3px}
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {outline:2px solid var(--link);outline-offset:4px}
[hidden] {display:none!important}
.sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link {position:fixed;top:-60px;left:16px;background:#fff;padding:12px;z-index:10}
.skip-link:focus {top:10px}
.profile-name {font-size:28px;font-weight:650;letter-spacing:-.035em;line-height:1.1;margin:0 0 18px}
.profile-name a {color:var(--text)}
.profile-nav {display:flex;flex-direction:column;gap:10px;margin-top:36px;font-size:14px}
.profile-nav [aria-current] {font-weight:600}
.profile-nav span {margin-left:7px}
.profile .sidebar-note {margin-top:42px;font-size:13px;line-height:1.65;color:var(--muted)}
.page-top {display:flex;justify-content:space-between;gap:14px;align-items:center;margin:0 0 34px;font-size:12px}
.preview-note {color:var(--muted)}
.eyebrow {font-size:10px;letter-spacing:.12em;color:var(--muted);margin:0 0 12px!important;font-weight:600}
.introduction h1 {font-size:29px;letter-spacing:-.035em;margin:0 0 22px}
.introduction>p {margin:0 0 15px;line-height:1.65}
.about-reviews {margin:19px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
summary {cursor:pointer;width:fit-content;color:var(--link)}
.about-reviews p {max-width:590px;margin:10px 0 0}
.browse {margin:37px 0 0}
.browse h2 {font-size:14px;margin-bottom:13px}
.search-wrap {display:flex;gap:10px;align-items:center;border-bottom:1px solid #aebac7;padding:4px 0 9px;color:var(--muted)}
.search-wrap input {width:100%;min-width:0;padding:4px 0;border:0;background:none;font-size:14px}
.search-wrap input::placeholder {color:#767676}
.filter-grid {display:grid;grid-template-columns:1fr 1fr 1.13fr;gap:13px;margin-top:20px}
.filter-grid label {display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
select {width:100%;height:37px;border:1px solid #cbd0d5;background:#fff;padding:0 25px 0 9px;font-size:12px;color:var(--text);text-overflow:ellipsis}
.time-note {font-size:11px;color:var(--muted);margin:10px 0 0}
.filter-actions {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;font-size:12px}
.surprise {border:1px solid #b7c4d1;background:var(--wash);color:var(--link);padding:8px 11px;font-size:12px;font-weight:500}
.surprise:hover {background:#eef3f7;border-color:var(--link)}
.surprise span {margin-left:12px}
.saved-filter {display:flex;gap:7px;align-items:center;color:var(--secondary);cursor:pointer}
.saved-filter input {accent-color:var(--link);margin:0}
#saved-count {color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}
.collection {margin-top:31px;scroll-margin-top:25px}
.collection:focus {outline:none}
.results-toolbar {min-height:34px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;color:var(--muted)}
.results-toolbar p {margin:0 0 12px}
.results-toolbar button,.empty button {border:0;background:none;color:var(--link);font-size:12px;padding:0}
.resource {padding:25px 0 27px;border-top:1px solid var(--rule);scroll-margin-top:20px}
.resource-head {display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.resource h2 {margin:0;font-size:18px;font-weight:550;line-height:1.35;letter-spacing:-.018em}
.chinese {font-weight:400;color:var(--muted);font-size:13px;margin-left:9px;white-space:nowrap}
.save-button {border:0;background:none;color:#687481;display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:30px;margin-top:-4px}
.save-button:hover {color:var(--link);background:var(--wash)}
.save-button[aria-pressed="true"] {color:var(--link)}
.save-button[aria-pressed="true"] svg {fill:#e2eaf2}
.resource-meta {color:var(--muted);font-size:11px;margin:7px 0 12px;display:flex;gap:7px;flex-wrap:wrap}
.resource-description {font-size:14px;line-height:1.6;margin:0 0 18px}
.review {border-left:2px solid #d8e0e8;padding-left:15px;margin:0 0 17px}
.review-label {color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.025em;margin:0 0 5px}
blockquote {margin:0;font-size:14px;line-height:1.65;color:#3d4650}
.resource-bottom {display:flex;justify-content:space-between;align-items:baseline;gap:15px;flex-wrap:wrap;font-size:12px}
.resource-topics {display:flex;flex-wrap:wrap;gap:10px}
.topic-link {background:none;border:0;border-bottom:1px solid #e1e5e9;color:#666;font-size:11px;padding:0 0 1px}
.topic-link:hover {color:var(--link);border-color:var(--link)}
.context {font-size:12px;color:var(--muted);line-height:1.6;margin-top:14px}
.context p {margin:7px 0 0}
.empty {border-top:1px solid var(--rule);padding:36px 0 45px;color:var(--muted)}
.empty h2 {font-size:17px;color:var(--text)}
.empty p {font-size:14px}
.load-more {border:1px solid #cbd0d5;background:white;color:var(--link);width:100%;padding:13px;font-size:13px}
.load-more:hover {background:var(--wash)}
.load-more span {margin-left:10px}
.collection-footer {border-top:1px solid var(--rule);margin-top:45px;padding-top:23px;font-size:11px;line-height:1.65;color:var(--muted)}
.collection-footer p:first-child {font-size:13px;color:var(--secondary)}
.collection-footer a {display:inline-block;margin-top:6px}
@media(max-width:1000px) {
 .filter-grid {grid-template-columns:1fr 1fr}
 .filter-grid label:last-child {grid-column:1/-1}
}
@media(max-width:740px) {
 .page {margin-top:26px}
 .profile {display:grid;grid-template-columns:64px 1fr;column-gap:17px;margin-bottom:34px}
 .profile>a {grid-column:1;grid-row:1/3}
 .profile .portrait {width:64px;height:64px;margin:0}
 .profile-name {grid-column:2;font-size:23px;margin:4px 0 0;align-self:start}
 .profile>p,.profile .sidebar-note {display:none}
 .profile-nav {grid-column:2;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 17px;margin:7px 0 0;font-size:11px}
 .profile-nav span {display:none}
 .page-top {margin-bottom:28px}
 .introduction h1 {font-size:28px}
 .browse {margin-top:30px}
 .filter-grid {gap:9px;grid-template-columns:1fr 1fr}
 .filter-grid label:last-child {grid-column:1/-1}
 select {height:40px;font-size:13px}
 .filter-actions {gap:12px;flex-wrap:wrap}
 .resource {padding:23px 0}
 .resource h2 {font-size:18px}
 .resource-bottom {gap:12px}
 .preview-note {font-size:11px}
}
@media(max-width:440px) {
 .filter-grid {grid-template-columns:1fr}
 .filter-grid label:last-child {grid-column:auto}
}
@media(prefers-reduced-motion:no-preference) {html {scroll-behavior:smooth}}
