: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; align-items: center; min-height: 38px; }
.site-header__image { display: block; width: min(286px, calc(100vw - 102px)); height: auto; content: url("../assets/brand-lockup-dark.svg"); }
.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; }
.hero-art, .enter-button, .entry-note { position: relative; z-index: 1; }
.hero-art { display: block; width: min(100%, 440px); height: auto; margin: 0 auto 28px; content: url("../assets/access-hero-dark.svg"); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.enter-button { display: grid; grid-template-columns: 18px max-content; gap: 9px; align-items: center; justify-content: center; width: min(100%, 320px); min-height: 54px; margin: 0 auto; padding: 7px 14px; overflow: hidden; isolation: isolate; border: 0; border-radius: 0; background: linear-gradient(135deg, rgba(222, 180, 96, .62), rgba(147, 97, 23, .52) 52%, rgba(79, 47, 8, .58)); box-shadow: 0 12px 26px rgba(71, 47, 12, .2), inset 0 1px rgba(255, 250, 229, .42), inset 0 -1px rgba(73, 43, 5, .28); backdrop-filter: blur(12px) saturate(1.25); color: #fff4d9; 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::after { content: none; }
.enter-button:hover { background: linear-gradient(135deg, rgba(237, 197, 112, .7), rgba(160, 105, 25, .58) 52%, rgba(89, 53, 8, .64)); box-shadow: 0 15px 30px rgba(71, 47, 12, .28), 0 0 24px rgba(202, 153, 61, .16), inset 0 1px rgba(255, 252, 234, .52), inset 0 -1px rgba(73, 43, 5, .26); transform: translateY(-2px); }
.enter-button:hover::before { left: 115%; }
.enter-button:active { box-shadow: 0 6px 13px rgba(71, 47, 12, .16), inset 0 1px rgba(255, 247, 220, .18), inset 0 -1px rgba(73, 43, 5, .3); transform: translateY(1px); }
.enter-button:focus-visible { outline: 3px solid rgba(234, 215, 165, .55); outline-offset: 4px; }
.enter-button__icon { position: relative; z-index: 1; width: 18px; height: 18px; color: #fff5d9; stroke: currentColor; }
.enter-button__copy { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.enter-button__copy strong { font-size: 15px; letter-spacing: .07em; }
.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__image { content: url("../assets/brand-lockup-light.svg"); }
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"] .hero-art { content: url("../assets/access-hero-light.svg"); }
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 { background: linear-gradient(135deg, rgba(216, 175, 94, .58), rgba(153, 103, 28, .48) 52%, rgba(100, 61, 11, .52)); box-shadow: 0 12px 24px rgba(104, 75, 27, .18), inset 0 1px rgba(255, 252, 232, .5), inset 0 -1px rgba(77, 45, 7, .2); color: #fff5d9; }
html[data-theme="light"] .enter-button:hover { background: linear-gradient(135deg, rgba(231, 190, 108, .68), rgba(165, 109, 28, .55) 52%, rgba(108, 65, 11, .58)); box-shadow: 0 15px 28px rgba(104, 75, 27, .25), 0 0 22px rgba(176, 126, 41, .14), inset 0 1px rgba(255, 253, 237, .58), inset 0 -1px rgba(77, 45, 7, .2); }
html[data-theme="light"] .enter-button__copy small { color: #e8d8a8; }

@media (max-width: 480px) { .entry-page { padding: 18px; } .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; } .hero-art { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
