/* Live demos: each one renders inside a device shell (browser window, app
   window with sidebar, phone, or document viewer) with its own product
   styling, deliberately NOT the site's skin. The site's token names are
   re-mapped inside .dv so demo code can keep using them. */

@font-face{font-family:'Inter';src:url('/fonts/inter-var.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('/fonts/nunito-var.woff2') format('woff2-variations');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Oswald';src:url('/fonts/oswald-var.woff2') format('woff2-variations');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-var.woff2') format('woff2-variations');font-weight:400 900;font-style:normal;font-display:swap}

/* ---- The stage the device sits on ---- */
.demo{margin-top:var(--s6); min-width:0}
.demo__stage{position:relative; padding:clamp(14px,3vw,36px); border-radius:18px;
  background:
    radial-gradient(60% 80% at 20% 0%, color-mix(in oklch, var(--p-accent) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, color-mix(in oklch, var(--p-accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #e9ebf0, #dfe2e8);
  --p-accent:#4f6df5}
.section--ink .demo__stage{background:
    radial-gradient(60% 80% at 20% 0%, color-mix(in oklch, var(--p-accent) 30%, transparent), transparent 70%),
    linear-gradient(180deg, #2a303a, #1c2027)}
.demo__caption{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-top:14px; font-family:'Inter',system-ui,sans-serif; font-size:0.78rem; color:#4b5261}
.section--ink .demo__caption{color:#c7ccd6}
.demo__live{display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:0.02em}
.demo__live i{width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; box-shadow:0 0 0 3px rgba(34,197,94,0.25); animation:dv-pulse 2s infinite}
@keyframes dv-pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,0.25)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0.08)}}
.demo__status{font-weight:500; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.7); color:#3a4150}
.section--ink .demo__status{background:rgba(255,255,255,0.12); color:#e6e9ef}
.demo__status--ok{color:#15803d} .demo__status--warn{color:#b45309} .demo__status--bad{color:#b91c1c}
.section--ink .demo__status--ok{color:#86efac} .section--ink .demo__status--warn{color:#fcd34d} .section--ink .demo__status--bad{color:#fca5a5}
.demo__note{margin:12px 0 0; font-size:var(--t--1); color:var(--fg-mute); max-inline-size:70ch}
.section--ink .demo__note{color:var(--on-ink-dim)}

/* ---- Product scope: everything inside a device ---- */
.dv{
  --p-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --p-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --p-bg:#f4f5f8; --p-surface:#ffffff; --p-fg:#111827; --p-dim:#4b5563; --p-mute:#6b7280;
  --p-line:#e5e7eb; --p-line-2:#d1d5db; --p-accent:#4f6df5; --p-accent-fg:#ffffff;
  --p-accent-soft:color-mix(in srgb, var(--p-accent) 12%, #ffffff);
  --p-good:#16a34a; --p-good-soft:#dcfce7; --p-warn:#d97706; --p-warn-soft:#fef3c7; --p-bad:#dc2626; --p-bad-soft:#fee2e2;
  --p-r:10px; --p-shadow:0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.1);
  /* re-map the site's token names so demo code inherits the product look */
  --ink:var(--p-fg); --ink-2:var(--p-dim); --bone:var(--p-surface); --bone-2:var(--p-bg); --line:var(--p-line);
  --amber:var(--p-accent); --amber-deep:var(--p-accent); --amber-soft:var(--p-accent-soft); --green:var(--p-accent);
  --fg:var(--p-fg); --fg-dim:var(--p-dim); --fg-mute:var(--p-mute); --accent:var(--p-accent);
  --display:var(--p-font); --body:var(--p-font); --mono:var(--p-mono);
  font-family:var(--p-font); color:var(--p-fg); font-size:14px; line-height:1.45; letter-spacing:0;
  border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(15,23,42,0.45), 0 0 0 1px rgba(15,23,42,0.08);
  background:var(--p-bg); min-width:0; text-align:left
}
.dv *, .dv *::before, .dv *::after{box-sizing:border-box}
.dv h1,.dv h2,.dv h3,.dv h4{font-family:var(--p-font); letter-spacing:-0.01em; color:var(--p-fg)}
.dv a{color:var(--p-accent)}
.dv .dim{color:var(--p-mute)}
.dv .ms h1, .dv .ms h2, .dv .ms h3{color:inherit}
.dv code{font-family:var(--p-mono); font-size:0.85em; background:var(--p-bg); padding:1px 5px; border-radius:4px}

/* Browser window */
.dv__chrome{background:#e8eaef; border-bottom:1px solid #d3d6dd; padding:8px 10px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px}
.dv__lights{display:flex; gap:6px}
.dv__lights i{width:11px; height:11px; border-radius:50%; display:block; background:#fe5f57} .dv__lights i:nth-child(2){background:#febc2e} .dv__lights i:nth-child(3){background:#28c840}
.dv__url{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #d3d6dd; border-radius:8px; padding:5px 10px; font-size:12px; color:#374151; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; justify-self:center; width:min(100%,520px)}
.dv__url svg{flex:none; width:11px; height:11px}
.dv__url b{font-weight:500; color:#111827}
.dv__nav{display:flex; gap:10px; color:#9ca3af; font-size:14px; user-select:none}
.dv__tabs{display:flex; gap:4px; padding:8px 8px 0; background:#dfe2e8}
.dv__tab{font:500 12px var(--p-font); padding:7px 14px; border-radius:8px 8px 0 0; background:#e8eaef; color:#4b5563; border:0; cursor:pointer; display:flex; align-items:center; gap:8px}
.dv__tab[aria-selected="true"]{background:#fff; color:#111827}
.dv__tab i{width:8px; height:8px; border-radius:50%; background:var(--p-accent); display:inline-block}
.dv__tabs + .dv__chrome{background:#fff; border-bottom:1px solid #e5e7eb}
.dv__page{background:#fff; min-height:380px; position:relative}

/* App window with sidebar */
.dv--app{display:grid; grid-template-columns:208px 1fr; grid-template-rows:auto 1fr; min-height:440px}
.dv__side{grid-row:1 / span 2; background:var(--p-side, #151a24); color:#cfd5e1; padding:16px 12px; display:flex; flex-direction:column; gap:4px}
.dv__brand{display:flex; align-items:center; gap:10px; padding:4px 8px 16px; color:#fff; font-weight:700; font-size:15px; letter-spacing:-0.01em}
.dv__mark{width:28px; height:28px; border-radius:8px; background:var(--p-accent); color:var(--p-accent-fg); display:grid; place-items:center; font-weight:800; font-size:14px; flex:none}
.dv__item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; color:#aeb6c4; cursor:default}
.dv__item svg{width:16px; height:16px; flex:none; opacity:0.9}
.dv__item[aria-current="page"]{background:rgba(255,255,255,0.1); color:#fff}
.dv__side .dv__user{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 8px 0; border-top:1px solid rgba(255,255,255,0.08); font-size:12px; color:#aeb6c4}
.dv__avatar{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, var(--p-accent), color-mix(in srgb, var(--p-accent) 50%, #fff)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:11px; flex:none}
.dv__top{background:var(--p-surface); border-bottom:1px solid var(--p-line); padding:10px 20px; display:flex; align-items:center; gap:14px; min-height:52px}
.dv__top h3{margin:0; font-size:15px; font-weight:600}
.dv__search{margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--p-bg); border:1px solid var(--p-line); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--p-mute); width:min(220px,30%)}
.dv__bell{width:30px; height:30px; border-radius:8px; border:1px solid var(--p-line); display:grid; place-items:center; position:relative; color:var(--p-dim)}
.dv__bell::after{content:''; position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--p-bad); border:2px solid #fff}
.dv__main{padding:20px; display:grid; gap:16px; align-content:start; min-width:0}
@media (max-width:48rem){
  .dv--app{grid-template-columns:1fr}
  .dv__side{grid-row:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:10px 12px; gap:6px}
  .dv__brand{padding:0 8px 0 0}
  .dv__item span{display:none}
  .dv__item{padding:8px}
  .dv__side .dv__user{display:none}
  .dv__main{padding:14px}
  .dv__search{display:none}
}

/* Phone */
.dv--phone{background:transparent; box-shadow:none; overflow:visible; border-radius:0}
.dv__phone{width:min(320px,100%); margin:0 auto; border-radius:44px; padding:12px; background:#0b0d12; box-shadow:0 30px 60px -28px rgba(15,23,42,0.6), inset 0 0 0 2px #2a2f3a}
.dv__screen{background:var(--p-bg); border-radius:34px; min-height:560px; overflow:hidden; display:flex; flex-direction:column; position:relative}
.dv__statusbar{display:flex; justify-content:space-between; align-items:center; padding:12px 22px 0; font-size:12px; font-weight:600; color:var(--p-fg)}
.dv__island{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:96px; height:26px; border-radius:16px; background:#0b0d12}
.dv__appbar{padding:22px 18px 12px; display:flex; justify-content:space-between; align-items:center; background:var(--p-bg)}
.dv__appbar h3{margin:0; font-size:24px; font-weight:800; letter-spacing:-0.02em}
.dv__screen .list{flex:1; overflow:auto; padding:0 12px 12px; display:grid; gap:8px; align-content:start}
.dv__screen .item{padding:12px 14px; background:var(--p-surface); border-radius:14px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; box-shadow:var(--p-shadow)}
.dv__screen .item:hover{background:#fafafa}
.dv__tabbar{display:flex; border-top:1px solid var(--p-line); background:var(--p-surface); padding:8px 6px 22px}
.dv__tabbar button{flex:1; font:600 11px var(--p-font); padding:6px 4px; border:0; background:none; cursor:pointer; color:var(--p-mute); display:grid; justify-items:center; gap:3px}
.dv__tabbar button svg{width:22px; height:22px}
.dv__tabbar button[aria-pressed="true"]{color:var(--p-accent)}
.dv__murl{margin:10px 12px 0; background:var(--p-surface); border-radius:12px; padding:9px 12px; font-size:12px; font-weight:500; color:var(--p-dim); display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:var(--p-shadow)}
.dv__mbar{display:flex; justify-content:space-around; padding:10px 20px 24px; color:var(--p-accent); font-size:18px; background:var(--p-surface); border-top:1px solid var(--p-line)}
.dv__screen.is-site .list{padding:0; gap:0; display:block; margin-top:10px}
.dv__home{width:110px; height:5px; border-radius:3px; background:#111; opacity:0.35; position:absolute; bottom:8px; left:50%; transform:translateX(-50%)}

/* Document viewer */
.dv--doc{background:#e5e7eb}
.dv__doctop{background:#fff; border-bottom:1px solid #e5e7eb; padding:10px 16px; display:flex; align-items:center; gap:12px; font-size:12px; color:#4b5563}
.dv__doctop b{color:#111827; font-weight:600}
.dv__docbody{display:grid; grid-template-columns:200px 1fr; min-height:440px}
.dv__files{background:#f9fafb; border-right:1px solid #e5e7eb; padding:12px 8px; display:grid; gap:2px; align-content:start}
.dv__file{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font:500 12.5px var(--p-font); color:#374151; border:0; background:none; cursor:pointer; text-align:left}
.dv__file svg{width:14px; height:14px; flex:none; color:#9ca3af}
.dv__file[aria-selected="true"]{background:#fff; color:#111827; box-shadow:var(--p-shadow)}
.dv__paper{padding:28px; overflow:auto}
.dv__sheet{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 12px 30px -20px rgba(0,0,0,0.3); padding:clamp(22px,4vw,48px); max-width:820px; margin:0 auto; font-family:Georgia,'Times New Roman',serif; color:#1f2937; font-size:14.5px; line-height:1.55}
.dv__sheet .dochead{display:flex; justify-content:space-between; gap:12px; border-bottom:2px solid #111827; padding-bottom:10px; margin-bottom:22px; font-family:var(--p-font); font-size:11px; color:#6b7280; letter-spacing:0.04em; text-transform:uppercase}
.dv__sheet h2{font-family:Georgia,serif; font-weight:700; font-size:26px; margin:0 0 6px; letter-spacing:-0.01em}
.dv__sheet h4{font-family:var(--p-font); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#6b7280; margin:22px 0 8px}
.dv__sheet .demo__table{font-family:var(--p-font); font-size:13px}
.dv__sheet .demo__panel{font-family:var(--p-font)}
@media (max-width:48rem){.dv__docbody{grid-template-columns:1fr} .dv__files{display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid #e5e7eb} .dv__paper{padding:14px}}

/* Plain body (used inside browser pages that are not a website) */
.demo__body{padding:18px; display:grid; gap:14px}
@media (min-width:48rem){.demo__body{padding:22px}}

/* ---- Product components (override the site look inside .dv) ---- */
.dv .demo__row{display:flex; gap:10px 12px; flex-wrap:wrap; align-items:center}
.dv .demo__grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dv .demo__panel{border:1px solid var(--p-line); border-radius:var(--p-r); padding:16px; background:var(--p-surface); box-shadow:var(--p-shadow); min-width:0}
.dv .demo__panel h4{margin:0 0 10px; font-size:13px; font-weight:600; color:var(--p-fg)}
.dv .demo__label{font-size:12px; font-weight:500; color:var(--p-dim); display:grid; gap:5px}
.dv .demo__select, .dv .demo__input, .dv .demo__textarea{font:inherit; font-size:13.5px; padding:8px 11px; border:1px solid var(--p-line-2); background:var(--p-surface); color:var(--p-fg); border-radius:8px; min-height:38px; max-width:100%; box-shadow:0 1px 2px rgba(16,24,40,0.04)}
.dv .demo__select:focus, .dv .demo__input:focus, .dv .demo__textarea:focus{outline:2px solid color-mix(in srgb, var(--p-accent) 45%, transparent); outline-offset:1px; border-color:var(--p-accent)}
.dv .demo__textarea{min-height:110px; font-family:var(--p-font); line-height:1.5; width:100%; resize:vertical}
.dv .demo__btn{font:600 13.5px var(--p-font); cursor:pointer; border:1px solid transparent; background:var(--p-accent); color:var(--p-accent-fg); padding:8px 14px; min-height:38px; border-radius:8px; box-shadow:0 1px 2px rgba(16,24,40,0.1); transition:filter 120ms, transform 120ms}
.dv .demo__btn:hover{filter:brightness(1.07)} .dv .demo__btn:active{transform:translateY(1px)}
.dv .demo__btn--ghost{background:var(--p-surface); color:var(--p-fg); border-color:var(--p-line-2)}
.dv .demo__btn--ghost:hover{background:var(--p-bg); filter:none}
.dv .demo__btn--small{font-size:12.5px; padding:5px 10px; min-height:30px; border-radius:7px}
.dv .demo__btn[disabled]{opacity:0.45; cursor:not-allowed; filter:none; transform:none}
.dv .demo__scroll{overflow:auto; max-height:440px; border:1px solid var(--p-line); border-radius:var(--p-r); background:var(--p-surface)}
.dv .demo__table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.dv .demo__table th{text-align:left; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--p-mute); font-weight:600; background:var(--p-bg); border-bottom:1px solid var(--p-line); padding:9px 12px; white-space:nowrap}
.dv .demo__table td{padding:10px 12px; border-bottom:1px solid var(--p-line); vertical-align:middle}
.dv .demo__table tr:last-child td{border-bottom:0}
.dv .demo__table tr.is-bad td{background:#fff5f5} .dv .demo__table tr.is-ok td{background:#f3fbf5} .dv .demo__table tr.is-warn td{background:#fffbeb}
.dv .demo__table td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.dv .demo__meter{display:inline-block; width:100%; height:8px; background:var(--p-bg); border:0; border-radius:4px; vertical-align:middle; overflow:hidden}
.dv .demo__meter i{display:block; height:100%; background:var(--p-accent); border-radius:4px; transition:width 500ms cubic-bezier(.22,1,.36,1)}
.dv .demo__meter--amber i{background:var(--p-warn)} .dv .demo__meter--bad i{background:var(--p-bad)}
.dv .demo__pill{display:inline-flex; align-items:center; font:500 11.5px var(--p-font); letter-spacing:0; padding:2px 8px; border:0; border-radius:999px; background:var(--p-bg); color:var(--p-dim); white-space:nowrap; line-height:1.5}
.dv .demo__pill--ok{background:var(--p-good-soft); color:#166534} .dv .demo__pill--warn{background:var(--p-warn-soft); color:#92400e} .dv .demo__pill--bad{background:var(--p-bad-soft); color:#991b1b} .dv .demo__pill--dim{background:var(--p-bg); color:var(--p-mute)}
.dv .demo__big{font-family:var(--p-font); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.dv .demo__kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; color:var(--p-dim)}
.dv .demo__kv b{color:var(--p-fg); font-weight:600}
.dv .demo__log{font-family:var(--p-font); font-size:12.5px; line-height:1.5; background:var(--p-surface); color:var(--p-dim); border:1px solid var(--p-line); border-radius:var(--p-r); padding:6px 0; max-height:220px; overflow:auto; margin:0; white-space:normal}
.dv .demo__log > div{position:relative; padding:6px 14px 6px 32px; border-bottom:1px solid var(--p-line)}
.dv .demo__log > div:last-child{border-bottom:0}
.dv .demo__log > div::before{content:''; position:absolute; left:14px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--p-line-2)}
.dv .demo__log .ok{color:var(--p-fg)} .dv .demo__log .ok::before{background:var(--p-good)}
.dv .demo__log .warn{color:var(--p-fg)} .dv .demo__log .warn::before{background:var(--p-warn)}
.dv .demo__log .bad{color:#991b1b} .dv .demo__log .bad::before{background:var(--p-bad)}
.dv .demo__log .dim{color:var(--p-mute); opacity:1}
.dv .demo__toast{position:absolute; left:50%; bottom:16px; transform:translate(-50%, 10px); background:#111827; color:#fff; padding:10px 14px; font:500 13px var(--p-font); border-radius:10px; box-shadow:0 10px 30px -10px rgba(0,0,0,0.5); opacity:0; transition:opacity 200ms, transform 200ms; pointer-events:none; z-index:5; max-width:90%}
.dv .demo__toast.on{opacity:1; transform:translate(-50%, 0)}
.dv .demo__toast--ok{background:#166534} .dv .demo__toast--bad{background:#991b1b}
.dv .demo__chips{display:flex; gap:6px; flex-wrap:wrap}
.dv .demo__chip{font:500 12.5px var(--p-font); cursor:pointer; border:1px solid var(--p-line-2); background:var(--p-surface); color:var(--p-fg); padding:5px 12px; border-radius:999px; min-height:30px}
.dv .demo__chip:hover{background:var(--p-bg)}
.dv .demo__chip[aria-pressed="true"]{background:var(--p-fg); color:#fff; border-color:var(--p-fg)}
.dv .demo__svg{width:100%; height:auto; display:block; border:0; background:transparent}
.dv .demo__cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.dv .demo__cal button{font:500 12px var(--p-font); border:1px solid var(--p-line); background:var(--p-surface); border-radius:8px; padding:8px 4px; cursor:pointer; min-height:44px; color:var(--p-fg)}
.dv .demo__cal button:not(.taken){border-color:color-mix(in srgb, var(--p-good) 45%, #fff); background:var(--p-good-soft); color:#14532d}
.dv .demo__cal button:hover{border-color:var(--p-accent)}
.dv .demo__cal button.taken{background:var(--p-bg); color:var(--p-mute); text-decoration:line-through; cursor:not-allowed}
.dv .demo__cal button.pick{background:var(--p-accent); color:#fff; border-color:var(--p-accent)}
.dv .demo__cal button.risk{border-color:var(--p-bad); border-style:dashed}
.demo-section .demo__intro{max-inline-size:60ch; color:var(--fg-dim); margin-top:var(--s4)}
.demo__foot{margin:var(--s4) 0 0; font-size:var(--t--1); color:var(--fg-mute); max-inline-size:66ch}
.demo__foot b{color:var(--fg)}

/* Controls above the device and explanatory cards beneath it (on the stage, not in the product) */
.demo__controls{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:end; margin-bottom:14px; font-family:'Inter',system-ui,sans-serif}
.demo__controls label{display:grid; gap:4px; font-size:11px; font-weight:600; color:#4b5261; letter-spacing:0.04em; text-transform:uppercase}
.demo__controls select, .demo__controls input{font:500 13px 'Inter',system-ui,sans-serif; padding:7px 10px; border-radius:8px; border:1px solid rgba(15,23,42,0.15); background:#fff; color:#111827; min-height:36px; max-width:100%}
.demo__controls .demo__seg{display:inline-flex; background:rgba(255,255,255,0.7); border:1px solid rgba(15,23,42,0.12); border-radius:8px; padding:2px}
.demo__controls .demo__seg button{font:500 12.5px 'Inter',system-ui,sans-serif; border:0; background:none; padding:6px 12px; border-radius:6px; cursor:pointer; color:#374151; min-height:30px}
.demo__controls .demo__seg button[aria-pressed="true"]{background:#111827; color:#fff}
.section--ink .demo__controls label{color:#c7ccd6}
.demo__asides{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:16px}
.dv.demo__aside{box-shadow:none; background:rgba(255,255,255,0.78); border:1px solid rgba(15,23,42,0.08); border-radius:12px; padding:14px 16px; overflow:visible; font-size:13px; display:grid; gap:10px; align-content:start}
.dv.demo__aside h4{margin:0; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#6b7280; font-weight:600}
.dv.demo__aside .demo__log{max-height:260px}
.dv.demo__aside p{margin:0}
@media (max-width:48rem){.demo__asides{grid-template-columns:1fr}}

/* Static fallback before scripts run */
.demo:not(.demo--on) .demo__frame{border:1px solid var(--line); padding:var(--s4); background:var(--bone-2)}
.demo:not(.demo--on) .demo__bar{display:flex; gap:var(--s3); font-weight:700; margin-bottom:var(--s3)}
.demo:not(.demo--on) .demo__bar .demo__live{font-family:var(--mono); text-transform:uppercase; font-size:0.72rem}

/* Containment: nothing inside a demo may widen the page. */
.dv, .dv__main, .dv__page, .demo__body, .demo__body > *, .dv .demo__panel, .dv .demo__grid > *, .dv .demo__row > *, .dv .demo__label{min-width:0}
.dv .demo__log{overflow-wrap:anywhere}
.dv .demo__label > .demo__input, .dv .demo__label > .demo__select, .dv .demo__label > .demo__textarea{width:100%}
.dv code{overflow-wrap:anywhere}
@media (max-width:48rem){
  .dv .demo__grid{grid-template-columns:1fr !important}
  .dv .demo__cal{grid-template-columns:repeat(4,1fr)}
  .dv__phone{width:100%; max-width:320px}
}