/* Demo 專用視覺層：三個互動頁共用，功能與事件邏輯仍留在各自 HTML。 */
.demo-page{
  --demo-orange:#9f371f;
  --demo-shadow:0 18px 48px rgba(18,32,51,.09);
  min-height:100vh;
  font-size:15px;
  line-height:1.65;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--card) 18%,transparent),transparent 420px);
  -webkit-font-smoothing:antialiased;
}

[data-theme="light"] .demo-page{
  --mm-bg:#f5f3ed;--mm-surface:#fffefa;--mm-ink:#122033;--mm-muted:#5b6675;
  --mm-border:#d8d3ca;--mm-hair:#e8e3da;--mm-border-strong:#9b978f;
  --mm-accent:#0d4fd7;--mm-accent-strong:#0d4fd7;--mm-accent-soft:#e4ecff;--mm-on-accent:#fff;
  --mm-ok:#147451;--mm-danger:#a63d2b;--mm-code-bg:#091321;--mm-code-ink:#e8eef7;--mm-code-dim:#8fa3bb;
  --mm-shadow-card:0 12px 34px rgba(18,32,51,.065);
  --bg:var(--mm-bg);--card:var(--mm-surface);--ink:var(--mm-ink);--muted:var(--mm-muted);
  --line:var(--mm-border);--hair:var(--mm-hair);--amber:var(--mm-accent);--amber-strong:var(--mm-accent-strong);
  --amber-soft:var(--mm-accent-soft);--on-accent:var(--mm-on-accent);--green:var(--mm-ok);--red:var(--mm-danger);
  --code-bg:var(--mm-code-bg);--code-ink:var(--mm-code-ink);--code-dim:var(--mm-code-dim);--shadow:var(--mm-shadow-card);
}

[data-theme="dark"] .demo-page{
  --mm-bg:#091321;--mm-surface:#111e30;--mm-ink:#e8eef7;--mm-muted:#9dafc4;
  --mm-border:#2a3b52;--mm-hair:#1b2a3d;--mm-border-strong:#607794;
  --mm-accent:#8bbcff;--mm-accent-strong:#3f8df2;--mm-accent-soft:#132b4b;--mm-on-accent:#04121f;
  --mm-ok:#59d097;--mm-danger:#ef846e;--mm-code-bg:#07101c;--mm-code-ink:#e8eef7;--mm-code-dim:#8fa3bb;
  --mm-shadow-card:0 16px 38px rgba(0,0,0,.2);
  --bg:var(--mm-bg);--card:var(--mm-surface);--ink:var(--mm-ink);--muted:var(--mm-muted);
  --line:var(--mm-border);--hair:var(--mm-hair);--amber:var(--mm-accent);--amber-strong:var(--mm-accent-strong);
  --amber-soft:var(--mm-accent-soft);--on-accent:var(--mm-on-accent);--green:var(--mm-ok);--red:var(--mm-danger);
  --code-bg:var(--mm-code-bg);--code-ink:var(--mm-code-ink);--code-dim:var(--mm-code-dim);--shadow:var(--mm-shadow-card);
}

.demo-page header.nav{
  min-height:72px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(18px);
  border-bottom-color:color-mix(in srgb,var(--line) 82%,transparent);
}
.demo-page .nav-in{min-height:72px;padding-block:12px}
.demo-page header.nav .brand{font-weight:820;letter-spacing:-.025em}
.demo-page header.nav .brand i{
  width:31px;height:31px;border-radius:8px;background:var(--ink);color:var(--card);
  box-shadow:3px 3px 0 var(--demo-orange);font-size:13px;
}
.demo-page .nav-links a{position:relative}
.demo-page .nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--amber);
  transition:right .18s;
}
.demo-page .nav-links a:hover::after,
.demo-page .nav-links a[aria-current="page"]::after{right:0}
.demo-page .btn{border-radius:9px;transition:transform .16s,box-shadow .16s,background .16s}
.demo-page .btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(13,79,215,.18);filter:none}

.demo-page > .wrap{max-width:1160px;padding-top:34px;padding-bottom:88px}
.demo-page .demo-nav{
  display:flex;gap:8px;margin:0 0 42px;flex-wrap:wrap;
}
.demo-page .demo-nav a{
  min-height:38px;display:inline-flex;align-items:center;padding:7px 13px;
  border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 76%,transparent);
  color:var(--muted);font-family:var(--mono);font-size:10px;font-weight:750;letter-spacing:.08em;
  text-decoration:none;
}
.demo-page .demo-nav a:hover{color:var(--ink);border-color:var(--ink);background:var(--card)}
.demo-page .demo-nav a.on{color:var(--on-accent);border-color:var(--amber-strong);background:var(--amber-strong)}

.demo-page .demo-hero{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:clamp(42px,7vw,92px);
  align-items:end;margin:0 0 38px;padding:0 0 38px;border-bottom:1px solid var(--line);
}
.demo-page .demo-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:0;
  border:0;border-radius:0;color:var(--amber);background:transparent;
  font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.demo-page .demo-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent)}
.demo-page .demo-hero h1{font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.06em;max-width:12ch}
.demo-page .demo-hero h1 .accent{color:var(--amber)}
.demo-page .demo-intro{padding-bottom:3px}
.demo-page .demo-intro .sub{margin:0 0 20px;max-width:48ch;font-size:16px;line-height:1.75}
.demo-page .demo-facts{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.demo-page .demo-facts li{
  display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 0;border:0;border-radius:0;
  background:transparent;color:var(--muted);font-family:var(--mono);font-size:10px;
}
.demo-page .demo-facts li::before{content:"✓";color:var(--green);font-weight:900}

.demo-page .manual-setup{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 72%,transparent);overflow:hidden}
.demo-page .manual-setup summary{cursor:pointer;list-style:none;padding:12px 16px;color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em}
.demo-page .manual-setup summary::-webkit-details-marker{display:none}
.demo-page .manual-setup summary::before{content:"＋";display:inline-block;width:18px;color:var(--amber);font-size:14px}
.demo-page .manual-setup[open] summary::before{content:"−"}
.demo-page .manual-setup .cfg{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}

.demo-page h1{font-size:clamp(38px,4.3vw,54px);line-height:1.08;letter-spacing:-.045em;margin:0}
.demo-page h1 .tag{
  display:inline-flex;vertical-align:.22em;margin-left:8px;padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--amber) 28%,var(--line));border-radius:999px;
  background:var(--amber-soft);font-size:10px;font-weight:800;letter-spacing:.06em;
}
.demo-page p.sub{max-width:84ch;margin:14px 0 30px;color:var(--muted);font-size:15px;line-height:1.8}
.demo-page p.sub b{color:var(--ink)}

.demo-page .card{
  border-color:var(--line);border-radius:12px;background:var(--card);
  padding:22px;box-shadow:var(--shadow);
}
.demo-page .cfg{gap:12px;margin-bottom:16px;padding:18px 20px}
.demo-page input,.demo-page textarea,.demo-page select{
  min-height:42px;border-color:var(--line);border-radius:9px;
  background:color-mix(in srgb,var(--card) 72%,var(--bg));
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.demo-page input:focus,.demo-page textarea:focus,.demo-page select:focus{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 14%,transparent);background:var(--card);
}
.demo-page button,.demo-page a.primary{min-height:42px;border-radius:9px}
.demo-page button.primary,.demo-page a.primary{box-shadow:0 7px 18px rgba(13,79,215,.16)}
.demo-page button.primary:hover,.demo-page a.primary:hover{
  background:color-mix(in srgb,var(--amber-strong) 86%,#000);transform:translateY(-1px)
}
.demo-page .status{
  min-height:28px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card)
}
.demo-page .blocks,.demo-page .grid{gap:18px}
.demo-page .blocks{align-items:stretch}
.demo-page .blocks > .card{display:flex;flex-direction:column;height:100%}
.demo-page .blocks > .card:nth-child(2) .wall{flex:none}
.demo-page .last-event{
  margin-top:14px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:color-mix(in srgb,var(--bg) 72%,var(--card));
}
.demo-page .last-event .small{margin-bottom:5px}
.demo-page .last-event-value{
  min-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-family:var(--mono);font-size:11.5px;
}
.demo-page .blocks > .card:nth-child(3) .hint{margin-top:12px}
.demo-page .blk-h{padding-bottom:13px;border-bottom:1px solid var(--line)}
.demo-page .blk-h h2{font-size:17px;letter-spacing:-.015em}
.demo-page .blk-h .num{border-radius:7px}
.demo-page .wall{border:1px solid #243852;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.demo-page .wall .empty{color:var(--code-dim)}
.demo-page .chat{border-radius:16px}
.demo-page .roombar{padding:16px 18px}
.demo-page .kind{min-height:48px;border-radius:10px;background:color-mix(in srgb,var(--card) 70%,var(--bg))}

.demo-page footer.ft{background:#091321;border-top-color:#21344e;color:#91a3b8;padding:30px 0 38px}
.demo-page footer.ft .brand{color:#e8eef7}
.demo-page footer.ft .brand i{background:#e8eef7;color:#091321;box-shadow:3px 3px 0 var(--demo-orange)}
.demo-page footer.ft .ft-in a,.demo-page footer.ft .ft-note{color:#91a3b8}
.demo-page footer.ft .ft-in a:hover,.demo-page footer.ft .ft-note a{color:#9fc6ff}

@media(max-width:860px){
  .demo-page header.nav{min-height:64px}.demo-page .nav-in{min-height:64px}
  .demo-page .nav-links a::after{display:none}
  .demo-page > .wrap{padding-top:32px}
  .demo-page .demo-hero{grid-template-columns:1fr;gap:20px;margin-bottom:28px;padding-bottom:30px}
  .demo-page .demo-hero h1{max-width:14ch}
  .demo-page .blocks > .card{height:auto}
}
@media(max-width:640px){
  .demo-page header.nav .brand i{width:26px;height:26px}
  .demo-page .wall{height:300px}
  .demo-page > .wrap{padding:27px 16px 68px}
  .demo-page .demo-nav{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:30px;gap:6px}
  .demo-page .demo-nav a{justify-content:center;padding-inline:6px;text-align:center}
  .demo-page h1{font-size:36px}
  .demo-page .demo-hero h1{font-size:45px}
  .demo-page h1 .tag{display:flex;width:max-content;margin:10px 0 0}
  .demo-page p.sub{font-size:14px;margin-bottom:24px}
  .demo-page .card{padding:16px}.demo-page .cfg{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .demo-page .nav-links a::after,.demo-page .btn,.demo-page input,.demo-page textarea,.demo-page select{transition:none}
}