@font-face {
  font-family: "ThreeUI Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./threeui-fonts/fragment-mono.woff2") format("woff2");
}

.animated-top-dock-component {
  container-type: inline-size;
  color: #ecece8;
  background: #0b0b0b;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.animated-top-dock-component::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: "";
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.animated-top-dock-component {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.035), transparent 34%),
    #080808;
}

.animated-top-dock__nav {
  position: absolute;
  top: clamp(24px, 5cqw, 46px);
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  height: 38px;
  padding: 4px;
  overflow: visible;
  border: 1px solid #292929;
  border-radius: 11px;
  background: rgba(14, 14, 14, 0.86);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(75%);
  transform: translateX(-50%);
  isolation: isolate;
}

.animated-top-dock__item {
  position: relative;
  z-index: 6;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  outline: none;
  color: #858580;
  background: rgba(21, 21, 20, 0.9);
  font: 400 10px/1 "ThreeUI Fragment Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  white-space: nowrap;
  backdrop-filter: blur(14px) saturate(70%);
  transform-origin: 50% 0;
  transition: color 0.15s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
  will-change: width, height, transform;
  cursor: pointer;
}

.animated-top-dock__item[data-dock-near="true"],
.animated-top-dock__item:focus-visible {
  z-index: 7;
  color: #ecece8;
  border-color: #41413e;
  background: rgba(27, 27, 26, 0.94);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.26);
}

.animated-top-dock__logo {
  width: 28px;
  height: 28px;
  overflow: hidden;
  background: #e8e8e3;
}

.animated-top-dock__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.animated-top-dock__link {
  gap: 6px;
  width: 94px;
  padding: 0 9px;
}

.animated-top-dock__link[aria-pressed="true"] {
  color: #111;
  border-color: #e8e8e3;
  background: #e8e8e3;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

.animated-top-dock__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  opacity: 0.62;
  transition: opacity 0.16s;
}

.animated-top-dock__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.animated-top-dock__item[data-dock-near="true"] .animated-top-dock__icon,
.animated-top-dock__item:focus-visible .animated-top-dock__icon {
  opacity: 1;
}

/* Existing-site shell: only the authored dock capsule is mounted over TanQuant. */
.tq-sable-dock {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100100;
  width: 100%;
  height: 104px;
  pointer-events: none;
  background: transparent;
}
.tq-sable-dock::after { display: none; }
.tq-sable-dock .animated-top-dock__nav {
  top: 24px;
  height: 52px;
  padding: 6px;
  gap: 4px;
  border-radius: 15px;
  pointer-events: auto;
}
.tq-sable-dock .animated-top-dock__item {
  height: 40px;
  border-radius: 10px;
  font-size: 12px;
}
.tq-sable-dock .animated-top-dock__logo {
  width: 40px;
  height: 40px;
}
.tq-sable-dock .animated-top-dock__link {
  width: 126px;
  padding: 0 13px;
  gap: 8px;
}
.tq-sable-dock .animated-top-dock__icon {
  width: 16px;
  height: 16px;
}

/* Home follows the same dark-to-light value already driving the WebGL scene. */
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__nav {
  border-color: var(--motion-dock-nav-border, #292929);
  background: var(--motion-dock-nav-bg, rgba(14, 14, 14, .86));
  box-shadow:
    0 13px 32px var(--motion-dock-shadow, rgba(0, 0, 0, .48)),
    inset 0 1px var(--motion-dock-inset, rgba(255, 255, 255, .035));
}
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item {
  color: var(--motion-dock-item-color, #858580);
  background: var(--motion-dock-item-bg, rgba(21, 21, 20, .9));
}
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item:focus-visible {
  color: var(--motion-dock-near-color, #ecece8);
  border-color: var(--motion-dock-near-border, #41413e);
  background: var(--motion-dock-near-bg, rgba(27, 27, 26, .94));
}

/* Light product pages keep the authored geometry and motion with a matching palette. */
body.tq-simulator .tq-sable-dock .animated-top-dock__nav,
body.tq-manual .tq-sable-dock .animated-top-dock__nav,
body.tq-community .tq-sable-dock .animated-top-dock__nav {
  border-color: rgba(139, 149, 162, .28);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 13px 32px rgba(51, 65, 85, .16), inset 0 1px rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(120%);
}
@media (min-width: 761px) {
  body.tq-simulator .tq-sable-dock .animated-top-dock__nav,
  body.tq-manual .tq-sable-dock .animated-top-dock__nav,
  body.tq-community .tq-sable-dock .animated-top-dock__nav { top: 14px; }
}
body.tq-simulator .tq-sable-dock .animated-top-dock__item,
body.tq-manual .tq-sable-dock .animated-top-dock__item,
body.tq-community .tq-sable-dock .animated-top-dock__item {
  color: #687586;
  background: rgba(244, 246, 249, .92);
}
body.tq-simulator .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-manual .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-community .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-simulator .tq-sable-dock .animated-top-dock__item:focus-visible,
body.tq-manual .tq-sable-dock .animated-top-dock__item:focus-visible,
body.tq-community .tq-sable-dock .animated-top-dock__item:focus-visible {
  color: #172033;
  border-color: rgba(139, 149, 162, .35);
  background: #fff;
  box-shadow: 0 8px 18px rgba(51, 65, 85, .12);
}
body.tq-simulator .tq-sable-dock .animated-top-dock__link[aria-pressed="true"],
body.tq-manual .tq-sable-dock .animated-top-dock__link[aria-pressed="true"],
body.tq-community .tq-sable-dock .animated-top-dock__link[aria-pressed="true"] {
  color: #fff;
  border-color: #176ff2;
  background: #176ff2;
  box-shadow: 0 9px 21px rgba(23, 111, 242, .24);
}

body.tq-has-sable-dock .motion-brand-home,
body.tq-has-sable-dock .motion-desktop-nav,
body.tq-has-sable-dock .my-brand,
body.tq-has-sable-dock .my-desktop-nav,
body.tq-has-sable-dock .xa-brand,
body.tq-has-sable-dock .xa-bdg,
body.tq-has-sable-dock .xa-site-nav,
body.tq-has-sable-dock .bar .brand,
body.tq-has-sable-dock .bar .nav { display: none !important; }
body.tq-simulator.tq-has-sable-dock > .xa-bar .xa-go,
body.tq-manual.tq-has-sable-dock > .xa-bar .xa-go { display: none !important; }

@media (max-width: 760px) {
  .tq-sable-dock {
    display: grid;
    height: 68px;
    padding: 0;
  }
  .tq-sable-dock .animated-top-dock__nav {
    top: 9px;
    width: calc(100% - 20px);
    height: 50px;
    padding: 5px;
    gap: 3px;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .tq-sable-dock .animated-top-dock__item {
    flex: 1 1 0;
    width: auto !important;
    height: 38px !important;
    min-width: 0;
    border-radius: 9px;
    transform: none !important;
  }
  .tq-sable-dock .animated-top-dock__logo {
    flex: 0 0 38px;
    width: 38px !important;
    height: 38px !important;
  }
  .tq-sable-dock .animated-top-dock__link {
    width: auto !important;
    padding: 0 6px;
    gap: 0;
  }
  .tq-sable-dock .animated-top-dock__link > span:last-child { display: none; }
  .tq-sable-dock .animated-top-dock__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    opacity: .78;
  }
  body.tq-has-sable-dock .motion-brand,
  body.tq-has-sable-dock .my-header,
  body.tq-has-sable-dock > .xa-bar,
  body.tq-has-sable-dock > .bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-top-dock__item { transform: none !important; }
}