/* Public template pages: /templates (templates/start_templates.html) and /templates/<slug>
   (templates/start_template.html). Cards, tabs and motion names are in cards.css. */
.tp { margin: 0; min-height: 100vh; background: var(--vt-bg); color: var(--vb-paper); font: 400 16px/1.5 var(--vb-body); overflow-x: hidden; }
.tp h1, .tp h2, .tp h3 { margin: 0; }
.tp p { margin: 0; }
.tp .label { font: 500 11px/1.3 var(--vb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vt-faint); }
.tp .disp { font-family: var(--vb-display); font-weight: 900; line-height: .92; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.tp-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--vb-hi); color: var(--vb-hi-ink); text-decoration: none; font-weight: 600; }
.tp-skip:focus { top: 12px; }
@keyframes PlayPulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
@keyframes HerePulse { 50% { box-shadow: 0 0 0 6px rgb(255 131 168 / .12); } }
@keyframes FanIn { from { opacity: 0; filter: blur(10px); transform: translateX(-50%) translateY(40px) rotate(0); } }
@keyframes Float { 50% { translate: 0 -8px; } }
@keyframes AuroraFlow { to { transform: rotate(360deg); } }
@keyframes LineGrow { from { width: 0; } }

/* AuroraFlow behind the page */
.tp-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tp-aurora i { position: absolute; inset: -45%; filter: blur(90px); opacity: .13; animation: AuroraFlow 26s linear infinite;
  background: conic-gradient(from 30deg, transparent 0 20%, var(--vb-hi) 30%, transparent 42%, var(--vt-violet) 58%, transparent 70%, var(--vb-pen) 82%, transparent 92%); }
.tp-aurora i + i { inset: -30%; opacity: .08; animation-duration: 38s; animation-direction: reverse; }
.tp-page { position: relative; z-index: 1; }

/* Buttons */
.tp-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 99px; background: var(--vb-hi); color: var(--vb-hi-ink); font: 600 16px/1 var(--vb-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--vt-ease), box-shadow .2s, background .2s; }
.tp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(255 131 168 / .35); background: #ffa0bd; }
.tp-cta:active { transform: scale(.97); }
.tp-cta.sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.tp-cta.block { width: 100%; }
.tp-cta > span:not(.sh), .tp-cta > svg { position: relative; z-index: 1; }
/* GlowOrbit: a light running round the main buttons */
.tp-orbit::before { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: inherit; filter: blur(.5px);
  background: conic-gradient(from var(--fb-orbit), var(--vb-hi), var(--vt-violet), #ffd1de, var(--vb-pen), var(--vb-hi)); animation: GlowOrbit 3.2s linear infinite; }
.tp-orbit::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; }
.tp-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--vb-hi); font: 600 15px/1.3 var(--vb-body); text-decoration: none; cursor: pointer; }
.tp-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tp-link svg { width: 16px; height: 16px; transition: transform .25s var(--vt-ease); }
.tp-link:hover svg { transform: translateX(4px); }

/* Header */
.tp-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 12px clamp(16px, 3vw, 36px);
  background: rgb(22 23 28 / .82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--vt-line); }
.tp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--vb-paper); text-decoration: none; font: 900 24px/1 var(--vb-display); letter-spacing: .06em; text-transform: uppercase; }
.tp-brand img { width: 28px; height: 28px; }
.tp-nav { display: flex; gap: 4px; margin-left: 16px; }
.tp-nav a { padding: 8px 12px; border-radius: 10px; color: var(--vt-soft); text-decoration: none; font-size: 15px; }
.tp-nav a:hover { color: var(--vb-paper); }
.tp-nav a[aria-current] { color: var(--vb-paper); background: rgb(255 255 255 / .05); }
.tp-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tp-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--vb-paper); text-decoration: none; font: 500 15px var(--vb-body); }
.tp-login:hover { color: var(--vb-hi); }

/* Layout */
.tp-wrap { position: relative; max-width: 1140px; margin: 0 auto; padding: 0 36px; }
.tp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: center; padding: 56px 0 30px; }
.tp-hero h1 { font-size: clamp(52px, 7.4vw, 84px); margin: 12px 0 18px; }
.tp-hero h1 em, .tp-band h2 em { font-style: normal; color: var(--vb-hi); }
.tp-lead { max-width: 520px; color: var(--vt-muted); font-size: 18px; }
.tp-hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.tp-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font: 500 11px var(--vb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vt-faint); }
.tp-proof b { color: var(--vb-paper); font-weight: 500; }
.tp-fan { position: relative; height: 380px; }
.tp-fan figure { position: absolute; top: 20px; left: 50%; margin: 0; width: 170px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; border: 1px solid var(--vt-line-2);
  box-shadow: 0 30px 60px rgb(0 0 0 / .5); transform: translateX(-50%) translateX(var(--x)) rotate(var(--r));
  animation: FanIn 1.1s var(--vt-ease) both, Float 6s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms + 200ms), calc(var(--i) * -2s); }
.tp-fan figure:nth-child(2) { z-index: 2; top: 0; }
.tp-fan img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 26px 0 12px; scroll-margin-top: 80px; }
.tp-sec-head h2 { font-size: 40px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 22px 18px; padding-top: 14px; }
.tp-grid .vt-card[hidden] { display: none; }
.tp-empty { padding: 30px 0; color: var(--vt-soft); }

/* FAQ */
.tp-faq { max-width: 820px; margin: 70px auto 0; }
.tp-faq h2 { font-size: 44px; margin-bottom: 18px; }
.tp-faq details { border-top: 1px solid var(--vt-line); }
.tp-faq details:last-child { border-bottom: 1px solid var(--vt-line); }
.tp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 4px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; }
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vt-line-2); transition: transform .35s var(--vt-ease), border-color .2s, background .2s; }
.tp-faq summary i::before, .tp-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; transition: transform .35s var(--vt-ease); }
.tp-faq summary i::after { transform: rotate(90deg); }
.tp-faq details[open] summary i { transform: rotate(180deg); border-color: var(--vb-hi); background: var(--vb-hi-tint); }
.tp-faq details[open] summary i::after { transform: rotate(0deg); }
.tp-faq summary:hover { color: var(--vb-hi); }
.tp-faq details p { max-width: 64ch; padding: 0 4px 20px; color: var(--vt-muted); animation: SilkReveal .45s var(--vt-ease) both; }
.tp-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 70px 0 0; padding: 40px; border-radius: 26px; border: 1px solid var(--vt-line-2);
  background: radial-gradient(circle at 15% 0%, rgb(255 131 168 / .22), transparent 55%), radial-gradient(circle at 100% 100%, rgb(122 92 255 / .22), transparent 55%), var(--vt-card-solid); }
.tp-band h2 { font-size: 44px; }
.tp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 32px 0 40px; color: var(--vt-faint); font-size: 13px; }
.tp-foot nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tp-foot a { color: var(--vt-soft); text-decoration: none; }
.tp-foot a:hover { color: var(--vb-hi); }

/* Detail: a drawer on desktop, a sheet on phones, and the full page for direct visits */
.tp-ovl { position: fixed; inset: 0; z-index: 40; }
.tp-ovl[hidden] { display: none; }
.tp-scrim { position: absolute; inset: 0; background: rgb(8 8 12 / .62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s; }
.tp-ovl.on .tp-scrim { opacity: 1; }
.tp-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(660px, 100%); overflow-y: auto; overscroll-behavior: contain; background: #1b1c22;
  border-left: 1px solid var(--vt-line-2); box-shadow: -30px 0 80px rgb(0 0 0 / .5); transform: translateX(104%); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.tp-ovl.on .tp-drawer { transform: none; }
.tp-ovl.on .dt > *, .tp-detail .dt > * { animation: SilkReveal .6s var(--vt-ease) both; animation-delay: calc(var(--d, 0) * 70ms + 200ms); }
html.tp-lock { overflow: hidden; }
.dt { display: flex; flex-direction: column; gap: 22px; padding: 26px 30px 40px; }
.dt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dt-crumb { font: 500 11px/1.5 var(--vb-mono); letter-spacing: .06em; color: var(--vt-faint); }
.dt-crumb a { color: var(--vt-soft); text-decoration: none; }
.dt-crumb a:hover { color: var(--vb-hi); }
.dt-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--vt-line-2); border-radius: 50%; background: none; color: var(--vt-soft); cursor: pointer; }
.dt-x:hover { color: var(--vb-paper); border-color: var(--vb-hi); }
.dt-title { margin-top: 8px !important; font-size: 54px; }
.dt-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.dt-player { position: relative; overflow: hidden; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; border: 1px solid var(--vt-line-2); background: #000; box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
.dt-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dt-pill { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgb(22 23 28 / .75);
  backdrop-filter: blur(8px); font: 500 10.5px var(--vb-mono); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.vt .dt-pill svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.dt-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dt-sec { display: flex; flex-direction: column; gap: 8px; }
.dt-hook { font: 700 26px/1.2 var(--vb-body); letter-spacing: -.01em; text-wrap: balance; }
.dt-hook::before { content: "\201C"; color: var(--vb-hi); }
.dt-hook::after { content: "\201D"; color: var(--vb-hi); }
.dt-style { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--vt-line); border-radius: 14px; background: rgb(22 23 28 / .5); }
.dt-style img { width: 84px; height: 52px; flex: none; border-radius: 9px; object-fit: cover; background: var(--vt-card-solid); }
.dt-style b { display: block; font-weight: 600; }
.dt-style span { display: block; color: var(--vt-soft); font-size: 13.5px; line-height: 1.35; }
.dt-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dt-facts li { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--vt-line-2); font: 500 10.5px var(--vb-mono); color: var(--vt-muted); letter-spacing: .04em; }
.dt-fine { color: var(--vt-faint); font-size: 13px; text-align: center; }
.dt-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dt-lines li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--vt-line); line-height: 1.45; color: var(--vt-muted); transition: color .3s; }
.dt-lines li:first-child { border-top: 0; }
.dt-lines time { font: 500 11px/1.9 var(--vb-mono); color: var(--vb-hi); }
.dt-lines li.now { color: var(--vb-paper); }
.dt-lines li.now time::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--vb-hi); vertical-align: 1px; animation: HerePulse 1.6s infinite; }
.dt-prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dt-prompt { padding: 16px 18px; border-radius: 16px; border: 1px dashed rgb(255 131 168 / .4); background: rgb(255 131 168 / .05); font: 400 13px/1.7 var(--vb-mono); color: var(--vt-muted); }
.dt-copy { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--vt-line-2); border-radius: 99px; background: transparent; color: var(--vb-paper); font: 500 13px var(--vb-body); cursor: pointer; transition: border-color .2s, color .2s; }
.dt-copy:hover { border-color: var(--vb-hi); }
.dt-copy.ok { border-color: var(--vb-hi); color: var(--vb-hi); animation: ElasticBounce .45s; }
.dt-full { align-self: flex-start; }
.dt-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dt-mini { display: flex; flex-direction: column; gap: 6px; color: var(--vb-paper); font: 600 13px/1.25 var(--vb-body); text-decoration: none; }
.dt-mini img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 1px solid var(--vt-line); transition: transform .3s var(--vt-ease), border-color .3s; }
.dt-mini:hover img, .dt-mini:focus-visible img { transform: translateY(-4px); border-color: var(--vb-hi); }
.tp-detail { max-width: 1040px; margin: 0 auto; padding: 30px 36px 60px; }
.tp-detail .dt { padding: 0; }
.tp-detail .dt-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; }
.tp-detail .dt-title { font-size: clamp(44px, 7vw, 72px); }

@media (max-width: 900px) {
  .tp-hero { grid-template-columns: minmax(0, 1fr); }
  .tp-detail .dt-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .tp-top { padding: 10px 16px; gap: 10px; }
  .tp-brand { font-size: 20px; } .tp-brand img { width: 24px; height: 24px; }
  .tp-nav { display: none; }
  .tp-acts .tp-cta { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .tp-login { padding: 0 6px; font-size: 14px; }
  .tp-wrap { padding: 0 16px; }
  .tp-hero { padding: 30px 0 18px; gap: 22px; }
  .tp-lead { font-size: 16px; }
  .tp-fan { height: 236px; --fan-x: 92px; }
  .tp-fan figure { width: 112px; top: 6px; }
  .tp-sec-head h2 { font-size: 32px; }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .tp-grid .vt-hook { font-size: 12.5px; }
  .tp-grid .vt-use { font-size: 12.5px; padding: 0 8px; }
  .tp-faq { margin-top: 52px; } .tp-faq h2 { font-size: 34px; } .tp-faq summary { font-size: 16px; }
  .tp-band { padding: 24px; margin-top: 48px; } .tp-band h2 { font-size: 32px; }
  .tp-drawer { width: 100%; top: 0; border-left: 0; transform: translateY(104%); }
  .dt { padding: 16px 16px 32px; gap: 18px; }
  .dt-title { font-size: 40px; }
  .dt-grid, .tp-detail .dt-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dt-player { width: 78%; margin: 0 auto; }
  .dt-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-detail { padding: 18px 16px 48px; }
  .tp-detail .dt-title { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp *, .tp *::before, .tp *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}