:root{
  --bg:#030405;
  --paper:#f2eee5;
  --soft:rgba(242,238,229,.66);
  --faint:rgba(242,238,229,.38);
  --line:rgba(242,238,229,.16);
  --line-strong:rgba(242,238,229,.3);
  --gold:#d9bc79;
  --rose:#db8faa;
  --ice:#9db7d0;
  --amber:#c9a06a;
  --top:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--paper);font-family:"Noto Serif SC","Songti SC",serif}
a,button{color:inherit;font:inherit}
a{text-decoration:none}
button{border:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.theatre{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 81% 28%,rgba(217,188,121,.1),transparent 26%),
    radial-gradient(circle at 18% 82%,rgba(120,42,74,.12),transparent 28%),
    #030405;
}
.theatre::before{
  position:absolute;
  z-index:-2;
  inset:0;
  content:"";
  background:
    linear-gradient(90deg,transparent 0 31.2%,rgba(255,255,255,.07) 31.25%,transparent 31.35%),
    repeating-linear-gradient(90deg,transparent 0 8.2vw,rgba(255,255,255,.025) 8.22vw 8.26vw),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%);
}
.theatre::after{
  position:absolute;
  z-index:-1;
  left:31.25%;
  right:0;
  top:var(--top);
  bottom:0;
  content:"";
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 0 .55px,transparent .7px);
  background-size:7px 7px;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 80%,transparent);
}
.topbar{
  position:relative;
  z-index:10;
  height:calc(var(--top) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(3,4,5,.78);
  backdrop-filter:blur(20px);
}
.back{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-right:1px solid var(--line);
  color:var(--soft);
  font:32px/1 serif;
}
.brand{padding-left:14px;display:grid;gap:1px}
.brand small{color:var(--gold);font:9px "DM Mono",monospace;letter-spacing:.28em}
.brand strong{font-size:14px;font-weight:500;letter-spacing:.16em}
.help{margin-left:auto;min-width:88px;min-height:44px;background:transparent;color:var(--soft);font-size:11px;letter-spacing:.08em}
.intro{
  position:absolute;
  z-index:3;
  left:max(32px,calc(env(safe-area-inset-left) + 24px));
  top:calc(var(--top) + 9vh);
  width:25.5vw;
  max-width:420px;
}
.intro::after{
  display:block;
  width:42px;
  height:1px;
  margin-top:24px;
  content:"";
  background:var(--gold);
  box-shadow:52px 0 0 rgba(217,188,121,.3);
}
.intro>span{color:var(--gold);font:9px "DM Mono",monospace;letter-spacing:.22em}
.intro h1{
  margin:18px 0 17px;
  font-size:clamp(42px,5.2vw,78px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:.055em;
  text-wrap:balance;
}
.intro p{margin:0;color:var(--soft);font-size:13px;line-height:1.9;letter-spacing:.04em}
.shelf{
  position:absolute;
  z-index:3;
  left:34%;
  right:max(28px,calc(env(safe-area-inset-right) + 20px));
  top:calc(var(--top) + 5.5vh);
  bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,22px);
  perspective:1200px;
}
.theme-card{
  --accent:var(--rose);
  position:relative;
  min-width:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(142px,.58fr);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(8,9,11,.92);
  box-shadow:0 34px 80px rgba(0,0,0,.4);
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.theme-card--gu{--accent:var(--ice)}
.theme-card--lu{--accent:var(--amber)}
.theme-card::before{
  position:absolute;
  z-index:5;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  content:"";
  background:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent);
}
.theme-card:hover,.theme-card:focus-visible{
  z-index:2;
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 65%,white 10%);
  box-shadow:0 40px 100px rgba(0,0,0,.62),0 0 45px color-mix(in srgb,var(--accent) 12%,transparent);
  outline:none;
}
.theme-visual{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:#08090b;
}
.theme-visual::after{
  position:absolute;
  inset:0;
  content:"";
  background:
    linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.2) 45%,rgba(0,0,0,.14) 100%),
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 62%);
}
.theme-visual img{width:100%;height:100%;object-fit:cover;object-position:center 17%;filter:saturate(.7) contrast(1.08)}
.theme-visual .new,.theme-visual .number{position:absolute;z-index:4}
.new{
  left:13px;
  top:13px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);
  background:rgba(3,4,5,.72);
  color:color-mix(in srgb,var(--accent) 78%,white 22%);
  font:9px "DM Mono",monospace;
  letter-spacing:.12em;
  backdrop-filter:blur(8px);
}
.number{right:10px;bottom:-4px;color:rgba(255,255,255,.52);font:300 clamp(34px,4.4vw,64px)/1 "DM Mono",monospace}
.contract-art{
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 24%),
    linear-gradient(145deg,#151820,#050608 70%);
}
.contract-art::before{
  position:absolute;
  z-index:2;
  left:50%;
  top:47%;
  content:"顾";
  transform:translate(-50%,-50%);
  color:transparent;
  font-size:clamp(76px,10vw,150px);
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent) 48%,transparent);
  text-shadow:0 0 36px color-mix(in srgb,var(--accent) 16%,transparent);
}
.theme-card--lu .contract-art::before{content:"陆"}
.contract-art i{
  position:absolute;
  z-index:1;
  left:50%;
  top:48%;
  width:58%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(18deg);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:50%;
}
.contract-art i+ i{width:35%;transform:translate(-50%,-50%) rotate(-21deg)}
.theme-copy{position:relative;padding:15px 16px 14px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(12,13,16,.95),#07080a)}
.theme-copy::before{
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:1px;
  content:"";
  background:linear-gradient(90deg,var(--accent),transparent);
}
.theme-copy>small{color:color-mix(in srgb,var(--accent) 78%,white 16%);font-size:10px;letter-spacing:.05em}
.theme-copy h2{margin:7px 0 6px;font-size:clamp(21px,2.25vw,32px);font-weight:400;line-height:1.06;letter-spacing:.08em}
.theme-copy p{margin:0;color:var(--soft);font-size:11px;line-height:1.65}
.meta{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);font:9px "DM Mono",monospace}
.meta span{color:var(--faint)}
.meta b{margin-left:auto;color:color-mix(in srgb,var(--accent) 78%,white 20%);font-weight:400}
.guide{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:.24s}
.guide.open{opacity:1;visibility:visible}
.guide-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(0,0,0,.84);backdrop-filter:blur(10px)}
.guide>div{position:relative;width:min(560px,100%);padding:29px;border:1px solid var(--line-strong);background:linear-gradient(145deg,#151518,#090a0c);box-shadow:0 35px 120px #000}
.guide>div::before{position:absolute;left:0;top:0;width:2px;height:100%;content:"";background:var(--gold)}
.guide-close{position:absolute;right:4px;top:4px;width:44px;height:44px;background:transparent;color:var(--soft);font:24px/1 sans-serif}
.guide small{color:var(--gold);font:9px "DM Mono",monospace;letter-spacing:.2em}
.guide h2{margin:10px 0 8px;font-size:26px;font-weight:500}
.guide p,.guide li{color:var(--soft);font-size:11px;line-height:1.85}
.guide ul{margin:16px 0 0;padding:13px 13px 13px 30px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
@media(max-width:900px),(max-height:500px){
  :root{--top:46px}
  .topbar{height:calc(var(--top) + env(safe-area-inset-top))}
  .intro{top:calc(var(--top) + 4vh);left:max(20px,calc(env(safe-area-inset-left) + 14px));width:27.5vw}
  .intro>span{font-size:8px}
  .intro h1{margin:9px 0;font-size:clamp(26px,4vw,37px)}
  .intro p{font-size:10px;line-height:1.62}
  .intro::after{margin-top:12px}
  .shelf{left:31%;top:calc(var(--top) + 3vh);right:max(12px,calc(env(safe-area-inset-right) + 8px));bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px));gap:8px}
  .theme-card{grid-template-rows:minmax(0,1fr) minmax(120px,.66fr)}
  .theme-copy{padding:10px}
  .theme-copy::before{left:10px;right:10px}
  .theme-copy>small{font-size:9px}
  .theme-copy h2{margin:5px 0;font-size:18px}
  .theme-copy p{font-size:10px;line-height:1.45}
  .meta{padding-top:7px;font-size:8px}
  .new{left:9px;top:9px;font-size:8px}
}
@media(max-width:760px),(max-height:370px){
  .brand small{display:none}
  .brand strong{font-size:12px}
  .help{font-size:10px}
  .intro{width:25vw}
  .intro h1{font-size:24px}
  .intro p,.intro::after,.theme-copy p{display:none}
  .shelf{left:28.5%}
  .theme-card{grid-template-rows:minmax(0,1fr) 103px}
  .theme-copy>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .theme-copy h2{font-size:16px}
  .meta span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01s!important}}