@import url("/shared-tokens.css");

:root {
  color-scheme: dark;
  --holo-text: #d0e7ec;
  --holo-muted: #94b2c1;
  --holo-line: #2d5464;
  --holo-cyan: #92e9df;
  --holo-gold: #f6c48b;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #060e19;
  color: var(--holo-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid #b2f8ef; outline-offset: 4px; }
[hidden] { display: none !important; }

/* This is a direct structural adaptation of my-velo-ui/source/app/hologram.css:
   one viewport-filling host, a tilted planar world, a separate readable label
   layer and a separate readable destination layer. */
.hologram {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100dvh;
  min-height: 660px;
  overflow: hidden;
  background: #060e19;
}
.holo-header {
  position: relative;
  z-index: 4;
  display: flex;
  height: 78px;
  margin: 0 34px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #1b3544;
}
.holo-brand {
  display: flex;
  align-items: center;
  gap: 19px;
  color: #e2f0f2;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1.8px;
}
.holo-brand > span { color: #406473; font-size: 25px; font-weight: 300; }
.holo-brand small { color: #99b7c5; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.5px; }
.holo-header-tools { display: flex; align-items: center; gap: 24px; }
.holo-header nav { display: flex; align-items: center; gap: 18px; }
.holo-header nav a { color: #9ab7c3; font-size: 12px; }
.holo-header nav a:hover { color: #e1f5f3; }
.holo-route-switcher { display: flex; align-items: center; gap: 5px; }
.route-option {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #9ab7c3;
  text-align: left;
}
.route-option > span:last-child { display: grid; gap: 1px; }
.route-option strong { font-size: 12px; font-weight: 500; }
.route-option small { color: #74929e; font-size: 9px; }
.route-radio { width: 6px; height: 6px; border: 1px solid #7093a1; border-radius: 50%; }
.route-option[aria-selected="true"] { border-color: #305663; background: #112d38; color: #d9eded; }
.route-option[aria-selected="true"] .route-radio { border-color: var(--holo-cyan); background: var(--holo-cyan); box-shadow: 0 0 8px rgba(146, 233, 223, .4); }

.holo-heading {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 38px 0;
  pointer-events: none;
}
.holo-overview-copy > span { color: #88c9c8; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.5px; }
.holo-overview-copy h1 { margin: 5px 0 0; font-size: 26px; font-weight: 450; letter-spacing: -.7px; }
.holo-overview-copy p { margin: 8px 0 0; color: var(--holo-muted); font-size: 14px; }
.holo-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: #a4c6cf;
  font-size: 14px;
  pointer-events: auto;
}
.holo-breadcrumb strong { color: #def3f3; font-weight: 500; }
.holo-view-label { display: flex; align-items: center; gap: 9px; padding-top: 6px; color: #a1c5cf; font-size: 13px; }
.holo-view-count { margin-left: 10px; padding-left: 16px; border-left: 1px solid #365462; color: #8eafbf; font-size: 12px; }
.holo-layers-icon { position: relative; width: 17px; height: 17px; color: #86cecc; }
.holo-layers-icon i { position: absolute; top: 3px; left: 1px; width: 14px; height: 9px; border: 1px solid currentColor; transform: skewY(-18deg); }
.holo-layers-icon i:last-child { top: 7px; left: 3px; opacity: .5; }

.holo-viewport {
  position: absolute;
  inset: 162px 0 94px;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: none;
}
.holo-viewport[data-panning="true"] { cursor: grabbing; }
.holo-ambient {
  position: absolute;
  inset: -120px 0;
  background: radial-gradient(ellipse at 52% 52%, rgba(17, 64, 76, .27) 0%, rgba(13, 38, 51, .1) 42%, transparent 68%);
  pointer-events: none;
}
.holo-world {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform var(--camera-duration, 680ms) var(--ease-in-out);
}
.holo-map-surface {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(32, 70, 84, .31);
  border-radius: 48%;
  background-image:
    linear-gradient(rgba(78, 138, 149, .125) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 138, 149, .125) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse, #000 35%, transparent 70%);
  opacity: .7;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
}
.holo-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
}
.holo-network-track { fill: none; stroke: #153b49; stroke-width: 10; stroke-linejoin: round; }
.holo-network-line { fill: none; stroke: #659d9f; stroke-width: 1; stroke-dasharray: 4 9; stroke-linecap: round; }
.holo-network circle { fill: #284e5c; stroke: #6198a3; stroke-width: 1.5; }
.holo-landing-mark { fill: none; stroke: #638795; stroke-width: 1; }
.holo-map-core {
  position: absolute;
  top: 47%;
  left: 50%;
  display: grid;
  width: 180px;
  height: 180px;
  place-items: center;
  color: #6699a6;
  opacity: .75;
  translate: -50% -50%;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
}
.holo-map-core span { position: absolute; inset: 0; border: 1px solid #305c6a; border-radius: 50%; }
.holo-map-core span:nth-child(2) { inset: 24px; border-color: #214554; border-style: dashed; }
.holo-map-core b { font-size: 34px; font-weight: 300; }
.holo-node {
  position: absolute;
  width: 0;
  height: 0;
  color: var(--holo-cyan);
  transform-style: preserve-3d;
  transition: opacity 180ms var(--ease-out);
}
.holo-node:nth-of-type(6) { color: var(--holo-gold); }
.holo-node-floor {
  position: absolute;
  top: -78px;
  left: -116px;
  width: 232px;
  height: 156px;
  border: 1px solid currentColor;
  background: #0b2631;
  box-shadow: 0 15px 34px rgba(3, 17, 28, .65);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  opacity: .2;
}
.holo-pod {
  position: absolute;
  top: -78px;
  left: -116px;
  width: 232px;
  height: 156px;
  border: 0;
  background: none;
  color: inherit;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transform: translateZ(32px);
  transform-style: preserve-3d;
  transition: transform 220ms var(--ease-out);
}
.holo-pod-face {
  position: absolute;
  display: grid;
  inset: 0;
  place-items: center;
  border: 1px solid rgba(138, 219, 212, .56);
  background: linear-gradient(135deg, rgba(25, 76, 88, .37), rgba(11, 36, 51, .92) 60%, rgba(10, 27, 41, .91));
  box-shadow: inset 0 0 35px rgba(89, 214, 215, .04), inset 0 1px rgba(178, 239, 223, .44);
  clip-path: inherit;
  transition: opacity 180ms var(--ease-out), background-color 180ms ease;
}
.holo-pod-face::before { position: absolute; inset: 8px; border: 1px solid rgba(81, 148, 145, .27); clip-path: inherit; content: ""; }
.holo-pod-number { position: absolute; top: 13px; left: 18px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; opacity: .8; }
.holo-pod-symbol { font: 300 49px/1 Georgia, serif; filter: drop-shadow(0 0 6px rgba(117, 222, 201, .18)); }
.holo-pod-line { position: absolute; bottom: 14px; left: 22px; width: 42px; height: 2px; background: currentColor; opacity: .6; }
.holo-pod-dots { position: absolute; right: 19px; bottom: 15px; width: 36px; height: 4px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px); opacity: .5; }
.holo-node.is-active .holo-pod { transform: translateZ(49px); }
.holo-node.is-active .holo-node-floor { opacity: .4; }

.holo-label-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.holo-label-tethers { position: absolute; inset: 0; stroke: #669ca9; stroke-width: 1; opacity: .45; transition: opacity 160ms var(--ease-out); pointer-events: none; }
.holo-label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 186px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 5px;
  border: 0;
  background: transparent;
  color: #d4e9ec;
  pointer-events: auto;
  transition: transform var(--camera-duration, 680ms) var(--ease-in-out), opacity 160ms var(--ease-out);
}
.holo-label-title { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(94, 160, 168, .16); border-radius: 3px; background: rgba(8, 22, 36, .94); box-shadow: 0 7px 15px rgba(0, 5, 12, .52), 0 2px 4px rgba(0, 4, 10, .72), inset 0 1px rgba(164, 232, 224, .08); white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 140ms ease, box-shadow 140ms ease; }
.holo-label-title > span { color: #91b4c1; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.holo-label strong { font-size: 16px; font-weight: 500; }
.holo-label i { color: #8cd4d2; font-size: 13px; font-style: normal; }
.holo-label small { padding: 0 5px; background: rgba(7, 18, 27, .77); color: #94b2bf; font-size: 12px; }
.holo-label:hover .holo-label-title,
.holo-label.is-active .holo-label-title { background: #183d47; box-shadow: 0 11px 22px rgba(0, 5, 12, .58), 0 3px 7px rgba(0, 4, 10, .76), 0 0 15px rgba(103, 210, 202, .09), inset 0 1px rgba(185, 244, 236, .12); transform: translateY(-2px); }
.holo-label:active .holo-label-title { transform: translateY(0) scale(.97); }

.hologram--focused .holo-map-surface,
.hologram--focused .holo-network,
.hologram--focused .holo-map-core,
.hologram--focused .holo-node:not(.is-destination),
.hologram--focused .holo-label { opacity: 0; pointer-events: none; }
.hologram--focused .holo-label-tethers { opacity: 0; }
.hologram--focused .holo-node.is-destination .holo-pod { transform: translateZ(0); }
.hologram--focused .holo-node.is-destination .holo-pod-face { opacity: .2; }
.hologram--focused .holo-node.is-destination .holo-pod-face > * { opacity: 0; }
.hologram--focused .holo-node-floor { opacity: .045; }
.holo-destination {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity 180ms var(--ease-out), transform 420ms var(--ease-in-out);
  pointer-events: none;
}
.hologram[data-phase="inside"] .holo-destination { opacity: 1; transform: translateY(0); pointer-events: auto; }
.holo-destination-shell {
  width: min(1120px, calc(100% - 80px));
  height: 100%;
  margin-inline: auto;
  overflow: auto;
  padding: 0 16px 12px;
  outline: none;
  overscroll-behavior: contain;
  scrollbar-color: #466c7b #081522;
  scrollbar-width: thin;
}
.holo-room-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 0 0 24px; }
.holo-room-heading > div > span { color: #9dbbc8; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.holo-room-heading > div > span b { font-weight: 400; }
.holo-room-heading h2 { margin: 9px 0 0; font-size: clamp(27px, 3vw, 40px); font-weight: 450; letter-spacing: -.5px; line-height: 1.35; }
.holo-primary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.holo-primary-link,
.holo-secondary-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid #3a6569; border-radius: 4px; color: #a6e3da; font-size: 14px; }
.holo-primary-link { background: #13343d; }
.holo-primary-link:hover,
.holo-primary-link.is-complete { background: #1a514f; color: #e1f5f3; }
.holo-secondary-link { color: #a7bec7; }
.holo-secondary-link:hover { background: #173b42; color: #e1f5f3; }
.holo-workspace { margin-top: 25px; padding-top: 22px; border-top: 1px solid #2d4d5a; }
.holo-workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.holo-workspace-heading h3 { margin: 7px 0 0; color: #d7eeed; font-size: 21px; font-weight: 500; }
.holo-workspace-heading p { margin: 0; color: #9bc2c7; font-size: 12px; }
.holo-workspace-guide { display: flex; justify-content: space-between; gap: 24px; margin: 14px 0; padding: 12px 15px; border: 1px solid #315663; background: rgba(8, 27, 40, .84); }
.holo-workspace-guide > div { min-width: 0; }
.holo-workspace-guide .holo-section-label { display: block; margin-bottom: 4px; }
.holo-workspace-guide p { margin: 0; color: #b7d3d6; font-size: 13px; line-height: 1.7; }
.holo-workspace-guide p + p { flex-shrink: 0; color: #86b1b8; }
.holo-workspace-guide ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 22px; color: #c4dfe1; font-size: 13px; line-height: 1.7; }
.holo-workspace-guide li::marker { color: var(--holo-cyan); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.holo-tour-launcher { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(100, 170, 177, .45); }
.holo-tour-launcher button { padding: 6px 9px; border: 1px solid #416b72; background: #0d2935; color: #bde1df; font-size: 11px; }
.holo-tour-launcher button:hover { border-color: var(--holo-cyan); background: #173e48; color: #effffb; }
.holo-tour-launcher span { color: #86aab1; font-size: 11px; }
.holo-tour { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(100, 170, 177, .45); }
.holo-tour-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.holo-tour-heading > span:last-child { color: #8fc8c8; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.holo-tour h4 { margin: 7px 0 4px; color: #d9efed; font-size: 15px; font-weight: 500; }
.holo-tour p { margin: 0; color: #b9d7d9; font-size: 12px; line-height: 1.65; }
.holo-tour .holo-tour-status { margin-top: 6px; color: #8fb9be; }
.holo-tour-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.holo-tour-actions button { padding: 6px 9px; border: 1px solid #416b72; background: #0d2935; color: #bde1df; font-size: 11px; }
.holo-tour-actions button:hover { border-color: var(--holo-cyan); background: #173e48; color: #effffb; }
.holo-tour-actions button:disabled { border-color: #314c55; }
.holo-frame-shell { position: relative; min-height: 430px; border: 1px solid #365b67; background: #081622; box-shadow: inset 0 0 35px rgba(76, 181, 181, .05); }
#product-frame { display: block; width: 100%; min-height: 650px; border: 0; background: #fff; }
.holo-frame-message { display: grid; min-height: 430px; place-content: center; gap: 12px; padding: 28px; color: #b6d6d8; text-align: center; }
.holo-frame-error { margin-top: 14px; min-height: 170px; border: 1px solid #6c5546; background: rgba(47, 34, 32, .78); }
.holo-frame-error strong { color: #f1d4b7; font-size: 15px; font-weight: 500; }
.holo-frame-actions { display: flex; justify-content: center; gap: 10px; }
.holo-frame-actions button { padding: 8px 13px; border: 1px solid #668a8b; background: #102e39; color: #cde7e4; }
.holo-frame-actions button:hover { background: #1a4b4d; }
.holo-lesson { display: grid; grid-template-columns: 1.08fr 1fr; gap: 40px; }
.holo-lesson-content { position: relative; padding: 25px 29px; border: 1px solid #355866; background: rgba(12, 36, 49, .85); box-shadow: 9px 9px 0 rgba(16, 36, 49, .42), 9px 9px 0 1px rgba(74, 115, 119, .21); }
.holo-concept-symbol { padding-bottom: 18px; color: #a3e5dc; font: 300 48px/1 Georgia, serif; }
.holo-lesson-content p { margin: 0 0 16px; color: #a9c3ce; font-size: 16px; line-height: 1.9; }
.holo-lesson-content .holo-lesson-intro { color: #d2e8ec; }
.holo-tags { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 15px; border-top: 1px solid #355560; }
.holo-tags span { padding: 4px 8px; border: 1px solid #385f69; color: #a5d6d2; font-size: 11px; }
.holo-judgment { padding-top: 7px; }
.holo-section-label { color: #8eafb9; font-size: 13px; }
.holo-route-reading { display: grid; gap: 12px; margin-top: 13px; }
.holo-route-reading div { display: grid; gap: 6px; padding: 15px 18px; border: 1px solid #375d6b; border-radius: 4px; background: rgba(10, 32, 48, .83); }
.holo-route-reading span { color: #88aab6; font-size: 11px; }
.holo-route-reading strong { color: #bdd8dd; font-size: 14px; font-weight: 450; line-height: 1.7; }
.holo-assessment-note { margin-top: 17px; color: #94b0be; font-size: 12px; line-height: 1.8; }
.holo-room-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding-top: 22px; border-top: 1px solid #2c4654; }
.holo-room-footer button { display: inline-flex; align-items: center; gap: 9px; padding: 5px 0; border: 0; background: none; color: #a4c6ce; font-size: 13px; }
.holo-room-footer button:hover { color: #e0f5f0; }


.holo-index { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; gap: 8px; padding: 25px min(8vw, 110px); overflow: auto; }
.holo-index-item { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-height: 60px; padding: 11px 14px; border: 1px solid #345765; border-radius: 4px; background: #0a2030; color: #c6dfe4; text-align: left; }
.holo-index-item:hover { border-color: #80cbc5; background: #153946; }
.holo-index-item > span { color: var(--holo-cyan); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.holo-index-item strong { font-size: 15px; font-weight: 500; }
.holo-index-item small { color: #91afbb; font-size: 11px; }
.holo-index-item i { color: #83c8c4; font-size: 11px; font-style: normal; }

.holo-footer {
  position: absolute;
  z-index: 4;
  right: 34px;
  bottom: 0;
  left: 34px;
  display: flex;
  height: 81px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #203b4a;
  background: linear-gradient(rgba(6, 14, 25, 0), #060e19);
}
.holo-footer-message { display: flex; align-items: center; gap: 15px; }
.holo-footer-bracket { width: 5px; height: 29px; border-block: 1px solid #93dcd3; border-left: 1px solid #93dcd3; }
.holo-footer-message p { margin: 0; color: #accbd3; font-size: 14px; line-height: 1.7; }
.holo-footer-message small { display: block; margin-top: 3px; color: #8daebd; font-size: 12px; }
.holo-map-controls { display: flex; align-items: center; gap: 4px; }
.holo-map-controls > span { padding-right: 15px; color: #93b3c2; font-size: 12px; }
.holo-map-controls button { display: grid; min-width: 36px; height: 36px; place-items: center; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #aad0d6; }
.holo-map-controls button:hover { background: #17333f; color: #e1f5f3; }
#toggle-index { width: auto; font-size: 11px; }
.holo-overview-return { display: inline-flex; align-items: center; gap: 10px; padding: 9px; border: 0; background: transparent; color: #b4d5dd; font-size: 14px; }
.holo-overview-return kbd { margin-left: 6px; padding: 4px 6px; border: 1px solid #456372; border-radius: 4px; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.hologram--focused .holo-map-controls { display: none; }
.hologram--focused .holo-footer-message { margin-left: auto; }
.hologram--instant .holo-world,
.hologram--instant .holo-label,
.hologram--instant .holo-destination,
.hologram--instant .holo-node,
.hologram--instant .holo-pod,
.hologram--instant .holo-destination-shell,
.hologram--instant .holo-viewport,
.hologram--instant .holo-header,
.hologram--instant .holo-heading,
.hologram--instant .holo-footer { transition-duration: 0ms !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Driver.js supplies the spotlight lifecycle; the popover remains Velo's
   dark, instrument-panel language rather than a generic SaaS tooltip. */
.velo-driver-popover {
  min-width: 280px;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid #47757d;
  border-radius: 3px;
  background: #081b29;
  color: #cfe7e8;
  box-shadow: 0 14px 34px rgba(0, 4, 10, .58), inset 0 1px rgba(169, 239, 227, .08);
}
.velo-driver-popover .driver-popover-title {
  color: #e0f5f0;
  font: 500 16px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
}
.velo-driver-popover .driver-popover-description {
  color: #a9c9ce;
  font: 13px/1.7 Inter, ui-sans-serif, system-ui, sans-serif;
}
.velo-driver-popover .driver-popover-progress-text {
  color: #86c4c2;
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.velo-driver-popover .driver-popover-navigation-btns button {
  border: 1px solid #416b72;
  border-radius: 2px;
  background: #0d2935;
  color: #bde1df;
  text-shadow: none;
}
.velo-driver-popover .driver-popover-navigation-btns button:hover {
  background: #173e48;
  color: #effffb;
}
.velo-driver-popover .driver-popover-close-btn {
  color: #8fb9be;
}
.velo-driver-popover .driver-popover-arrow-side-left { border-left-color: #47757d; }
.velo-driver-popover .driver-popover-arrow-side-right { border-right-color: #47757d; }
.velo-driver-popover .driver-popover-arrow-side-top { border-top-color: #47757d; }
.velo-driver-popover .driver-popover-arrow-side-bottom { border-bottom-color: #47757d; }

@media (max-width: 699px) {
  .holo-tour-launcher { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .driver-fade .driver-overlay,
  .driver-fade .driver-popover { animation: none !important; }
}

@media (max-width: 1050px) {
  .holo-header-tools { gap: 10px; }
  .holo-header nav { display: none; }
  .holo-destination-shell { width: calc(100% - 44px); padding-inline: 12px; }
  .holo-lesson { gap: 26px; }
  .holo-view-count { display: none; }
}

@media (max-width: 699px) {
  .hologram { min-height: 720px; }
  .holo-header { height: 68px; margin-inline: 18px; gap: 10px; }
  .holo-brand { gap: 0; font-size: 29px; }
  .holo-brand small,
  .holo-brand > span { display: none; }
  .holo-route-switcher { gap: 2px; }
  .route-option { min-height: 36px; padding: 6px 7px; }
  .route-option small,
  .route-radio { display: none; }
  .route-option strong { font-size: 11px; }
  .holo-heading { padding: 19px 21px 0; }
  .holo-overview-copy > span { display: none; }
  .holo-overview-copy h1 { font-size: 22px; }
  .holo-overview-copy p { max-width: 230px; margin-top: 6px; font-size: 13px; }
  .holo-view-label { gap: 6px; padding-top: 3px; font-size: 12px; }
  .holo-layers-icon { display: none; }
  .holo-viewport { inset: 139px 0 106px; }
  .holo-label { width: 136px; gap: 2px; }
  .holo-label-title { gap: 6px; padding-inline: 6px; }
  .holo-label-title > span { font-size: 12px; }
  .holo-label strong { max-width: 88px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
  .holo-label i { font-size: 12px; }
  .holo-label small { display: none; }
  .holo-footer { right: 20px; left: 20px; height: 89px; gap: 5px; }
  .holo-footer-message { gap: 10px; }
  .holo-footer-message p { max-width: 205px; font-size: 12px; }
  .holo-footer-message small { max-width: 205px; font-size: 11px; }
  .holo-map-controls { gap: 0; }
  .holo-map-controls > span { display: none; }
  .holo-map-controls button { min-width: 30px; height: 32px; padding-inline: 6px; }
  #toggle-index { max-width: 53px; line-height: 1.2; }
  .holo-overview-return { gap: 5px; padding: 5px 0; font-size: 13px; white-space: nowrap; }
  .holo-overview-return kbd { display: none; }
  .holo-destination-shell { width: calc(100% - 28px); padding-inline: 7px; }
  .holo-room-heading { display: block; margin-bottom: 20px; }
  .holo-room-heading h2 { margin-top: 8px; font-size: 28px; }
  .holo-primary-actions { justify-content: flex-start; margin-top: 14px; }
  .holo-primary-link,
  .holo-secondary-link { padding: 9px 11px; font-size: 13px; }
  .holo-lesson { grid-template-columns: minmax(0, 1fr); row-gap: 27px; }
  .holo-workspace-heading,
  .holo-workspace-guide { align-items: flex-start; flex-direction: column; gap: 8px; }
  .holo-tour-actions { width: 100%; }
  .holo-tour-actions button { flex: 1 1 auto; }
  .holo-workspace-guide p + p { flex-shrink: initial; }
  .holo-frame-shell { min-height: 360px; }
  #product-frame { min-height: 560px; }
  .holo-lesson-content { padding: 22px; }
  .holo-lesson-content p { font-size: 15px; }
  .holo-room-footer { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 12px; }
  .holo-breadcrumb { gap: 6px; font-size: 13px; }
  .holo-index { align-content: start; padding: 8px 14px; }
  .holo-index-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .holo-index-item i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hologram * { transition-duration: 0ms !important; animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .holo-pod-face,
  .holo-lesson-content,
  .holo-label-title { background: #102736; }
  .holo-destination-shell { background: #081622; }
}