/* Author display rules must not revive panels after an access change. */
.live-demo-library[hidden], .live-demo-rail[hidden] { display:none !important; }
body.live-demo-tour { --live-demo-left:264px; --live-demo-rail:176px; }
body.live-demo-tour #app,body[data-onecanvas-access="viewer"].live-demo-tour #app,body[data-onecanvas-access="viewer"].live-demo-tour #app.panel-left-collapsed { --layout-left:var(--live-demo-left); --layout-right:0px; grid-template-columns:var(--live-demo-left) minmax(0,1fr) 0; grid-template-rows:var(--oc-topbar-h) minmax(0,1fr) var(--live-demo-rail) var(--oc-bottombar-h); grid-template-areas:"top top top" "left stage right" "left demo right" "bottom bottom bottom"; }
.live-demo-tour #left,.live-demo-tour #leftResize,.live-demo-tour #right,.live-demo-tour #rightResize,.live-demo-tour .workspace-panel-toggle,.live-demo-tour #showcaseReplay,.live-demo-tour #showcaseReplayFocus,.live-demo-tour #showcaseReplayCursor,.live-demo-tour #mobileLayersToggle,.live-demo-tour #mobileInspectorToggle { display:none !important; }
.live-demo-library,.live-demo-rail,.live-feature-handoff,.live-demo-entry { font-family:inherit; color:var(--text-1); }
.live-demo-library button,.live-demo-rail button,.live-feature-handoff button,.live-demo-entry button { font:inherit; cursor:pointer; }
.live-demo-library button:focus-visible,.live-demo-rail button:focus-visible,.live-demo-entry button:focus-visible,.live-feature-handoff button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.live-demo-library { grid-area:left; min-height:0; min-width:0; display:flex; flex-direction:column; background:var(--surface-1); border-right:1px solid var(--line); z-index:50; }
.live-demo-library-head { padding:22px 18px 18px; position:relative; }
.live-demo-eyebrow { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.11em; }
.live-demo-library h1 { font-size:17px; line-height:1.4; margin:11px 0 7px; letter-spacing:-.04em; }
.live-demo-library-head p { font-size:12px; color:var(--text-2); line-height:1.6; margin:0; }
.live-demo-tabs { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:0 14px; border-bottom:1px solid var(--line); }
.live-demo-tabs button { padding:12px 3px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--text-2); font-size:12px; }
.live-demo-tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:650; }
.live-demo-search { margin:12px 14px 0; width:calc(100% - 28px); min-width:0; height:36px; padding:0 11px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; background:var(--surface-2); color:var(--text-1); }
.live-demo-list { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:12px 10px 20px; }
.live-demo-chapter-group { margin:0 0 5px; }
.live-demo-chapter-button { display:flex; align-items:center; gap:10px; width:100%; min-height:41px; padding:9px 8px; text-align:left; border:0; border-radius:5px; background:none; }
.live-demo-chapter-button span { font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.live-demo-chapter-button strong { font-size:13px; font-weight:550; }
.live-demo-chapter-button:hover { background:var(--surface-2); }
.live-demo-scene { display:block; position:relative; width:calc(100% - 26px); margin:3px 0 3px 26px; padding:9px 10px; border:0; border-left:2px solid var(--line); border-radius:0 5px 5px 0; background:none; color:var(--text-2); font-size:12px !important; text-align:left; line-height:1.55; word-break:keep-all; }
.live-demo-scene[aria-current="step"] { color:var(--accent); border-left-color:var(--accent); background:var(--oc-accent-soft); }
.live-demo-scene.is-seen:not([aria-current="step"]) { color:var(--text-1); }
.live-demo-feature { display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:11px 9px; color:var(--text-1); background:none; }
.live-demo-feature:hover,.live-demo-feature[aria-pressed="true"] { background:var(--surface-2); }
.live-demo-feature strong { font-size:13px; font-weight:550; }
.live-demo-availability { font-size:11px; color:var(--text-2); }
.live-demo-availability.is-ready { color:var(--accent); }
.live-demo-availability.is-unavailable { color:var(--text-2); }
.live-demo-library-foot { margin:0; padding:14px 18px; border-top:1px solid var(--line); font-size:11px; line-height:1.7; color:var(--text-2); }
.live-demo-empty { padding:16px 9px; font-size:13px; line-height:1.7; color:var(--text-2); }
.live-demo-rail { grid-area:demo; position:relative; min-width:0; background:var(--surface-1); border-top:1px solid var(--line); padding:15px 24px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:20px minmax(0,1fr) 17px; gap:7px 20px; z-index:60; }
.live-demo-rail-top { grid-column:1/-1; display:flex; align-items:center; gap:12px; min-width:0; }
.live-demo-chapter { color:var(--accent); font-size:11px; font-weight:650; }
.live-demo-counter { margin-left:auto; color:var(--text-2); font-variant-numeric:tabular-nums; font-size:12px; }
.live-demo-copy { min-width:0; overflow:auto; }
.live-demo-copy h2 { margin:0 0 6px; font-size:20px; line-height:1.25; font-weight:650; letter-spacing:-.045em; word-break:keep-all; }
.live-demo-copy p { margin:0; font-size:13px; line-height:1.55; word-break:keep-all; }
.live-demo-outcome { color:var(--text-2); }
.live-demo-notice { font-size:11px !important; color:var(--text-2); margin-top:4px !important; }
.live-demo-controls { display:grid; grid-template-columns:48px 82px 48px 60px; gap:6px; align-content:center; }
.live-demo-controls button,.live-demo-speed { border:1px solid var(--line); border-radius:5px; height:34px; padding:0 8px; background:var(--surface-1); color:var(--text-1); font-size:12px; white-space:nowrap; }
.live-demo-controls button:hover,.live-demo-secondary:hover { background:var(--surface-2); }
.live-demo-controls button:disabled,.live-demo-entry button:disabled { opacity:.45; cursor:default; }
.live-demo-controls>.live-demo-primary { grid-column:2/-1; }
.live-demo-primary { border:1px solid var(--accent) !important; background:var(--accent) !important; color:#fff !important; border-radius:5px; padding:0 14px; min-height:36px; font-size:13px; font-weight:600; }
.live-demo-primary:hover { filter:brightness(.96); }
.live-demo-play { color:var(--accent) !important; font-weight:650 !important; }
.live-demo-secondary { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:5px; background:var(--surface-1); color:var(--text-1); font-size:12px; }
.live-demo-status { grid-column:1/-1; margin:0; color:var(--text-2); font-size:11px; line-height:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.live-demo-progress { position:absolute; left:0; bottom:0; width:100%; height:2px; border:0; appearance:none; }
.live-demo-progress::-webkit-progress-bar { background:var(--line); }
.live-demo-progress::-webkit-progress-value { background:var(--accent); transition:width .2s ease; }
.live-demo-nav-button,.live-demo-library-close { display:none; }
body.live-demo-tour.live-demo-focus-preview .focus-split { grid-template-columns:minmax(0,1fr); }
body.live-demo-tour.live-demo-focus-preview .html-source-readonly { display:none; }
.live-demo-entry { border:1px solid var(--line); border-radius:12px; background:var(--surface-1); width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 36px); inset:0; margin:auto; padding:26px; overflow:auto; }
.live-demo-entry::backdrop { background:#151b2a66; backdrop-filter:blur(3px); }
.live-demo-entry h2 { font-size:21px; line-height:1.4; letter-spacing:-.04em; margin:0 0 12px; }
.live-demo-entry p { font-size:14px; line-height:1.7; margin:0 0 14px; }
.live-demo-retention { background:var(--surface-2); color:var(--text-2); border-radius:6px; padding:13px; font-size:12px !important; }
.live-demo-consent { display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.6; }
.live-demo-consent input { width:16px; height:16px; flex:none; margin-top:3px; accent-color:var(--accent); }
.live-demo-entry-error { color:var(--text-1); font-weight:550; margin-top:12px !important; }
.live-demo-entry-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.live-feature-handoff { position:absolute; top:12px; left:12px; right:96px; z-index:70; display:flex; align-items:center; gap:12px; max-width:850px; border:1px solid var(--line); border-radius:8px; padding:14px 42px 14px 16px; background:var(--surface-1); box-shadow:0 3px 18px #1720330c; }
.live-feature-handoff>div { flex:1; min-width:0; }
.live-feature-handoff strong { font-size:14px; }
.live-feature-handoff p { font-size:12px; line-height:1.6; color:var(--text-2); margin:4px 0 0; }
.live-feature-back { color:var(--accent); font-size:12px; white-space:nowrap; }
.live-feature-close { position:absolute; right:9px; top:9px; width:24px; height:24px; border:0; border-radius:4px; background:none; font-size:19px !important; color:var(--text-2); }
@media(max-width:1100px) and (min-width:901px) {
  body.live-demo-tour { --live-demo-left:228px; --live-demo-rail:204px; }
  .live-demo-rail { padding:14px 18px; grid-template-columns:minmax(0,1fr); grid-template-rows:18px minmax(0,1fr) 34px 17px; gap:6px; }
  .live-demo-controls { display:flex; align-items:center; }
  .live-demo-controls>.live-demo-primary { margin-left:auto; }
}
@media(max-width:900px) {
  body.live-demo-tour #app,body[data-onecanvas-access="viewer"].live-demo-tour #app,body[data-onecanvas-access="viewer"].live-demo-tour #app.panel-left-collapsed { --layout-left:0px; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:var(--oc-topbar-h) minmax(160px,1fr) 280px var(--oc-bottombar-h); grid-template-areas:"top" "stage" "demo" "bottom"; }
  .live-demo-library { display:none; position:fixed; inset:86px 0 0; width:min(360px,100%); z-index:140; box-shadow:0 0 0 100vmax #15203355; }
  .live-demo-library.is-open { display:flex; }
  .live-demo-library-close { display:block; position:absolute; right:12px; top:15px; width:44px; height:44px; border:0; background:var(--surface-2); color:var(--text-1); border-radius:5px; font-size:20px !important; }
  .live-demo-nav-button { display:block; min-height:44px; border:0; border-radius:4px; background:var(--surface-2); padding:3px 8px; color:var(--text-1); font-size:12px !important; }
  .live-demo-rail { padding:12px 13px 9px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 94px 16px; gap:7px; }
  .live-demo-copy h2 { font-size:18px; }
  .live-demo-copy p { font-size:12px; }
  .live-demo-notice { font-size:10px !important; }
  .live-demo-controls { grid-template-columns:56px minmax(78px,1fr) 44px 60px; grid-template-rows:44px 44px; gap:5px; }
  .live-demo-controls button,.live-demo-speed,.live-demo-entry-actions button { height:44px; min-height:44px; padding:0 5px; font-size:12px; }
  .live-demo-controls>.live-demo-primary { grid-column:2/-1; }
  .live-demo-status { font-size:10px; line-height:16px; }
  .live-feature-handoff { top:38px; left:10px; right:10px; flex-wrap:wrap; padding:13px 35px 13px 13px; gap:9px; }
  .live-feature-handoff>div { flex:1 1 100%; }
  .live-feature-handoff p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .live-demo-progress::-webkit-progress-value { transition:none; } }