/** Shopify CDN: Minification failed

Line 287:0 Unexpected "}"

**/
/* ==========================================================================
   DockDash: "Instrument" layer
   Loads after theme.css. Black and white with neutral greys: a black studio for
   the hero and the 3D model, light grounds for the practical sections, and no
   colour accent. Buttons are ink on light grounds and white on dark ones.
   Type is one variable family, Archivo: semibold sentence-case headings with
   tight tracking, regular weight for everything else. Corners follow a three-step scale (soft
   media, firmer panels, round controls). Colours all come from theme settings.
   ========================================================================== */

/* Doubled :root so the fixed Archivo face wins over the font-picker value in theme-styles, which loads later */
:root:root {
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --accent: var(--gold, #C6A96B);
  --on-accent: #0A0A0A;
  --r-media: 14px;
  --r-panel: 12px;
  --r-ctl: 999px;
  --out: cubic-bezier(.2, .8, .2, 1);
  /* Type scale: a 1.25 ratio for text, then headline sizes set by width */
  --t-sm: 14px;
  --t-base: 17px;
  --t-lg: 21px;
  --t-h3: 22px;
  --t-h2: clamp(30px, 3.2vw, 44px);
}

body { font-family: var(--sans); font-size: var(--t-base); line-height: 1.55; font-stretch: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Type ---------- */
.display, .h2 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.025em;
  font-size: var(--t-h2); line-height: 1.08; text-wrap: balance;
}
.h3 { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; }
.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--muted); max-width: 26em; text-wrap: pretty; }
.copy { font-size: var(--t-base); }
.small { font-size: var(--t-sm); }
.price { font-family: var(--sans); font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Frames: soft corners on anything that holds a picture ---------- */
.frame, .slot { border-radius: var(--r-media); overflow: hidden; }

/* ---------- Actions ---------- */
.btn {
  min-height: 52px; padding: 0 28px; border-radius: var(--r-ctl); gap: 12px;
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-transform: none;
  transition: background-color .15s var(--out), color .15s var(--out), scale .12s var(--out);
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--buy { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .btn--buy:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 82%, #000); border-color: transparent; }
}
.btn--line { background: transparent; border-color: currentColor; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]):not(.btn--buy):not(.btn--line) { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
  .btn--line:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
}
.btn:active:not([disabled]) { scale: .98; }
.btn[disabled], .btn--buy[disabled] {
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); border-color: transparent; cursor: not-allowed;
}
.arrow-link { font-size: 16px; font-weight: 600; text-underline-offset: .3em; }
.input { border-radius: 12px; font-family: var(--sans); }

/* ---------- Empty photo frames: honest placeholders ---------- */
.slot {
  display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: var(--ratio, 4 / 3);
  padding: 24px; text-align: center; color: var(--muted);
  background: radial-gradient(120% 100% at 25% 0%, color-mix(in srgb, #fff 50%, var(--hero-bg)), var(--hero-bg) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.slot__icon { width: 28px; height: 28px; opacity: .55; }
.slot__label { max-width: 22em; font-size: var(--t-sm); line-height: 1.4; }
.slot--dark { color: #a9aca8; background: radial-gradient(120% 100% at 25% 0%, color-mix(in srgb, #fff 10%, var(--night)), color-mix(in srgb, #fff 3%, var(--night)) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.wordmark { justify-self: start; order: -1; }
.site-header__inner { grid-template-columns: auto 1fr auto; column-gap: 32px; }
.nav { justify-self: center; }
.nav a { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.header__end { gap: 10px; }
.header__buy { display: none; }
.header__price { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .header__buy { display: inline-flex; }
}
.menu { justify-self: end; }
@media (min-width: 1024px) { .menu { display: none; } }
.menu__panel a { font-family: var(--sans); font-weight: 600; font-size: 20px; min-height: 44px; }
.cart-link__count { background: var(--accent); color: var(--on-accent); }
.productbar { border-bottom: 1px solid var(--rule); }
.productbar__name { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; font-size: 19px; }

/* ---------- Hero ---------- */
.hero { overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 28px 48px; }
.hero .hero__title { font-size: clamp(40px, 11vw, 54px); line-height: 1.02; letter-spacing: -.035em; }
@media (min-width: 1024px) { .hero .hero__title { font-size: clamp(54px, 4.6vw, 72px); } }
.hero__line { display: block; }
.hero .lede { margin-top: 22px; }
.hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.hero__form { display: contents; }
.hero__note { margin-top: 12px; max-width: 30em; }
.hero__copy { position: static; transform: none; width: auto; padding: 0; }
.hero__stage { position: relative; align-self: stretch; margin-inline: 0; }
.hero__stage .slot, .hero__media { width: 100%; }
/* CAD render: the model sits on the page with a soft contact shadow, no box around it */
.hero__stage:has(.hero__render) { display: grid; place-items: center; min-height: 0; overflow: visible; border-radius: 0; }
.hero__render { position: relative; margin: 0; width: 100%; padding: 0; }
.hero__render img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Spotlight: a soft champagne pool of light behind the holder and a white pool of light on the floor under it. Static, no animation. */
.hero__render::before {
  content: ""; position: absolute; z-index: 0; inset: -14% -10% -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 11% at 50% 80%, color-mix(in srgb, #fff 46%, transparent), transparent 72%),
    radial-gradient(ellipse 52% 46% at 50% 44%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 49% 47% at 50% 45%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 100%);
}
.hero__caption {
  position: absolute; left: 0; bottom: 6%; padding: 6px 12px; border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 13px; color: var(--muted);
}
html.motion-ok .hero__render img { animation: fade-in .8s var(--out) .15s both; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4vw, 64px); padding-block: 48px; min-height: min(680px, calc(100svh - var(--header-h))); }
  .hero__stage .slot, .hero__media { height: 100%; min-height: 300px; aspect-ratio: auto; }
  .hero__stage:has(.hero__render) { align-self: center; }
}

/* ---------- Gauge (the one signature mark) ---------- */
.gauge { overflow: visible; }
.gauge__track { fill: none; stroke: var(--rule); stroke-width: 3; }
.gauge__fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gauge__ticks line { stroke: var(--muted); stroke-width: 1.5; }
.gauge__text { font: 500 12px var(--sans); fill: var(--muted); }
.gauge__name { font-weight: 600; fill: var(--ink); }
@keyframes gauge-sweep { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.motion-ok .gauge__fill { animation: gauge-sweep 1.1s var(--out) .35s both; }

/* Hero entrance: the headline lines rise once, in order. Nothing else moves on load. */
@keyframes line-in { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
html.motion-ok.js .hero__line { animation: line-in .7s var(--out) both; }
html.motion-ok.js .hero__line:nth-child(2) { animation-delay: .08s; }
html.motion-ok.js .hero__line:nth-child(3) { animation-delay: .16s; }

/* ---------- Black studio: header, hero, statement, How it works and the 3D model ---------- */
.site-header, .productbar, .hero, .story, .band, .v3d {
  --paper: var(--night); --card: #1C1C1C; --ink: #F5F3EE; --muted: #A0A0A0; --rule: #2E2E2E; --hero-bg: #1C1C1C;
  background: var(--paper); color: var(--ink);
}
.steps { padding-block: var(--space) 24px; }
.steps__list { display: grid; gap: 36px; margin-top: 40px; counter-reset: none; }
.step { border-top: 1px solid var(--rule); padding-top: 18px; }
.step__title { display: flex; gap: 10px; align-items: baseline; font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
.step__n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.step p { margin-top: 6px; color: var(--muted); max-width: 32em; }
.step .slot { margin-top: 18px; }
@media (min-width: 750px) { .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }

/* ---------- Benefits ---------- */
.benefits__list { display: grid; gap: 28px; margin-top: 40px; }
.benefit { border-top: 1px solid var(--rule); padding-top: 18px; }
.benefit__title:first-child { margin-top: 0; }
.benefit__title { margin-top: 18px; font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
.benefit p { margin-top: 6px; color: var(--muted); max-width: 30em; }
@media (min-width: 750px) { .benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* ---------- Specifications ---------- */
.specs__grid { display: grid; gap: 36px; }
.specs__list { display: grid; border-top: 1px solid var(--rule); }
.spec { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 500; }
.specs__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) {
  .specs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .specs__head { grid-row: span 2; }
}

/* ---------- Buy ---------- */
.buy__head .h2 { font-size: var(--t-h2); }
.buy__gallery { background: var(--hero-bg); }
.gallery__slide .slot { width: 100%; }
.buy__panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.buy__title { font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; font-size: 30px; line-height: 1.1; }
.buy__price { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy__qty { display: grid; gap: 6px; margin-top: 18px; max-width: 120px; }
.buy__qty-input { min-height: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.buy__status { margin-top: 12px; font-size: var(--t-sm); color: var(--muted); }
.swatch label { border-radius: var(--r-ctl); }

/* ---------- Fit, FAQ, footer ---------- */
.diagram-card, .launch__msg { border-radius: var(--r-panel); }
.tag { border-radius: var(--r-ctl); font-size: 13px; padding: 3px 12px; }
.faq__item summary, .topic__head h3, .parts__list strong { font-family: var(--sans); font-weight: 600; font-size: 19px; }
.site-footer { background: var(--night); color: #A9ACA8; border-top: 0; }
.site-footer .wordmark, .footer__col h2 { color: #EEEFEC; }
.site-footer a:hover { color: #EEEFEC; }
.buybar { background: var(--night); color: #EEEFEC; border-top: 0; }
.buybar__title { font-family: var(--sans); font-weight: 600; }
.buybar__price { color: #A9ACA8; }

/* Sections appear as they are: no scroll reveals. The fade is kept for the hero render on load. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   3D viewer (sections/viewer-3d.liquid, assets/interact.js)
   ========================================================================== */
/* One stage, no panels around it: heading, the model straight on the page background, then the controls on one line. */
.v3d { padding-block: var(--space); }
.v3d__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.v3d__copy { max-width: 34em; color: var(--muted); }

.v3d__stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 76svh; border-radius: var(--r-media); overflow: clip;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(ellipse 40% 9% at 50% 76%, color-mix(in srgb, #fff 38%, transparent), transparent 72%),
    radial-gradient(ellipse 46% 42% at 50% 46%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    var(--paper);
}
.v3d__stage.is-drag { cursor: grabbing; }
.v3d__stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.v3d__scene { position: absolute; inset: 0; }
.v3d__poster, .v3d__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.v3d__poster { object-fit: contain; transition: opacity .6s var(--out); }
.v3d__canvas { opacity: 0; transition: opacity .6s var(--out); }
.v3d.is-loaded .v3d__canvas { opacity: 1; }
.v3d.is-loaded .v3d__poster { opacity: 0; }
.v3d:not([data-ready]) .v3d__stage { cursor: default; }
.v3d:not([data-ready]) .v3d__controls, .v3d:not([data-ready]) .v3d__hint { display: none; }
.v3d__note { position: absolute; z-index: 1; left: 0; bottom: 14px; margin: 0; font-size: 12.5px; color: var(--muted); pointer-events: none; }

.v3d__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.v3d__play {
  min-height: 44px; min-width: 96px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--r-ctl);
  background: var(--ink); color: var(--paper); font: 600 15px var(--sans);
  transition: background-color .15s var(--out), color .15s var(--out);
}
.v3d__play[aria-pressed="true"] { background: transparent; color: var(--ink); }
.v3d__play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.v3d__range { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.v3d__range label { font-size: 14px; color: var(--muted); }
.v3d__range output { min-width: 3ch; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.v3d__range input { flex: 1; min-width: 0; height: 32px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.v3d__range input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p, 0%), var(--rule) var(--p, 0%)); }
.v3d__range input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%;
  background: var(--ink); border: 0; box-shadow: 0 0 0 4px var(--paper);
}
.v3d__range input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--rule); }
.v3d__range input::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--ink); }
.v3d__range input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 0; box-shadow: 0 0 0 4px var(--paper); }
.v3d__range input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.v3d__hint { margin-top: 10px; font-size: 13px; color: var(--muted); }

.v3d__pills { display: flex; gap: 6px; }
.v3d__pill {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--r-ctl); background: transparent; color: var(--ink);
  font: 600 14px var(--sans);
  transition-property: border-color, background-color, color; transition-duration: .16s; transition-timing-function: var(--out);
}
.v3d__pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .v3d__pill:hover { border-color: color-mix(in srgb, var(--ink) 55%, transparent); } }

@media (min-width: 750px) { .v3d__stage { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
  .v3d__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
  .v3d__stage { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--bar-h) - 140px); }
  .v3d__controls { flex-wrap: nowrap; }
  .v3d__range { max-width: 520px; }
}
}

/* ---------- Liquid glass: buttons, pills and sliders ----------
   Translucent fill, a blurred and saturated backdrop, a bright top edge and a soft inner glow.
   Colours come from --ink / --paper / --accent, so it works on dark and light sections. */
:root { --glass-fill: color-mix(in srgb, var(--ink) 9%, transparent); --glass-fill-strong: color-mix(in srgb, var(--ink) 20%, transparent); }
.btn, .v3d__play, .v3d__pill, .btn--buy, .btn--line {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 16%, transparent), color-mix(in srgb, var(--ink) 5%, transparent));
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent), inset 0 0 14px color-mix(in srgb, #fff 6%, transparent), 0 6px 18px -8px rgba(0, 0, 0, .55);
}
.btn--buy, .v3d__play { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 46%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.v3d__play[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 16%, transparent), color-mix(in srgb, var(--ink) 5%, transparent)); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]), .btn--buy:hover:not([disabled]), .btn--line:hover:not([disabled]), .v3d__play:hover, .v3d__pill:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 26%, transparent), color-mix(in srgb, var(--ink) 10%, transparent)); border-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink);
  }
}
.btn[disabled], .btn--buy[disabled] { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--muted); border-color: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v3d__range input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), color-mix(in srgb, var(--ink) 14%, transparent) var(--p, 0%)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35), 0 1px 0 color-mix(in srgb, #fff 14%, transparent); }
.v3d__range input::-webkit-slider-thumb {
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, #fff 70%, transparent), color-mix(in srgb, #fff 18%, transparent) 60%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(0, 0, 0, .5);
}
.v3d__range input::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.v3d__range input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
.v3d__range input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 55%, transparent); background: radial-gradient(circle at 35% 25%, color-mix(in srgb, #fff 70%, transparent), color-mix(in srgb, #fff 18%, transparent) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(0, 0, 0, .5); }
@media (prefers-reduced-transparency: reduce) {
  .btn, .v3d__play, .v3d__pill, .btn--buy, .btn--line { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--ink) 16%, var(--paper)); }
}