/* Shared navigation; each skill keeps its own authored visual identity. */
body.v2-detail {
  --detail-canvas: var(--paper, #09080f);
  --detail-ink: var(--ink, #f3f1fa);
  --detail-muted: var(--ink-soft, var(--muted, #b7b1ca));
  --detail-line: var(--line, #302c40);
  --detail-accent: var(--blue, #086acf);
}
body.v2-core { --detail-accent:#086acf; color-scheme:light; }
body.v2-motion { --detail-accent:#a6402c; --detail-muted:#4e5b51; color-scheme:light; }
body.v2-character { --detail-accent:#b63d2d; color-scheme:light; }
body.v2-history { --detail-canvas:#f2e7ce; --detail-line:#c6b393; --detail-accent:#943d27; color-scheme:light; }
html:has(body.v2-core) { background:#fff; color-scheme:light; }
html:has(body.v2-motion) { background:#f4f0e7; color-scheme:light; }
html:has(body.v2-character) { background:#f5f1e8; color-scheme:light; }
html:has(body.v2-history) { background:#f2e7ce; color-scheme:light; }
.v2-skill-bar {
  width:min(1180px,calc(100% - 80px)); margin:auto; padding:19px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px 28px;
  border-bottom:1px solid var(--detail-line,#302c40); color:var(--detail-ink,#f3f1fa);
  font-family:'Space Grotesk',sans-serif;
}
.v2-skill-home {
  display:inline-flex; align-items:center; gap:10px; color:var(--detail-ink,#f3f1fa);
  font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.v2-skill-home svg { display:block; width:27px; height:27px; flex:none; }
.v2-skill-home svg rect { fill:var(--detail-accent,#c8f25a); }
.v2-skill-home svg path { fill:#fff; }
.v2-skill-home span { font-weight:400; color:var(--detail-muted,#b7b1ca); font-size:11px; margin-left:2px; }
body.v2-detail .v2-skill-nav {
  display:flex!important; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0; font-size:12px;
}
.v2-skill-nav a {
  color:var(--detail-muted,#b7b1ca); min-height:38px; display:inline-flex; align-items:center;
  text-decoration:none; line-height:1.4;
}
.v2-skill-nav a:hover { color:var(--detail-ink,#f3f1fa); text-decoration:underline; text-underline-offset:4px; }
.v2-skill-nav a[aria-current=page] { color:var(--detail-accent,#c8f25a); font-weight:700; }
body.v2-detail .v2-skill-bar :is(a,button):focus-visible { outline:3px solid var(--detail-accent,#c8f25a); outline-offset:5px; }
/* Kit 2.0 and the film library retain their dark V2 world. */
body.v2-detail:is(.kit-page,.v2-promos) {
  --paper:#09080f; --paper-deep:#100e1a; --ink:#f3f1fa; --ink-soft:#b7b1ca; --muted:#b7b1ca;
  --line:#302c40; --blue:#c8f25a; --soft:#100e1a; --coral:#c8f25a; --coral-soft:#b9a6ff;
  --night:#100e1a; --mint:#c8f25a; --sage:#171421; --white:#f3f1fa; --purple:#7b5cff;
  --lilac:#b9a6ff; --lime:#c8f25a; --font:'Space Grotesk',sans-serif;
  --detail-canvas:#09080f; --detail-ink:#f3f1fa; --detail-muted:#b7b1ca; --detail-line:#302c40; --detail-accent:#c8f25a;
  background:#09080f; color:#f3f1fa; color-scheme:dark; font-family:'Space Grotesk',sans-serif; caret-color:#c8f25a;
}
html:has(body:is(.kit-page,.v2-promos)) { background:#09080f; color-scheme:dark; }
body.v2-detail:is(.kit-page,.v2-promos) :is(h1,h2,h3) { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.035em; }
body.v2-detail:is(.kit-page,.v2-promos) :is(h1,h2) em { color:#c8f25a; font-style:normal; font-weight:inherit; }
body.v2-detail:is(.kit-page,.v2-promos) :is(button,input,select,textarea) { font-family:'Space Grotesk',sans-serif; }
body.v2-detail:is(.kit-page,.v2-promos) :is(a,button,summary,input,select):focus-visible { outline:3px solid #c8f25a; outline-offset:5px; }
body.v2-detail:is(.kit-page,.v2-promos) ::selection { background:#c8f25a; color:#09080f; }
body.v2-detail:is(.kit-page,.v2-promos) ::-webkit-scrollbar-track { background:#09080f; }
body.v2-detail:is(.kit-page,.v2-promos) ::-webkit-scrollbar-thumb { background:#625875; border-color:#09080f; }
body.v2-detail:is(.kit-page,.v2-promos) .v2-skill-home svg path { fill:#09080f; }
body.v2-detail:is(.kit-page,.v2-promos) .button { border-radius:999px; }
body.v2-detail:is(.kit-page,.v2-promos) .button.primary { background:#c8f25a; color:#09080f; }
body.v2-detail:is(.kit-page,.v2-promos) .button.primary:hover { background:#dcff8d; }
body.v2-detail:is(.kit-page,.v2-promos) video { background:#07060c; }
.v2-legacy-note {
  background:var(--paper-deep,#f5f5f7); border:1px solid var(--detail-line,#dedfe3); border-radius:14px;
  padding:16px 20px; margin:20px 0 28px; max-width:80ch;
  font:400 14px/1.6 'Space Grotesk',sans-serif; color:var(--detail-muted,#64666b);
}
.v2-legacy-note strong { color:var(--detail-ink,#1d1d1f); font-weight:700; }
.v2-legacy-note a { color:var(--detail-accent,#086acf); text-underline-offset:4px; }
.v2-legacy-note-wide { width:min(1100px,calc(100% - 48px)); margin-inline:auto; }
body.v2-history .ink .v2-legacy-note { --paper-deep:#20373b; --detail-line:#6d7974; --detail-muted:#e1d9c6; --detail-ink:#fbf5e8; --detail-accent:#e9c88a; }
body.v2-history .workflow-grid .v2-legacy-note { margin:20px 0; }
body.v2-detail #mvs-privacy-open { left:auto; right:14px; bottom:16px; }
body.v2-detail:is(.v2-core,.v2-motion,.v2-character,.v2-history) #mvs-privacy-open {
  left:14px; right:auto; color:var(--detail-muted); background:var(--detail-canvas);
  border:1px solid var(--detail-line); border-radius:999px; padding:6px 11px; min-height:32px;
}
body.v2-detail:is(.v2-core,.v2-motion,.v2-character,.v2-history) #mvs-privacy-open:focus-visible {
  outline-color:var(--detail-accent);
}
@media(max-width:760px) {
  .v2-skill-bar { width:calc(100% - 40px); padding-block:16px; gap:10px; }
  body.v2-detail .v2-skill-nav { width:100%; gap:2px 17px; font-size:12px; }
  .v2-skill-nav a { min-height:38px; }
  .v2-legacy-note { font-size:13px; padding:14px 16px; }
  body.v2-detail .site-header { position:relative; top:auto; }
}
@media(max-width:700px) {
  /* Keep the portrait film's captions clear of the transport buttons. */
  body.v2-motion .hero-montage-stage {
    display:grid; grid-template-columns:minmax(0,1fr); aspect-ratio:auto; overflow:visible; background:transparent;
  }
  body.v2-motion .hero-montage-stage video { height:auto; aspect-ratio:9/16; border-radius:12px; }
  body.v2-motion .montage-controls { position:static; justify-content:flex-end; padding-top:10px; }
  body.v2-motion .montage-start-sound { top:calc(50% - 27px); }
}
@media(prefers-reduced-motion:reduce) {
  body.v2-detail *,body.v2-detail *::before,body.v2-detail *::after { scroll-behavior:auto; }
}