@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=ZCOOL+XiaoWei&display=swap');

:root {
  --ink: #15110d;
  --paper: #e8dfd0;
  --paper-dim: rgba(232, 223, 208, .62);
  --vermillion: #b83a25;
  --gold: #c7a268;
  --panel: rgba(20, 16, 12, .78);
  --hairline: rgba(232, 223, 208, .18);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); font-family: "Noto Serif SC", "Songti SC", serif; }
button { color: inherit; font: inherit; }

#experience { position: relative; width: 100%; height: 100%; min-height: 520px; overflow: hidden; background: #17120e; }
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }

.ambient-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .15; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.frame { position: absolute; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 8%, var(--hairline) 92%, transparent); pointer-events: none; }
.frame-top { top: 82px; }
.frame-bottom { bottom: 30px; }

.topbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.seal { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(236, 203, 149, .55); background: var(--vermillion); color: #f3dfbd; font-family: "ZCOOL XiaoWei", serif; font-size: 21px; box-shadow: inset 0 0 0 3px rgba(67, 12, 8, .2); transform: rotate(-2deg); }
.eyebrow, .kicker, .panel-index { margin: 0; color: var(--gold); font-family: Georgia, serif; font-size: 9px; letter-spacing: .28em; }
.brand-name { margin: 4px 0 0; font-size: 12px; letter-spacing: .24em; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.icon-button { height: 36px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); border-radius: 99px; padding: 0 14px; background: rgba(12, 9, 7, .3); backdrop-filter: blur(10px); cursor: pointer; font-size: 11px; letter-spacing: .12em; transition: .3s ease; }
.icon-button:hover, .icon-button.active { border-color: rgba(199, 162, 104, .72); background: rgba(199, 162, 104, .12); }
.button-icon { width: 14px; color: var(--gold); font-size: 15px; text-align: center; }
.orbit-icon { height: 9px; border: 1px solid var(--gold); border-radius: 50%; transform: rotate(-18deg); position: relative; }
.orbit-icon::after { content: ""; position: absolute; width: 3px; height: 3px; background: var(--gold); border-radius: 50%; top: -2px; left: 5px; }

.hero-copy { position: absolute; z-index: 2; left: 6.4vw; top: 26%; width: min(390px, 31vw); pointer-events: none; }
.kicker { margin-bottom: 17px; }
h1 { margin: 0; display: flex; flex-direction: column; width: min-content; font-family: "ZCOOL XiaoWei", "STKaiti", serif; font-size: clamp(64px, 8vw, 124px); font-weight: 400; line-height: .76; letter-spacing: -.08em; text-shadow: 0 12px 35px rgba(0,0,0,.45); }
h1 span:last-child { margin-left: .63em; }
h1 .outline { color: transparent; -webkit-text-stroke: 1px rgba(232, 223, 208, .74); }
.intro { margin: 30px 0 0; max-width: 335px; color: var(--paper-dim); font-size: 12px; line-height: 2; letter-spacing: .08em; }
.rule { display: flex; align-items: center; gap: 12px; margin-top: 21px; }
.rule span { width: 52px; height: 1px; background: var(--vermillion); }
.rule em { color: rgba(232,223,208,.35); font: normal 8px Georgia, serif; letter-spacing: .25em; }

.facts { position: absolute; z-index: 2; left: 6.4vw; bottom: 65px; display: flex; gap: clamp(24px, 3vw, 54px); pointer-events: none; }
.facts article { display: flex; flex-direction: column; gap: 6px; }
.facts strong { font: 400 clamp(23px, 2.2vw, 35px)/1 Georgia, serif; color: #e5d5bb; }
.facts strong small { margin-left: 3px; color: var(--gold); font-size: 11px; }
.facts span { color: rgba(232,223,208,.42); font-size: 9px; letter-spacing: .2em; }

.view-indicator { position: absolute; z-index: 2; right: 41px; bottom: 58px; display: flex; align-items: center; gap: 13px; pointer-events: none; }
.compass { position: relative; width: 35px; height: 35px; border: 1px solid var(--hairline); border-radius: 50%; }
.compass span { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: var(--gold); font-size: 8px; }
.compass i { position: absolute; top: 5px; left: 16px; width: 2px; height: 24px; background: linear-gradient(var(--vermillion) 0 50%, rgba(232,223,208,.28) 50%); transform-origin: center; transition: transform .15s linear; }
.view-indicator p { margin: 0; color: rgba(232,223,208,.52); font-size: 9px; letter-spacing: .18em; }

.interaction-hint { position: absolute; z-index: 2; left: 50%; bottom: 49px; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; color: rgba(232,223,208,.45); font-size: 9px; letter-spacing: .2em; transition: opacity .4s; pointer-events: none; }
.interaction-hint.hidden { opacity: 0; }
.mouse-mark { position: relative; width: 17px; height: 24px; border: 1px solid rgba(232,223,208,.4); border-radius: 9px; }
.mouse-mark i { position: absolute; top: 4px; left: 7px; width: 1px; height: 5px; background: var(--gold); animation: scroll 1.8s ease-in-out infinite; }
@keyframes scroll { 0%,100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(5px); opacity: 1; } }

.story-trigger { position: absolute; z-index: 4; right: 39px; top: 104px; display: flex; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid rgba(199,162,104,.55); padding: 8px 0; background: transparent; cursor: pointer; font-size: 10px; letter-spacing: .2em; }
.story-trigger i { color: var(--gold); font-style: normal; font-size: 15px; transition: transform .35s; }
.story-trigger[aria-expanded="true"] i { transform: rotate(45deg); }
.story-panel { position: absolute; z-index: 5; top: 0; right: 0; width: min(420px, 100vw); height: 100%; padding: 105px 48px 45px; background: linear-gradient(145deg, rgba(34,27,21,.97), rgba(14,11,9,.98)); border-left: 1px solid var(--hairline); box-shadow: -30px 0 80px rgba(0,0,0,.28); transform: translateX(102%); transition: transform .65s cubic-bezier(.22,.8,.2,1); }
.story-panel.open { transform: translateX(0); }
.story-panel > button { position: absolute; top: 28px; right: 34px; border: 1px solid var(--hairline); border-radius: 50%; width: 36px; height: 36px; background: transparent; cursor: pointer; font-size: 22px; font-weight: 300; }
.story-panel h2 { margin: 26px 0 28px; font-family: "ZCOOL XiaoWei", serif; font-size: clamp(34px, 4vw, 48px); font-weight: 400; line-height: 1.35; letter-spacing: .05em; }
.story-panel > p:not(.panel-index) { color: var(--paper-dim); font-size: 13px; line-height: 2.2; }
.story-panel dl { margin: 38px 0 0; border-top: 1px solid var(--hairline); }
.story-panel dl div { display: grid; grid-template-columns: 80px 1fr; padding: 15px 0; border-bottom: 1px solid var(--hairline); font-size: 11px; }
.story-panel dt { color: var(--gold); letter-spacing: .2em; }
.story-panel dd { margin: 0; color: rgba(232,223,208,.62); }

.loading-screen { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; align-content: center; gap: 17px; background: #17120e; transition: opacity .8s ease, visibility .8s; }
body:not(.is-loading) .loading-screen { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-seal { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(199,162,104,.6); color: #e6c995; background: var(--vermillion); font: 32px "ZCOOL XiaoWei", serif; box-shadow: inset 0 0 0 5px rgba(67,12,8,.18); }
.loading-screen p { margin: 0; color: var(--paper-dim); font-size: 11px; letter-spacing: .28em; }
.loading-line { width: 150px; height: 1px; overflow: hidden; background: rgba(232,223,208,.15); }
.loading-line span { display: block; width: 0; height: 100%; background: var(--gold); transition: width .35s ease; }
.loading-screen small { color: rgba(232,223,208,.38); font: 10px Georgia, serif; letter-spacing: .12em; }
.error-card { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 28px 34px; border: 1px solid rgba(184,58,37,.65); background: rgba(15,10,8,.86); text-align: center; }
.error-card strong { font-family: "ZCOOL XiaoWei", serif; font-weight: 400; font-size: 24px; }
.error-card p { margin: 10px 0 0; color: var(--paper-dim); font-size: 12px; }

@media (max-width: 760px) {
  .topbar { height: 70px; padding: 0 20px; }
  .frame-top { top: 70px; left: 18px; right: 18px; }
  .frame-bottom { left: 18px; right: 18px; bottom: 18px; }
  .brand-name { letter-spacing: .15em; }
  .top-actions { gap: 4px; }
  .icon-button { width: 35px; height: 35px; justify-content: center; padding: 0; }
  .icon-button span:last-child { display: none; }
  .hero-copy { left: 24px; top: 17%; width: 45vw; }
  h1 { font-size: clamp(60px, 16vw, 92px); }
  .intro { margin-top: 22px; font-size: 11px; line-height: 1.9; }
  .facts { left: 24px; bottom: 42px; gap: 25px; }
  .facts strong { font-size: 25px; }
  .facts span { font-size: 8px; letter-spacing: .12em; }
  .view-indicator { right: 23px; bottom: 38px; }
  .view-indicator p { display: none; }
  .story-trigger { right: 21px; top: 87px; }
  .interaction-hint { bottom: 17px; font-size: 8px; white-space: nowrap; }
  .story-panel { padding: 94px 28px 30px; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .hero-copy { top: 20%; }
  .facts { bottom: 46px; }
  .intro { margin-top: 19px; }
}