:root{--bg:#f7f3ea;--paper:#fff;--text:#17201f;--muted:#66706d;--line:#ded8c9;--accent:#b5402c;--accent2:#2f6f73;--shadow:0 18px 50px rgba(20,25,25,.12)}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif;background:var(--bg);color:var(--text);letter-spacing:0}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover;background:#ddd}
body.harbor{--bg:#edf6f7;--paper:#ffffff;--text:#102333;--muted:#607685;--line:#cfe1e5;--accent:#006d8f;--accent2:#e49d35}
body.paper{--bg:#f6efe3;--paper:#fffaf1;--text:#2a211c;--muted:#806f63;--line:#e2d2bd;--accent:#b12d26;--accent2:#48705a}
body.night{--bg:#101215;--paper:#1b2026;--text:#f4efe6;--muted:#b7b0a7;--line:#333a42;--accent:#e1b553;--accent2:#78b7c8}
body.sakura{--bg:#fff6f6;--paper:#ffffff;--text:#26332b;--muted:#68736d;--line:#f1d9d9;--accent:#d65b78;--accent2:#5f9d7a}
body.magazine{--bg:#eeeeea;--paper:#ffffff;--text:#171717;--muted:#686868;--line:#d5d5cf;--accent:#e06b2d;--accent2:#505f74}
.site-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(16px,4vw,54px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand strong{font-size:28px}.brand span{font-size:12px;color:var(--muted)}.site-header nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.site-header nav a,.filters a{padding:9px 13px;border:1px solid var(--line);border-radius:999px;font-size:14px}.site-header nav a.active,.filters a.active{background:var(--text);color:var(--paper);border-color:var(--text)}
main{width:min(1180px,calc(100% - 32px));margin:auto}.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center;padding:42px 0 24px}.hero-copy{padding:34px;border-left:8px solid var(--accent);background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--paper) 70%,var(--accent2)))}.hero-copy p{margin:0 0 14px;color:var(--accent);font-weight:700}.hero-copy h1{margin:0 0 16px;font-size:clamp(34px,5vw,64px);line-height:1.08}.hero-copy div{color:var(--muted);font-size:17px;line-height:1.9}.primary{display:inline-flex;margin-top:22px;padding:12px 18px;background:var(--accent);color:white;border-radius:6px;font-weight:700}.hero-picks{display:grid;grid-template-columns:1.05fr 1fr;gap:12px}.feature-card{grid-row:span 4;min-height:430px;position:relative;overflow:hidden;border-radius:8px;box-shadow:var(--shadow)}.feature-card img{height:100%}.feature-card span,.feature-card b,.feature-card small{position:absolute;left:16px;right:16px}.feature-card .tag{top:16px}.feature-card b{bottom:48px;color:white;font-size:25px;text-shadow:0 2px 8px #000}.feature-card small{bottom:20px;color:white}.slim{display:grid;grid-template-columns:42px 74px 1fr;gap:12px;align-items:center;min-height:96px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.slim i{font-style:normal;font-weight:800;color:var(--accent)}.slim img{height:78px;border-radius:6px}.slim b{display:block}.slim small{color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 34px}.quick a{padding:18px;background:var(--text);color:var(--paper);border-radius:8px;text-align:center;font-weight:700}.section{padding:26px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;border-bottom:2px solid var(--line);padding-bottom:10px}.section-head h2{margin:0;font-size:28px}.section-head a{color:var(--accent);font-weight:700}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{position:relative;display:block;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0}.card img{height:210px}.card b{display:block;padding:10px 10px 4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card small{display:block;padding:0 10px 12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{position:absolute;top:8px;left:8px;background:var(--accent);color:white;border-radius:999px;padding:5px 8px;font-size:12px}.guide,.library-hero{margin:28px 0;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.guide h2,.library-hero h1{margin:0 0 10px}.guide p,.library-hero p{margin:0;color:var(--muted);line-height:1.9}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.library-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;margin-bottom:36px}.detail{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start;margin:40px 0;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.detail>img{height:460px;border-radius:8px}.detail h1{font-size:42px;margin:10px 0 18px}.detail p{line-height:1.9;color:var(--muted)}dl{display:grid;grid-template-columns:70px 1fr;gap:10px 18px}dt{color:var(--muted)}dd{margin:0;font-weight:700}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:26px clamp(16px,4vw,54px);border-top:1px solid var(--line);background:var(--paper);color:var(--muted)}.site-footer strong{color:var(--text);font-size:22px}.site-footer nav{display:flex;gap:14px;flex-wrap:wrap}
body.harbor .hero{grid-template-columns:1.2fr .95fr}.harbor .hero-copy{border-left:0;border-top:8px solid var(--accent);border-radius:8px}.harbor .hero-picks{grid-template-columns:1fr}.harbor .feature-card{min-height:300px}.harbor .grid{grid-template-columns:repeat(4,1fr)}.harbor .card img{height:180px}
body.paper .hero{grid-template-columns:.9fr 1.3fr}.paper .hero-copy{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}.paper .quick{grid-template-columns:repeat(2,1fr)}.paper .grid{grid-template-columns:repeat(6,1fr)}.paper .card img{height:170px}
body.night .hero{grid-template-columns:1fr 1fr}.night .card,.night .slim,.night .guide,.night .library-hero,.night .detail{box-shadow:none}.night .quick a{background:var(--accent);color:#111}.night .grid{grid-template-columns:repeat(4,1fr)}.night .card img{height:220px}
body.sakura .hero{grid-template-columns:1fr}.sakura .hero-picks{grid-template-columns:repeat(5,1fr)}.sakura .feature-card{grid-row:auto;min-height:260px}.sakura .slim{grid-template-columns:1fr}.sakura .slim i{display:none}.sakura .slim img{height:150px}.sakura .grid{grid-template-columns:repeat(5,1fr)}.sakura .card img{height:185px}
body.magazine .hero{grid-template-columns:1fr}.magazine .hero-copy{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;border-left:0;border-bottom:8px solid var(--accent)}.magazine .hero-copy p{grid-column:1}.magazine .hero-copy h1{grid-column:2;grid-row:1 / span 2}.magazine .hero-copy div{grid-column:1 / span 2}.magazine .grid{grid-template-columns:repeat(4,1fr)}.magazine .card img{height:240px}
@media (max-width:900px){.site-header{align-items:flex-start;flex-direction:column}.hero,.detail{grid-template-columns:1fr}.hero-picks,.sakura .hero-picks{grid-template-columns:1fr}.quick,.paper .quick{grid-template-columns:1fr 1fr}.grid,.library-grid,.harbor .grid,.paper .grid,.night .grid,.sakura .grid,.magazine .grid{grid-template-columns:repeat(2,1fr)}.detail>img{height:auto;aspect-ratio:2/3}.site-footer{flex-direction:column}.magazine .hero-copy{display:block}.card img{height:190px}}
@media (max-width:520px){main{width:min(100% - 20px,1180px)}.brand strong{font-size:24px}.hero-copy{padding:22px}.quick{grid-template-columns:1fr}.grid,.library-grid,.harbor .grid,.paper .grid,.night .grid,.sakura .grid,.magazine .grid{grid-template-columns:1fr 1fr;gap:10px}.card img{height:160px}.slim{grid-template-columns:32px 62px 1fr}.slim img{height:68px}.hero-copy h1{font-size:32px}}
a,.card,.slim,.feature-card,.quick a,.primary,.site-header nav a,.filters a,.section-head a{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease}
.card:hover,.slim:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,24,24,.16);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.card:hover img,.feature-card:hover img,.slim:hover img{filter:saturate(1.08) contrast(1.04)}
.quick a:hover,.primary:hover,.site-header nav a:hover,.filters a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,24,24,.14)}
.quick a:active,.primary:active,.site-header nav a:active,.filters a:active,.card:active,.slim:active,.feature-card:active{transform:translateY(1px) scale(.99)}
.card:focus-visible,.slim:focus-visible,.feature-card:focus-visible,.quick a:focus-visible,.primary:focus-visible,.site-header nav a:focus-visible,.filters a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:3px}