.rdemo{margin-right:0}.rdemo-bar{font-family:var(--font-sans);align-items:center;gap:12px;margin-bottom:12px;font-size:13px;display:flex}.rdemo-presets{flex-wrap:wrap;align-items:center;gap:6px;margin-left:12px;margin-right:auto;display:flex}.rdemo-label{white-space:nowrap;font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-aa);margin-right:4px;font-size:max(10px,.5vw);font-weight:700}.rdemo-tabs button,.rdemo-presets button{font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;padding:max(6px,.4vw) max(9px,.6vw);font-size:max(11px,.6vw);font-weight:900;line-height:1.2;transition:color .2s,border-color .2s}.rdemo-tabs{gap:4px;display:flex}.rdemo-tabs button{color:#b0b0b0;background:#2e2e2e;border:0;border-radius:3px}.rdemo-tabs button:hover,.rdemo-tabs button[aria-pressed=true]{color:var(--accent)}.rdemo-presets button{color:var(--ink);border:.5px solid var(--rule);background:0 0;border-radius:0;font-size:max(10px,.5vw);font-weight:400}.rdemo-presets button:hover{border-color:var(--accent)}.rdemo-presets button[aria-pressed=true]{border-color:var(--ink)}.rdemo-panes{grid-template-columns:1fr 1fr;gap:12px;display:grid}.rdemo-codewrap{aspect-ratio:8.5/11;width:100%;min-height:0;position:relative}.rdemo-code,.rdemo-hl{box-sizing:border-box;tab-size:2;letter-spacing:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;scrollbar-gutter:stable;border:1px solid #0000;border-radius:4px;width:100%;height:100%;margin:0;padding:14px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;inset:0;overflow:auto}.rdemo-hl{color:var(--ink);background:var(--bg-deep);border-color:var(--card-edge);pointer-events:none;overflow:hidden}.rdemo-code{z-index:1;resize:none;color:#0000;caret-color:var(--ink);background:0 0}.rdemo-code::selection{color:#0000;background:#e38a1459}.rdemo-code:focus{outline:none}.rdemo-codewrap:focus-within .rdemo-hl{border-color:var(--accent)}.hl-tag,.hl-sel{color:#eaa652}.hl-attr,.hl-prop{color:#9db8d6}.hl-val{color:#b9c78f}.hl-var{color:#bdb6e0}.hl-at,.hl-ent{color:#d79aab}.hl-com,.hl-pun{color:var(--dim)}.hl-com{font-style:italic}.rdemo-page{aspect-ratio:8.5/11;background:#f5f2ed;border-radius:4px;position:relative;overflow:hidden}.rdemo-page iframe{background:0 0;border:0;width:816px;display:block}figure.rdemo>.rdemo-panes>*{pointer-events:none}.lb-stage.rdemo-stage{max-width:none}.rdemo-stage .rdemo-bar{padding-right:52px}.rdemo-stage .rdemo-panes{--h:calc(100vh - 3.2vw - 6vh - 60px);grid-template-columns:minmax(0,1fr) calc(var(--h) * 8.5 / 11);height:var(--h);grid-template-rows:100%}.rdemo-stage .rdemo-codewrap{aspect-ratio:auto;height:100%}.rdemo-stage :is(.rdemo-code,.rdemo-hl){font-size:13px}.rdemo-stage .rdemo-page{aspect-ratio:auto;background:0 0;border-radius:0;height:100%;overflow-y:auto}.rdemo-paneswitch{display:none}@media (max-width:880px){.rdemo-panes{grid-template-columns:1fr}figure.rdemo>.rdemo-panes .rdemo-codewrap{display:none}.lb.open.rdemo-lb{padding:68px 16px 16px;display:block}.rdemo-stage{flex-direction:column;height:calc(100dvh - 84px);display:flex}.rdemo-stage .rdemo-bar{flex-wrap:wrap;gap:8px;padding-right:0}.rdemo-stage .rdemo-panes{flex:1;grid-template-columns:1fr;height:auto;min-height:0}.rdemo-paneswitch{display:flex}.rdemo-stage[data-pane=preview] :is(.rdemo-codewrap,.rdemo-codetabs),.rdemo-stage[data-pane=code] :is(.rdemo-page,.rdemo-viewtabs){display:none}}
