@charset "UTF-8";

/* Palette and rhythm for an open, dark product gallery. */
:root {
  color-scheme: dark;
  --ground: #070a08;
  --surface: #111812;
  --surface-high: #19231b;
  --white: #f3f7ef;
  --soft: #b3bdb5;
  --faint: #8a988d;
  --lime: #bcf86b;
  --lime-ink: #18220d;
  --hairline: #29372d;
  --span: 1160px;
  --edge: clamp(22px, 4vw, 56px);
  --chapter-space: clamp(70px, 9vw, 120px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
h2, h3, p, figure, ul { margin: 0; }
h2, h3, p, summary { overflow-wrap: anywhere; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 650; line-height: 1.45; letter-spacing: -.035em; }
h3 { font-weight: 600; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.bounds { width: min(calc(100% - var(--edge) * 2), var(--span)); margin-inline: auto; }
.jump-content { position: absolute; z-index: 10; left: 20px; top: 0; transform: translateY(-130%); padding: 10px 18px; color: var(--lime-ink); background: var(--lime); }
.jump-content:focus { transform: translateY(0); }

/* One navigation, with the mobile toggle occupying the rightmost touch target. */
.mast { border-bottom: 1px solid #1b241e; }
.mast-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: min(calc(100% - var(--edge) * 2), 1280px); min-height: 78px; margin-inline: auto; }
.brand-image { display: flex; width: 88px; min-height: 44px; align-items: center; flex-shrink: 0; }
.brand-image img { width: 100%; height: auto; }
.menu-state { position: absolute; z-index: 2; top: 17px; right: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.menu-trigger { display: flex; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: 50%; }
.menu-trigger i { width: 18px; height: 1px; background: var(--white); transition: transform 180ms ease; }
.menu-state:focus-visible + .menu-trigger { outline: 2px solid var(--lime); outline-offset: 4px; }
.menu-state:checked + .menu-trigger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-state:checked + .menu-trigger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-menu { display: none; width: 100%; padding: 10px 0 18px; }
.menu-state:checked ~ .site-menu { display: block; }
.section-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 8px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--surface); }
.section-links a { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 7px 10px; color: var(--soft); font-size: 13px; border-radius: 8px; transition: color 150ms, background 150ms; }
.section-links a:hover { color: var(--white); background: #222e23; }
.device-link { display: flex; min-height: 44px; margin-top: 8px; padding: 8px 18px; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #465638; border-radius: 12px; color: var(--lime); font-size: 13px; }
.device-link span { font-size: 17px; }
@media (min-width: 58rem) {
  .mast-line { min-height: 90px; }
  .brand-image { width: 106px; }
  .menu-state, .menu-trigger { display: none; }
  .site-menu, .menu-state:checked ~ .site-menu { display: flex; width: auto; padding: 0; align-items: center; gap: clamp(24px, 5vw, 72px); }
  .section-links { display: flex; padding: 4px; border-radius: 100px; }
  .section-links a { min-height: 38px; padding: 5px 19px; border-radius: 100px; }
  .device-link { margin: 0; min-height: 44px; border-radius: 100px; }
}

/* The opening contains no right-side object other than the supplied video. */
.gateway { display: grid; gap: 42px; padding-block: 50px 66px; }
.gateway-copy { min-width: 0; }
.gateway-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; color: var(--lime); font-size: 12px; letter-spacing: .12em; }
.gateway-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px #b8fc6a55; }
.gateway h2 { font-weight: 650; line-height: 1.35; }
.gateway-keyword { display: block; font-size: clamp(31px, 4.2vw, 54px); letter-spacing: -.035em; }
.gateway-subtitle { display: block; width: fit-content; margin-top: 16px; padding-bottom: 6px; border-bottom: 2px solid var(--lime); color: #d9e6d6; font-size: clamp(24px, 2.7vw, 33px); font-weight: 400; }
.gateway-intro { max-width: 550px; margin-top: 25px; color: var(--soft); font-size: 15px; line-height: 1.95; }
.gateway-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.gateway-actions a { display: inline-flex; flex: 1 1 128px; min-height: 52px; padding: 12px 19px; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--lime); border-radius: 7px; font-size: 14px; font-weight: 600; transition: background 150ms, transform 150ms; }
.join-action { background: var(--lime); color: var(--lime-ink); }
.gateway-actions .download-action { background: transparent; color: var(--white); border-color: #45523f; }
.gateway-actions a:hover { transform: translateY(-2px); }
.join-action:hover { background: #cef995; }
.download-action:hover { background: #1b281a; }
.gateway-index { display: inline-flex; min-height: 44px; margin-top: 17px; gap: 30px; align-items: center; color: var(--faint); font-size: 12px; }
.gateway-index span { color: var(--lime); }
.gateway-film { width: min(100%, 238px); height: auto; aspect-ratio: 480 / 1000; object-fit: contain; margin-inline: auto; background: #000; }
@media (min-width: 50rem) {
  .gateway { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 9%; padding-block: 64px 88px; }
  .gateway-actions a { flex: 0 1 170px; }
  .gateway-film { width: min(100%, 270px); }
}
@media (min-width: 84rem) {
  .gateway { padding-block: 82px 102px; }
  .gateway-film { width: 282px; }
}

/* An open ledger: shared surface and common spine, rather than isolated cards. */
.account-atlas { padding-top: 28px; scroll-margin-top: 28px; }
.atlas-heading { display: grid; gap: 20px; margin-bottom: 30px; }
.atlas-heading p { max-width: 580px; color: var(--soft); font-size: 14px; }
.ledger-canvas { position: relative; padding: 30px 23px 0; border: 1px solid #344a32; border-radius: 24px; background: radial-gradient(ellipse at 16% 0%, #25452366, transparent 56%), linear-gradient(125deg, #141f16, #0e1410 80%); }
.ledger-route { display: none; }
.ledger-views { display: grid; gap: 30px; }
.ledger-view { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 19px; min-width: 0; }
.ledger-view h3 { align-self: end; margin-bottom: 10px; font-size: 18px; line-height: 1.5; }
.ledger-view p { grid-column: 2; color: var(--soft); font-size: 13px; line-height: 1.95; }
.valuation-emblem, .holding-emblem, .statement-emblem { position: relative; grid-row: 1 / span 2; height: 92px; width: 68px; align-self: start; }
.valuation-emblem i { position: absolute; border: 1px solid #9cc968; border-radius: 50%; }
.valuation-emblem i:first-child { width: 62px; height: 62px; left: 1px; top: 12px; background: #bcf86b09; }
.valuation-emblem i:nth-child(2) { width: 42px; height: 42px; left: 11px; top: 22px; border-color: #556d40; }
.valuation-emblem i:last-child { left: 25px; top: 36px; width: 14px; height: 14px; border: 0; border-radius: 3px; background: var(--lime); transform: rotate(45deg); }
.holding-emblem { display: flex; align-items: center; justify-content: center; gap: 5px; }
.holding-emblem i { width: 10px; height: 48px; border: 1px solid #62795a; border-radius: 5px; background: #20301f; transform: skewY(-15deg); }
.holding-emblem i:nth-child(2) { height: 62px; background: #324b28; }
.holding-emblem i:nth-child(3) { height: 72px; border-color: var(--lime); background: #7daa4c; }
.holding-emblem i:nth-child(4) { height: 42px; }
.statement-emblem span { position: absolute; width: 46px; height: 60px; left: 4px; top: 13px; padding: 15px 9px; border: 1px solid #4a624a; border-radius: 5px; background: #1d2b1f; transform: rotate(-10deg); }
.statement-emblem span:last-child { left: 19px; top: 23px; border-color: #93b86d; background: #243421; transform: rotate(8deg); }
.statement-emblem i { display: block; height: 2px; margin-bottom: 7px; background: #789963; }
.statement-emblem i:last-child { width: 65%; background: var(--lime); }
.record-finder { display: grid; gap: 18px; margin-top: 30px; padding: 24px 0 26px; border-top: 1px solid #30402e; }
.record-finder h3 { margin-bottom: 7px; font-size: 14px; }
.record-finder p { max-width: 650px; color: #a5b3a7; font-size: 12px; line-height: 1.9; }
.record-finder ul { display: flex; flex-wrap: wrap; gap: 8px; }
.record-finder li { padding: 4px 15px; border: 1px solid #3b4e36; border-radius: 30px; color: #c3d4bf; font-size: 12px; }
@media (min-width: 48rem) {
  .atlas-heading { grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: end; margin-bottom: 38px; }
  .ledger-canvas { padding: 38px 38px 0; }
  .ledger-route { position: absolute; display: flex; justify-content: space-between; left: 82px; right: 82px; top: 153px; height: 1px; background: #3a5132; }
  .ledger-route i { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #a6dc68; }
  .ledger-views { grid-template-columns: .98fr 1.05fr 1fr; gap: 50px; }
  .ledger-view { display: block; }
  .valuation-emblem, .holding-emblem, .statement-emblem { height: 100px; width: 90px; }
  .holding-emblem { justify-content: flex-start; gap: 6px; }
  .holding-emblem i { width: 13px; }
  .statement-emblem span { width: 52px; height: 68px; }
  .ledger-view h3 { position: relative; margin-top: 39px; margin-bottom: 14px; }
  .ledger-view p { font-size: 13px; }
  .record-finder { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; margin-top: 34px; }
}

/* Different questions get different conceptual windows, without invented data. */
.trade-observatory { padding-block: var(--chapter-space); }
.observatory-heading { max-width: 750px; margin-bottom: 32px; }
.observatory-heading p { margin-top: 18px; color: var(--soft); font-size: 14px; }
.observatory-windows { display: grid; gap: 18px; }
.market-pane, .order-pane { min-width: 0; border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; }
.market-pane { background: linear-gradient(155deg, #1b271d, #101712 76%); }
.order-pane { background: #121714; }
.price-map { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: center; gap: clamp(10px, 2.5vw, 30px); padding: 30px 18px; overflow: hidden; }
.price-map::before { position: absolute; left: 12%; right: 12%; top: 50%; border-top: 1px dashed #42543c; content: ""; }
.price-map figcaption { position: relative; z-index: 1; display: grid; width: 98px; height: 98px; place-items: center; flex-shrink: 0; }
.price-map strong { position: relative; font-size: 13px; font-weight: 500; white-space: nowrap; }
.quote-orbit { position: absolute; inset: 0; border: 1px solid #71964c; border-radius: 50%; background: #283c21; box-shadow: 0 0 0 10px #bcf86b04, 0 0 0 23px #bcf86b03; }
.quote-side { position: relative; z-index: 1; display: flex; min-width: 62px; flex-direction: column; gap: 13px; align-items: center; padding-block: 15px; background: #172119; font-size: 11px; color: #c3d0c1; white-space: nowrap; }
.quote-side i { display: block; width: 38px; height: 27px; border: 1px solid #617657; border-radius: 4px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 7px, #526a47 7px, #526a47 8px); }
.quote-side:last-child i { border-color: #a1c975; }
.ticket-compare { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: center; gap: 13px; padding: 28px; }
.ticket-compare > div { width: 91px; height: 125px; padding: 19px 14px; border-radius: 7px; box-shadow: 0 12px 28px #0004; }
.instruction-sheet { transform: rotate(-8deg) translateY(-6px); background: #b8eb78; color: #263d18; }
.execution-sheet { transform: rotate(8deg) translateY(8px); background: #e5eadd; color: #293225; }
.ticket-compare span { display: block; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.ticket-compare i { display: block; height: 3px; margin-top: 9px; border-radius: 3px; background: #6c8b4d66; }
.ticket-compare i:last-child { width: 60%; }
.pane-copy { padding: 0 25px 29px; }
.pane-copy h3 { margin-bottom: 12px; font-size: 19px; line-height: 1.5; }
.pane-copy p { color: var(--soft); font-size: 14px; line-height: 1.9; }
@media (min-width: 58rem) {
  .observatory-heading { margin-bottom: 40px; }
  .observatory-windows { grid-template-columns: 1.15fr 1fr; gap: 24px; }
  .price-map, .ticket-compare { min-height: 255px; }
  .price-map figcaption { width: 112px; height: 112px; }
  .quote-side { min-width: 78px; font-size: 12px; }
  .pane-copy { padding: 0 36px 36px; }
}

/* Every answer starts readable; native disclosure remains available. */
.answer-room { padding-block: 62px 68px; background: linear-gradient(120deg, #131e15, #0e1510); border-block: 1px solid #223026; }
.answers-heading { display: grid; gap: 18px; margin-bottom: 30px; }
.answers-heading p { max-width: 670px; color: var(--soft); font-size: 14px; }
.inquiry-grid { display: grid; gap: 14px; align-items: start; }
.inquiry-grid li { min-width: 0; }
.inquiry { border: 1px solid #344332; border-radius: 12px; background: #0b100d; }
.inquiry summary { display: flex; min-height: 66px; padding: 18px; gap: 16px; align-items: start; justify-content: space-between; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; line-height: 1.7; }
.inquiry summary::-webkit-details-marker { display: none; }
.inquiry summary > span { padding-top: 1px; }
.inquiry summary > i { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; border: 1px solid #4e6540; border-radius: 50%; }
.inquiry summary > i::before, .inquiry summary > i::after { position: absolute; top: 10px; left: 7px; width: 8px; height: 1px; background: var(--lime); content: ""; transition: transform 160ms; }
.inquiry summary > i::after { transform: rotate(90deg); }
.inquiry[open] summary > i::after { transform: rotate(0); }
.inquiry[open] { border-color: #50683f; }
.inquiry-text { padding: 0 18px 22px; color: var(--soft); font-size: 13px; line-height: 1.95; }
.inquiry summary:hover { color: var(--lime); }
@media (min-width: 48rem) {
  .answer-room { padding-block: 76px 82px; }
  .answers-heading { grid-template-columns: .58fr 1.4fr; gap: 80px; align-items: start; margin-bottom: 36px; }
  .inquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .inquiry summary { padding: 22px 24px 16px; }
  .inquiry-text { padding: 0 24px 26px; }
}

/* Editorial media: fixed image geometry, no pretend article links. */
.brief-gallery { padding-block: 65px var(--chapter-space); }
.briefs-heading { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; }
.briefs-heading span { flex: 1; height: 1px; background: var(--hairline); }
.briefs-list { display: grid; gap: 30px; }
.briefs-list li { min-width: 0; }
.brief-frame { aspect-ratio: 16 / 9; border: 1px solid #303a31; border-radius: 11px; overflow: hidden; background: #111; }
.brief-frame img { width: 100%; height: 100%; object-fit: cover; }
.brief figcaption { padding-top: 16px; }
.brief h3 { font-size: 16px; font-weight: 500; line-height: 1.8; }
@media (min-width: 44rem) {
  .brief-gallery { padding-top: 83px; }
  .briefs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .brief h3 { font-size: 15px; }
}

/* A short closing signature instead of a second download section. */
.end-slate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 26px 35px; border-top: 1px solid var(--hairline); }
.end-slate .brand-image { width: 82px; }
.end-slate p { order: 3; width: 100%; color: var(--faint); font-size: 11px; }
.return-link { display: inline-flex; min-height: 44px; gap: 14px; align-items: center; font-size: 12px; color: #c9d6c6; }
.return-link span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #44563b; border-radius: 50%; color: var(--lime); }
@media (min-width: 44rem) {
  .end-slate p { order: 0; width: auto; margin-right: auto; }
  .end-slate .brand-image { margin-right: 22px; }
}
@media (max-width: 22rem) {
  .ledger-canvas { padding-inline: 18px; }
  .ledger-view { grid-template-columns: 52px minmax(0, 1fr); column-gap: 15px; }
  .valuation-emblem, .holding-emblem, .statement-emblem { transform: scale(.78); transform-origin: left top; }
  .price-map { gap: 8px; padding-inline: 12px; }
  .price-map figcaption { width: 78px; height: 78px; }
  .quote-side { min-width: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}