/* ==========================================================================
   错金银立鸟几何纹铜壶 · procedural digital reconstruction
   ========================================================================== */

:root {
  --ink: #080705;
  --ink-2: #0d0a07;
  --ink-3: #14100b;
  --paper: #f1e6d1;
  --paper-soft: #f7efdf;
  --paper-dim: #c8b99f;
  --muted: #948673;
  --bronze: #b78a52;
  --gold: #e2bd7c;
  --gold-pale: #f0d9a9;
  --bronze-deep: #6b4d2d;
  --patina: #668f80;
  --patina-bright: #a6c3b4;
  --silver: #cfc8b7;
  --cinnabar: #a4452f;
  --line: rgba(241, 230, 209, 0.17);
  --line-soft: rgba(241, 230, 209, 0.075);
  --glass: rgba(8, 8, 6, 0.58);
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --latin: "Times New Roman", Times, Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { background: var(--ink); color-scheme: dark; }
body {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
body.is-dragging { cursor: grabbing; user-select: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--bronze); color: var(--ink); }
img { max-width: 100%; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1200; padding: 10px 16px;
  background: var(--paper); color: var(--ink); font-size: 12px; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.stage {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  background: var(--ink); isolation: isolate;
}
.atmosphere {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(ellipse at 56% 44%, rgba(61, 55, 39, 0.32) 0%, rgba(14, 13, 10, 0.36) 43%, transparent 74%),
    linear-gradient(180deg, #0c0b08 0%, #080705 56%, #050504 100%);
}
.atmosphere-glow {
  position: absolute; display: block; border-radius: 50%; filter: blur(44px);
  opacity: 0.72; pointer-events: none;
}
.atmosphere-glow--warm {
  top: -12%; left: 38%; width: 52vw; height: 52vh;
  background: radial-gradient(circle, rgba(168, 116, 55, 0.22) 0%, rgba(91, 61, 28, 0.1) 45%, transparent 74%);
}
.atmosphere-glow--cool {
  right: -10%; bottom: -22%; width: 48vw; height: 62vh;
  background: radial-gradient(circle, rgba(61, 101, 86, 0.14) 0%, rgba(30, 50, 42, 0.07) 45%, transparent 74%);
}
.atmosphere-grid {
  position: absolute; inset: 0; opacity: 0.16;
  background-image:
    linear-gradient(rgba(185, 145, 88, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 145, 88, 0.04) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse at 55% 52%, #000 0%, transparent 69%);
  -webkit-mask-image: radial-gradient(ellipse at 55% 52%, #000 0%, transparent 69%);
}
.webgl-wrap {
  position: absolute; inset: 0; z-index: 1; cursor: grab; touch-action: none;
}
.webgl-wrap:active { cursor: grabbing; }
.webgl-wrap canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse at 52% 46%, transparent 30%, rgba(4, 4, 3, 0.32) 72%, rgba(4, 4, 3, 0.8) 100%),
    linear-gradient(180deg, rgba(4, 4, 3, 0.5) 0%, transparent 17%, transparent 77%, rgba(4, 4, 3, 0.62) 100%);
}
.stage-grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* top bar */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 32px;
  padding: 22px 38px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none;
}
.brand-seal {
  display: grid; width: 35px; height: 35px; place-items: center;
  border: 1px solid rgba(226, 189, 124, 0.58); color: var(--gold-pale);
  font-family: var(--serif); font-size: 20px; line-height: 1;
}
.brand-type { display: flex; flex-direction: column; gap: 1px; }
.brand-type strong { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: 0.16em; }
.brand-type small { color: var(--muted); font-family: var(--latin); font-size: 5px; letter-spacing: 0.21em; }
.collection-line {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: rgba(241, 230, 209, 0.34); font-family: var(--latin); font-size: 6px; letter-spacing: 0.19em;
}
.collection-line i { color: rgba(226, 189, 124, 0.45); font-style: normal; }
.live-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--cinnabar);
  box-shadow: 0 0 8px rgba(164, 69, 47, 0.9);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.topnav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.topnav a, .topnav button {
  position: relative; padding: 0 0 6px; border: 0; background: transparent;
  color: rgba(241, 230, 209, 0.44); font-size: 9px; letter-spacing: 0.12em;
  text-decoration: none; cursor: pointer;
}
.topnav a::after, .topnav button::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 1px;
  background: var(--gold); content: ""; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.topnav a:hover, .topnav button:hover, .topnav .is-current { color: var(--paper); }
.topnav a:hover::after, .topnav button:hover::after, .topnav .is-current::after { transform: scaleX(1); transform-origin: left; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.ar-launch {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px;
  border: 1px solid rgba(226, 189, 124, 0.46);
  background: linear-gradient(180deg, rgba(226, 189, 124, 0.14), rgba(183, 138, 82, 0.04)), rgba(10, 9, 7, 0.4);
  color: var(--gold-pale); font-size: 8px; letter-spacing: 0.14em; cursor: pointer;
  backdrop-filter: blur(9px); transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ar-launch:hover { border-color: var(--gold); background: rgba(226, 189, 124, 0.17); }
.ar-launch-glyph {
  position: relative; display: block; width: 11px; height: 11px;
  border: 1px solid rgba(240, 217, 169, 0.86); transform: rotate(45deg);
}
.ar-launch-glyph::before, .ar-launch-glyph::after {
  position: absolute; background: rgba(240, 217, 169, 0.55); content: "";
}
.ar-launch-glyph::before { top: 50%; left: 2px; width: 5px; height: 1px; }
.ar-launch-glyph::after { top: 2px; left: 50%; width: 1px; height: 5px; }
.ar-launch-glyph i { position: absolute; inset: 2px; border: 1px solid rgba(240, 217, 169, 0.24); }
.sound-button, .icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; border: 1px solid rgba(241, 230, 209, 0.18);
  background: rgba(10, 9, 7, 0.38); color: rgba(241, 230, 209, 0.57);
  font-size: 8px; letter-spacing: 0.1em; cursor: pointer; backdrop-filter: blur(9px);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.sound-button { padding: 0 11px; }
.icon-button { width: 32px; padding: 0; }
.sound-button:hover, .icon-button:hover { border-color: rgba(226, 189, 124, 0.56); color: var(--paper); }
.sound-button[aria-pressed="false"] { color: rgba(241, 230, 209, 0.3); }
.sound-bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.sound-bars i { display: block; width: 1px; height: 6px; background: var(--gold); transform-origin: bottom; animation: soundBar 1.2s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height: 10px; animation-delay: -0.5s; }
.sound-bars i:nth-child(3) { height: 4px; animation-delay: -0.2s; }
.sound-bars i:nth-child(4) { height: 8px; animation-delay: -0.8s; }
.sound-button[aria-pressed="false"] .sound-bars i { animation-play-state: paused; opacity: .28; }
@keyframes soundBar { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.icon-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1; }

/* object intro */
.object-intro {
  position: absolute; top: 17.5%; left: 38px; z-index: 20; width: min(390px, 34vw);
}
.eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px;
  color: rgba(241, 230, 209, 0.44); font-family: var(--latin); font-size: 7px; letter-spacing: 0.16em;
}
.eyebrow span { color: rgba(226, 189, 124, 0.7); }
.eyebrow i { width: 26px; height: 1px; background: rgba(226, 189, 124, 0.36); }
.object-intro h1 {
  margin: 0; color: var(--paper); font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.1vw, 64px); letter-spacing: 0.1em; line-height: 1.14;
}
.object-intro h1 span { display: block; }
.object-intro h1 span:first-child { color: var(--paper); }
.object-intro h1 span:last-child { color: var(--gold-pale); }
.object-latin {
  margin: 18px 0 0; color: rgba(241, 230, 209, 0.4);
  font-family: var(--latin); font-size: 8px; letter-spacing: 0.14em; line-height: 1.8;
}
.object-latin em { color: rgba(226, 189, 124, 0.55); font-style: italic; }
.object-lede { margin: 20px 0 0; color: rgba(241, 230, 209, 0.58); font-size: 11px; letter-spacing: 0.05em; line-height: 2; }
.object-stats { display: flex; align-items: flex-start; gap: 26px; margin: 27px 0 23px; padding-top: 16px; border-top: 1px solid var(--line); }
.object-stats div { display: flex; align-items: flex-start; gap: 7px; }
.object-stats strong { color: var(--gold-pale); font-family: var(--latin); font-size: 25px; font-weight: 400; line-height: 1; }
.object-stats span { color: rgba(241, 230, 209, 0.38); font-size: 7px; letter-spacing: 0.06em; line-height: 1.55; }
.text-link {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 0 7px;
  border: 0; border-bottom: 1px solid rgba(226, 189, 124, 0.34);
  background: transparent; color: rgba(241, 230, 209, 0.78);
  font-size: 9px; letter-spacing: 0.09em; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.text-link:hover { color: var(--gold-pale); border-color: var(--gold); }
.text-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.1; transition: transform .3s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }
.object-disclaimer { margin: 17px 0 0; color: rgba(241, 230, 209, 0.23); font-size: 7px; letter-spacing: 0.08em; }

/* right spec */
.object-spec {
  position: absolute; top: 17.5%; right: 38px; z-index: 20; width: 148px;
  color: rgba(241, 230, 209, 0.42);
}
.spec-caption { margin: 0 0 14px; font-family: var(--latin); font-size: 6px; letter-spacing: 0.2em; }
.spec-caption i { color: rgba(241, 230, 209, 0.22); font-style: normal; }
.object-spec dl { margin: 0; }
.object-spec dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.object-spec dt { font-size: 8px; letter-spacing: 0.08em; }
.object-spec dd { margin: 0; color: rgba(241, 230, 209, 0.78); font-family: var(--latin); font-size: 14px; letter-spacing: 0.03em; }
.object-spec dd small { margin-left: 3px; color: rgba(241, 230, 209, 0.34); font-family: var(--sans); font-size: 7px; }
.spec-scale { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: rgba(241, 230, 209, 0.2); font-size: 6px; letter-spacing: 0.08em; }
.spec-scale span { width: 17px; height: 1px; background: rgba(226, 189, 124, 0.34); }
.spec-orbit { position: relative; width: 76px; height: 76px; margin: 36px auto 0; border: 1px solid rgba(241, 230, 209, 0.1); border-radius: 50%; }
.orbit-ring { position: absolute; inset: 12px; border: 1px solid rgba(241, 230, 209, 0.07); border-radius: 50%; }
.orbit-ring::after { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px rgba(226, 189, 124, 0.8); content: ""; transform: translate(-50%, -50%); }
.orbit-axis { position: absolute; top: -8px; left: 50%; color: rgba(241, 230, 209, 0.28); font-family: var(--latin); font-size: 5px; letter-spacing: 0.1em; transform: translateX(-50%); }
.orbit-value { position: absolute; right: -13px; bottom: 13px; color: rgba(226, 189, 124, 0.55); font-family: var(--latin); font-size: 6px; letter-spacing: 0.08em; }

/* hotspots */
.hotspot-layer { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
.hotspot {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent; color: rgba(241, 230, 209, 0.58);
  font-size: 7px; letter-spacing: 0.1em; white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
  transition: opacity .35s var(--ease), color .25s var(--ease);
}
.hotspot.is-visible { opacity: 1; pointer-events: auto; }
.hotspot i {
  position: relative; display: block; width: 9px; height: 9px; border: 1px solid rgba(226, 189, 124, 0.7);
  border-radius: 50%; background: rgba(8, 7, 5, 0.42);
  box-shadow: 0 0 0 4px rgba(226, 189, 124, 0.05);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.hotspot i::after { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: var(--gold-pale); content: ""; transform: translate(-50%, -50%); }
.hotspot span { padding: 4px 7px; border: 1px solid rgba(241, 230, 209, 0.13); background: rgba(8, 7, 5, 0.48); opacity: 0; transform: translateX(-4px); backdrop-filter: blur(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.hotspot:hover span, .hotspot.is-active span { opacity: 1; transform: translateX(0); }
.hotspot:hover, .hotspot.is-active { color: var(--gold-pale); }
.hotspot:hover i, .hotspot.is-active i { background: rgba(226, 189, 124, 0.5); box-shadow: 0 0 0 5px rgba(226, 189, 124, 0.12), 0 0 12px rgba(226, 189, 124, 0.5); }

/* part card */
.part-card {
  position: absolute; right: 38px; bottom: 104px; z-index: 24;
  width: min(286px, calc(100% - 76px)); padding: 17px 18px 16px;
  border: 1px solid rgba(226, 189, 124, 0.24);
  background: linear-gradient(180deg, rgba(17, 15, 10, 0.92), rgba(8, 8, 6, 0.84));
  opacity: 0; visibility: hidden; transform: translateY(10px);
  backdrop-filter: blur(16px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.part-card.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.part-card > span { display: block; margin-bottom: 7px; color: rgba(226, 189, 124, 0.66); font-family: var(--latin); font-size: 6px; letter-spacing: 0.17em; }
.part-card h2 { margin: 0 0 6px; color: var(--paper); font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: 0.08em; }
.part-card p { margin: 0; color: rgba(241, 230, 209, 0.45); font-size: 9px; line-height: 1.85; letter-spacing: 0.03em; }
.part-card button {
  position: absolute; top: 8px; right: 10px; padding: 3px; border: 0; background: transparent;
  color: rgba(241, 230, 209, 0.35); font-size: 17px; line-height: 1; cursor: pointer;
}

/* dock */
.view-dock {
  position: absolute; bottom: 24px; left: 50%; z-index: 25;
  display: flex; align-items: center; gap: 20px; padding: 8px 11px;
  border: 1px solid rgba(241, 230, 209, 0.1);
  background: rgba(7, 7, 5, 0.6); transform: translateX(-50%);
  backdrop-filter: blur(17px); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}
.dock-hint { display: flex; align-items: center; gap: 8px; color: rgba(241, 230, 209, 0.24); font-size: 6px; letter-spacing: 0.05em; line-height: 1.55; white-space: nowrap; }
.drag-glyph { position: relative; display: block; width: 16px; height: 21px; border: 1px solid rgba(241, 230, 209, 0.22); border-radius: 9px; }
.drag-glyph i { position: absolute; top: 4px; left: 50%; width: 1px; height: 5px; background: rgba(226, 189, 124, 0.75); transform: translateX(-50%); animation: glyphScroll 1.9s ease-in-out infinite; }
@keyframes glyphScroll { 0%,100% { transform: translate(-50%,0); opacity: .35; } 50% { transform: translate(-50%,5px); opacity: 1; } }
.view-tabs { display: flex; gap: 1px; background: rgba(241, 230, 209, 0.08); }
.view-tabs button {
  display: flex; flex-direction: column; gap: 2px; min-width: 53px; padding: 6px 10px;
  border: 0; background: rgba(9, 9, 7, 0.94); color: rgba(241, 230, 209, 0.38);
  font-size: 8px; letter-spacing: 0.07em; text-align: left; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.view-tabs button i { color: rgba(241, 230, 209, 0.2); font-family: var(--latin); font-size: 5px; font-style: normal; }
.view-tabs button:hover { color: rgba(241, 230, 209, 0.72); }
.view-tabs button.is-active { background: rgba(226, 189, 124, 0.11); color: var(--gold-pale); }
.view-tabs button.is-active i { color: rgba(226, 189, 124, 0.55); }
.dock-tools { display: flex; align-items: center; gap: 1px; }
.tool-button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 35px;
  padding: 3px 4px; border: 0; background: transparent; color: rgba(241, 230, 209, 0.3);
  font-size: 6px; letter-spacing: 0.03em; cursor: pointer; transition: color .3s var(--ease);
}
.tool-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.tool-button:hover, .tool-button.is-on, .tool-button[aria-pressed="true"] { color: rgba(240, 217, 169, 0.8); }
.tool-button[aria-pressed="false"] { color: rgba(241, 230, 209, 0.22); }
.tool-button--ar { color: rgba(226, 189, 124, 0.78); }

.stage-footnote {
  position: absolute; bottom: 16px; left: 38px; z-index: 9;
  display: flex; align-items: center; gap: 9px;
  color: rgba(241, 230, 209, 0.15); font-family: var(--latin); font-size: 5px; letter-spacing: 0.15em;
  pointer-events: none;
}
.stage-footnote i { width: 22px; height: 1px; background: rgba(241, 230, 209, 0.12); }

/* fallback */
.webgl-fallback {
  position: absolute; top: 50%; left: 50%; z-index: 80; width: min(480px, calc(100% - 40px));
  padding: 30px; border: 1px solid var(--line); background: rgba(8, 7, 5, 0.92);
  text-align: center; transform: translate(-50%, -50%);
}
.webgl-fallback > span { color: rgba(226, 189, 124, 0.6); font-family: var(--latin); font-size: 7px; letter-spacing: 0.2em; }
.webgl-fallback h2 { margin: 12px 0 10px; font-family: var(--serif); font-size: 26px; font-weight: 400; }
.webgl-fallback p { color: rgba(241, 230, 209, 0.45); font-size: 10px; line-height: 1.9; }
.webgl-fallback button { margin-top: 10px; padding: 9px 15px; border: 1px solid rgba(226, 189, 124, 0.4); background: transparent; color: var(--gold-pale); font-size: 9px; cursor: pointer; }

/* archive */
.archive-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 4, 3, 0.62);
  opacity: 0; visibility: hidden; backdrop-filter: blur(4px);
  transition: opacity .4s var(--ease), visibility .4s;
}
.archive-scrim.is-open { opacity: 1; visibility: visible; }
.archive {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(555px, 94vw);
  background: #0c0b08; border-left: 1px solid rgba(241, 230, 209, 0.14);
  transform: translateX(102%); transition: transform .5s var(--ease);
  display: flex; flex-direction: column;
}
.archive.is-open { transform: translateX(0); }
.archive-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 62px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.archive-head p { margin: 0; color: rgba(241, 230, 209, 0.36); font-family: var(--latin); font-size: 7px; letter-spacing: 0.16em; }
.archive-head p span { color: rgba(241, 230, 209, 0.2); }
.archive-close { position: relative; width: 30px; height: 30px; border: 1px solid rgba(241, 230, 209, 0.2); background: transparent; cursor: pointer; }
.archive-close span { position: absolute; top: 50%; left: 50%; width: 13px; height: 1px; background: rgba(241, 230, 209, 0.55); }
.archive-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.archive-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.archive-scroll { flex: 1; overflow-y: auto; padding: 30px 34px 50px; scrollbar-width: thin; scrollbar-color: rgba(226, 189, 124, 0.3) transparent; }
.archive-kicker { margin: 0 0 12px; color: rgba(226, 189, 124, 0.58); font-family: var(--latin); font-size: 7px; letter-spacing: 0.16em; }
.archive h2 { margin: 0; color: var(--paper); font-family: var(--serif); font-size: clamp(29px, 3vw, 40px); font-weight: 400; letter-spacing: 0.08em; line-height: 1.32; }
.archive-latin { margin: 13px 0 24px; color: rgba(241, 230, 209, 0.25); font-family: var(--latin); font-size: 7px; letter-spacing: 0.14em; line-height: 1.7; }
.archive-pattern {
  height: 62px; margin: 0 0 26px;
  border: 1px solid rgba(226, 189, 124, 0.13);
  background-color: rgba(226, 189, 124, 0.025);
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(226, 189, 124, 0.28) 47%, rgba(226, 189, 124, 0.28) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 46%, rgba(207, 200, 183, 0.2) 47%, rgba(207, 200, 183, 0.2) 50%, transparent 51%);
  background-size: 20px 20px, 20px 20px;
  opacity: .64;
}
.archive-data { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 0 28px; padding: 7px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.archive-data div { padding: 9px 0; border-bottom: 1px solid rgba(241, 230, 209, 0.055); }
.archive-data div:nth-last-child(-n+2) { border-bottom: 0; }
.archive-data dt { color: rgba(241, 230, 209, 0.28); font-size: 7px; letter-spacing: 0.08em; }
.archive-data dd { margin: 3px 0 0; color: rgba(241, 230, 209, 0.74); font-size: 10px; letter-spacing: 0.04em; }
.archive-section { margin: 0 0 26px; }
.archive-section h3 { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px; color: rgba(241, 230, 209, 0.9); font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: 0.08em; }
.archive-section h3 span { color: rgba(226, 189, 124, 0.5); font-family: var(--latin); font-size: 8px; letter-spacing: 0.08em; }
.archive-section p { margin: 0 0 10px; color: rgba(241, 230, 209, 0.46); font-size: 10px; line-height: 2; letter-spacing: 0.03em; }
.archive-section p:last-child { margin-bottom: 0; }
.archive-actions { display: grid; gap: 1px; margin-top: 30px; background: rgba(241, 230, 209, 0.09); }
.archive-actions a { display: flex; justify-content: space-between; padding: 13px 15px; background: #100e0a; color: rgba(241, 230, 209, 0.65); font-size: 9px; letter-spacing: 0.08em; text-decoration: none; transition: background .25s, color .25s; }
.archive-actions a:hover { background: #17130d; color: var(--gold-pale); }
.archive-actions a span { color: rgba(226, 189, 124, 0.55); }
.archive-source { margin: 20px 0 0; color: rgba(241, 230, 209, 0.22); font-size: 7px; line-height: 1.8; }

/* toast / loader */
.toast { position: fixed; right: 50%; bottom: 104px; z-index: 95; padding: 8px 14px; border: 1px solid rgba(226, 189, 124, 0.28); background: rgba(8, 7, 5, 0.86); color: rgba(241, 230, 209, 0.8); font-size: 9px; letter-spacing: 0.08em; opacity: 0; visibility: hidden; transform: translate(50%, 7px); backdrop-filter: blur(10px); transition: opacity .3s, visibility .3s, transform .3s; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(50%, 0); }
.loader {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #080705; transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader::before { position: absolute; inset: 26px; border: 1px solid rgba(241, 230, 209, 0.06); content: ""; pointer-events: none; }
.loader-mark { display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(226, 189, 124, 0.4); color: var(--gold-pale); font-family: var(--serif); font-size: 38px; }
.loader-info { width: min(380px, calc(100% - 48px)); margin-top: 28px; text-align: center; }
.loader-eyebrow { margin: 0 0 9px; color: rgba(226, 189, 124, 0.55); font-family: var(--latin); font-size: 6px; letter-spacing: 0.2em; }
.loader-info h2 { margin: 0; color: var(--paper); font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: 0.15em; }
.loader-sub { margin: 8px 0 20px; color: rgba(241, 230, 209, 0.34); font-size: 9px; letter-spacing: 0.06em; }
.loader-track { height: 1px; background: rgba(241, 230, 209, 0.12); }
.loader-track span { display: block; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease); }
.loader-meta { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; margin-top: 7px; color: rgba(241, 230, 209, 0.35); font-family: var(--latin); font-size: 6px; letter-spacing: 0.1em; }
.loader-meta span { color: rgba(226, 189, 124, 0.7); font-size: 10px; }
.loader-meta i { font-style: normal; }
.loader-meta em { margin-left: auto; color: rgba(241, 230, 209, 0.24); font-family: var(--sans); font-size: 6px; font-style: normal; letter-spacing: 0.08em; }
.loader-foot { position: absolute; bottom: 28px; color: rgba(241, 230, 209, 0.16); font-family: var(--latin); font-size: 5px; letter-spacing: 0.18em; }
.noscript { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink); color: var(--paper); }

/* responsive */
@media (max-width: 1100px) {
  .topbar { padding: 18px 22px; gap: 16px; }
  .collection-line { display: none; }
  .object-intro { left: 24px; width: min(340px, 38vw); }
  .object-spec { right: 24px; }
  .part-card { right: 24px; }
  .stage-footnote { left: 24px; }
}
@media (max-width: 760px) {
  .topbar { padding: 14px 14px; gap: 10px; }
  .brand-type small { display: none; }
  .brand-type strong { font-size: 16px; }
  .brand-seal { width: 31px; height: 31px; font-size: 18px; }
  .topnav { display: none; }
  .top-actions { margin-left: auto; gap: 6px; }
  .ar-launch { width: 31px; height: 31px; justify-content: center; padding: 0; }
  .ar-launch span:last-child { display: none; }
  .sound-button { width: 31px; height: 31px; padding: 0; justify-content: center; }
  .sound-button-label { display: none; }
  .icon-button { width: 31px; height: 31px; }
  .object-intro { top: 78px; left: 16px; width: calc(100% - 32px); }
  .object-intro h1 { font-size: clamp(34px, 10vw, 44px); }
  .object-lede { display: none; }
  .object-stats { margin: 14px 0 12px; padding-top: 10px; gap: 20px; }
  .object-stats strong { font-size: 21px; }
  .object-latin { margin-top: 12px; font-size: 7px; }
  .object-disclaimer { display: none; }
  .object-spec { display: none; }
  .hotspot span { display: none; }
  .hotspot i { width: 8px; height: 8px; }
  .view-dock { right: 10px; bottom: 10px; left: 10px; gap: 0; justify-content: space-between; transform: none; padding: 6px; }
  .dock-hint { display: none; }
  .view-tabs { flex: 1; }
  .view-tabs button { flex: 1; min-width: 0; padding: 6px 5px; text-align: center; }
  .view-tabs button i { display: none; }
  .view-tabs button span { font-size: 8px; }
  .dock-tools { gap: 0; }
  .tool-button { min-width: 29px; padding: 3px 2px; font-size: 5px; }
  .tool-button svg { width: 13px; height: 13px; }
  .part-card { right: 16px; bottom: 84px; left: 16px; width: auto; padding: 13px 15px; }
  .part-card h2 { font-size: 20px; }
  .stage-footnote { display: none; }
  .toast { bottom: 82px; }
  .archive { width: 100%; }
  .archive-scroll { padding: 24px 22px 40px; }
  .archive-data { grid-template-columns: 1fr; gap: 0; }
  .archive-data div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(241, 230, 209, 0.055); }
  .archive-data div:last-child { border-bottom: 0; }
}
@media (max-width: 390px) {
  .tool-button span { display: none; }
  .tool-button { min-width: 25px; }
  .object-intro h1 { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   AR layer
   -------------------------------------------------------------------------- */

.ar-video, .ar-sim { position: fixed; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.ar-video { z-index: 10; object-fit: cover; opacity: 0; background: #050504; transition: opacity .7s ease; }
body.is-ar .ar-video { display: block; }
body.is-ar.is-camera-live .ar-video { opacity: 1; }
.ar-sim {
  z-index: 9; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 29%, rgba(226, 189, 124, 0.14) 0%, rgba(122, 87, 43, 0.06) 34%, transparent 60%),
    radial-gradient(ellipse at 50% 54%, rgba(25, 34, 28, 0.16) 0%, transparent 50%),
    linear-gradient(180deg, #11130f 0%, #0b0d0a 37%, #171812 48.6%, #493d2b 49.3%, #322a1e 65%, #0b0c09 100%);
}
body.is-ar .ar-sim { display: block; }
body.is-ar.is-camera-live .ar-sim, body.is-ar.is-ar-xr .ar-sim, body.is-ar.is-ar-xr .ar-video { display: none; }
.ar-sim::before {
  position: absolute; inset: 0; content: "";
  background:
    radial-gradient(ellipse at 50% 47%, transparent 19%, rgba(3, 4, 3, 0.42) 69%, rgba(3, 4, 3, 0.84) 100%),
    linear-gradient(180deg, rgba(5, 6, 4, 0.45) 0%, transparent 17%, transparent 75%, rgba(4, 5, 3, 0.72) 100%);
}
.ar-sim::after {
  position: absolute; top: 49%; left: 50%; width: 58vw; height: 29vh; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(243, 205, 143, 0.17) 0%, rgba(155, 112, 56, 0.055) 43%, transparent 72%);
  filter: blur(22px); content: ""; transform: translateX(-50%);
}
.ar-sim-glow { position: absolute; top: 5%; left: 50%; width: 52vw; height: 46vh; border-radius: 50%; background: radial-gradient(circle, rgba(218, 168, 92, 0.1) 0%, transparent 68%); filter: blur(24px); transform: translateX(-50%); }
.ar-sim-pool { position: absolute; top: 48.5%; left: 50%; width: 68vw; height: 26vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(243, 202, 134, 0.15) 0%, rgba(137, 98, 51, 0.045) 44%, transparent 74%); filter: blur(20px); transform: translateX(-50%); }
.ar-sim-floor {
  position: absolute; right: -22%; bottom: -34%; left: -22%; height: 86%; opacity: .38;
  background-image: linear-gradient(rgba(208, 169, 104, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(208, 169, 104, 0.05) 1px, transparent 1px);
  background-size: 13.5% 17%; mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 65%);
  transform: perspective(620px) rotateX(59deg); transform-origin: top center;
}
.ar-overlay { position: fixed; inset: 0; z-index: 30; display: none; overflow: hidden; color: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
body.is-ar .ar-overlay { display: block; }
.ar-wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,5,3,.76) 0%, rgba(4,5,3,.18) 17%, transparent 30%, transparent 57%, rgba(4,5,3,.3) 73%, rgba(4,5,3,.86) 100%); }
.ar-head { position: absolute; top: 0; right: 0; left: 0; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(20px + env(safe-area-inset-top)) 24px 0; pointer-events: none; }
.ar-exit, .ar-help { pointer-events: auto; }
.ar-exit { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 11px; border: 1px solid rgba(241,230,209,.24); background: rgba(6,7,5,.44); color: rgba(247,239,223,.76); font-size: 9px; letter-spacing: .14em; cursor: pointer; backdrop-filter: blur(12px); }
.ar-exit:hover { border-color: rgba(226,189,124,.75); color: var(--paper); }
.ar-exit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.ar-title { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 50%; text-align: center; transform: translateX(-50%); }
.ar-title p { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; color: rgba(241,230,209,.42); font-family: var(--latin); font-size: 6px; letter-spacing: .25em; white-space: nowrap; }
.ar-title p i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px rgba(226,189,124,.9); animation: dotPulse 2.2s ease-in-out infinite; }
.ar-title p em { padding: 2px 6px; border: 1px solid rgba(226,189,124,.28); color: rgba(226,189,124,.74); font-family: var(--sans); font-size: 6px; font-style: normal; letter-spacing: .12em; }
.ar-title h2 { margin: 0; color: var(--paper); font-family: var(--serif); font-size: clamp(19px, 2.4vw, 28px); font-weight: 400; letter-spacing: .22em; text-indent: .22em; text-shadow: 0 2px 22px rgba(0,0,0,.5); }
.ar-help { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(241,230,209,.24); border-radius: 50%; background: rgba(6,7,5,.44); color: rgba(247,239,223,.68); font-family: var(--latin); font-size: 13px; cursor: pointer; backdrop-filter: blur(12px); }
.ar-help:hover { border-color: rgba(226,189,124,.75); color: var(--paper); }
.ar-mode-banner { position: absolute; top: calc(78px + env(safe-area-inset-top)); left: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid rgba(241,230,209,.1); background: rgba(6,7,5,.32); color: rgba(241,230,209,.42); font-size: 7px; letter-spacing: .12em; white-space: nowrap; pointer-events: none; transform: translateX(-50%); backdrop-filter: blur(9px); }
.ar-mode-banner i { width: 4px; height: 4px; border-radius: 50%; background: var(--patina-bright); box-shadow: 0 0 6px rgba(166,195,180,.85); }
.ar-mode-banner.is-sim i { background: var(--gold); box-shadow: 0 0 6px rgba(226,189,124,.8); }
.ar-guide { position: absolute; top: 51%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 15px; pointer-events: none; text-align: center; transform: translate(-50%, -50%); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ar-guide-reticle { position: relative; display: block; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(226,189,124,.06); animation: arBreathe 2.8s ease-in-out infinite; }
.ar-guide-reticle::before { position: absolute; inset: 23px; border: 1px solid rgba(226,189,124,.44); border-radius: 50%; content: ""; }
.ar-guide-reticle::after { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-pale); box-shadow: 0 0 12px rgba(240,217,169,.95); content: ""; transform: translate(-50%,-50%); }
.ar-guide-reticle i { position: absolute; width: 17px; height: 17px; border-color: rgba(240,217,169,.8); border-style: solid; }
.ar-guide-reticle i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.ar-guide-reticle i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.ar-guide-reticle i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.ar-guide-reticle i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.ar-guide p { margin: 0; padding: 7px 14px; border: 1px solid rgba(241,230,209,.12); background: rgba(6,7,5,.5); color: rgba(247,239,223,.86); font-size: 10px; letter-spacing: .13em; line-height: 1.7; backdrop-filter: blur(12px); }
.ar-guide small { color: rgba(241,230,209,.4); font-size: 8px; letter-spacing: .12em; }
@keyframes arBreathe { 0%,100% { transform: scale(.97); opacity: .74; } 50% { transform: scale(1.035); opacity: 1; } }
body.is-ar-placed .ar-guide { opacity: 0; transform: translate(-50%,-46%); }
.ar-console { position: absolute; right: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 22px; width: min(760px, calc(100% - 48px)); padding: 12px 14px 12px 18px; border: 1px solid rgba(241,230,209,.16); background: rgba(6,7,5,.63); opacity: 0; pointer-events: none; transform: translate(50%,18px); backdrop-filter: blur(18px); box-shadow: 0 22px 60px rgba(0,0,0,.38); transition: opacity .45s var(--ease), transform .45s var(--ease); }
body.is-ar-placed .ar-console { opacity: 1; pointer-events: auto; transform: translate(50%,0); }
.ar-console-label { display: flex; flex-direction: column; gap: 3px; min-width: 128px; padding-right: 18px; border-right: 1px solid rgba(241,230,209,.12); }
.ar-console-label span { color: rgba(226,189,124,.66); font-size: 7px; letter-spacing: .14em; }
.ar-console-label b { color: rgba(247,239,223,.9); font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: .07em; white-space: nowrap; }
.ar-tools { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 2px; }
.ar-tools button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 50px; padding: 4px 6px; border: 0; background: transparent; color: rgba(241,230,209,.48); font-size: 8px; letter-spacing: .04em; cursor: pointer; transition: color .25s, background .25s; }
.ar-tools button:hover, .ar-tools button:active { background: rgba(226,189,124,.08); color: var(--gold-pale); }
.ar-tools button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.ar-shutter { position: absolute; right: 32px; bottom: calc(126px + env(safe-area-inset-bottom)); z-index: 5; display: none; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: rgba(247,239,223,.72); font-size: 7px; letter-spacing: .12em; cursor: pointer; }
body.is-ar-placed.is-ar-camera .ar-shutter { display: flex; }
.ar-shutter-glyph { position: relative; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(247,239,223,.74); border-radius: 50%; background: rgba(6,7,5,.28); backdrop-filter: blur(10px); }
.ar-shutter-glyph::before { width: 32px; height: 32px; border-radius: 50%; background: rgba(247,239,223,.92); content: ""; }
.ar-shutter-glyph i { position: absolute; top: 11px; left: 50%; width: 10px; height: 4px; border: 1px solid rgba(20,19,15,.55); border-bottom: 0; transform: translateX(-50%); }
.ar-shutter em { font-style: normal; }
.ar-toast { position: absolute; bottom: calc(154px + env(safe-area-inset-bottom)); left: 50%; z-index: 15; max-width: calc(100% - 40px); padding: 8px 15px; border: 1px solid rgba(226,189,124,.3); background: rgba(7,8,5,.82); color: rgba(247,239,223,.88); font-size: 9px; letter-spacing: .1em; opacity: 0; pointer-events: none; transform: translate(-50%,8px); backdrop-filter: blur(12px); transition: opacity .3s, transform .3s; }
.ar-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.ar-help-sheet { position: absolute; top: 50%; left: 50%; z-index: 12; display: none; width: min(430px, calc(100% - 36px)); max-height: calc(100% - 36px); padding: 34px 34px 26px; overflow-y: auto; border: 1px solid rgba(226,189,124,.3); background: linear-gradient(180deg, rgba(22,22,16,.94), rgba(8,9,6,.96)), rgba(8,9,6,.94); opacity: 0; transform: translate(-50%,-47%); backdrop-filter: blur(24px); box-shadow: 0 32px 100px rgba(0,0,0,.66); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.ar-help-sheet.is-open { display: block; opacity: 1; transform: translate(-50%,-50%); }
.ar-help-sheet::before { position: absolute; inset: 10px; border: 1px solid rgba(241,230,209,.055); content: ""; pointer-events: none; }
.ar-help-close { position: absolute; top: 14px; right: 16px; z-index: 2; padding: 5px; border: 0; background: transparent; color: rgba(241,230,209,.46); font-size: 20px; font-weight: 200; line-height: 1; cursor: pointer; }
.ar-help-eyebrow { margin: 0 0 18px; color: rgba(226,189,124,.68); font-family: var(--latin); font-size: 7px; letter-spacing: .22em; }
.ar-help-eyebrow i { color: rgba(241,230,209,.32); font-family: var(--sans); font-style: normal; letter-spacing: .1em; }
.ar-help-sheet h3 { margin: 0 0 22px; color: var(--paper); font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: .12em; line-height: 1.35; }
.ar-help-sheet ol { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; }
.ar-help-sheet li { display: flex; gap: 13px; padding: 11px 0; border-top: 1px solid rgba(241,230,209,.075); }
.ar-help-sheet li:last-child { border-bottom: 1px solid rgba(241,230,209,.075); }
.ar-help-sheet li > span { padding-top: 2px; color: rgba(226,189,124,.64); font-family: var(--latin); font-size: 8px; letter-spacing: .1em; }
.ar-help-sheet li p { margin: 0; color: rgba(241,230,209,.58); font-size: 10px; letter-spacing: .04em; line-height: 1.85; }
.ar-help-sheet li b { display: block; margin-bottom: 1px; color: rgba(247,239,223,.92); font-family: var(--serif); font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.ar-help-note { margin: 0 0 22px; color: rgba(241,230,209,.33); font-size: 8px; line-height: 1.9; }
.ar-help-start { width: 100%; height: 40px; border: 1px solid rgba(226,189,124,.5); background: rgba(226,189,124,.1); color: var(--gold-pale); font-size: 9px; letter-spacing: .22em; cursor: pointer; }
.ar-help-start:hover { border-color: var(--gold-pale); background: rgba(226,189,124,.17); }

body.is-ar { background: #050504; }
body.is-ar .stage { z-index: 20; background: transparent; }
body.is-ar .atmosphere, body.is-ar .stage-vignette, body.is-ar .stage-grain, body.is-ar .topbar, body.is-ar .object-intro, body.is-ar .object-spec, body.is-ar .hotspot-layer, body.is-ar .part-card, body.is-ar .view-dock, body.is-ar .stage-footnote, body.is-ar .archive, body.is-ar .archive-scrim, body.is-ar .toast { display: none !important; }
body.is-ar .webgl-wrap { position: fixed; inset: 0; z-index: 1; }
body.is-ar .webgl-wrap canvas { width: 100%; height: 100%; }

@media (max-width: 760px) {
  .ar-title { top: calc(19px + env(safe-area-inset-top)); }
  .ar-title p { font-size: 5px; letter-spacing: .17em; }
  .ar-title h2 { font-size: 19px; letter-spacing: .16em; }
  .ar-head { padding: calc(15px + env(safe-area-inset-top)) 14px 0; }
  .ar-exit { height: 34px; padding: 0 10px 0 8px; }
  .ar-exit span { display: none; }
  .ar-help { width: 34px; height: 34px; }
  .ar-guide p { font-size: 9px; letter-spacing: .08em; }
  .ar-guide small { font-size: 7px; }
  .ar-console { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; width: auto; padding: 10px 6px 9px; transform: translate(0,18px); }
  body.is-ar-placed .ar-console { transform: translate(0,0); }
  .ar-console-label { display: none; }
  .ar-tools { gap: 0; }
  .ar-tools button { flex: 1; min-width: 0; padding: 4px 2px; font-size: 7px; }
  .ar-tools button svg { width: 17px; height: 17px; }
  .ar-shutter { right: 20px; bottom: calc(103px + env(safe-area-inset-bottom)); }
  .ar-shutter-glyph { width: 44px; height: 44px; }
  .ar-shutter-glyph::before { width: 30px; height: 30px; }
  .ar-shutter em { display: none; }
  .ar-toast { bottom: calc(112px + env(safe-area-inset-bottom)); }
  .ar-help-sheet { width: calc(100% - 28px); padding: 28px 22px 22px; }
  .ar-help-sheet h3 { font-size: 24px; }
}
@media (max-height: 680px) {
  .ar-console { bottom: 10px; }
  .ar-guide-reticle { width: 70px; height: 70px; }
  .ar-guide { gap: 10px; }
}


/* --------------------------------------------------------------------------
   Embedded: full-screen 3D and inline exhibition preview
   -------------------------------------------------------------------------- */

html.is-embed .topbar,
html.is-embed .object-intro,
html.is-embed .object-spec,
html.is-embed .stage-footnote,
html.is-embed .skip-link,
html.is-embed .archive,
html.is-embed .archive-scrim {
  display: none !important;
}

html.is-inline .loader {
  display: none !important;
}

html.is-embed .ar-head {
  display: none !important;
}

html.is-embed .ar-mode-banner {
  top: calc(70px + env(safe-area-inset-top));
}

html.is-embed .view-dock {
  bottom: 18px;
}

html.is-inline .hotspot-layer,
html.is-inline .part-card,
html.is-inline .view-dock,
html.is-inline .toast {
  display: none !important;
}

html.is-inline body,
html.is-inline .stage {
  background: #060504;
}

html.is-inline .stage-vignette {
  background:
    radial-gradient(ellipse at 52% 46%, transparent 34%, rgba(4, 4, 3, 0.26) 74%, rgba(4, 4, 3, 0.7) 100%);
}

@media (max-width: 760px) {
  html.is-embed .view-dock {
    bottom: 10px;
  }
}