/* How it works (index.html #how, landing only): a five-step tour of the studio. how.js plays one scene per step in the
   mock window (cursor, clicks, typing); the markup is each scene's finished state, which is what shows without JS,
   with reduced motion, and before the tour first comes into view. Each step has its own colour pair (--c1, --c2);
   the window and the text take the active step's pair from .tour[data-step]. */
.how-sec { position: relative; isolation: isolate; overflow: hidden; background:
  radial-gradient(38% 45% at 6% 35%, rgba(124, 58, 237, .09), transparent 70%),
  radial-gradient(34% 42% at 96% 75%, rgba(8, 145, 178, .09), transparent 70%),
  radial-gradient(30% 36% at 55% 4%, rgba(234, 88, 12, .07), transparent 70%); }
.tour [data-step="0"], .tour[data-step="0"] { --c1: #7c3aed; --c2: #c026d3; }
.tour [data-step="1"], .tour[data-step="1"] { --c1: #ea580c; --c2: #d97706; }
.tour [data-step="2"], .tour[data-step="2"] { --c1: #db2777; --c2: #9333ea; }
.tour [data-step="3"], .tour[data-step="3"] { --c1: #2563eb; --c2: #0891b2; }
.tour [data-step="4"], .tour[data-step="4"] { --c1: #0891b2; --c2: #059669; }
.tour, .tour-tabs li { --ct: color-mix(in srgb, var(--c1) 78%, var(--text)); --soft: color-mix(in srgb, var(--c1) 11%, transparent); }
.tour { margin-top: 36px; }

/* Step tabs; the bar in the active one is the scene's clock (how.js sets --p from 0 to 1). */
.tour-tabs { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tour-tabs li { position: relative; scroll-margin-top: 96px; }
.tour-tabs button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; padding-inline: 6px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.tour-tabs button:hover { color: var(--text); transform: translateY(-1px); }
.tour-tabs button:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.tour-tabs b { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--soft); color: var(--ct); transition: background .25s, color .25s; }
.tour-tabs li.on button { color: var(--text); border-color: color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: 0 10px 24px -14px var(--c1); }
.tour-tabs li.on b { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
.tour-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; }
[dir="rtl"] .tour-bar { transform-origin: right; }
.tour-tabs li.on .tour-bar { opacity: 1; }

.tour-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }

/* The mock studio window. Scenes share one grid cell, so the window is as tall as the tallest scene. */
.tour-win { position: relative; border: 1px solid color-mix(in srgb, var(--c1) 30%, var(--border)); border-radius: 20px; background: var(--card); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--c1) 65%, transparent), var(--shadow); overflow: hidden; transition: border-color .4s, box-shadow .4s; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.win-bar span { margin-inline-start: 10px; font-size: 12px; color: var(--muted); }
.scenes { display: grid; padding: 22px; }
.scene { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.scene.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }

/* Scene parts */
.sc-head { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; margin-bottom: 14px; }
.sc-head::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 4px var(--soft); }
.sc-badge { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
.sc-lbl { display: block; margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc-field, .sc-select { min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); font-size: 14px; font-weight: 500; transition: border-color .2s, box-shadow .2s; }
.sc-field.pressed, .sc-field:has(.typing) { border-color: var(--c1); box-shadow: 0 0 0 3px var(--soft); }
.typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -2px; background: var(--c1); animation: blink 1s steps(1) infinite; }
.sc-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-select::after { content: '▾'; color: var(--muted); }
.sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-count { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); font-weight: 650; }
.sc-count i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-style: normal; background: var(--card); border: 1px solid var(--border); color: var(--muted); transition: transform .15s; }
.sc-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc-styles span { position: relative; display: flex; align-items: flex-end; height: 64px; padding: 6px 8px; border-radius: 10px; background: linear-gradient(150deg, var(--a), var(--b)); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; transition: transform .15s, box-shadow .2s; }
.sc-styles span.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c1); }
.sc-styles span.on::after { content: '✓'; position: absolute; top: 5px; inset-inline-end: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #fff; color: var(--c1); }
.sc-voice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; transition: border-color .2s, background .2s; }
.sc-voice small { color: var(--muted); font-size: 12px; }
.sc-voice > i { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.sc-voice.on { border-color: color-mix(in srgb, var(--c1) 55%, transparent); background: var(--soft); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-inline-start: auto; }
.eq b { width: 3px; height: 30%; border-radius: 2px; background: var(--c1); }
.sc-voice.on .eq b { animation: eq .9s ease-in-out infinite; }
.sc-voice.on .eq b:nth-child(2) { animation-delay: .15s; }
.sc-voice.on .eq b:nth-child(3) { animation-delay: .3s; }
.sc-voice.on .eq b:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 50% { height: 100%; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shimmer { to { background-position: -150% 0; } }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin-top: 14px; padding: 8px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; transition: transform .15s, background .25s; }
.sc-btn.wide { width: 100%; }
.sc-btn .b-on { display: none; }
.sc-btn.on { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
.sc-btn.on .b-off { display: none; }
.sc-btn.on .b-on { display: inline; }
.sc-btn.on::before { content: '✓'; }
.pressed { transform: scale(.95); }

/* Story and calendar lists */
.sc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sc-list li { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-inline-start: 15px; border-radius: 10px; background: var(--bg-alt); font-size: 14px; overflow: hidden; transition: box-shadow .2s, opacity .4s, transform .4s; }
.sc-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--c1), var(--c2)); }
.sc-list li > span { color: var(--ct); font-weight: 700; flex-shrink: 0; }
.sc-list li em { display: none; margin-inline-start: auto; padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ct); background: var(--soft); white-space: nowrap; }
.sc-list li.hl { box-shadow: 0 0 0 2px var(--c1); }
.sc-list li.hl em { display: inline; }
.sc-cal li::after { content: '✓'; margin-inline-start: auto; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.sc-wait { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bg-alt); font-size: 14px; color: var(--muted); }
.sc-wait i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--soft) 30%, color-mix(in srgb, var(--c1) 35%, transparent) 50%, var(--soft) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }

/* Character cards and the episode strip with the same face */
.sc-chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-chars span { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--a), var(--b)); transition: transform .15s, box-shadow .2s; }
.sc-chars span.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c1); }
.tc { display: block; width: 100%; height: 100%; }
.sc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.sc-strip span { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(170deg, var(--a), var(--b)); transition: opacity .4s, transform .4s; }
.sc-strip b { position: absolute; inset-inline-start: 5px; bottom: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.sc-note { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; transition: opacity .4s; }

/* Video: the phone preview and the making list */
.sc-video { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.sc-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 4px solid #18181b; background: linear-gradient(170deg, #b45309, #4c0519 70%); transition: transform .15s; }
.sc-phone .tc { position: absolute; inset: 18% 0 0; height: auto; }
.sc-cap { position: absolute; inset-inline: 8px; bottom: 34px; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; }
.sc-phone.on .sc-cap span { background: linear-gradient(90deg, #facc15 50%, #fff 50%) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sweep 2.4s linear forwards; }
@keyframes sweep { to { background-position: 0 0; } }
.sc-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); transition: opacity .3s, transform .15s; }
.sc-phone.on .sc-play { opacity: 0; }
.sc-time { position: absolute; inset-inline: 8px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.sc-time::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 2px; background: #fff; }
.sc-phone.on .sc-time::after { animation: fill 2.8s linear forwards; }
@keyframes fill { to { width: 100%; } }
.sc-make { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sc-make li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 500; }
.sc-make li::after { grid-column: 2; grid-row: 1; content: '✓'; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--border); transition: background .3s .6s; }
.sc-make li i { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 3px; background: var(--bg-alt); overflow: hidden; }
.sc-make li i::before { content: ''; display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .9s cubic-bezier(.4, 0, .2, 1); }
.sc-make li.on::after { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.sc-make li.on i::before { width: 100%; }

/* Posting: platforms, time, calendar */
.sc-plats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sc-plats span, .sc-times span { position: relative; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); font-size: 14px; font-weight: 600; transition: transform .15s, border-color .2s, background .2s; }
.sc-plats span { padding-inline-end: 34px; }
.sc-plats span.on, .sc-times span.on { border-color: var(--c1); background: var(--soft); color: var(--ct); }
.sc-plats span.on::after { content: '✓'; position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--c1); }
.sc-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-times span { text-align: center; padding: 8px 6px; }
.sc-times small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.sc-cal { margin-top: 12px; }
.sc-cal li { padding-block: 8px; font-size: 13px; }

/* While a scene plays, what comes later is hidden until the script shows it; waiting rows show only then. */
[data-show] { transition: opacity .4s, transform .4s, box-shadow .2s, background .25s; }
.scene.play [data-show]:not(.shown) { opacity: 0; transform: translateY(8px); }
.scene:not(.play) [data-wait], .scene.play [data-wait].gone { display: none; }

/* Cursor (how.js moves it with --x/--y; a click draws a ring at its tip). */
.tour-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 26px; pointer-events: none; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)); transition: transform .7s cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.tour.playing .tour-cursor { opacity: 1; }
.tour-cursor svg { display: block; width: 100%; height: 100%; }
.tour-cursor::before { content: ''; position: absolute; left: -7px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c1); opacity: 0; }
.tour-cursor.click::before { animation: ring .5s ease-out; }
@keyframes ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

/* Text beside the window */
.tour-infos { display: grid; }
.tour-info { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.tour-info.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .05s, transform .35s .05s; }
.tour-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent); background: var(--soft); color: var(--ct); font-size: 13px; font-weight: 600; }
.tour-info h3 { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: clamp(24px, 3vw, 30px); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.tour-info h3 svg { flex-shrink: 0; color: var(--c1); }
.tour-info p { color: var(--muted); font-size: 17px; }
.tour-checks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.tour-checks li { display: flex; gap: 10px; font-weight: 500; }
.tour-checks li::before { content: '✓'; flex-shrink: 0; color: var(--c1); font-weight: 700; }
.tour .how-actions { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.how-pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.how-pause:hover { border-color: var(--text); }
.how-pause::before { content: ''; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.how-pause[aria-pressed="true"]::before { width: 11px; margin-left: 3px; /* play points right in every language */ background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tour.held *, .tour.held *::before, .tour.held *::after { animation-play-state: paused !important; }

@media (max-width: 1024px) {
  /* One column: the step's text, the window, then the buttons. */
  .tour-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tour-side { display: contents; }
  .tour-infos { order: -1; }
  .tour .how-actions { margin-top: 0; }
}
@media (max-width: 560px) {
  /* Five tabs in one row: the active one shows its name, the others only their number (the name stays for readers). */
  .tour-tabs { gap: 6px; margin-bottom: 24px; }
  .tour-tabs button { padding-inline: 4px; }
  .tour-tabs li:not(.on) .tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tour-tabs li.on button { padding-inline-end: 14px; }
  .scenes { padding: 16px; }
  .sc-styles span { height: 56px; font-size: 11px; }
  .sc-video { grid-template-columns: 112px 1fr; gap: 12px; }
  .sc-make li { font-size: 13px; }
  .tour-info p { font-size: 16px; }
}