/* Website extensions of the shared Browser Extractor material tokens. */
:root {
  color-scheme:dark;
  --site-max:1320px;
  --site-gutter:clamp(20px,4vw,64px);
  --section-space:clamp(80px,10vw,148px);
  --motion-demo:520ms;
  --scene-perspective:1400px;
  --paper:#f0ede6;
  --ink:#242723;
  --demo-muted:#656a60;
  --demo-line:#d1d2c8;
  --demo-accent:#c0d3b1;
  --demo-card:#e5e3da;
  --demo-art-one:#afc3a5;
  --demo-art-two:#d7c3ac;
  --demo-art-three:#d4d1c6;
  --ink-soft:rgba(36,39,35,.14);
  --orange-soft:rgba(255,171,92,.08);
  --orange-border:rgba(255,171,92,.4);
--selection-shadow:0 0 0 1.5px var(--accent),0 0 0 4px rgba(255,171,92,.13)
}
* {
box-sizing:border-box
}
html {
  scroll-behavior:smooth;
scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--surface-base);
  color:var(--text-primary);
  font:400 16px/1.6 var(--font-sans);
-webkit-font-smoothing:antialiased
}
button,input,select,textarea {
font:inherit
}
button,a,input,select,textarea,summary {
-webkit-tap-highlight-color:transparent
}
button,a {
touch-action:manipulation
}
button {
cursor:pointer
}
a {
  color:inherit;
text-decoration:none
}
button:disabled {
  cursor:progress;
opacity:.65
}
img,svg {
max-width:100%
}
h1,h2,h3,h4,h5,p {
margin:0
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
outline-offset:4px
}
::selection {
  background:var(--accent);
color:var(--text-inverse)
}
[hidden] {
display:none!important
}
.shell {
  width:min(var(--site-max),calc(100% - var(--site-gutter)*2));
margin-inline:auto
}
.glass {
  background:var(--glass-reflection) var(--surface-glass-strong);
  border:1px solid var(--border-glass);
  box-shadow:var(--glass-highlight),var(--shadow-md);
border-radius:var(--radius-floating)
}
.eyebrow,.step-number,.scene-label,.playground-topline,.panel-kicker,.panel-brand,.reference-eyebrow,.reference-footer,.reference-cards article>span,.browser-url,.local-badge,.hero-caption>span {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
line-height:1.6
}
.eyebrow {
  color:var(--text-muted);
  margin-bottom:22px;
  display:flex;
  align-items:center;
gap:10px
;font-size:11px}
.muted {
color:var(--text-muted)
}
.button {
  min-height:var(--control-lg);
  padding:0 var(--space-5);
  border-radius:var(--radius-control);
  border:1px solid var(--border-standard);
  display:inline-flex;
  gap:var(--space-2);
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  transition:background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--motion-micro) var(--ease-fluid);
white-space:nowrap
}
.button-primary,.accent-button {
  background:var(--accent-reflection) var(--accent);
  color:var(--text-inverse);
  border-color:var(--accent-hover);
box-shadow:var(--glass-highlight),var(--shadow-active)
}
.button-primary:hover,.accent-button:hover {
  background-color:var(--accent-hover);
box-shadow:var(--shadow-active),var(--shadow-md)
}
.button-secondary {
  background:var(--glass-reflection) var(--surface-elevated);
  color:var(--text-primary);
box-shadow:var(--glass-highlight)
}
.button-secondary:hover {
background-color:var(--surface-selected)
}
.button:active,button:active:not(:disabled) {
  transform:translateY(1px);
box-shadow:var(--shadow-pressed)
}
.button-small {
  min-height:var(--control-md);
  padding:0 var(--space-4);
font-size:12px
}
.button-large {
  min-height:var(--control-xl);
  padding:0 var(--space-8);
  border-radius:var(--radius-lg);
  font-size:var(--text-xl);
  letter-spacing:-.01em
}
.button-large .button-icon,.button-large .button-icon .be-icon{min-width:18px;min-height:18px}.button-large .button-icon .be-icon{width:18px;height:18px}
.button-large.button-primary{box-shadow:var(--glass-highlight),var(--shadow-active),0 8px 28px var(--accent-glow)}
.button-ghost,.text-button {
  color:var(--text-secondary);
  background:transparent;
border:0
}
.text-button {
  min-height:36px;
  padding:0;
  font:500 13px var(--font-sans);
  display:inline-flex;
  gap:14px;
align-items:center
}
.text-button:hover,.text-link:hover {
color:var(--accent)
}
.text-link {
  border-bottom:1px solid var(--border-strong);
padding-block:4px
}
.action-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
gap:12px
}
.action-row:has(.button-large) {
  gap:var(--space-4)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.03em;
white-space:nowrap
}
.brand-light {
  font-weight:400;
  color:var(--text-secondary);
margin-left:3px
}
.brand-symbol {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
}
.brand-symbol i {
  display:block;
  width:14px;
  height:14px;
  border:1.5px solid var(--text-primary);
  border-radius:2px;
position:relative
}
.brand-symbol i:after {
  content:'';
  position:absolute;
  right:-3px;
  top:-3px;
  width:4px;
  height:4px;
  border-radius:1px;
  background:var(--accent);
box-shadow:0 0 8px var(--accent-glow)
}
.site-header {
  position:sticky;
  top:16px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
  padding:12px 18px;
  margin-top:16px;
  backdrop-filter:blur(var(--glass-blur-md));
  -webkit-backdrop-filter:blur(var(--glass-blur-md));
border-radius:14px
}
.site-header nav {
  display:flex;
  gap:22px;
align-items:center
}
.site-header nav a,.nav-free {
  font-size:12px;
  color:var(--text-secondary);
white-space:nowrap
}
.site-header nav a:hover {
color:var(--text-primary)
}
.nav-actions {
  display:flex;
  align-items:center;
gap:20px
}
.menu-button {
display:none
}
.skip-link {
  position:fixed;
  left:20px;
  top:10px;
  z-index:200;
  background:var(--accent);
  color:var(--ink);
  padding:8px 16px;
transform:translateY(-160%)
}
.skip-link:focus {
transform:none
}
/* Opening composition: one framed reference, with the tool layer in front. */
.hero {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  align-items:center;
  gap:28px;
  padding-block:100px 70px;
  position:relative;
min-height:740px
}
.hero:before {
  content:'';
  position:absolute;
  width:65%;
  height:85%;
  right:-3%;
  top:10%;
  background:radial-gradient(ellipse,var(--orange-soft),transparent 65%);
  z-index:-1;
pointer-events:none
}
.hero h1 {
  font-size:clamp(42px,4.5vw,68px);
  line-height:1.08;
  letter-spacing:-.06em;
font-weight:500
}
.hero h1>span {
color:var(--accent)
}
.hero-description {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.75;
  max-width:480px;
margin:28px 0
}
.hero-product {
  min-width:0;
  perspective:var(--scene-perspective);
position:relative
}
.hero-caption .text-button {
font-size:11px
}
.section {
padding-block:var(--section-space)
}
.section-heading {
margin-bottom:60px
}
.section-heading h2 {
  font-size:clamp(32px,18px + 2.4vw,48px);
  font-weight:500;
  line-height:1.1;
letter-spacing:-.045em}
.section-heading h2 span {
color:var(--accent)
}
.section-heading>p:not(.eyebrow) {
  margin-top:24px;
  max-width:540px;
color:var(--text-secondary)
}
.split-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
gap:48px
}
.split-heading>div:last-child:not(:first-child) {
max-width:410px
}
.split-heading>div>p:not(.eyebrow) {
  color:var(--text-secondary);
line-height:1.8
}
.section-heading>p.muted {
  font-size:13px;
  margin-top:18px;
color:var(--text-muted)
}
.story-step .text-button {
margin-top:20px
}
.demo-caption {
  font-size:11px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
margin-top:18px
}
.capabilities article>.be-icon {
  color:var(--text-muted);
margin-bottom:14px
}
.playground .product-window {
border-radius:18px
}
.audience-section {
border-block:1px solid var(--border-standard)
}
.centered {
text-align:center
}
.centered .eyebrow {
justify-content:center
}
.centered>p:not(.eyebrow) {
margin-inline:auto
}
.pricing-section {
  background:var(--environment-light);
border-block:1px solid var(--border-standard)
}
.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:24px;
  align-items:stretch;
}
.price-card {
  padding:32px;
position:relative;
display:flex;
flex-direction:column;
}
.price-card h3 {
  font-size:24px;
font-weight:500;
}
.pricing-header-pro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.pricing-header-pro h3 {
  margin-bottom:0;
}
.billing-toggle {
  display:flex;
  background:rgba(255, 255, 255, 0.05);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-full);
  padding:4px;
  gap:4px;
  cursor:pointer;
}
.billing-toggle:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.billing-toggle button {
  background:transparent;
  border:none;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
  padding:6px 14px;
  border-radius:var(--radius-full);
  transition:all var(--transition-fast);
  cursor:pointer;
}
.billing-toggle button[aria-checked="true"] {
  background:var(--surface-elevated);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border-subtle);
}
.price {
  font-size:56px;
  line-height:1.2;
  letter-spacing:-.04em;
margin:16px 0 8px
}
/* Plans without a number yet ("Available now", "To be announced"). */
.price--text {
  font-size:32px;
  letter-spacing:-.02em
}
.price span {
  font-size:14px;
  letter-spacing:0;
  color:var(--text-muted);
margin-left:8px;
font-weight:400;
}
.plan-note {
  font-size:14px;
  color:var(--text-secondary);
  min-height:48px;
max-width:280px
}
.strike-price {
  color:var(--text-disabled);
  text-decoration:line-through;
  margin-right:10px;
  font-size:.5em;
  letter-spacing:0;
}
.price-card .button {
  width:100%;
  margin-top:auto;
  margin-bottom:16px;
}
.feature-divider {
  height:1px;
  background:var(--border-standard);
  margin-bottom:24px;
}
.price-card ul.feature-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
gap:14px;
}
.price-card li {
  position:relative;
  font-size:14px;
  padding-left:26px;
  display:flex;
  align-items:center;
  color:var(--text-secondary);
line-height:1.5
}
.price-card li.unapplicable {
  color:var(--text-disabled);
}
.feature-icon {
  position:absolute;
  left:0;
  top:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-icon.check {
  background-color:var(--accent);
  color:var(--surface-base);
}
.feature-icon.check svg {
  width:10px;
  height:10px;
  stroke:currentColor;
  stroke-width:3;
}
.feature-icon.dash {
  background-color:transparent;
  color:var(--text-disabled);
  border:1px dashed var(--text-disabled);
}
.feature-icon.dash svg {
  width:10px;
  height:10px;
  stroke:currentColor;
  stroke-width:2;
}
.price-card--featured {
  border-color:var(--orange-border);
  background:var(--active-reflection) var(--surface-glass-strong);
box-shadow:var(--glass-highlight),var(--shadow-active)
}
.price-card--featured li {
  color:var(--text-primary);
}

.plan-flag {
  position:absolute;
  top:-13px;
  left:32px;
  background:var(--accent);
  color:var(--text-inverse);
  font-size:12px;
  font-weight:600;
  padding:4px 12px;
border-radius:6px;
letter-spacing:0.02em;
}
/* Two plans (Free, Pro) and a Quarterly | Lifetime switch that needs no script: the checked radio picks the price and note shown. */
.pricing-grid--two {
  grid-template-columns:1fr 1.1fr;
  max-width:920px;
  margin-inline:auto;
}
/* Side by side, both cards share six row tracks (title, price, note, action, divider, list), so each row lines up across them whatever the Pro switch shows. */
@media(min-width:1001px) {
  .pricing-grid--two {
    column-gap:24px;
    row-gap:0;
    grid-template-rows:repeat(6,auto);
  }
  .pricing-grid--two .price-card {
    display:grid;
    grid-row:span 6;
    grid-template-rows:subgrid;
    row-gap:0;
  }
  .pricing-grid--two .price-card .button {
    margin-top:0;
  }
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
fieldset.billing-toggle {
  margin:0;
  min-width:0;
}
.billing-toggle label {
  position:relative;
  display:flex;
}
.billing-toggle input {
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}
.billing-toggle label span {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:var(--radius-full);
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  transition:all var(--transition-fast);
}
.billing-toggle input:checked + span {
  background:var(--surface-elevated);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border-color:var(--border-subtle);
}
.billing-toggle label:has(input:focus-visible) {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-full);
}
#plan-pro:not(:has(input[value=lifetime]:checked)) [data-plan=lifetime],
#plan-pro:has(input[value=lifetime]:checked) [data-plan=quarterly] {
  display:none;
}
.pricing-disclosure {
  max-width:860px;
  font-size:12px;
  color:var(--text-muted);
  margin:32px auto 0;
  text-align:center;
line-height:1.8
}
.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
gap:70px
}
.faq-list {
border-top:1px solid var(--border-standard)
}
.faq-list details {
  border-bottom:1px solid var(--border-standard);
padding-block:21px
}
.faq-list summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:15px;
font-weight:500
}
.faq-list summary:after {
  content:'+';
  color:var(--text-muted);
font-size:20px
}
.faq-list details[open] summary:after {
  content:'−';
color:var(--accent)
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list details p {
  font-size:14px;
  line-height:1.8;
  color:var(--text-secondary);
  padding-top:18px;
max-width:600px
}
.final-cta {
  text-align:center;
  position:relative;
  padding:80px 20px 110px;
  border-top:1px solid var(--border-standard);
background:radial-gradient(ellipse at 50% 90%,var(--orange-soft),transparent 55%)
}
.final-mark {
  display:grid;
  place-items:center;
  margin:0 auto 30px;
  width:52px;
  height:52px;
  border:1px solid var(--border-glass);
  border-radius:14px;
  background:var(--glass-reflection) var(--surface-elevated);
box-shadow:var(--glass-highlight),var(--shadow-active)
}
.final-mark .be-icon {
  width:26px;
  height:26px;
color:var(--accent)
}
.final-cta .eyebrow {
justify-content:center
}
.final-cta h2 {
  line-height:1.08;
  letter-spacing:-.06em;
font-weight:500
}
.final-cta>p:not(.eyebrow) {
  color:var(--text-secondary);
margin:24px 0
}
.final-cta .action-row {
  justify-content:center;
margin-top:28px
}
.site-footer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"brand links" "badges copy";
  align-items:start;
  gap:32px 56px;
  border-top:1px solid var(--border-standard);
  padding-block:36px
}
.footer-brand {
  grid-area:brand;
  display:grid;
  gap:12px;
  justify-items:start
}
.footer-brand p {
  margin:0;
  color:var(--text-muted);
  font-size:12px
}
.footer-links {
  grid-area:links;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.footer-links nav {
  display:grid;
  align-content:start;
  font-size:12px;
  color:var(--text-secondary)
}
.footer-links h3 {
  margin:0 0 4px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted)
}
.site-footer .footer-links nav a {
  min-height:32px
}
.footer-badges {
  grid-area:badges;
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.site-footer>span {
  grid-area:copy;
  justify-self:end;
  align-self:center;
  font-size:10px;
  color:var(--text-muted)
}
.noscript-note {
  padding:20px;
  text-align:center;
font-size:14px
}
/* Reusable product scene. Real editable DOM sits beside a scoped inspector. */
.demo-mount {
min-width:0
}
.product-window {
  overflow:hidden;
  position:relative;
  box-shadow:var(--glass-highlight),var(--shadow-floating);
border-radius:14px
}
.browser-chrome {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:34px;
  padding:8px 12px;
  border-bottom:1px solid var(--border-standard);
background:var(--surface-glass-strong)
}
.window-dots {
  display:flex;
gap:4px
}
.window-dots i {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
background:var(--neutral-600)
}
.browser-url {
  flex:1;
  text-align:center;
  color:var(--text-muted);
  font-size:8px;
letter-spacing:.01em
}
.browser-url>span {
margin-right:8px
}
.demo-toolbar {
  display:flex;
  align-items:center;
  padding:6px 8px;
  gap:3px;
  background:var(--glass-reflection) var(--surface-panel);
  border-bottom:1px solid var(--border-standard);
  position:relative;
z-index:3
}
.tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:32px;
  min-height:32px;
  color:var(--text-secondary);
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  padding:5px 7px;
transition:background-color var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)
}
.tool .be-icon {
  width:15px;
height:15px
}
.tool>span {
font-size:10px
}
.tool:hover {
background:var(--surface-hover)
}
.tool[aria-pressed='true'] {
  background:var(--active-reflection) var(--surface-selected);
  border-color:var(--border-selected);
  color:var(--accent);
box-shadow:var(--shadow-active)
}
.demo-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
min-height:520px
}
.reference-area {
  position:relative;
  min-width:0;
  background:var(--neutral-800);
  overflow:auto;
  max-height:700px;
  padding:0;
container-type:inline-size
}
.reference {
  width:100%;
  margin:auto;
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  overflow:hidden;
  transition:max-width var(--motion-demo) var(--ease-fluid),box-shadow var(--transition-smooth);
  min-height:100%;
container-type:inline-size
}
.reference[data-viewport='tablet'] {
max-width:480px
}
.reference[data-viewport='mobile'] {
max-width:280px
}
.reference-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 26px;
  border-bottom:1px solid var(--demo-line);
  font-size:9px;
gap:16px
}
.reference-hero {
  padding:32px;
  min-width:0;
  position:relative;
transition:padding var(--motion-demo) var(--ease-fluid),background-color var(--transition-smooth)
}
.reference-hero h3 {
  font-size:42px;
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.05em;
  margin:0 0 18px;
transition:font-size var(--motion-demo) var(--ease-fluid),width var(--motion-demo) var(--ease-fluid)
}
.reference-hero p {
  font-size:14px;
  color:var(--demo-muted);
  line-height:1.6;
margin-bottom:22px
}
.reference-cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  max-width:210px;
  width:100%;
  border:0;
  border-radius:6px;
  background:var(--demo-accent);
  padding:12px;
  color:var(--ink);
  font:500 14px/1.35 var(--font-sans);
  text-align:left;
transition:padding var(--motion-demo) var(--ease-fluid),border-radius var(--motion-demo) var(--ease-fluid),background-color var(--transition-smooth)
}
.reference [data-target] {
  position:relative;
  outline-offset:0;
  cursor:crosshair;
transition:box-shadow var(--transition-fast),background-color var(--transition-smooth),padding var(--motion-demo) var(--ease-fluid),border-radius var(--motion-demo) var(--ease-fluid)
}
.reference .is-selected {
  box-shadow:var(--selection-shadow);
z-index:1
}
.reference .is-hovered {
outline:1px dashed var(--accent)
}
.inspect-hint {
  position:absolute;
  z-index:5;
  padding:5px 8px;
  border-radius:5px;
  pointer-events:none;
  white-space:nowrap;
  font:10px var(--font-mono);
  background:var(--surface-popover);
  color:var(--text-primary);
border:1px solid var(--border-glass)
}
.sim-cursor {
  position:absolute;
  top:44%;
  left:35%;
  display:flex;
  align-items:flex-start;
  gap:5px;
  pointer-events:none;
  z-index:5;
transition:top var(--motion-demo) var(--ease-fluid),left var(--motion-demo) var(--ease-fluid)
}
.sim-cursor .be-icon {
  color:var(--ink);
  fill:var(--paper);
  width:23px;
height:23px
}
.sim-cursor>span {
  font-size:8px;
  color:var(--ink);
  background:var(--accent);
  border-radius:4px;
  padding:3px 7px;
  white-space:nowrap;
margin-top:18px
}
.demo-mount[data-tool='extract'] .sim-cursor {
  top:70%;
left:20%
}
.demo-mount[data-tool='edit'] .sim-cursor {
  top:40%;
left:50%
}
.demo-mount[data-tool='responsive'] .sim-cursor,.demo-mount[data-tool='prompt'] .sim-cursor,.playground .sim-cursor,.demo-mount[data-variant='ai'] .sim-cursor {
display:none
}
.property-panel {
  min-width:0;
  border-left:1px solid var(--border-standard);
  background:var(--glass-reflection) var(--surface-glass-strong);
  max-height:650px;
  overflow:auto;
  scrollbar-width:thin;
scrollbar-color:var(--neutral-600) transparent
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px;
border-bottom:1px solid var(--border-standard)
}
.panel-brand {
  font-size:7px;
  letter-spacing:.06em;
  display:flex;
  gap:7px;
align-items:center
}
.panel-brand .be-icon {
  width:13px;
height:13px
}
.panel-body {
  padding:16px 12px;
  display:grid;
gap:14px
}
.panel-kicker {
  font-size:8px;
  letter-spacing:.08em;
  color:var(--text-muted);
margin-bottom:7px
}
.panel-intro h4 {
  font-size:15px;
  font-weight:500;
  letter-spacing:-.025em;
line-height:1.3
}
.panel-note {
  font-size:11px;
  line-height:1.6;
color:var(--text-muted)
}
.field-label {
  display:grid;
  gap:6px;
  font-size:10px;
color:var(--text-secondary)
}
.panel-body select,.panel-body textarea {
  min-width:0;
  width:100%;
  border:1px solid var(--border-standard);
  border-radius:7px;
  padding:8px;
  background:var(--surface-input);
  color:var(--text-primary);
  font-size:11px;
line-height:1.5
}
.panel-body textarea {
  resize:vertical;
  min-height:88px;
max-height:180px
}
.panel-body textarea::placeholder {
  color:var(--text-muted);
opacity:1
}
.property-metrics {
  display:grid;
gap:7px
}
.property-metrics>span {
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:9px;
color:var(--text-muted)
}
.property-metrics code {
  color:var(--text-secondary);
font:9px var(--font-mono)
}
.property-controls {
  border-top:1px solid var(--border-standard);
  padding-top:14px;
  display:grid;
gap:12px
}
.range-field {
  font-size:10px;
color:var(--text-secondary)
}
.range-field>span {
  display:flex;
  justify-content:space-between;
  gap:8px;
margin-bottom:2px
}
.range-field output {
  font:9px var(--font-mono);
color:var(--text-muted)
}
.range-field input {
  width:100%;
  height:16px;
  accent-color:var(--accent);
cursor:ew-resize
}
.color-fields {
  display:flex;
gap:12px
}
.color-fields label {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:8px;
flex:1
}
.color-fields input {
  width:28px;
  height:28px;
  padding:2px;
  border:1px solid var(--border-strong);
  border-radius:5px;
  background:var(--surface-input);
cursor:pointer
}
.panel-button,.viewport-buttons button {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  padding:7px 9px;
  background:var(--glass-reflection) var(--surface-elevated);
  color:var(--text-primary);
  border:1px solid var(--border-glass);
  border-radius:7px;
  font-size:11px;
  font-weight:500;
transition:background-color var(--transition-fast),transform var(--transition-fast)
}
.panel-button .be-icon {
  width:13px;
height:13px
}
.panel-button:hover {
background-color:var(--surface-selected)
}
.panel-button.accent-button {
  background:var(--accent-reflection) var(--accent);
  color:var(--text-inverse);
border-color:var(--accent)
}
.responsive-comparison {
  position:absolute;
  bottom:14px;
  left:12px;
  right:12px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  pointer-events:none;
perspective:800px
}
.responsive-comparison>div {
  width:40%;
  padding:5px;
  background:var(--surface-panel);
  border:1px solid var(--border-strong);
  border-radius:6px;
  box-shadow:var(--shadow-md);
  transform:rotateY(-5deg);
color:var(--text-primary)
}
.responsive-comparison>div:nth-child(2) {
  width:28%;
transform:translateY(-10px)
}
.responsive-comparison>div:nth-child(3) {
  width:20%;
transform:rotateY(5deg)
}
.responsive-comparison span,.responsive-comparison b {
  font-size:7px;
  font-weight:400;
  display:block;
text-align:center
}
.responsive-comparison i {
  display:block;
  height:45px;
  background:linear-gradient(180deg,var(--paper) 50%,var(--demo-accent) 50%);
  border-radius:2px;
margin:5px 0
}
.responsive-comparison>div:nth-child(2) i {
height:65px
}
.responsive-comparison>div:nth-child(3) i {
height:85px
}
.audit-tabs {
  display:flex;
gap:5px
}
.audit-tabs button {
font-size:10px
}
.audit-results {
  display:grid;
gap:12px
}
.finding {
  border-top:1px solid var(--border-standard);
padding-top:12px
}
.finding>button:first-child {
  background:none;
  border:0;
  color:var(--text-primary);
  text-align:left;
  padding:0;
  font-size:11px;
line-height:1.5
}
.finding p {
  font-size:10px;
  color:var(--text-muted);
margin-top:6px
}
.finding .text-button {
  font-size:10px;
color:var(--accent)
}
.ai-form {
  display:grid;
gap:9px
}
.prompt-result {
  display:grid;
gap:10px
}
.prompt-result pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:10px/1.8 var(--font-mono);
  padding:12px;
  background:var(--surface-input);
  border:1px solid var(--border-standard);
  border-radius:7px;
  max-height:300px;
  overflow:auto;
  margin:0;
color:var(--text-secondary)
}
.demo-status {
  padding:9px 12px;
  border-top:1px solid var(--border-standard);
  font-size:10px;
  color:var(--text-muted);
  background:var(--surface-panel);
min-height:34px
}
.is-processing .reference-area:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border:2px solid var(--accent);
  background:linear-gradient(110deg,transparent 25%,var(--orange-soft),transparent 75%);
animation:processing var(--motion-demo) var(--ease-fluid)
}
@keyframes processing {
  from {
  opacity:.2
  }
  to {
  opacity:1
  }
}
.demo-mount[data-variant='hero'] .demo-layout {
  grid-template-columns:minmax(0,1fr) 180px;
min-height:420px
}
.demo-mount[data-variant='hero'] .property-panel {
max-height:460px
}
.demo-mount[data-variant='hero'] .tool>span,.demo-mount[data-variant='tour'] .tool>span,.demo-mount[data-variant='ai'] .tool>span {
display:none
}
.demo-mount[data-variant='hero'] .reference-nav {
padding:16px
}
.demo-mount[data-variant='hero'] .reference-nav>span:last-child {
display:none
}
.demo-mount[data-variant='hero'] .project-art {
height:66px
}
.demo-mount[data-variant='hero'] .property-controls .range-field:nth-child(n+4) {
display:none
}
.demo-mount[data-variant='hero'] .reference-eyebrow {
font-size:6px
}
.demo-mount[data-variant='hero'] .reference-footer {
padding:12px 10px
}
.demo-mount[data-variant='ai'] .demo-layout {
grid-template-columns:minmax(0,1fr) 230px
}
.demo-mount[data-variant='ai'] .property-panel {
max-height:570px
}
.playground .demo-layout {
  grid-template-columns:minmax(0,1fr) 320px;
min-height:670px
}
.playground .property-panel {
max-height:760px
}
.playground .reference-area {
  padding:24px;
  max-height:760px;
background:var(--surface-input)
}
.playground .reference {
min-height:650px
}
.playground .reference-hero {
min-height:320px
}
.playground .reference-cards {
min-height:220px
}
.playground .project-art {
height:150px
}
.playground .panel-body {
  padding:20px;
gap:18px
}
.playground .panel-intro h4 {
font-size:20px
}
.playground .field-label,.playground .range-field,.playground .color-fields label {
font-size:12px
}
.playground .panel-button,.playground .suggestion-list button,.playground .panel-body select,.playground .panel-body textarea {
  font-size:12px;
min-height:40px
}
.playground .property-metrics>span,.playground .property-metrics code {
font-size:11px
}
.playground .property-controls {
gap:15px
}
.playground .demo-toolbar {
  padding:10px 14px;
gap:8px
}
.playground .tool {
  min-height:38px;
padding:8px 10px
}
.playground .tool>span {
font-size:11px
}
.playground .demo-status {
  font-size:12px;
padding:12px 18px
}
.playground .panel-note,.playground .finding p,.playground .finding>button:first-child,.playground .change-log {
font-size:12px
}
.playground .prompt-result pre {
font-size:11px
}
.panel-body .be-color-details {
font-size:11px
}
.panel-body .be-color-details h3 {
font-size:12px
}
.panel-body .be-color-heading {
gap:8px
}
.panel-body .be-color-preview {
  width:32px;
height:32px
}
.panel-body .be-color-values code {
font-size:9px
}
.panel-body .be-section-heading {
flex-wrap:wrap
}
.panel-body .be-shades-grid {
grid-template-columns:repeat(4,minmax(0,1fr))
}
.panel-body .be-copy-value {
gap:4px
}
.panel-body .be-copy-value .be-icon {
width:12px
}
.panel-body .be-copy-value>span:first-child {
  width:22px;
font-size:9px
}
@container (max-width:520px) {
  .reference-nav {
  padding:16px
  }
  .reference-nav>span:last-child {
  font-size:8px
  }
  .reference-hero h3 {
  overflow-wrap:anywhere
  }
  .reference-cards {
  grid-template-columns:1fr
  }
  .reference-footer {
  font-size:6px
  }
}
@media(min-width:1500px) {
  .hero {
  gap:60px
  }
  .hero h1 {
  font-size:70px
  }
}
@media(max-width:1200px) {
  .site-header {
  gap:16px
  }
  .site-header nav {
  gap:14px
  }
  .nav-free {
  display:none
  }
  .hero {
    grid-template-columns:1fr 1.1fr;
  gap:24px
  }
  .hero h1 {
  font-size:48px
  }
  .hero-description {
  font-size:14px
  }
  .hero .button {
  border-radius:var(--radius-control)
  }
  .demo-mount:not([data-animation])[data-variant='hero'] .demo-layout {
  grid-template-columns:minmax(0,1fr) 160px
  }
  .demo-mount:not([data-animation])[data-variant='ai'] .demo-layout {
  grid-template-columns:minmax(0,1fr) 190px
  }
  .demo-mount:not([data-animation]) .demo-layout {
  grid-template-columns:minmax(0,1fr) 210px
  }
  .hero-caption .text-button:first-of-type {
  margin-left:auto
  }
}
@media(max-width:1000px) {
  .site-header nav {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:var(--surface-popover);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-card);
  box-shadow:var(--shadow-floating)
  }
  .site-header nav.is-open {}
  .menu-button {
    display:inline-flex;
    gap:10px;
    align-items:center;
    margin-left:auto;
    min-height:38px;
  font-size:12px
  }
  .hero {
    grid-template-columns:1fr;
    gap:55px;
    text-align:center;
  padding-top:75px
  }
  .hero-copy .eyebrow,.hero .action-row {
  justify-content:center
  }
  .hero h1 {
  font-size:64px
  }
  .hero-description {
    font-size:16px;
    margin-inline:auto;
  max-width:560px
  }
  .hero-product {
    max-width:660px;
    width:100%;
  margin-inline:auto
  }
  .hero-product .demo-mount:not([data-animation]) .demo-layout {
    text-align:left;
  grid-template-columns:minmax(0,1fr) 230px
  }
  .hero-product .reference-cards {
  grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hero-product .reference-cards article:nth-child(2) {
  display:block
  }
  .hero-product .demo-mount:not([data-animation]) .property-panel {
  max-height:470px
  }
  .demo-mount:not([data-animation])[data-variant='ai'] .demo-layout {
  grid-template-columns:minmax(0,1fr) 280px
  }
  .playground .demo-layout {
  grid-template-columns:minmax(0,1fr) 280px
  }
  .playground .demo-toolbar {
  gap:4px
  }
  .playground .tool {
  padding:8px
  }
  .playground .tool>span {
  display:none
  }
  .playground .reference-area {
  padding:14px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:32px;
    max-width:440px;
  margin-inline:auto
  }
  #plan-pro { order: 1; }
  #plan-free { order: 2; }
  #plan-lifetime { order: 3; }
  
  .price-card {
  padding:32px 28px
  }
  .price span {
  display:inline;
  margin-left:8px;
  margin-top:0;
  }
  .billing-toggle {
    flex-direction:row;
    padding:4px;
  }
  .billing-toggle button {
    padding:6px 14px;
    font-size:14px;
  }
  .plan-note {
    min-height:0;
  max-width:100%
  }
  .price-card .button {
    margin-top:auto;
    margin-bottom:16px;
  }
  .price-card ul.feature-list {
  gap:12px
  }
  .pricing-disclosure {
  font-size:12px
  }
  .faq-layout {
  display:block
  }
  .faq-list summary {
  font-size:14px
  }
  .faq-list details p {
  font-size:13px
  }
  .final-cta {
  padding:60px 0 80px
  }
  .final-cta h2 {}
  .final-cta>p:not(.eyebrow) {
  font-size:14px
  }
  .site-footer {
    grid-template-columns:1fr;
    grid-template-areas:"brand" "links" "badges" "copy";
    gap:24px;
    padding-block:32px
  }
  .footer-links {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .site-footer>span {
    justify-self:start
  }
  .responsive-comparison {
  bottom:12px
  }
  .panel-body .be-shades-grid {
  grid-template-columns:repeat(6,minmax(0,1fr))
  }
}
@media(max-width:370px) {
  .hero-product .demo-mount:not([data-animation]) .demo-layout {
  grid-template-columns:1fr 132px
  }
  .hero-caption .text-button:first-of-type {
  margin-left:0
  }
  .hero-product .tool {
  min-width:24px
  }
  .story-sticky .demo-mount:not([data-animation]) .demo-layout {
  grid-template-columns:1fr 145px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
  transition:none!important
  }
  button:active,.button:active {
  transform:none!important
  }
  .responsive-comparison>div {
  transform:none!important
  }
}
@media(prefers-reduced-transparency:reduce) {
  .glass,.site-header,.property-panel {
    background-color:var(--surface-panel);
    backdrop-filter:none;
  -webkit-backdrop-filter:none
  }
}
.reference-hero {
  display:flex;
  flex-direction:column;
align-items:flex-start
}
.reference-hero>h3,.reference-hero>p {
margin-bottom:0
}
.reference-hero {
gap:24px
}
.reference-hero .reference-eyebrow {
margin-bottom:0
}
.reference-hero .reference-cta {
flex-shrink:0
}
/* Small screens show the page and inspector sequentially, at a readable size. */
@media(max-width:700px) {
  .hero-product .demo-mount:not([data-animation]) .demo-layout,.story-sticky .demo-mount:not([data-animation]) .demo-layout {
  grid-template-columns:1fr
  }
  .hero-product .demo-mount:not([data-animation]) .reference-area,.story-sticky .demo-mount:not([data-animation]) .reference-area {
  max-height:330px
  }
  .hero-product .demo-mount:not([data-animation]) .property-panel,.story-sticky .demo-mount:not([data-animation]) .property-panel {
    max-height:240px;
    border-left:0;
  border-top:1px solid var(--border-standard)
  }
  .hero-product .panel-body,.story-sticky .panel-body {
  padding:16px
  }
  .hero-product .panel-brand {
  font-size:9px
  }
  .hero-product .panel-heading {
  padding:12px
  }
  .hero-product .panel-intro h4 {
  font-size:16px
  }
  .hero-product .field-label {
  font-size:12px
  }
  .hero-product .panel-body select {
  font-size:12px
  }
  .hero-product .panel-kicker {
  font-size:9px
  }
  .hero-product .reference-eyebrow {
  font-size:8px
  }
  .hero-product .tool,.story-sticky .tool {
    min-width:30px;
  min-height:36px
  }
  .hero-product .tool .be-icon {
  width:16px
  }
  .hero-product .demo-toolbar,.story-sticky .demo-toolbar {
    flex-wrap:wrap;
    padding:8px;
  gap:3px
  }
}
.comparison-screen {
  position:relative;
  aspect-ratio:1.4;
  background:var(--paper);
  overflow:hidden;
  border-radius:2px;
margin:5px 0
}
.responsive-comparison>div:nth-child(2) .comparison-screen {
aspect-ratio:.9
}
.responsive-comparison>div:nth-child(3) .comparison-screen {
aspect-ratio:.6
}
.comparison-page {
  position:absolute;
  left:0;
  top:0;
  max-width:none;
  transform-origin:top left;
pointer-events:none
}

@media (max-width:700px) {
  .playground .demo-toolbar {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .playground .tool { min-height:40px; }
  .playground .reset-tool { margin-left:0; }
}

.is-interacting .sim-cursor { opacity:0; }
.demo-mount .is-fresh {
  animation:be-surface-enter var(--motion-panel) var(--ease-fluid);
}
.skip-link { opacity:0; pointer-events:none; }
.skip-link:focus { opacity:1; pointer-events:auto; }
@media (min-width:701px) {
  .hero-product .demo-layout { height:500px; min-height:0; }
  .hero-product .reference-area,.hero-product .property-panel { max-height:500px; }
}

/* Graphite workbench: one shared scene, floating tools, contextual surfaces. */
@font-face{font-family:Chonburi;src:url('../demo/chonburi.woff2') format('woff2');font-display:swap}
@font-face{font-family:PersonalInter;src:url('../demo/inter.woff2') format('woff2');font-display:swap}
.hero{grid-template-columns:1fr;gap:42px;text-align:center;padding-top:85px}
.hero-copy{max-width:920px;margin:auto}.hero-copy .eyebrow,.hero .action-row{justify-content:center}
.hero h1{font-size:clamp(42px,5.5vw,78px);line-height:1.07;letter-spacing:-.055em}.hero-description{max-width:640px;margin:24px auto}.hero-product{width:100%;max-width:none}
.product-window{position:relative;overflow:hidden}.browser-chrome{height:38px}.demo-layout,.demo-mount[data-variant] .demo-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:720px;min-height:0;text-align:left}
.demo-mount[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-layout{grid-template-columns:minmax(0,1fr) min(460px,44%)}
.demo-toolbar,.playground .demo-toolbar,.hero-product .demo-toolbar,.story-sticky .demo-toolbar{position:absolute;top:52px;left:16px;z-index:6;display:flex;flex-wrap:nowrap;width:max-content;max-width:calc(100% - 32px);padding:6px;gap:6px;border:1px solid var(--border-glass);border-radius:14px;background:var(--glass-reflection) var(--surface-glass-strong);box-shadow:var(--glass-highlight),var(--shadow-floating);backdrop-filter:blur(16px)}
.demo-toolbar:before{content:'⠿';color:var(--text-muted);padding:0 4px}.demo-mount .tool{width:36px;height:36px;min-width:36px;min-height:36px;padding:7px}.demo-mount .tool .be-icon{width:18px;height:18px}.demo-mount .tool>span{display:none}
.demo-mount .reference-area{padding:0;max-height:none;background:#F8F7F3;overflow:auto}.demo-mount .reference{min-height:100%;font-family:PersonalInter,Arial,sans-serif;color:#1f1f1f;background:#f8f7f3;container-type:inline-size;background-image:radial-gradient(circle at 20% 35%,#8e92824d 1px,transparent 2px),radial-gradient(circle at 75% 80%,#8e928233 1px,transparent 2px);background-size:157px 193px,211px 177px}
.demo-mount .reference-nav{padding:78px 8% 0;border:0;height:128px;font:16px PersonalInter,sans-serif}.reference-nav img{object-fit:contain}.demo-mount .reference-nav>span:last-child{display:block;font-size:18px}.demo-mount .reference-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center!important;min-height:0;margin:0 auto;max-width:1050px;background:transparent!important}.personal-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}.demo-mount .reference-eyebrow{font:600 16px PersonalInter,sans-serif;letter-spacing:0;color:#68665d}.demo-mount .reference-hero h3{font-family:Chonburi,Georgia,serif;line-height:1.1;font-weight:400;letter-spacing:-.02em;margin:0;overflow-wrap:normal}.reference-hero h3 em{font-style:normal;color:#48724b}.reference-hero h3 em+em{color:#a8431d}.demo-mount .reference-hero p{line-height:1.8;margin:0;font-size:inherit}.demo-mount .reference-cta{max-width:max-content;display:inline-flex;align-items:center;justify-content:center;min-width:140px;font-family:PersonalInter,sans-serif;border:1px solid #ded9d0;box-shadow:2px 3px 0 -1px #6c6b64;margin-top:4px}.demo-mount .reference-footer{font:11px PersonalInter,sans-serif;text-align:center;padding:28px;color:#68665d}.reference-hero[style*='--hero-columns: 1']{grid-template-columns:1fr}.reference-hero[style*='--hero-columns: 1'] .personal-copy{align-items:center;text-align:center}.reference-hero[style*='--hero-columns: 1'] .personal-portrait{max-height:250px}
.demo-mount .property-panel{width:100%;min-width:0;max-height:none;background:var(--glass-reflection) var(--surface-glass-strong);border-left:1px solid var(--border-glass);box-shadow:var(--shadow-floating);overflow:auto;animation:panel-arrive 280ms var(--ease-fluid)}
.demo-mount .property-panel.is-inspector{position:absolute;right:18px;top:82px;bottom:18px;width:300px;max-height:500px;z-index:5;border:1px solid var(--border-glass);border-radius:16px;backdrop-filter:blur(20px)}
.demo-mount .panel-heading{position:sticky;top:0;background:var(--surface-glass-strong);padding:10px 16px;z-index:2;display:flex;justify-content:space-between;align-items:center}.demo-mount .panel-brand{font-size:10px}.demo-mount .panel-body{display:flex;flex-direction:column;padding:18px;gap:16px}.demo-mount .panel-intro h4{font-size:21px}.demo-mount .panel-note,.demo-mount .field-label,.demo-mount .range-field,.demo-mount .panel-button,.demo-mount .panel-body select,.demo-mount .panel-body textarea,.demo-mount .suggestion-list button{font-size:12px}.demo-mount .panel-button,.demo-mount .panel-body select{min-height:38px}.panel-body select,.panel-body textarea{max-width:100%}.demo-mount .property-metrics{display:grid}.demo-mount .property-controls .range-field{display:block}.demo-mount .property-metrics code{font-size:10px}.demo-mount .panel-kicker{font-size:9px}.demo-mount .demo-status{font-size:11px;min-height:44px;display:flex;align-items:center;padding:10px 16px}.demo-mount .sim-cursor{z-index:4;pointer-events:none}.demo-mount:not([data-variant='hero']) .sim-cursor{display:none}
.chat-message{padding:12px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-elevated);font-size:12px;line-height:1.6}.chat-message small{display:block;color:var(--accent);font-size:10px;margin-bottom:5px}.chat-message.user{margin-left:22px;background:var(--surface-input)}.conversation{display:grid;gap:10px}.conversation:empty{display:none}.proposal{padding:14px;border:1px solid var(--border-selected);border-radius:12px;font-size:12px;display:grid;gap:12px}.processing-label{font-size:12px;color:var(--accent)}.demo-mount[data-annotating='true'] .reference{cursor:crosshair}.demo-mount[data-annotating='true'] .reference *{cursor:crosshair}.demo-mount .is-hovered{outline:2px solid var(--accent);outline-offset:2px}.demo-mount .is-selected{outline:2px solid var(--accent);outline-offset:3px;box-shadow:none}.demo-mount .inspect-hint{z-index:7;pointer-events:none}
@keyframes panel-arrive{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@container (max-width:520px){.demo-mount .reference-hero{grid-template-columns:1fr;gap:32px!important;padding-top:36px!important}.personal-copy{align-items:center;text-align:center;gap:24px}.demo-mount .reference-hero h3{text-align:center!important;font-size:min(var(--heading-size,48px),34px)!important}.demo-mount .reference-hero p{text-align:center!important}.personal-portrait{max-height:380px;max-width:320px;margin:auto}.demo-mount .reference-nav{padding:78px 28px 0}.demo-mount .reference-eyebrow{font-size:16px}.demo-mount .reference-footer{line-height:1.8}.reference.mobile-improved .personal-copy{gap:32px}.reference.mobile-improved .reference-hero h3{font-size:30px!important}}
@media(max-width:800px){.demo-mount:not([data-animation])[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-layout{grid-template-columns:1fr;grid-template-rows:340px 460px;height:800px}.demo-mount:not([data-animation]) .demo-layout{height:560px}.demo-mount:not([data-animation]) .property-panel.is-inspector{width:min(300px,calc(100% - 32px));top:100px;bottom:16px}.demo-mount:not([data-animation]) .property-panel{border-left:0;border-top:1px solid var(--border-glass)}.hero-product{max-width:none}.demo-mount:not([data-animation]) .reference-area{max-height:none}.hero{padding-top:55px}.demo-mount .reference[data-viewport='mobile']{max-width:390px}.demo-mount .panel-heading{padding:8px 14px}}
@media(max-width:480px){.demo-toolbar,.playground .demo-toolbar,.hero-product .demo-toolbar,.story-sticky .demo-toolbar{left:8px;max-width:calc(100% - 16px);gap:2px;padding:5px}.demo-toolbar:before{padding:0 2px}.demo-mount .tool{width:34px;min-width:34px}.hero .action-row{flex-wrap:wrap}.hero h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){.property-panel{animation:none!important}}
.demo-reset{font-size:10px;min-height:30px;color:var(--text-secondary)}.reopen-tools{position:absolute;left:18px;top:54px;z-index:7;background:var(--surface-panel)}.demo-mount .property-panel.is-inspector{width:min(328px,calc(100% - 32px))}.demo-mount .reference[data-viewport='tablet']{max-width:768px}.demo-mount .reference[data-viewport='mobile']{max-width:390px}.demo-mount .reference-area{scrollbar-width:thin;scrollbar-color:#a3a199 #f8f7f3}.demo-mount .property-panel{scrollbar-width:thin;scrollbar-color:var(--text-muted) var(--surface-panel)}
.demo-toolbar,.playground .demo-toolbar,.hero-product .demo-toolbar,.story-sticky .demo-toolbar{top:auto;bottom:62px;left:50%;transform:translateX(-50%)}.demo-toolbar:before{display:none}.toolbar-grip{display:flex;width:24px;color:var(--text-muted);align-items:center;justify-content:center}.toolbar-grip .be-icon{width:14px}.demo-toolbar [data-tool='ai'],.demo-toolbar [data-exit]{border-left:1px solid var(--border-glass)}.demo-mount .reference-nav{padding-top:20px;height:90px}.demo-mount .reference-hero{padding-top:64px!important}.demo-mount .property-panel.is-inspector{top:40px;bottom:100px}.demo-mount .reference-footer{padding-bottom:95px}
@container(max-width:520px){.demo-mount .reference-hero h3{font-size:calc(var(--heading-size,48px)*.71875)!important}.demo-mount .reference-nav{padding-top:20px}.demo-mount .reference-hero{padding-top:64px!important}.reference.mobile-improved .reference-hero h3{font-size:calc(var(--heading-size,48px)*.65)!important}}
@media(max-width:800px){.demo-mount[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-toolbar{bottom:514px}.demo-mount:not([data-animation]) .property-panel.is-inspector{top:20px;bottom:100px}.demo-mount .reference-hero{padding-top:40px!important}}
/* Override the former miniature studio scene at every demo size. */
.demo-mount[data-variant] .reference-nav{padding:20px max(28px,calc((100% - 986px)/2)) 0;height:90px}.demo-mount[data-variant] .reference-nav>span:last-child{display:block;font-size:18px}.demo-mount[data-variant] .reference-eyebrow{font:600 18px PersonalInter,sans-serif;letter-spacing:0;line-height:1.4}.demo-mount[data-variant] .reference-footer{display:block;font:11px/1.8 PersonalInter,sans-serif;letter-spacing:0;text-align:center;padding:28px 20px 95px}.demo-mount[data-variant] .reference-hero{max-width:1050px}.demo-mount .sim-cursor{opacity:0}.demo-mount[data-variant='hero'][data-panel='open'] .sim-cursor{opacity:1}.demo-mount[data-variant='hero'].is-interacting .sim-cursor{opacity:0}
.demo-mount[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-layout{grid-template-columns:minmax(0,1fr) 460px}.demo-mount[data-variant] .property-panel:not(.is-inspector){height:100%;max-height:none;border-radius:0}.demo-mount[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-toolbar{left:calc((100% - 460px)/2)}
@media(max-width:800px){.demo-mount:not([data-animation])[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-layout{grid-template-columns:1fr}.demo-mount[data-panel='open']:not([data-tool='inspect']):not([data-tool='edit']) .demo-toolbar{left:50%}}