/* Homepage introduction: a readable, consistent hierarchy. */
.product-hero{padding-top:96px}
.product-hero .hero-intro{max-width:800px;margin-inline:auto;padding-inline:24px}
.product-hero .hero-intro h1{max-width:740px;margin:0 auto 28px;font-size:clamp(48px,4.5vw,68px);font-weight:500;line-height:1.08;letter-spacing:-.045em;text-wrap:balance;color:#f5f5f5}
.product-hero .hero-intro h1 span{color:inherit}
.product-hero .hero-intro>p{max-width:650px;margin:0 auto;font-size:20px;line-height:1.6;font-weight:400;letter-spacing:-.01em;color:#b0b0b0;text-wrap:pretty}
.product-hero .hero-buttons{margin-top:32px;gap:24px}
.product-hero .hero-buttons .btn{min-height:44px;padding:11px 19px;font-size:14px}
.product-hero .hero-buttons .text-link{font-size:14px;line-height:22px}
.product-hero .workspace-wrap{margin-top:80px}
@media(max-width:760px){
 .product-hero{padding-top:64px;padding-bottom:48px}
 .product-hero .hero-intro{width:100%;padding-inline:24px}
 .product-hero .hero-intro h1{font-size:clamp(38px,8.5vw,52px);line-height:1.12;letter-spacing:-.04em;margin-bottom:24px}
 .product-hero .hero-intro>p{max-width:520px;font-size:17px;line-height:1.65}
 .product-hero .hero-buttons{margin-top:28px;gap:16px 22px}
}

/* App preview: chat text dissolves under the session title and above the composer instead of ending on a
   hard edge. A mask fades the content itself, so it works for the recorded chat frames and every other session. */
.real-app .ra-transcript{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 44px),transparent 100%)}

/* App preview: side panel header, from the app's ArtifactPanel.tsx. 48px tall on the panel's own surface with a
   hairline under it, a bordered two-button view switch (28px buttons, 14px icons), a 14px medium title with the
   file type following it in the same line, and 32px icon buttons (16px icons) for Copy, Widen and Close. */
.real-app .ra-panel>header{height:48px;gap:6px;padding:0 12px;border-bottom:0;background:transparent;box-shadow:0 1px 0 #7f7f7f29;font-size:14px}
.real-app .ra-view-switch{display:flex;align-items:center;padding:2px;border:1px solid #26262699;border-radius:6px;background:transparent;gap:0}
.real-app .ra-view-switch button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:4px;background:transparent;color:#9e9e9e;transition:background-color 150ms ease,color 150ms ease}
.real-app .ra-view-switch button:hover{color:#fff}
.real-app .ra-view-switch button[aria-pressed=true]{background:#ffffff14;color:#fff}
.real-app .ra-view-switch .ai{width:14px;height:14px}
.real-app .ra-panel-heading{flex:1;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}
.real-app .ra-panel>header .ra-panel-heading strong{display:inline;flex:none;overflow:visible;font-size:14px;font-weight:500;color:#fff}
.real-app .ra-panel>header .ra-panel-heading span{display:inline;margin-left:6px;font-size:14px;color:#9e9e9e}
.real-app .ra-panel>header>button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:6px;background:transparent;color:#9e9e9e;transition:background-color 150ms ease,color 150ms ease,scale 150ms ease}
.real-app .ra-panel>header>button:hover{background:#ffffff0d;color:#fff}
.real-app .ra-panel>header>button:active{scale:.96}
.real-app .ra-panel>header>button .ai{width:16px;height:16px}
.real-app .ra-panel>header button:focus-visible{outline:2px solid #525252;outline-offset:2px}
/* The app opens a deck in its own full viewer, which has its own bar; expanded, the panel header steps aside. */
.real-app.panel-expanded:is([data-active-session=spacex],[data-active-session=moderna]) .ra-panel>header{display:none}
@media(prefers-reduced-motion:reduce){.real-app .ra-panel>header button{transition:none}}

/* A deck has no source view and nothing to copy, so its panel header drops those controls. */
.real-app:is([data-active-session=spacex],[data-active-session=moderna],[data-active-session=slides]) .ra-panel :is(.ra-view-switch,[data-ra-copy-doc]){display:none}
.real-app:is([data-active-session=spacex],[data-active-session=moderna],[data-active-session=slides]) .ra-panel-heading{padding-left:4px}

/* Switching chats, app style: the outgoing chat and panel disappear at once (no fade-out to wait through) and
   the incoming ones arrive with a short opacity ramp once painted. No movement, no skeleton flash. */
.real-app .ra-transcript,.real-app #ra-panel-content,.real-app .ra-session-head strong,.real-app .ra-panel-heading{transition:opacity 140ms cubic-bezier(.2,0,0,1)}
.real-app.demo-switching :is(.ra-transcript,#ra-panel-content){opacity:0;transition:none}
.real-app.demo-switching:not(.demo-loading) :is(.ra-chat,.ra-panel,.ra-session-head){visibility:visible}
@media(prefers-reduced-motion:reduce){.real-app .ra-transcript,.real-app #ra-panel-content,.real-app .ra-session-head strong,.real-app .ra-panel-heading{transition:none}}

/* Side panel open and close: transitions.dev "panel reveal" (07-panel-reveal). Tokens and snippet as shipped. */
:root {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

/* This panel enters from the right edge, so its travel is a short horizontal one rather than the snippet's
   vertical default. While leaving it stays drawn above the new layout until the transition ends. */
.real-app .ra-panel.t-panel-slide:not([data-open="true"]){transform:translateX(28px)}
.real-app .ra-panel.is-leaving{display:flex!important}
/* Layout changes happen in one step, not as a tween: animating grid tracks re-laid-out the chat frame on every
   frame, which is what made the panel feel janky. The text dips for a moment so the re-wrap is never seen. */
.real-app.real-app{transition:none}
.real-app.layout-dip :is(.ra-transcript,#ra-panel-content){opacity:0;transition:opacity 90ms linear}

/* App preview: Recent chat rows, from the app's SessionNodeItem.tsx. Rows sit 4px apart (my-0.5 each) with
   8px corners; the title is 14px regular. Hover (surface.elevated) and selection (interactive.selection) are
   different fills, and the open chat never takes the hover fill, so two rows can never look selected at once. */
.real-app .ra-recent-items{display:flex;flex-direction:column}
.real-app .ra-recent-items button[data-session]{margin:2px 0;padding:6px 8px;min-height:32px;border-radius:8px;background:transparent;color:#fff;font-size:14px;font-weight:400;line-height:20px;transition:background-color 150ms ease}
.real-app .ra-recent-items button[data-session]:hover{background:#1f1f1f}
.real-app .ra-recent-items button[data-session].selected,.real-app .ra-recent-items button[data-session].selected:hover{background:#ffffff1f;font-weight:400}
.real-app .ra-recent-items button[data-session]:focus-visible{outline:2px solid #525252;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.real-app .ra-recent-items button[data-session]{transition:none}}