@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-var.01904586.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-var.5d97c2e2.woff2") format("woff2");
}


@font-face {
  font-family: "Space Grotesk Fallback";
  font-weight: 400 700;
  src: local("Arial");
  size-adjust: 106.100%;
  ascent-override: 92.743%;
  descent-override: 27.521%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 400 500;
  src: local("Arial");
  size-adjust: 105.494%;
  ascent-override: 91.830%;
  descent-override: 22.865%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 700;
  src: local("Arial");
  size-adjust: 107.750%;
  ascent-override: 89.907%;
  descent-override: 22.386%;
  line-gap-override: 0%;
}


:root {
  --neutral-1: #000000; --neutral-1-rgb: 0, 0, 0;
  --room-2: #050709; --room-2-rgb: 5, 7, 9;
  --room-3: #0b1014; --room-3-rgb: 11, 16, 20;
  --room-4: #141b21; --room-4-rgb: 20, 27, 33;
  --neutral-5: #282929; --neutral-5-rgb: 40, 41, 41;
  --room-5: #202a32; --room-5-rgb: 32, 42, 50;
  --bronze-6: #957e5d; --bronze-6-rgb: 149, 126, 93;
  --gold-6: #977f4c; --gold-6-rgb: 151, 127, 76;
  --neutral-6: #828282; --neutral-6-rgb: 130, 130, 130;
  --cyan-7: #5ea1b1; --cyan-7-rgb: 94, 161, 177;
  --gold-7: #ab925d; --gold-7-rgb: 171, 146, 93;
  --mark-rose-7: #e46196; --mark-rose-7-rgb: 228, 97, 150;
  --rose-7: #c67b95; --rose-7-rgb: 198, 123, 149;
  --rose-8: #d6829f; --rose-8-rgb: 214, 130, 159;
  --cyan-9: #7fc3d3; --cyan-9-rgb: 127, 195, 211;
  --gold-9: #cbb483; --gold-9-rgb: 203, 180, 131;
  --room-9: #aeb8c0; --room-9-rgb: 174, 184, 192;
  --cyan-10: #98cfde; --cyan-10-rgb: 152, 207, 222;
  --gold-10: #d6c490; --gold-10-rgb: 214, 196, 144;
  --rose-10: #eab3c4; --rose-10-rgb: 234, 179, 196;
  --alarm-11: #fecac1; --alarm-11-rgb: 254, 202, 193;
  --cyan-11: #abe3f1; --cyan-11-rgb: 171, 227, 241;
  --gold-11: #e7d7a9; --gold-11-rgb: 231, 215, 169;
  --mark-cyan-11: #8ee8fe; --mark-cyan-11-rgb: 142, 232, 254;
  --neutral-12: #e4e4e4; --neutral-12-rgb: 228, 228, 228;
  --room-12: #dfe5ea; --room-12-rgb: 223, 229, 234;
  --room-13: #edf1f4; --room-13-rgb: 237, 241, 244;
}


:root {
  --bg:      var(--room-3);
  --bg2:     var(--room-4);
  --lift:    var(--room-5);
  --ink:     var(--room-13);
  --ink-dim: var(--room-9);
  --light:   var(--room-12);   --light-rgb: var(--room-12-rgb);
  --hair:    rgba(var(--room-13-rgb), 0.13);
  --cta:     var(--room-13);
  --cta-ink: var(--room-5);

  
  --gold-deep: var(--bronze-6);
  --gold:      var(--gold-7);  --gold-rgb: var(--gold-7-rgb);
  --gold-hi:   var(--gold-11);
  --rose:      var(--rose-8);  --rose-rgb: var(--rose-8-rgb);
  --rose-hi:   var(--rose-10);
  
  --cyan:      var(--cyan-9);  --cyan-rgb: var(--cyan-9-rgb);
  --cyan-hi:   var(--cyan-11);

  --dock-h: 23vh;

  
  --u: clamp(1px, 0.1359vw, 1.4px);
  --lu: 1px;
  
  --fit: 1rem;

  
  --t-01: 0.59375rem;       
  --t-02: 0.625rem;         
  --t-03: 0.65rem;          
  --t-04: 0.65625rem;       
  --t-05: 0.6875rem;        
  --t-06: 0.71875rem;       
  --t-07: 0.75rem;          
  --t-08: 0.78125rem;       
  --t-09: 0.8125rem;        
  --t-10: 0.84375rem;       
  --t-11: 0.875rem;         
  --t-12: 0.91875rem;       
  --t-13: 0.9375rem;        
  --t-14: 1.0rem;           
  --t-15: 1.0625rem;        
  --t-16: 1.1875rem;        
  --t-17: 1.25rem;          
  --t-18: 1.6625rem;        
  --t-19: 1.75rem;          
  --t-20: 1.875rem;         
  --t-21: 2.125rem;         


  
  --strip-h: 66px;
  
  --strip-row: 56px;

  
  --disp: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

body { min-height: 100vh; overflow-x: hidden; font-size: 1rem; }


body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--strip-h);
  z-index: 5;
  
  background: var(--neutral-1);
}


body::after {
  content: "";
  position: fixed; left: 0; right: 0;
  
  height: var(--hairline-w);
  top: calc(var(--strip-h) - var(--hairline-w));
  z-index: 6;
  
  background-color: transparent;
  
  
  background-image: linear-gradient(90deg,
    rgba(var(--room-13-rgb),0.0572) calc(50% - var(--pic-core-w) * 0.5),
    rgba(var(--room-13-rgb),0.0576) calc(50% - var(--pic-core-w) * 0.4524),
    rgba(var(--room-13-rgb),0.0582) calc(50% - var(--pic-core-w) * 0.4048),
    rgba(var(--room-13-rgb),0.0590) calc(50% - var(--pic-core-w) * 0.3571),
    rgba(var(--room-13-rgb),0.0607) calc(50% - var(--pic-core-w) * 0.3095),
    rgba(var(--room-13-rgb),0.0628) calc(50% - var(--pic-core-w) * 0.2619),
    rgba(var(--room-13-rgb),0.0659) calc(50% - var(--pic-core-w) * 0.2143),
    rgba(var(--room-13-rgb),0.0691) calc(50% - var(--pic-core-w) * 0.1667),
    rgba(var(--room-13-rgb),0.0726) calc(50% - var(--pic-core-w) * 0.119),
    rgba(var(--room-13-rgb),0.0754) calc(50% - var(--pic-core-w) * 0.0714),
    rgba(var(--room-13-rgb),0.0774) calc(50% - var(--pic-core-w) * 0.0238),
    rgba(var(--room-13-rgb),0.0780) calc(50% + var(--pic-core-w) * 0.0238),
    rgba(var(--room-13-rgb),0.0769) calc(50% + var(--pic-core-w) * 0.0714),
    rgba(var(--room-13-rgb),0.0747) calc(50% + var(--pic-core-w) * 0.119),
    rgba(var(--room-13-rgb),0.0714) calc(50% + var(--pic-core-w) * 0.1667),
    rgba(var(--room-13-rgb),0.0682) calc(50% + var(--pic-core-w) * 0.2143),
    rgba(var(--room-13-rgb),0.0649) calc(50% + var(--pic-core-w) * 0.2619),
    rgba(var(--room-13-rgb),0.0624) calc(50% + var(--pic-core-w) * 0.3095),
    rgba(var(--room-13-rgb),0.0603) calc(50% + var(--pic-core-w) * 0.3571),
    rgba(var(--room-13-rgb),0.0593) calc(50% + var(--pic-core-w) * 0.4048),
    rgba(var(--room-13-rgb),0.0586) calc(50% + var(--pic-core-w) * 0.4524),
    rgba(var(--room-13-rgb),0.0581) calc(50% + var(--pic-core-w) * 0.5));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root { --hairline-w: 0.5px; }
}

:root { --dot: 1px; }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { :root { --dot: 0.8px; } }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { :root { --dot: 0.6667px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { :root { --dot: 0.5px; } }
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { :root { --dot: 0.3334px; } }




.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.room::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(76% 50% at 50% 1%, rgba(var(--light-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(128% 86% at 50% 30%, var(--lift) 0%, var(--bg2) 46%, var(--bg) 100%);
}
.glow {                   
  position: absolute; top: 6vh; left: 50%; transform: translateX(-50%);
  width: 74vw; max-width: 820px; height: 58vh;
  background: radial-gradient(ellipse 54% 48% at 50% 30%,
    rgba(var(--light-rgb), 0.14) 0%, rgba(var(--light-rgb), 0.04) 42%, transparent 72%);
  filter: blur(26px);
}
.vignette { position: absolute; inset: 0;
  background: radial-gradient(122% 94% at 50% 24%, transparent 46%, rgba(var(--neutral-1-rgb),0.58) 100%); }


.room { transition: filter 450ms cubic-bezier(.4,0,1,1); }
body.sb-playing .room { filter: brightness(0.92); transition: filter 2350ms cubic-bezier(.22,.68,.28,1); }
@media (prefers-reduced-motion: reduce) {
  .room, body.sb-playing .room { transition: none; }
}

#lightfx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }





.stage {
  position: relative; z-index: 2; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  
  
  
  padding: 34px 16px calc(max(var(--dock-h), 140px) - 50px);
}




:root {
  --cart-ink: var(--ink); --cart-count-ink: var(--rose);
  --strip-gutter: 24px;
  
  
  
  --panel-bg: var(--neutral-1);
  --menu-bg:  var(--neutral-1);
  --strip-btn-h: 48px;
  --strip-btn-top: calc((var(--strip-row) - var(--strip-btn-h)) / 2);
  --menu-icon-w: 32px;
  
  --menu-btn-pad: 10px;
  
  --cart-glyph: 48px;
  
  
  
  --hairline-w: 1px;
  
  --strip-logo: 96px;
  --strip-logo-air: 3px;
  --strip-mark-sq: 10px;
  
  --strip-mark-half: calc(var(--strip-mark-sq) * 0.7071);
  --strip-mark-stroke: 1px;
  --strip-panel-air: 4px;
  
  --strip-panel-border: 1px;
  --strip-panel-top: calc(var(--strip-btn-top) + var(--strip-btn-h) + var(--strip-panel-air));
  
  --strip-mark-leg: calc(var(--strip-row) - var(--hairline-w) - var(--strip-btn-top)
                         - var(--strip-btn-h) - var(--strip-panel-air)
                         - var(--strip-panel-border) + var(--strip-mark-half));
  
  --cart-aim-l: calc(var(--cart-glyph) * 32.5 / 56);
  --cart-aim-r: calc(var(--cart-glyph) * 23.5 / 56);
}


.cart-link, .menu-btn {
  box-sizing: border-box;
  position: fixed; top: var(--strip-btn-top); z-index: 7;
  height: var(--strip-btn-h);
  display: flex; align-items: center; justify-content: center;
  
  border: 0;
  background: transparent;
  color: var(--cart-ink); text-decoration: none;
}

.cart-link {
  right: var(--strip-gutter);
  width: var(--strip-btn-h); padding: 0;
}
.menu-btn  {
  left: var(--strip-gutter); padding: 0 var(--menu-btn-pad);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.menu-glyph { display: block; width: var(--menu-icon-w); height: auto;
  stroke-width: calc(2.38 * var(--u)); }
.menu-glyph path { vector-effect: non-scaling-stroke; }


.strip-logo-window {
  position: fixed;
  top: var(--strip-logo-air);
  left: 50%;
  margin-left: calc(var(--strip-logo) / -2);
  width: var(--strip-logo);
  height: var(--strip-logo);
  overflow: hidden;
  z-index: 7;
  
  display: block;
}

.strip-logo-window:focus-visible {
  outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px;
  border-radius: 50%;
}
.strip-logo-hold { display: block; width: 100%; height: 100%; position: relative; }
.strip-logo { display: block; width: 100%; height: 100%; }


.strip-logo-paint { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.strip-logo-hold.is-painted > .strip-logo { opacity: 0; }


@supports (left: round(1px, 1px)) {
  .strip-logo-window {
    left: round(nearest, 50% - var(--strip-logo) / 2, var(--dot, 1px));
    margin-left: 0;
    top: round(nearest, var(--strip-logo-air), var(--dot, 1px));
  }
}







:root {
  
  
  --strip-word-cap:      calc(1.125rem * 0.70);   
  --strip-word-cap-wide: calc(1.25rem * 0.70);    
  --strip-sym-h: 33px;         
  
  --strip-sym-stroke: calc(2.38 * var(--u));
  --strip-gap-ratio: 0.667;    

  
  --strip-item-ratio: 2.2857;
  --strip-gap-item: calc(var(--strip-word-cap) / 0.70 * var(--strip-item-ratio));
  
  --strip-sym-ratio: 1;
  --strip-gap-sym:  calc(var(--strip-sym-h) * var(--strip-sym-ratio));
  
  --strip-gap-cur: var(--strip-gap-sym);

  
  --strip-ink-rest:  var(--neutral-6);   
  --strip-ink-hover: var(--ink-dim);   
  --strip-ink-here:  var(--neutral-12);   
}

.strip-side {
  box-sizing: border-box;
  position: fixed; top: var(--strip-btn-top); z-index: 7;
  height: var(--strip-btn-h);
  display: flex; align-items: center;
  
  gap: var(--strip-gap-cur);
}
.strip-link {
  box-sizing: border-box;
  
  position: relative;
  height: 100%;
  display: flex; align-items: center;
  
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

:is(.strip-link, .cart-link, .menu-btn)::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--strip-btn-top));
  height: calc(var(--strip-h) - var(--hairline-w));
  z-index: -1;
  
  border-radius: 3px;
  background: transparent;
  transition: background 120ms ease-out;
}

.menu-btn::before  { left:  calc(-1 * var(--strip-gutter));
                     right: calc(-0.5 * var(--strip-gap-cur)); }
.cart-link::before { right: calc(-1 * var(--strip-gutter));
                     left:  calc(-0.5 * var(--strip-gap-cur)); }
.strip-link::before {
  left:  calc(-0.5 * var(--strip-gap-cur));
  right: calc(-0.5 * var(--strip-gap-cur));
}
@media (hover: hover) {
  :is(.strip-link, .cart-link, .menu-btn):hover::before {
    background: rgba(var(--light-rgb), 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.strip-link, .cart-link, .menu-btn)::before { transition: none; }
}

.strip-link--beats, .strip-link--tapes,
.strip-link--about, .strip-link--contact { display: none; }

.strip-sym {
  display: block;
  height: calc(var(--strip-sym-h) - var(--strip-sym-stroke));
  width: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--strip-sym-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strip-sym path { vector-effect: non-scaling-stroke; }
.strip-word {
  font-family: var(--disp);
  font-size: calc(var(--strip-word-cap) / 0.70);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  
  position: relative;
  top: 0.023em;
}


.strip-side--l { left:  calc(var(--strip-gutter) + var(--menu-icon-w)
                             + 2 * var(--menu-btn-pad) + var(--strip-gap-sym)
                             + var(--strip-sym-stroke) / 2); }
.strip-side--r { right: calc(var(--strip-gutter) + var(--strip-btn-h)
                             + var(--strip-gap-sym)
                             + var(--strip-sym-stroke) / 2); }


.strip-word { display: none; }

.strip-link { color: var(--strip-ink-rest); }
@media (hover: hover) {
  .strip-link:hover { color: var(--strip-ink-hover); }
}
.strip-link[aria-current="page"],
.strip-link[aria-current="page"]:hover { color: var(--strip-ink-here); }




@media (max-width: 519px) {
  .strip-nav { display: none; }
}

@media (max-width: 519px) {
  body:has(.menu-item[aria-current="page"]) .menu-btn::after { content: ""; }
}
@media (max-width: 968px) {
  body:has(.menu-item[aria-current="page"]):has(:is(.strip-link--beats,
    .strip-link--about)[aria-current="page"]) .menu-btn::after { content: ""; }
}
@media (max-width: 1222px) {
  body:has(.menu-item[aria-current="page"]):has(:is(.strip-link--tapes,
    .strip-link--contact)[aria-current="page"]) .menu-btn::after { content: ""; }
}

@media (min-width: 780px) {
  :root { --strip-gap-cur: var(--strip-gap-item); }
  .strip-side--l { left:  calc(var(--strip-gutter) + var(--menu-icon-w)
                               + 2 * var(--menu-btn-pad) + var(--strip-gap-item)); }
  .strip-side--r { right: calc(var(--strip-gutter) + var(--strip-btn-h)
                               + var(--strip-gap-item)); }
  :is(.strip-link--home, .strip-link--lic) .strip-sym  { display: none; }
  :is(.strip-link--home, .strip-link--lic) .strip-word { display: block; }
}

@media (min-width: 969px) {
  .strip-link--beats { display: flex; }
  .strip-link--beats .strip-word { display: block; }
  .strip-link--about { display: flex; }
  .strip-link--about .strip-word { display: block; }
}

@media (min-width: 1223px) {
  .strip-link--tapes, .strip-link--contact { display: flex; }
  :is(.strip-link--tapes, .strip-link--contact) .strip-word { display: block; }
}

@media (min-width: 1316px) {
  :root { --strip-word-cap: var(--strip-word-cap-wide); }
}



:is(.strip-link, .cart-link)[aria-current="page"]::after { content: ""; }
:is(.strip-link, .cart-link)[aria-current="page"]::after, .menu-btn::after {
  position: absolute;
  
  top:  calc(var(--strip-btn-h) + var(--strip-panel-air) + var(--strip-panel-border)
             - var(--strip-mark-half));
  
  height: var(--strip-mark-leg);
  width:  calc(2 * var(--strip-mark-leg));
  
  left:   calc(50% - var(--strip-mark-leg));
  
  background: var(--cyan);
  clip-path: polygon(
    50% 0,
    100% 100%,
    calc(100% - var(--strip-mark-stroke) * 1.41421) 100%,
    50% calc(var(--strip-mark-stroke) * 1.41421),
    calc(var(--strip-mark-stroke) * 1.41421) 100%,
    0 100%);
}

.cart-link[aria-current="page"]::after {
  left: calc(var(--cart-aim-l) - var(--strip-mark-leg));
}

body:has(.menu-item[aria-current="page"]):not(:has(.strip-link[aria-current="page"]))
  .menu-btn::after { content: ""; }

body:has(#sb-menu-panel:popover-open, #sb-cart-panel:popover-open)
  :is(.strip-link[aria-current="page"], .cart-link[aria-current="page"], .menu-btn)::after {
  content: none;
}


.strip-link:focus-visible {
  outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px;
}

.cart-glyph { position: relative; display: block; width: var(--cart-glyph); height: var(--cart-glyph); }


.cart-glyph svg {
  position: absolute; left: 0; display: block;
  top: calc(var(--cart-glyph) * 8.6 / 48);
  width: var(--cart-glyph);
  height: calc(var(--cart-glyph) * 33.4 / 48);
  
  stroke-width: calc(2.38 * var(--u));
}
.cart-glyph svg path { vector-effect: non-scaling-stroke; }

.cart-count {
  
  
  position: absolute; left: calc(100% * 32.59 / 56);
  transform: translateX(-50%);
  bottom: calc(var(--cart-glyph) * 23 / 48);
  font-family: var(--disp); font-weight: 400; line-height: 1;
  font-size: calc(var(--cart-glyph) * 21 / 48);
  
  color: var(--cart-count-ink);
}

.cart-count[data-n="1"] { transform: translateX(calc(-50% - 0.0877em)); }


.cart-count-ink { display: block; }
@media (hover: hover) {
  .cart-count-ink { transition: transform 100ms cubic-bezier(0.2, 0, 0.38, 0.9); }
  .cart-link:hover .cart-count-ink { transform: translateY(-0.0875em); }
}

@keyframes cart-count-bump {
  0%    { transform: translateY(0);          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  28.9% { transform: translateY(-0.175em);   animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  57.8% { transform: translateY(0);          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  72.2% { transform: translateY(-0.04375em); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  86.7% { transform: translateY(0);          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  93.8% { transform: translateY(-0.0109em);  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  100%  { transform: translateY(0); }
}
.cart-count-ink.is-bump { animation: cart-count-bump 450ms both; }

@media (prefers-reduced-motion: reduce) {
  .cart-count-ink { transition: none; }
  .cart-count-ink.is-bump { animation: none; }
  .cart-link:hover .cart-count-ink { transform: none; }
}




.cart-panel, .cart-lic-now, .cart-row-price {
  --lu: min(var(--u), calc(400px / 380));
  --t-01: calc(9.5 * var(--lu));  --t-02: calc(10 * var(--lu));   --t-03: calc(10.4 * var(--lu));
  --t-04: calc(10.5 * var(--lu)); --t-05: calc(11 * var(--lu));   --t-06: calc(11.5 * var(--lu));
  --t-07: calc(12 * var(--lu));   --t-08: calc(12.5 * var(--lu)); --t-09: calc(13 * var(--lu));
  --t-10: calc(13.5 * var(--lu)); --t-11: calc(14 * var(--lu));   --t-12: calc(14.7 * var(--lu));
  --t-13: calc(15 * var(--lu));   --t-14: calc(16 * var(--lu));   --t-15: calc(17 * var(--lu));
  --t-16: calc(19 * var(--lu));   --t-17: calc(20 * var(--lu));   --t-18: calc(26.6 * var(--lu));
  --t-19: calc(28 * var(--lu));   --t-20: calc(30 * var(--lu));   --t-21: calc(34 * var(--lu));
}

.cart-panel { font-size: var(--t-14);
  
  --cart-kill: calc(26 * var(--lu)); }
.cart-panel {
  position: fixed;
  inset: var(--strip-panel-top) var(--strip-gutter) auto auto;   
  z-index: 8;
  width: calc(380 * var(--lu)); max-width: calc(100vw - 32px);
  margin: 0; padding: 0;
  
  border: var(--strip-panel-border) solid var(--hair);
  border-radius: 0 0 4px 4px;
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 26px 64px rgba(var(--neutral-1-rgb), 0.6), 0 2px 10px rgba(var(--neutral-1-rgb), 0.42);
  color: var(--ink);
  overflow: visible;
}
.cart-panel::backdrop { background: transparent; }   


.cart-panel::before {
  content: "";
  position: absolute; top: -5px;
  right: calc(var(--cart-aim-r) - var(--strip-panel-border)
              - var(--strip-mark-sq) / 2);
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: var(--panel-bg);
  
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
}
@media (prefers-reduced-transparency: reduce) {
  .cart-panel::before { background: var(--lift); }
}


.cart-panel {
  opacity: 0; transform: translateY(-6px);
  transition: opacity 150ms ease-in, transform 150ms ease-in,
              overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.cart-panel:popover-open {
  opacity: 1; transform: translateY(0);
  transition: opacity 200ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 200ms cubic-bezier(0.16, 0.84, 0.44, 1),
              overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@starting-style {
  .cart-panel:popover-open { opacity: 0; transform: translateY(-6px); }
}


@media (prefers-reduced-transparency: reduce) {
  .cart-panel { background: var(--lift); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-panel, .cart-panel:popover-open { transform: none; }
}


.cart-list {
  list-style: none; margin: 0; padding: 0 calc(18 * var(--lu));
  max-height: min(calc(246 * var(--lu)), 46vh); overflow-y: auto; overscroll-behavior: contain;
}

.cart-list { max-height: max(calc(80 * var(--lu)), min(calc(246 * var(--lu)), 46vh, calc(100vh - var(--cart-rest, 0px)))); }


.cart-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline; gap: calc(10 * var(--lu));
  padding: calc(13 * var(--lu)) calc(18 * var(--lu)); border-bottom: 1px solid var(--hair);
}
.cart-head[hidden] { display: none; }
.cart-head .cart-head-cell {
  font-family: var(--sans); font-size: var(--t-04); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink-dim); white-space: nowrap;
}

.cart-head .cart-lic-btn {
  pointer-events: none; cursor: default; padding-top: 0; padding-bottom: 0;
}
.cart-head .cart-head-caret { display: block; width: calc(11 * var(--lu)); height: calc(11 * var(--lu)); flex: 0 0 auto; }

.cart-head .cart-head-price { width: var(--price-w, auto); min-width: var(--price-w, auto); }

.cart-head .cart-head-end { margin-right: -0.2em; }
.cart-head .cart-head-kill { display: block; width: var(--cart-kill, 26px); }

@media (forced-colors: active) {
  .cart-head .cart-lic-btn { border-color: Canvas; }
}

.cart-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: calc(10 * var(--lu));
  padding: calc(13 * var(--lu)) 0; border-bottom: 1px solid var(--hair);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row-title {
  font-family: var(--disp); font-size: var(--t-13); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; transition: color 0.16s ease;
}

.cart-row-title:hover {
  
  text-decoration: underline;
  
  text-underline-offset: 0.133em; text-decoration-color: var(--ink-dim);
}


.cart-lic { display: inline-flex; min-width: 0; }

.cart-lic-now {
  display: inline-block;
  width: var(--lic-w, auto);
  font-family: var(--sans); font-size: var(--t-04); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; text-align: left;
}
.cart-lic-btn {
  display: inline-flex; align-items: center; gap: calc(4 * var(--lu));
  padding: calc(3 * var(--lu)) calc(5 * var(--lu)) calc(3 * var(--lu)) calc(6 * var(--lu)); margin: 0;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  font-family: var(--sans); color: var(--ink-dim);
  cursor: pointer; white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.cart-lic-btn:hover { color: var(--ink); border-color: var(--hair);
  background: rgba(var(--light-rgb), 0.08); }
.cart-lic-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--hair);
  background: rgba(var(--light-rgb), 0.07); }
.cart-lic-btn:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6);
  outline-offset: 1px; }
.cart-lic-caret { width: calc(11 * var(--lu)); height: calc(11 * var(--lu)); flex: 0 0 auto;
  transition: transform 0.16s ease; }
.cart-lic-btn[aria-expanded="true"] .cart-lic-caret { transform: rotate(180deg); }


.cart-lic-list {
  position: fixed; inset: auto; margin: 0; padding: calc(4 * var(--lu));
  min-width: calc(190 * var(--lu)); max-width: calc(260 * var(--lu));
  border: 1px solid var(--hair); border-radius: 4px;
  background: rgba(var(--neutral-5-rgb), 0.94);   
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 18px 44px rgba(var(--neutral-1-rgb), 0.6);
  color: var(--ink); overflow: visible;
}
.cart-lic-list:popover-open { display: block; }
@media (prefers-reduced-transparency: reduce) {
  .cart-lic-list { background: var(--neutral-5); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cart-lic-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--lu));
  padding: calc(7 * var(--lu)) calc(9 * var(--lu)); border-radius: 3px; cursor: pointer;
}
.cart-lic-opt-name {
  font-size: var(--t-04); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.cart-lic-opt-price {
  font-family: var(--disp); font-size: var(--t-09); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-dim);
}

.cart-lic-opt.is-at { background: rgba(var(--light-rgb), 0.09); }
.cart-lic-opt:hover { background: rgba(var(--light-rgb), 0.08); }
.cart-lic-opt[aria-selected="true"] .cart-lic-opt-name,
.cart-lic-opt[aria-selected="true"] .cart-lic-opt-price { color: var(--ink); }
.cart-lic-read {
  
  display: block; margin: 0.3em 0 0.1em; padding: calc(6 * var(--lu)) calc(9 * var(--lu)) calc(4 * var(--lu));
  border-top: 1px solid var(--hair);
  font-size: var(--t-02); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  transition: color 0.16s ease;
}
.cart-lic-read:hover { color: var(--ink); }

.cart-row-price {
  display: inline-block; min-width: var(--price-w, auto); text-align: right;
  font-family: var(--disp); font-size: var(--t-13); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}

.cart-row-kill {
  width: var(--cart-kill, 26px); height: var(--cart-kill, 26px); display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--ink-dim); cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.cart-row-kill svg { width: calc(13 * var(--lu)); height: calc(13 * var(--lu)); }
.cart-row-kill:hover { color: var(--ink); background: rgba(var(--light-rgb), 0.08); }



.cart-row--undone { grid-template-columns: minmax(0, 1fr) auto var(--price-w, auto) var(--cart-kill, 26px); }
.cart-undo-msg { font-size: var(--t-09); color: var(--ink-dim); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cart-undo-name {
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.cart-undo-name:hover { color: var(--ink); border-bottom-color: var(--ink-dim); }


.cart-undo-slot { cursor: default; }
.cart-undo-slot:hover { border-color: transparent; background: transparent; }
.cart-undo-caret { display: block; width: calc(11 * var(--lu)); height: calc(11 * var(--lu)); flex: 0 0 auto; }
.cart-row--undone .cart-undo-dismiss { grid-column: 3; justify-self: end;
  min-height: var(--cart-kill, 26px); }
.cart-undo-btn, .cart-undo-dismiss {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-09); font-weight: 500; 
  letter-spacing: 0.02em; text-transform: none; 
  transition: color 0.16s ease;
}
.cart-undo-btn { color: var(--cyan); }
.cart-undo-btn:hover { color: var(--cyan-10); }
.cart-undo-dismiss { color: var(--ink-dim); font-weight: 400; }
.cart-undo-dismiss:hover { color: var(--ink); }

.cart-blank { padding: calc(26 * var(--lu)) calc(18 * var(--lu)) calc(22 * var(--lu)); text-align: center; }
.cart-blank-head { margin: 0; font-family: var(--disp); font-size: var(--t-13);
  font-weight: 600; color: var(--ink); }
.cart-blank-sub { margin: calc(7 * var(--lu)) 0 0; font-size: var(--t-08); line-height: 1.5; color: var(--ink-dim); }

.cart-foot { padding: calc(14 * var(--lu)) calc(18 * var(--lu)) calc(18 * var(--lu)); border-top: 1px solid var(--hair); }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 calc(14 * var(--lu));
  
  padding-right: calc(var(--cart-kill, 26px) + 10 * var(--lu));
}

.cart-total-label {
  font-size: var(--t-04); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
}
.cart-total-sum {
  font-family: var(--disp); font-size: var(--t-17); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}


.cart-exits { display: flex; flex-direction: column; gap: calc(12 * var(--lu)); }
.cart-checkout { width: 100%; justify-content: center; padding: calc(13 * var(--lu)) calc(20 * var(--lu)); }
.cart-exits-quiet { display: flex; justify-content: space-between; align-items: center; }
.cart-quiet {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-07); letter-spacing: 0.02em;
  color: var(--ink-dim); text-decoration: none;
  transition: color 0.16s ease;
}
.cart-quiet:hover { color: var(--ink); }

.cart-quiet--pending { opacity: 0.42; cursor: default; }
.cart-quiet--pending:hover { color: var(--ink-dim); }


.cart-exits[data-empty="1"] .cart-checkout,
.cart-exits[data-empty="1"] .cart-quiet--pending { display: none; }
.cart-exits[data-empty="1"] .cart-exits-quiet { justify-content: flex-end; }

.topbar { display: flex; align-items: center; gap: 12px; }

.topbar--empty { height: 25px; }
.topbar--home.topbar--empty { height: 62.25px; }

#logo { width: clamp(120px, 16vw, 176px); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: contain; display: block; }


#tongue-group { transform-box: fill-box; transform-origin: 50% 0%; }
body[data-tongue="peek"] #tongue-group { transform: scaleY(0.75); transition: transform 200ms cubic-bezier(.4,0,1,1); }
body[data-tongue="peek"].sb-playing #tongue-group { transform: scaleY(1); transition: transform 500ms cubic-bezier(.22,.68,.28,1); }
@media (prefers-reduced-motion: reduce) {
  body[data-tongue="peek"] #tongue-group,
  body[data-tongue="peek"].sb-playing #tongue-group { transition: none; }
}


body[data-tongue="slide"] #tongue-group { transition: transform 450ms cubic-bezier(.4,0,1,1); }
body[data-tongue="slide"].sb-playing #tongue-group { transform: translate(0px, 0px); transition: transform 2350ms cubic-bezier(.22,.68,.28,1); }
@media (prefers-reduced-motion: reduce) {
  body[data-tongue="slide"] #tongue-group { transition: none; }
}
.topbar .wordmark { font-family: var(--disp); font-size: var(--t-16); font-weight: 600; letter-spacing: -0.01em; }


.topbar--home .wordmark { font-size: var(--t-18); }


.subtitle {
  margin: 8px 0 0; max-width: 620px; text-align: center;
  font-size: var(--t-10); line-height: 1.5; color: var(--ink-dim);
}
.subtitle-rest { display: none; }
.subtitle.is-open .subtitle-rest { display: inline; }

.middle {
  flex: 1 1 auto; width: 100%; max-width: 720px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 22px;
}
.title {
  margin: 0; font-family: var(--disp);
  
  
  height: var(--title-box, 22vh); min-height: var(--title-box-min, 132px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(calc(44px * var(--title-scale, 1)), calc(8vw * var(--title-scale, 1)),
                   calc(96px * var(--title-scale, 1)));
  font-weight: 600; line-height: 0.92; letter-spacing: -0.03em;
}
.specs {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  font-size: var(--t-08); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
}
.specs .spec { position: relative; }
.specs .spec + .spec::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--light-rgb), 0.5); transform: translateY(-50%); }


.acquire { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.price-line { display: flex; align-items: baseline; gap: 12px; }
.price { font-family: var(--disp); font-size: var(--t-19); font-weight: 600; letter-spacing: -0.01em; }
.price-meta { font-size: var(--t-05); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px; border-radius: 4px;
  background: var(--cta); color: var(--cta-ink);
  font-size: var(--t-09); font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.22s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(var(--neutral-1-rgb),0.45); }
.cta:active { transform: translateY(0); }
.cta .arrow { width: 15px; height: 15px; }



.cta--gold {
  background: rgba(var(--room-4-rgb), 0.66); color: var(--gold-hi);
  border: 1px solid rgba(var(--gold-rgb), 0.42); backdrop-filter: blur(3px);
  box-shadow: -6px 7px 26px rgba(var(--bronze-6-rgb), 0.103),
    7px -2px 20px rgba(var(--bronze-6-rgb), 0.137), inset 0 1px 0 rgba(var(--gold-rgb), 0.12);
}
.cta--gold:hover { transform: translateY(-2px); border-color: rgba(var(--gold-rgb), 0.7);
  box-shadow: -6px 7px 26px rgba(var(--bronze-6-rgb), 0.161),
    7px -2px 20px rgba(var(--bronze-6-rgb), 0.2), 0 14px 40px rgba(var(--neutral-1-rgb), 0.45); }


.gold-metal {
  background: linear-gradient(103deg, var(--gold-9) 0%, var(--gold-7) 30%, var(--gold-10) 50%, var(--gold-7) 70%, var(--gold-9) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


.menu-panel {
  --lu: min(var(--u), calc(280px / 232));
  box-sizing: border-box;
  position: fixed;
  top: var(--strip-panel-top); left: var(--strip-gutter); right: auto; bottom: auto;
  z-index: 8;
  width: calc(232 * var(--lu)); max-width: calc(100vw - 32px);
  margin: 0; padding: calc(8 * var(--lu)) 0;
  border: var(--strip-panel-border) solid var(--hair);
  border-radius: 0 0 4px 4px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 26px 64px rgba(var(--neutral-1-rgb), 0.6), 0 2px 10px rgba(var(--neutral-1-rgb), 0.42);
  color: var(--ink);
  overflow: visible;
}
.menu-panel::backdrop { background: transparent; }


.menu-panel {
  --tip-x: calc(var(--menu-icon-w) / 2 + var(--menu-btn-pad)
                - var(--strip-panel-border));
}
.menu-panel::before {
  content: "";
  position: absolute; top: -5px; left: calc(var(--tip-x) - 5px);
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: var(--menu-bg);
  
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
}
@media (prefers-reduced-transparency: reduce) {
  .menu-panel::before { background: var(--lift); }
  .menu-panel { background: var(--lift); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


.menu-panel {
  opacity: 0; transform: translateY(-6px);
  transition: opacity 150ms ease-in, transform 150ms ease-in,
              overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.menu-panel:popover-open {
  opacity: 1; transform: translateY(0);
  transition: opacity 200ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 200ms cubic-bezier(0.16, 0.84, 0.44, 1),
              overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@starting-style {
  .menu-panel:popover-open { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel:popover-open { transform: none; }
}


.menu-panel.is-shut { opacity: 0; transform: translateY(-6px); visibility: hidden; }
.menu-panel:not([popover]) { display: block; }


.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list--quiet { margin-top: calc(14 * var(--lu)); }

.menu-item {
  display: flex; align-items: center;
  min-height: calc(44 * var(--lu)); padding: 0 calc(18 * var(--lu));
  font-family: var(--disp); font-size: max(var(--t-13), calc(15 * var(--lu))); font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.menu-list--quiet .menu-item { font-size: max(var(--t-11), calc(14 * var(--lu))); font-weight: 500; color: var(--ink-dim); }
.menu-item:hover, .menu-item:focus-visible { background: rgba(var(--light-rgb), 0.08); }
.menu-list--quiet .menu-item:hover, .menu-list--quiet .menu-item:focus-visible { color: var(--ink); }


.menu-item[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--cyan);
}



.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--dock-h); min-height: 140px; pointer-events: none;
  
  --wet-h: min(calc(100dvh - var(--pic-top) - var(--pic-h) * var(--wetline)), calc(100% - 3.7664 * min(10px, 5%))); }
@supports not (height: 1dvh) {
  .dock { --wet-h: min(calc(100vh - var(--pic-top) - var(--pic-h) * var(--wetline)), calc(100% - 3.7664 * min(10px, 5%))); }
}

#water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.dock { display: none; }
body:has(> .stage[data-player="yes"]) .dock,
html.sb-dock-on body:has(> .stage[data-player="if-playing"]) .dock { display: block; }

.dock-seek { position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--wet-h); pointer-events: auto; cursor: pointer; }

.dock-ui { position: absolute; inset: auto 0 0 0; height: var(--wet-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 16px; padding: 0 32px 14px; pointer-events: none; }
.play-btn {
  
  grid-column: 2; grid-row: 1;
  pointer-events: auto; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  --ring: rgba(var(--light-rgb), 0.5); border: 1px solid var(--ring); background: rgba(var(--room-3-rgb), 0.4);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(4px); transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.12s ease;
}
.play-btn:hover { --ring: rgba(var(--light-rgb), 0.95); background: rgba(var(--light-rgb), 0.08); }
.play-btn:active { transform: scale(0.96); }
.play-btn svg:not(.ring) { width: 19px; height: 19px; }
.play-btn .icon-pause { display: none; }
.dock.is-playing .play-btn .icon-play { display: none; }
.dock.is-playing .play-btn .icon-pause { display: block; }
.times { pointer-events: none; position: absolute; right: 32px; top: 50%;
  transform: translateY(-50%); font-size: var(--t-07); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--ink-dim); }

.times .sep { margin: 0 7px; }


.home-link { color: inherit; text-decoration: none; }

.blurb { margin: 0; max-width: 520px; font-size: var(--t-11); line-height: 1.55; color: var(--ink-dim); }

.tiers { display: flex; flex-direction: column; gap: 8px; width: min(440px, 88vw); }
.tier {
  display: flex; align-items: baseline; gap: 14px; text-align: left;
  padding: 12px 16px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--hair); background: rgba(var(--room-3-rgb), 0.35);
  color: var(--ink); font-family: var(--sans);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.tier:hover { border-color: rgba(var(--light-rgb), 0.45); }
.tier.is-selected { border-color: rgba(var(--light-rgb), 0.9); background: rgba(var(--light-rgb), 0.07); }
.tier--unavailable { opacity: 0.35; cursor: default; }
.tier .tier-label { font-size: var(--t-09); font-weight: 600; letter-spacing: 0.02em; }
.tier .tier-delivers { font-size: var(--t-04); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.tier .tier-price { margin-left: auto; font-family: var(--disp); font-size: var(--t-14); font-weight: 600; }

.tier.is-selected[data-tier="exclusive"] {
  border-color: transparent;
  background:
    linear-gradient(rgba(var(--room-4-rgb), 0.92), rgba(var(--room-4-rgb), 0.92)) padding-box,
    linear-gradient(155deg, rgba(var(--gold-6-rgb), 0.553) 0%, rgba(var(--bronze-6-rgb), 0.223) 30%,
      rgba(var(--gold-9-rgb), 0.391) 50%, rgba(var(--bronze-6-rgb), 0.22) 70%,
      rgba(var(--gold-6-rgb), 0.475) 100%) border-box;
}

.microcopy { margin: 0; font-size: var(--t-05); letter-spacing: 0.06em; color: var(--ink-dim); }
.tape-cta {
  font-size: var(--t-07); font-weight: 500; letter-spacing: 0.02em; 
  color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--hair);
  
  padding-bottom: 0.14em; transition: color 0.18s ease, border-color 0.18s ease;
}
.tape-cta:hover { color: var(--ink); border-color: rgba(var(--light-rgb), 0.6); }


.stage--list { justify-content: flex-start; }

.listing {
  width: 100%; max-width: calc(640 * var(--lu)); margin: 0 auto;
  padding-top: calc(34 * var(--lu));
  display: flex; flex-direction: column; align-items: center; gap: calc(26 * var(--lu)); }
.logo--list { width: clamp(96px, 12vw, 132px); }


.listing--nohero { --lu: var(--u);
  padding-top: calc(34px + clamp(120px, 16vw, 176px) + 26px - 86px); }


.tape-title { margin: 0; font-family: var(--disp); font-size: calc(4.875 * var(--fit));
  font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; text-align: center;
  min-height: calc(calc(4.875 * var(--fit)) * 0.95 * 2);
  display: flex; align-items: center; justify-content: center; }
.tracks { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; }

.track-row { display: flex; align-items: center; gap: calc(13 * var(--lu)); padding: calc(14 * var(--lu)) 0;
  border-bottom: 1px solid var(--hair); }

[hidden] { display: none !important; }

.tracks > .track-row:first-child { border-top: 1px solid var(--hair); }
.track-row.is-current .row-title { color: var(--ink); }

.row-play { flex: 0 0 auto; width: calc(38 * var(--lu)); height: calc(38 * var(--lu)); border-radius: 50%;
  margin-left: calc(7 * var(--lu)); margin-right: calc(-5 * var(--lu));
  --ring: rgba(var(--light-rgb), 0.4); border: 1px solid var(--ring); background: transparent;
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.18s ease, background-color 0.18s ease; }
.row-play:hover { --ring: rgba(var(--light-rgb), 0.95); background: rgba(var(--light-rgb), 0.08); }
.row-play svg:not(.ring) { width: calc(15 * var(--lu)); height: calc(15 * var(--lu)); }
.row-play .icon-pause { display: none; }
body.sb-playing .track-row.is-current .row-play .icon-play { display: none; }
body.sb-playing .track-row.is-current .row-play .icon-pause { display: block; }
.row-title { margin-right: auto; min-width: 0; font-family: var(--disp); font-size: calc(19 * var(--lu)); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.row-title:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.row-specs { font-size: calc(11 * var(--lu)); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }

.quiet { margin: 4px 0 0; }

.content .quiet { text-align: center; }
.quiet-link { font-size: calc(11.5 * var(--lu)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; }
.quiet-link:hover { color: var(--ink); }

.quiet-link--words { letter-spacing: 0.02em; text-transform: none; }


.dock-title { pointer-events: none; font-family: var(--disp); font-size: var(--t-07);
  font-weight: 600; letter-spacing: 0.02em; color: var(--ink); text-align: left;
  grid-column: 1; grid-row: 1; justify-self: end; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.footer { width: 100%; margin-top: 40px; padding: 18px 0 8px; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; }

.footer-nav a { font-size: var(--t-02); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  min-height: 24px; padding-block: 6px; margin-block: -6px; }
.footer-nav a:hover { color: var(--ink); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }



.content { --lu: var(--u); max-width: calc(620 * var(--lu)); align-items: stretch; }
.content .tape-title { text-align: left; font-size: clamp(38px, 7vw, 64px); }
.content .prose { margin: 0; max-width: none; font-size: calc(15 * var(--lu)); line-height: 1.6; color: var(--ink); }
.content .prose a { color: var(--ink); }
.content .section-label { margin: calc(6 * var(--lu)) 0 calc(-12 * var(--lu)); font-size: calc(10.5 * var(--lu)); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.content .tiers { width: 100%; }
  .content ul.plain { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: calc(12 * var(--lu)); }
.content ul.plain li { position: relative; padding-left: calc(18 * var(--lu)); font-size: calc(15 * var(--lu));
  line-height: 1.55; color: var(--ink); }
.content ul.plain li::before { content: ""; position: absolute; left: 0; top: calc(9 * var(--lu));
  width: calc(5 * var(--lu)); height: calc(5 * var(--lu)); border-radius: 50%; background: rgba(var(--light-rgb), 0.6); }
.content .newsletter { width: 100%; padding: calc(18 * var(--lu)) calc(20 * var(--lu)); border: 1px solid var(--hair);
  border-radius: 4px; background: rgba(var(--room-3-rgb), 0.35); }
.content .socials { display: flex; flex-wrap: wrap; gap: calc(18 * var(--lu)); margin-top: calc(14 * var(--lu)); }

.content .cta { align-self: flex-start; }


.content .contract { white-space: pre-wrap; overflow-wrap: break-word; margin: 4px 0 0;
  font-family: var(--sans); font-size: calc(12.5 * var(--lu)); line-height: 1.6; color: var(--ink); }

.sec--license .accept-copy { margin-top: -0.61em; }
.read-contract { margin-top: -0.61em; }

.accept-copy .read-contract { color: var(--ink); text-decoration: underline;
  
  text-underline-offset: 0.229em; text-decoration-color: rgba(var(--light-rgb), 0.5); }
.accept-copy .read-contract:hover { text-decoration-color: var(--ink); }

@media (max-width: 520px) {
  :root { --dock-h: 18vh; }
  .title { font-size: clamp(calc(40px * var(--title-scale, 1)), calc(13vw * var(--title-scale, 1)),
                            calc(64px * var(--title-scale, 1))); }
  
  .dock-ui { padding: 0 18px 14px; }
  
  :is(#track-list, .tape-page .tracks) .row-act--dl,
  :is(#track-list, .tape-page .tracks) .row-act--share { display: none; }

  
  :is(#track-list, .tape-page .tracks) .track-row {
    
    --row-act-size: 38px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "play title buy"
                         "play specs buy";
    align-items: center; column-gap: 13px; row-gap: 0;
  }
  :is(#track-list, .tape-page .tracks) .track-row .row-play    { grid-area: play; }
  :is(#track-list, .tape-page .tracks) .track-row .row-title   { grid-area: title; margin-right: 0; }
  :is(#track-list, .tape-page .tracks) .track-row .row-specs   { grid-area: specs;
                                        overflow: hidden; text-overflow: ellipsis; }
  :is(#track-list, .tape-page .tracks) .track-row .row-actions { display: contents; }
  
  :is(#track-list, .tape-page .tracks) .track-row .row-act--license { grid-area: buy;
                                             width: var(--row-act-size); height: var(--row-act-size);
                                             position: relative;
                                             
                                             --ring: rgba(var(--gold-rgb), 0.5); border: 1px solid var(--ring); }
  :is(#track-list, .tape-page .tracks) .track-row .row-act--license svg:not(.ring) {
                                                 
                                                 transform: scale(0.9449); }
  
  
  #track-list .group-cover-link { display: inline-block; }
  #track-list .group-cover-wrap {
    display: grid; grid-template-rows: 67px 67px;
    align-items: center; justify-items: center; gap: 0;
  }

  #track-list .track-row.row-paged { display: none; }
  #track-list .tape-group.is-open .track-row.row-paged,
  #track-list.is-expanded .track-row.row-paged,
  #track-list.is-searching .track-row.row-paged { display: grid; }

  .row-specs { font-size: var(--t-02); letter-spacing: 0.06em; }
  .dock-title { max-width: 100%; }
  
  .middle--beat .specs .spec--collection { flex-basis: 100%; }
  .middle--beat .specs .spec--collection::before { display: none; }
  
  .collections { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 390px) and (max-width: 520px) {
  :is(#track-list, .tape-page .tracks) .track-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "play title dload buy"
                         "play specs dload buy";
  }
  :is(#track-list, .tape-page .tracks) .track-row .row-act--dl {
    display: grid; grid-area: dload; width: 38px; height: 38px; position: relative;
    --ring: rgba(var(--cyan-rgb), 0.5); border: 1px solid var(--ring);
  }
  :is(#track-list, .tape-page .tracks) .track-row .row-act--dl svg:not(.ring) {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 53%; height: 53%;
  }
}

@media (prefers-reduced-motion: reduce) { #lightfx { display: none; } }



.sb-consent {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--hair); border-radius: 6px;
  background: rgba(var(--room-3-rgb), 0.94); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(var(--neutral-1-rgb), 0.45);
}
.sb-consent-text { margin: 0; flex: 1 1 260px; font-family: var(--sans);
  font-size: var(--t-08); line-height: 1.5; color: var(--ink-dim); }
.sb-consent-text a.sb-consent-link { color: var(--ink); text-decoration: underline; }

.sb-consent-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.sb-consent-btn { font-family: var(--disp); font-size: var(--t-09); font-weight: 600;
  padding: 8px 16px; border-radius: 4px; cursor: pointer; border: 1px solid var(--hair);
  background: transparent; color: var(--ink); min-width: fit-content; }
.sb-consent-btn:hover { border-color: var(--ink-dim); }
.sb-consent-yes { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.sb-consent-yes:hover { border-color: var(--cta); filter: brightness(0.94); }
@media (max-width: 520px) {
  
  .sb-consent { bottom: 0; border-radius: 6px 6px 0 0; width: 100%; }
  .sb-consent-btns { width: 100%; }
  .sb-consent-btn { flex: 1; }
}


.nl-form, .recover-form { width: 100%; max-width: calc(440 * var(--lu)); display: flex; flex-direction: column; gap: calc(12 * var(--lu)); margin: 0; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-field { display: flex; gap: calc(10 * var(--lu)); flex-wrap: wrap; }
.nl-email {
  flex: 1 1 calc(200 * var(--lu)); min-width: 0; padding: calc(13 * var(--lu)) calc(16 * var(--lu)); border-radius: 4px;
  border: 1px solid var(--hair); background: rgba(var(--room-3-rgb), 0.5); color: var(--ink);
  font-family: var(--sans); font-size: calc(14 * var(--lu));
}
.nl-email::placeholder { color: var(--ink-dim); }
.nl-email:focus { outline: none; border-color: rgba(var(--light-rgb), 0.7); }
.nl-submit { flex: 0 0 auto; padding: calc(13 * var(--lu)) calc(22 * var(--lu)); }
.nl-trade { margin: 0; }

.cf-turnstile:empty { display: none; }


.nl-gate { width: min(calc(440 * var(--lu)), 88vw); border: 1px solid var(--hair); border-radius: 4px;
  background: rgba(var(--room-3-rgb), 0.35); }
.nl-summary { list-style: none; cursor: pointer; padding: calc(12 * var(--lu)) calc(16 * var(--lu));
  font-size: calc(12 * var(--lu)); font-weight: 600; letter-spacing: 0.02em; 
  color: var(--ink); }
.nl-summary::-webkit-details-marker { display: none; }
.nl-summary::after { content: "+"; float: right; color: var(--ink-dim); font-weight: 400; }
.nl-gate[open] .nl-summary::after { content: "\2013"; }
.nl-reveal { padding: 0 calc(16 * var(--lu)) calc(16 * var(--lu)); }
.nl-reveal .nl-form { max-width: none; }

.nl-block { width: 100%; max-width: calc(440 * var(--lu)); display: flex; flex-direction: column; gap: calc(12 * var(--lu)); }


.promo { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; width: 100%; max-width: 440px;
  padding: 18px 20px; border: 1px solid transparent; border-radius: 4px;
  background:
    linear-gradient(rgba(var(--room-4-rgb), 0.82), rgba(var(--room-4-rgb), 0.82)) padding-box,
    linear-gradient(155deg, rgba(var(--gold-6-rgb), 0.535) 0%, rgba(var(--bronze-6-rgb), 0.22) 30%,
      rgba(var(--gold-9-rgb), 0.38) 50%, rgba(var(--bronze-6-rgb), 0.202) 70%,
      rgba(var(--gold-6-rgb), 0.441) 100%) border-box; }
.promo-label { font-size: var(--t-04); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(var(--gold-rgb), 0.8); }
.promo-code code.gold-metal { color: transparent; }
.promo-code { display: flex; align-items: center; gap: 14px; }

.promo-code code { font-family: var(--disp); font-size: var(--t-21); font-weight: 600;
  letter-spacing: 0.18em; color: var(--ink); }
.copy-btn { font-family: var(--disp); font-size: var(--t-07); font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 4px; border: 1px solid var(--hair);
  background: transparent; color: var(--ink); }
.copy-btn:hover { border-color: var(--ink-dim); }
.nl-download { margin-top: 4px; }


.license-dl { width: 100%; max-width: 440px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px; }
.license-dl .license-form { width: 100%; }
.license-dl .nl-field { justify-content: center; }

.utility { --lu: var(--u);
  
  max-width: 640px; }

.checkout { --lu: 1px; }
.utility .nl-block { align-items: center; text-align: center; }

.utility .blurb { text-align: center; }




.note-sign { margin: 0.118em 0 0; font-family: var(--disp); font-size: var(--t-15); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-align: center; }

.license-framed { padding: 18px 20px; border: 1px solid transparent; border-radius: 4px;
  background:
    linear-gradient(rgba(var(--room-4-rgb), 0.82), rgba(var(--room-4-rgb), 0.82)) padding-box,
    linear-gradient(155deg, rgba(var(--gold-6-rgb), 0.535) 0%, rgba(var(--bronze-6-rgb), 0.22) 30%,
      rgba(var(--gold-9-rgb), 0.38) 50%, rgba(var(--bronze-6-rgb), 0.202) 70%,
      rgba(var(--gold-6-rgb), 0.441) 100%) border-box; }
.license-framed .nl-gate { width: 100%; }




.tape-cta--prominent {
  align-self: center; border: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  border-radius: 4px; padding: 8.8px 16px; color: var(--ink); background: rgba(var(--room-3-rgb), 0.35);
  text-transform: none; letter-spacing: 0.02em; font-size: var(--t-03); font-weight: 600;
}

.tape-cta--prominent { border-color: rgba(var(--cyan-rgb), 0.45);
  box-shadow: -6px 6px 22px rgba(var(--rose-rgb), 0.10), 7px -2px 18px rgba(var(--rose-rgb), 0.14); }
.tape-cta--prominent:hover { border-color: rgba(var(--cyan-rgb), 0.75);
  box-shadow: -6px 6px 22px rgba(var(--rose-rgb), 0.16), 7px -2px 18px rgba(var(--rose-rgb), 0.20); }






.tier-cards { display: grid; grid-template-columns: repeat(3, minmax(calc(139.64 * var(--lu)), 1fr));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  
  grid-template-rows: repeat(var(--tier-rows, 12), auto); column-gap: 24px; row-gap: 8px;
  width: min(calc(648 * var(--lu)), calc(100vw - 52px)); margin: calc(8 * var(--lu)) 0; margin-left: 50%; translate: -50% 0;
  
  padding-block: calc(15 * var(--lu)); margin-block: calc(-7 * var(--lu)); }

.tier-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
  scroll-snap-align: start; }

.tier-turn { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
.tier-face { display: grid; grid-row: 1 / -1; grid-column: 1; grid-template-rows: subgrid;
  
  padding: calc(16 * var(--lu)) calc(12.5 * var(--lu));
  border: 1px solid var(--hair); border-radius: 6px;
  background: rgba(var(--room-3-rgb), 0.35); }

.tier-face > * { grid-column: 1; }
.tier-face > .tier-flip.tier-strut { grid-row: -3 / -2; }
.tier-face > .quiet-link.tier-strut { grid-row: -2 / -1; }

.tier-strut { visibility: hidden; pointer-events: none; }

.tier-actions { display: flex; flex-direction: column; gap: 8px; }
.tier-face > .tier-actions { grid-row: -3 / -1; justify-content: flex-end; }
.tier-read { text-decoration: none; }

.tier-face > .tier-back-body { grid-row: 4 / -1; display: flex; flex-direction: column; gap: 8px; }
.tier-who { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;
  gap: var(--who-gap, 8px); padding-top: var(--who-top, 0px); }
.tier-who-line { margin: 0; }
.tier-who-line:nth-child(1) { min-height: var(--who-h1, 0px); }
.tier-who-line:nth-child(2) { min-height: var(--who-h2, 0px); }
.tier-who-line:nth-child(3) { min-height: var(--who-h3, 0px); }
.tier-who-line:nth-child(4) { min-height: var(--who-h4, 0px); }

.tier-who-lead { color: var(--ink-dim); }

.tier-who-link { text-decoration: underline; text-underline-offset: 0.229em;
  text-decoration-color: rgba(var(--light-rgb), 0.5); }
@media (hover: hover) {
  .tier-who-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
}
.tier-who-link:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px; }


.tier-card { perspective: 1400px; }
.tier-turn { transform-style: preserve-3d; transform: rotateY(0deg);
  transition: transform 400ms cubic-bezier(0.4, 0.14, 0.3, 1); }
.tier-card[data-side="back"] .tier-turn,
.tier-card.is-turning.to-back .tier-turn { transform: rotateY(180deg); }
.tier-card.is-turning.to-front .tier-turn { transform: rotateY(0deg); }
.tier-card.is-turning .tier-turn { animation: sb-card-dip 400ms cubic-bezier(0.4, 0, 0.2, 1) both; }

.tier-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tier-face--front { transform: rotateY(0deg); }
.tier-face--back { transform: rotateY(180deg); }
@keyframes sb-card-dip { 0%, 100% { scale: 1; } 50% { scale: 0.96; } }

@media (prefers-reduced-motion: reduce) {
  .tier-card { perspective: none; }
  .tier-turn, .tier-card[data-side="back"] .tier-turn, .tier-card.is-turning .tier-turn {
    transform: none; transition: none; animation: none; transform-style: flat; }
  .tier-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .tier-face--front, .tier-face--back { transform: none; }
  .tier-face--back { visibility: hidden; }
  .tier-card[data-side="back"] .tier-face--back { visibility: visible; }
  .tier-card[data-side="back"] .tier-face--front { visibility: hidden; }
  .tier-card.is-turning .tier-face { visibility: visible; }
  .tier-card.is-turning.to-back .tier-face--front,
  .tier-card.is-turning.to-front .tier-face--back { animation: sb-face-out 200ms ease both; }
  .tier-card.is-turning.to-back .tier-face--back,
  .tier-card.is-turning.to-front .tier-face--front { animation: sb-face-in 200ms ease both; }
}
@keyframes sb-face-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sb-face-in { from { opacity: 0; } to { opacity: 1; } }


.tier-flip { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 10px; border: 1px solid var(--hair); border-radius: 4px;
  background: rgba(var(--room-3-rgb), 0.35); color: var(--ink); cursor: pointer;
  
  font-family: var(--sans); font-weight: 400; font-size: max(12px, calc(11 * var(--lu)));
  line-height: 1.3; letter-spacing: 0.02em;
  transition: background-color 110ms ease, border-color 110ms ease; }

.tier-flip-words { display: block; }

.tier-actions > button.tier-flip { color: var(--ink-dim); min-height: max(44px, var(--flip-h, 0px));
  
  background: rgba(var(--room-3-rgb), 0.175); border-color: rgba(var(--room-13-rgb), 0.10); }
@media (hover: hover) {
  .tier-actions > button.tier-flip:hover { background: rgba(var(--light-rgb), 0.08); border-color: rgba(var(--light-rgb), 0.6); }
}
.tier-actions > button.tier-flip:active { background: rgba(var(--light-rgb), 0.10); }
.tier-flip-end { white-space: nowrap; }
.tier-flip-short { display: none; }
.tier-flip.is-short .tier-flip-long { display: none; }
.tier-flip.is-short .tier-flip-short { display: inline; }

.tier-actions .tier-flip-words { display: flex; flex: 1 1 auto; align-items: baseline;
  justify-content: space-between; text-align: left; }
.tier-actions .tier-flip-sym { position: relative; top: 0.12em; }
.tier-flip-sym { display: inline-block; width: auto; height: 0.95em; margin-left: 0.4em;
  vertical-align: -0.12em; overflow: visible; fill: none; stroke: currentColor;
  
  stroke-width: max(0.052em, var(--dot, 1px)); stroke-linecap: round; stroke-linejoin: round; }
.tier-flip-sym path { vector-effect: non-scaling-stroke; }
@media (hover: hover) {
  .tier-flip:hover { background: rgba(var(--light-rgb), 0.08); border-color: rgba(var(--light-rgb), 0.6); }
}
.tier-flip:active { background: rgba(var(--light-rgb), 0.10); }
.tier-flip:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px; }



.tier-all { display: flex; justify-content: center; margin-top: calc(48px - 34 * var(--lu));
  margin-bottom: calc(60px - 26 * var(--lu)); }
.tier-strip + .tier-all { margin-top: calc(48px - 26 * var(--lu)); }
.tier-flip.tier-flip-all { width: auto; padding: 6px 18px; }
@supports not (grid-template-rows: subgrid) {
  .tier-card { display: flex; flex-direction: column; gap: 8px; }
  
  .tier-turn { display: grid; }
  .tier-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; }
  .tier-strut { display: none; }
  .tier-face > .tier-actions { margin-top: auto; }
  .tier-face > .tier-back-body { flex: 1 1 auto; }
}


.tier-card:nth-child(3) .tier-face {
  border-color: transparent;
  background:
    linear-gradient(rgb(var(--room-3-rgb)), rgb(var(--room-3-rgb))) padding-box,
    linear-gradient(155deg, rgba(var(--gold-6-rgb), 0.309) 0%, rgba(var(--bronze-6-rgb), 0.135) 30%,
      rgba(var(--gold-9-rgb), 0.238) 50%, rgba(var(--bronze-6-rgb), 0.129) 70%,
      rgba(var(--gold-6-rgb), 0.269) 100%) border-box;
}

.tier-card-audience { font-size: calc(10 * var(--lu)); font-weight: 600; letter-spacing: 0.16em;
  line-height: calc(16 * var(--lu)); text-transform: uppercase; color: var(--ink-dim); }
.tier-card-label { font-family: var(--disp); font-size: calc(15 * var(--lu)); font-weight: 600;
  letter-spacing: 0.01em; line-height: calc(20 * var(--lu)); }
.tier-card-price { font-family: var(--disp); font-size: calc(30 * var(--lu)); font-weight: 600; letter-spacing: -0.02em; line-height: calc(32 * var(--lu)); }

.tier-row { font-size: calc(12.5 * var(--lu)); line-height: calc(20 * var(--lu)); color: var(--ink); }

.tier-row.is-absent { color: var(--ink-dim); }

.tier-card .quiet-link { align-self: start; }


.tier-strip { width: min(calc(648 * var(--lu)), calc(100vw - 52px)); margin: calc(24px - 34 * var(--lu)) 0 0; margin-left: 50%;
  translate: -50% 0; font-size: calc(12 * var(--lu)); line-height: calc(20 * var(--lu)); color: var(--ink-dim); text-align: center; }



:is(#track-list, .tape-page .tracks) { gap: 0; }
.tape-group { display: grid; grid-template-columns: calc(134 * var(--lu)) minmax(0, 1fr); column-gap: calc(16 * var(--lu));
  align-items: start; width: 100%; --acc: var(--light); --acc-rgb: var(--room-12-rgb); }
.tape-group--nocover { grid-template-columns: minmax(0, 1fr); }
.tape-group.group-empty { display: none; }


.group-cover-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--lu)); }
.group-cover { position: relative; width: calc(134 * var(--lu)); height: calc(134 * var(--lu)); flex: none; margin-top: calc(2 * var(--lu)); padding: 0;
  border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; cursor: pointer;
  background: none; display: block; }
.group-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-cover:hover { border-color: rgba(var(--acc-rgb), 0.6); }

.group-cover-more { position: absolute; left: 0; right: 0; bottom: 0; height: calc(20 * var(--lu));
  
  
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  gap: calc(8em / 14);
  padding-left: calc(16em / 14);
  
  background: linear-gradient(to top, rgba(var(--room-3-rgb), 0.97) 0%, rgba(var(--room-3-rgb), 0.94) 72%, rgba(var(--room-3-rgb), 0.55) 100%);
  color: var(--ink-dim); font-family: var(--disp); font-size: calc(14 * var(--lu));
  font-weight: 400; letter-spacing: 0.02em; white-space: nowrap;  
  transition: color 0.18s ease; }
.group-cover:hover .group-cover-more { color: var(--ink); }
.gcm-caret { width: calc(11 * var(--lu)); height: calc(11 * var(--lu)); flex: none; transition: transform 0.18s ease; }

.group-cover-more > .gcm-more, .group-cover-more > .gcm-less { grid-area: 1 / 1; }
.group-cover-more > .gcm-caret { grid-area: 1 / 2; }
.gcm-less { visibility: hidden; }
.group-cover[aria-expanded="true"] .gcm-more { visibility: hidden; }
.group-cover[aria-expanded="true"] .gcm-less { visibility: visible; }
.group-cover[aria-expanded="true"] .gcm-caret { transform: rotate(180deg); }

.group-cover:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.85); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gcm-caret { transition: none; } }


.group-cover-link { display: none; font-size: calc(9.5 * var(--lu)); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none; text-align: center; }
.group-cover-link:hover { color: var(--ink); }


.gcl-lockup { position: relative; display: inline-block; }
.gcl-words  { display: block; text-align: left; line-height: 1.25; }
.gcl-arrow  { position: absolute; left: 100%; top: 50%;
              transform: translateY(-50%); margin-left: 0.3em; }
.tape-group.is-open .group-cover-link { display: inline-block; }



@media (min-width: 521px) and (max-width: 720px) {
  #track-list .group-cover-wrap {
    display: grid;
    grid-template-rows: calc(66 * var(--lu) + 1px) calc(66 * var(--lu) + 1px);
    align-items: center; justify-items: center; gap: 0;
  }
  #track-list .group-cover-link { display: grid; place-items: center; }
}

@media (min-width: 721px) {
  
  .tape-group.is-open .group-cover-wrap { gap: 0; }
  .tape-group.is-open .group-cover-link {
    display: grid; place-items: center;
    min-height: calc(66 * var(--lu) + 1px);
    margin-top: calc(-2 * var(--lu));
    font-size: 16px;
  }
}
.group-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }

.tape-group:first-child .group-rows .track-row:first-child { border-top: 1px solid var(--hair); }

.group-rows { border-radius: 0 6px 6px 0;
  background: radial-gradient(130% 170% at 5% -20%, rgba(var(--acc-rgb), 0.11), rgba(var(--acc-rgb), 0) 62%); }

#track-list .track-row.is-pick { border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.13), rgba(var(--acc-rgb), 0) 58%);
  box-shadow: inset 3px 0 0 rgba(var(--acc-rgb), 0.85); }

.track-row.row-paged { display: none; }
.tape-group.is-open .track-row.row-paged,
#track-list.is-expanded .track-row.row-paged,
#track-list.is-searching .track-row.row-paged { display: flex; }


.show-more { align-self: center; padding: calc(10 * var(--lu)) calc(22 * var(--lu)); border-radius: 4px;
  border: 1px solid var(--hair); background: rgba(var(--room-3-rgb), 0.5); color: var(--ink-dim);
  font-family: var(--disp); font-size: calc(12 * var(--lu)); letter-spacing: 0.02em; 
  cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; }
.show-more:hover { color: var(--ink); border-color: rgba(var(--light-rgb), 0.6); }


.tape-cover-wrap { position: relative; display: flex; justify-content: center; width: 100%; }
.tape-cover-wrap::before { content: ""; position: absolute; left: 22%; right: 22%; top: -8%;
  height: 78%; background: radial-gradient(60% 80% at 50% 32%, rgba(var(--acc-rgb), 0.16), transparent 70%);
  filter: blur(26px); z-index: 0; pointer-events: none; }

.tape-cover { position: relative; z-index: 1; width: calc(15 * var(--fit));
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(0.875 * var(--fit));
  box-shadow: 0 calc(1.125 * var(--fit)) calc(2.875 * var(--fit)) rgba(var(--neutral-1-rgb), 0.5); display: block; }

.group-cover picture, .tape-cover-wrap picture { display: contents; }
.tape-cover { height: auto; }


.tape-page .track-row { border-radius: 6px; background: rgba(var(--acc-rgb), 0.08);
  padding-inline-end: calc(var(--row-act-size, calc(32 * var(--lu))) * 0.42);
  transition: box-shadow 0.18s ease; }
.tape-page .track-row:hover { box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.4); }

@media (max-width: 720px) {
  
  .tape-title { font-size: calc(3.4 * var(--fit)); min-height: calc(calc(3.4 * var(--fit)) * 0.95 * 2); }
  .tape-cover { width: calc(10.4 * var(--fit)); }
  .tape-group { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; }
  .group-cover { width: 52px; height: 52px; }
  
  .group-cover-more { height: 14px; gap: 0; justify-content: center; padding-left: 0; }  
  .gcm-more, .gcm-less { display: none; }
  .group-cover[aria-expanded="true"] .gcm-less { display: none; }
  .gcm-caret { width: 10px; height: 10px; }
}


.cat-filter { width: 100%; padding: calc(12 * var(--lu)) calc(16 * var(--lu)); border-radius: 4px; border: 1px solid var(--hair);
  background: rgba(var(--room-3-rgb), 0.5); color: var(--ink); font-family: var(--sans); font-size: calc(14 * var(--lu)); }
.cat-filter::placeholder { color: var(--ink-dim); }
.cat-filter:focus { outline: none; border-color: rgba(var(--light-rgb), 0.7); }
.cat-empty { margin: 0; text-align: center; font-size: calc(13 * var(--lu)); color: var(--ink-dim); }


.row-actions { display: flex; align-items: center; gap: calc(6 * var(--lu)); flex: 0 0 auto; }


.row-act { display: grid; place-items: center;
  
  width: var(--row-act-size, calc(32 * var(--lu)));
  height: var(--row-act-size, calc(32 * var(--lu))); border-radius: 50%;
  --ring: transparent; border: 1px solid var(--ring); background: rgba(var(--neutral-1-rgb), 0.22);
  color: var(--ink-dim); cursor: pointer; text-decoration: none; }
.row-act svg:not(.ring) { width: calc(17 * var(--lu)); height: calc(17 * var(--lu)); }
.row-act:hover { --ring: var(--hair); }

.row-act--dl { color: rgba(var(--cyan-7-rgb), 0.9); }
.row-act--dl:hover { color: var(--cyan-10); --ring: rgba(var(--cyan-rgb), 0.4); }
.row-act--share { color: rgba(var(--rose-7-rgb), 0.9); }
.row-act--share:hover { color: var(--rose-hi); --ring: rgba(var(--rose-rgb), 0.4); }
.row-act--license { color: rgba(var(--gold-7-rgb), 0.92); }
.row-act--license:hover { color: var(--gold-10); --ring: rgba(var(--gold-rgb), 0.5); }

.row-act--license { position: relative; }
.row-act--license svg:not(.ring) { stroke-width: calc(1.8px * 56.048 / 24 / 1.05);
  
  position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }

.row-act--license.is-picking { color: var(--gold-10); --ring: rgba(var(--gold-rgb), 0.5); }


.track-row.has-quick { position: relative; }

.track-row.has-quick .row-play { position: relative; z-index: 3; }
@media (max-width: 449px) { .track-row.is-covered .row-play { opacity: 0; visibility: hidden; } }

#track-list .track-row.is-pick > .quick { left: 3px; }
.quick { position: absolute; inset: 0; z-index: 2; container: quick / size; --lu: calc(400px / 380);
  
  --q-add: clamp(41px, min(32.5vw - 92.7px, max(102px, 11.33vw + 20.3px)), 137px);
  --q-main: clamp(188px, min(67.5vw - 117.3px, max(287px, 43.04vw - 23.3px)), 420px);
  --q-box: clamp(38px, 2.27vw + 21.6px, 45px); }

.track-row :is(.row-title, .row-specs, .row-act) { transition: opacity 120ms ease-out 60ms, visibility 0s; }
.track-row.is-covered :is(.row-title, .row-specs, .row-act) { opacity: 0; visibility: hidden;
  transition: opacity 90ms ease-in, visibility 0s linear 90ms; }
.quick-in { height: 100%; display: flex; align-items: center; gap: calc(12 * var(--lu));
  padding: 0 calc(12 * var(--lu)) 0 calc(45 * var(--u) + 8px);
  border: 1px solid transparent; border-radius: 6px; background: rgba(var(--neutral-5-rgb), 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color 120ms ease-in, border-color 120ms ease-in,
              -webkit-backdrop-filter 120ms ease-in, backdrop-filter 120ms ease-in; }
#track-list .track-row.is-pick > .quick > .quick-in { border-radius: 0 6px 6px 0; }

.quick.is-open .quick-in { border-color: var(--hair); background: rgba(var(--room-3-rgb), 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08);
  transition: background-color 200ms cubic-bezier(0.16, 0.84, 0.44, 1), border-color 200ms cubic-bezier(0.16, 0.84, 0.44, 1),
              -webkit-backdrop-filter 200ms cubic-bezier(0.16, 0.84, 0.44, 1), backdrop-filter 200ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.quick-main, .quick-add, .quick-x { opacity: 0; transition: opacity 70ms ease-in, background-color 0.16s ease, color 0.16s ease; }
.quick.is-open :is(.quick-main, .quick-add, .quick-x) { opacity: 1;
  transition: opacity 150ms cubic-bezier(0.16, 0.84, 0.44, 1) 70ms, background-color 0.16s ease, color 0.16s ease; }


.quick-x { position: absolute; top: 1px; right: 1px; z-index: 1; display: grid; place-items: center;
  width: clamp(12px, 50cqh - 20px, 17px); height: clamp(12px, 50cqh - 20px, 17px); padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-dim); cursor: pointer; }

.quick-x::after { content: ""; position: absolute; inset: -2px -2px -4px -12px; }
.quick-x svg { width: 72%; height: 72%; }
@media (hover: hover) { .quick-x:hover { color: var(--ink); background: rgba(var(--light-rgb), 0.08); } }
.quick-x:active { color: var(--ink); background: rgba(var(--light-rgb), 0.12); }
.quick-x:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 1px; }


.quick-main { flex: none; width: var(--q-main); display: flex; flex-direction: column; gap: 3px; }
.quick-opts { display: flex; gap: 6px; height: 44px; }
.quick-opt { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; container: opt / inline-size; cursor: pointer;
  font-family: var(--sans); color: var(--ink); background: transparent;
  border: 1px solid var(--hair); border-radius: 4px;
  transition: border-color 0.18s ease, background-color 0.18s ease; }
@media (hover: hover) { .quick-opt:hover { border-color: var(--ink-dim); } }
.quick-opt:active { background: rgba(var(--light-rgb), 0.12); }
.quick-opt.is-on { border-color: var(--ink); background: rgba(var(--light-rgb), 0.07); }

.quick-opt-in { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; height: 100%;
  padding: 0 clamp(3px, 5cqi, 7px); text-align: left; }
.quick-name { font-size: clamp(10.5px, 3.24cqi + 8.55px, 13.16px); font-weight: 600; line-height: 1.08; white-space: nowrap; }
.quick-short { display: none; }
.quick-price { font-family: var(--disp); font-size: clamp(12px, 2.9cqi + 9.6px, 13.7px); font-weight: 600; line-height: 1.08;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.quick-line { font-size: clamp(10px, 2.4cqi + 8.5px, 12px); line-height: 1.08; color: var(--ink-dim); white-space: nowrap; }
.quick-line--long { display: none; }
@container opt (max-width: 89px) {
  .quick-long { display: none; }
  .quick-short { display: inline; }
}
@container opt (min-width: 132px) {
  .quick-opt-in { grid-template-columns: 1fr auto; column-gap: 4px; row-gap: 2px; }
  .quick-name, .quick-price, .quick-line { line-height: 1.2; }
  .quick-price { text-align: right; }
  .quick-line { grid-column: 1 / -1; font-size: 11.5px; }
  .quick-line--short { display: none; }
  .quick-line--long { display: block; }
}


.quick-help { margin: 0; font-size: clamp(10.5px, 0.55cqi + 8.9px, 12.6px); line-height: 1.05; white-space: nowrap; color: var(--ink-dim); }
.quick-more { color: var(--ink); text-decoration: none; text-underline-offset: 0.229em; }
@media (hover: hover) { .quick-more:hover { text-decoration-line: underline; } }
.quick-more:active { text-decoration-line: underline; }


.quick-add { position: relative; flex: none; margin: 0 0 0 auto; display: flex; align-items: center;
  width: var(--q-add); height: calc(36 * var(--lu));
  padding: 0 0 0 clamp(8px, 2.17vw - 7.6px, 14.7px);
  border-radius: 4px; background: var(--cta); color: var(--cta-ink);
  font-family: var(--disp); font-size: clamp(11px, 0.874vw + 4.7px, 13.68px); font-weight: 600; white-space: nowrap;
  text-decoration: none; cursor: pointer; }
@media (hover: hover) { .quick-add:hover { filter: brightness(0.94); } }
.quick-add:active { filter: brightness(0.86); }

.quick-add::before { content: ""; position: absolute; top: -6px; bottom: -6px; width: 1px;
  left: calc(-1 * clamp(10px, 1.5vw, 20px)); background: var(--hair); }
@media (max-width: 389px) { .quick-add::before { display: none; } }
.quick-add > svg { position: absolute; top: 50%; right: 0; margin: 0; width: var(--q-box); height: var(--q-box);
  translate: 0 -50%; stroke-width: calc(1.8px * 56.048 / 24 / 1.05); }
.quick-opt:focus-visible, .quick-more:focus-visible, .quick-add:focus-visible {
  outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px; }


.quick-form { margin: 0; }
.quick-email { display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--hair); border-radius: 4px; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 14px; transition: border-color 0.18s ease; }

@media (pointer: coarse) { .quick-email { font-size: 16px; } }
.quick-email::placeholder { color: var(--ink-dim); }
@media (hover: hover) { .quick-email:hover { border-color: var(--ink-dim); } }
.quick-email:focus { outline: none; border-color: var(--ink); }
.quick-email:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 100px var(--room-3) inset; }
button.quick-add { border: 0; text-align: left; }
.quick-add.is-busy { filter: brightness(0.7); cursor: progress; }

.quick-act > svg { width: calc(var(--q-box) * 0.53); height: calc(var(--q-box) * 0.53);
  right: calc(var(--q-box) * 0.235); stroke-width: 1.8; }

.quick-trade { display: none; }
@media (min-width: 915px) {
  .quick-trade { display: inline; }
  .quick-trade--short { display: none; }
}

.quick-check { position: absolute; right: -1px; bottom: calc(100% + 6px); z-index: 4; pointer-events: none; border-radius: 6px; }
.quick-check.is-on { padding: 6px; border: 1px solid var(--hair); background: var(--room-3); pointer-events: auto; }


.quick-share { display: flex; gap: 6px; height: 44px; }
.quick-start { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 10px; border: 1px solid var(--hair); border-radius: 4px; color: var(--ink-dim);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
@media (hover: hover) { .quick-start:hover { border-color: var(--ink-dim); } }
.quick-start.is-on { border-color: var(--ink); background: rgba(var(--light-rgb), 0.07); color: var(--ink); }
.quick-start-l { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13.16px; font-weight: 600;
  white-space: nowrap; cursor: pointer; }
.quick-box { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--ink); color-scheme: dark; cursor: pointer; }
.quick-time { flex: none; box-sizing: content-box; width: 5ch; padding: 3px 0; border: 0; border-bottom: 1px solid var(--hair);
  border-radius: 0; background: transparent; color: inherit; font-family: var(--disp); font-size: 13.7px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: center; }
@media (pointer: coarse) { .quick-time { font-size: 16px; } }
.quick-time:focus { outline: none; border-bottom-color: var(--ink); color: var(--ink); }
.quick-ch { flex: none; display: grid; place-items: center; width: 44px; height: 100%; box-sizing: border-box;
  border: 1px solid var(--hair); border-radius: 4px; color: var(--ink); transition: border-color 0.18s ease, background-color 0.18s ease; }
.quick-ch svg { width: 18px; height: 18px; }
@media (hover: hover) { .quick-ch:hover { border-color: var(--ink-dim); } }
.quick-ch:active { background: rgba(var(--light-rgb), 0.12); }
.quick-link { display: block; overflow: hidden; text-overflow: ellipsis; }
.quick-tick { display: none; }
.quick-add.is-done > svg { display: none; }
.quick-add.is-done > .quick-tick { display: block; }
.quick-ch:focus-visible, .quick-box:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6); outline-offset: 2px; }


@media (max-width: 598px) {
  .quick-add { padding: 0; }
  .quick-add .cta-label { display: none; }
  .quick-add > svg { right: calc((var(--q-add) - var(--q-box)) / 2); }
  .quick-act > svg { right: calc((var(--q-add) - var(--q-box) * 0.53) / 2); }
}

@media (max-width: 449px) {
  .quick-in { gap: 4px; padding: 0 6px 0 5px; }
  .quick-opts { gap: 4px; }
}

@container quick (max-width: 249px) { .quick-ask { display: none; } }

@media (max-width: 355px) {
  .quick-main { flex: 1 1 0; min-width: 0; width: auto; }
  .quick-opts { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .quick-opts::-webkit-scrollbar { display: none; }
  .quick-opt { flex: 0 0 60px; scroll-snap-align: start; }
}
@media (prefers-reduced-transparency: reduce) {
  .quick.is-open .quick-in { background: var(--room-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .track-row :is(.row-title, .row-specs, .row-act), .track-row.is-covered :is(.row-title, .row-specs, .row-act),
  .quick-in, .quick.is-open .quick-in, .quick-main, .quick-add, .quick-x,
  .quick.is-open :is(.quick-main, .quick-add, .quick-x) { transition: none; }
}


.social-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink-dim); --ring: transparent; border: 1px solid var(--ring); }
.social-ic svg:not(.ring) { width: 17px; height: 17px; }
.social-ic:hover { color: var(--ink); --ring: var(--hair); }

.footer-socials { display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-top: 14px; }
.footer-socials .social-ic { width: 28px; height: 28px; }
.footer-socials .social-ic svg:not(.ring) { width: 15px; height: 15px; }


.content ul.releases li { padding-left: 0; display: flex; align-items: baseline; gap: 12px; }
.content ul.releases li::before { display: none; }
.rel-meta { font-size: var(--t-04); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.blog-cta { align-self: flex-start; }
.contact-line { font-size: var(--t-11); }


.nl-error { margin: 0; font-size: var(--t-09); color: var(--alarm-11); }


html { scroll-behavior: smooth; }

html { scrollbar-gutter: stable; }

html.sb-nav { scroll-behavior: auto !important; }



.stage--fit {
  --fit: clamp(11px,
    min(3.45vw,
        calc((100vw - 32px) / 20)), 19px);
  font-size: var(--fit);
  --t-01: calc(0.59375 * var(--fit));
  --t-02: calc(0.625 * var(--fit));
  --t-03: calc(0.65 * var(--fit));
  --t-04: calc(0.65625 * var(--fit));
  --t-05: calc(0.6875 * var(--fit));
  --t-06: calc(0.71875 * var(--fit));
  --t-07: calc(0.75 * var(--fit));
  --t-08: calc(0.78125 * var(--fit));
  --t-09: calc(0.8125 * var(--fit));
  --t-10: calc(0.84375 * var(--fit));
  --t-11: calc(0.875 * var(--fit));
  --t-12: calc(0.91875 * var(--fit));
  --t-13: calc(0.9375 * var(--fit));
  --t-14: calc(1 * var(--fit));
  --t-15: calc(1.0625 * var(--fit));
  --t-16: calc(1.1875 * var(--fit));
  --t-17: calc(1.25 * var(--fit));
  --t-18: calc(1.6625 * var(--fit));
  --t-19: calc(1.75 * var(--fit));
  --t-20: calc(1.875 * var(--fit));
  --t-21: calc(2.125 * var(--fit));
}
:root {
  --dock-real: max(var(--dock-h), 140px);
  --screen: calc(100dvh - var(--dock-real));
}

.stage {
  --head: calc(3.6 * var(--fit));       
  
  --hinge: calc(16 * var(--fit));
  
  --footer-h: calc(8 * var(--fit));
  --sec-gap: calc(1.4 * var(--fit));
}



body:has(.middle--beat) .stage { padding: calc(2.1 * var(--fit)) calc(1.6 * var(--fit)) calc(var(--dock-real) + calc(0.5 * var(--fit))); }
body:has(.middle--beat) .topbar .wordmark { font-size: calc(1.19 * var(--fit)); }
body:has(.middle--beat) .footer { margin-top: calc(2.5 * var(--fit)); padding: calc(1.12 * var(--fit)) 0 calc(0.5 * var(--fit)); }
body:has(.middle--beat) .footer-nav { gap: calc(1.37 * var(--fit)); }
body:has(.middle--beat) .footer-nav a { font-size: calc(0.66 * var(--fit)); }
body:has(.middle--beat) .footer-socials { gap: calc(0.5 * var(--fit)); margin-top: calc(0.87 * var(--fit)); }
body:has(.middle--beat) .footer-socials .social-ic { width: calc(1.75 * var(--fit)); height: calc(1.75 * var(--fit)); }
body:has(.middle--beat) .footer-socials .social-ic svg:not(.ring) { width: calc(0.94 * var(--fit)); height: calc(0.94 * var(--fit)); }

.middle--beat { justify-content: flex-start; gap: 0; max-width: calc(45 * var(--fit)); }
.sec { width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: var(--sec-gap); text-align: center; }

.sec--hero { min-height: calc(var(--screen) - var(--head));
  justify-content: center; padding-bottom: calc(1 * var(--fit)); }
.sec--hero .title, .sec--hero #logo { margin-top: auto; }

.sec--license { min-height: calc(var(--screen) - var(--hinge));
  justify-content: center; scroll-margin-top: var(--hinge); }

.sec--outro { min-height: calc(var(--screen) - var(--footer-h));
  justify-content: center; scroll-margin-top: 0; }



.middle--beat .title { height: calc(6.75 * var(--fit)); min-height: 0; line-height: 0.95;
  font-size: calc(var(--title-scale, 1) * calc(4.4 * var(--fit))); }
.middle--beat .specs { font-size: calc(0.78 * var(--fit)); gap: calc(1.37 * var(--fit)); }
.middle--beat .specs .spec + .spec::before { left: calc(-0.75 * var(--fit)); width: calc(0.25 * var(--fit)); height: calc(0.25 * var(--fit)); }
.middle--beat .blurb { font-size: calc(0.87 * var(--fit)); max-width: calc(32.5 * var(--fit)); }

.middle--beat #logo { width: calc(11 * var(--fit)); }
.middle--beat .hero-actions { gap: calc(1.6 * var(--fit)); }
.middle--beat .hero-play,
.middle--beat .hero-act { width: calc(3 * var(--fit)); height: calc(3 * var(--fit)); }
.middle--beat .hero-play, .middle--beat .hero-act { --hero-icon: calc(1.25 * var(--fit)); }
.middle--beat .hero-play svg:not(.ring),
.middle--beat .hero-act svg:not(.ring) { width: var(--hero-icon); height: var(--hero-icon); }
.middle--beat .tape-cta--prominent { font-size: calc(0.65 * var(--fit)); padding: calc(0.55 * var(--fit)) calc(1 * var(--fit)); }
.middle--beat .tiers { width: min(calc(27.5 * var(--fit)), 100%); gap: calc(0.5 * var(--fit)); }
.middle--beat .tier { padding: calc(0.75 * var(--fit)) calc(1 * var(--fit)); gap: calc(0.87 * var(--fit)); }
.middle--beat .tier .tier-label { font-size: calc(0.81 * var(--fit)); }
.middle--beat .tier .tier-delivers { font-size: calc(0.65 * var(--fit)); }
.middle--beat .tier .tier-price { font-size: calc(1 * var(--fit)); }
.middle--beat .cta { padding: calc(0.94 * var(--fit)) calc(1.87 * var(--fit)); font-size: calc(0.81 * var(--fit)); gap: calc(0.75 * var(--fit)); }
.middle--beat .cta .arrow { width: calc(0.94 * var(--fit)); height: calc(0.94 * var(--fit)); }
.middle--beat .microcopy { font-size: calc(0.69 * var(--fit)); }
.middle--beat .accept-copy { margin-top: calc(-0.5 * var(--fit)); }
.middle--beat .nl-gate { width: min(calc(27.5 * var(--fit)), 100%); margin-top: 0; }
.middle--beat .nl-summary { padding: calc(0.75 * var(--fit)) calc(1 * var(--fit)); font-size: calc(0.75 * var(--fit)); }
.middle--beat .nl-reveal { padding: 0 calc(1 * var(--fit)) calc(1 * var(--fit)); }
.middle--beat .nl-email { padding: calc(0.81 * var(--fit)) calc(1 * var(--fit)); font-size: calc(0.87 * var(--fit)); }
.middle--beat .nl-submit { padding: calc(0.81 * var(--fit)) calc(1.37 * var(--fit)); }
.middle--beat .nl-trade { font-size: calc(0.69 * var(--fit)); }
.middle--beat .tape-cta { font-size: calc(0.75 * var(--fit)); }
.hero-actions { display: flex; align-items: center; justify-content: center; }

.middle--beat .blurb { position: relative; }
#hero-viz { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(22.5 * var(--fit)), 100%); height: calc(6 * var(--fit)); z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 700ms ease; }
body.sb-playing #hero-viz { opacity: 0.2; } 
@media (prefers-reduced-motion: reduce) { #hero-viz { display: none; } }
.hero-play {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); background: rgba(var(--light-rgb), 0.05);
  --ring: rgba(var(--light-rgb), 0.6); border: 1px solid var(--ring);
  animation: hero-breathe 3.4s ease-in-out infinite;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hero-play:hover { --ring: rgba(var(--light-rgb), 0.95); background: rgba(var(--light-rgb), 0.08); }
.hero-play:active { transform: scale(0.96); }

.hero-play { --hero-icon: 20px; }
.hero-play svg:not(.ring) { width: var(--hero-icon); height: var(--hero-icon); }

.hero-play .icon-play { margin-left: calc(var(--hero-icon) * 0.0842); }
.hero-play .icon-pause { display: none; }

body.sb-playing .hero-play.is-current .icon-play { display: none; }
body.sb-playing .hero-play.is-current .icon-pause { display: block; }
body.sb-playing .hero-play.is-current { animation: none; }
@keyframes hero-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--light-rgb), 0.016); }
  50% { box-shadow: 0 0 18px 4px rgba(var(--light-rgb), 0.04); }
}
.hero-act { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; --ring: currentColor; border: 1px solid var(--ring); background: rgba(var(--room-4-rgb), 0.5); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.hero-act:hover { transform: translateY(-2px); }
.hero-act svg:not(.ring) { width: 20px; height: 20px; }
.hero-act--dl { color: var(--cyan-hi); --ring: rgba(var(--cyan-rgb), 0.45); }
.hero-act--dl:hover { --ring: rgba(var(--cyan-rgb), 0.8); }
.hero-act--share { color: var(--rose-hi); --ring: rgba(var(--rose-rgb), 0.45); }
.hero-act--share:hover { --ring: rgba(var(--rose-rgb), 0.8); }
.hero-act--buy { color: var(--gold-hi); --ring: rgba(var(--gold-rgb), 0.42); }
.hero-act--buy:hover { --ring: rgba(var(--gold-rgb), 0.7); }


.dl-store-link { margin: 0; }



.listing.tape-page {
  
  --lu: var(--u);
  
  --t-16: 19px;
  --t-05: 11px;
  --t-02: 10px;
  
  padding-top: calc(1.5 * var(--fit));
  gap: calc(1.625 * var(--fit));
}

.tape-page .tape-cover-wrap::before { filter: blur(calc(1.625 * var(--fit))); }
.tape-page .blurb { font-size: calc(0.875 * var(--fit)); max-width: calc(32.5 * var(--fit)); }

.tape-page .tape-cta--prominent {
  font-size: calc(0.65 * var(--fit));
  padding: calc(0.55 * var(--fit)) calc(1 * var(--fit));
  border-radius: calc(0.25 * var(--fit));
}





.tape-page .cta {
  font-size: calc(0.8125 * var(--fit));
  gap: calc(0.75 * var(--fit));
  padding: calc(0.9375 * var(--fit)) calc(1.875 * var(--fit));
  border-radius: calc(0.25 * var(--fit));
}
.tape-page .cta .arrow { width: calc(0.9375 * var(--fit)); height: calc(0.9375 * var(--fit)); }
.tape-page .microcopy { font-size: calc(0.6875 * var(--fit)); }

.tape-page .quiet { margin-top: calc(0.25 * var(--fit)); }
.tape-page .quiet-link { font-size: calc(0.71875 * var(--fit)); }







:root {
  --pic-top: calc(var(--strip-h) - var(--hairline-w));   
  --keep-w: 0.4906;   
  --waterline: 0.781;   
  --wetline: 0.8027;    
  --pic-h: min(100vw / var(--keep-w), (100svh - var(--strip-h) - var(--pic-top)) / var(--wetline));   
  --pic-core-w: calc(var(--pic-h) * 2752 / 1504);   
  --pic-w: calc(var(--pic-h) * 3910 / 1504);        
}
@supports not (height: 1svh) { :root { --pic-h: min(100vw / var(--keep-w), (100vh - var(--strip-h) - var(--pic-top)) / var(--wetline)); } }




.room {
  --feather: 6%;
  --side-fade: 19.03%;
  background-color: var(--neutral-1);
}

.room > .cave { position: absolute; z-index: -1; top: var(--pic-top); left: calc(50% - var(--pic-w) / 2);
  width: var(--pic-w); height: var(--pic-h); max-width: none; }
.room::before {
  content: ""; position: absolute; inset: 0; forced-color-adjust: none;
  background-image:
    linear-gradient(90deg,
      rgba(var(--neutral-1-rgb),1.0000) calc(var(--side-fade) * 0.0),
      rgba(var(--neutral-1-rgb),0.9949) calc(var(--side-fade) * 0.0833),
      rgba(var(--neutral-1-rgb),0.9645) calc(var(--side-fade) * 0.1667),
      rgba(var(--neutral-1-rgb),0.8965) calc(var(--side-fade) * 0.25),
      rgba(var(--neutral-1-rgb),0.7901) calc(var(--side-fade) * 0.3333),
      rgba(var(--neutral-1-rgb),0.6534) calc(var(--side-fade) * 0.4167),
      rgba(var(--neutral-1-rgb),0.5000) calc(var(--side-fade) * 0.5),
      rgba(var(--neutral-1-rgb),0.3466) calc(var(--side-fade) * 0.5833),
      rgba(var(--neutral-1-rgb),0.2099) calc(var(--side-fade) * 0.6667),
      rgba(var(--neutral-1-rgb),0.1035) calc(var(--side-fade) * 0.75),
      rgba(var(--neutral-1-rgb),0.0355) calc(var(--side-fade) * 0.8333),
      rgba(var(--neutral-1-rgb),0.0051) calc(var(--side-fade) * 0.9167),
      rgba(var(--neutral-1-rgb),0.0000) calc(var(--side-fade) * 1.0),
      rgba(var(--neutral-1-rgb),0.0000) calc(100% - var(--side-fade) * 1.0),
      rgba(var(--neutral-1-rgb),0.0051) calc(100% - var(--side-fade) * 0.9167),
      rgba(var(--neutral-1-rgb),0.0355) calc(100% - var(--side-fade) * 0.8333),
      rgba(var(--neutral-1-rgb),0.1035) calc(100% - var(--side-fade) * 0.75),
      rgba(var(--neutral-1-rgb),0.2099) calc(100% - var(--side-fade) * 0.6667),
      rgba(var(--neutral-1-rgb),0.3466) calc(100% - var(--side-fade) * 0.5833),
      rgba(var(--neutral-1-rgb),0.5000) calc(100% - var(--side-fade) * 0.5),
      rgba(var(--neutral-1-rgb),0.6534) calc(100% - var(--side-fade) * 0.4167),
      rgba(var(--neutral-1-rgb),0.7901) calc(100% - var(--side-fade) * 0.3333),
      rgba(var(--neutral-1-rgb),0.8965) calc(100% - var(--side-fade) * 0.25),
      rgba(var(--neutral-1-rgb),0.9645) calc(100% - var(--side-fade) * 0.1667),
      rgba(var(--neutral-1-rgb),0.9949) calc(100% - var(--side-fade) * 0.0833),
      rgba(var(--neutral-1-rgb),1.0000) calc(100% - var(--side-fade) * 0.0)),
    linear-gradient(
      rgba(var(--neutral-1-rgb),0.0000) calc(100% - var(--feather) * 1.0),
      rgba(var(--neutral-1-rgb),0.0051) calc(100% - var(--feather) * 0.9167),
      rgba(var(--neutral-1-rgb),0.0355) calc(100% - var(--feather) * 0.8333),
      rgba(var(--neutral-1-rgb),0.1035) calc(100% - var(--feather) * 0.75),
      rgba(var(--neutral-1-rgb),0.2099) calc(100% - var(--feather) * 0.6667),
      rgba(var(--neutral-1-rgb),0.3466) calc(100% - var(--feather) * 0.5833),
      rgba(var(--neutral-1-rgb),0.5000) calc(100% - var(--feather) * 0.5),
      rgba(var(--neutral-1-rgb),0.6534) calc(100% - var(--feather) * 0.4167),
      rgba(var(--neutral-1-rgb),0.7901) calc(100% - var(--feather) * 0.3333),
      rgba(var(--neutral-1-rgb),0.8965) calc(100% - var(--feather) * 0.25),
      rgba(var(--neutral-1-rgb),0.9645) calc(100% - var(--feather) * 0.1667),
      rgba(var(--neutral-1-rgb),0.9949) calc(100% - var(--feather) * 0.0833),
      rgba(var(--neutral-1-rgb),1.0000) calc(100% - var(--feather) * 0.0)),
    radial-gradient(76% 50% at 50% 1%, rgba(var(--light-rgb), 0.10) 0%, transparent 60%),
    linear-gradient(rgba(var(--room-2-rgb), 0.58), rgba(var(--room-2-rgb), 0.72));
  
  background-size: var(--pic-w) var(--pic-h), var(--pic-w) var(--pic-h), var(--pic-core-w) var(--pic-h),
    var(--pic-w) var(--pic-h);
  background-position: 50% var(--pic-top);
  background-repeat: no-repeat;
}


.checkout { width: 100%; max-width: 440px; display: flex; flex-direction: column;
  align-items: stretch; gap: 22px; text-align: left; }
.checkout .section-label { text-align: left; }

.co-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.co-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.co-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-item-title { font-family: var(--disp); font-size: var(--t-13); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); }
.co-item-tier { font-size: var(--t-04); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.co-item-tier:hover { color: var(--ink); border-bottom-color: var(--hair); }
.co-item-price { font-family: var(--disp); font-size: var(--t-13); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.co-item-remove { width: 26px; height: 26px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--hair); border-radius: 4px; background: transparent;
  color: var(--ink-dim); font-size: var(--t-13); line-height: 1; cursor: pointer; }
.co-item-remove:hover { color: var(--ink); border-color: var(--ink-dim); }
.co-total { display: flex; justify-content: space-between; align-items: baseline;
  margin: 12px 0 0; font-family: var(--disp); font-size: var(--t-16); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.co-empty { margin: 0; font-size: var(--t-11); color: var(--ink-dim); }

.co-form, .co-pay { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-label { font-size: var(--t-04); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); }
.co-input { width: 100%; padding: 13px 16px; border-radius: 4px; border: 1px solid var(--hair);
  background: rgba(var(--room-3-rgb), 0.5); color: var(--ink); font-family: var(--sans); font-size: var(--t-11); }
.co-input:focus { outline: none; border-color: rgba(var(--gold-rgb), 0.6); }


.co-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: var(--t-09); line-height: 1.45; color: var(--ink-dim); cursor: pointer; }

.co-check input { width: 17px; height: 17px; margin: 0.075em 0 0;
  cursor: pointer; }
.co-check:hover { color: var(--ink); }

.co-error { margin: 0; font-size: var(--t-09); line-height: 1.45; color: var(--rose); }
.co-orderline { margin: 0; font-size: var(--t-07); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.co-back { align-self: flex-start; padding: 0; border: 0; background: transparent;
  font-family: var(--sans); font-size: var(--t-08); color: var(--ink-dim); cursor: pointer; }
.co-back:hover { color: var(--ink); }
.cta.is-busy { opacity: 0.6; pointer-events: none; }


.order-status { width: 100%; max-width: 440px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px; }
.order-line { margin: 0; font-size: var(--t-10); line-height: 1.5; color: var(--ink-dim); }


html[data-consent="asking"] body { padding-bottom: 132px; }

html[data-consent="asking"] { scroll-padding-bottom: 148px; }
@media (max-width: 520px) {
  html[data-consent="asking"] body { padding-bottom: 184px; }
}





@keyframes sb-enter { from { opacity: 0; } }
.stage.sb-enter { animation: sb-enter 200ms cubic-bezier(0.16, 0.84, 0.44, 1) both; }
@media (prefers-reduced-motion: reduce) { .stage.sb-enter { animation: none; } }


.sb-progress { position: fixed; left: 0; right: 0; top: calc(var(--strip-h) - 2px); height: 2px;
  
  z-index: 6; overflow: hidden; pointer-events: none; }
.sb-progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%;
  background: linear-gradient(90deg, rgba(var(--light-rgb), 0), rgba(var(--light-rgb), 0.55),
    rgba(var(--light-rgb), 0));
  animation: sb-progress 1100ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes sb-progress { from { transform: translateX(-100%); } to { transform: translateX(315%); } }
@media (prefers-reduced-motion: reduce) {
  .sb-progress::before { animation: none; width: 100%; background: rgba(var(--light-rgb), 0.3); }
}


.stage h1[tabindex="-1"]:focus { outline: none; }
.stage h1[tabindex="-1"]:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.6);
  outline-offset: 4px; }


svg.ring { display: none; }
@media (-webkit-max-device-pixel-ratio: 1.99), (max-resolution: 191.9dpi) {
  :is(.row-play, .play-btn, .hero-play, .hero-act, .row-act, .social-ic) { border-color: transparent; position: relative; }
  
  svg.ring { display: block; position: absolute; left: -0.25px; top: -0.25px;
    width: calc(100% + 0.5px); height: calc(100% + 0.5px); overflow: visible; pointer-events: none; }
  svg.ring circle { fill: none; stroke: var(--ring, transparent); stroke-width: 1.5px;
    stroke-opacity: 0.6667; transition: stroke 0.18s ease; }
}
@media (forced-colors: active) {
  svg.ring { display: none; }
  :is(.row-play, .play-btn, .hero-play, .hero-act, .row-act, .social-ic) { border-color: var(--ring); }
}


.cta.cta, .tape-cta--prominent.tape-cta--prominent, .show-more, .copy-btn, .sb-consent-btn,
.tier-flip.tier-flip-all {
  padding-left: calc(16 * var(--b, 1em) / 14); padding-right: calc(64 * var(--b, 1em) / 14);
  text-align: left; }
.cta.cta, .tier-flip.tier-flip-all { justify-content: flex-start; }

.cta.cta:has(> .arrow) { padding-right: calc(16 * var(--b, 1em) / 14); gap: calc(48 * var(--b, 1em) / 14 - 15em / 13); }
.cta.cta > .arrow { margin-left: auto; }

.tape-cta--prominent.tape-cta--prominent { position: relative; }
.tape-cta-arrow { position: absolute; right: calc(16 * var(--b, 1em) / 14); top: 50%; translate: 0 -50%; }
.co-back-arrow { margin-left: calc(8 * var(--b, 1em) / 14); }

.show-more, .copy-btn { position: relative; }
.btn-sym { position: absolute; right: calc(16 * var(--b, 1em) / 14); top: 50%; translate: 0 -50%;
  width: calc(15em / 13); height: calc(15em / 13); }
.show-more[aria-expanded="true"] .show-more-sym { rotate: 180deg; }

.show-more-words { display: grid; }
.show-more-words > * { grid-area: 1 / 1; }
.show-more-strut { visibility: hidden; }
.tier-flip.tier-flip-all { position: relative; }
.tier-flip.tier-flip-all > .tier-flip-sym { position: absolute; right: calc(16 * var(--b, 1em) / 14); margin-left: 0; }

@media (max-width: 720px) {
  .cta, .sb-consent-btn { --b: 13px; }   
  .co-back { --b: 12.5px; }              
  .copy-btn { --b: 12px; }               
  .stage--fit .cta { --b: initial; }
}


.sb-tip {
  position: fixed; inset: auto; margin: 0; overflow: visible;
  box-sizing: border-box; max-width: 208px; padding: 2px 16px;
  
  border: 1px solid transparent; border-radius: 4px;
  background: rgba(var(--room-13-rgb), 0.9); color: var(--bg);
  box-shadow: 0 2px 10px rgba(var(--neutral-1-rgb), 0.42);
  font-family: var(--sans); font-size: var(--t-07); font-weight: 400; line-height: calc(16 / 12);
  white-space: nowrap;
  transition: opacity 0.11s ease;
}
@starting-style { .sb-tip:popover-open { opacity: 0; } }


.sb-tip::after {
  content: ""; position: absolute; left: calc(var(--tip-x, 50%) - 1px - 6px);
  width: 12px; height: 6px; background: rgba(var(--room-13-rgb), 0.9);
}
.sb-tip[data-side="above"]::after { top: calc(100% + 1px); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sb-tip[data-side="below"]::after { bottom: calc(100% + 1px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .sb-tip { transition: none; } }
@media (forced-colors: active) {
  .sb-tip { border-color: CanvasText; }
  .sb-tip::after { background: CanvasText; forced-color-adjust: none; }
}