/* Chord Lens — /tools, the tools hub (P328, frame fFKKY). The landing's tokens and type; only its own blocks here. */

.tl-hero { overflow: hidden; isolation: isolate; padding-block: clamp(110px, 12vw, 170px) 0; }

.tl-hero__glow {
  position: absolute;
  top: -180px;
  right: -120px;
  z-index: -1;
  width: 900px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #e0184f55, #8b2be233 45%, transparent 75%);
  filter: blur(30px);
  pointer-events: none;
}

.tl-hero__title { margin: 0; font-weight: 400; }
.tl-hero__title .lp-display { display: block; max-width: 11ch; font-size: clamp(64px, 11.5vw, 168px); color: var(--lp-ink); }
.tl-hero__title .lp-hand { margin-top: 0.5em; font-size: clamp(24px, 3vw, 44px); text-transform: uppercase; }

.tl-lede { max-width: 720px; margin: 28px 0 0; font-size: 20px; }

.tl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.tl-sec { padding-block: clamp(56px, 7vw, 110px) 0; }
.tl-note { font-size: 30px; }

.tl-tag { font: 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }
.tl-tag--gold { color: var(--lp-gold); }

/* The toolkits (P330, frame g5WSs0): jump links under the heading, then each toolkit behind a rule, its
   name and eyebrow on the left and its one-line promise on the right, over its cards. */
.tl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.tl-jump a {
  padding: 7px 14px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--lp-ink-2);
  text-decoration: none;
  transition: color 150ms, border-color 150ms;
}

.tl-jump a:hover { border-color: #ffffff40; color: var(--lp-ink); }
.tl-jump a:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

.tl-set {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  align-items: end;
  gap: 0 32px;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid var(--lp-line);
  /* A jump link lands the rule 32 px under the fixed header. */
  scroll-margin-top: 102px;
}

.tl-set .lp-eyebrow { grid-column: 1 / -1; }
.tl-set__name { margin: 0; font-size: clamp(36px, 4.4vw, 60px); }
.tl-set__line { margin: 0; padding-bottom: 6px; font-size: 15px; line-height: 1.55; color: var(--lp-ink-2); }

@media (max-width: 719px) {
  .tl-set { grid-template-columns: 1fr; }
  .tl-set__line { margin-top: 12px; padding-bottom: 0; }
}

/* A toolkit's cards (P329, frame x9Ri5): equal cards, each a whole link — the tool pages' .yt-card look,
   a 16:10 illustration on top, the CTA pinned to the foot. */
.tl-kit {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
}

.tl-tool {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ffffff14;
  border-radius: 20px;
  background: #ffffff06;
  color: inherit;
  text-decoration: none;
}

.tl-tool--hot { border-color: #ff2d5559; background: linear-gradient(160deg, #2a0c1c, #120910); }
.tl-tool--hot .tl-tag { color: var(--lp-hot); }
.tl-tool:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }

.tl-tool__body { display: flex; flex: 1; flex-direction: column; padding: 18px 14px 14px; }
.tl-tool h4 { margin: 8px 0 0; font-size: 19px; font-weight: 600; color: #fff; }
.tl-tool p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--lp-ink-2); }
.tl-tool__cta { margin-top: auto; padding-top: 20px; font-size: 15px; font-weight: 600; color: var(--lp-hot); }
.tl-tool:hover .tl-tool__cta { text-decoration: underline; }

/* The illustration panel: drawn in HTML and CSS, decorative. */
.tl-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 16 / 10;
  border: 1px solid #ffffff0f;
  border-radius: 12px;
  background: #0a0a0d;
  font: 600 11px var(--lp-mono);
  color: var(--lp-ink-2);
  overflow: hidden;
}

.tl-row { display: flex; align-items: center; gap: 6px; }
.tl-art--chords { flex-direction: row; gap: 8px; }

.tl-chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 46px;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  background: #ffffff08;
  font-size: 13px;
}

.tl-chip.is-lit,
.tl-pill.is-lit {
  border-color: transparent;
  background: linear-gradient(180deg, #ff2d55, #b0179a);
  color: #fff;
}

.tl-chip.is-lit { width: 50px; height: 60px; font-size: 18px; box-shadow: 0 10px 28px #e0184f55; }
.tl-arrow { color: var(--lp-ink-3); }

.tl-pill {
  padding: 4px 9px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: #ffffff08;
  font-size: 10px;
  text-transform: uppercase;
}

/* Stems: six lanes, a mono label and four bars each. */
.tl-art--stems { align-items: stretch; gap: 7px; padding: 0 18%; }
.tl-lane { display: flex; align-items: center; gap: 4px; }
.tl-lane b { width: 30px; flex: none; font: 9px var(--lp-mono); color: var(--lp-ink-3); }
.tl-lane i { flex: 1; height: 6px; border-radius: 3px; background: var(--c); transform-origin: left; }
.tl-lane i:nth-child(3) { flex: 1.6; }
.tl-lane i:nth-child(4) { flex: 0.6; }
.tl-lane:nth-child(odd) i:nth-child(5) { flex: 1.4; }
.tl-lane:nth-child(1) { --c: #ff4d6d; }
.tl-lane:nth-child(2) { --c: #f5a524; }
.tl-lane:nth-child(3) { --c: #9b6bff; margin-right: 10%; }
.tl-lane:nth-child(4) { --c: #2dd4bf; margin-right: 30%; }
.tl-lane:nth-child(5) { --c: #4c8dff; }
.tl-lane:nth-child(6) { --c: #7bd88f; margin-right: 20%; }

/* Vocals muted: the pill takes the first child slot, so the lanes count from 2. */
.tl-art--muted .tl-lane:nth-child(2) { --c: #ff4d6d; opacity: 0.3; }
.tl-art--muted .tl-lane:nth-child(3) { --c: #f5a524; margin-right: 0; }
.tl-art--muted .tl-lane:nth-child(4) { --c: #9b6bff; margin-right: 10%; }
.tl-art--muted .tl-lane:nth-child(5) { --c: #2dd4bf; margin-right: 30%; }
.tl-art--muted .tl-lane:nth-child(6) { --c: #4c8dff; margin-right: 0; }
.tl-art--muted .tl-lane:nth-child(7) { --c: #7bd88f; margin-right: 20%; }
/* Karaoke: Other muted too. */
.tl-art--karaoke .tl-lane:nth-child(7) { opacity: 0.3; }
.tl-art--muted .tl-pill { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-color: #ff2d5540; background: #ff2d5526; font-size: 8px; color: var(--lp-hot); }
/* Guitar muted: the Studio's lane order, with the guitar lane (fifth) dimmed instead of the vocals. */
.tl-art--guitar .tl-lane:nth-child(2) { opacity: 1; }
.tl-art--guitar .tl-lane:nth-child(6) { opacity: 0.3; }

/* One stem soloed: the lit lane stays, the rest dim; the pill comes after the lanes so they keep their counts. */
.tl-art--solo .tl-lane:not(.is-lit) { opacity: 0.3; }
.tl-art--solo .tl-pill { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-color: #ffd60a40; background: #ffd60a1f; font-size: 8px; color: var(--lp-gold); }

/* Key: a stepper over G → A. */
.tl-step { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border: 1px solid var(--lp-line); border-radius: 999px; color: var(--lp-ink-3); }
.tl-step span:last-child { padding-right: 6px; }
.tl-step__n { padding: 3px 9px; border-radius: 999px; background: #ff2d5526; color: var(--lp-hot); font-size: 13px; }

/* Loop: speeds over a track with its loop region. */
.tl-track { position: relative; width: 72%; height: 2px; border-radius: 1px; background: #ffffff1f; }
.tl-track__loop { position: absolute; left: 33%; top: -12px; width: 24%; height: 26px; border: 1px solid var(--lp-hot); border-radius: 6px; background: #ff2d5533; }

/* Lyrics: chords over the sung line. */
.tl-art--lyrics { align-items: flex-start; padding: 0 18%; font-weight: 400; }
.tl-sung { display: grid; gap: 4px; }
.tl-sung__chords { display: flex; gap: 40px; font-weight: 600; font-size: 10px; color: var(--lp-ink-3); }
.tl-sung__chords .is-lit { color: var(--lp-hot); }
.tl-sung__line { font: 14px var(--lp-font); color: var(--lp-ink-2); }
.tl-sung__line.is-lit { font-weight: 600; color: #fff; }
.tl-sung__next { font: 12px var(--lp-font); color: var(--lp-ink-3); }

/* Chord shapes: Am on six strings, four frets, three dots. */
.tl-shape { display: grid; justify-items: center; gap: 8px; }
.tl-shape__name { font-size: 12px; color: #fff; }

.tl-fret {
  position: relative;
  width: 101px;
  height: 83px;
  border-top: 3px solid var(--lp-ink-2);
  border-bottom: 1px solid #ffffff4d;
  background:
    repeating-linear-gradient(90deg, #ffffff4d 0 1px, transparent 1px 20px) 0 0 / 101px 100%,
    repeating-linear-gradient(180deg, transparent 0 20px, #ffffff4d 20px 21px);
}

.tl-fret i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lp-hot); }
.tl-fret i:nth-child(1) { left: 60px; top: 10px; }
.tl-fret i:nth-child(2) { left: 20px; top: 31px; }
.tl-fret i:nth-child(3) { left: 40px; top: 31px; }

/* Key and BPM, metronome, spoken cues: four beats, the first bigger and red. */
.tl-art--keybpm .tl-pill { padding: 8px 14px; font-size: 13px; }
.tl-art--cues .tl-row:first-child { gap: 6px; }
.tl-pill--dyn { border-color: color-mix(in srgb, var(--lp-gold) 45%, transparent); color: var(--lp-gold); }
.tl-beats { gap: 12px; }
.tl-beats i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff2e; }
.tl-beats i:first-child { width: 16px; height: 16px; background: var(--lp-hot); }

/* The platform cards (Where it runs). */
.tl-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
}

.tl-note + .tl-grid { margin-top: 48px; }

.tl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  background: #ffffff06;
}

.tl-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tl-card h3 { margin: 0; font-size: 20px; font-weight: 600; color: #fff; }
.tl-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lp-ink-2); }
.tl-card .tl-card__sub { font: 12px var(--lp-mono); color: var(--lp-ink-3); }

.tl-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #ff2d551f;
  fill: none;
  stroke: var(--lp-hot);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-icon--gold { padding: 0; background: none; stroke: var(--lp-gold); }
/* The sprite's Phosphor icons are filled shapes. */
.tl-icon:has(use) { fill: var(--lp-gold); stroke: none; }

.tl-link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--lp-ink); text-decoration: none; }
.tl-link--hot { color: var(--lp-hot); }
.tl-link:hover { text-decoration: underline; }
.tl-link:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; border-radius: 4px; }

/* Built for playing along: heading left, prose right. */
.tl-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px clamp(32px, 6vw, 96px); }
.tl-why__title { font-size: clamp(44px, 5vw, 72px); }
.tl-why__text .lp-body { max-width: 640px; margin: 0 0 18px; }

.tl .lp-final { margin-top: clamp(56px, 7vw, 110px); }


/* ---- Motion (guide.js adds html.lp-motion only when motion is allowed) ---- */

/* The toolkit reveals card by card: entrance() marks the grid, so the grid holds still and its cards fade
   up in turn. Without JS or under reduced motion, nothing waits. */
.lp-motion main .tl-kit.is-waiting:not(.is-in) { opacity: 1; translate: none; }
.lp-motion .tl-kit.is-waiting > li { transition: opacity 700ms var(--lp-ease-out) var(--d, 0ms), translate 700ms var(--lp-ease-out) var(--d, 0ms); }
.lp-motion .tl-kit.is-waiting:not(.is-in) > li { opacity: 0; translate: 0 32px; }
.tl-kit > li:nth-child(2) { --d: 70ms; }
.tl-kit > li:nth-child(3) { --d: 140ms; }
.tl-kit > li:nth-child(4) { --d: 210ms; }
.tl-kit > li:nth-child(5) { --d: 280ms; }
.tl-kit > li:nth-child(6) { --d: 350ms; }
.tl-kit > li:nth-child(7) { --d: 420ms; }
.tl-kit > li:nth-child(8) { --d: 490ms; }

/* Every card lifts the same way; the border lights. The lift is a transform, so it never fights the
   reveal's translate. */
.tl-tool { transition: border-color 200ms var(--lp-ease-out), box-shadow 200ms var(--lp-ease-out); }
.tl-tool:is(:hover, :focus-visible) { border-color: #ff2d5559; box-shadow: 0 18px 44px -20px #ff2d5566; }
.tl-tool--hot:is(:hover, :focus-visible) { border-color: #ff2d55a6; }

@media (prefers-reduced-motion: no-preference) {
  .tl-tool { transition-property: border-color, box-shadow, transform; }
  .tl-tool:is(:hover, :focus-visible) { transform: translateY(-4px); }
}

/* One small move in the illustration on hover or focus. */
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-art--chords .is-lit { animation: tl-chip-off 600ms steps(1) forwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-art--chords .is-lit + .tl-chip { animation: tl-chip-on 600ms steps(1) forwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-art--stems .tl-lane i { animation: tl-pulse 900ms var(--lp-ease-out) var(--lag, 0ms) 2; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-art--muted .tl-lane:nth-child(2) i { animation: none; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-art--karaoke .tl-lane:nth-child(7) i { animation: none; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-step__n { animation: tl-nudge 500ms var(--lp-ease-out); }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-track__loop { translate: 22% 0; }
.lp-motion .tl-track__loop { transition: translate 500ms var(--lp-ease-out); }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-sung__line { animation: tl-line-off 1.6s steps(1) forwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-sung__next { animation: tl-line-on 1.6s steps(1) forwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-fret i { animation: tl-pop 360ms var(--lp-ease-out) backwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-fret i:nth-child(2) { animation-delay: 90ms; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-fret i:nth-child(3) { animation-delay: 180ms; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-beats i { animation: tl-beat 1.6s steps(1) forwards; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-beats i:nth-child(2) { animation-name: tl-beat-2; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-beats i:nth-child(3) { animation-name: tl-beat-3; }
.lp-motion .tl-tool:is(:hover, :focus-visible) .tl-beats i:nth-child(4) { animation-name: tl-beat-4; }
.tl-lane:nth-child(2) i { --lag: 40ms; }
.tl-lane:nth-child(3) i { --lag: 80ms; }
.tl-lane:nth-child(4) i { --lag: 120ms; }
.tl-lane:nth-child(5) i { --lag: 160ms; }
.tl-lane:nth-child(n + 6) i { --lag: 200ms; }

/* Chords: the lit chip steps on to the next one and stays. */
/* Lyrics: timed by the line, so the light steps from one line to the next. */
@keyframes tl-line-off { 50%, 100% { font-weight: 400; color: var(--lp-ink-2); } }
@keyframes tl-line-on { 50%, 100% { color: #fff; } }
@keyframes tl-chip-off { 50%, 100% { border-color: var(--lp-line); background: #ffffff08; box-shadow: none; color: var(--lp-ink-2); } }
@keyframes tl-chip-on { 50%, 100% { border-color: transparent; background: linear-gradient(180deg, #ff2d55, #b0179a); box-shadow: 0 10px 28px #e0184f55; color: #fff; } }
@keyframes tl-pulse { 50% { scale: 1 1.6; } }
@keyframes tl-nudge { 40% { translate: 0 -3px; scale: 1.12; } }
@keyframes tl-pop { from { scale: 0; } 70% { scale: 1.25; } }

/* Lyrics: the lit word moves along the line. */

/* Metronome: the red beat steps across the four dots. */
@keyframes tl-beat { 25%, 100% { width: 9px; height: 9px; background: #ffffff2e; } }
@keyframes tl-beat-2 { 25% { background: var(--lp-hot); scale: 1.4; } 50%, 100% { background: #ffffff2e; scale: 1; } }
@keyframes tl-beat-3 { 50% { background: var(--lp-hot); scale: 1.4; } 75%, 100% { background: #ffffff2e; scale: 1; } }
@keyframes tl-beat-4 { 75%, 100% { background: var(--lp-hot); scale: 1.4; } }