/* Generated from the Claude Design export (Submagic Landing, 2026-11-10). */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/media/landing/font-anton-400-normal.23aab0b2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/site/media/landing/font-gabarito-900-normal.0797a696.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/media/landing/font-hanken-grotesk-400-normal.1f21c6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/media/landing/font-hanken-grotesk-500-normal.1f21c6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/site/media/landing/font-hanken-grotesk-600-normal.1f21c6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/media/landing/font-ibm-plex-mono-400-normal.c36f509c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/media/landing/font-ibm-plex-mono-500-normal.a76f53ca.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/media/landing/font-inter-400-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/media/landing/font-inter-500-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/site/media/landing/font-inter-600-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/media/landing/font-inter-700-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/site/media/landing/font-inter-800-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/site/media/landing/font-inter-900-normal.c9407645.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/media/landing/font-inter-tight-700-normal.83d548cd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/site/media/landing/font-inter-tight-800-normal.83d548cd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/site/media/landing/font-montserrat-900-normal.0a53da91.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/site/media/landing/font-playfair-display-800-italic.dd0d16ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/site/media/landing/font-roboto-900-normal.324b011a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caption style boxes: the picker rules copied from styles/templates/*.css in the Submagic app. */
.button-template-adrian { font-family: "Inter Tight", sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #000000; text-transform: none; }
.button-template-adrian .button-template-name { background-color: #fff5e3; padding: 0.12em 0.32em 0.18em; border-radius: 0; }
.button-template-dan2 { font-family: "Anton", sans-serif; font-weight: 400; color: #020202; }
.button-template-dan2 .button-template-name { background-color: #fdfd00; text-transform: uppercase; padding: 0 0.2em; border-radius: 0.2em; }
.button-template-benie { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.05em; color: #ff0000; text-transform: capitalize; text-shadow: 0 0.03em 0.06em #000, 0 0.06em 0.14em rgba(0, 0, 0, 0.45); }
.button-template-alex { font-family: "Anton", sans-serif; font-weight: 400; color: transparent; text-transform: uppercase; font-size: 1.2em; }
.button-template-alex .button-template-name:before { content: attr(data-text); position: absolute; height: 100%; width: 100%; z-index: 1; color: #ffc00b; text-shadow: 0px 0px 10px #233b89, 1px 3px 3px black, 2px 0px 3px black; letter-spacing: 1px; left: 0; }
.button-template-salma { font-family: "Gabarito", sans-serif; color: white; font-weight: 900; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 2px 3px 4px black; }
.button-template-leon { font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.2; color: white; text-transform: uppercase; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.button-template-leon .button-template-name { background-color: #ff5700; padding: 0.2em 0.4em; border-radius: 0.3em; }
.button-template-submagic { font-family: "Roboto", sans-serif; font-weight: 900; line-height: 1.2; color: black; text-transform: uppercase; }
.button-template-submagic .button-template-name { background-color: #ffda18; padding: 0.2em 0.4em; }
.button-template-karl { font-family: "Gabarito", sans-serif; font-weight: 600; line-height: 1.2; color: white; text-transform: uppercase; text-shadow: 0 1px 2px black; }
.button-template-ella { font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.2; color: white; text-transform: uppercase; text-shadow: 0 0 1px black, 0 0 8px white, 0 3px 11px black; }
.button-template-tracy { font-family: "Gabarito", sans-serif; font-weight: 900; line-height: 1.2; color: white; text-transform: uppercase; text-shadow: 0 0 8px white; }
.button-template-nick { font-family: "Arial-Pro", Arial, sans-serif; font-weight: 900; color: #fff; }
.button-template-nick .button-template-name { background-color: #4646468a; padding: 0.1em 0.3em; border-radius: 0.3em; }
.button-template-williamv2 { font-family: "Inter Tight", sans-serif; font-weight: 800; line-height: 1.2; color: black; text-transform: uppercase; }
.button-template-williamv2 .button-template-name { background-color: #ffda18; padding: 0.2em 0.4em; }

/* Layout: one solid white panel on a light ground; a 1000x516 stage scales to fit it.
   Type, after arena.ai: one grotesk for everything people read, a mono for names and numbers.
   One accent colour (orange). Few details, so the eye goes to the video. */
:root {
  --ink: #2E2B29; --ink-strong: #1D1D1B; --muted: #413D39; --soft: #67625B; --faint: #B7B1A9; --line: #EEEDEC;
  --wash: #F8F5F1; --surface: #FFFFFF; --panel: #FCFAF7; --capsule: #F3EFE9; --button: #252523; --accent: #FF4F01; --ground: #FCFAF8;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page { position: relative; display: grid; place-items: center; min-height: 100vh; padding-block: 48px; box-sizing: border-box; overflow: clip; }

/* The panel: solid warm off-white, a hairline and a soft shadow. */
.tour { position: relative; width: min(1080px, 100%); border-radius: 28px; overflow: hidden; background: var(--panel);
  box-shadow: 0 0 0 1px rgba(46, 43, 41, 0.07), 0 10px 30px -18px rgba(46, 43, 41, 0.25), 0 40px 90px -50px rgba(46, 43, 41, 0.45); }

/* Tab bar: a quiet capsule; the white lens slides to the active tab */
.tabs { position: relative; z-index: 2; display: flex; gap: 2px; width: max-content; max-width: calc(100% - 32px); margin: 24px auto 0; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 8px;
  background: var(--capsule); box-shadow: inset 0 0 0 1px rgba(46, 43, 41, 0.08); }
.lens { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; overflow: hidden; box-sizing: border-box; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 2px rgba(46, 43, 41, 0.08), 0 0 0 3px rgba(255, 79, 1, 0.08); transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tabs button { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font: 400 14px/1 var(--sans); cursor: pointer; transition: color 0.2s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button svg { width: 15px; height: 15px; flex: none; }
.tabs button[aria-selected="true"] svg { color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.view { position: relative; z-index: 1; height: calc(516px * var(--s, 1)); margin: 24px 0 28px; }
.stage { position: absolute; left: 50%; top: 0; width: 1000px; height: 516px; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 0; }
/* Out fast, in slightly later: the two tabs barely overlap */
.pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.pane.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.1s; }
.pane-publish { top: 48px; bottom: -48px; }

/* Shared pieces */
.pane .raw, .pane .card, .pane .engine, .pane .src, .pane .clip, .pane .post, .pane .toast, .pane .hl, .pane .fig { opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.fr, .sv, .phone, .player { position: relative; overflow: hidden; background: #1C1C20; box-shadow: 0 0 0 1px rgba(46, 43, 41, 0.06), 0 18px 40px -26px rgba(46, 43, 41, 0.5); }
.fr > video, .sv > video, .phone > video, .player > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; left: 10px; top: 10px; padding: 4px 6px 3px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); color: #fff; font: 400 10px/1 var(--mono); text-transform: uppercase; }
.pill { position: absolute; left: 50%; bottom: -11px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 5px; border-radius: 4px; background: var(--surface); color: var(--ink); font: 500 11.5px/1 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px -8px rgba(46, 43, 41, 0.35); }
.pill svg { width: 14px; height: 14px; display: block; }

/* AI Edit: a small raw video, flat and washed out, then two edits of it in two styles; under them, where they can go */
.links { position: absolute; inset: 0; width: 1000px; height: 516px; pointer-events: none; }
.links.lm { display: none; width: 400px; height: 420px; }
.links path { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1.5 5; opacity: 0.55; animation: flow 0.9s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -6.5; } }
.pane-edit .raw { position: absolute; left: 129px; top: 124px; width: 150px; }
.pane-edit .fr { height: 267px; border-radius: 14px; }
.pane-edit .fr > video { filter: saturate(0.45) contrast(0.7) brightness(1.1) sepia(0.22) hue-rotate(18deg) blur(0.3px); }
.engine { position: absolute; left: 313px; top: 228px; width: 60px; height: 60px; }
.engine img { position: relative; display: block; width: 100%; height: auto; margin-top: 4px; }
.engine .glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 79, 1, 0.28), rgba(255, 79, 1, 0) 68%); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.15); opacity: 0.6; } }
.engine .sun { position: absolute; left: 0; right: 0; top: 4px; aspect-ratio: 230 / 206; border-radius: 13px; overflow: hidden; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 62%); background-size: 280% 100%; mix-blend-mode: soft-light; animation: sheen 1.4s ease-in-out infinite; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.edits { position: absolute; left: 407px; top: 62px; display: flex; gap: 24px; }
.card { position: relative; width: 220px; }
.card .sv { height: 391px; border-radius: 18px; will-change: transform, opacity, filter; }
.edits .pill { bottom: -40px; gap: 7px; height: 26px; padding: 0 9px; }
.edits .pill svg { width: 15px; height: 15px; }

/* Captions: a still list of style boxes on the left with a ring that moves between them, the live phone in the middle, three figures on the right */
.picker { position: absolute; left: 115px; top: 101px; width: 180px; height: 314px; }
.track { display: flex; flex-direction: column; gap: 8px; padding: 0 3px; }
.ring { position: absolute; left: 3px; right: 3px; top: 0; z-index: 1; height: 38px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 9px; pointer-events: none; will-change: transform;
  box-shadow: inset 0 0 0 2px var(--panel), 0 0 0 3px rgba(255, 79, 1, 0.12); }
.picker .box { position: relative; display: grid; flex: none; place-items: center; height: 38px; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 9px; background: rgba(46, 43, 41, 0.07); font-size: 14px; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.picker .box:hover { background: rgba(46, 43, 41, 0.12); }
.picker .box:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker .box .button-template-name { position: relative; display: inline-block; }
.phone { position: absolute; left: 365px; top: 18px; width: 270px; height: 480px; border-radius: 34px; }
.sel { position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box; border: 1.5px dashed rgba(255, 255, 255, 0.9); border-radius: 6px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.sel i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.sel i:nth-child(1) { left: -5px; top: -5px; } .sel i:nth-child(2) { right: -5px; top: -5px; } .sel i:nth-child(3) { left: -5px; bottom: -5px; } .sel i:nth-child(4) { right: -5px; bottom: -5px; }
.hand { position: absolute; left: 0; top: 0; z-index: 3; width: 34px; height: 34px; opacity: 0; transform-origin: 30% 10%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); transition: transform 0.08s; }
.hand svg { width: 100%; height: 100%; display: block; }
.figures { position: absolute; left: 675px; top: 179px; display: flex; flex-direction: column; gap: 28px; }
.fig { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.fig .em { flex: none; width: 30px; font-size: 24px; line-height: 1; }
.fig b { color: var(--ink-strong); font: 600 36px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig span:not(.em) { color: var(--muted); font: 400 18px/1 var(--sans); }

/* Magic Clips: the source (video + timeline) is one block that starts big and steps back to the left */
.src { position: absolute; left: 0; top: 0; width: 600px; transform-origin: 0 0; }
.pane .src { transform-origin: 0 0; }
.player { width: 600px; height: 338px; border-radius: 18px; }
.player > video { filter: saturate(0.82) contrast(0.94); }
.face { position: absolute; z-index: 1; opacity: 0; transform-origin: 50% 50%; will-change: left, top, transform;
  background-image: linear-gradient(rgba(255, 255, 255, 0.26) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.26) 1px, transparent 1px); background-size: 25% 25%; background-position: -1px -1px;
  background-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(214, 211, 207, 0.6); }
.face i { position: absolute; width: 10px; height: 10px; border: 0 solid #D6D3CF; }
.face i:nth-child(1) { left: -2px; top: -2px; border-left-width: 2.5px; border-top-width: 2.5px; }
.face i:nth-child(2) { right: -2px; top: -2px; border-right-width: 2.5px; border-top-width: 2.5px; }
.face i:nth-child(3) { left: -2px; bottom: -2px; border-left-width: 2.5px; border-bottom-width: 2.5px; }
.face i:nth-child(4) { right: -2px; bottom: -2px; border-right-width: 2.5px; border-bottom-width: 2.5px; }
.face span { position: absolute; left: -2px; top: -20px; padding: 3px 5px; border-radius: 3px; background: rgba(65, 61, 57, 0.78); color: #fff; font: 500 9.5px/1 var(--mono); white-space: nowrap; }
.tl { position: relative; margin-top: 26px; }
.wave { display: flex; align-items: center; gap: 2px; height: 34px; }
.wave i { flex: 1; border-radius: 1px; background: rgba(46, 43, 41, 0.16); transition: background-color 0.2s; }
.wave i.hot { background: var(--accent); }
.hl { position: absolute; top: -5px; height: 44px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 6px; background: rgba(255, 79, 1, 0.16); transition: background-color 0.25s, box-shadow 0.25s; }
.hl .fire { position: absolute; left: 50%; top: 50px; font-size: 14px; font-weight: 400; line-height: 1; transform: translateX(-50%); }
.hl em { position: absolute; left: 50%; top: -24px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font: 500 10.5px/1 var(--mono); font-style: normal; transform: translateX(-50%); }
.scan { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 10px 1px rgba(255, 79, 1, 0.6); opacity: 0; }
/* The trail lies behind the cursor whichever way it moves (--trail: -1 left, 1 right, 0 still) */
.scan::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 1px; width: 80px; background: linear-gradient(90deg, rgba(255, 79, 1, 0.2), rgba(255, 79, 1, 0)); transform: scaleX(calc(var(--trail, 0) * -1)); transform-origin: 0 50%; }
.find { display: flex; align-items: center; gap: 7px; margin-top: 36px; color: var(--muted); font: 400 13px/1 var(--sans); }
.find svg { width: 14px; height: 14px; color: var(--accent); }
.hl.lit { background: rgba(255, 79, 1, 0.3); box-shadow: 0 0 0 3px rgba(255, 79, 1, 0.22), 0 0 24px rgba(255, 79, 1, 0.45); }
.clip { position: absolute; top: 105px; width: 172px; height: 306px; }
.clip.k0 { left: 420px; } .clip.k1 { left: 610px; } .clip.k2 { left: 800px; }
.clip .sv { height: 306px; border-radius: 16px; transition: box-shadow 0.25s; }
.badge { position: absolute; left: 50%; bottom: -14px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); transform: translateX(-50%); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -8px rgba(46, 43, 41, 0.45); }
.badge svg { display: block; width: 17px; height: 17px; }
.clip.lit .sv { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(255, 79, 1, 0.16), 0 18px 40px -20px rgba(255, 79, 1, 0.55); }
/* Each short is laid out at 120x213 and scaled up, so its captions keep their proportions */

/* Publish */
.cal { position: absolute; left: 97px; top: 10px; width: 806px; height: 330px; overflow: hidden; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 20px 46px -34px rgba(46, 43, 41, 0.35); }
.cal .hd { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.cal .hd b { font: 500 15px/1 var(--sans); letter-spacing: -0.01em; }
.cal .hd span { color: var(--soft); font: 400 12px/1 var(--mono); }
.cal .hd .btn { margin-left: auto; padding: 8px 13px; border-radius: 4px; background: var(--accent); color: #fff; font: 500 12px/1 var(--sans); }
.days { position: absolute; left: 76px; right: 0; top: 46px; display: flex; height: 38px; }
.days span { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 104px; font: 400 14px/1 var(--mono); }
.days em { color: var(--soft); font: 400 11px/1 var(--sans); font-style: normal; }
.tm { position: absolute; left: 18px; top: calc(92px + var(--r) * 78px); color: var(--soft); font: 400 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cells { position: absolute; left: 76px; top: 84px; display: grid; grid-template-columns: repeat(7, 104px); grid-template-rows: repeat(3, 78px); }
.cells i { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.post { position: absolute; left: calc(82px + var(--d) * 104px); top: calc(91px + var(--r) * 78px); display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; width: 92px; height: 64px; padding: 5px; box-sizing: border-box; border-radius: 10px; background: var(--wash); box-shadow: inset 0 0 0 1px #E8E1D8; }
.post img { grid-row: 1 / 3; width: 30px; height: 53px; border-radius: 5px; object-fit: cover; }
.post .pi { align-self: end; }
.post .pi svg { display: block; width: 15px; height: 15px; }
.post em { align-self: start; color: var(--muted); font: 400 10.5px/1.2 var(--mono); font-style: normal; }
.toast { position: absolute; left: 340px; top: 360px; display: flex; align-items: center; gap: 10px; width: 320px; height: 40px; padding: 0 14px; box-sizing: border-box; border-radius: 6px; background: var(--button); color: var(--ground); font: 400 13px/1 var(--sans); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.5); }
.toast i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2), 0 0 10px rgba(61, 220, 132, 0.7); animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.15; box-shadow: none; } }

@media (prefers-reduced-motion: reduce) { .wave i, .links path, .engine .glow, .engine .sun, .lens, .hand, .pane, .toast i { animation: none; transition: none; } }

/* Phones: under 640 px tour.js sets .narrow, the stage becomes 400 x 420 and each tab is laid out for it */
.tour.narrow { border-radius: 20px; }
.tour.narrow .tabs { margin-top: 12px; max-width: calc(100% - 20px); }
.tour.narrow .tabs button { padding: 8px 11px; font-size: 13px; }
.tour.narrow .tabs button svg { display: none; }
.tour.narrow .view { height: calc(420px * var(--s, 1)); margin: 10px 0 14px; }
.tour.narrow .stage { width: 400px; height: 420px; }
/* AI Edit: a column. The raw clip on top, the engine under it, the two edits side by side below; the links fork down.
   No platform pill here: Publish shows the platforms. */
.tour.narrow .links.ld { display: none; }
.tour.narrow .links.lm { display: block; }
.tour.narrow .pane-edit .raw { left: 170px; top: 4px; width: 60px; }
.tour.narrow .pane-edit .fr { height: 107px; border-radius: 9px; }
.tour.narrow .pane-edit .chip { left: 6px; top: 6px; padding: 3px 4px 2px; font-size: 8.5px; }
.tour.narrow .engine { left: 187px; top: 118px; width: 26px; height: 26px; }
.tour.narrow .engine .glow { inset: -10px; }
.tour.narrow .engine .sun { border-radius: 6px; }
.tour.narrow .edits { left: 44px; top: 151px; gap: 12px; }
.tour.narrow .card { width: 150px; transform-origin: 50% 0; }
.tour.narrow .card .sv { height: 267px; border-radius: 15px; }
.tour.narrow .edits .pill { display: none; }
/* Captions: the list beside a smaller phone, the pair centred; no figures */
.tour.narrow .picker { left: 25px; top: 45px; width: 120px; }
.tour.narrow .picker .box { font-size: 12.5px; }
.tour.narrow .phone { left: 159px; top: 10px; transform: scale(0.8); transform-origin: 0 0; }
.tour.narrow .figures { display: none; }
/* Magic Clips: the source on top, the three shorts in a row under it */
.tour.narrow .clip { top: 190px; width: 124px; height: 220px; }
.tour.narrow .clip.k0 { left: 8px; } .tour.narrow .clip.k1 { left: 138px; } .tour.narrow .clip.k2 { left: 268px; }
.tour.narrow .clip .sv { height: 220px; border-radius: 13px; }
.tour.narrow .badge { bottom: -12px; width: 26px; height: 26px; }
.tour.narrow .badge svg { width: 15px; height: 15px; }
/* Publish: the desktop week, days across and times down, made compact: a wide rectangle that fits the screen.
   Each post is its thumbnail with the platform on its corner; the time is the row's. */
.tour.narrow .pane-publish { top: 48px; bottom: -48px; }
.tour.narrow .cal { left: 8px; top: 0; width: 384px; height: 266px; }
.tour.narrow .cal .hd { gap: 8px; height: 40px; padding: 0 12px; }
.tour.narrow .cal .hd b { font-size: 14px; }
.tour.narrow .cal .hd span { font-size: 11px; }
.tour.narrow .cal .hd .btn { padding: 7px 10px; font-size: 11.5px; }
.tour.narrow .days { left: 44px; top: 40px; height: 34px; }
.tour.narrow .days span { width: 48px; font-size: 12px; }
.tour.narrow .days em { font-size: 10px; }
.tour.narrow .tm { left: 6px; top: calc(82px + var(--r) * 62px); width: 36px; font-size: 9.5px; text-align: center; }
.tour.narrow .cells { left: 44px; top: 74px; grid-template-columns: repeat(7, 48px); grid-template-rows: repeat(3, 62px); }
.tour.narrow .post { left: calc(48px + var(--d) * 48px); top: calc(78px + var(--r) * 62px); display: block; width: 40px; height: 54px; padding: 0; border-radius: 7px; }
.tour.narrow .post img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 7px; }
.tour.narrow .post .pi { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.tour.narrow .post .pi svg { width: 12px; height: 12px; }
.tour.narrow .post em { display: none; }
.tour.narrow .toast { left: 40px; top: 282px; width: 320px; }

body{background:transparent;padding-left:2px!important;padding-right:2px!important}.page{min-height:0;padding-block:2px;display:block;overflow:visible}html,body{overflow:hidden}.tour{margin:0 auto;width:100%;box-shadow:0 0 0 1px rgba(46,43,41,.09)!important}@media(max-width:640px){.tour{border-radius:20px}}