/* Backline — welcome tour (js/tour.js). A black stage over the app: progress bars on top,
   the scene in the middle, subtitles at the bottom. The mini app inside the phone is drawn
   in container units (cqw), so it scales with the phone. */

.tour {
  --cream: #F4F0E6; --hot: #FF6A2F; --tape: #E8DFC6;
  position: fixed; inset: 0; z-index: 95; overflow: hidden;
  background: var(--grain), radial-gradient(120% 80% at 50% 20%, #1D1A16 0%, #0B0A09 70%);
  color: var(--cream); animation: tour-in .35s ease both;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@keyframes tour-in { from { opacity: 0; } }

.tour__bars {
  position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 14px; right: 14px;
  display: flex; gap: 4px; transition: opacity .4s;
}
.tour__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(244, 240, 230, .2); overflow: hidden; }
.tour__bars b { display: block; width: 0; height: 100%; background: var(--cream); }
.tour[data-at="power"] .tour__bars, .tour[data-at="power"] .tour__cap { opacity: 0; }

.tour__top {
  position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 12px; left: 12px;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.tour__top button {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: rgba(244, 240, 230, .12); color: var(--cream); font: 600 14px/1 -apple-system, system-ui, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tour__mute { width: 36px; padding: 0 !important; justify-content: center; }
.tour__mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tour__mute svg path:first-child { fill: currentColor; }
.tour__mute .off, .tour.is-muted .tour__mute .on { display: none; }
.tour.is-muted .tour__mute .off { display: inline; }

.tour__tap { position: absolute; z-index: 2; top: 0; bottom: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.tour__tap:focus { outline: none; }
.tour__tap--prev { left: 0; width: 30%; }
.tour__tap--next { right: 0; width: 70%; }
.tour[data-at="power"] .tour__tap--prev { width: 0; }
.tour[data-at="power"] .tour__tap--next { width: 100%; }

.tour__stage {
  position: absolute; z-index: 3; left: 0; right: 0; pointer-events: none;
  top: calc(env(safe-area-inset-top, 0px) + 66px); bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
}
.tour[data-at="power"] .tour__stage { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

.tour__cap {
  position: absolute; z-index: 3; left: 22px; right: 22px; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  max-width: 34ch; margin: 0 auto;
  text-align: center; font: 600 17px/1.4 -apple-system, system-ui, sans-serif; color: var(--cream); pointer-events: none;
  text-wrap: balance; transition: opacity .4s;
}
.tour__cap.is-karaoke span { opacity: .38; transition: opacity .18s; }
.tour__cap.is-karaoke span.is-said { opacity: 1; }

/* ---- Shared pieces ----------------------------------------------------------- */

.tsc {
  position: absolute; inset: 0; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
}
.tsc.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.tmono { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 240, 230, .7); }
.tposter { margin: 0; font-family: var(--f-poster); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .01em; color: var(--cream); }

.tico {
  display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--c);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
/* The instrument icons are filled shapes: paint them, no outline (an outline swells them into blobs). */
.tico { color: #fff; }
.tico svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.tico--light { color: #2a2620; }
.tico--lg { width: 96px; height: 96px; border-radius: 28px; }
.tico--lg svg { width: 56px; height: 56px; }
.tico--sm { width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; box-shadow: none; }
.tico--sm svg { width: 4.2cqw; height: 4.2cqw; }
.tico--xs { width: 6cqw; height: 6cqw; border-radius: 1.6cqw; box-shadow: none; }
.tico--xs svg { width: 3.8cqw; height: 3.8cqw; }

@keyframes t-slam { 0% { opacity: 0; transform: scale(1.7) rotate(-3deg); filter: blur(6px); } 60% { opacity: 1; transform: scale(.96); filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes t-stick { 0% { opacity: 0; transform: translateY(-30px) rotate(-14deg) scale(1.2); } 70% { opacity: 1; transform: rotate(-3deg) scale(.97); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes t-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes t-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes t-pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes t-stamp { 0% { opacity: 0; transform: rotate(6deg) scale(2.4); } 60% { opacity: 1; transform: rotate(6deg) scale(.92); } 100% { opacity: 1; transform: rotate(6deg) scale(1); } }
@keyframes t-blink { 50% { opacity: .25; } }

/* ---- Power: the amp ----------------------------------------------------------- */

.tsc--power { gap: 22px; }
.tamp {
  width: min(320px, 84vw); padding: 14px; border-radius: 16px; pointer-events: auto;
  background: var(--grain), linear-gradient(#24211d, #171512); border: 2px solid #34302a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tamp__knobs {
  display: flex; justify-content: space-around; padding: 14px 8px 10px; border-radius: 8px;
  background: linear-gradient(#e9dfc4, #c9bc98); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.tamp__knob { display: grid; justify-items: center; gap: 6px; }
.tamp__knob i {
  position: relative; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4540, #121110 70%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4); transform: rotate(var(--r)); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.tamp__knob i::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 11px; margin-left: -1px; border-radius: 1px; background: var(--cream); }
.tamp__knob small { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #3a342a; }
.tsc--power.b-on .tamp__knob i { transform: rotate(calc(var(--r) + 150deg)); }
.tamp__row { display: flex; align-items: center; gap: 16px; padding: 16px 8px 4px; }
.tamp__jewel {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #8a3b22, #3a140a 70%); box-shadow: inset 0 0 0 2px #2a2621; transition: background .25s, box-shadow .25s;
}
.tsc--power.b-on .tamp__jewel { background: radial-gradient(circle at 35% 30%, #ffd2b5, var(--hot) 55%, #b23a10); box-shadow: inset 0 0 0 2px #2a2621, 0 0 18px 4px rgba(255, 106, 47, .7); }
.tamp__switch {
  position: relative; width: 46px; height: 66px; flex: none; border: 0; border-radius: 10px; cursor: pointer; padding: 0;
  background: linear-gradient(#0e0d0c, #2a2622); box-shadow: inset 0 0 0 2px #3c3730, 0 0 0 4px rgba(255, 106, 47, .0);
  animation: t-ring 1.8s ease-in-out infinite;
}
.tamp__switch::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d9d3c4, #7d776b 70%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.tamp__switch i {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 26px; margin: -26px 0 0 -5px; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(90deg, #b9b2a2, #f4f0e6 45%, #a8a192); box-shadow: 0 4px 6px rgba(0, 0, 0, .55); transform-origin: 50% 100%;
  transform: rotate(180deg); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.tsc--power.b-on .tamp__switch { animation: none; }
.tsc--power.b-on .tamp__switch i { transform: none; }
@keyframes t-ring { 50% { box-shadow: inset 0 0 0 2px #3c3730, 0 0 0 6px rgba(255, 106, 47, .45); } }
.tamp__switch:focus-visible { outline: 3px solid var(--hot); outline-offset: 4px; }
.tamp__logo { margin-left: auto; font-family: var(--f-hand); font-size: 26px; color: var(--tape); transform: rotate(-6deg); }
.tpower__title { margin: 6px 0 0; font-family: var(--f-poster); font-weight: 400; font-size: clamp(30px, 9vw, 44px); line-height: 1.02; text-transform: uppercase; max-width: 15ch; text-wrap: balance; }
.tpower__hint { margin: 0; font-size: 15px; color: rgba(244, 240, 230, .65); }
.tsc--power > * { transition: opacity .4s, transform .4s; }
.tsc--power.b-on > :not(.tcount) { opacity: 0; transform: scale(.94); }
.tsc--power.b-on > .tamp { transition-delay: .5s; }
.tcount { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tcount b {
  grid-area: 1 / 1; font-family: var(--f-poster); font-weight: 400; font-size: min(46vw, 260px); line-height: 1; color: var(--cream); opacity: 0;
}
.tcount b:last-child { color: var(--hot); }
.b-c1 .tcount b:nth-child(1), .b-c2 .tcount b:nth-child(2), .b-c3 .tcount b:nth-child(3), .b-c4 .tcount b:nth-child(4) { animation: t-count .46s ease-out both; }
@keyframes t-count { 0% { opacity: 0; transform: scale(1.5); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
/* The "4" stays up until the first scene comes in, so the screen never goes black while the voice loads. */
.b-c4 .tcount b:nth-child(4) { animation: t-count-last .46s ease-out both; }
@keyframes t-count-last { 0% { opacity: 0; transform: scale(1.5); } 20%, 100% { opacity: 1; transform: scale(1); } }

/* ---- Intro: made by musicians ------------------------------------------------- */

.tsc--intro { gap: 18px; }
.tspot {
  position: absolute; left: 50%; top: -12%; width: 150%; height: 120%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 75% at 50% 0%, rgba(255, 222, 170, .26), rgba(255, 222, 170, 0) 70%);
  clip-path: polygon(42% 0, 58% 0, 88% 100%, 12% 100%); opacity: 0;
}
.tsc--intro.is-on .tspot { animation: t-spot 1.2s ease .1s forwards; }
@keyframes t-spot { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .4; } 60%, 100% { opacity: 1; } }
.tsc--intro .tmono { opacity: 0; }
.tsc--intro.is-on .tmono { animation: t-in .5s ease .2s forwards; }
.tposter__s, .tposter__b { display: block; opacity: 0; }
.tposter__s { font-size: clamp(34px, 10vw, 52px); }
.tposter__b { margin-top: .2em; font-size: clamp(66px, 22vw, 140px); line-height: .95; }
.b-by .tposter__s { animation: t-slam .5s cubic-bezier(.2, .9, .3, 1) forwards; }
.b-by .tposter__b { animation: t-slam .55s cubic-bezier(.2, .9, .3, 1) .16s forwards; }
.ttape {
  display: inline-block; padding: 8px 22px 6px; font-family: var(--f-hand); font-size: clamp(26px, 8vw, 40px); color: #2a2620;
  background: var(--grain-soft), var(--tape); opacity: 0;
  clip-path: polygon(1% 8%, 4% 0, 9% 6%, 15% 1%, 22% 5%, 30% 0, 40% 4%, 52% 0, 63% 5%, 74% 1%, 85% 4%, 93% 0, 99% 6%, 100% 92%, 96% 100%, 88% 94%, 79% 100%, 68% 95%, 57% 100%, 45% 95%, 33% 100%, 22% 94%, 12% 100%, 5% 95%, 0 100%);
}
.b-for .ttape { animation: t-stick .5s cubic-bezier(.2, .9, .3, 1) forwards; }

/* ---- Together: you + what you're missing --------------------------------------- */

.tsc--together { gap: 26px; }
.ttog { position: relative; width: min(78vw, 46vh, 360px); aspect-ratio: 1; }
.ttog__cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ttog__cables path {
  /* Widths in viewBox units (100 = the whole ring): non-scaling strokes break the drawing animation. */
  fill: none; stroke: var(--c); stroke-width: .9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease calc(var(--k) * 90ms);
  filter: drop-shadow(0 0 6px var(--c));
}
.b-missing .ttog__cables path { stroke-dashoffset: 0; }
.ttog__ghost {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; transform: translate(-50%, -50%) scale(.6);
  border: 2px dashed rgba(244, 240, 230, .35); color: rgba(244, 240, 230, .5); font-family: var(--f-poster); font-size: 26px; opacity: 0;
  transition: opacity .4s ease calc(.5s + var(--k) * 80ms), transform .45s cubic-bezier(.2, 1.4, .4, 1) calc(.5s + var(--k) * 80ms), border-color .3s, color .3s;
}
.tsc--together.is-on .ttog__ghost { opacity: 1; transform: translate(-50%, -50%); }
.b-nobody .ttog__ghost { border-color: rgba(255, 106, 47, .7); color: var(--hot); animation: t-shake .5s ease calc(var(--k) * 60ms); }
.tsc--together.b-people .ttog__ghost { opacity: 0; transform: translate(-50%, -50%) scale(.5); transition-delay: calc(var(--k) * 90ms); }
@keyframes t-shake { 25% { margin-left: -5px; } 75% { margin-left: 5px; } }
.ttog__p { position: absolute; transform: translate(-50%, -50%) scale(0); transition: transform .55s cubic-bezier(.2, 1.4, .4, 1) calc(var(--k) * 90ms); }
.b-people .ttog__p { transform: translate(-50%, -50%); }
.ttog__p .tico { transition: box-shadow .5s ease calc(var(--k) * 90ms + .4s); }
.b-missing .ttog__p .tico { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 26px var(--c); }
.ttog__me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); transition: transform .6s cubic-bezier(.2, 1.4, .4, 1) .15s; }
.tsc--together.is-on .ttog__me { transform: translate(-50%, -50%); }
.ttog__me .tico { position: relative; z-index: 1; }
.ttog__me i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c, #fff); opacity: 0; }
.ttog__me .tico { --ring: var(--c); }
.ttog__me i { border-color: rgba(244, 240, 230, .6); }
.b-you .ttog__me i { animation: t-wave 1.6s ease-out infinite; }
.b-you .ttog__me i + i { animation-delay: .8s; }
@keyframes t-wave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
.tposter--tag { font-size: clamp(36px, 11vw, 60px); opacity: 0; }
.b-missing .tposter--tag { animation: t-slam .5s cubic-bezier(.2, .9, .3, 1) .5s forwards; }

/* ---- The phone ---------------------------------------------------------------- */

.tphone {
  --ink: #15130F; --panel: #FFFDF8; --paper: #F4F0E6; --line: rgba(21, 19, 15, .12); --muted: rgba(21, 19, 15, .58);
  position: absolute; left: 50%; top: 50%; height: min(100%, 620px); aspect-ratio: 9 / 18.6;
  display: flex; flex-direction: column; overflow: hidden; container-type: inline-size;
  border-radius: 40px; border: 7px solid #1d1b18; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px #3a3631, 0 30px 80px rgba(0, 0, 0, .65), 0 0 120px rgba(255, 106, 47, .08);
  opacity: 0; transform: translate(-50%, -46%) scale(.86); transition: opacity .45s, transform .55s cubic-bezier(.2, .9, .3, 1);
  font-family: -apple-system, system-ui, sans-serif;
}
.tour.has-phone .tphone { opacity: 1; transform: translate(-50%, -50%); }
.tphone__scr { position: relative; flex: 1; container-type: size; overflow: hidden; }
.tscr {
  position: absolute; inset: 0; padding: 9cqw 5.5cqw 4cqw; display: flex; flex-direction: column; gap: 2.4cqw;
  font-size: 3.6cqw; line-height: 1.3; opacity: 0; transform: translateX(10%); transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1);
}
.tscr.is-on { opacity: 1; transform: none; }
.tscr.is-on > * { animation: t-up .45s ease both; }
.tscr.is-on > :nth-child(2) { animation-delay: .06s; } .tscr.is-on > :nth-child(3) { animation-delay: .12s; }
.tscr.is-on > :nth-child(4) { animation-delay: .18s; } .tscr.is-on > :nth-child(5) { animation-delay: .24s; }
.tscr.is-on > :nth-child(6) { animation-delay: .3s; } .tscr.is-on > :nth-child(7) { animation-delay: .36s; }
.tscr.is-on > :nth-child(8) { animation-delay: .42s; } .tscr.is-on > :nth-child(9) { animation-delay: .48s; }

.tphone__nav {
  display: flex; justify-content: space-around; align-items: center; height: 15cqw; flex: none; padding-bottom: 1.5cqw;
  border-top: 1px solid var(--line); background: rgba(244, 240, 230, .96);
}
.tphone__item { position: relative; display: grid; justify-items: center; gap: .6cqw; font-size: 2.5cqw; color: var(--muted); transition: color .25s; }
.tphone__item svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tphone__item.is-on { color: var(--ink); }
.tphone__item.is-on::before {
  content: ''; position: absolute; top: -1.6cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #E4511B; box-shadow: 0 0 1.6cqw .3cqw #E4511B;
}
.tphone__fab { display: grid; place-items: center; width: 11cqw; height: 11cqw; margin-top: -3cqw; border-radius: 50%; background: var(--ink); transition: background .3s, transform .3s; }
.tphone__fab svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; }
.tphone.is-new .tphone__fab { background: #E4511B; animation: t-fab 1s ease-in-out infinite; }
.tphone.is-made .tphone__fab { animation: none; }
@keyframes t-fab { 50% { transform: scale(1.12); box-shadow: 0 0 0 2cqw rgba(228, 81, 27, .2); } }

/* The finger that taps for you */
.tour__finger {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, .32); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; transition: left .42s cubic-bezier(.3, .8, .3, 1), top .42s cubic-bezier(.3, .8, .3, 1), opacity .2s;
}
.tour__finger.is-on { opacity: 1; }
.tour__finger.is-tap { animation: t-tap .9s ease forwards; }
@keyframes t-tap { 0% { transform: none; opacity: 1; } 25% { transform: scale(.72); background: rgba(255, 255, 255, .7); } 50% { transform: none; opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* What's being talked about lights up */
.ts-hit { transition: box-shadow .3s, transform .3s; }
.ts-hit.is-hit { box-shadow: 0 0 0 .8cqw #E4511B, 0 2cqw 6cqw rgba(228, 81, 27, .3); transform: scale(1.025); }

/* ---- Mini app pieces ----------------------------------------------------------- */

.ts-mono { font-family: var(--f-mono); font-size: 2.6cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-head { display: flex; justify-content: space-between; align-items: center; }
.ts-word { font-family: var(--f-poster); font-size: 6.6cqw; letter-spacing: .05em; text-transform: uppercase; }

.ts-hello { margin: 0; font-size: 6.4cqw; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.ts-title { margin: 0; font-family: var(--f-poster); font-size: 10cqw; line-height: 1; text-transform: uppercase; }
.ts-tape {
  align-self: flex-start; margin-top: 1cqw; padding: .8cqw 3cqw .6cqw; font-family: var(--f-hand); font-size: 3.4cqw; line-height: 1.3; color: #2a2620;
  background: var(--grain-soft), var(--tape); transform: rotate(-1.4deg);
  clip-path: polygon(1% 8%, 4% 0, 9% 6%, 15% 1%, 22% 5%, 30% 0, 40% 4%, 52% 0, 63% 5%, 74% 1%, 85% 4%, 93% 0, 99% 6%, 100% 92%, 96% 100%, 88% 94%, 79% 100%, 68% 95%, 57% 100%, 45% 95%, 33% 100%, 22% 94%, 12% 100%, 5% 95%, 0 100%);
}
.ts-gig { position: relative; display: block; flex: none; height: 30cqw; border-radius: 4cqw; overflow: hidden; isolation: isolate; background: #12100E; color: var(--cream); }
.ts-gig::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: .35; mix-blend-mode: overlay; }
.ts-gig__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: .6cqw; padding: 3.4cqw; text-align: left; }
.ts-gig__body .ts-mono { color: rgba(244, 240, 230, .85); }
.ts-gig__body b { font-family: var(--f-poster); font-weight: 400; font-size: 8cqw; line-height: .95; text-transform: uppercase; }
.ts-av {
  display: inline-grid; place-items: center; flex: none; width: 8.6cqw; height: 8.6cqw; border-radius: 50%;
  background: var(--c); color: #fff; font-weight: 800; font-size: 3.6cqw;
}
.ts-card { display: flex; align-items: center; gap: 2.4cqw; padding: 2.8cqw; border-radius: 3.6cqw; background: var(--panel); border: 1px solid var(--line); font-size: 3.3cqw; }
.ts-card__t { flex: 1; min-width: 0; }
.ts-btn { flex: none; padding: 1.6cqw 3cqw; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 3cqw; transition: background .3s; }
.b-invite .ts-btn { animation: t-press .3s ease .45s both; }
@keyframes t-press { 50% { transform: scale(.88); } to { background: #34C759; } }
.ts-people { display: flex; gap: 2cqw; border-radius: 3.6cqw; }
.ts-minis { display: flex; gap: 2cqw; }
.ts-gig--mini { flex: 1; height: 30cqw; }
.ts-gig--mini .ts-gig__body { padding: 2.4cqw; }
.ts-gig--mini .ts-gig__body b { font-size: 5.4cqw; }
.ts-gig--mini .ts-mono { font-size: 2.2cqw; }
.ts-person { flex: 1; display: grid; justify-items: center; gap: .6cqw; padding: 2.6cqw 1cqw; border-radius: 3.6cqw; background: var(--panel); border: 1px solid var(--line); }
.ts-person b { font-size: 3cqw; }
.ts-person small { font-family: var(--f-mono); font-size: 2.6cqw; color: #E4511B; font-weight: 700; }

.ts-chips { display: flex; flex-wrap: wrap; gap: 1.6cqw; border-radius: 999px; }
.ts-chip { padding: 1.3cqw 3cqw; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 3.1cqw; transition: background .25s, color .25s; }
.ts-chip.on, .b-genre .ts-chip--genre { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ts-jam { border-radius: 4cqw; overflow: hidden; background: #1C1A17; flex: none; }
.ts-gig--jam { border-radius: 0; height: 30cqw; }
.ts-stamp {
  position: absolute; z-index: 3; top: 3cqw; right: 3cqw; padding: 1cqw 2cqw; border: .5cqw solid #FFD60A; border-radius: 1cqw;
  font-family: var(--f-mono); font-weight: 700; font-size: 2.7cqw; letter-spacing: .12em; text-transform: uppercase; color: #FFD60A;
  opacity: 0; transform: rotate(6deg);
}
.b-join .ts-stamp, .b-publish .ts-stamp { animation: t-stamp .45s cubic-bezier(.2, .9, .3, 1) forwards; }
.ts-desk { display: flex; justify-content: space-around; padding: 3cqw 4cqw 3.4cqw; border-radius: 0; }
.ts-ch { position: relative; display: grid; justify-items: center; gap: 1.4cqw; }
.ts-ch__rail { position: relative; width: 1.4cqw; height: 15cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .14); }
.ts-ch__rail b {
  position: absolute; left: 50%; bottom: calc(100% - 3cqw); width: 6.4cqw; height: 3cqw; margin-left: -3.2cqw; border-radius: .8cqw;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .5);
}
.ts-ch--open .ts-ch__rail b { bottom: 0; background: rgba(255, 255, 255, .25); transition: bottom .6s cubic-bezier(.2, 1.2, .4, 1) .45s, background .3s .45s; }
.b-join .ts-ch--open .ts-ch__rail b { bottom: calc(100% - 3cqw); background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, #000)); }
.ts-ch--open .tico { opacity: .45; transition: opacity .3s .5s; }
.b-join .ts-ch--open .tico { opacity: 1; }
.ts-ch em {
  position: absolute; top: 5cqw; left: 50%; transform: translateX(-50%); padding: .5cqw 1.2cqw; border-radius: 1cqw; background: #1C1A17; box-shadow: inset 0 0 0 1px var(--c);
  font-family: var(--f-mono); font-style: normal; font-weight: 700; font-size: 2.2cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--c); white-space: nowrap; animation: t-blink 1s steps(2) infinite;
}
.b-open .ts-ch em { visibility: hidden; }
/* Applied: "Voting" while the players already in say yes, one by one; then you're in */
.ts-ch em.ts-ch__wait { visibility: hidden; animation: t-blink 1s steps(2) infinite; color: #FFD60A; box-shadow: inset 0 0 0 1px #FFD60A; }
.b-open:not(.b-join) .ts-ch em.ts-ch__wait { visibility: visible; }
.ts-ch__vote {
  position: absolute; top: 1cqw; right: -2.6cqw; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  background: #34C759; color: #fff; font: 800 2.8cqw/1 system-ui; font-style: normal; box-shadow: 0 0 0 .5cqw #1C1A17;
  opacity: 0; transform: scale(.3);
}
.b-vote .ts-ch__vote { animation: t-vote .35s cubic-bezier(.2, 1.4, .4, 1) calc(var(--k) * .14s) forwards; }
@keyframes t-vote { to { opacity: 1; transform: none; } }
.ts-gig--peek { height: 22cqw; }
.ts-gig--jam { height: 34cqw; }

.tscr--new .ts-gig--poster { height: 54cqw; --gink: #5d5852; }
.tscr--new .gig__duo { transition: background .5s; }
.tscr--new.b-genre .ts-gig--poster { --gink: #FF5A1F; }
.ts-gig--poster .ts-gig__body > b { opacity: 0; font-size: 12cqw; }
.b-genre .ts-gig--poster .ts-gig__body > b { animation: t-slam .45s ease forwards; }
.ts-parts { display: flex; gap: 1.4cqw; }
.ts-parts .tico, .ts-need__row .tico { transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.ts-parts .tico:nth-child(2), .ts-need__row .tico:nth-child(2) { transition-delay: .12s; }
.ts-parts .tico:nth-child(3), .ts-need__row .tico:nth-child(3) { transition-delay: .24s; }
.b-parts .ts-parts .tico, .b-parts .ts-need__row .tico { transform: none; }
.ts-seg { display: flex; padding: .8cqw; border-radius: 2.6cqw; background: rgba(21, 19, 15, .07); }
.ts-seg span { flex: 1; padding: 1.6cqw 0; border-radius: 2cqw; text-align: center; font-size: 3.2cqw; transition: background .25s, box-shadow .25s; }
.b-place .ts-seg__on { background: var(--panel); font-weight: 700; box-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .12); }
.ts-form { display: grid; gap: 1.8cqw; border-radius: 3cqw; }
.ts-field { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 2.6cqw; background: var(--panel); border: 1px solid var(--line); font-size: 3.3cqw; }
.ts-field svg { width: 4.4cqw; height: 4.4cqw; flex: none; fill: none; stroke: #E4511B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-need { display: grid; gap: 1.6cqw; padding: 2.4cqw; border-radius: 3cqw; }
.ts-need__row { display: flex; gap: 2.4cqw; }
.ts-need__row .tico { width: 10cqw; height: 10cqw; border-radius: 3cqw; }
.ts-need__row .tico svg { width: 6cqw; height: 6cqw; }
.ts-cta { display: block; margin-top: auto; padding: 3cqw; border-radius: 999px; background: var(--ink); color: var(--paper); text-align: center; font-weight: 700; font-size: 3.6cqw; transition: background .3s; }
.b-publish .ts-cta { background: #E4511B; }

.ts-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 1.8cqw; border-bottom: 1px solid var(--line); }
.ts-tabs span { text-align: center; font-size: 3.6cqw; font-weight: 600; color: var(--muted); transition: color .25s; }
.ts-tabs__ink { position: absolute; left: 0; bottom: -1px; width: 33.333%; height: .8cqw; border-radius: .4cqw; background: #E4511B; transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.b-players .ts-tabs__ink { transform: translateX(100%); }
.b-bands .ts-tabs__ink { transform: translateX(200%); }
.tscr--community:not(.b-players) [data-t="wall"], .b-players:not(.b-bands) [data-t="players"], .b-bands [data-t="bands"] { color: var(--ink); }
.ts-panes { position: relative; flex: 1; }
.ts-pane { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2cqw; opacity: 0; transform: translateX(6%); transition: opacity .3s, transform .35s; }
.tscr--community:not(.b-players) [data-pane="wall"], .b-players:not(.b-bands) [data-pane="players"], .b-bands [data-pane="bands"] { opacity: 1; transform: none; }
.ts-post { border-radius: 4cqw; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.ts-post__who { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw; }
.ts-post__who b { font-size: 3.4cqw; }
.ts-post__who small { font-family: var(--f-mono); font-size: 2.5cqw; color: var(--muted); }
.ts-post__img img { display: block; width: 100%; height: 44cqw; object-fit: cover; }
.ts-post--note { display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw; font-size: 3.3cqw; }
.ts-post__foot { display: block; padding: 2.4cqw; font-size: 3.4cqw; font-weight: 600; }
.ts-row { display: flex; align-items: center; gap: 2.6cqw; padding: 2.2cqw 0; border-bottom: 1px solid var(--line); }
.ts-row b { flex: 1; display: grid; font-size: 3.5cqw; }
.ts-row small { font-size: 2.8cqw; font-weight: 400; color: var(--muted); }
.ts-add { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: rgba(21, 19, 15, .07); font-style: normal; font-size: 3.6cqw; font-weight: 700; }
.ts-row em { font-family: var(--f-mono); font-style: normal; font-weight: 700; font-size: 3.2cqw; color: #E4511B; }
.ts-band { display: grid; gap: 1.6cqw; padding: 4cqw; border-radius: 4cqw; background: #15130F; color: var(--cream); }
.ts-band b { font-family: var(--f-poster); font-weight: 400; font-size: 7.6cqw; line-height: 1; text-transform: uppercase; }
.ts-band .ts-mono { color: rgba(244, 240, 230, .7); }
.ts-band--2 { background: #2E5BFF; }
.ts-band__m { display: flex; gap: 1.4cqw; }
.ts-band__need { font-family: var(--f-mono); font-size: 2.7cqw; letter-spacing: .08em; text-transform: uppercase; color: #FF8A5B; }
.ts-cta--ghost { margin-top: 1cqw; background: none; color: var(--ink); box-shadow: inset 0 0 0 .5cqw var(--ink); }
.b-band .ts-cta--ghost { animation: t-press2 .3s ease .45s both; }
@keyframes t-press2 { 50% { transform: scale(.94); } to { background: var(--ink); color: var(--paper); } }
.ts-chat {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 4cqw; display: grid; gap: 1.6cqw; padding: 3.4cqw; border-radius: 5cqw;
  background: var(--panel); box-shadow: 0 3cqw 10cqw rgba(0, 0, 0, .25); opacity: 0; transform: translateY(20%); transition: opacity .3s, transform .4s cubic-bezier(.2, .9, .3, 1);
}
.b-chat .ts-chat { opacity: 1; transform: none; }
.b-band .ts-chat { opacity: 0; transform: translateY(20%); }
.ts-chat__who { display: flex; align-items: center; gap: 2cqw; padding-bottom: 2cqw; border-bottom: 1px solid var(--line); font-size: 3.4cqw; }
.ts-chat__who .ts-av { width: 6.6cqw; height: 6.6cqw; font-size: 3cqw; }
.ts-bub { justify-self: start; max-width: 80%; padding: 2cqw 3.4cqw; border-radius: 4.4cqw; background: #E9E5DA; font-size: 3.5cqw; opacity: 0; }
.ts-bub--me { justify-self: end; background: #E4511B; color: #fff; }
.b-chat .ts-bub { animation: t-pop .35s ease .15s forwards; }
.b-chat .ts-bub--me { animation-delay: .9s; }

.tscr--profile { padding-top: 0; background: linear-gradient(#15130F 0, #15130F 40cqw, transparent 40cqw); }
.ts-lanyard { display: flex; justify-content: center; gap: 18cqw; height: 8cqw; flex: none; }
.ts-lanyard i { width: 2.6cqw; background: #E4511B; }
.ts-pass {
  margin: -1cqw 3cqw 0; flex: none; border-radius: 4cqw; overflow: hidden; background: var(--panel); color: var(--ink);
  box-shadow: 0 2cqw 8cqw rgba(0, 0, 0, .4); transform-origin: 50% -10cqw; transform: rotate(-2deg);
}
.tscr--profile.is-on .ts-pass { animation: t-swing 1.4s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes t-swing { 0% { transform: rotate(9deg); } 40% { transform: rotate(-5deg); } 70% { transform: rotate(0); } 100% { transform: rotate(-2deg); } }
.ts-pass__band { padding: 3cqw 3.4cqw; background: var(--gink); color: var(--cream); display: grid; gap: .6cqw; }
.ts-pass__band .ts-mono { color: rgba(244, 240, 230, .85); }
.ts-pass__band b { font-family: var(--f-poster); font-weight: 400; font-size: 8cqw; line-height: 1; text-transform: uppercase; }
.ts-pass__me { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.4cqw 2cqw; }
.ts-pass__av { display: grid; place-items: center; flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; overflow: hidden; background: var(--c); color: #fff; font-weight: 800; font-size: 5cqw; }
.ts-pass__av img { width: 100%; height: 100%; object-fit: cover; }
.ts-pass__name { display: block; font-size: 4.4cqw; font-weight: 800; line-height: 1.15; }
.ts-pass__me small { font-size: 3cqw; color: var(--muted); }
.ts-pass__inst { display: flex; flex-wrap: wrap; gap: 1.4cqw; padding: 1cqw 3.4cqw 3.4cqw; margin: 0 1.6cqw 1.6cqw; border-radius: 3cqw; }
.ts-pass__inst span { padding: 1cqw 2.6cqw; border-radius: 999px; background: var(--c); color: #fff; font-size: 3cqw; font-weight: 700; }
.ts-pass__inst span.light { color: #2a2620; }
.ts-leds { display: flex; justify-content: space-around; padding: 1cqw 0 0; }
.ts-leds span { display: grid; justify-items: center; gap: .4cqw; font-family: var(--f-mono); font-size: 2.3cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-leds b { font-family: var(--f-mono); font-size: 6cqw; font-weight: 700; line-height: 1; color: #E4511B; text-shadow: 0 0 1.6cqw rgba(228, 81, 27, .45); }
.ts-case {
  display: grid; gap: 1.6cqw; padding: 3cqw 3.4cqw; border-radius: 3cqw; background: var(--grain), #1C1A17; color: var(--tape);
  box-shadow: inset 0 0 0 .8cqw #3A3631;
}
.ts-case span { display: flex; justify-content: space-between; gap: 2cqw; font-family: var(--f-sten); font-size: 3.2cqw; opacity: .2; transition: opacity .3s; }
.ts-case span:nth-child(2) { transition-delay: .2s; }
.ts-case b { font-family: var(--f-mono); font-weight: 400; font-size: 2.5cqw; letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 223, 198, .6); }
.b-gear .ts-case span { opacity: 1; }
.ts-likes .ts-chip { opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.ts-likes .ts-chip:nth-child(2) { transition-delay: .1s; } .ts-likes .ts-chip:nth-child(3) { transition-delay: .2s; }
.b-love .ts-likes .ts-chip { opacity: 1; transform: none; }
.ts-meter { display: flex; align-items: center; gap: 2.4cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: var(--panel); border: 1px solid var(--line); }
.ts-meter__leds { flex: 1; display: flex; gap: .8cqw; }
.ts-meter__leds i { flex: 1; height: 3.4cqw; border-radius: .6cqw; background: rgba(21, 19, 15, .1); transition: background .15s calc(var(--k) * 70ms), box-shadow .15s calc(var(--k) * 70ms); }
.b-match .ts-meter__leds i:nth-child(-n+8) { background: #34C759; box-shadow: 0 0 1.4cqw rgba(52, 199, 89, .6); }
.b-match .ts-meter__leds i:nth-child(n+9):nth-child(-n+10) { background: #FFCC00; box-shadow: 0 0 1.4cqw rgba(255, 204, 0, .6); }
.b-match .ts-meter__leds i:nth-child(11) { background: #FF3B30; box-shadow: 0 0 1.4cqw rgba(255, 59, 48, .6); }
.ts-meter > b { font-family: var(--f-poster); font-weight: 400; font-size: 5.6cqw; opacity: .3; transition: opacity .3s .8s; }
.b-match .ts-meter > b { opacity: 1; }

/* ---- Outro --------------------------------------------------------------------- */

.tsc--outro { gap: 6px; }
.tposter--w { font-size: clamp(56px, 18vw, 110px); opacity: 0; }
.tposter--hot { color: var(--hot); }
.b-plug [data-w="plug"], .b-play [data-w="play"] { animation: t-slam .5s cubic-bezier(.2, .9, .3, 1) forwards; }
.tout__sign { margin-top: 18px; opacity: 0; transition: opacity .5s .3s; }
.b-play .tout__sign { opacity: 1; }
.tout__go { margin-top: 28px; width: min(320px, 80vw); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s, transform .4s, visibility 0s .4s; }
.b-go .tout__go { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .4s; }

@media (max-height: 640px) {
  .tour__cap { font-size: 15px; }
  .tour__stage { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }
  .tsc--power { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour, .tour *, .tour *::before, .tour *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}

/* Your profile: the photo at the top right, as in the app */
.tphone__me { position: absolute; z-index: 2; top: 3cqw; right: 4.5cqw; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.tphone__me svg { width: 6cqw; height: 6cqw; }
.tphone__me.is-on { box-shadow: 0 0 0 .5cqw #E4511B, 0 0 2cqw .3cqw rgba(228, 81, 27, .6); }
.tphone__me.is-on::before { display: none; }
/* The top row, as in the app: BACKLINE on the left; My business · bell · photo on the right */
.tscr--home .ts-head { margin-top: -6cqw; }
.tphone__bell { position: absolute; z-index: 2; top: 3.3cqw; right: 14cqw; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line); color: var(--muted); }
.tphone__bell svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tphone__bell i { position: absolute; top: -1cqw; right: -1cqw; min-width: 4cqw; height: 4cqw; border-radius: 2cqw; background: #E4511B; color: #fff; font: 700 2.6cqw/4cqw system-ui; text-align: center; font-style: normal; }

/* My business (studios and lessons scene) */
.tphone__biz { position: absolute; z-index: 2; top: 3.4cqw; right: 23.5cqw; display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2.4cqw; border-radius: 999px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); font-size: 2.6cqw; font-weight: 700; }
.tphone__biz svg { width: 4cqw; height: 4cqw; }
.tphone__biz.is-on { box-shadow: 0 0 0 .5cqw #E4511B, 0 0 2cqw .3cqw rgba(228, 81, 27, .6); }
.tphone__biz.is-on::before { display: none; }
.ts-bizstats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; border-radius: 3cqw; }
.ts-bizstats > span { display: grid; gap: .4cqw; padding: 3cqw; border-radius: 3cqw; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.ts-bizstats small { font-size: 2.6cqw; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ts-bizstats b { font-family: var(--f-poster); font-size: 8cqw; line-height: 1; }
.ts-bizstats em { font-style: normal; font-size: 2.8cqw; color: var(--muted); }
.ts-agenda { display: grid; padding: 0 3cqw; border-radius: 3cqw; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.ts-agenda .ts-row:last-child { border-bottom: 0; }
.ts-ok { color: #1F8A4C !important; }