html { scrollbar-gutter: stable; }
.concept-trigger { display: block; color: inherit; border-radius: 7% / 4.3%; transition: transform 240ms ease, box-shadow 240ms ease; }
.concept-trigger:focus-visible { outline: 2px solid #9bbcff; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .concept-trigger:hover { transform: translateY(-4px); box-shadow: 0 16px 40px #28488133; }
}
.details-ready main > .brand-story,
.details-ready main > .gravity-story,
.details-ready main > .gravity-system { display: none; }
.concept-dialog {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  color: #eff4ff; background: #07111e; overflow: hidden;
}
.concept-dialog::backdrop { background: #07111eeb; }
.concept-dialog[open] { display: flex; flex-direction: column; animation: detail-enter 320ms ease-out both; }
.detail-toolbar {
  flex: 0 0 auto; min-height: 68px; display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; padding: 12px 5%; background: #07111ef2; border-bottom: 1px solid #c7d9ff16;
}
.detail-close { border: 1px solid #c7d9ff40; background: transparent; color: inherit; border-radius: 30px; padding: 10px 18px; font: inherit; font-size: 14px; cursor: pointer; }
.detail-close:hover { background: #c7d9ff12; }
.detail-close:focus-visible { outline: 2px solid #9bbcff; outline-offset: 3px; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.detail-body { position: relative; }
.detail-scroll-hint { position: sticky; bottom: 20px; display: block; width: max-content; max-width: 90%; margin: -42px auto 16px; padding: 8px 16px; border-radius: 24px; background: #07111ee0; color: #becde3; font-size: 12px; pointer-events: none; transition: opacity 200ms; }
.detail-scroll-hint[hidden] { display: none; }
.detail-track { position: relative; }
.detail-frame { position: sticky; top: 0; overflow: hidden; isolation: isolate; background: #071323; }
.detail-motion .brand-story,
.detail-motion .gravity-story,
.detail-motion .gravity-system { position: absolute; inset: 0; padding: 0; }
.detail-motion .brand-story-heading,
.detail-motion .gravity-heading { position: absolute; inset: 6% 0 auto; }
.detail-motion .brand-story h2 { margin: 16px 0 0; }
.detail-motion .brand-origin,
.detail-motion .gravity-origin { position: absolute; margin: 0; max-width: none; will-change: opacity, transform; }
.detail-motion .brand-evolution,
.detail-motion .gravity-evolution { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; }
.detail-motion .brand-story-copy { position: absolute; inset: auto 0 8%; width: 90%; }
.detail-motion .gravity-duality { position: absolute; inset: 47% 5% auto; margin: 0; max-width: none; justify-content: space-between; }
.detail-motion .gravity-meaning { position: absolute; inset: auto 0 10%; width: 80%; }
.detail-motion .gravity-system { background: #071323; }
.detail-motion .gravity-system-viewport { height: 100%; overflow: hidden; }
.detail-motion .gravity-map { width: 100%; height: 100%; }
.detail-elements { margin: 0; padding: 48px 24px 80px; text-align: center; }
.detail-elements img { display: block; width: min(100%, 650px); height: auto; margin: 0 auto; clip-path: inset(.34% .73% .4% round 7% / 4.3%); }
@keyframes detail-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .detail-toolbar { min-height: 60px; padding: 10px 20px; }
  .detail-close { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .concept-trigger, .detail-scroll-hint { transition: none; }
  .concept-dialog[open] { animation: none; }
}