/* components/spine/v2/frames/frames.css · GENERATED by scripts/dev/frames/build-frames-sheet.mjs, never edited by hand.
   APTAVIA 2.0 · the three app frames (door, setup, bare) as ONE static sheet (run 1, 17 Oct 2026). Source: walk/shared/spine.css
   (kit 2.6), the rules a frame draws: tokens on the frame root, §4 shell, §13 door and setup frames, §14a door visitor. The
   translations T1-T5 are listed at the top of the generator. Served as a static link (FramesSheet.tsx): no module imports it,
   so a route that renders no frame holds 0 B of it. */

/* T3 · the ground the mock-up paints on <html> */
.spine-app { background-color: var(--sp-ground); }

.spine-app {
  /* shell (light) — the canonical Liquid values, owned here so r1 and r2 pages render one shell */
  --sp-page: #F7F5FC;
  --sp-card: #FFFFFF;
  --sp-raised: #EEE8F6;
  --sp-wash: #EDE4FF;
  --sp-ink: #211B37;
  --sp-body: #4A4560;
  --sp-muted: #655E79;
  --sp-line: #DDD5E8;
  --sp-primary: #6824C7;
  --sp-sign: #211B37;
  --sp-lit: #211B37;
  --sp-focus: #6824C7;
  --sp-on-action: #FFFFFF;
  --sp-well: #FFFFFF;
  --sp-opaque: #F4EFF9;
  --sp-edge: #D1CBE5;
  /* kit 2.3 · the ONE ground: every world stands on it by day (the Skyline's, the Road's and the Prism's noon:
     near-white, a 2 % violet tint). A page's backdrop carries [data-spine-ground] and paints it flat in light mode;
     tints live only inside scene objects (buildings, desks, skies, plates), never on the ground (critic, 4 Oct) */
  --sp-ground: #F7F5FC;
  /* kit 2.3 · the Colonnade's light (SPINE §4: interview = white light in dark mode, ink in light mode; never violet,
     which means Section II only). light = the door's light and its accents; soft = its tinted glass; pale = edges. */
  --sp-door-light: #211B37;
  --sp-door-soft: #CBC7D3;
  --sp-door-pale: #E7E4EC;
  --sp-action: linear-gradient(110deg, #6824C7, #4549AA);
  --sp-font: var(--font-ui, 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --sp-shell-bg: linear-gradient(180deg, #FFFFFF 0%, #FBF9FE 55%, #F7F3FD 100%);
  --sp-pill-bg: rgba(255, 255, 255, .94);
  --sp-spec: rgba(255, 255, 255, 1);                    /* glass reads by its edges: 1 px specular top-left … */
  --sp-shade: rgba(34, 20, 70, .14);                    /* … and a darker edge bottom-right */
  --sp-contact: 0 1px 1px rgba(34, 20, 70, .10), 0 2px 5px -2px rgba(34, 20, 70, .22);
  --sp-canvas: #F7F5FC;                                 /* what shows between two pages in a move */
  --sp-dim: #2B2540;                                    /* what the old page dims toward in THROUGH (ink, never haze) */
  --sp-gutter: 48px;
  --sp-side-w: 228px;
  --sp-th-h: 56px;
  --sp-dock-h: 56px;
  --spine-th-h: var(--sp-th-h);                         /* pages pad their first words below this */
  /* section colours (SPINE §4, checked) — light: ink + stained glass */
  --sec-1: #A8338E;    /* Section I · the Gallery (orchid) */
  --sec-2: #6824C7;    /* Section II · the Studio (violet = --primary) */
  --sec-3: #2F6ABF;    /* Section III · the Lab (cobalt / periwinkle) */
  --sec-on: #FFFFFF;   /* numerals on a filled section body */
  --sec-wash-mix: 12%;
  --sec-room-mix: 16%;
  /* gold: earned only (SPINE §4) — light: ink on a paper plate, never a glow */
  --spine-gold: #85601F;
  --spine-gold-plate: #FFF5DC;
  --spine-gold-edge: #C9A55A;
  /* motion (SPINE §6 as amended 4 Oct): one softer curve; apertures grow in log space on their own curve */
  --spine-ease: cubic-bezier(.3, .6, .2, 1);
  --spine-ease-ap: cubic-bezier(.4, .1, .3, 1);
  --spine-ease-sym: cubic-bezier(.45, 0, .2, 1);        /* TURN only */
}
html.dark .spine-app {
  --sp-page: #08070C;
  --sp-card: #17131F;
  --sp-raised: #231A30;
  --sp-wash: #31203F;
  --sp-ink: #F5F1FA;
  --sp-body: #DDD5E7;
  --sp-muted: #B6ABC6;
  --sp-line: #40324F;
  --sp-primary: #BC94FF;
  --sp-sign: oklch(0.80 0.09 84);
  --sp-lit: oklch(0.80 0.09 84);
  --sp-focus: #CCACFF;
  --sp-well: #100D17;
  --sp-opaque: #1D1527;
  --sp-edge: #564366;
  --sp-ground: #08070C;
  --sp-door-light: #F2EEF8;
  --sp-door-soft: #D9D5E0;
  --sp-door-pale: #ECE8F1;
  --sp-shell-bg: linear-gradient(180deg, #17131F 0%, #130F1A 60%, #100C16 100%);
  --sp-pill-bg: rgba(23, 19, 31, .90);
  --sp-spec: rgba(230, 206, 255, .20);
  --sp-shade: rgba(0, 0, 0, .55);
  --sp-contact: 0 1px 0 rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .8);
  --sp-canvas: #08070C;
  --sp-dim: #000000;
  --sec-1: #DC73C1;    /* dark: light, not ink */
  --sec-2: #BC94FF;
  --sec-3: #A2C7F8;
  --sec-on: #120E1A;
  --sec-wash-mix: 22%;
  --sec-room-mix: 38%; /* rooms, floors, buildings at rest read in their own hue: ≥ 35 % (spine fix §3/§4) */
  --spine-gold: #EAC862;
  --spine-gold-plate: transparent;
  --spine-gold-edge: #EAC862;
}
html:not(.dark) .spine-app {
  --sp-page: oklch(0.976 0.006 82);
  --sp-ground: oklch(0.976 0.006 82);
  --sp-canvas: oklch(0.976 0.006 82);
  --sp-card: oklch(0.992 0.007 86);
  --sp-raised: oklch(0.957 0.011 80);
  --sp-wash: oklch(0.938 0.020 82);
  --sp-line: oklch(0.872 0.015 78);
  --sp-edge: oklch(0.815 0.018 76);
  --sp-well: oklch(0.995 0.005 86);
  --sp-opaque: oklch(0.965 0.010 82);
  --sp-shell-bg: linear-gradient(180deg, oklch(0.988 0.004 85) 0%, oklch(0.976 0.006 82) 55%, oklch(0.966 0.007 80) 100%);
  --sp-pill-bg: oklch(0.992 0.006 86 / .95);
  --sp-shade: oklch(0.30 0.03 60 / .16);
  --sp-contact: 0 1px 1px oklch(0.30 0.03 60 / .10), 0 2px 5px -2px oklch(0.30 0.03 60 / .22);
  /* the Colonnade's tinted glass and pale edges by day: warm greys (they were lilac greys, #CBC7D3 / #E7E4EC); its light stays ink */
  --sp-door-soft: oklch(0.835 0.011 76);
  --sp-door-pale: oklch(0.925 0.009 78);
}
.spine-app {
  --sec-1-wash: color-mix(in oklch, var(--sec-1) var(--sec-wash-mix), transparent);
  --sec-2-wash: color-mix(in oklch, var(--sec-2) var(--sec-wash-mix), transparent);
  --sec-3-wash: color-mix(in oklch, var(--sec-3) var(--sec-wash-mix), transparent);
  --sec-1-room: color-mix(in oklch, var(--sec-1) var(--sec-room-mix), transparent);
  --sec-2-room: color-mix(in oklch, var(--sec-2) var(--sec-room-mix), transparent);
  --sec-3-room: color-mix(in oklch, var(--sec-3) var(--sec-room-mix), transparent);
  --sec-1-rim: var(--sec-1);
  --sec-2-rim: var(--sec-2);
  --sec-3-rim: var(--sec-3);
  --sec-1-deep: color-mix(in oklch, var(--sec-1) 35%, #08070C);
  --sec-2-deep: color-mix(in oklch, var(--sec-2) 35%, #08070C);
  --sec-3-deep: color-mix(in oklch, var(--sec-3) 35%, #08070C);
  /* I·III: two-tone, a hard stop — never a smeared gradient */
  --sec-13: linear-gradient(90deg, var(--sec-1) 0 50%, var(--sec-3) 50% 100%);
}
.spine-app {
  display: grid;
  grid-template-columns: var(--sp-side-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.spine-main {
  position: relative;
  min-width: 0;
  grid-column: 2; }
.spine-page {
  position: relative;
  min-width: 0; }
.spine-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }
.spine-side {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 0;
  z-index: 50;
  box-sizing: border-box;
  width: var(--sp-side-w);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sp-line);
  background: var(--sp-shell-bg);
  box-shadow: inset -1px 0 0 var(--sp-spec);
  font: 500 14px/1.25 var(--sp-font);
  color: var(--sp-body);
  -webkit-font-smoothing: antialiased;
}
.spine-side *,
.spine-threshold * {
  box-sizing: border-box; }
.spine-brand {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  flex: none;
  color: inherit;
  text-decoration: none; }
.spine-brand-mark {
  display: block;
  width: 43px;
  height: 30px;
  flex: none; }
.spine-on-dark {
  display: none !important; }
html.dark .spine-on-light {
  display: none !important; }
html.dark .spine-on-dark {
  display: block !important; }
.spine-brand-word {
  font: 800 15px/1 var(--sp-font);
  letter-spacing: -.03em;
  color: transparent;
  background-image: linear-gradient(118deg, #4C1D95, #7C3AED 55%, #5B21B6);
  -webkit-background-clip: text;
  background-clip: text;
}
html.dark .spine-brand-word {
  background-image: linear-gradient(118deg, #DDD6FE, #A78BFA 55%, #C4B5FD); }
.spine-side-foot :is(a, button) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--sp-body);
  font: 500 14px/1.25 var(--sp-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.spine-side-foot svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round; }
.spine-side-foot :is(a, button):hover {
  background: var(--sp-wash);
  border-color: var(--sp-line);
  color: var(--sp-ink); }
.spine-side-foot :is(a, button):focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 2px; }
.spine-side-foot {
  flex: none;
  padding: 9px 12px;
  border-top: 1px solid var(--sp-line); }
.spine-side-foot [data-when] {
  display: none; }
html.dark .spine-side-foot [data-when="dark"],
html:not(.dark) .spine-side-foot [data-when="light"] {
  display: inline; }
.spine-threshold {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--sp-th-h);
  padding: 0 var(--sp-gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "back place chip pause";
  align-items: center;
  column-gap: 12px;
  font: 500 13px/1 var(--sp-font);
  color: var(--sp-body);
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}
.spine-threshold > * {
  pointer-events: auto; }
.spine-th-place {
  grid-area: place;
  container: spine-place / inline-size;
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: flex-start;
  column-gap: 14px;
  row-gap: 24px;
  min-width: 0;
  height: calc(var(--sp-strip-h, 44px) + 8px);
  margin: -4px;
  padding: 4px;
  overflow: hidden;
}
.spine-th-place > .spine-strip {
  order: -1; }
.spine-th-place,
.spine-th-place * {
  pointer-events: auto; }
:is(.spine-strip, .spine-pause) {
  border: 1px solid var(--sp-line);
  background: var(--sp-pill-bg);
  box-shadow: inset 1px 1px 0 var(--sp-spec), inset -1px -1px 0 var(--sp-shade), var(--sp-contact);
}
.spine-sign {
  margin: 0;
  flex: none;
  font: 600 12px/1.3 var(--sp-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-sign);
  white-space: nowrap;
}
.spine-strip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain; }
.spine-strip::-webkit-scrollbar {
  display: none; }
.spine-strip a,
.spine-strip > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 999px;
  flex: none;
  color: var(--sp-muted);
  font: 600 13px/1 var(--sp-font);
  text-decoration: none;
  white-space: nowrap;
}
.spine-strip a:focus-visible {
  outline-offset: -3px; }
@media (min-width: 768px) {
@container spine-place (max-width: 345px) {
.spine-strip a,
.spine-strip > span {
  padding: 0 8px; }
.spine-strip > :not([aria-current]) > i {
  display: none; }
} }
@property --sp-fade-l {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px; }
@property --sp-fade-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px; }
@supports (animation-timeline: scroll()) {
.spine-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-fade-l), #000 calc(100% - var(--sp-fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-fade-l), #000 calc(100% - var(--sp-fade-r)), transparent 100%);
  animation: spine-strip-edge linear both;
  animation-timeline: scroll(self inline);
  }
@keyframes spine-strip-edge { 0% { --sp-fade-l: 0px; --sp-fade-r: 28px; } 12% { --sp-fade-l: 28px; } 88% { --sp-fade-r: 28px; } 100% { --sp-fade-l: 28px; --sp-fade-r: 0px; } }
}
.spine-strip a {
  cursor: pointer; }
.spine-strip a:hover {
  color: var(--sp-ink); }
.spine-strip > span.spine-crumb-sep {
  padding: 0 2px;
  min-height: 0;
  min-width: 0;
  color: var(--sp-muted); }
.spine-strip i {
  display: block;
  width: 6px;
  height: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  flex: none; }
.spine-strip [aria-current] {
  color: var(--sp-ink);
  background: var(--sp-well);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-lit) 62%, var(--sp-line)); }
.spine-strip [aria-current] i {
  opacity: 1;
  background: var(--sp-lit); }
.spine-pause {
  grid-area: pause;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  color: var(--sp-ink);
  font: 600 13px/1 var(--sp-font);
  white-space: nowrap;
  cursor: pointer;
}
.spine-pause svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  stroke: none; }
.spine-pause .sp-play {
  display: none; }
.spine-pause[aria-pressed="true"] .sp-play {
  display: block; }
.spine-pause[aria-pressed="true"] .sp-pause {
  display: none; }
.spine-pause[aria-pressed="true"] {
  border-color: var(--sp-ink); }
:is(.spine-strip a, .spine-pause):focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 2px; }
@media (max-width: 767px) {
.spine-app {
  --sp-gutter: 16px;
  --spine-th-h: 92px; }
.spine-app {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: calc(var(--sp-dock-h) + env(safe-area-inset-bottom, 0px)); }
.spine-main {
  grid-column: 1; }
.spine-side {
  display: none; }
.spine-threshold {
  --sp-strip-h: 38px;
  height: auto;
  padding: 6px var(--sp-gutter) 0;
    /* the back pill takes what line 1 leaves (≥ 44 px); the chip and Pause never move (same rect everywhere). Kit 2.3: no
       empty middle column (and so no extra gap), so the pill gets every px the chip and Pause leave: 106.7 px at 375 */
  grid-template-columns: minmax(44px, 1fr) auto auto;
  grid-template-rows: 44px 36px;
  row-gap: 6px;
  grid-template-areas: "back chip pause" "place place place";
  }
.spine-pause {
  width: 44px;
  padding: 0;
  justify-content: center; }
.spine-pause .sp-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }
.spine-th-place {
  column-gap: 10px; }
.spine-sign {
  font-size: 11px;
  letter-spacing: .12em; }
.spine-strip a,
.spine-strip > span {
  min-height: 30px;
  min-width: 48px;
  padding: 0 10px;
  font-size: 12px; }
@container spine-place (max-width: 330px) {
.spine-strip a,
.spine-strip > span {
  padding: 0 8px; }
.spine-strip > :not([aria-current]) > i {
  display: none; }
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
.spine-pause {
  width: 44px;
  padding: 0;
  justify-content: center; }
.spine-pause .sp-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }
}
@media (max-width: 359px) {
.spine-threshold {
  column-gap: 8px; }
}
.spine-app[data-spine-frame="bare"] {
  display: block;
  padding-bottom: 0; }
.spine-app[data-spine-frame="door"] {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 0; }
.spine-app[data-spine-frame="door"] .spine-main {
  grid-column: 1; }
.spine-threshold.spine-doorbar {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "brand place links theme pause";
  column-gap: 14px; }
.spine-door-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px 0 2px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none; }
.spine-door-brand .spine-brand-mark {
  width: 37px;
  height: 26px; }
.spine-door-brand:focus-visible,
.spine-door-links a:focus-visible,
.spine-door-theme:focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 2px; }
.spine-door-links {
  grid-area: links;
  display: inline-flex;
  align-items: center;
  gap: 2px; }
.spine-door-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--sp-body);
  font: 600 13px/1 var(--sp-font);
  text-decoration: none;
  white-space: nowrap; }
.spine-door-links a:hover {
  color: var(--sp-ink);
  background: var(--sp-wash); }
.spine-door-theme,
.spine-setup-theme {
  grid-area: theme;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  cursor: pointer;
  border: 1px solid var(--sp-line);
  background: var(--sp-pill-bg);
  color: var(--sp-ink);
  box-shadow: inset 1px 1px 0 var(--sp-spec), inset -1px -1px 0 var(--sp-shade), var(--sp-contact);
}
.spine-door-theme svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round; }
.spine-door-theme [data-when] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }
.spine-door-theme .sp-sun,
html.dark .spine-door-theme svg:not(.sp-sun) {
  display: none; }
html.dark .spine-door-theme .sp-sun {
  display: block; }
.spine-side-foot .spine-foot-theme .sp-sun {
  display: none; }
.spine-app[data-spine-frame] .spine-threshold .spine-strip span[aria-current] {
  cursor: default; }
@media (max-width: 767px) {
.spine-app[data-spine-frame] {
  padding-bottom: 0; }
.spine-threshold.spine-doorbar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: 44px 36px;
  grid-template-areas: "brand links theme pause" "place place place place";
  column-gap: 8px; }
.spine-door-brand .spine-brand-word {
  display: none; }
.spine-door-links a {
  padding: 0 10px;
  font-size: 12px; }
.spine-app:not([data-spine-visitor="out"]) .spine-door-links a:not([data-door-first~="in"]),
.spine-app[data-spine-visitor="out"] .spine-door-links a:not([data-door-first~="out"]) {
  display: none; }
}
.spine-side-setup .spine-brand {
  cursor: default; }
.spine-setup {
  flex: 1;
  min-height: 0;
  padding: 18px 20px; }
.spine-setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  counter-reset: step; }
.spine-setup-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font: 600 14px/1.25 var(--sp-font);
  color: var(--sp-muted); }
.spine-setup-steps li i {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  font: 700 11.5px/1 var(--sp-font);
  font-style: normal;
  counter-increment: step; }
.spine-setup-steps li i::before {
  content: counter(step); }
.spine-setup-steps li[data-step="done"] {
  color: var(--sp-body); }
.spine-setup-steps li[data-step="done"] i {
  background: var(--sp-ink);
  border-color: var(--sp-ink);
  color: var(--sp-page); }
.spine-setup-steps li[data-step="done"] i::before {
  content: "\2713"; }
.spine-setup-steps li[aria-current="step"] {
  color: var(--sp-ink);
  background: var(--sp-well);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-ink) 44%, var(--sp-line)); }
.spine-setup-steps li[aria-current="step"] i {
  border-color: var(--sp-ink);
  color: var(--sp-ink); }
.spine-setup-note {
  margin: 14px 12px 0;
  font: 500 13px/1.45 var(--sp-font);
  color: var(--sp-muted); }
.spine-threshold.spine-setuprow {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "place pause"; }
.spine-setuprow .spine-steps {
  display: none;
  list-style: none; }
.spine-setuprow .spine-th-place {
  align-content: center; }
.spine-setuprow .spine-steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--sp-muted);
  font: 600 12px/1 var(--sp-font); }
.spine-setuprow .spine-steps li i {
  width: 6px;
  height: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: .5; }
.spine-setuprow .spine-steps li[data-step="done"] i {
  opacity: 1;
  background: var(--sp-ink); }
.spine-setuprow .spine-steps li[aria-current="step"] {
  color: var(--sp-ink);
  background: var(--sp-well);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-ink) 44%, var(--sp-line)); }
.spine-setuprow .spine-steps li[aria-current="step"] i {
  opacity: 1;
  background: var(--sp-ink); }
@media (max-width: 767px) {
.spine-threshold.spine-setuprow {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 44px 36px;
  grid-template-areas: "place pause" "place pause"; }
.spine-setuprow .spine-th-place {
  height: 88px; }
.spine-setuprow .spine-steps {
  display: inline-flex;
  margin: 0; }
}
.spine-app:not([data-spine-visitor="out"]) .spine-door-links a[data-spine-visitor="out"],
.spine-app[data-spine-visitor="out"] .spine-door-links a[data-spine-visitor="in"] {
  display: none; }