:root {
  color-scheme: dark;
  --ink: #f2eee5;
  --muted: #9ca1aa;
  --gold: #c9a660;
  --gold-light: #ead7a5;
  --canvas: #05070c;
  --panel: rgba(15, 18, 25, .86);
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #252a31;
  --muted: #6e7580;
  --gold: #987333;
  --gold-light: #78581f;
  --canvas: #eef0f2;
  --panel: rgba(255, 255, 255, .9);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 13%, rgba(100, 80, 45, .2), transparent 37%),
    radial-gradient(circle at 4% 88%, rgba(30, 77, 74, .12), transparent 31%),
    var(--canvas);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 50% 13%, rgba(194, 165, 104, .2), transparent 39%),
    radial-gradient(circle at 4% 88%, rgba(82, 160, 149, .13), transparent 32%),
    var(--canvas);
}

#star-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.entry-page { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; min-height: 100vh; padding: 24px clamp(20px, 5vw, 76px); }
.site-header { display: flex; gap: 10px; align-items: center; color: #c7c6c1; font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.header-mark { display: grid; width: 38px; height: 32px; color: #17130a; font-size: 9px; font-weight: 900; letter-spacing: -.04em; place-items: center; border: 1px solid rgba(255, 238, 190, .42); border-radius: 10px; background: linear-gradient(145deg, #efdda8, #b9904d); box-shadow: 0 7px 18px rgba(173, 125, 47, .16); }
.theme-toggle { position: absolute; top: 23px; right: clamp(20px, 5vw, 76px); z-index: 2; display: grid; width: 35px; height: 35px; padding: 0; color: var(--gold); cursor: pointer; place-items: center; border: 0; border-radius: 10px; background: transparent; transition: transform .2s ease, color .2s ease; }
.theme-toggle:hover { color: var(--gold-light); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(201, 166, 96, .38); outline-offset: 3px; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#theme-icon-sun[hidden], #theme-icon-moon[hidden], .theme-toggle .is-hidden { display: none !important; }

.entry-card { position: relative; width: 100%; max-width: 560px; min-width: 0; margin: auto; padding: clamp(38px, 6vw, 58px) clamp(24px, 7vw, 68px); overflow: hidden; text-align: center; border: 1px solid rgba(222, 201, 151, .16); border-radius: 24px; background: linear-gradient(145deg, rgba(29, 32, 40, .94), var(--panel)); box-shadow: 0 28px 80px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .065); backdrop-filter: blur(18px); }
.entry-card::after { position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, .035); border-radius: 17px; content: ""; pointer-events: none; }
.card-shine { position: absolute; top: -230px; left: 50%; width: 410px; height: 310px; border-radius: 50%; background: rgba(211, 176, 107, .13); filter: blur(38px); transform: translateX(-50%); pointer-events: none; }
.kicker, h1, .slogan, .intro, .highlights, .enter-button, .entry-note { position: relative; z-index: 1; }
.kicker { margin: 0; color: var(--gold); font-size: 9px; font-weight: 750; letter-spacing: .23em; }
h1 { margin: 15px 0 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(46px, 10vw, 68px); font-weight: 700; letter-spacing: .13em; line-height: 1.1; text-indent: .13em; text-shadow: 0 4px 26px rgba(216, 179, 97, .23); }
.slogan { margin: 12px 0 0; color: var(--gold-light); font-size: clamp(17px, 4vw, 22px); font-weight: 650; letter-spacing: .17em; text-indent: .17em; }
.intro { max-width: 320px; margin: 23px auto 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.highlights { display: flex; flex-wrap: wrap; gap: 8px 15px; justify-content: center; margin: 25px 0 28px; padding: 0; color: #d0d0ca; font-size: 11px; list-style: none; }
.highlights li { white-space: nowrap; }
.highlights span { margin-right: 3px; color: var(--gold); }

.enter-button { display: grid; grid-template-columns: 37px max-content; gap: 12px; align-items: center; justify-content: center; width: min(100%, 350px); min-height: 68px; margin: 0 auto; padding: 9px 15px; overflow: hidden; border: 1px solid rgba(234, 215, 165, .52); border-radius: 14px; background: linear-gradient(135deg, rgba(234, 215, 165, .17), rgba(134, 101, 47, .15)), #15130e; box-shadow: 0 13px 30px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 245, 211, .13); color: var(--gold-light); text-align: left; text-decoration: none; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.enter-button::before { position: absolute; top: 0; left: -50%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 240, 196, .16), transparent); content: ""; transform: skewX(-20deg); transition: left .5s ease; }
.enter-button:hover { border-color: rgba(244, 223, 169, .85); background: linear-gradient(135deg, rgba(234, 215, 165, .24), rgba(134, 101, 47, .19)), #18150f; box-shadow: 0 16px 36px rgba(0, 0, 0, .42), 0 0 26px rgba(201, 166, 96, .1), inset 0 1px rgba(255, 245, 211, .18); transform: translateY(-2px); }
.enter-button:hover::before { left: 115%; }
.enter-button:active { transform: translateY(0); }
.enter-button:focus-visible { outline: 3px solid rgba(234, 215, 165, .55); outline-offset: 4px; }
.enter-button__seal { position: relative; z-index: 1; display: grid; width: 37px; height: 37px; color: #201807; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f0dfac, #b98f48); box-shadow: inset 0 1px rgba(255, 255, 255, .55); }
.enter-button__seal svg { width: 19px; height: 19px; }
.enter-button__copy { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.enter-button__copy strong { font-size: 16px; letter-spacing: .08em; }
.enter-button__copy small { color: #a9a194; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.entry-note { margin: 21px 0 0; color: #7d828b; font-size: 10px; }
footer { margin-top: auto; padding-top: 24px; color: #737983; font-size: 10px; text-align: center; }

html[data-theme="light"] #star-canvas { opacity: .48; }
html[data-theme="light"] .site-header { color: #4a515b; }
html[data-theme="light"] .entry-card { border-color: rgba(51, 58, 69, .12); background: linear-gradient(145deg, rgba(255, 255, 255, .97), var(--panel)); box-shadow: 0 26px 70px rgba(42, 50, 61, .14), inset 0 1px rgba(255, 255, 255, .85); }
html[data-theme="light"] .entry-card::after { border-color: rgba(42, 49, 60, .045); }
html[data-theme="light"] .card-shine { background: rgba(204, 172, 103, .16); }
html[data-theme="light"] .highlights { color: #5f6671; }
html[data-theme="light"] .entry-note, html[data-theme="light"] footer { color: #777f8b; }
html[data-theme="light"] .theme-toggle { color: #886624; }
html[data-theme="light"] .theme-toggle:hover { color: #5f4410; }
html[data-theme="light"] .enter-button { border-color: rgba(115, 81, 22, .48); background: linear-gradient(135deg, rgba(185, 140, 61, .2), rgba(98, 67, 17, .1)), #64491f; box-shadow: 0 13px 25px rgba(100, 72, 28, .2), inset 0 1px rgba(255, 245, 211, .14); color: #fff0c6; }
html[data-theme="light"] .enter-button__copy small { color: #e8d8a8; }

@media (max-width: 480px) { .entry-page { padding: 18px; } .site-header { font-size: 11px; } .theme-toggle { top: 16px; right: 18px; width: 33px; height: 33px; } .entry-card { margin: auto 0; padding: 42px 22px 45px; border-radius: 21px; } .entry-card::after { border-radius: 14px; } .highlights { gap: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }