/* "See it work" — shared by the demo builds. Theme with these on the section:
   --sim-ink (text) --sim-muted --sim-card (panels) --sim-line --sim-accent --sim-on (text on accent)
   --sim-bezel --sim-screen (device screen bg) --sim-in (incoming bubble) --sim-intext */
.sim{--sim-bezel:#0d0f12;--sim-screen:#fff;--sim-in:#e9e9ee;--sim-intext:#111;outline:none}
.sim button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.sim-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sim-tabs button{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--sim-line);font-weight:800;font-size:14.5px;color:var(--sim-muted);transition:all .2s}
.sim-tabs button[aria-selected=true]{background:var(--sim-accent);border-color:var(--sim-accent);color:var(--sim-on)}
.sim-body{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.sim-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:s}
.sim-steps li{counter-increment:s}
.sim-steps button{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;width:100%;text-align:left;padding:11px 12px;border-radius:14px;border:1px solid transparent;transition:background .25s,border-color .25s,opacity .25s;opacity:.55}
.sim-steps button::before{content:counter(s);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;border:1.5px solid var(--sim-line);color:var(--sim-muted)}
.sim-steps b{font-size:15px;line-height:1.3;color:var(--sim-ink)}
.sim-steps span{font-size:13.5px;line-height:1.4;color:var(--sim-muted)}
.sim-steps .done button{opacity:.8}
.sim-steps .done button::before{content:"✓";background:var(--sim-line);border-color:transparent}
.sim-steps .on button{opacity:1;background:var(--sim-card);border-color:var(--sim-line)}
.sim-steps .on button::before{background:var(--sim-accent);border-color:var(--sim-accent);color:var(--sim-on)}
.sim-stage{min-width:0}
.sim-switch{display:none}
.sim-devs{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,40px);min-height:600px}
.dev{margin:0;display:grid;justify-items:center;gap:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.dev figcaption{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sim-muted);transition:color .3s}
.dev.focus figcaption{color:var(--sim-accent)}
.dev:not(.focus){opacity:.78;transform:scale(.97)}
.frame{background:var(--sim-bezel);padding:10px;border-radius:44px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.08);transition:box-shadow .4s}
.dev.focus .frame{box-shadow:0 40px 80px -36px rgba(0,0,0,.65),0 0 0 3px var(--sim-accent),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.scr{width:272px;height:560px;border-radius:34px;overflow:hidden;background:var(--sim-screen);color:#111;display:flex;flex-direction:column;font-size:14px;line-height:1.38;position:relative}
.dev.tablet .frame{border-radius:28px;padding:14px}
.dev.tablet .scr{width:min(470px,44vw);height:auto;aspect-ratio:4/3;border-radius:14px}
.sb{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 4px;font-size:13px;flex:none}
.sb .sig{display:flex;gap:2px;align-items:flex-end}
.sb .sig i{width:3px;background:#111;border-radius:1px}
.sb .sig i:nth-child(1){height:4px}.sb .sig i:nth-child(2){height:6px}.sb .sig i:nth-child(3){height:8px}.sb .sig i:nth-child(4){height:10px}
.sh{display:grid;justify-items:center;gap:2px;padding:6px 12px 10px;border-bottom:1px solid #e6e6ea;flex:none}
.sh .av{width:40px;height:40px;border-radius:50%;background:var(--sim-accent);color:var(--sim-on);display:grid;place-items:center;font-weight:800;font-size:17px}
.sh b{font-size:13px;font-weight:600}
.sh small{display:none}
.th{flex:1;overflow-y:auto;padding:12px 12px 16px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;scroll-behavior:smooth}
.th::-webkit-scrollbar{display:none}
.m{max-width:82%;padding:8px 12px;border-radius:18px;font-size:14px;line-height:1.36;overflow-wrap:anywhere}
.m.in{align-self:flex-start;background:var(--sim-in);color:var(--sim-intext);border-bottom-left-radius:6px}
.m.out{align-self:flex-end;background:#1f7cf5;color:#fff;border-bottom-right-radius:6px}
.m.sys{align-self:center;max-width:94%;background:none;color:#6b6b75;font-size:11.5px;font-weight:600;text-align:center;padding:4px}
.m a,.m .lnk{display:block;margin-top:6px;padding:8px 10px;border-radius:12px;background:#fff;color:#1f7cf5;font-weight:700;font-size:13px}
.m .q{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.06);font-weight:700;font-size:13px}
.m.new{animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.wv{flex:1;display:flex;flex-direction:column;min-height:0}
.url{margin:4px 12px 8px;padding:7px 12px;border-radius:10px;background:#efeff3;font-size:12px;text-align:center;color:#555;flex:none}
.wb{flex:1;overflow-y:auto;scrollbar-width:none;position:relative}
.wb::-webkit-scrollbar{display:none}
.sim-ctl{display:grid;grid-template-columns:48px 1fr 48px auto;gap:10px;align-items:center;margin-top:22px;max-width:640px;margin-inline:auto}
.sim-ctl .back,.sim-ctl .next{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--sim-line);font-size:20px;display:grid;place-items:center;color:var(--sim-ink)}
.sim-ctl .next{background:var(--sim-accent);border-color:var(--sim-accent);color:var(--sim-on)}
.sim-ctl button:disabled{opacity:.3;cursor:default}
.sim-ctl .play{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sim-line);font-weight:800;font-size:13px;color:var(--sim-muted)}
.cap{text-align:center;min-height:48px;display:grid;align-content:center}
.cap b{font-size:15px;color:var(--sim-ink)}
.cap span{font-size:13.5px;color:var(--sim-muted);line-height:1.4}
.sim-note{margin:16px auto 0;text-align:center;font-size:12.5px;color:var(--sim-muted);max-width:none}
@media(max-width:900px){
  .sim-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--pad,16px));padding-inline:var(--pad,16px);scrollbar-width:none}
  .sim-tabs::-webkit-scrollbar{display:none}
  .sim-tabs button{flex:none}
  .sim-body{grid-template-columns:1fr}
  .sim-steps{display:none}
  .sim-switch{display:flex;background:var(--sim-card);border:1px solid var(--sim-line);border-radius:999px;padding:4px;margin:0 auto 16px;max-width:360px}
  .sim-switch button{flex:1;min-height:40px;border-radius:999px;font-weight:800;font-size:13.5px;color:var(--sim-muted)}
  .sim-switch button[aria-pressed=true]{background:var(--sim-accent);color:var(--sim-on)}
  .sim-devs{min-height:0;display:block}
  .dev{transform:none!important;opacity:1!important}
  .dev figcaption{display:none}
  .sim[data-mob=cust] .dev.owner,.sim[data-mob=owner] .dev.cust{display:none}
  .scr{width:min(272px,74vw);height:min(540px,64svh)}
  .dev.tablet .scr{width:min(100%,560px);height:auto;aspect-ratio:1/1}
  .dev.tablet .frame{width:100%;max-width:420px;margin:0 auto}
  .sim-ctl{grid-template-columns:48px 1fr 48px;margin-top:16px}
  .sim-ctl .play{grid-column:1/-1;justify-self:center}
}
@media(prefers-reduced-motion:reduce){.m.new{animation:none}.dev{transition:none}}