.demo-body{height:100vh;overflow:hidden;background:#101317;color:#E8EBEE;display:flex;flex-direction:column}
.dbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;border-bottom:1px solid #20262C;flex-shrink:0}
.dlogo{display:flex;align-items:center;gap:10px}
.dlogo b{display:block;font-size:14.5px;line-height:1.1}
.dlogo small{color:#8B949E;font-size:11.5px}
.dctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;background:#1B2127;border:1px solid #2A323A;color:#E8EBEE;font-size:12.5px;font-weight:650;white-space:nowrap}
.dbtn:hover{background:#232A31}
.dbtn:disabled{opacity:.4}
.dbtn.hot{background:#99CC00;color:#14180A;border-color:#99CC00}
.dbtn.ghost{background:transparent}
.dtog{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 6px 0 10px;border-radius:9px;background:#1B2127;border:1px solid #2A323A;font-size:12.5px;font-weight:650;cursor:pointer}
.switch.sm{width:32px;height:20px}
.switch.sm span::after{width:14px;height:14px}
.switch.sm input:checked+span::after{transform:translateX(12px)}
.switch input:checked+span{background:#99CC00}
.dmain{flex:1;min-height:0;display:grid;grid-template-columns:minmax(360px,30%) 1fr}
.dleft{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;min-height:0;background:radial-gradient(600px 500px at 50% 40%,color-mix(in srgb,var(--brand) 35%,transparent),transparent)}
.phone-wrap{position:relative;flex-shrink:0}
.phone{position:absolute;left:0;top:0;width:414px;height:868px;transform-origin:0 0;border-radius:56px;padding:12px;background:#05070A;box-shadow:0 0 0 1.5px #3A424B,0 40px 80px -20px rgba(0,0,0,.7),inset 0 0 0 1px #1A1F25}
.phone iframe{display:block;width:390px;height:844px;border:0;border-radius:44px;background:var(--tint)}
.cap{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:#8B949E}
.cap b{color:#E8EBEE}
.dright{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid #20262C}
.ptabs{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid #20262C}
.ptab{display:flex;flex-direction:column;align-items:flex-start;padding:6px 12px;border-radius:9px;font-weight:700;font-size:13px;color:#8B949E;line-height:1.2}
.ptab small{font-weight:500;font-size:11px;opacity:.75}
.ptab.on{background:#1B2127;color:#fff;box-shadow:inset 0 -2px 0 #99CC00}
.sync{display:flex;align-items:center;gap:8px;font-size:12px;color:#A9B1BA;max-width:48%;min-width:0}
.sync .faint{color:#6B747E}
.sdot{width:7px;height:7px;border-radius:50%;background:#99CC00;flex-shrink:0;animation:pulse 1.4s infinite}
.panes{flex:1;position:relative;min-height:0}
.pane{position:absolute;inset:0;width:100%;height:100%;border:0;visibility:hidden;background:#0C0F12}
.pane.on{visibility:visible}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.steps p{color:var(--muted);margin-top:3px;font-size:13.5px}
.modal{color:var(--ink)}
.demo-badge.fixed{color:#8B949E;background:rgba(16,19,23,.85);border-color:#2A323A;left:12px;right:auto}
@media (max-width:900px){
  .demo-body{height:auto;overflow:auto}
  .dbar{flex-direction:column;align-items:flex-start}
  .dctl{justify-content:flex-start}
  .dmain{grid-template-columns:1fr}
  .dleft{height:640px}
  .dright{height:760px;border-left:0;border-top:1px solid #20262C}
  .ptabs{overflow-x:auto}.sync{display:none}
}