:root{
  --t-bg:#fbfaf8; --t-ink:#16181d; --t-muted:#575b63; --t-line:#e8e5df;
  --t-accent:#4f46e5; --t-accent-ink:#4338ca; --t-dark:#0b0e15;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;color:var(--t-ink);background:var(--t-bg)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}

.demo-banner{background:var(--t-dark);color:#d9dbe1;font-size:13px;padding:8px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.demo-home{color:#b7b3ff;font-weight:600;text-decoration:none;white-space:nowrap}
.demo-home:hover{text-decoration:underline}

.demo-intro{padding:10px 16px 0;font-size:14px;color:var(--t-muted)}
.demo-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:color-mix(in srgb,var(--t-bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--t-line)}
.demo-title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-toggle{display:flex;background:#ecebe7;border-radius:12px;padding:3px;margin-left:auto}
.demo-seg{border:0;background:none;min-height:38px;padding:0 16px;border-radius:9px;font-weight:600;font-size:14px;color:var(--t-muted);line-height:1.2}
.demo-seg.on{background:#fff;color:var(--t-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.demo-seg.pulse{animation:demo-pulse 1.2s ease 2}
@keyframes demo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}50%{box-shadow:0 0 0 6px rgba(79,70,229,.35);color:var(--t-accent-ink)}}
.demo-pill{font-size:12px;font-weight:600;padding:5px 10px;border-radius:20px;white-space:nowrap;background:#fef3c7;color:#92400e}
.demo-pill[data-mode="live"]{background:#dcfce7;color:#166534}
.demo-pill[data-mode="local"]{background:#e5e7eb;color:#374151}

.demo-stage{display:block}
.demo-qr{display:none}
.demo-side{min-width:0}

@media (min-width:1024px){
  .demo-toggle{margin-left:24px}
  .demo-pill{margin-left:auto}
  [data-active="big"] .demo-stage{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start}
  [data-active="big"] .demo-qr{display:flex;flex-direction:column;gap:10px;position:sticky;top:76px;margin:20px 20px 20px 0;
    padding:20px;background:#fff;border:1px solid var(--t-line);border-radius:16px}
  [data-active="phone"] .demo-side-phone{max-width:460px;margin:0 auto;border-left:1px solid var(--t-line);border-right:1px solid var(--t-line);min-height:calc(100vh - 100px)}
}
.demo-qr-code svg{width:100%;height:auto;display:block}
.demo-qr-text{font-size:14px;font-weight:600}
.demo-qr-code-text{font:600 22px/1 "JetBrains Mono",ui-monospace,Consolas,monospace;letter-spacing:.12em}
.demo-qr-tab{font-size:13px;color:var(--t-accent-ink);font-weight:600;text-decoration:none}
.demo-qr-tab:hover{text-decoration:underline}

.demo-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;
  background:var(--t-dark);color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .25s ease,transform .25s ease;max-width:calc(100vw - 32px)}
.demo-toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  .demo-seg.pulse{animation:none}
  .demo-toast{transition:none;transform:translate(-50%,0)}
}
@media (max-width:480px){
  .demo-title{display:none}
  .demo-toggle{margin-left:0}
  .demo-pill{margin-left:auto;font-size:11px}
  .demo-banner{font-size:12px}
}