/* Shared styles for the interactive demos. Colours come from the page tokens (--surface, --line, --accent, --ink,
   --muted, the method colours --teleop / --r2r2r / --ours), so light and dark mode follow the page toggle. */

.demo{position:relative; margin-top:26px; margin-bottom:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
      overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.02), 0 18px 50px -32px rgba(0,60,140,.35)}
.demo.wide{border-radius:14px}
.demo-stage{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; touch-action:pan-y;
            background:
              radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
              linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, var(--bg)), var(--surface))}
.demo-stage.tall{aspect-ratio:16/10}
.demo-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; cursor:grab}
.demo-canvas:active{cursor:grabbing}
.demo-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s}
.demo-poster.gone{opacity:0; pointer-events:none}

/* glass labels floating over a stage */
.demo-hud{position:absolute; z-index:3; display:flex; gap:6px; flex-wrap:wrap; pointer-events:none}
.demo-hud.tl{top:12px; left:12px} .demo-hud.tr{top:12px; right:12px; justify-content:flex-end}
.demo-hud.bl{bottom:12px; left:12px} .demo-hud.br{bottom:12px; right:12px; justify-content:flex-end}
.hud{font-size:12px; line-height:1.25; font-weight:500; padding:6px 10px; border-radius:30px; white-space:nowrap;
     color:var(--ink); background:color-mix(in srgb, var(--surface) 78%, transparent);
     border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
     -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4)}
.hud b{font-weight:600} .hud .mut{color:var(--muted); font-weight:400}
.hud.dot::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px;
                 background:var(--c, var(--accent)); vertical-align:1px}

/* control bar under the stage */
.demo-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px;
          border-top:1px solid var(--line)}
.demo-bar .sp{flex:1 1 auto}
.seg{display:inline-flex; padding:3px; border-radius:40px; background:color-mix(in srgb, var(--line) 55%, transparent); gap:2px}
.seg button{font:inherit; font-size:12.5px; font-weight:500; border:0; background:transparent; color:var(--muted);
            padding:6px 12px; border-radius:40px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button[aria-pressed="true"] i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:0}
.dbtn{font:inherit; font-size:13px; font-weight:600; border:0; color:#fff; background:var(--grad); padding:8px 16px;
      border-radius:40px; cursor:pointer; white-space:nowrap; box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
      transition:transform .15s, box-shadow .2s, filter .2s}
.dbtn:hover{transform:translateY(-1px); filter:saturate(1.15)}
.dbtn:active{transform:translateY(0)}
.dbtn:disabled{opacity:.5; cursor:default; transform:none}
.dbtn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; font-weight:500}
.dbtn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.dbtn svg{width:13px; height:13px; vertical-align:-2px; margin-right:6px; fill:currentColor}
.dlabel{font-size:12px; color:var(--muted)}
.drange{-webkit-appearance:none; appearance:none; height:4px; border-radius:4px; background:color-mix(in srgb, var(--line) 80%, transparent);
        outline:none; flex:1 1 140px; min-width:100px}
.drange::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent);
        border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer}
.drange::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); cursor:pointer}
.dselect{font:inherit; font-size:12.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line);
         border-radius:30px; padding:6px 28px 6px 12px; cursor:pointer; -webkit-appearance:none; appearance:none;
         background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat}

/* stat strip inside a demo */
.dstats{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); border-top:1px solid var(--line)}
.dstat{padding:12px 14px; border-left:1px solid var(--line)}
.dstat:first-child{border-left:0}
.dstat .v{font-size:20px; font-weight:500; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--ink);
          transition:color .3s}
.dstat .v small{font-size:13px; color:var(--muted); font-weight:400}
.dstat .l{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45}

/* loading overlay */
.demo-load{position:absolute; inset:0; z-index:5; display:grid; place-items:center; transition:opacity .45s;
           background:color-mix(in srgb, var(--surface) 55%, transparent)}
.demo-load.gone{opacity:0; pointer-events:none}
.demo-load-in{width:min(260px, 70%); text-align:center}
.demo-load-l{font-size:12.5px; color:var(--muted); margin-bottom:9px}
.demo-load-bar{height:3px; border-radius:3px; background:color-mix(in srgb, var(--line) 80%, transparent); overflow:hidden}
.demo-load-bar i{display:block; height:100%; width:4%; background:var(--grad); transition:width .25s}
.demo-load.err .demo-load-bar{display:none}

/* "start" gate for heavy demos (a big play button over a poster) */
.demo-gate{position:absolute; inset:0; z-index:4; display:grid; place-items:center; cursor:pointer;
           background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 35%, transparent))}
.demo-gate .go{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#fff; background:var(--grad);
               padding:12px 20px 12px 16px; border-radius:40px; box-shadow:0 12px 30px -10px color-mix(in srgb, var(--accent) 90%, transparent);
               transition:transform .2s}
.demo-gate:hover .go{transform:scale(1.04)}
.demo-gate .go svg{width:18px; height:18px; fill:#fff}
.demo-gate .sub{position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:12px; color:var(--muted)}

.demo-note{font-size:12px; color:var(--muted); padding:10px 14px; border-top:1px solid var(--line); line-height:1.55}
.demo-note b{color:var(--ink); font-weight:600}
.demo-badge{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
            color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:20px;
            padding:2px 8px; margin-right:6px; vertical-align:1px}

.demo-fallback{padding:18px; font-size:13px; color:var(--muted)}

@media (max-width:620px){
  .demo-stage{aspect-ratio:4/5}
  .demo-stage.keep{aspect-ratio:16/9}
  .demo-bar{padding:10px 12px; gap:8px 10px}
  .seg button{padding:6px 10px; font-size:12px}
  .hud{font-size:11px; padding:5px 8px}
  .demo-hud.tl,.demo-hud.tr{top:8px} .demo-hud.tl,.demo-hud.bl{left:8px} .demo-hud.tr,.demo-hud.br{right:8px}
  .demo-hud.bl,.demo-hud.br{bottom:8px}
  .dstat{padding:10px 10px} .dstat .v{font-size:17px}
}
/* touch screens: controls about 40 px tall, sliders with a taller grab area (the track itself stays 4 px) */
@media (pointer:coarse){
  .seg button, .dselect{padding-top:10px; padding-bottom:10px}
  .dbtn{padding-top:9px; padding-bottom:9px}
  .drange{height:28px; padding:12px 0; background-clip:content-box}
  .drange::-webkit-slider-thumb{width:20px; height:20px}
}
@media (prefers-reduced-motion: reduce){ .dbtn, .demo-gate .go, .seg button{transition:none} }

/* hero demo */
.hero-demo{margin-top:6px}
.hero-pip{position:absolute; z-index:3; top:12px; right:12px; width:min(212px, 30%); border-radius:10px; overflow:hidden;
          background:#000; border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
          box-shadow:0 10px 30px -12px rgba(0,0,0,.45); transition:box-shadow .35s, border-color .35s}
.hero-pip canvas{display:block; width:100%; height:auto; aspect-ratio:16/9}
.hero-pip-l{position:absolute; left:0; right:0; bottom:0; padding:14px 8px 5px; font-size:11px; line-height:1.2; color:#fff;
            display:flex; justify-content:space-between; gap:6px; white-space:nowrap;
            background:linear-gradient(180deg, transparent, rgba(0,0,0,.62)); font-variant-numeric:tabular-nums}
.hero-stage .demo-hud.tl{max-width:calc(100% - min(212px, 30%) - 40px)}
.hero-pip-l .mut{color:rgba(255,255,255,.75)}
.hero-pip.live{border-color:var(--ours); box-shadow:0 0 0 2px color-mix(in srgb, var(--ours) 55%, transparent), 0 10px 30px -12px rgba(0,0,0,.45)}
.hero-pip.live .hero-pip-l b::after{content:" \25CF"; color:var(--ours); font-size:9px; vertical-align:1px}
.dstat .v.bump{animation:dbump .45s ease-out}
@keyframes dbump{0%{transform:translateY(0)} 30%{transform:translateY(-3px)} 100%{transform:translateY(0)}}
@media (max-width:620px){
  .hero-pip{width:36%; top:8px; right:8px} .hero-pip-l{font-size:9.5px; padding:10px 5px 3px}
  .hero-stage .demo-hud.tl{max-width:calc(64% - 22px); flex-direction:column; align-items:flex-start}
  .hero-stage .demo-hud.tl .hud{white-space:normal}
  .hero-demo .dstat .l{font-size:11px}
}
@media (max-width:359px){ .hero-demo .demo-hud.bl .mut, .hero-pip-l .mut{display:none} }   /* 320 px phones: phase label clears "episode N", inset label not cut off */

/* "try your mug" demo */
.mm-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.mm-photo{position:relative; aspect-ratio:1/1; border-right:1px solid var(--line); overflow:hidden;
          background:repeating-conic-gradient(color-mix(in srgb, var(--line) 35%, transparent) 0 25%, transparent 0 50%) 0 0/18px 18px}
.mm-photo.drag{outline:2px dashed var(--accent); outline-offset:-8px}
.mm-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair}
.mm-hint{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; text-align:center; padding:20px}
.mm-drop{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); max-width:240px}
.mm-drop b{color:var(--ink); font-size:14px; font-weight:600}
.mm-tapme{font-size:13px; font-weight:600; color:#fff; background:var(--grad); padding:8px 14px; border-radius:30px;
          box-shadow:0 8px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent); animation:mmpulse 1.6s ease-in-out infinite}
@keyframes mmpulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
.mm-stage{aspect-ratio:auto; height:100%; min-height:100%}
.mm-samples{display:flex; gap:6px}
.mm-thumb{width:40px; height:40px; padding:0; border-radius:50%; overflow:hidden; border:2px solid transparent; cursor:pointer;
          background:var(--line); box-shadow:0 0 0 1px var(--line); transition:transform .15s, border-color .2s}
.mm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.mm-thumb:hover{transform:translateY(-1px)}
.mm-thumb.on{border-color:var(--ours); box-shadow:0 0 0 2px color-mix(in srgb, var(--ours) 35%, transparent)}
.mm-up{cursor:pointer}
.mm-status{min-width:0; text-align:right}
.mm-status .mut{color:var(--muted)}
@media (max-width:760px){
  .mm-grid{grid-template-columns:1fr}
  .mm-photo{border-right:0; border-bottom:1px solid var(--line); aspect-ratio:4/3}
  .mm-stage{aspect-ratio:1/1; height:auto}
  .mm-status{flex-basis:100%; text-align:left}
}