:root {
  --page-bg: #f5f5f3;
  --page-bg-cool: #f2f4f7;
  --surface-primary: rgba(255, 255, 255, .9);
  --surface-secondary: rgba(249, 250, 252, .84);
  --surface-solid: #fbfbfa;
  --text-primary: #111218;
  --text-secondary: #555b68;
  --text-muted: #858b98;
  --line-soft: rgba(27, 32, 45, .08);
  --line-medium: rgba(27, 32, 45, .12);
  --navy: #121a2e;
  --navy-hover: #1b2540;
  --lavender: #a49aef;
  --violet: #8d79e7;
  --pink: #d68eb9;
  --ice-blue: #b9d9ef;
  --mint: #b9ded5;
  --peach: #e7b7a6;
  --champagne: #ead8c8;
  --radius-large: 24px;
  --radius-card: 20px;
  --radius-medium: 16px;
  --radius-small: 10px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text-primary); background: var(--page-bg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
a.skip-link { position: fixed !important; z-index: 100; top: 0; left: 8px; padding: 10px 14px; background: var(--navy); color: white; transform: translateY(-120%) !important; }
a.skip-link:focus-visible { transform: translateY(8px) !important; }

.atlas-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 288px;
}

.side-rail {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 26px 15px 20px 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: rgba(249, 249, 248, .96);
}

.side-brand { display: grid; grid-template-columns: 42px 1fr; column-gap: 10px; width: max-content; text-decoration: none; }
.side-brand img { grid-row: 1 / 3; width: 38px; height: 38px; }
.side-brand > span { align-self: center; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: .82; letter-spacing: .16em; }
.side-brand small { margin-top: 6px; font-size: 6.5px; line-height: 1.45; letter-spacing: .1em; color: var(--text-muted); }

.side-nav { margin-top: clamp(78px, 13vh, 145px); display: grid; gap: 3px; }
.side-nav a { min-height: 46px; padding: 0 12px; display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 18px; color: #737986; font-size: 9px; font-weight: 500; letter-spacing: .04em; text-decoration: none; opacity: 0.3; transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.side-nav a svg { width: 18px; height: 18px; }
.side-nav a:hover { color: var(--text-primary); opacity: 1; transform: translateX(2px); }
.side-nav a.is-current { color: var(--text-primary); background: rgba(255, 255, 255, .92); border-color: rgba(40, 45, 60, .04); box-shadow: 0 5px 18px rgba(40, 45, 65, .05); opacity: 1; }

.atlas-guide { margin-top: auto; display: grid; justify-items: center; text-align: center; }
.atlas-orb { width: 88px; height: 88px; position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 48% 46%, rgba(255,255,255,.98) 0 7%, rgba(187,217,239,.52) 19%, rgba(164,154,239,.16) 45%, transparent 68%); }
.atlas-orb::before, .atlas-orb::after, .atlas-orb i { content: ""; position: absolute; inset: 17px 5px; border: 1px solid rgba(112,129,178,.36); border-radius: 50%; transform: rotate(22deg); }
.atlas-orb::after { inset: 5px 20px; transform: rotate(-30deg); }
.atlas-orb i:nth-child(2) { inset: 24px 3px; transform: rotate(-12deg); }
.atlas-orb b { position: relative; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 0 20px 6px rgba(177,196,239,.72); }
.atlas-orb b::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(177,196,239,.5), transparent 70%); }
.atlas-guide h2 { margin: 1px 0 7px; font-size: 9px; letter-spacing: .11em; }
.atlas-guide p { max-width: 126px; margin: 0; color: var(--text-muted); font-size: 8px; line-height: 1.45; }
.atlas-guide button { width: 124px; height: 34px; margin-top: 12px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: white; font-size: 8.5px; cursor: pointer; }
.atlas-guide button svg { width: 15px; height: 15px; color: var(--violet); }

.side-status { margin-top: 23px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.side-status > p { margin: 0 0 11px; display: flex; justify-content: space-between; align-items: end; }
.side-status strong { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.side-status span { color: var(--text-muted); font-size: 6.5px; letter-spacing: .08em; }
.side-status > div { display: flex; gap: 7px; }
.side-status button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; background: transparent; cursor: pointer; }
.side-status button svg { width: 13px; height: 13px; }

.hall-main { min-width: 0; overflow: hidden; background: var(--page-bg); }
.mobile-header, .mobile-personalize { display: none; }

.hall-hero { height: 365px; position: relative; overflow: hidden; }
.hero-world { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.is-ready .hero-world { opacity: 1; }
.hero-world::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(247,247,246,1) 0%, rgba(247,247,246,.97) 20%, rgba(247,247,246,.76) 34%, rgba(247,247,246,.18) 54%, rgba(247,247,246,0) 72%), linear-gradient(180deg, rgba(247,247,246,0) 57%, rgba(247,247,246,.52) 78%, rgba(247,247,246,1) 100%); pointer-events: none; }
.hero-world img { width: 78%; height: 100%; position: absolute; right: 0; object-fit: cover; object-position: center; filter: saturate(.86) brightness(1.06) contrast(.94); animation: hero-drift 16s ease-in-out infinite alternate; }

.hero-tools { position: absolute; z-index: 4; top: 24px; right: 24px; display: flex; align-items: center; gap: 10px; }
.hero-tools > button { border: 0; background: transparent; cursor: pointer; }
.hero-tools > button:not(.creator-mode) { width: 32px; height: 32px; padding: 7px; }
.hero-tools .tool-more { border: 1px solid rgba(30,35,50,.05); border-radius: 50%; background: rgba(255,255,255,.76); }
.creator-mode { width: 174px; height: 42px; padding: 5px 11px 5px 5px; display: grid; grid-template-columns: 31px 1fr 18px; align-items: center; gap: 8px; border: 1px solid rgba(30,35,50,.05) !important; border-radius: var(--radius-pill); background: rgba(255,255,255,.78) !important; backdrop-filter: blur(12px); }
.creator-mode > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #dfe6f4; font-family: var(--serif); font-size: 17px; }
.creator-mode b { text-align: left; font-size: 9px; font-weight: 600; }

.hero-copy { width: 395px; position: relative; z-index: 3; padding: 61px 0 0 48px; opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; }
.is-ready .hero-copy { opacity: 1; transform: translateY(0); }
.hero-kicker { margin: 0 0 27px; color: #767987; font-size: 9px; font-weight: 500; letter-spacing: .13em; }
.hero-kicker span, .product-worlds__header h2 span { color: var(--lavender); }
.hero-copy h1 { margin: 0; font-size: clamp(38px, 3vw, 46px); font-weight: 430; line-height: 1.08; letter-spacing: -.035em; }
.hero-copy h1 span, .hero-copy h1 em, .hero-copy h1 i { display: block; font-style: normal; }
.hero-copy h1 em { background: linear-gradient(90deg,#8f96df,#aaa2e9); -webkit-background-clip: text; color: transparent; }
.hero-copy h1 i { background: linear-gradient(90deg,#a68dd2,#d987ae); -webkit-background-clip: text; color: transparent; }
.hero-copy > p:not(.hero-kicker) { max-width: 315px; margin: 17px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.52; }
.hero-actions { margin-top: 21px; display: flex; align-items: center; gap: 22px; }
.primary-action { width: 164px; height: 38px; padding: 0 15px 0 18px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: var(--radius-pill); background: var(--navy); color: white; font-size: 9px; cursor: pointer; transition: background 220ms ease; }
.primary-action:hover { background: var(--navy-hover); }
.primary-action svg { width: 15px; height: 15px; }
.watch-story { display: flex; align-items: center; gap: 8px; font-size: 9px; text-decoration: none; }
.watch-story > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-medium); border-radius: 50%; }
.watch-story svg { width: 12px; height: 12px; }

.product-worlds { padding: 0 22px; position: relative; }
/* 世界区环境底图：6KB 的 480px 图 + CSS 模糊放大，三种视口下都是柔和色雾，不与卡片内容抢眼 */
.product-worlds::before { content: ""; position: absolute; inset: -28px -22px; z-index: 0; pointer-events: none; background: url("../images/v3/worlds-backdrop.webp") center / cover no-repeat; filter: blur(20px) saturate(1.08) brightness(1.04); opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%); }
.product-worlds > * { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) { .product-worlds::before { display: none; } }
.product-worlds__header { height: 29px; display: flex; align-items: center; justify-content: space-between; }
.product-worlds__header h2 { margin: 0; color: #747988; font-size: 9px; font-weight: 500; letter-spacing: .09em; }
.product-worlds__tools { display: flex; align-items: center; gap: 12px; }
.product-worlds__tools > a { color: #5f6472; font-size: 8.5px; text-decoration: none; }
.product-worlds__tools > a[hidden] { display: none; }
.carousel-controls { position: relative; z-index: 9; display: flex; gap: 7px; }
.carousel-controls button { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 5px 20px rgba(40,45,70,.08); cursor: pointer; }
.carousel-controls button[hidden] { display: none; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }

.product-carousel { width: 100%; overflow-x: auto; overflow-y: visible; padding: 4px 0 18px; scrollbar-width: none; scroll-snap-type: x mandatory; cursor: grab; }
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.product-track { min-width: 100%; display: flex; gap: 12px; }

.product-card {
  height: 330px;
  flex: 0 0 calc((100% - 36px) / 4);
  min-width: 238px;
  max-width: 255px;
  position: relative;
  overflow: hidden;
  padding: 17px 16px 15px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid rgba(30,35,50,.065);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: 0 1px 2px rgba(28,32,46,.03), 0 8px 28px rgba(55,62,88,.055);
  isolation: isolate;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.product-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--card-overlay); }
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(35,40,60,.06), 0 24px 64px rgba(55,62,88,.08);
  animation-play-state: paused;
}
.product-card__top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: start; }
.product-card__identity { display: flex; gap: 15px; align-items: baseline; }
.product-card__number { font-size: 8.5px; font-weight: 500; }
.product-card__category { max-width: 130px; font-size: 7.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-card__bookmark { width: 22px; height: 22px; padding: 2px; position: relative; z-index: 4; border: 0; background: transparent; color: rgba(17,18,24,.66); cursor: pointer; }
.product-card__bookmark svg { width: 17px; height: 17px; transition: fill 200ms ease, color 200ms ease; }
.product-card__bookmark:hover, .product-card__bookmark[aria-pressed="true"] { color: var(--card-accent); }
.product-card__bookmark[aria-pressed="true"] svg { fill: color-mix(in srgb, var(--card-accent) 30%, transparent); }
.product-card__copy { max-width: 68%; position: relative; z-index: 3; margin-top: 15px; }
.product-card__name { min-height: 45px; margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: .92; letter-spacing: -.015em; }
.product-card__description { margin: 8px 0 0; color: var(--text-secondary); font-size: 9.5px; line-height: 1.4; }
.product-card__art { position: absolute; z-index: 1; inset: 53px 0 42px 35%; overflow: hidden; }
.product-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,var(--card-bg) 0%,transparent 56%), linear-gradient(0deg,var(--card-bg) 0%,transparent 36%), linear-gradient(180deg,var(--card-bg) 0%,transparent 38%); opacity: .84; pointer-events: none; }
.product-card__image { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(1.06) contrast(.93); transition: transform 320ms var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.product-card:hover .product-card__image { transform: scale(1.02); }
.product-card__placeholder { width: 100%; height: 100%; position: relative; background: radial-gradient(circle at 65% 38%, rgba(255,255,255,.95), rgba(255,255,255,.26) 26%, transparent 55%), repeating-radial-gradient(circle at 60% 42%, rgba(128,147,171,.12) 0 1px, transparent 1px 13px); }
.product-card__placeholder-mark { position: absolute; top: 35%; right: 26%; font-family: var(--serif); font-size: 62px; color: color-mix(in srgb,var(--card-accent) 58%,white); }
.product-card__placeholder-star { position: absolute; top: 17%; right: 15%; color: var(--card-accent); font-size: 22px; }
.product-card__meta { min-height: 26px; margin-top: auto; position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 7.5px; }
.product-card__status { display: inline-flex; align-items: center; gap: 4px; color: var(--status-color); font-weight: 600; letter-spacing: .04em; }
.product-card__status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--status-color); }
.product-card__platforms { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card__button { height: 36px; margin-top: auto; padding: 0 13px 0 16px; position: relative; z-index: 4; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(30,35,50,.08); border-radius: var(--radius-pill); background: rgba(255,255,255,.9); color: var(--text-primary); font-size: 8.5px; font-weight: 500; text-decoration: none; transition: border-color 220ms ease, background 220ms ease; }
.product-card__button:hover { border-color: rgba(30,35,50,.18); background: white; }
.product-card__button svg { width: 14px; height: 14px; }

.principles { min-height: 76px; margin: 0 22px 13px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line-soft); border-radius: 17px; background: rgba(255,255,255,.86); }
.principles article { min-width: 0; padding: 13px 16px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; border-right: 1px solid var(--line-soft); }
.principles article:last-child { border-right: 0; }
.principles svg { width: 23px; height: 23px; color: #7e83a2; }
.principles h2 { margin: 0 0 4px; font-size: 9px; font-weight: 600; }
.principles p { margin: 0; color: var(--text-muted); font-size: 7.5px; line-height: 1.35; }

.backstage { min-height: 190px; display: grid; grid-template-columns: 245px minmax(0,1fr); border-top: 1px solid var(--line-soft); background: #f8f8f6; }
.backstage-intro { padding: 28px 24px; background: linear-gradient(130deg,rgba(255,255,255,.96),rgba(229,239,244,.88)); }
.backstage-intro > p { margin: 0 0 16px; color: #777c89; font-size: 7.5px; font-weight: 600; letter-spacing: .12em; }
.backstage-intro h2 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1; }
.backstage-intro a { width: max-content; margin-top: 25px; display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 600; text-decoration: none; }
.backstage-intro a svg { width: 13px; }
.backstage-track { min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px,1fr); overflow-x: auto; scrollbar-width: none; }
.backstage-track::-webkit-scrollbar { display: none; }
.room-card { min-height: 190px; position: relative; overflow: hidden; padding: 24px 18px; display: block; border-left: 1px solid rgba(255,255,255,.6); color: var(--text-primary); text-decoration: none; background: #edf0ee var(--room-image) right center / auto 100% no-repeat; isolation: isolate; }
.room-card.is-studio { --room-image: url("../images/v3/room-studio.webp"); }
.room-card.is-resonance { --room-image: url("../images/v3/room-resonance.webp"); }
.room-card.is-atelier { --room-image: url("../images/v3/room-atelier.webp"); }
.room-card.is-contact { --room-image: url("../images/v3/room-contact.webp"); }
.room-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(248,248,246,1),rgba(248,248,246,.88) 58%,rgba(248,248,246,.16)); }
.room-card.is-resonance { color: white; background-color: #4d466b; }
.room-card.is-resonance::before { background: linear-gradient(90deg,rgba(49,44,71,.96),rgba(49,44,71,.56) 60%,rgba(49,44,71,.1)); }
.room-card h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.room-card b { font-size: 8px; font-weight: 500; }
.room-card p { max-width: 105px; margin: 15px 0 0; font-size: 8px; line-height: 1.4; }
.room-card > span { width: 29px; height: 29px; position: absolute; right: 15px; bottom: 15px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 13px; transition: transform 220ms ease; }
.room-card:hover > span { transform: translateX(3px); }

.info-rail { min-width: 0; min-height: 100vh; padding: 84px 13px 24px; border-left: 1px solid var(--line-soft); background: rgba(246,247,249,.82); }
.info-card { position: relative; overflow: hidden; padding: 20px 17px; border: 1px solid rgba(30,35,50,.055); border-radius: 22px; background: rgba(255,255,255,.82); }
.info-card + .info-card { margin-top: 13px; }
.info-card h2 { margin: 0; font-size: 12px; font-weight: 600; }
.info-card > p { margin: 6px 0 0; color: var(--text-secondary); font-size: 8.5px; line-height: 1.45; }
.personalize-options { margin-top: 15px; display: grid; gap: 8px; }
.personalize-options button { min-height: 40px; padding: 0 11px; display: grid; grid-template-columns: 18px 1fr 15px; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: white; text-align: left; font-size: 8.5px; cursor: pointer; }
.personalize-options button svg { width: 15px; height: 15px; }
.personalize-options button i { width: 13px; height: 13px; position: relative; border: 1px solid #9ca2ae; border-radius: 50%; }
.personalize-options button[aria-pressed="true"] { border-color: rgba(18,26,46,.18); }
.personalize-options button[aria-pressed="true"] i { border-color: var(--navy); background: var(--navy); }
.personalize-options button[aria-pressed="true"] i::after { content: ""; width: 5px; height: 3px; position: absolute; top: 3px; left: 3px; border-left: 1px solid white; border-bottom: 1px solid white; transform: rotate(-45deg); }

.activity-card h2 { font-size: 8.5px; letter-spacing: .1em; }
.activity-card ul { margin: 13px 0 0; padding: 0; list-style: none; }
.activity-card li { min-height: 40px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.activity-thumb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,white,var(--thumb)); }
.activity-thumb.is-violet { --thumb:#9286df; }.activity-thumb.is-mint { --thumb:#8ec9b9; }.activity-thumb.is-peach { --thumb:#e3ac94; }.activity-thumb.is-blue { --thumb:#8bb9d4; }
.activity-card li div { min-width: 0; }
.activity-card li b, .activity-card li small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.activity-card li b { font-size: 8.5px; font-weight: 500; }
.activity-card li small { margin-top: 2px; color: var(--text-muted); font-size: 7.5px; }
.activity-card time { color: var(--text-muted); font-size: 7px; }
.activity-card > a { width: max-content; margin-top: 13px; display: flex; align-items: center; gap: 6px; font-size: 8px; text-decoration: none; }
.activity-card > a svg { width: 12px; }

.begin-card { min-height: 155px; background: linear-gradient(135deg,#fff,#eeeafa); }
.begin-card h2, .begin-card p, .begin-card button { position: relative; z-index: 2; }
.begin-card p { max-width: 150px; }
.begin-card button { min-width: 150px; height: 34px; margin-top: 17px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: rgba(255,255,255,.92); font-size: 8px; cursor: pointer; }
.begin-card button svg { width: 13px; }
.begin-orb { width: 105px; height: 105px; position: absolute; right: -27px; bottom: -24px; border-radius: 50%; background: radial-gradient(circle at 37% 34%,white 0 7%,rgba(198,191,239,.7) 24%,rgba(184,211,236,.45) 55%,transparent 72%); }
.begin-orb i { position: absolute; inset: 14px -3px; border: 1px solid rgba(120,117,177,.25); border-radius: 50%; transform: rotate(32deg); }

@keyframes hero-drift { from { transform: translate3d(0,0,0) scale(1.015); } to { transform: translate3d(-6px,3px,0) scale(1.025); } }

@media (max-width: 1499px) and (min-width: 1280px) {
  .atlas-shell { grid-template-columns: 172px minmax(0,1fr); }
  .side-rail { padding-left: 22px; }
  .hero-copy { padding-left: 38px; }
  .hero-copy h1 { font-size: 40px; }
  .product-worlds, .principles { width: min(1100px, 100%); margin-inline: auto; }
  .product-card { min-width: 238px; }
  .info-rail { display: none; }
}

@media (max-width: 1279px) {
  /* 窄栏保留图标+文字：纯图标没人看得懂每项是什么 */
  .atlas-shell { grid-template-columns: 156px minmax(0,1fr); }
  .side-rail { padding: 22px 10px 20px 14px; }
  .side-brand { display: block; }
  .side-brand > span, .side-brand small, .atlas-guide p, .atlas-guide button, .side-status { display: none; }
  .side-nav { margin-top: 90px; }
  .side-nav a { min-height: 42px; padding: 0 10px; gap: 9px; font-size: 8.5px; }
  .atlas-guide { margin-top: auto; }
  .atlas-orb { width: 52px; height: 52px; }
  .atlas-guide h2 { margin-top: 6px; }
  .info-rail { display: none; }
  .product-card { flex: 0 0 calc((100% - 18px) / 2.5); min-width: 238px; max-width: none; }
  .principles { grid-template-columns: repeat(2,1fr); }
  .principles article:nth-child(2) { border-right: 0; }
  .principles article:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .backstage { grid-template-columns: 220px minmax(0,1fr); }
}

@media (max-width: 767px) {
  .atlas-shell { display: block; }
  .side-rail { display: none; }
  .hall-main { overflow: visible; }
  .mobile-header { height: 66px; padding: 0 16px; position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); background: rgba(249,249,248,.96); }
  .mobile-header > a { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-decoration: none; }
  .mobile-header summary { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .mobile-header nav { width: 180px; position: absolute; top: 58px; right: 12px; padding: 14px; display: grid; gap: 11px; border: 1px solid var(--line-soft); border-radius: 14px; background: white; box-shadow: 0 15px 30px rgba(55,62,88,.08); }
  .mobile-header nav a { font-size: 11px; text-decoration: none; }
  .hall-hero { height: 570px; }
  .hero-world { top: 190px; }
  .hero-world img { width: 120%; height: 360px; right: -20%; object-fit: contain; }
  .hero-world::before { background: linear-gradient(180deg,var(--page-bg) 0%,rgba(247,247,246,.18) 34%,rgba(247,247,246,.06) 65%,var(--page-bg) 100%); }
  .hero-tools { display: none; }
  .hero-copy { width: auto; padding: 43px 22px 0; }
  .hero-kicker { margin-bottom: 20px; }
  .hero-copy h1 { font-size: 41px; }
  .hero-copy > p:not(.hero-kicker) { max-width: 290px; }
  .mobile-personalize { padding: 20px 16px 11px; display: block; }
  .mobile-personalize h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; font-weight: 500; }
  .mobile-personalize > div { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .mobile-personalize button { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: white; font-size: 9px; }
  .mobile-personalize button[aria-pressed="true"] { background: var(--navy); color: white; }
  .product-worlds { padding: 0 0 0 16px; }
  .product-worlds__header { padding-right: 16px; }
  .carousel-controls { display: none; }
  .product-carousel { padding-right: 12vw; }
  .product-track { width: max-content; }
  .product-card { width: 88vw; flex: 0 0 88vw; min-width: 0; max-width: 360px; scroll-snap-align: start; }
  .principles { margin: 0 16px 14px; grid-template-columns: 1fr; }
  .principles article { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .principles article:last-child { border-bottom: 0; }
  .backstage { display: block; }
  .backstage-intro { min-height: 190px; }
  .backstage-track { grid-auto-columns: 83vw; scroll-snap-type: x mandatory; }
  .room-card { scroll-snap-align: start; }
}

@media (min-width: 768px) {
  .product-track:not(:has(.product-card:nth-child(4))) .product-card {
    flex-basis: calc((100% - 24px) / 3);
    max-width: none;
  }
}

/* ===== Phase 1: Civilization Gateway Enhancements ===== */

@keyframes breathe {
  0%, 100% {
    opacity: 0.96;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.002);
  }
}

@keyframes orb-breathe-enhanced {
  0%, 100% {
    opacity: .55;
    transform: scale(.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 更柔和的背景渐变 */
.hero-world::before {
  background:
    linear-gradient(90deg,
      rgba(250,250,249,1) 0%,
      rgba(250,250,249,.98) 18%,
      rgba(250,250,249,.82) 32%,
      rgba(250,250,249,.24) 52%,
      rgba(250,250,249,0) 68%
    ),
    linear-gradient(180deg,
      rgba(250,250,249,0) 55%,
      rgba(250,250,249,.45) 75%,
      rgba(250,250,249,1) 100%
    );
}

/* 产品卡片更流体的边框 */
.product-card__button {
  border-radius: 999px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card__button:hover {
  transform: translateX(2px);
}

/* 侧边栏更幽灵化 */
.side-rail {
  background: rgba(250, 250, 249, .94);
  backdrop-filter: blur(8px);
}

/* 房间卡片呼吸效果 */
.room-card {
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.room-card:hover {
  transform: translateY(-3px) scale(1.01);
}

/* ===== Phase 1.5: Detailed Polish Improvements ===== */
/* Based on comprehensive audit - Priority P0 & P1 fixes */

/* 改进 1: 统一圆角到 civilization tokens */
.side-nav a {
  border-radius: var(--radius-fluid) !important; /* 24px */
}

.info-card {
  border-radius: var(--radius-fluid) !important; /* 24px */
}

.principles {
  border-radius: var(--radius-fluid) !important;
}

/* 改进 2: 幽灵化导航 - 更微妙的透明度变化 */
.side-nav a {
  color: #646a76 !important;
  opacity: 1 !important;
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.side-nav a.is-current {
  opacity: 1 !important;
}

.side-nav a:hover {
  opacity: 1 !important;
  transform: translateX(3px) !important;
  background: rgba(255, 255, 255, .65) !important;
}

/* 改进 3: 玻璃态背景强化 */
.side-rail {
  background: rgba(250, 250, 249, .88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-right: 1px solid rgba(27, 32, 45, .04) !important;
}

/* 改进 4: 产品卡片 Portal 悬停优化 */
.product-card {
  border-radius: var(--radius-breath) !important; /* 28px */
  box-shadow: 0 2px 12px rgba(10, 9, 18, 0.04) !important;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.product-card:hover {
  transform: translateY(-3px) scale(1.008) !important;
  box-shadow: 0 8px 32px rgba(10, 9, 18, 0.06) !important;
  border-color: rgba(30,35,50,.12) !important;
}

/* 图片错位动画 */
.product-card__image {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.product-card:hover .product-card__image {
  transform: scale(1.04) translateY(-2px) !important;
}

/* 按钮错位动画 */
.product-card__button {
  transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1) 80ms !important;
}

.product-card__button:hover {
  transform: translateX(3px) !important;
  border-color: rgba(30,35,50,.18) !important;
  background: white !important;
}

/* 改进 5: Hero 区域留白优化 */
.hero-copy {
  padding: 64px 0 0 32px !important; /* 使用 space tokens */
  transition:
    opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1) 150ms,
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 150ms !important;
}

.product-worlds {
  padding: 0 32px !important; /* 从 22px */
}

/* 改进 6: 房间卡片优雅悬停 */
.room-card {
  padding: 32px 20px !important; /* 从 24px 18px */
  border-left: 1px solid rgba(255,255,255,.4) !important;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 800ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.room-card:hover {
  transform: translateY(-4px) scale(1.012) !important;
  box-shadow: 0 12px 40px rgba(40, 45, 65, 0.08) !important;
  border-left-color: rgba(255,255,255,.7) !important;
}

.room-card > span {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms !important;
}

.room-card:hover > span {
  transform: translateX(4px) scale(1.08) !important;
}

.room-card.is-resonance {
  border-left-color: rgba(255,255,255,.25) !important;
}

.room-card.is-resonance:hover {
  border-left-color: rgba(255,255,255,.5) !important;
}

/* 改进 7: Atlas Orb 呼吸增强 */
.atlas-orb {
  background: radial-gradient(
    circle at 48% 46%,
    rgba(255,255,255,.98) 0 7%,
    rgba(187,217,239,.45) 20%,
    rgba(164,154,239,.12) 48%,
    transparent 72%
  ) !important;
  animation: orb-container-breathe 6s ease-in-out infinite !important;
}

@keyframes orb-container-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.96;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

.atlas-orb b {
  animation: float-gentle 8s ease-in-out infinite;
}

.atlas-orb b::after {
  animation: orb-breathe-enhanced 4s ease-in-out infinite;
}

/* 改进 8: 文字层级微调 */
.hero-kicker {
  font-size: 8.5px !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
}

.product-worlds__header h2 {
  font-size: 8.5px !important;
  font-weight: 600 !important;
  opacity: 0.75 !important;
}

/* 改进 9: 更柔和的线条 */
.product-worlds,
.backstage {
  border-top-color: rgba(27, 32, 45, .05) !important; /* 从 .08 */
}

/* 改进 10: Info card 优化 */
.info-card {
  padding: 24px 20px !important; /* 从 20px 17px */
  border-color: rgba(30,35,50,.04) !important; /* 从 .055 */
  background: rgba(255,255,255,.88) !important; /* 从 .82 */
}


/* ===== Portal Card 3D Effect Support ===== */
.product-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.product-card__image,
.product-card__top,
.product-card__bottom {
  transform: translateZ(20px);
}

/* ===== Enhanced Button States ===== */
.primary-action,
.button,
.watch-story {
  position: relative;
  overflow: hidden;
}

.primary-action::before,
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-100%);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-action:hover::before,
.button:hover::before {
  transform: translateX(100%);
}

/* ===== Refined Typography ===== */
.hero-copy h1 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.02em;
}

.product-card h3 {
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* ===== Smooth Scrollbar (webkit only) ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(245, 245, 243, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(164, 154, 239, 0.2);
  border-radius: 4px;
  transition: background 300ms ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(164, 154, 239, 0.35);
}

/* ===== Selection Colors ===== */
::selection {
  background: rgba(164, 154, 239, 0.25);
  color: inherit;
}

::-moz-selection {
  background: rgba(164, 154, 239, 0.25);
  color: inherit;
}

/* ===== Cursor Enhancements ===== */
a, button, [role="button"] {
  cursor: pointer;
}

.product-card {
  cursor: pointer;
}

/* ===== Loading Skeleton for Images ===== */
.product-card__image {
  background: linear-gradient(
    90deg,
    rgba(245, 245, 243, 0) 0%,
    rgba(245, 245, 243, 0.5) 50%,
    rgba(245, 245, 243, 0) 100%
  );
  background-size: 200% 100%;
}

.product-card__image.loading {
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== 纸张肌理(大厅页,低剂量) ===== */
/* 浅底用 multiply;剂量刻意低于房间页的 7%,只给纯白平面一点肌理 */
.hall-main { position: relative; }
.hall-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 280px 280px;
}