:root{--night:#17131a;--wine:#322436;--rose:#8f3155;--pink:#f09ab8;--white:#f8f1f4;--muted:#c6b4c0;--line:#4b3b4d;--serif:"Songti SC","Noto Serif CJK SC","STSong",Georgia,serif;--sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:absolute;inset:0 0 auto;height:840px;background:radial-gradient(ellipse at 72% 33%,#70304d50,transparent 48%),linear-gradient(120deg,#17131a,#241922 75%,#17131a);z-index:-1;pointer-events:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;background:var(--white);color:var(--night);padding:10px 14px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.shell{width:min(100% - 64px,1240px);margin-inline:auto}
.site-header{height:90px;display:flex;align-items:center;gap:48px;border-bottom:1px solid #ffffff24}
.brand{display:flex;align-items:center;gap:12px;line-height:1.1;font-family:var(--serif);font-size:19px;font-weight:700;white-space:nowrap}
.brand small{display:block;color:var(--pink);font:500 11px/1.2 var(--sans);letter-spacing:.2em;margin-top:6px}
.brand-glyph{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--pink);border-radius:50%;color:var(--pink);font:26px/1 var(--serif)}
.header-nav{display:flex;gap:32px;margin-left:auto;font-size:14px;color:var(--muted)}
.header-nav a:hover,.quiet-link:hover,.site-footer a:hover{color:var(--pink)}
.header-cta{border:1px solid #e4a7bd80;border-radius:4px;padding:11px 16px;font-size:13px;color:var(--white);white-space:nowrap}
.header-cta:hover{background:var(--rose);border-color:var(--rose)}
.header-cta span{margin-left:12px;color:var(--pink)}
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);gap:8%;align-items:center;min-height:680px;padding-block:62px 68px}
.hero-copy{max-width:600px}
.hero-prelude{display:flex;align-items:center;gap:13px;color:var(--pink);font-size:13px;letter-spacing:.11em;margin:0 0 32px}
.prelude-line{display:block;height:1px;width:38px;background:var(--pink)}
h1,h2,p{margin-top:0}
h1,h2{font-family:var(--serif)}
h1{font-size:clamp(58px,6.6vw,104px);font-weight:700;line-height:1.16;letter-spacing:-.045em;margin-bottom:30px}
h1 span{color:var(--pink)}
.hero-lead{color:#e2d4dd;font-size:17px;line-height:1.9;max-width:31em;margin-bottom:32px}
.hero-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap}
.primary-button{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;background:var(--rose);padding:17px 20px;min-width:206px;border-radius:4px;font-weight:700;font-size:15px;box-shadow:0 12px 45px #a6426029}
.primary-button:hover{background:#aa4166}
.primary-button span{font-weight:400}
.quiet-link{font-size:14px;color:var(--muted);white-space:nowrap}
.quiet-link span{padding-left:7px}
.hero-footnote{font-size:12px;color:#a891a0;margin:23px 0 0}
.hero-poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden;min-height:545px;padding:26px 30px;border:1px solid #efa1bd60;border-radius:5px;background:radial-gradient(circle at 46% 44%,#ad4e70 0,#672743 35%,#361b34 70%,#221822 100%);box-shadow:0 38px 90px #0008,18px 18px 0 #6f2b4850;transform:rotate(1.5deg)}
.hero-poster::before{content:"";position:absolute;inset:10px;border:1px solid #f8e1e449;pointer-events:none}
.hero-poster::after{content:"";position:absolute;inset:auto -20% -32%;height:50%;background:radial-gradient(ellipse at center,#efa1bd40,transparent 67%);z-index:-1}
.hero-poster:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 48px 100px #0009,12px 12px 0 #6f2b4850}
.poster-light{position:absolute;width:310px;height:650px;background:linear-gradient(to bottom,#f9b6cf70,transparent 72%);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);opacity:.3;pointer-events:none;z-index:-1}
.poster-light-one{left:-145px;top:-44px;transform:rotate(-18deg)}
.poster-light-two{right:-126px;top:-72px;transform:rotate(18deg)}
.hero-poster-top,.hero-poster-bottom{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.13em}
.hero-poster-top{color:#fff0f4}.hero-poster-top span{color:#f6c9d8}
.hero-poster-center{position:relative;display:flex;justify-content:center;align-items:center;flex:1;min-height:390px}
.poster-moon{width:290px;height:290px;border-radius:50%;border:1px solid #ffd2e396;box-shadow:0 0 0 24px #f9c4d815,0 0 0 55px #f9c4d80b,inset 0 0 65px #f7b4d435;background:radial-gradient(circle at 39% 36%,#f9c9daaa,#d685a950 50%,#6c3e6050 78%)}
.poster-big-word{position:absolute;color:#fff8f6;text-align:center;font:700 clamp(46px,5vw,72px)/1.1 var(--serif);letter-spacing:.06em;text-shadow:0 5px 18px #2d0c27a3}
.hero-poster-bottom{padding-top:15px;border-top:1px solid #f8d6df5b;letter-spacing:.02em}.hero-poster-bottom span:last-child{color:#f7c1d4}
.quick{padding:21px 0 38px;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24}
.quick-heading{display:flex;align-items:baseline;gap:17px;margin-bottom:20px}.quick-heading h2{font-size:23px;margin:0}.quick-heading p{font-size:13px;color:var(--muted);margin:0}
.quick-rail{display:flex;gap:10px;overflow:auto;padding-bottom:8px;scrollbar-color:#6d4a60 transparent}
.quick-item{display:flex;align-items:center;gap:12px;flex:1 0 auto;min-width:165px;padding:11px 14px;border:1px solid #ffffff2a;border-radius:3px;color:var(--white);font-size:14px;white-space:nowrap}
.quick-item>span:last-child{margin-left:auto;color:var(--pink)}
.quick-item.first{border-color:#d5819f;background:#762c4b}
.quick-item:hover{border-color:var(--pink);background:#42283d}
.quick-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#ffffff1d;color:#fff;font-family:var(--serif);font-size:13px}
.directory{padding-block:100px 112px}
.directory-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
.small-kicker{color:var(--pink);font-size:13px;letter-spacing:.12em;margin-bottom:12px}
.directory-intro h2{font-size:clamp(35px,4vw,58px);line-height:1.2;margin:0}
.directory-intro>p{font-size:14px;line-height:1.8;color:var(--muted);max-width:24em;margin:0 0 4px}
.directory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:17px}
.search-field{display:flex;align-items:center;gap:11px;width:min(100%,360px);height:48px;padding:0 14px;border:1px solid #8f7187;border-radius:4px;background:#ffffff0a;color:var(--muted)}
.search-field:focus-within{border-color:var(--pink)}
.search-field svg{width:20px;height:20px;flex:none}
.search-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--white);font-size:13px}
.search-field input::placeholder{color:#b29fac;opacity:1}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filter{border:1px solid transparent;background:transparent;color:var(--muted);padding:10px 12px;border-radius:3px;font-size:13px}
.filter:hover{color:var(--white);border-color:#8f7187}.filter.active{background:#f8f1f4;color:var(--night);font-weight:700}
.result-count{font-size:12px;color:var(--muted);margin:0 0 18px}
.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.site-poster{min-width:0;display:block;color:var(--white)}
.site-poster[hidden]{display:none}
.site-poster-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden;aspect-ratio:4/5;padding:18px;border:1px solid #ffffff35;border-radius:3px;background:linear-gradient(155deg,var(--cover-a),var(--cover-b));box-shadow:0 17px 32px #0005}
.site-poster-art::before{content:"";position:absolute;inset:8px;border:1px solid #ffffff45;pointer-events:none}
.site-poster-art::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-24%;height:58%;background:radial-gradient(ellipse,#fff5,transparent 65%);z-index:-1}
.site-poster:hover .site-poster-art{transform:translateY(-5px);border-color:var(--pink);box-shadow:0 24px 45px #0007}
.site-poster-label{position:relative;z-index:1;align-self:flex-start;background:#17131a8f;padding:5px 8px;font-size:11px;letter-spacing:.09em}
.site-poster-art strong{position:relative;z-index:1;margin:auto 0;text-align:center;font:700 clamp(30px,3vw,48px)/1.13 var(--serif);letter-spacing:.04em;text-shadow:0 3px 18px #160d1dad}
.site-poster-slogan{position:relative;z-index:1;font-size:11px;line-height:1.4;letter-spacing:.03em;color:#fff9}
.art-orb{position:absolute;left:50%;top:48%;width:72%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #fff8;box-shadow:inset 0 0 40px #fff3,0 0 0 19px #ffffff0d,0 0 0 40px #ffffff08;background:radial-gradient(circle at 38% 31%,#ffffff6b,transparent 50%);z-index:-1}
.site-poster-info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 0 3px}
.site-poster-info strong,.site-poster-info small{display:block}.site-poster-info strong{font-size:15px}.site-poster-info small{font-size:11px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-poster-info>span:last-child{color:var(--pink);font-size:20px}
.site-poster-feature{grid-column:span 2}
.site-poster-feature .site-poster-art{aspect-ratio:unset;height:calc((min(100vw - 64px,1240px) - 72px)/4 * 1.25);min-height:300px;background:radial-gradient(circle at 62% 44%,#a84b72,#682b4d 48%,#2a1a2d 88%);padding:25px}
.site-poster-feature .site-poster-art strong{font-size:clamp(52px,6vw,86px);line-height:1.1;text-align:left;margin:auto 0 auto 8%;text-shadow:0 7px 25px #2e1026}
.feature-orbit{position:absolute;width:55%;aspect-ratio:1;border:1px solid #fbd2e3ab;border-radius:50%;right:8%;top:50%;transform:translateY(-50%);box-shadow:0 0 0 24px #ffffff14,0 0 0 55px #ffffff09,inset 0 0 80px #ffd5e250;z-index:-1}
.site-poster-feature .site-poster-slogan{font-size:13px}
.hue-blue{--cover-a:#4164a1;--cover-b:#1e2a57}.hue-ink{--cover-a:#276388;--cover-b:#142739}.hue-lilac{--cover-a:#9274bd;--cover-b:#342851}.hue-rose{--cover-a:#a65d81;--cover-b:#49253e}.hue-gold{--cover-a:#b59156;--cover-b:#4e352c}.hue-teal{--cover-a:#4b958e;--cover-b:#1f4547}.hue-coral{--cover-a:#c77b73;--cover-b:#643646}.hue-moss{--cover-a:#718b66;--cover-b:#304538}.hue-plum{--cover-a:#815c99;--cover-b:#3d294b}.hue-slate{--cover-a:#6b8293;--cover-b:#2e3d4d}.hue-indigo{--cover-a:#6271bc;--cover-b:#2d315d}.hue-sienna{--cover-a:#b77c65;--cover-b:#5d3a3a}
.empty-state[hidden]{display:none}.empty-state{display:flex;flex-direction:column;gap:7px;align-items:center;padding:70px 20px;border:1px dashed #8f7187;color:var(--muted);text-align:center}.empty-state strong{color:var(--white);font-size:18px}
.site-footer{display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;padding:49px 0 25px;border-top:1px solid #ffffff2b}
.site-footer>div{position:relative;padding-left:58px}.footer-mark{position:absolute;left:0;top:-6px;color:var(--pink);font-size:43px}.site-footer h2{font-size:27px;margin:0 0 9px}.site-footer p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}.site-footer>a{font-size:14px;border-bottom:1px solid var(--pink);padding-bottom:8px;white-space:nowrap}.site-footer>a span{margin-left:10px}.footer-end{grid-column:1/-1;border-top:1px solid #ffffff1c;padding-top:18px}
@media(max-width:1050px){.header-nav{gap:16px}.hero{gap:5%;grid-template-columns:minmax(0,1fr) minmax(310px,.85fr)}.poster-grid{gap:16px}.site-poster-feature .site-poster-art{height:auto;aspect-ratio:8/5;min-height:0}.directory-toolbar{align-items:stretch;flex-direction:column}.search-field{width:100%;max-width:480px}}
@media(max-width:760px){.shell{width:min(100% - 36px,600px)}.site-header{height:72px;gap:10px}.brand{font-size:16px}.brand-glyph{width:33px;height:33px;font-size:22px}.header-nav{display:none}.header-cta{margin-left:auto;padding:9px 10px;font-size:12px}.header-cta span{margin-left:3px}.hero{grid-template-columns:1fr;gap:39px;min-height:0;padding-block:52px 60px}.hero-prelude{margin-bottom:20px}.hero h1{font-size:clamp(51px,11vw,76px);margin-bottom:20px}.hero-lead{font-size:15px;line-height:1.85}.hero-poster{min-height:490px;max-width:470px;margin-inline:auto;width:calc(100% - 18px)}.hero-poster-center{min-height:350px}.poster-big-word{font-size:62px}.quick{padding-top:18px}.quick-heading h2{font-size:21px}.directory{padding-block:70px 75px}.directory-intro{align-items:start;flex-direction:column;gap:14px}.directory-intro h2{font-size:38px}.directory-intro>p{font-size:13px}.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.site-poster-feature{grid-column:span 2}.site-poster-feature .site-poster-art{height:340px;aspect-ratio:unset}.site-poster-feature .site-poster-art strong{font-size:64px}.site-poster-art{padding:12px}.site-poster-art strong{font-size:clamp(25px,6vw,39px)}.site-poster-slogan{font-size:10px}.site-poster-info strong{font-size:13px}.site-poster-info small{font-size:10px}.site-footer{grid-template-columns:1fr;gap:22px}.site-footer>div{padding-left:43px}.footer-mark{font-size:36px}.site-footer h2{font-size:24px}.footer-end{grid-column:auto}}
@media(max-width:430px){.shell{width:calc(100% - 28px)}.brand small{font-size:10px}.header-cta{font-size:11px}.hero h1{font-size:50px}.hero-poster{min-height:430px;padding:20px}.hero-poster-center{min-height:310px}.poster-moon{width:245px;height:245px}.poster-big-word{font-size:53px}.hero-poster-bottom{font-size:10px}.filters{gap:4px}.filter{padding:9px 10px}.site-poster-feature .site-poster-art{height:300px}.site-poster-feature .site-poster-art strong{font-size:56px}.site-poster-art strong{font-size:27px}.site-poster-info small{max-width:135px}}
@media(max-width:350px){.header-cta{font-size:0}.header-cta span{font-size:16px}.hero h1{font-size:43px}.poster-grid{grid-template-columns:1fr}.site-poster-feature{grid-column:auto}.site-poster-art{aspect-ratio:5/4}.site-poster-feature .site-poster-art{height:290px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-poster,.site-poster-art{transition:none!important}}