/* =========================================================
   Demo Projects — showroom (/demo-projects/), demo bar and
   external-demo viewer. Built on tokens.css / components.css.
   ========================================================= */

/* ---------- Hero ---------- */
.demo-hero{ padding-bottom: var(--space-2xl); }
.demo-hero .breadcrumb{ position:relative; z-index:1; }

/* ---------- Browser frame + drawn previews ---------- */
.browser{
  --demo-theme: var(--color-primary);
  display:flex; flex-direction:column; width:100%; height:100%;
  background: var(--surface-2); border-radius: inherit; overflow:hidden;
}
.browser-bar{
  display:flex; align-items:center; gap:.75rem; flex:none;
  padding:.55rem .8rem; background: var(--surface-3); border-bottom:1px solid var(--border);
}
.browser-dots{ display:flex; gap:5px; }
.browser-dots i{ width:8px; height:8px; border-radius:50%; background: var(--border-strong); }
.browser-dots i:first-child{ background: var(--primary); }
.browser-url{
  flex:1; max-width: 60%; margin-inline:auto; text-align:center; font-size: 11px; color: var(--text-muted);
  background: var(--surface); border-radius: var(--radius-pill); padding:.2rem .8rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser-view{ position:relative; flex:1; overflow:hidden; container-type: inline-size; background:#fff; }
.browser-view img{ width:100%; height:100%; object-fit:cover; object-position: top; transition: transform var(--dur-slow) var(--ease-out); }

/* Miniature interfaces (.mk-*): sized in container units so they scale with the card. */
.mk{ position:absolute; inset:0; padding: 3cqw; display:flex; flex-direction:column; gap: 2.4cqw; background:#F7F6F3; }
.mk i{ display:block; }
.mk-top{ display:flex; align-items:center; gap: 2.2cqw; }
.mk-logo{ width: 7cqw; height: 2.4cqw; border-radius: 1cqw; background: var(--demo-theme); }
.mk-nav{ width: 7cqw; height: 1.3cqw; border-radius: 1cqw; background:#D9D6CF; }
.mk-pill{ margin-left:auto; width: 9cqw; height: 3.2cqw; border-radius: 3cqw; background: var(--demo-theme); opacity:.9; }
.mk-h{ height: 2.6cqw; width: 80%; border-radius: 1cqw; background:#1E1E22; margin-bottom: 1.2cqw; }
.mk-h + .mk-h{ width: 55%; }
.mk-line{ height: 1.3cqw; width: 90%; border-radius: 1cqw; background:#DAD7D0; margin-top: 1cqw; }
.mk-line.short{ width: 50%; }
.mk-btn{ display:inline-block; width: 13cqw; height: 3.8cqw; border-radius: 1.2cqw; background: var(--demo-theme); margin-top: 1.8cqw; margin-right: 1.2cqw; }
.mk-btn.ghost{ background: transparent; border: .3cqw solid rgba(255,255,255,.7); }
.mk-img{ border-radius: 1.4cqw; background: linear-gradient(135deg, #E9D8C4, #CDB597); }
.mk-img-2{ background: linear-gradient(135deg, #CFE0D6, #8FB3A2); }
.mk-img-3{ background: linear-gradient(135deg, #E6D3E0, #B795AE); }
.mk-img-4{ background: linear-gradient(135deg, #D6DDEB, #97A6C4); }

.mk-store .mk-hero{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items:center; padding: 3cqw; border-radius: 2cqw; background: #ECE7DF; }
.mk-store .mk-hero-art{ aspect-ratio: 4/3; border-radius: 1.6cqw; background: radial-gradient(circle at 60% 40%, #F4C69A 0 18%, transparent 19%), linear-gradient(160deg, var(--demo-theme), #1E3B33); }
.mk-products{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2cqw; }
.mk-product .mk-img{ aspect-ratio: 1; }

.mk-restaurant{ background:#FFF8F1; padding:0; }
.mk-restaurant .mk-hero{ padding: 3cqw; background: linear-gradient(120deg, rgba(20,12,8,.92), rgba(20,12,8,.55)), radial-gradient(circle at 75% 50%, #C2410C, #3B1405); min-height: 38%; }
.mk-restaurant .mk-nav{ background: rgba(255,255,255,.35); }
.mk-restaurant .mk-hero-copy{ margin-top: 4cqw; }
.mk-restaurant .mk-h{ background:#FFF3E6; }
.mk-tabs{ display:flex; gap: 1.6cqw; padding: 0 3cqw; }
.mk-tab{ width: 10cqw; height: 3cqw; border-radius: 3cqw; background:#F1E3D3; }
.mk-tab:first-child{ background: var(--demo-theme); }
.mk-menu{ display:grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 0 3cqw; }
.mk-dish{ display:grid; grid-template-columns: 9cqw 1fr auto; gap: 1.8cqw; align-items:center; background:#fff; border-radius: 1.6cqw; padding: 1.4cqw; }
.mk-dish .mk-img{ aspect-ratio:1; }
.mk-price{ width: 6cqw; height: 2cqw; border-radius: 1cqw; background: var(--demo-theme); opacity:.85; }

.mk-dashboard{ flex-direction:row; padding:0; gap:0; background:#F4F5FA; }
.mk-side{ width: 20%; background:#15172A; padding: 3cqw 2cqw; display:flex; flex-direction:column; gap: 2cqw; }
.mk-side .mk-nav{ width: 100%; background: rgba(255,255,255,.14); }
.mk-side .mk-nav:nth-child(2){ background: var(--demo-theme); }
.mk-main{ flex:1; padding: 2.6cqw; display:flex; flex-direction:column; gap: 2cqw; }
.mk-kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.6cqw; }
.mk-kpi{ background:#fff; border-radius: 1.4cqw; padding: 1.6cqw; }
.mk-kpi .mk-h{ width: 70%; margin: 1.2cqw 0 0; }
.mk-charts{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 1.6cqw; flex:1; min-height:0; }
.mk-chart{ background:#fff; border-radius: 1.4cqw; padding: 1.6cqw; overflow:hidden; }
.mk-chart svg{ width:100%; height:100%; }
.mk-area{ fill: var(--demo-theme); opacity:.15; }
.mk-stroke{ fill:none; stroke: var(--demo-theme); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.mk-bars{ display:flex; align-items:flex-end; gap: 1.4cqw; }
.mk-bars i{ flex:1; border-radius: .8cqw .8cqw 0 0; background: var(--demo-theme); opacity:.8; }
.mk-bars i:nth-child(even){ opacity:.4; }
.mk-table{ background:#fff; border-radius: 1.4cqw; padding: 1.2cqw 1.6cqw; }
.mk-row{ height: 1.5cqw; border-radius: 1cqw; background:#E6E8F0; margin: .9cqw 0; }

.mk-education{ background:#F2F8FA; }
.mk-banner{ padding: 3cqw; border-radius: 2cqw; background: linear-gradient(120deg, var(--demo-theme), #164E63); }
.mk-banner .mk-h{ background:#fff; }
.mk-search{ display:block; width: 60%; height: 4cqw; border-radius: 4cqw; background: rgba(255,255,255,.92); margin-top: 1.6cqw; }
.mk-courses{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2cqw; }
.mk-course{ background:#fff; border-radius: 1.6cqw; padding: 1.4cqw; }
.mk-course .mk-img{ aspect-ratio: 16/9; }
.mk-progress{ display:block; height: 1.1cqw; border-radius: 1cqw; background:#DDEBEF; margin-top: 1.6cqw; overflow:hidden; }
.mk-progress i{ height:100%; background: var(--demo-theme); }

.mk-generic .mk-hero-copy{ padding: 3cqw 0; }
.mk-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2cqw; flex:1; }
.mk-card{ border-radius: 1.6cqw; background: #E7E4DE; }

/* ---------- Featured demo ---------- */
.demo-featured{
  --demo-theme: var(--color-primary);
  display:grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items:center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--tint), var(--surface) 45%);
  box-shadow: var(--highlight), var(--shadow-md);
  position:relative; overflow:hidden;
}
.demo-featured::after{
  content:''; position:absolute; right:-120px; top:-120px; width: 320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, var(--tint-strong), transparent 70%); pointer-events:none;
}
.demo-featured-media{
  display:block; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow:hidden;
  border:1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.demo-featured-media:hover{ transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-glow); }
.demo-featured-body{ position:relative; z-index:1; padding-right: clamp(0rem, 2vw, 1.5rem); }
.demo-featured-body .project-cat{ display:block; }
.demo-featured-badge{
  display:inline-flex; align-items:center; gap:.45rem; font-size: var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--on-primary); background: var(--primary); padding:.35rem .8rem; border-radius: var(--radius-pill);
}
.demo-featured-badge svg{ width:14px; height:14px; }
.demo-featured-title{ font-size: var(--fs-h2); margin: .4rem 0 var(--space-sm); }
.demo-featured-actions{ display:flex; gap: var(--space-sm); flex-wrap:wrap; margin-top: var(--space-lg); }
.demo-feature-list{ display:flex; flex-direction:column; gap:.55rem; margin: var(--space-md) 0; }
.demo-feature-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size: var(--fs-small); color: var(--text-secondary); }
.demo-feature-list svg{ width:18px; height:18px; flex:none; color: var(--text-accent); margin-top:.1em; }
@media (max-width: 900px){
  .demo-featured{ grid-template-columns: 1fr; }
  .demo-featured-body{ padding: 0 var(--space-xs) var(--space-xs); }
}

/* ---------- How demos work ---------- */
.demo-howto{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.demo-howto-item{ display:flex; gap: var(--space-sm); align-items:flex-start; padding: var(--space-lg); background: var(--surface); }
.demo-howto-item > svg{ width:26px; height:26px; flex:none; color: var(--text-accent); }
.demo-howto-item strong{ display:block; font-family: var(--font-display); font-weight:600; margin-bottom:.2rem; }
.demo-howto-item span{ font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 800px){ .demo-howto{ grid-template-columns: 1fr; } }

/* ---------- Grid head + filters ---------- */
.demo-grid-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-md); flex-wrap:wrap; margin-bottom: var(--space-lg); }
.demo-grid-head h2{ margin-bottom:0; }
.demo-result-count{ font-size: var(--fs-small); color: var(--text-muted); margin:0; }
.demo-filter{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom: var(--space-xl);
  position: sticky; top: 80px; z-index: 5; padding-block: .6rem;
  background: linear-gradient(var(--bg) 75%, transparent);
}
.filter-chip{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family: var(--font-display); font-weight:600; font-size: var(--fs-small); color: var(--text-secondary);
  padding:.55rem 1rem; border-radius: var(--radius-pill); border:1px solid var(--border-strong); background: var(--surface);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.filter-chip:hover{ color: var(--text-heading); border-color: var(--border-accent); background: var(--tint-subtle); }
.filter-chip:active{ transform: scale(.97); }
.filter-chip[aria-pressed="true"]{ background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-cta); }
.filter-chip[data-empty="true"]:not([aria-pressed="true"]){ opacity:.55; }
.filter-count{ font-size: var(--fs-micro); font-weight:700; min-width: 1.5em; padding: .05rem .4rem; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); text-align:center; }
.filter-chip[aria-pressed="true"] .filter-count{ background: rgba(11,11,13,.2); color: var(--on-primary); }
@media (max-width: 640px){
  .demo-filter{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); }
  .demo-filter::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex:none; }
}

/* ---------- Demo card ---------- */
.demo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 1080px){ .demo-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .demo-grid{ grid-template-columns: 1fr; } }
.demo-card{
  display:flex; flex-direction:column; border:1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow:hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.demo-card:hover{ transform: translateY(-6px); border-color: var(--border-accent); box-shadow: var(--highlight), var(--shadow-lg); }
.demo-card[hidden]{ display:none; }
.demo-card-media{ position:relative; display:block; aspect-ratio: 16/10; padding: var(--space-sm) var(--space-sm) 0; background: linear-gradient(160deg, var(--surface-3), var(--surface)); }
.demo-card-media .browser{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: var(--shadow-md); }
.demo-card:hover .browser-view img{ transform: scale(1.04); }
.demo-card-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: var(--scrim); opacity:0; transition: opacity var(--dur-base) var(--ease-out);
}
.demo-card-media:hover .demo-card-overlay, .demo-card-media:focus-visible .demo-card-overlay{ opacity:1; }
.demo-card-cta{
  display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-weight:600; font-size: var(--fs-small);
  transform: translateY(10px); transition: transform var(--dur-base) var(--ease-out);
}
.demo-card-media:hover .demo-card-cta{ transform:none; }
.demo-status{
  position:absolute; top: calc(var(--space-sm) + 2.4rem); right: calc(var(--space-sm) + .6rem);
  font-size: var(--fs-micro); font-weight:700; padding:.3rem .7rem; border-radius: var(--radius-pill);
  background: var(--surface); border:1px solid var(--border-strong); color: var(--text-secondary);
}
.demo-card.is-soon .browser{ filter: grayscale(.6) brightness(.8); }
.demo-card-body{ display:flex; flex-direction:column; flex:1; padding: var(--space-md) var(--space-lg) var(--space-lg); }
.demo-card-title{ font-family: var(--font-display); font-size: 1.3rem; font-weight:600; margin: .35rem 0 .4rem; }
.demo-card-title a:hover{ color: var(--text-accent); }
.demo-card-desc{ font-size: var(--fs-small); margin-bottom: .6rem; }
.demo-card-meta{ font-size: var(--fs-micro); color: var(--text-muted); letter-spacing:.02em; margin-bottom: var(--space-md); }
.demo-card-actions{ display:flex; gap: .6rem; flex-wrap:wrap; margin-top:auto; }
.demo-card-actions > *{ flex: 1 1 auto; }

/* filter animation states (scripts/showroom.js) */
.demo-card.is-leaving{ opacity:0; transform: scale(.94); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); pointer-events:none; }

.demo-empty{ text-align:center; padding: var(--space-2xl) var(--space-md); border:1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.demo-empty > svg{ width:36px; height:36px; margin: 0 auto var(--space-sm); color: var(--text-accent); }
.demo-empty[hidden]{ display:none; }

/* ---------- Details dialog ---------- */
.demo-dialog{
  width: min(980px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding:0; border:1px solid var(--border-strong);
  border-radius: var(--radius-lg); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-lg);
}
.demo-dialog::backdrop{ background: rgba(5,5,7,.72); backdrop-filter: blur(6px); }
.demo-dialog[open]{ animation: dialog-in var(--dur-base) var(--ease-out); }
@keyframes dialog-in{ from{ opacity:0; transform: translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }
.demo-dialog-inner{ position:relative; display:grid; grid-template-columns: 1.1fr 1fr; }
.demo-dialog-media{ padding: var(--space-lg); background: linear-gradient(160deg, var(--surface-3), var(--surface)); display:flex; align-items:center; }
.demo-dialog-media .browser{ aspect-ratio: 16/10; height:auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.demo-dialog-body{ padding: var(--space-xl) var(--space-lg) var(--space-lg); overflow:auto; }
.demo-dialog-title{ font-size: var(--fs-h3); margin: .4rem 0 var(--space-sm); }
.demo-dialog-h{ font-size: var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color: var(--text-muted); margin: var(--space-md) 0 .6rem; }
.demo-dialog-actions{ display:flex; gap: var(--space-sm); flex-wrap:wrap; margin-top: var(--space-lg); }
.demo-dialog-close{
  position:absolute; top: .75rem; right:.75rem; z-index:2; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary);
}
.demo-dialog-close:hover{ border-color: var(--primary); color: var(--text-accent); }
.demo-dialog-close svg{ width:18px; height:18px; }
@media (max-width: 760px){
  .demo-dialog-inner{ grid-template-columns: 1fr; }
  .demo-dialog-media{ padding: var(--space-md) var(--space-md) 0; }
  .demo-dialog-body{ padding: var(--space-md); }
}

/* ---------- Demo page: the bar above every demo ---------- */
.demo-page{ min-height: 100dvh; display:flex; flex-direction:column; }
.demo-bar{
  position: sticky; top:0; z-index: var(--z-nav);
  background: rgba(11,11,13,.94); backdrop-filter: blur(12px);
  box-shadow: inset 0 -2px 0 var(--primary); /* the bar is exactly 56px: demos pin their own headers below it */
}
.demo-bar-inner{ display:flex; align-items:center; gap: var(--space-md); padding: 0 clamp(.75rem, 2vw, 1.25rem); height: 56px; }
.demo-bar-back{ display:flex; align-items:center; gap:.5rem; color: var(--text-secondary); font-size: var(--fs-small); font-weight:600; flex:none; }
.demo-bar-back > svg{ width:18px; height:18px; transition: transform var(--dur-base) var(--ease-out); }
.demo-bar-back:hover{ color: var(--text-primary); }
.demo-bar-back:hover > svg{ transform: translateX(-3px); }
.demo-bar-back .brand-mark{ width:26px; height:26px; }
.demo-bar-title{ display:flex; align-items:center; gap: .75rem; min-width:0; flex:1; }
.demo-bar-title strong{ font-family: var(--font-display); font-size: var(--fs-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-mode-pill{
  display:inline-flex; align-items:center; gap:.4rem; flex:none; font-size: 11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--orange-200); border:1px solid var(--border-accent); background: var(--tint); padding:.2rem .6rem; border-radius: var(--radius-pill);
}
.demo-mode-pill i{ width:7px; height:7px; border-radius:50%; background: var(--primary); animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{ 50%{ opacity:.35; } }
.demo-bar-actions{ display:flex; gap:.5rem; flex:none; }
.demo-bar .btn-sm{ padding: .5rem .9rem; }
.demo-bar .btn-primary{ box-shadow: none; } /* no glow: the bar should stay quieter than the demo below it */
@media (max-width: 720px){
  .demo-bar-back-label, .demo-bar-details, .demo-bar-hide-sm, .demo-bar-title strong{ display:none; }
}

.dx-boot{ display:flex; align-items:center; justify-content:center; gap:.75rem; min-height: 60vh; color: var(--text-muted); font-size: var(--fs-small); }
.dx-boot a{ color: var(--text-accent); margin-left:.3rem; }
.dx-spinner{ width:22px; height:22px; border-radius:50%; border: 2.5px solid var(--border-strong); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- External demo viewer ---------- */
.demo-viewer{ flex:1; display:flex; flex-direction:column; background: var(--bg); }
.viewer-toolbar{ display:flex; align-items:center; gap: var(--space-sm); padding: .6rem clamp(.75rem, 2vw, 1.25rem); border-bottom:1px solid var(--border); background: var(--surface); flex-wrap:wrap; }
.viewer-devices{ display:flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-3); }
.viewer-devices[hidden]{ display:none; }
.viewer-devices button{ width:36px; height:32px; display:grid; place-items:center; border:0; border-radius: 6px; background:transparent; color: var(--text-muted); cursor:pointer; }
.viewer-devices button svg{ width:18px; height:18px; }
.viewer-devices button[aria-pressed="true"]{ background: var(--surface); color: var(--text-accent); box-shadow: var(--shadow-sm); }
.viewer-url{ flex:1; min-width: 0; font-size: var(--fs-micro); color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-pill); padding:.4rem .9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viewer-actions{ display:flex; gap:.5rem; }
.viewer-stage{ flex:1; display:flex; justify-content:center; padding: clamp(.5rem, 2vw, 1.5rem); background: radial-gradient(70% 60% at 50% 0%, var(--tint-subtle), transparent 70%); }
.viewer-frame{
  position:relative; width:100%; max-width: 100%; min-height: 70vh; flex: none;
  border:1px solid var(--border-strong); border-radius: var(--radius-md); overflow:hidden; background:#fff;
  transition: max-width var(--dur-slow) var(--ease-in-out);
}
.viewer-frame[data-viewer-device="tablet"]{ max-width: 820px; }
.viewer-frame[data-viewer-device="mobile"]{ max-width: 390px; }
.viewer-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition: opacity var(--dur-base); }
.viewer-frame.is-loaded iframe{ opacity:1; }
.viewer-status{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-sm);
  text-align:center; padding: var(--space-lg); background: var(--surface); color: var(--text-muted); font-size: var(--fs-small);
}
.viewer-status[hidden]{ display:none; }
.viewer-failed > svg{ width:36px; height:36px; color: var(--text-accent); }
.viewer-failed h2, .viewer-launch h2{ font-size: var(--fs-h4); color: var(--text-primary); margin:0; }
.viewer-launch{ position:relative; min-height: 70vh; }
.viewer-launch-media{ width: min(560px, 100%); aspect-ratio: 16/10; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border-strong); margin-bottom: var(--space-md); }
.viewer-hint{ text-align:center; font-size: var(--fs-micro); color: var(--text-muted); margin: 0 0 var(--space-sm); padding-inline: var(--space-sm); }
.viewer-hint a{ color: var(--text-accent); }
.viewer-frame:has(.viewer-launch){ background: var(--surface); }