:root {
  color-scheme: dark;
  font-family: 'Avenir Next', 'SF Pro Text', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lab-bg: #08090b;
  --lab-panel: #111216;
  --lab-line: rgba(255,255,255,.09);
  --ink: #fff8f5;
  --muted: rgba(255,248,245,.62);
  --accent: #ff7c8f;
  --accent-2: #ffbd83;
  --surface: rgba(20,15,19,.72);
  --surface-solid: #171116;
  --line: rgba(255,255,255,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--lab-bg); }
body { margin: 0; min-width: 320px; min-height: 100%; background: var(--lab-bg); color: #f8f8f8; }
button { color: inherit; font: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[hidden] { display: none !important; }

.lab-shell { min-height: 100vh; background: radial-gradient(circle at 50% -20%, rgba(127,67,91,.18), transparent 37%), var(--lab-bg); }
.lab-bar { height: 72px; padding: 0 28px; border-bottom: 1px solid var(--lab-line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: sticky; top: 0; z-index: 30; background: rgba(8,9,11,.82); backdrop-filter: blur(24px); }
.lab-brand { display: flex; align-items: center; gap: 11px; }
.lab-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lab-brand strong { font: 700 14px/1 'Avenir Next', sans-serif; letter-spacing: -.01em; }
.lab-brand small { color: #777d87; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.lab-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg,#fd8795,#9d627e); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 24px rgba(210,105,136,.2); font: 800 14px 'Avenir Next'; }
.variant-switch { display: flex; align-items: center; background: #111216; border: 1px solid var(--lab-line); border-radius: 13px; padding: 4px; gap: 3px; }
.variant-switch button { border: 0; background: transparent; color: #7c828c; padding: 8px 13px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s var(--ease); }
.variant-switch button span { color: #50545c; margin-right: 7px; font-size: 9px; }
.variant-switch button[aria-pressed="true"] { color: #fff; background: #24262b; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.3); }
.lab-reset { justify-self: end; color: #737984; }
.icon-button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--lab-line); background: rgba(255,255,255,.04); display: grid; place-items: center; cursor: pointer; }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lab-stage { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(460px,1fr) 330px; max-width: 1280px; margin: 0 auto; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 950px; padding: 60px 44px 66px; border-right: 1px solid var(--lab-line); }
.device-label { width: 390px; margin-bottom: 12px; color: #646a74; display: flex; align-items: center; gap: 7px; font: 600 9px 'Avenir Next', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.device-label span { width: 5px; height: 5px; border-radius: 50%; background: #54d695; box-shadow: 0 0 10px #54d695; }
.phone { position: relative; width: 390px; height: 844px; border-radius: 42px; overflow: hidden; background: #171116; border: 7px solid #1a1b1e; outline: 1px solid #393a3f; box-shadow: 0 55px 120px rgba(0,0,0,.55), 0 14px 35px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08); isolation: isolate; color: var(--ink); }
.public-view .lab-bar, .public-view .lab-inspector, .public-view .device-label { display: none; }
.public-view .lab-stage { display: block; min-height: 100dvh; max-width: none; }
.public-view .phone-wrap { min-height: 100dvh; padding: 0; border: 0; }
.public-view .phone { width: min(100%, 430px); height: 100dvh; min-height: 650px; max-height: 920px; border: 0; outline: 0; border-radius: 0; box-shadow: none; }
.phone::before { content: ''; position: absolute; z-index: 20; top: 10px; left: 50%; width: 86px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #09090a; box-shadow: inset 0 -1px rgba(255,255,255,.06); }
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(38px); opacity: .38; pointer-events: none; }
.ambient-one { width: 200px; height: 200px; background: #9c385c; top: 54%; left: -25%; }
.ambient-two { width: 160px; height: 160px; background: #be6d4e; right: -30%; bottom: -4%; }
.story-progress { display: none; }
.creator-topbar { position: absolute; top: 35px; left: 18px; right: 18px; z-index: 7; display: flex; align-items: center; justify-content: space-between; }
.creator-pill { border: 0; padding: 0; background: transparent; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.creator-avatar { width: 37px; height: 37px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255,255,255,.8); box-shadow: 0 4px 13px rgba(0,0,0,.28); }
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transform: scale(1.55); }
.creator-pill > span:nth-child(2) { display: flex; flex-direction: column; }
.creator-pill strong { font: 700 12px/1.2 'Avenir Next', system-ui, sans-serif; }
.creator-pill small { font-size: 9px; color: rgba(255,255,255,.65); }
.verified { width: 16px; height: 16px; margin-left: -3px; fill: #ec92a0; }
.verified .check { fill: none; stroke: #24141a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-menu { border-color: rgba(255,255,255,.16); background: rgba(15,12,14,.35); color: white; backdrop-filter: blur(12px); }
.page-menu svg { fill: currentColor; stroke: none; }
.hero-frame { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gallery-track { position: absolute; inset: 0; }
.gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; opacity: 0; transform: scale(1.055); transition: opacity .42s var(--ease), transform 1s var(--ease); }
.gallery-slide.active { opacity: 1; transform: scale(1.035); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,8,.18) 0%, rgba(10,6,8,.02) 26%, rgba(13,8,11,.48) 55%, #130d12 82%, #130d12 100%); }
.creator-content { position: absolute; z-index: 4; left: 24px; right: 24px; bottom: 46px; }
.status-line { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.14); background: rgba(16,11,14,.42); backdrop-filter: blur(15px); border-radius: 99px; padding: 6px 9px; font-size: 9px; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 12px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #64e5a3; box-shadow: 0 0 8px rgba(100,229,163,.8); }
.eyebrow { display: none; }
.creator-content h1 { margin: 0; font: 800 35px/.95 'Avenir Next', system-ui, sans-serif; letter-spacing: -.05em; }
.headline { margin: 9px 0 0; max-width: 300px; font: 600 16px/1.3 'Avenir Next', system-ui, sans-serif; letter-spacing: -.025em; }
.subline { margin: 6px 0 0; max-width: 305px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.proof-row { display: flex; align-items: center; gap: 6px; margin: 14px 0 15px; }
.proof-row > span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: rgba(255,255,255,.72); }
.proof-row > span + span::before { content: ''; width: 2px; height: 2px; background: currentColor; border-radius: 50%; margin-right: 2px; }
.proof-row svg { width: 13px; height: 13px; fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.8); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.primary-cta { width: 100%; height: 68px; position: relative; overflow: hidden; border: 0; border-radius: 21px; padding: 0 10px 0 20px; background: linear-gradient(105deg, #ff8998, #f5aa82); color: #241116; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: 0 15px 38px rgba(237,107,133,.23), inset 0 1px rgba(255,255,255,.65); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.primary-cta:active { transform: scale(.975); box-shadow: 0 8px 24px rgba(237,107,133,.18); }
.cta-copy { text-align: left; display: flex; flex-direction: column; position: relative; z-index: 2; }
.cta-copy small { text-transform: uppercase; letter-spacing: .12em; font-size: 7px; font-weight: 700; opacity: .55; margin-bottom: 2px; }
.cta-copy strong { font: 800 14px 'Avenir Next', system-ui, sans-serif; letter-spacing: -.02em; }
.cta-orb { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(39,17,22,.92); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.16); }
.cta-orb svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta-shine { position: absolute; width: 130px; height: 150%; left: -160px; top: -20%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform: skewX(-20deg); animation: cta-shine 4.5s 1.5s infinite; }
.secondary-trigger { width: 100%; margin-top: 10px; border: 0; background: transparent; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 600; padding: 5px; cursor: pointer; }
.secondary-trigger span { margin-left: 4px; color: var(--accent); }
.microcopy { margin: 5px 0 0; text-align: center; color: rgba(255,255,255,.34); font-size: 7.5px; letter-spacing: .02em; }
.phone-footer { position: absolute; bottom: 14px; left: 24px; right: 24px; display: flex; justify-content: space-between; color: rgba(255,255,255,.25); font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }

.sheet-backdrop { position: absolute; inset: 0; z-index: 10; background: rgba(7,5,7,.58); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s var(--ease); }
.sheet-open .sheet-backdrop { opacity: 1; }
.bottom-sheet { position: absolute; z-index: 11; left: 8px; right: 8px; bottom: 8px; padding: 10px 23px 22px; color: #241a1b; background: #fbf5f0; border-radius: 29px; transform: translateY(108%); transition: transform .32s var(--ease); box-shadow: 0 -20px 60px rgba(0,0,0,.28); }
.bottom-sheet.open { transform: translateY(0); }
.sheet-handle { width: 34px; height: 4px; border-radius: 3px; margin: 0 auto 18px; background: #d7cbc3; }
.sheet-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; margin-bottom: 15px; background: #25191c; color: #fff; font: 800 12px 'Avenir Next', system-ui, sans-serif; }
.sheet-kicker { margin: 0 0 6px; color: #a65d6b; text-transform: uppercase; font: 800 8px 'Avenir Next', system-ui, sans-serif; letter-spacing: .16em; }
.bottom-sheet h2, .handoff h2 { margin: 0; font: 800 25px/1.05 'Avenir Next', system-ui, sans-serif; letter-spacing: -.045em; }
.bottom-sheet > p:not(.sheet-kicker), .handoff > p:not(.sheet-kicker) { color: #7a6c6d; font-size: 11px; line-height: 1.55; margin: 10px 0 18px; }
.sheet-primary { width: 100%; border: 0; border-radius: 16px; padding: 16px; background: #25191c; color: #fff; font: 700 12px 'Avenir Next', system-ui, sans-serif; cursor: pointer; }
.turnstile-container { min-height: 62px; margin: -5px 0 13px; display: grid; place-items: center; }
.challenge-status { margin: -4px 0 13px !important; padding: 9px 11px; border-radius: 10px; color: #8f5259 !important; background: #f4e4e2; text-align: center; }
.sheet-secondary { width: 100%; border: 0; padding: 12px 8px 0; background: transparent; color: #8e7f7f; font-size: 10px; cursor: pointer; }
.social-list { display: grid; gap: 7px; margin: 17px 0 10px; }
.social-list button { width: 100%; border: 1px solid #e8ddd6; border-radius: 16px; padding: 10px; background: #fffaf6; color: #2a2021; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.social-monogram { width: 33px; height: 33px; border-radius: 11px; display: grid; place-items: center; background: #eee0dc; color: #7c4f59; font: 800 9px 'Avenir Next', system-ui, sans-serif; }
.social-list button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.social-list strong { font: 700 11px 'Avenir Next', system-ui, sans-serif; }
.social-list small { color: #958689; font-size: 8px; }
.social-list svg { width: 16px; fill: none; stroke: #8b777b; stroke-width: 1.5; }

.handoff { position: absolute; z-index: 14; inset: 0; padding: 168px 35px 35px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 28%,rgba(226,105,132,.28),transparent 26%), #120e11; opacity: 0; transform: scale(1.04); transition: .3s var(--ease); }
.handoff.active { opacity: 1; transform: scale(1); }
.handoff .sheet-kicker { color: #e78a9d; }
.handoff h2 { font-size: 29px; }
.handoff > p:not(.sheet-kicker) { color: rgba(255,255,255,.54); margin: 12px auto 25px; max-width: 275px; }
.handoff .handoff-instruction { margin: -10px auto 18px !important; padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.04); }
.handoff-pulse { position: relative; width: 96px; height: 96px; margin: 0 auto 30px; display: grid; place-items: center; }
.handoff-pulse > i { position: absolute; inset: 0; border: 1px solid rgba(239,128,149,.35); border-radius: 50%; animation: pulse-out 1.8s infinite; }
.handoff-pulse > i:nth-child(2) { animation-delay: .7s; }
.handoff-pulse > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(145deg,#f07f93,#b45574); box-shadow: 0 20px 55px rgba(220,85,119,.32); }
.handoff-pulse svg { width: 29px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.handoff-progress { width: 190px; height: 3px; margin: 0 auto; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.handoff-progress i { display: block; width: 100%; height: 100%; background: #f28b9e; transform-origin: left; animation: handoff-load 2.1s linear forwards; }
.manual-handoff { margin-top: 52px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 15px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.64); font-size: 9px; cursor: pointer; }
.continue-in-app { display: block; width: 100%; margin-top: 9px; border: 0; background: transparent; color: rgba(255,255,255,.42); font-size: 9px; padding: 8px; cursor: pointer; }
.toast { position: absolute; z-index: 18; left: 17px; right: 17px; top: 82px; padding: 11px 12px; border-radius: 16px; display: flex; align-items: center; gap: 10px; background: rgba(248,242,238,.96); color: #281e20; box-shadow: 0 16px 45px rgba(0,0,0,.28); transform: translateY(-28px); opacity: 0; transition: .25s var(--ease); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: #d7f1e2; color: #1b7d4a; font-weight: 800; }
.toast div { display: flex; flex-direction: column; }
.toast strong { font: 700 10px 'Avenir Next', system-ui, sans-serif; }
.toast small { color: #8c7d80; font-size: 8px; }

.lab-inspector { padding: 60px 30px; background: rgba(12,13,15,.45); }
.inspector-heading { display: flex; justify-content: space-between; align-items: center; color: #8b9099; font: 700 9px 'Avenir Next', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .13em; }
.inspector-heading i { font-style: normal; color: #59cc92; background: rgba(61,180,121,.08); border: 1px solid rgba(61,180,121,.18); border-radius: 6px; padding: 5px 7px; font-size: 7px; }
.inspector-heading i[data-state="pending"] { color: #e6c36f; border-color: rgba(230,195,111,.2); background: rgba(230,195,111,.07); }
.inspector-heading i[data-state="error"] { color: #ef8794; border-color: rgba(239,135,148,.22); background: rgba(239,135,148,.07); }
.variant-note { margin-top: 27px; padding-bottom: 24px; border-bottom: 1px solid var(--lab-line); display: flex; flex-direction: column; }
.variant-note small { color: #5f646d; font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }
.variant-note strong { margin-top: 5px; font: 700 24px 'Avenir Next', system-ui, sans-serif; letter-spacing: -.04em; }
.variant-note p { margin: 3px 0 0; color: #747983; font-size: 10px; }
.flow-steps { list-style: none; padding: 20px 0; margin: 0; border-bottom: 1px solid var(--lab-line); }
.flow-steps li { position: relative; min-height: 52px; display: flex; gap: 12px; opacity: .3; transition: .2s; }
.flow-steps li::before { content: ''; position: absolute; top: 26px; left: 12px; bottom: 0; width: 1px; background: var(--lab-line); }
.flow-steps li:last-child::before { display: none; }
.flow-steps li > span { position: relative; z-index: 1; width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 8px; background: #17191d; color: #696e77; font: 700 7px 'Avenir Next', system-ui, sans-serif; border: 1px solid var(--lab-line); }
.flow-steps li div { display: flex; flex-direction: column; padding-top: 2px; }
.flow-steps li strong { font: 600 10px 'Avenir Next', system-ui, sans-serif; color: #b8bbc1; }
.flow-steps li small { margin-top: 2px; color: #5d626b; font-size: 8px; }
.flow-steps li.active { opacity: .75; }
.flow-steps li.current { opacity: 1; }
.flow-steps li.current > span { background: #f08c9d; color: #211317; border-color: transparent; box-shadow: 0 6px 18px rgba(240,140,157,.2); }
.event-panel { margin-top: 23px; }
.event-panel > div { display: flex; align-items: center; justify-content: space-between; color: #6d727b; font: 700 8px 'Avenir Next', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.event-panel button { border: 0; background: transparent; color: #555a62; font-size: 8px; cursor: pointer; }
.event-panel ul { list-style: none; margin: 11px 0 0; padding: 0; min-height: 118px; }
.event-panel li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 8px; }
.event-panel li span { color: #4d525b; font-variant-numeric: tabular-nums; }
.event-panel li strong { color: #8e939b; font-weight: 500; }
.empty-event { color: #474b53; display: block !important; padding-top: 12px !important; }
.inspector-footnote { color: #4e535c; font-size: 8px; line-height: 1.55; margin: 22px 0 0; }

/* Editorial direction */
body[data-theme="editorial"] .phone { --ink: #2d2624; --muted: #756b65; --accent: #a54f54; color-scheme: light; background: #eee8df; color: var(--ink); }
body[data-theme="editorial"] .phone::before { background: #191716; }
body[data-theme="editorial"] .ambient { display: none; }
body[data-theme="editorial"] .creator-topbar { top: 36px; }
body[data-theme="editorial"] .creator-pill strong { color: #fff; }
body[data-theme="editorial"] .creator-pill small { color: rgba(255,255,255,.65); }
body[data-theme="editorial"] .verified { fill: #e6b69e; }
body[data-theme="editorial"] .hero-frame { inset: 0 0 auto; height: 435px; z-index: -1; }
body[data-theme="editorial"] .gallery-slide { object-position: 50% 27%; transform: scale(1.04); }
body[data-theme="editorial"] .gallery-slide.active { transform: scale(1.02); }
body[data-theme="editorial"] .hero-wash { background: linear-gradient(180deg,rgba(18,12,12,.17),transparent 55%,rgba(238,232,223,.2)); }
body[data-theme="editorial"] .creator-content { left: 19px; right: 19px; bottom: 34px; min-height: 432px; padding: 29px 23px 20px; border-radius: 29px 29px 22px 22px; background: #f8f3ec; box-shadow: 0 -18px 40px rgba(52,35,31,.13); }
body[data-theme="editorial"] .status-line { position: absolute; top: -16px; left: 23px; background: #2e2725; color: #fff; border: 4px solid #f8f3ec; padding: 8px 11px; }
body[data-theme="editorial"] .eyebrow { display: block; margin: 4px 0 7px; color: #a05758; font: 700 8px 'Avenir Next', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .15em; }
body[data-theme="editorial"] .creator-content h1 { font: 600 39px/.95 'Iowan Old Style', 'Baskerville', 'Times New Roman', serif; font-style: italic; letter-spacing: -.035em; }
body[data-theme="editorial"] .headline { font: 600 15px/1.35 'Avenir Next', system-ui, sans-serif; margin-top: 11px; }
body[data-theme="editorial"] .subline { color: #7c716c; }
body[data-theme="editorial"] .proof-row > span { color: #7b706b; }
body[data-theme="editorial"] .proof-row svg { fill: #e7dad1; stroke: #966b67; }
body[data-theme="editorial"] .primary-cta { background: #302725; color: #fffaf4; border-radius: 12px; height: 62px; box-shadow: 0 13px 27px rgba(67,46,41,.18); }
body[data-theme="editorial"] .cta-orb { width: 43px; height: 43px; flex-basis: 43px; border-radius: 8px; background: #b66365; }
body[data-theme="editorial"] .cta-shine { display: none; }
body[data-theme="editorial"] .secondary-trigger { color: #6e625e; }
body[data-theme="editorial"] .microcopy { color: #a59a93; }
body[data-theme="editorial"] .phone-footer { color: #9a918a; bottom: 13px; }

/* Story portal direction */
body[data-theme="story"] .phone { --accent: #9cffd0; --accent-2: #eeff73; background: #0b0d0d; }
body[data-theme="story"] .story-progress { position: absolute; top: 12px; left: 17px; right: 17px; z-index: 22; display: flex; gap: 4px; }
body[data-theme="story"] .story-progress button { flex: 1; height: 8px; padding: 3px 0; border: 0; background: transparent; cursor: pointer; }
body[data-theme="story"] .story-progress button::before { content: ''; display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background .2s; }
body[data-theme="story"] .story-progress button[aria-selected="true"]::before { background: white; }
body[data-theme="story"] .phone::before { display: none; }
body[data-theme="story"] .creator-topbar { top: 28px; }
body[data-theme="story"] .gallery-slide { object-position: 50% 40%; filter: contrast(1.04) saturate(.82); }
body[data-theme="story"] .hero-wash { background: linear-gradient(180deg,rgba(5,6,6,.05) 25%,rgba(7,8,8,.34) 55%,#080a0a 82%,#080a0a); }
body[data-theme="story"] .creator-content { bottom: 35px; }
body[data-theme="story"] .status-line { border-color: rgba(156,255,208,.3); background: rgba(10,20,15,.55); color: #caffdf; }
body[data-theme="story"] .status-dot { background: #9cffd0; }
body[data-theme="story"] .eyebrow { display: block; width: max-content; margin: 0 0 10px; padding: 6px 8px; border-radius: 7px; transform: rotate(-2deg); color: #101512; background: #eeff73; font: 800 8px 'Avenir Next', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
body[data-theme="story"] .creator-content h1 { font-size: 41px; text-transform: uppercase; letter-spacing: -.07em; }
body[data-theme="story"] .headline { font-size: 18px; max-width: 315px; }
body[data-theme="story"] .primary-cta { height: 70px; border-radius: 10px; background: #9cffd0; color: #0a1610; box-shadow: 7px 7px 0 #eeff73; }
body[data-theme="story"] .primary-cta:active { transform: translate(3px,3px); box-shadow: 4px 4px 0 #eeff73; }
body[data-theme="story"] .cta-orb { border-radius: 6px; background: #101714; }
body[data-theme="story"] .cta-shine { display: none; }
body[data-theme="story"] .secondary-trigger span { color: #9cffd0; }

@keyframes cinematic-breathe { from { transform: scale(1.035); } to { transform: scale(1.075) translateY(-4px); } }
@keyframes cta-shine { 0%,68% { left: -160px; } 88%,100% { left: 430px; } }
@keyframes pulse-out { 0% { transform: scale(.58); opacity: .8; } 100% { transform: scale(1.34); opacity: 0; } }
@keyframes handoff-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 820px) {
  .lab-bar { height: auto; min-height: 92px; padding: 13px 14px; grid-template-columns: 1fr auto; row-gap: 10px; }
  .variant-switch { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: grid; grid-template-columns: repeat(3,1fr); }
  .variant-switch button { padding: 8px 5px; }
  .lab-reset { grid-column: 2; grid-row: 1; }
  .lab-stage { display: block; min-height: auto; }
  .phone-wrap { min-height: auto; padding: 0; border: 0; }
  .device-label, .lab-inspector { display: none; }
  .phone { width: 100%; height: calc(100dvh - 92px); min-height: 650px; max-height: none; border: 0; outline: 0; border-radius: 0; box-shadow: none; }
  .phone::before { top: 9px; }
}

@media (max-height: 780px) and (min-width: 821px) {
  .lab-stage { grid-template-columns: minmax(430px,1fr) 310px; }
  .phone-wrap { min-height: 760px; padding: 35px 30px; }
  .phone { transform: scale(.82); margin: -76px 0; }
  .device-label { transform: translateY(4px); }
  .lab-inspector { padding-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}