:root {
  color-scheme: dark;
  --ink: #f7f9ff;
  --muted: #a8b1c6;
  --line: rgba(148, 163, 184, .18);
  --panel: #080d19;
  --blue: #4387ff;
  --violet: #9b6cff;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: hidden; background: #02040a; color: var(--ink); font: 400 16px/1.65 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.site-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: #fff; color: #02040a; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 20; top: 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(2,4,10,.86); backdrop-filter: blur(18px); }
.site-header__inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.site-brand img { width: 42px; height: auto; border-radius: 8px; box-shadow: 0 0 26px rgba(67,135,255,.28); }
.site-nav { display: flex; align-items: center; gap: clamp(8px, 1.1vw, 16px); }
.site-nav > a { color: #c3cada; font-size: .82rem; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.site-nav > a:hover, .site-nav > a:focus-visible { color: #fff; }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.site-header__login { display: none; align-items: center; min-height: 44px; padding-inline: 6px; color: #e8eeff; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.site-header__login:hover, .site-header__login:focus-visible { color: #a9c4ff; }
.site-nav > .site-nav__signup { display: none; }
.site-nav-toggle { position: relative; width: 42px; height: 42px; display: none; flex: 0 0 42px; padding: 0; border: 1px solid rgba(126,145,205,.32); border-radius: 10px; background: rgba(9,15,29,.9); color: #e8eeff; cursor: pointer; }
.site-nav-toggle span { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: top .22s ease, opacity .18s ease, transform .22s ease; }
.site-nav-toggle span:first-child { top: 13px; }
.site-nav-toggle span:nth-child(2) { top: 19px; }
.site-nav-toggle span:last-child { top: 25px; }
.site-nav-toggle:hover, .site-nav-toggle:focus-visible { border-color: #82a9ff; background: rgba(24,37,67,.96); outline: none; }
.site-nav-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid rgba(126,164,255,.7); border-radius: 10px; background: linear-gradient(135deg, #286de9, #7858ed); box-shadow: 0 12px 36px rgba(44,99,226,.25); color: #fff; font-weight: 720; line-height: 1.2; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(77,91,237,.34); }
.button--small { min-height: 38px; padding: 8px 16px; color: #fff !important; }
.button--secondary { border-color: var(--line); background: rgba(8,13,25,.72); box-shadow: none; color: #dbe3f4; }
.button--danger { border-color: rgba(248,113,113,.62); background: linear-gradient(135deg, rgba(153,27,27,.9), rgba(185,28,28,.82)); box-shadow: 0 10px 28px rgba(127,29,29,.2); }
.button--danger:hover, .button--danger:focus-visible { border-color: rgba(252,165,165,.86); background: linear-gradient(135deg, #991b1b, #c52a2a); box-shadow: 0 14px 34px rgba(153,27,27,.3); }
.button--danger:focus-visible { outline: 2px solid rgba(248,113,113,.5); outline-offset: 2px; }
.button--danger:active { background: #7f1d1d; box-shadow: inset 0 2px 5px rgba(0,0,0,.3); transform: translateY(1px); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.eyebrow { margin: 0 0 14px; color: #82a9ff; font-size: .76rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }

.hero { position: relative; min-height: 780px; overflow: hidden; background: radial-gradient(circle at 80% 31%, rgba(38,100,255,.23), transparent 26%), radial-gradient(circle at 74% 50%, rgba(132,61,237,.18), transparent 28%), linear-gradient(180deg, #030713, #02040a); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.023) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.023) 1px, transparent 1px); background-size: 64px 64px; content: ""; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 86%); }
.hero__grid { position: relative; z-index: 1; min-height: 780px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); align-items: center; gap: 48px; padding-top: 82px; }
.hero__copy { padding: 40px 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 20px; font-size: clamp(3.5rem, 6vw, 5.2rem); font-weight: 760; letter-spacing: -.065em; line-height: .92; }
h1 span { background: linear-gradient(100deg, #f4f7ff 10%, #77a6ff 52%, #b98aff); background-clip: text; color: transparent; }
h2 { margin-bottom: 20px; font-size: clamp(2.25rem, 4.2vw, 4.3rem); font-weight: 730; letter-spacing: -.05em; line-height: 1.03; }
h3 { margin-bottom: 10px; font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.2; }
.hero__message { max-width: 625px; color: #b6bfd1; font-size: clamp(.92rem, 1.15vw, 1.05rem); line-height: 1.5; }
.hero__message p { margin-bottom: 8px; }
.hero__message p:last-child { margin-bottom: 0; }
.hero__art { position: relative; width: min(100%, 680px); justify-self: end; }
.hero__art img { position: relative; z-index: 2; width: 100%; height: auto; border: 1px solid rgba(157,177,255,.25); border-radius: 32px; box-shadow: 0 42px 100px rgba(0,0,0,.64); object-fit: contain; }
.hero__glow { position: absolute; inset: 8% -10%; background: radial-gradient(circle, rgba(60,131,255,.35), rgba(138,60,255,.17) 38%, transparent 70%); filter: blur(40px); }

.what-is { padding: 40px 0 56px; border-block: 1px solid var(--line); background: radial-gradient(circle at 82% 25%, rgba(92,72,235,.14), transparent 32%), #030610; scroll-margin-top: 82px; }
.what-is__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.what-is__heading h2 { max-width: 760px; }
.what-is__heading > p { max-width: 560px; margin-bottom: 28px; color: var(--muted); font-size: 1.08rem; }
.what-is__visual { position: relative; overflow: hidden; margin: 28px 0 0; border: 1px solid rgba(126,145,205,.28); border-radius: 24px; background: #070b18; box-shadow: 0 38px 100px rgba(0,0,0,.5); }
.what-is__visual img { width: 100%; }
.what-is__thoughts { position: absolute; inset: 0; }
.what-is__thought { position: absolute; margin: 0; padding: clamp(14px, 1.8vw, 24px); border: 1px solid rgba(158,178,255,.34); border-radius: 20px; background: rgba(7,12,27,.9); box-shadow: 0 18px 50px rgba(0,0,0,.4); color: #f3f6ff; font-size: clamp(.88rem, 1.25vw, 1.15rem); font-weight: 650; letter-spacing: -.018em; line-height: 1.3; backdrop-filter: blur(14px); }
.what-is__thought::before, .what-is__thought::after { position: absolute; border-radius: 50%; background: rgba(7,12,27,.92); content: ""; }
.what-is__thought::before { left: -17px; bottom: -14px; width: 15px; height: 15px; }
.what-is__thought::after { left: -29px; bottom: -25px; width: 8px; height: 8px; }
.what-is__thought--primary { top: 6%; right: 4%; width: min(42%, 500px); padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; font-size: clamp(1.2rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; }
.what-is__thought--quality { top: 48%; right: 5%; width: min(33%, 390px); }
.what-is__thought--answer { right: 4%; bottom: 5%; width: min(32%, 380px); border-color: rgba(112,158,255,.58); background: linear-gradient(135deg, rgba(23,54,118,.92), rgba(43,31,94,.92)); }

.solution-platforms { padding: 40px 0 56px; background: radial-gradient(circle at 18% 0%, rgba(55,112,245,.15), transparent 30%), #02040a; scroll-margin-top: 82px; }
.solution-platforms__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.solution-platforms__heading h2 { max-width: 760px; }
.solution-platforms__heading > p { max-width: 560px; margin-bottom: 28px; color: var(--muted); font-size: 1.08rem; }
.demo-callout { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin: 20px auto 0; padding: 15px 20px; border: 1px solid rgba(126,164,255,.28); border-radius: 13px; background: linear-gradient(135deg, rgba(39,103,221,.13), rgba(113,76,220,.11)); color: #dbe5ff; text-align: center; }
.demo-callout strong { color: #fff; }
.demo-callout p { margin: 0; color: var(--muted); }
.demo-callout code { padding: 2px 6px; border: 1px solid rgba(126,164,255,.2); border-radius: 6px; background: rgba(3,7,17,.66); color: #b9ccff; font-size: .84em; }
.platform-grid { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 2.4vw, 32px); margin: 32px 0 0; padding: 0; list-style: none; }
.platform-grid > li { min-width: 0; flex: 0 1 112px; }
.platform-card { width: 100%; min-width: 0; display: flex; align-items: center; flex-direction: column; padding: 14px 8px 12px; border: 1px solid rgba(126,145,205,.18); border-radius: 14px; background: linear-gradient(145deg, rgba(21,34,65,.7), rgba(8,13,28,.76)); color: inherit; font: inherit; cursor: pointer; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.platform-card:hover, .platform-card:focus-visible { border-color: rgba(126,164,255,.42); background: rgba(48,72,135,.13); outline: none; transform: translateY(-2px); }
.platform-card[aria-pressed="true"] { border-color: rgba(126,164,255,.68); background: linear-gradient(145deg, rgba(47,90,186,.22), rgba(105,72,196,.16)); box-shadow: 0 12px 34px rgba(32,68,158,.16); }
.platform-card:disabled { cursor: default; opacity: .58; }
.platform-card:disabled:hover { border-color: rgba(126,145,205,.18); background: linear-gradient(145deg, rgba(21,34,65,.7), rgba(8,13,28,.76)); transform: none; }
.platform-device-render { display: block; flex: none; width: auto; max-width: 94px; height: 56px; margin: 0 auto 8px; object-fit: contain; filter: brightness(1.42) saturate(1.12) drop-shadow(0 0 14px rgba(116,151,255,.52)) drop-shadow(0 8px 15px rgba(68,108,227,.34)); }
.platform-card--phone .platform-device-render { max-width: 34px; }
.platform-card--tablet .platform-device-render { max-width: 78px; }
.platform-card strong { max-width: 100%; color: #f0f4ff; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.platform-card > span:last-child { margin-top: 5px; color: #748098; font-size: .76rem; }
.platform-grid--showcase { margin-top: 0; margin-bottom: 24px; padding-bottom: 22px; }

.layout-feature__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.layout-feature__heading > p { max-width: 560px; margin-bottom: 28px; color: var(--muted); font-size: 1.08rem; }
.platform-showcase { margin-top: 24px; }
.showcase-controls { min-width: 0; }
.showcase-variants { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.showcase-variant { min-height: 38px; padding: 8px 13px; border: 1px solid rgba(126,145,205,.25); border-radius: 999px; background: rgba(7,12,25,.72); color: #9ba7be; font: 650 .78rem/1.2 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.showcase-variant:hover, .showcase-variant:focus-visible { border-color: rgba(126,164,255,.62); color: #fff; outline: none; }
.showcase-variant[aria-pressed="true"] { border-color: rgba(126,164,255,.78); background: linear-gradient(135deg, rgba(39,103,221,.72), rgba(113,76,220,.72)); color: #fff; box-shadow: 0 8px 25px rgba(48,82,196,.2); }
.device-screenshot { width: min(50%, 490px); margin: 24px auto 0; }
.device-mockup { position: relative; width: 100%; filter: drop-shadow(0 42px 70px rgba(0,0,0,.55)) drop-shadow(0 0 55px rgba(78,102,229,.12)); }
.device-mockup__shell { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.device-mockup__viewport { position: absolute; z-index: 2; overflow: hidden; background: #010208; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.device-mockup__content { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.device-screenshot[data-device-frame="tvos"] { width: min(50%, 540px); }
.device-screenshot[data-device-frame="tvos"] .device-mockup { aspect-ratio: 1536 / 1024; }
.device-screenshot[data-device-frame="tvos"] .device-mockup__viewport { top: 4.8%; left: 9.1%; width: 81.8%; height: 68.1%; border-radius: .6%; }
.device-screenshot[data-device-frame="macos"] .device-mockup { aspect-ratio: 1286 / 1193; }
.device-screenshot[data-device-frame="macos"] .device-mockup__viewport { top: 5.2%; left: 12.75%; width: 74.75%; height: 57.25%; border-radius: .3%; }
.device-screenshot[data-device-frame="ios"][data-orientation="portrait"] { width: min(50%, 210px); }
.device-screenshot[data-device-frame="ios"][data-orientation="portrait"] .device-mockup { aspect-ratio: 900 / 1748; }
.device-screenshot[data-device-frame="ios"][data-orientation="portrait"] .device-mockup__viewport { top: 3.05%; left: 10.05%; width: 79.9%; height: 90.6%; border-radius: 9% / 4%; }
.device-screenshot[data-device-frame="ios"][data-orientation="landscape"] { width: min(50%, 490px); }
.device-screenshot[data-device-frame="ios"][data-orientation="landscape"] .device-mockup { aspect-ratio: 1748 / 900; }
.device-screenshot[data-device-frame="ios"][data-orientation="landscape"] .device-mockup__shell { top: 50%; left: 50%; width: 51.49%; height: 194.22%; transform: translate(-50%, -50%) rotate(90deg); }
.device-screenshot[data-device-frame="ios"][data-orientation="landscape"] .device-mockup__viewport { top: 10.05%; left: 6.35%; width: 90.6%; height: 79.9%; border-radius: 4% / 9%; }
.device-screenshot[data-device-frame="ipados"][data-orientation="portrait"] { width: min(50%, 340px); }
.device-screenshot[data-device-frame="ipados"][data-orientation="portrait"] .device-mockup { aspect-ratio: 1043 / 1508; }
.device-screenshot[data-device-frame="ipados"][data-orientation="portrait"] .device-mockup__viewport { top: 6%; left: 10.9%; width: 78.65%; height: 86.2%; border-radius: 4% / 2.6%; }
.device-screenshot[data-device-frame="ipados"][data-orientation="landscape"] { width: min(50%, 520px); }
.device-screenshot[data-device-frame="ipados"][data-orientation="landscape"] .device-mockup { aspect-ratio: 1508 / 1043; }
.device-screenshot[data-device-frame="ipados"][data-orientation="landscape"] .device-mockup__shell { top: 50%; left: 50%; width: 69.16%; height: 144.58%; transform: translate(-50%, -50%) rotate(90deg); }
.device-screenshot[data-device-frame="ipados"][data-orientation="landscape"] .device-mockup__viewport { top: 10.9%; left: 7.8%; width: 86.2%; height: 78.65%; border-radius: 2.6% / 4%; }
.device-screenshot figcaption { padding: 10px 4px 2px; color: #7f8aa1; font-size: .78rem; text-align: center; }
.layouts { background: #050816; scroll-margin-top: 82px; }
.layout-feature { padding: 40px 0 56px; border-top: 1px solid var(--line); scroll-margin-top: 82px; }
.layout-feature--gallery { background: radial-gradient(circle at 18% 45%, rgba(118,67,226,.12), transparent 28%), #030610; }
.layout-feature__heading h2 { max-width: 720px; }

@media (min-width: 981px) {
  .layout-feature { padding-block: 48px 64px; }
  .platform-showcase { min-height: 620px; display: grid; grid-template-columns: minmax(360px, .68fr) minmax(0, 1.32fr); grid-template-rows: auto 1fr; align-items: start; gap: 0 24px; margin-top: 12px; }
  .showcase-controls { width: min(100%, 480px); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(120px, .45fr); grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: center; gap: 12px; }
  .platform-grid--showcase { align-self: center; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0; }
  .platform-grid--showcase > li { width: 100%; flex: none; }
  .platform-grid--showcase .platform-card { min-height: 48px; align-items: center; flex-direction: row; gap: 8px; padding: 5px 10px; text-align: left; }
  .platform-grid--showcase .platform-device-render { width: 44px; max-width: 44px; height: 32px; margin: 0; object-fit: contain; }
  .platform-grid--showcase .platform-card > span:last-child { margin: 0 0 0 auto; white-space: nowrap; }
  .showcase-variants { width: 100%; align-self: center; align-items: stretch; justify-content: center; flex-direction: column; flex-wrap: nowrap; }
  .showcase-variant { width: 100%; }
  .platform-showcase .device-screenshot { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: min(100%, 620px); margin: 0 auto; }
  .platform-showcase .device-screenshot[data-device-frame="tvos"] { width: min(100%, 680px); }
  .platform-showcase .device-screenshot[data-device-frame="ios"][data-orientation="portrait"] { width: min(100%, 240px); }
  .platform-showcase .device-screenshot[data-device-frame="ios"][data-orientation="landscape"] { width: min(100%, 620px); }
  .platform-showcase .device-screenshot[data-device-frame="ipados"][data-orientation="portrait"] { width: min(100%, 390px); }
  .platform-showcase .device-screenshot[data-device-frame="ipados"][data-orientation="landscape"] { width: min(100%, 650px); }
}

@media (min-width: 981px) and (max-height: 1100px) {
  .what-is { padding-block: 32px 40px; }
  .what-is__visual { width: min(100%, 1040px); margin: 18px auto 0; }
  .what-is__thought--primary { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
}

@media (min-width: 681px) and (max-height: 1100px) {
  .public-auth-page--registration .auth-main { min-height: 100vh; align-items: start; padding: 110px 20px 32px; }
  .public-auth-page--registration .auth-card { width: min(100%, 520px); padding: 28px 34px; }
  .public-auth-page--registration .auth-card h1 { margin-bottom: 12px; font-size: clamp(2.35rem, 5vw, 3rem); }
  .public-auth-page--registration .auth-card .eyebrow { margin-bottom: 10px; }
  .public-auth-page--registration .auth-form { margin-top: 16px; }
  .public-auth-page--registration .auth-form label { margin: 10px 0 5px; }
  .public-auth-page--registration .auth-form input { min-height: 44px; }
  .public-auth-page--registration .auth-submit { margin-top: 18px; }
  .public-auth-page--registration .auth-switch { margin-top: 18px; }
}

.steps { padding: 40px 0 56px; background: radial-gradient(circle at 50% 65%, rgba(51,91,211,.14), transparent 38%), #050816; border-block: 1px solid var(--line); scroll-margin-top: 82px; }
.steps__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.steps__heading h2 { max-width: 760px; }
.steps__heading > p { max-width: 560px; margin-bottom: 28px; color: var(--muted); font-size: 1.08rem; }
.setup-film { min-height: 560px; margin-top: 24px; overflow: hidden; border: 1px solid rgba(126,145,205,.26); border-radius: 22px; background: #040817; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.setup-film__caption { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 16px; border-bottom: 1px solid rgba(126,145,205,.18); background: rgba(7,12,26,.98); }
.setup-film__caption strong { color: #eef3ff; font-size: .92rem; }
.setup-film__caption button { min-height: 32px; padding: 6px 13px; border: 1px solid rgba(126,164,255,.32); border-radius: 8px; background: transparent; color: #9eb2dd; font: 680 .72rem/1 Inter, ui-sans-serif, sans-serif; cursor: pointer; }
.setup-film__caption button:hover, .setup-film__caption button:focus-visible { border-color: #82a9ff; color: #fff; outline: none; }
.setup-film__stage { position: relative; min-height: 505px; overflow: hidden; background: radial-gradient(circle at 76% 45%, rgba(54,92,211,.15), transparent 25%), linear-gradient(150deg, #050a18, #030610); }
.setup-browser { position: absolute; top: 30px; left: 30px; width: 46%; height: 410px; overflow: hidden; border: 1px solid rgba(151,169,221,.3); border-radius: 14px; background: #070b14; box-shadow: 0 26px 70px rgba(0,0,0,.48); }
.setup-browser__chrome { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(130,148,200,.18); background: #101522; }
.setup-browser__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #485064; }
.setup-browser__chrome i:first-child { background: #ff6b6b; }
.setup-browser__chrome i:nth-child(2) { background: #f3be4a; }
.setup-browser__chrome i:nth-child(3) { background: #4dcc72; }
.setup-browser__chrome span { margin-left: auto; margin-right: auto; padding: 3px 50px; border: 1px solid rgba(130,148,200,.15); border-radius: 6px; background: #080c15; color: #8e99b1; font-size: .65rem; }
.setup-browser__view { position: absolute; inset: 38px 0 0; padding: 24px 28px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.setup-browser__view.is-active { opacity: 1; transform: translateY(0); }
.setup-browser__brand { display: inline-block; margin-bottom: 18px; color: #8eb0ff; font-size: .72rem; font-weight: 760; }
.setup-browser__view h3 { margin-bottom: 15px; font-size: 1.25rem; }
.setup-browser__view--account { width: min(100%, 440px); left: 50%; transform: translate(-50%, 8px); }
.setup-browser__view--account.is-active { transform: translate(-50%, 0); }
.setup-browser__view--account label { display: block; margin: 8px 0; color: #9ba7bd; font-size: .68rem; }
.setup-browser__view--account label span { min-height: 34px; display: flex; align-items: center; margin-top: 3px; padding: 6px 10px; border: 1px solid rgba(139,157,206,.25); border-radius: 7px; background: #030711; color: #d8e0f1; font-size: .72rem; }
.setup-browser__view button { min-height: 34px; padding: 7px 14px; border: 1px solid rgba(126,164,255,.55); border-radius: 7px; background: linear-gradient(135deg, #286de9, #7458e8); color: #fff; font: 700 .72rem/1 Inter, ui-sans-serif, sans-serif; }
.setup-browser__view--account button { width: 100%; margin-top: 7px; }
.setup-browser__verified { margin: 9px 0 0; color: #8290aa; font-size: .69rem; text-align: center; }
.setup-browser__verified.is-complete { color: #65dfa3; }
.setup-browser__nav { display: flex; align-items: center; gap: 18px; margin: -24px -28px 22px; padding: 12px 18px; border-bottom: 1px solid rgba(130,148,200,.16); color: #7f8ba3; font-size: .67rem; }
.setup-browser__nav strong { margin-right: auto; color: #f2f5ff; }
.setup-browser__nav .is-selected { color: #8caeff; }
.setup-browser__panel { width: min(100%, 470px); margin: 0 auto; padding: 20px; border: 1px solid rgba(127,149,213,.22); border-radius: 11px; background: #090f1d; }
.setup-browser__panel small, .setup-catalog-editor > small { color: #7ea6ff; font-size: .62rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
.setup-browser__panel h3, .setup-catalog-editor h3 { margin: 5px 0 13px; font-size: 1rem; }
.setup-browser__code { width: 100%; min-height: 40px; display: block; padding: 0 12px; border: 1px solid rgba(131,152,208,.25); border-radius: 7px; background: #030711; color: #cdd9f5; font: 760 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; transition: border-color .25s ease, box-shadow .25s ease; }
.setup-browser__code::placeholder { color: #566176; font-size: .68rem; letter-spacing: .04em; }
.setup-browser__code.is-filled { border-color: rgba(126,164,255,.72); box-shadow: 0 0 0 2px rgba(80,124,236,.12); }
.setup-browser__panel p { margin: 9px 0 0; color: #77849d; font-size: .68rem; text-align: center; }
.setup-browser__panel p.is-complete { color: #65dfa3; }
.setup-browser__access { width: min(100%, 470px); margin: 10px auto 0; color: #707c94; font-size: .66rem; text-align: center; }
.setup-browser__access.is-unlocked { color: #65dfa3; }
.setup-catalog-editor { width: min(100%, 520px); margin: 0 auto; }
.setup-catalog-editor > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 5px; padding: 6px 8px; border: 1px solid rgba(131,152,208,.19); border-radius: 7px; background: #050a15; color: #cbd4e8; font-size: .64rem; }
.setup-catalog-editor > div > span { min-width: 0; }
.setup-catalog-editor > div strong, .setup-catalog-editor > div code { display: block; }
.setup-catalog-editor > div strong { color: #e7edf9; font-size: .64rem; line-height: 1.15; }
.setup-catalog-editor > div code { max-width: 100%; margin-top: 2px; overflow: hidden; color: #8290aa; font: .48rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.setup-catalog-editor b { color: #5cdaa0; font-size: .62rem; }
.setup-catalog-editor button { float: right; margin-top: 10px; }
.setup-catalog-editor button.is-saved { border-color: rgba(74,222,128,.55); background: #126846; }
.setup-phone { position: absolute; z-index: 4; top: 42px; right: 7%; width: 122px; opacity: 0; transform: translateX(45px) scale(.94); transition: top .6s cubic-bezier(.22,.8,.22,1), right .6s cubic-bezier(.22,.8,.22,1), width .6s cubic-bezier(.22,.8,.22,1), opacity .55s ease, transform .6s cubic-bezier(.22,.8,.22,1); }
.setup-phone.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.setup-phone.is-near-browser { right: 31%; transform: translateX(0) scale(1.03); }
.setup-phone.is-grouped { top: 55px; right: 41.5%; width: 100px; opacity: 1; transform: none; }
.setup-phone__body { position: relative; width: 100%; aspect-ratio: 900 / 1748; padding: 8px; border: 2px solid #555d70; border-radius: 22px; background: #03050a; box-shadow: 0 22px 45px rgba(0,0,0,.54), 0 0 30px rgba(68,113,235,.13); }
.setup-phone__body::before { position: absolute; z-index: 3; top: 7px; left: 50%; width: 38%; height: 9px; border-radius: 999px; background: #020308; content: ""; transform: translateX(-50%); }
.setup-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 15%, rgba(57,103,229,.25), transparent 30%), #060a14; }
.setup-app-view { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 14px 9px; opacity: 0; text-align: center; transform: scale(.96); transition: opacity .4s ease, transform .4s ease; }
.setup-app-view.is-active { opacity: 1; transform: scale(1); }
.setup-app-view small { color: #8794ad; font-size: .48rem; }
.setup-app-view strong { margin: 5px 0; color: #f3f6ff; font-size: .75rem; line-height: 1.2; }
.setup-app-view span { color: #7791c8; font-size: .48rem; line-height: 1.35; }
.setup-app-view button { margin-top: 10px; padding: 7px 14px; border: 0; border-radius: 7px; background: #2878ec; color: #fff; font-size: .6rem; font-weight: 760; }
.setup-app-view--playing { width: 100%; height: 100%; padding: 0; object-fit: cover; object-position: top; }
.setup-phone > span { display: block; margin-top: 6px; color: #8794ad; font-size: .64rem; text-align: center; }
.binding-token { position: absolute; z-index: 9; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid rgba(132,169,255,.75); border-radius: 7px; background: #0c1c3a; box-shadow: 0 10px 28px rgba(26,62,143,.36); color: #e9f0ff; font: 760 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; opacity: 0; transition: top .8s cubic-bezier(.22,.8,.22,1), right .8s cubic-bezier(.22,.8,.22,1), opacity .25s ease, transform .8s cubic-bezier(.22,.8,.22,1); }
.binding-token--primary { top: 255px; right: 31%; }
.binding-token--primary.is-visible { opacity: 1; }
.binding-token--primary.is-sent { top: 248px; right: 66%; transform: scale(.9); }
.binding-token--primary.is-received { opacity: 0; }
.setup-fleet { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.setup-fleet .setup-phone { top: 55px; width: 100px; opacity: 0; transform: translateX(42px) scale(.94); }
.setup-fleet .setup-phone:nth-child(1) { right: 30%; }
.setup-fleet .setup-phone:nth-child(2) { right: 17%; }
.setup-fleet .setup-phone:nth-child(3) { right: 4%; }
.setup-fleet.is-visible .setup-phone { opacity: 1; transform: none; }
.setup-fleet.is-visible .setup-phone:nth-child(2) { transition-delay: .12s; }
.setup-fleet.is-visible .setup-phone:nth-child(3) { transition-delay: .24s; }
.binding-token--fleet { top: 255px; opacity: 0; }
.binding-token--one { top: 220px; right: 30%; }
.binding-token--two { top: 250px; right: 17%; }
.binding-token--three { top: 280px; right: 4%; }
.binding-token--fleet.is-visible { opacity: 1; }
.binding-token--fleet.is-sent { top: 248px; right: 66%; transform: scale(.78); }
.binding-token--fleet.is-received { opacity: 0; }
.setup-film__fallback { margin: 14px 0 0; color: var(--muted); }
.catalog-options article p { color: var(--muted); }

.catalog-options { padding: 40px 0 56px; background: radial-gradient(circle at 50% 100%, rgba(53,89,230,.16), transparent 35%), #03050c; }
.section-heading { max-width: 730px; }
.catalog-options__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.catalog-options article { min-height: 330px; padding: clamp(30px, 4vw, 52px); border: 1px solid var(--line); border-radius: 18px; background: rgba(8,13,25,.78); }
.catalog-options article p { max-width: 480px; }
.catalog-options article a { display: inline-block; margin-top: 24px; color: #91b2ff; font-weight: 680; text-decoration: none; }
.catalog-options article a:hover, .catalog-options article a:focus-visible { color: #fff; }

.catalog-json-guide { padding: 40px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(circle at 82% 28%, rgba(63,93,222,.14), transparent 32%), #050816; scroll-margin-top: 82px; }
.catalog-json-guide__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.catalog-json-guide__heading > div:last-child { color: var(--muted); font-size: 1.02rem; }
.catalog-json-guide__heading > div:last-child p:last-child { margin-bottom: 0; }
.catalog-json-guide code { color: #c5d5ff; font: .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.catalog-json-guide__grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
.catalog-json-card { width: 100%; min-width: 0; max-width: 100%; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: 18px; background: rgba(7,12,24,.86); }
.catalog-json-card > p, .catalog-json-fields dd, .catalog-json-steps p { color: var(--muted); }
.catalog-json-card .catalog-json-try-it { margin: 18px 0; padding: 12px 14px; border: 1px solid rgba(126,164,255,.25); border-radius: 10px; background: rgba(39,103,221,.1); color: #c6d2ea; }
.catalog-json-try-it strong { color: #f3f6ff; }
.catalog-json-source-link { max-width: 100%; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #91b2ff; font-weight: 680; overflow-wrap: anywhere; text-decoration: none; }
.catalog-json-source-link:hover, .catalog-json-source-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.catalog-json-card pre { width: 100%; max-width: 100%; overflow: hidden; margin: 26px 0 0; padding: 24px; border: 1px solid rgba(122,141,200,.23); border-radius: 13px; background: #02050d; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.catalog-json-card pre code { display: block; max-width: 100%; color: #d9e3ff; white-space: inherit; }
.catalog-json-fields { width: 100%; min-width: 0; max-width: 100%; margin: 20px 0 0; }
.catalog-json-fields > div { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.catalog-json-fields dt { min-width: 0; max-width: 100%; font-weight: 700; }
.catalog-json-fields dd { min-width: 0; max-width: 100%; margin: 0; overflow-wrap: anywhere; }
.catalog-json-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; border: 1px solid var(--line); background: var(--line); }
.catalog-json-steps article { min-width: 0; padding: 22px 28px; background: #070c18; }
.catalog-json-steps p { margin-bottom: 0; overflow-wrap: anywhere; }

.catalog-edit-guide { padding: 40px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(circle at 20% 38%, rgba(49,103,226,.14), transparent 30%), #03060d; scroll-margin-top: 82px; }
.catalog-edit-guide__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.catalog-edit-guide__heading h2 { margin-bottom: 0; }
.catalog-edit-guide__heading > div:last-child { color: var(--muted); font-size: 1.02rem; }
.catalog-edit-guide__heading > div:last-child p:last-child { margin-bottom: 0; }
.catalog-edit-guide__heading strong { color: #eef3ff; }
.catalog-edit-guide__visual { width: min(100%, 1120px); margin: 32px auto 0; padding: 10px; border: 1px solid rgba(126,145,205,.24); border-radius: 24px; background: rgba(2,5,13,.86); box-shadow: 0 34px 90px rgba(0,0,0,.42), 0 0 60px rgba(60,89,216,.08); }
.catalog-edit-guide__visual img { width: 100%; border-radius: 16px; }
.catalog-edit-guide__visual figcaption { padding: 12px 8px 3px; color: #7f8aa1; font-size: .78rem; text-align: center; }

.your-catalog-guide { padding: 40px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(circle at 78% 35%, rgba(111,72,226,.13), transparent 31%), #050816; scroll-margin-top: 82px; }
.your-catalog-guide__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.your-catalog-guide__heading h2 { margin-bottom: 0; }
.your-catalog-guide__heading > div:last-child { color: var(--muted); font-size: 1.02rem; }
.your-catalog-guide__heading > div:last-child p:last-child { margin-bottom: 0; }
.your-catalog-guide__visual { width: min(100%, 1120px); margin: 32px auto 0; padding: 10px; border: 1px solid rgba(126,145,205,.24); border-radius: 24px; background: rgba(2,5,13,.86); box-shadow: 0 34px 90px rgba(0,0,0,.42), 0 0 60px rgba(103,72,216,.08); }
.your-catalog-guide__visual img { width: 100%; border-radius: 16px; }
.your-catalog-guide__visual figcaption { padding: 12px 8px 3px; color: #7f8aa1; font-size: .78rem; text-align: center; }

.catalog-details-guide { padding: 40px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(circle at 20% 34%, rgba(45,116,225,.12), transparent 30%), #03060d; scroll-margin-top: 82px; }
.catalog-details-guide__heading { display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.catalog-details-guide__heading h2 { margin-bottom: 0; }
.catalog-details-guide__heading > div:last-child { color: var(--muted); font-size: 1.02rem; }
.catalog-details-guide__heading > div:last-child p:last-child { margin-bottom: 0; }
.catalog-details-guide__heading strong { color: #eef3ff; }
.catalog-details-guide__visual { width: min(100%, 1120px); margin: 32px auto 0; padding: 10px; border: 1px solid rgba(126,145,205,.24); border-radius: 24px; background: rgba(2,5,13,.86); box-shadow: 0 34px 90px rgba(0,0,0,.42), 0 0 60px rgba(52,104,214,.08); }
.catalog-details-guide__visual img { width: 100%; border-radius: 16px; }
.catalog-details-guide__visual figcaption { padding: 12px 8px 3px; color: #7f8aa1; font-size: .78rem; text-align: center; }

.faq { padding: 40px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(circle at 16% 25%, rgba(92,72,235,.12), transparent 30%), #050816; scroll-margin-top: 82px; }
.faq__layout { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(48px, 8vw, 120px); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 44px 22px 0; color: #edf2ff; font-size: 1.03rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; top: 50%; right: 4px; color: #82a9ff; font-size: 1.35rem; font-weight: 400; content: "+"; transform: translateY(-50%); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 680px; margin: -4px 42px 22px 0; color: var(--muted); }
.faq code { color: #c5d5ff; font: .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.site-footer { padding: 32px 0; background: #010309; }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; color: #788299; font-size: .84rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: #fff; }
.site-brand--footer { color: #e9edfa; }

.public-about-page { background: radial-gradient(circle at 78% 18%, rgba(59,101,236,.16), transparent 30%), #02040a; }
.about-page { min-height: calc(100vh - 96px); padding: 148px 0 64px; }
.about-page__intro { display: grid; gap: 34px; }
.about-page__heading h1 { max-width: 820px; margin-bottom: 0; font-size: clamp(3.25rem, 6vw, 5.2rem); }
.about-page__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 24px; }
.about-page__story, .about-page__support { padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: 20px; background: rgba(7,12,24,.86); }
.about-page__story h2, .about-page__support h2 { margin-bottom: 16px; font-size: clamp(2rem, 3.5vw, 3.25rem); }
.about-page__story p, .about-page__support p { color: var(--muted); font-size: 1.05rem; }
.about-page__story p:last-child { margin-bottom: 0; }
.about-page__support { border-color: rgba(126,164,255,.3); background: linear-gradient(145deg, rgba(18,33,69,.88), rgba(9,11,29,.9)); }
.about-page__support a:not(.button) { color: #a9c2ff; font-weight: 700; }
.about-page__support .button { margin-top: 10px; }

.public-auth-page, .public-docs-page { background: radial-gradient(circle at 72% 18%, rgba(59,101,236,.17), transparent 28%), #02040a; }
.auth-main { min-height: calc(100vh - 145px); display: grid; place-items: center; padding: 150px 24px 90px; }
.auth-card { width: min(100%, 540px); padding: clamp(30px, 5vw, 54px); border: 1px solid rgba(126,145,205,.24); border-radius: 22px; background: rgba(7,12,24,.9); box-shadow: 0 36px 100px rgba(0,0,0,.52), 0 0 70px rgba(64,82,220,.08); }
.auth-card h1 { margin-bottom: 18px; font-size: clamp(2.35rem, 6vw, 3.75rem); line-height: 1; }
.auth-card--result { text-align: center; }
.auth-card--result .eyebrow { text-align: center; }
.auth-card--result .button-row { justify-content: center; }
.auth-intro, .auth-card--result > p { color: var(--muted); }
.auth-form { display: grid; margin-top: 30px; }
.auth-form label { margin: 16px 0 7px; color: #d9dfed; font-size: .9rem; font-weight: 680; }
.auth-form input { width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid rgba(145,159,194,.3); border-radius: 9px; outline: 0; background: #030711; color: #fff; font: inherit; }
.auth-form input:focus { border-color: #7299ff; box-shadow: 0 0 0 3px rgba(69,117,247,.16); }
.field-help { margin: 6px 0 0; color: #77839a; font-size: .8rem; }
.auth-submit { width: 100%; margin-top: 28px; cursor: pointer; font: inherit; }
.auth-form__meta { margin-top: 12px; text-align: right; }
.auth-form__meta a, .auth-switch a { color: #91b2ff; }
.auth-switch { margin: 28px 0 0; color: #8f99ae; font-size: .9rem; text-align: center; }
.form-message { margin: 24px 0; padding: 13px 15px; border: 1px solid; border-radius: 9px; font-size: .9rem; }
.form-message--error { border-color: rgba(248,113,113,.35); background: rgba(127,29,29,.18); color: #fecaca; }
.form-message--success { border-color: rgba(74,222,128,.3); background: rgba(20,83,45,.2); color: #bbf7d0; }
.form-message--notice { border-color: rgba(96,165,250,.35); background: rgba(30,64,175,.18); color: #bfdbfe; }
.auth-resend { margin-top: 24px; }
.text-button { padding: 0; border: 0; background: transparent; color: #91b2ff; font: inherit; font-weight: 680; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-button:disabled { cursor: not-allowed; opacity: .58; text-decoration: none; }

.docs-main { padding: 165px 0 120px; }
.docs-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); justify-content: space-between; gap: clamp(50px, 9vw, 140px); }
.docs-aside { position: sticky; top: 35px; align-self: start; }
.docs-aside nav { display: grid; gap: 8px; }
.docs-aside nav a { padding: 7px 0; color: #8d98af; font-size: .88rem; text-decoration: none; }
.docs-aside nav a:hover, .docs-aside nav a:focus-visible { color: #fff; }
.docs-content h1 { margin-bottom: 30px; font-size: clamp(3rem, 7vw, 5.5rem); }
.docs-lede { color: #c5cdde; font-size: 1.25rem; }
.docs-content section { padding-bottom: 82px; scroll-margin-top: 30px; }
.docs-content section + section { padding-top: 82px; border-top: 1px solid var(--line); }
.docs-content h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.docs-content p, .docs-content li, .field-list dd { color: var(--muted); }
.docs-content code { color: #c5d5ff; font: .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.docs-content pre { overflow-x: auto; margin: 34px 0 0; padding: 28px; border: 1px solid rgba(122,141,200,.23); border-radius: 14px; background: #030711; }
.docs-content pre code { color: #d9e3ff; }
.field-list { margin: 34px 0 0; }
.field-list > div { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.field-list dt { font-weight: 700; }
.field-list dd { margin: 0; }
.docs-content li + li { margin-top: 10px; }

.account-site { min-height: 100vh; padding-top: 82px; background: radial-gradient(circle at 82% 8%, rgba(60,99,230,.14), transparent 27%), #03060d; }
.account-site .site-header { position: fixed; background: rgba(3,7,16,.92); }
.account-nav { display: flex; align-items: center; gap: 8px; }
.account-nav a, .account-nav button { padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #aeb8cd; font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; }
.account-nav a:hover, .account-nav a:focus-visible, .account-nav button:hover, .account-nav button:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
.account-nav a[aria-current="page"] { background: rgba(90,119,230,.16); color: #dce5ff; }
.account-nav__locked { opacity: .62; }
.account-nav__locked::after { margin-left: 6px; content: "Locked"; color: #8893aa; font-size: .68rem; }
.account-nav form { margin: 0 0 0 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.dashboard-main { min-height: calc(100vh - 160px); padding: 52px 0 80px; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 34px; }
.dashboard-heading h1, .catalog-lock h1 { margin-bottom: 18px; font-size: clamp(3rem, 7vw, 5.8rem); }
.dashboard-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 1.08rem; }
.account-summary { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; max-width: 470px; color: #dbe2f2; }
.account-summary > span:first-child { width: 100%; text-align: right; }
.status-pill { display: inline-flex; align-items: center; width: max-content; padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: .72rem; font-weight: 720; white-space: nowrap; }
.status-pill--good { border-color: rgba(74,222,128,.26); background: rgba(21,128,61,.13); color: #a7f3c0; }
.status-pill--muted { border-color: rgba(148,163,184,.2); background: rgba(71,85,105,.16); color: #a9b3c6; }
.status-pill--warning { border-color: rgba(250,204,21,.28); background: rgba(133,77,14,.16); color: #fde68a; }
.status-pill--danger { border-color: rgba(248,113,113,.28); background: rgba(127,29,29,.17); color: #fecaca; }
.status-pill--bound { border-color: rgba(96,165,250,.27); background: rgba(30,64,175,.16); color: #bfdbfe; }
.entitlement-status { display: inline; width: auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: .72rem; font-weight: 720; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.dashboard-card, .catalog-lock { padding: clamp(30px, 4.5vw, 52px); border: 1px solid var(--line); border-radius: 20px; background: rgba(8,13,25,.88); box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.dashboard-card h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.dashboard-card > p:not(.eyebrow), .catalog-lock > p:not(.eyebrow) { max-width: 620px; color: var(--muted); }
.dashboard-card--locked { background: linear-gradient(145deg, rgba(24,18,34,.92), rgba(8,13,25,.92)); }
.dashboard-card--unlocked { border-color: rgba(74,222,128,.24); background: linear-gradient(145deg, rgba(8,35,29,.72), rgba(8,13,25,.92)); }
.dashboard-card__heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.metric { color: #d8e2ff; font-size: 3rem; font-weight: 730; line-height: 1; }
.device-list { margin: 22px 0 30px; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.device-row div { display: grid; }
.device-row div span { color: #808ba1; font-size: .82rem; }
.device-row small, .device-updated { color: #69758c; font-size: .76rem; }
.device-row__statuses { display: flex !important; align-items: center; gap: 7px; }
.device-row__actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; }
.dashboard-unbind-form { margin: 0; }
.dashboard-card .dashboard-unbind-form .button { margin-top: 0; }
.device-empty { padding: 28px 0 4px; }
.device-empty p { color: var(--muted); }
.card-link { color: #91b2ff; font-weight: 680; text-decoration: none; }
.dashboard-card .button { margin-top: 22px; }
.dashboard-card .dashboard-card__device-action { margin-top: 0; }
.catalog-lock { max-width: 820px; margin: 40px auto; text-align: center; }
.catalog-lock > p { margin-inline: auto; }
.catalog-lock .button { margin-top: 22px; }
.dashboard-error { max-width: 760px; padding: 50px 0; }
.dashboard-error h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.account-details-panel { margin-top: 20px; }
.account-details-panel dl { margin: 26px 0 0; }
.account-details-panel dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.account-details-panel dt { color: #78849b; }
.account-details-panel dd { margin: 0; color: #e5eaf6; overflow-wrap: anywhere; }
.account-inline-action { display: inline; margin-left: 14px; }
.account-security-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); margin-top: 20px; padding: clamp(30px, 4.5vw, 52px); border: 1px solid var(--line); border-radius: 20px; background: rgba(8,13,25,.88); }
.account-security-card h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.account-security-card > div > p:last-child { color: var(--muted); }
.support-card { max-width: 820px; padding: clamp(30px, 4.5vw, 52px); border: 1px solid var(--line); border-radius: 20px; background: rgba(8,13,25,.88); }
.support-card h2 { max-width: 700px; font-size: clamp(2rem, 4vw, 3.5rem); }
.support-card > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; }
.support-response-note { margin-top: 28px; padding: 20px; border: 1px solid rgba(115,168,255,.3); border-radius: 14px; background: rgba(28,54,104,.22); }
.support-response-note strong { display: block; margin-bottom: 6px; }
.support-response-note p { margin: 0; color: var(--muted); }
.account-password-form { display: grid; align-self: start; }
.account-password-form label { margin: 14px 0 7px; color: #d9dfed; font-size: .9rem; font-weight: 680; }
.account-password-form input { width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid rgba(145,159,194,.3); border-radius: 9px; outline: 0; background: #030711; color: #fff; font: inherit; }
.account-password-form input:focus { border-color: #7299ff; box-shadow: 0 0 0 3px rgba(69,117,247,.16); }
.account-password-form .button { margin-top: 26px; cursor: pointer; font: inherit; }

.binding-heading { max-width: 760px; margin-bottom: 48px; }
.binding-heading h1, .catalog-editor-shell > h1 { margin-bottom: 20px; font-size: clamp(3rem, 7vw, 5.8rem); }
.binding-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }
.binding-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; }
.binding-panel, .bound-device-card, .catalog-editor-shell { padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: 20px; background: rgba(8,13,25,.88); }
.binding-panel h2 { font-size: clamp(1.8rem, 3.3vw, 2.7rem); }
.binding-steps { margin: 28px 0 0; padding-left: 22px; color: var(--muted); }
.binding-steps li + li { margin-top: 13px; }
.binding-code-form { display: grid; gap: 12px; }
.binding-code-form label { color: #dce3f1; font-weight: 700; }
.binding-code-form input, .catalog-editor-shell input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid rgba(145,159,194,.3); border-radius: 9px; outline: 0; background: #030711; color: #fff; font: inherit; }
.binding-code-form input { font: 650 1.35rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center; }
.binding-code-form input:focus::placeholder { color: transparent; }
.binding-code-form input:focus, .catalog-editor-shell input:focus { border-color: #7299ff; box-shadow: 0 0 0 3px rgba(69,117,247,.16); }
.binding-code-form .button { margin-top: 12px; cursor: pointer; font: inherit; }
.bound-devices-section { margin-top: 72px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.section-title-row h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.section-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.section-actions form { margin: 0; }
.bound-device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bound-device-card { display: flex; min-height: 225px; flex-direction: column; }
.bound-device-card__heading h3 { margin-bottom: 5px; }
.bound-device-card__heading p { margin: 0; color: var(--muted); }
.bound-device-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: auto; padding-top: 28px; }
.bound-device-card__footer .device-updated { margin: 8px 0 0; }
.unbind-form { margin: 0; }
.unbind-button { flex: none; cursor: pointer; font: inherit; }
#bound-devices-refresh .button.is-refreshing { border-color: rgba(126,164,255,.72); background: rgba(37,56,97,.92); box-shadow: inset 0 2px 7px rgba(0,0,0,.35), 0 0 0 3px rgba(69,117,247,.14); opacity: 1; cursor: wait; transform: translateY(1px); }
.bound-device-empty { padding: 36px; border: 1px dashed rgba(148,163,184,.24); border-radius: 16px; color: var(--muted); text-align: center; }

.catalog-editor-shell { max-width: none; margin-inline: auto; }
.catalog-editor-shell > h1 { max-width: 760px; margin-bottom: 12px; font-size: clamp(3rem, 6vw, 5rem); }
.catalog-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.catalog-lede { max-width: 680px; margin: 0 0 18px; color: var(--muted); font-size: 1.04rem; }
.catalog-host { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #a9b8d4; font-size: .84rem; }
.catalog-live-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #34d399; box-shadow: 0 0 14px rgba(52,211,153,.7); }
.catalog-host span { color: #748097; font: .78rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.catalog-workspace { display: block; }
.catalog-editor-shell fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.catalog-editor-shell fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.catalog-editor-shell label { display: block; margin: 14px 0 7px; color: #d9dfed; font-weight: 650; }
.catalog-editor-shell .streams { margin-top: 18px; padding: 0; border: 0; background: transparent; }
.catalog-editor-shell .streams:empty { display: none; }
.catalog-editor-shell .stream + .stream { margin-top: 16px; }
.catalog-editor-shell button { min-height: 38px; padding: 8px 13px; border: 1px solid rgba(126,164,255,.35); border-radius: 8px; background: rgba(41,81,173,.18); color: #dbe5ff; font: inherit; cursor: pointer; }
.catalog-editor-shell button:hover, .catalog-editor-shell button:focus-visible { border-color: rgba(126,164,255,.7); background: rgba(53,94,190,.3); color: #fff; }
.catalog-editor-shell button:disabled { opacity: .35; cursor: not-allowed; }
.catalog-editor-shell .errors { color: #fecaca; }
.catalog-editor-shell .notice { color: #a7f3c0; }
.catalog-editor-shell .host-list { display: flex; flex-wrap: wrap; gap: 12px; }
.catalog-editor-shell .host-list a { color: #9ab7ff; font-size: .82rem; }
.catalog-editor-heading, .catalog-preview-heading, .catalog-title-card__heading, .catalog-renditions-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.catalog-editor-heading { margin-bottom: 22px; }
.catalog-editor-heading h2, .catalog-preview-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.catalog-limit, .catalog-preview-heading > span { color: #7f8aa0; font-size: .78rem; white-space: nowrap; }
.catalog-title-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.catalog-editor-shell .catalog-title-tab { width: auto; max-width: min(240px, 100%); min-height: 40px; overflow: hidden; padding: 8px 15px; border-radius: 999px; background: rgba(8,14,27,.8); color: #9da9bf; font-size: .83rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.catalog-editor-shell .catalog-title-tab.is-active { border-color: #7599ff; background: linear-gradient(135deg, rgba(47,103,232,.78), rgba(105,72,212,.78)); color: #fff; box-shadow: 0 8px 24px rgba(67,91,220,.2); }
.catalog-editor-shell .catalog-title-tab--add { border-style: dashed; background: transparent; color: #91a8df; }
.catalog-editor-shell .catalog-title-view-toggle { width: auto; min-height: 40px; margin-left: auto; padding-inline: 4px; border-color: transparent; background: transparent; color: #91a8df; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.catalog-editor-shell .catalog-title-view-toggle:hover, .catalog-editor-shell .catalog-title-view-toggle:focus-visible { border-color: transparent; background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.catalog-title-card { margin-bottom: 18px !important; padding: clamp(22px, 3vw, 30px) !important; border: 1px solid rgba(128,145,195,.22) !important; border-radius: 18px; background: linear-gradient(145deg, rgba(7,12,24,.94), rgba(4,8,17,.82)); box-shadow: 0 24px 65px rgba(0,0,0,.18); }
.catalog-title-card__heading { align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.catalog-title-card__heading h2 { max-width: 520px; margin: 0; font-size: 1.45rem; overflow-wrap: anywhere; }
.catalog-order-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.catalog-editor-shell .catalog-remove { border-color: rgba(248,113,113,.23); background: rgba(127,29,29,.1); color: #fca5a5; }
.catalog-title-identity { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 18px; }
.catalog-editor-art { display: grid; width: 144px; aspect-ratio: 1; overflow: hidden; place-items: center; justify-self: center; box-sizing: border-box; border: 5px solid #000; border-radius: 50%; background: transparent; box-shadow: 0 0 0 3px #fff, 0 8px 24px rgba(0,0,0,.45); }
.catalog-editor-art:empty::after { color: #667593; font-size: .72rem; content: "Image preview"; }
.catalog-editor-art img { width: 100%; height: 100%; object-fit: cover; }
.catalog-title-fields { display: grid; gap: 8px; }
.catalog-title-fields label { margin: 0; }
.catalog-title-fields input { min-height: 40px; white-space: nowrap; }
.catalog-identity-field { min-width: 0; }
.catalog-editor-shell .catalog-identity-field label { min-width: 0; margin: 0; }
.catalog-title-card { --catalog-field-columns: minmax(110px, .35fr) minmax(0, 1.65fr) 2.6rem; --catalog-field-gap: 12px; }
.catalog-renditions-heading { display: grid; grid-template-columns: var(--catalog-field-columns); column-gap: var(--catalog-field-gap); align-items: center; margin-top: 26px; padding: 0; }
.catalog-renditions-heading strong { display: block; }
.catalog-renditions-heading span { justify-self: end; color: #6f7a90; font-size: .76rem; text-align: right; white-space: nowrap; }
.catalog-rendition { padding: 0; border: 0; border-radius: 0; background: transparent; }
.catalog-field-grid { display: grid; grid-template-columns: var(--catalog-field-columns); gap: 4px var(--catalog-field-gap); align-items: center; }
.catalog-editor-shell .catalog-field-grid label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.catalog-row-actions { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; gap: 6px; }
.catalog-editor-shell .catalog-row-actions button { display: grid; place-items: center; flex: 1; min-width: 0; padding: 4px; }
.catalog-row-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.catalog-field-grid [data-field="quality"] { grid-column: 1; grid-row: 1; min-width: 0; }
.catalog-field-grid [data-field="m3u8"] { grid-column: 2; grid-row: 1; min-width: 0; }
.catalog-add-control { width: 100%; margin-top: 16px; border-style: dashed !important; background: transparent !important; }
.catalog-form--enhanced .catalog-title-card[hidden] { display: none; }
.catalog-editor-shell input.is-invalid, .catalog-editor-shell input:invalid:not(:placeholder-shown) { border-color: rgba(248,113,113,.72); box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.catalog-errors ul { margin-bottom: 0; }
.catalog-save-bar { position: sticky; z-index: 3; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 14px; border: 1px solid rgba(126,145,205,.27); border-radius: 13px; background: rgba(4,8,17,.94); box-shadow: 0 18px 55px rgba(0,0,0,.48); backdrop-filter: blur(16px); }
.catalog-save-bar > span { color: #79859b; font-size: .79rem; }
.catalog-save-bar > span.is-dirty { color: #fde68a; }
.catalog-save-bar > div { display: flex; gap: 9px; }
.catalog-save-bar .catalog-reset { border-color: rgba(248,113,113,.24); background: transparent; color: #fca5a5; }
.catalog-save-bar .catalog-save { min-height: 44px; border-color: rgba(126,164,255,.7); color: #fff; }
.catalog-preview-panel { margin-bottom: 22px; padding: clamp(20px, 3vw, 28px); border: 1px solid rgba(126,145,205,.22); border-radius: 20px; background: linear-gradient(145deg, rgba(11,17,33,.96), rgba(5,8,18,.96)); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
.catalog-preview-panel > p { color: #7e899f; font-size: .86rem; }
.catalog-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.catalog-view-preview { min-width: 0; padding: 12px; border: 1px solid rgba(126,145,205,.22); border-radius: 16px; background: rgba(5,9,19,.78); }
.catalog-view-preview__heading { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.catalog-view-preview__heading strong { color: #aebbd3; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.catalog-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.catalog-preview--single-title, .catalog-preview--single-title .catalog-preview-grid { grid-template-columns: minmax(0, 1fr); }
.catalog-view-preview[hidden] { display: none; }
.catalog-preview-gallery { display: grid; gap: 7px; }
.catalog-preview-strip { width: 68%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-inline: auto; }
.catalog-preview-player { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(126,145,205,.17); border-radius: 8px; background: #01040a; }
.catalog-preview-player:has(.catalog-preview-quality-button[aria-expanded="true"]) { z-index: 9; overflow: visible; }
.catalog-preview-gallery > .catalog-preview-player { aspect-ratio: 16 / 7.15; }
.catalog-preview-player--thumbnail { border-radius: 6px; }
.catalog-preview-video { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #01040a; object-fit: cover; cursor: pointer; }
.catalog-preview-quality { position: absolute; z-index: 3; top: 7px; right: 7px; max-width: calc(100% - 14px); overflow: hidden; padding: 4px 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: .67rem; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 9px rgba(0,0,0,.55); pointer-events: none; }
.catalog-editor-shell .catalog-preview-quality-button { width: auto; min-height: 0; padding: 4px 20px 4px 7px; border-color: rgba(255,255,255,.72); border-radius: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: .67rem; line-height: 1; pointer-events: auto; }
.catalog-preview-quality-button::after { position: absolute; top: 50%; right: 7px; border-width: 4px 3.5px 0; border-style: solid; border-color: currentColor transparent transparent; content: ""; transform: translateY(-40%); }
.catalog-editor-shell .catalog-preview-quality-button:hover, .catalog-editor-shell .catalog-preview-quality-button:focus-visible, .catalog-editor-shell .catalog-preview-quality-button[aria-expanded="true"] { border-color: #fff; background: rgba(20,31,58,.96); }
.catalog-preview-quality-menu { position: absolute; z-index: 8; top: 36px; right: 7px; min-width: 104px; display: grid; gap: 3px; padding: 5px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; background: rgba(3,7,16,.96); box-shadow: 0 12px 30px rgba(0,0,0,.5); backdrop-filter: blur(12px); }
.catalog-preview-quality-menu[hidden] { display: none; }
.catalog-editor-shell .catalog-preview-quality-menu button { width: 100%; min-height: 28px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #dce5f7; font-size: .7rem; font-weight: 750; text-align: left; white-space: nowrap; }
.catalog-editor-shell .catalog-preview-quality-menu button:hover, .catalog-editor-shell .catalog-preview-quality-menu button:focus-visible, .catalog-editor-shell .catalog-preview-quality-menu button[aria-checked="true"] { border: 0; background: rgba(74,112,213,.28); color: #fff; }
.catalog-editor-shell .catalog-preview-title { position: absolute; z-index: 4; right: 38px; bottom: 8px; left: 9px; width: auto; min-height: 0; display: flex; align-items: center; gap: 8px; overflow: visible; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; text-shadow: 0 1px 4px #000; pointer-events: none; }
.catalog-preview-title strong { min-width: 0; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-channel-composite { width: 26px; height: 26px; flex: 0 0 26px; overflow: hidden; border: 3px solid #000; border-radius: 50%; background: transparent; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.55); }
.catalog-channel-composite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalog-preview-player::after { position: absolute; z-index: 2; inset: 45% 0 0; border-radius: inherit; background: linear-gradient(transparent, rgba(0,0,0,.85)); content: ""; pointer-events: none; }
.catalog-editor-shell .catalog-preview-play, .catalog-editor-shell .catalog-preview-mute { position: absolute; z-index: 6; min-height: 0; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); background: rgba(1,4,10,.78); color: #fff; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.45); backdrop-filter: blur(7px); }
.catalog-editor-shell .catalog-preview-play { top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.92); transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.catalog-preview-player:hover .catalog-preview-play, .catalog-preview-player:focus-within .catalog-preview-play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.catalog-editor-shell .catalog-preview-mute { right: 7px; bottom: 7px; width: 29px; height: 29px; border-radius: 8px; font-size: .82rem; }
.catalog-preview-mute-icon { width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.catalog-editor-shell .catalog-preview-play:hover, .catalog-editor-shell .catalog-preview-play:focus-visible, .catalog-editor-shell .catalog-preview-mute:hover, .catalog-editor-shell .catalog-preview-mute:focus-visible { border-color: #fff; background: rgba(20,31,58,.96); }
.catalog-preview-player--thumbnail .catalog-preview-quality { top: 3px; right: 3px; padding: 2px 4px; border-radius: 5px; font-size: .48rem; }
.catalog-preview-player--thumbnail .catalog-preview-title { right: 3px; bottom: 4px; left: 4px; gap: 4px; }
.catalog-preview-player--thumbnail .catalog-preview-title strong { font-size: .5rem; }
.catalog-preview-player--thumbnail .catalog-channel-composite { width: 12px; height: 12px; flex-basis: 12px; border-width: 1px; box-shadow: 0 0 0 1px #fff; }
.catalog-editor-shell .catalog-preview-player--thumbnail .catalog-preview-play { width: 24px; height: 24px; font-size: .58rem; }
.catalog-preview-empty { margin: 20px 0; color: #69758b; text-align: center; }
.account-footer { padding: 30px 0; }
.account-footer p { margin: 0; color: #667187; font-size: .78rem; }

@media (max-width: 1180px) {
  .site-nav > a:not(.button):nth-child(-n+4) { display: none; }
}

@media (max-width: 980px) {
  .account-site { padding-top: 152px; }
  .hero { min-height: 0; }
  .hero__grid { min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 170px 0 100px; }
  .hero__copy { padding: 0; }
  .hero__art { max-width: 740px; margin: 60px auto 0; }
  .what-is__heading, .solution-platforms__heading, .layout-feature__heading, .steps__heading, .catalog-json-guide__heading, .catalog-edit-guide__heading, .your-catalog-guide__heading, .catalog-details-guide__heading { grid-template-columns: 1fr; gap: 8px; }
  .what-is__heading > p, .solution-platforms__heading > p, .layout-feature__heading > p, .steps__heading > p { margin-bottom: 0; }
  .what-is__thought { padding: 12px 15px; font-size: .78rem; }
  .what-is__thought--primary { padding: 16px 18px; font-size: 1.05rem; }
  .catalog-json-guide__grid { grid-template-columns: 1fr; }
  .catalog-json-steps { grid-template-columns: 1fr; }
  .faq__layout, .about-page__grid { grid-template-columns: 1fr; gap: 24px; }
  .setup-browser { width: 50%; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-aside { position: static; }
  .docs-aside nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .account-header .site-header__inner { align-items: flex-start; flex-direction: column; padding-block: 20px; }
  .account-nav { width: 100%; overflow-x: auto; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .account-summary { justify-content: flex-start; }
  .account-summary > span:first-child { text-align: left; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .binding-grid { grid-template-columns: 1fr; }
  .account-security-card { grid-template-columns: 1fr; }
  .catalog-preview { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .site-header__inner { min-height: 70px; }
  .site-header:not(.account-header) .site-header__inner { gap: 12px; }
  .site-header__login { display: inline-flex; }
  .site-header__signup { display: none; }
  .account-site { padding-top: 146px; }
  .site-brand img { width: 36px; height: auto; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; max-height: calc(100dvh - 70px); display: grid; align-items: stretch; gap: 5px; overflow-y: auto; padding: 12px 14px 18px; border-bottom: 1px solid rgba(126,145,205,.22); background: rgba(3,7,16,.98); box-shadow: 0 22px 54px rgba(0,0,0,.52); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
  .site-header.is-menu-open .site-nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .site-header.is-menu-open .site-nav > a { min-height: 44px; display: flex; align-items: center; padding: 9px 13px; border: 1px solid transparent; border-radius: 9px; color: #d6deef; font-size: .9rem; white-space: normal; }
  .site-header.is-menu-open .site-nav > a:hover, .site-header.is-menu-open .site-nav > a:focus-visible { border-color: rgba(126,164,255,.3); background: rgba(49,79,151,.18); color: #fff; outline: none; }
  .site-header.is-menu-open .site-nav > .site-nav__signup { justify-content: center; margin-bottom: 8px; color: #fff; background: linear-gradient(115deg, #316eea, #7552e8); }
  .site-header.is-menu-open .site-nav > .site-nav__login { display: none; }
  .site-nav-toggle { display: block; }
  .button--small { padding-inline: 13px; }
  .hero__grid { padding: 138px 0 76px; }
  h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .button-row { align-items: stretch; flex-direction: column; }
  .hero__art { margin-top: 28px; }
  .hero__art img { border-radius: 20px; }
  .what-is, .solution-platforms, .layout-feature, .steps, .catalog-options, .catalog-json-guide, .catalog-edit-guide, .your-catalog-guide, .catalog-details-guide, .faq { padding-block: 40px 52px; }
  .what-is__visual { overflow: hidden; margin-top: 24px; border-radius: 16px; }
  .what-is__visual img { border-radius: 16px; }
  .what-is__thoughts { position: absolute; inset: 0; width: auto; margin: 0; }
  .what-is__thought { inset: auto; padding: 8px 10px; border-radius: 11px; font-size: clamp(.58rem, 2.6vw, .68rem); line-height: 1.22; }
  .what-is__thought--primary { top: 5%; right: 3%; width: 62%; padding: 9px 11px; border-radius: 12px; font-size: clamp(.66rem, 3vw, .76rem); }
  .what-is__thought--quality { top: 43%; right: 3%; width: 57%; }
  .what-is__thought--answer { right: 3%; bottom: 4%; width: 62%; }
  .what-is__thought::before, .what-is__thought::after { display: none; }
  .demo-callout { align-items: flex-start; flex-direction: column; text-align: left; }
  .platform-grid { width: 100%; max-width: 100%; gap: 4px; margin-top: 30px; overflow: hidden; }
  .platform-grid--showcase { margin-top: 0; margin-bottom: 18px; padding-top: 0; padding-bottom: 16px; }
  .platform-grid > li { min-width: 0; flex: 1 1 0; }
  .platform-card { min-width: 0; padding: 5px 2px; border-radius: 8px; }
  .platform-grid.is-auto .platform-card { cursor: default; opacity: 1; pointer-events: none; transition: none; }
  .platform-grid.is-auto .platform-card:not([data-platform]) { opacity: .43; }
  .platform-grid.is-auto .platform-card:hover, .platform-grid.is-auto .platform-card:focus-visible { transform: none; }
  .platform-device-render { max-width: 46px; height: 32px; margin-bottom: 3px; }
  .platform-card--phone .platform-device-render { max-width: 22px; }
  .platform-card--tablet .platform-device-render { max-width: 42px; }
  .platform-card strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .platform-card > span:last-child { display: none; }
  .platform-showcase { margin-top: 20px; }
  .showcase-variants { gap: 6px; }
  .showcase-variant { min-height: 34px; padding: 7px 10px; font-size: .7rem; }
  .device-screenshot { max-width: 100%; margin-top: 20px; }
  .setup-film { min-height: 790px; margin-top: 20px; border-radius: 16px; }
  .setup-film__caption { min-height: 62px; align-items: flex-start; }
  .setup-film__caption strong { padding-top: 4px; font-size: .8rem; }
  .setup-film__stage { min-height: 728px; }
  .setup-browser { top: 14px; left: 12px; width: calc(100% - 24px); height: 350px; }
  .setup-browser__chrome span { padding-inline: 18px; }
  .setup-browser__view { padding: 20px 16px; }
  .setup-browser__nav { gap: 9px; margin: -20px -16px 18px; padding: 10px 11px; font-size: .58rem; }
  .setup-phone { top: 384px; right: 50%; width: 104px; transform: translate(50%, 30px) scale(.94); }
  .setup-phone.is-visible { transform: translate(50%, 0) scale(1); }
  .setup-phone.is-near-browser { right: 50%; transform: translate(50%, -18px) scale(1.03); }
  .setup-phone.is-grouped { top: 390px; right: 4%; width: 70px; transform: none; }
  .binding-token--primary { top: 505px; right: calc(50% - 42px); }
  .binding-token--primary.is-sent { top: 235px; right: 50%; }
  .setup-fleet { inset: 0; width: auto; }
  .setup-fleet .setup-phone { top: 390px; width: 70px; }
  .setup-fleet .setup-phone:nth-child(1) { right: 76%; }
  .setup-fleet .setup-phone:nth-child(2) { right: 52%; }
  .setup-fleet .setup-phone:nth-child(3) { right: 28%; }
  .binding-token--fleet { top: 530px; }
  .binding-token--one { right: 76%; }
  .binding-token--two { right: 52%; }
  .binding-token--three { right: 28%; }
  .binding-token--fleet.is-sent { top: 235px; right: 50%; }
  .catalog-options__grid { grid-template-columns: 1fr; }
  .catalog-options article { min-height: 0; }
  .catalog-json-guide__grid { margin-top: 24px; }
  .catalog-json-card { padding: 24px 18px; }
  .catalog-json-card pre { margin-inline: -4px; padding: 18px 14px; font-size: .78rem; }
  .catalog-json-fields > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .site-footer nav { align-items: flex-start; flex-direction: column; gap: 10px; }
  .auth-main { padding: 125px 14px 70px; }
  .about-page { padding: 118px 0 52px; }
  .about-page__intro { gap: 24px; }
  .about-page__story, .about-page__support { padding: 24px 20px; }
  .auth-card { padding: 28px 22px; border-radius: 16px; }
  .docs-main { padding: 130px 0 80px; }
  .docs-content section { padding-bottom: 60px; }
  .docs-content section + section { padding-top: 60px; }
  .field-list > div { grid-template-columns: 1fr; gap: 6px; }
  .docs-content pre { margin-inline: -6px; padding: 20px 16px; }
  .account-nav { gap: 2px; }
  .account-nav a, .account-nav button { padding-inline: 9px; font-size: .8rem; white-space: nowrap; }
  .account-nav form { margin-left: 2px; padding-left: 2px; }
  .dashboard-main { padding: 40px 0 64px; }
  .dashboard-heading { margin-bottom: 28px; }
  .device-row { align-items: flex-start; flex-direction: column; }
  .device-row__statuses { align-items: center; }
  .account-details-panel dl > div { grid-template-columns: 1fr; gap: 4px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .bound-device-grid { grid-template-columns: 1fr; }
  .binding-panel, .bound-device-card, .catalog-editor-shell { padding: 24px 20px; }
  .bound-device-card__footer { align-items: stretch; flex-direction: column; }
  .unbind-button { width: 100%; }
  .catalog-page-heading, .catalog-title-card__heading, .catalog-save-bar { align-items: stretch; flex-direction: column; }
  .catalog-preview-panel { padding: 18px 14px; }
  .catalog-title-identity { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; }
  .catalog-editor-art { width: 92px; border-width: 4px; }
  .catalog-title-card { --catalog-field-columns: minmax(80px, .6fr) minmax(0, 1fr) 2.6rem; --catalog-field-gap: 8px; }
  .catalog-order-controls { justify-content: flex-start; }
  .catalog-save-bar > div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .setup-film__caption button { display: none; }
}