:root {
  --ink:#161616;
  --paper:#f5f3ef;
  --red:#b54536;
  --red-dark:#8f352b;
  --line:#d8d3ca;
  --bar-h:58px;
  --guide-h:38px;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  overflow:hidden;
  background:#111;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button { font:inherit; }
.demo-bar {
  height:var(--bar-h);
  display:grid;
  grid-template-columns:minmax(340px,1fr) auto minmax(300px,1fr);
  align-items:center;
  gap:20px;
  padding:0 18px;
  background:#171717;
  color:#fff;
  border-bottom:1px solid #303030;
  position:relative;
  z-index:20;
}
.demo-brand { display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; }
.demo-mark {
  display:grid; place-items:center;
  width:38px; height:30px;
  background:var(--red);
  color:white;
  font-weight:900;
  letter-spacing:-.04em;
  border-radius:3px;
}
.demo-name { font-size:13px; font-weight:800; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; }
.demo-name b { font-weight:500; color:#bfbfbf; }
.demo-live {
  margin-left:4px;
  padding:4px 7px 3px;
  border:1px solid #595959;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:#d8d8d8;
}
.demo-state { font-size:10px; font-weight:750; letter-spacing:.08em; color:#bdbdbd; white-space:nowrap; }
.demo-state-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#66c47c; box-shadow:0 0 0 3px rgba(102,196,124,.12); }
.demo-actions { display:flex; justify-content:flex-end; gap:8px; }
.demo-button {
  border:0;
  border-radius:4px;
  padding:9px 12px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.demo-button:hover { transform:translateY(-1px); }
.demo-button-quiet { color:#e9e9e9; background:#292929; border:1px solid #3d3d3d; }
.demo-button-quiet:hover { background:#333; }
.demo-button-exit { color:#fff; background:var(--red); }
.demo-button-exit:hover { background:var(--red-dark); }
.demo-guide {
  height:var(--guide-h);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:0 18px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  color:#5d5a55;
  font-size:11px;
  white-space:nowrap;
  position:relative;
  z-index:19;
}
.demo-guide strong { color:var(--red); font-size:10px; letter-spacing:.1em; }
.demo-guide span b {
  display:inline-grid; place-items:center;
  width:18px; height:18px; margin-right:5px;
  border-radius:50%;
  background:#ded9d0;
  color:#5a554f;
  font-size:10px;
}
.demo-stage { position:relative; height:calc(100vh - var(--bar-h) - var(--guide-h)); background:white; }
#wp-playground { width:100%; height:100%; border:0; display:block; background:#fff; }
.demo-loader,.demo-error {
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:24px;
  background:linear-gradient(145deg,#171717,#292724);
  z-index:10;
}
.demo-loader.is-done { opacity:0; pointer-events:none; transition:opacity .32s ease; }
.loader-card,.error-card {
  width:min(520px,92vw);
  text-align:center;
  color:#f7f5f1;
}
.loader-logo {
  width:72px; height:58px;
  display:grid; place-items:center;
  margin:0 auto 26px;
  background:var(--red);
  border-radius:5px;
  font-size:24px;
  font-weight:950;
  letter-spacing:-.05em;
}
.loader-card h1 { margin:0 0 9px; font-size:25px; letter-spacing:-.025em; }
.loader-card p { margin:0 0 22px; color:#c9c5bf; font-size:14px; }
.loader-card small { display:block; margin-top:15px; color:#8e8a85; font-size:11px; }
.loader-track { height:3px; width:260px; max-width:70vw; margin:auto; overflow:hidden; background:#3d3a36; border-radius:999px; }
.loader-track span { display:block; height:100%; width:42%; background:#d76554; border-radius:999px; animation:loading 1.15s ease-in-out infinite; }
@keyframes loading { 0%{transform:translateX(-105%)} 100%{transform:translateX(245%)} }
.demo-error[hidden] { display:none; }
.error-card strong { display:block; font-size:22px; margin-bottom:10px; }
.error-card p { color:#c9c5bf; margin:0 0 20px; }
@media (max-width:980px) {
  .demo-bar { grid-template-columns:1fr auto; gap:10px; }
  .demo-state { display:none; }
  .demo-guide { justify-content:flex-start; overflow-x:auto; }
}
@media (max-width:650px) {
  :root { --bar-h:54px; }
  .demo-name,.demo-live,.demo-button-quiet { display:none; }
  .demo-bar { grid-template-columns:1fr auto; padding:0 10px; }
  .demo-guide { gap:18px; padding:0 10px; }
}