/* Demo framing only; sidebar appearance is supplied by the shared site styles. */
.demo-page{background:#050519;color:#f4f4fc;min-height:100vh}
.demo-wrap{max-width:1360px;margin:auto;padding:28px 40px 40px}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:30px}
.demo-header img{width:120px;height:65px;object-fit:contain}
.demo-header span,.demo-eyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:#ffcc00}
.demo-back{color:#bfc0d8;font-size:13px;font-weight:700}
.demo-page h1{font-size:clamp(25px,3vw,38px);font-weight:900;margin:0 0 10px}
.demo-intro{color:#bfc0d8;line-height:1.7;margin-bottom:24px}
.demo-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 24px}
.demo-toolbar button,.demo-toolbar select{font:800 13px var(--font);color:#e4e4f2;border:1px solid #393951;background:#14142d;border-radius:12px;padding:12px 16px;cursor:pointer}
.demo-modes{display:flex;gap:4px;padding:4px;border:1px solid #393951;border-radius:16px;background:#0c0c25}
.demo-modes button{border:0;background:transparent}
.demo-modes button[aria-pressed="true"]{background:#ffcc00;color:#101039}
.demo-toolbar label{font-size:12px;font-weight:800;color:#bfc0d8;display:flex;align-items:center;gap:10px}
.demo-toolbar select{min-width:155px;color-scheme:dark}
.demo-toolbar #demo-reset{margin-left:auto;background:transparent}
.demo-stage.layout{--sidebar-w:280px;--sidebar-w-collapsed:80px;min-height:790px;align-items:stretch;border:1px solid #28283e;border-radius:20px;background:radial-gradient(ellipse at top right,#151537,transparent 70%),#08081c;overflow:visible}
.demo-stage .sidebar{position:relative;top:auto;height:auto;min-height:790px;width:auto;max-width:none;transform:none;z-index:2;border-radius:20px 0 0 20px;padding-top:16px;padding-bottom:24px;overflow:visible;box-shadow:none}
.demo-stage .nav{padding-top:10px}
.demo-stage.collapsed .nav{padding-top:58px}
.demo-fold{position:absolute;top:18px;right:-17px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#242443,#151530);border:1px solid #4c4c64;color:#fff;z-index:3;cursor:pointer}
.demo-fold svg{width:16px;height:16px}
.demo-stage.collapsed .demo-fold{right:23px}
.demo-stage.collapsed .demo-fold svg{transform:rotate(180deg)}
.demo-canvas{padding:42px clamp(24px,4vw,64px);min-width:0}
.demo-state h2{font-size:clamp(30px,4vw,52px);margin:12px 0;font-weight:900}
.demo-state p{color:#a5a6bd;font-size:14px;line-height:1.7}
.demo-state a{display:inline-flex;margin:20px 0 0;padding:12px 18px;border:1px solid #756229;border-radius:999px;color:#ffdf61;font-weight:800;font-size:13px;background:#ffcc000a}
.demo-notes{max-width:560px;margin-top:42px;padding-top:26px;border-top:1px solid #ffffff17}
.demo-notes h3{font-size:17px;margin-bottom:18px}
.demo-notes ol{padding-left:22px;color:#c4c5da;font-size:14px;line-height:1.8}
.demo-notes li{padding-left:8px;margin-bottom:12px}
.demo-notes li::marker{color:#ffcc00;font-weight:900}
.demo-notes p,.demo-footnote{color:#9294af;font-size:12px;line-height:1.7;margin-top:22px}
.demo-detail{margin-top:28px;padding:20px;border-radius:14px;background:#ffffff04;border:1px solid #ffffff12;max-width:560px}
.demo-detail p{margin-top:8px;font-size:14px;color:#c4c5da}
.demo-page :focus-visible{outline:2px solid #ffcc00;outline-offset:4px}
@media(max-width:1023px){
 .demo-stage.layout{grid-template-columns:280px minmax(0,1fr)}
 .demo-stage.layout.collapsed{grid-template-columns:80px minmax(0,1fr)}
 .demo-stage.collapsed .sidebar{width:auto}
 .demo-stage.collapsed .sidebar .nav-disclosure-link{justify-content:center;gap:0}
 .demo-stage.collapsed .sidebar .nav-disclosure-toggle{display:none}
 .demo-stage.collapsed .sidebar .nav-item .ni-ico{color:#A5A6BD;background:linear-gradient(135deg,#ffffff1a,#ffffff08)!important;border-color:#ffffff24!important}
 .demo-stage.collapsed .sidebar .nav-item .ni-ico svg{color:inherit}
 .demo-stage.collapsed .sidebar .nav-item.active .ni-ico{color:#ffcc00;background:linear-gradient(135deg,#ffcc0029,#ffcc000a)!important;border-color:#ffcc007a!important;box-shadow:inset 0 1px 0 #ffeb9633,0 0 16px -6px #ffcc0052}
}
@media(max-width:680px){
 .demo-wrap{padding:20px 16px}.demo-header{gap:12px;flex-wrap:wrap}.demo-header img{width:90px}.demo-header span{width:100%;font-size:10px}.demo-toolbar{gap:12px}.demo-toolbar #demo-reset{margin-left:0}.demo-toolbar label{flex-wrap:wrap}
 .demo-stage.layout,.demo-stage.layout.collapsed{grid-template-columns:1fr;min-height:0}.demo-stage .sidebar{width:280px;justify-self:center;min-height:790px;border-radius:18px}.demo-stage.collapsed .sidebar{width:80px}
 .demo-canvas{padding:28px 22px;border-top:1px solid #ffffff17}.demo-state h2{font-size:30px}.demo-stage{padding-top:12px}.demo-notes{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.demo-page *,.demo-page *::before{animation:none!important;transition:none!important}}