.demo-bar{position:relative;z-index:31;color:#f6f2e8;background:#12342b;box-shadow:inset 0 -1px #ffffff14;font-size:13px}.demo-bar-inner{display:flex;align-items:center;gap:14px;width:min(1240px,100%);margin-inline:auto;padding:8px 16px}.demo-brand{display:inline-flex;color:#f6f2e8}.demo-brand .ralley-word{height:17px;width:auto}.demo-live{display:inline-flex;align-items:center;gap:7px;flex:none;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f6f2e8;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1f}.demo-live i{width:6px;height:6px;border-radius:50%;background:#f2551d;box-shadow:0 0 0 3px #f2551d40;animation:demo-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.45}}.demo-switch{display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:999px;background:#00000038;box-shadow:inset 0 0 0 1px #ffffff1a}.demo-switch a{padding:5px 14px;border-radius:999px;font-weight:650;text-decoration:none;color:#f6f2e8b8;transition:background-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1)}.demo-switch a[aria-current=page]{color:#12342b;background:#f6f2e8}@media(hover:hover)and (pointer:fine){.demo-switch a:not([aria-current=page]):hover{color:#f6f2e8}}.demo-note{flex:1;min-width:0;margin:0;color:#f6f2e8a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-actions{position:relative;display:flex;align-items:center;gap:6px;flex:none}.demo-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-weight:600;color:#f6f2e8;text-decoration:none;transition:background-color .16s cubic-bezier(.23,1,.32,1),transform .14s cubic-bezier(.23,1,.32,1)}.demo-btn:focus-visible{outline:2px solid #f2551d;outline-offset:2px}.demo-btn:active{transform:scale(.96)}@media(hover:hover)and (pointer:fine){.demo-btn:hover{background:#ffffff17}}.demo-icon{width:30px;padding:0;justify-content:center}.demo-exit{box-shadow:inset 0 0 0 1px #ffffff29}.demo-pop{position:absolute;top:calc(100% + 10px);right:0;width:min(380px,calc(100vw - 32px));padding:16px 18px;border-radius:20px;color:var(--text);background:var(--core);box-shadow:inset 0 1px 0 var(--highlight),0 0 0 1px var(--hair),0 24px 60px -24px #00000073;animation:demo-in .22s cubic-bezier(.23,1,.32,1);transform-origin:top right}@keyframes demo-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}}.demo-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.demo-pop-head b{font-size:14px;line-height:1.35}.demo-pop-head .demo-btn{color:var(--muted);width:26px;height:26px;margin:-3px -6px 0 0}@media(hover:hover)and (pointer:fine){.demo-pop-head .demo-btn:hover{background:var(--shell)}}.demo-pop ol{margin:12px 0 0;padding:0 0 0 20px;display:grid;gap:8px;font-size:13.5px;line-height:1.45}.demo-pop li::marker{color:var(--faint);font-family:var(--mono);font-size:12px}.demo-pop li a{color:var(--text);text-decoration-color:var(--hair-strong)}.demo-pop p{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}@media(max-width:900px){.demo-note{display:none}.demo-actions{margin-left:auto}}@media(max-width:560px){.demo-live,.demo-actions .demo-btn span,.demo-exit{display:none}.demo-actions .demo-btn:first-child{width:30px;padding:0;justify-content:center}.demo-bar-inner{gap:10px}}@media(prefers-reduced-motion:reduce){.demo-live i,.demo-pop{animation:none}}