/* Every component rule is scoped. Course typography and navigation remain the host's. */
.scroll-showcase{--ss-paper:#f7f3e9;--ss-ink:#303a32;--ss-sage:#506451;--ss-soft:#dce2d3;--ss-red:#a85e48;display:flex;flex-direction:column;height:100%;min-height:0;color:var(--ss-ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--ss-paper);border:1px solid #c8c3b2;border-radius:12px 16px 12px 8px;overflow:hidden;box-shadow:0 12px 25px #30291e12;isolation:isolate}
.scroll-showcase *{box-sizing:border-box}
.scroll-showcase [hidden]{display:none!important}
.scroll-showcase button{font:inherit;font-size:14px;color:var(--ss-ink);cursor:pointer;border:1px solid #bcbba9;background:var(--ss-paper);border-radius:4px;padding:9px 13px;transition:background .18s,color .18s}
.scroll-showcase button:hover{background:#e3e7d8}
.scroll-showcase button:disabled{opacity:.5;cursor:default}
.scroll-showcase button:focus-visible,.scroll-showcase [tabindex]:focus-visible{outline:3px solid var(--ss-red);outline-offset:-3px}
.scroll-showcase .ss-modes{display:flex;gap:4px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid #c8c3b2;background:#f1ecdf}
.scroll-showcase .ss-modes button{flex:1;border:0;background:transparent;box-shadow:none;white-space:nowrap;letter-spacing:.06em;padding:9px 10px}
.scroll-showcase .ss-modes button[aria-pressed=true]{background:var(--ss-sage);color:#fff9e9;box-shadow:inset 0 -2px #344c3a}
.scroll-showcase .ss-window{flex:1;position:relative;min-height:260px;background:#e5dfd1}
.scroll-showcase .ss-panel{position:absolute;inset:0;overflow:hidden}
.scroll-showcase .ss-video{display:block;width:100%;height:100%;object-fit:contain;background:#121412}
.scroll-showcase .ss-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.scroll-showcase .ss-canvas:active{cursor:grabbing}
.scroll-showcase .ss-world-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.scroll-showcase .ss-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;text-align:center;padding:45px;line-height:1.6;background:#f7f3e9e8;color:var(--ss-sage);pointer-events:none}
.scroll-showcase .ss-retry{pointer-events:auto;background:#dce2d3}
.scroll-showcase .ss-world-tools{position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:6px;justify-content:flex-start;flex-wrap:wrap;pointer-events:none}
.scroll-showcase .ss-world-tools button{background:#f7f3e9f2;border-color:#aeb59e;box-shadow:0 2px 5px #343e2812;pointer-events:auto}
.scroll-showcase .ss-world-tools button[aria-pressed=true]{background:var(--ss-sage);color:#fff9e9}
.scroll-showcase .ss-dream{background:#121412}
.scroll-showcase .ss-dream-label{position:absolute;left:12px;top:12px;background:#f7f3e9eb;color:var(--ss-sage);font-size:12px;padding:7px 10px;border-left:2px solid var(--ss-red);pointer-events:none}
.scroll-showcase .ss-caption{flex-shrink:0;padding:9px 13px 10px;border-top:1px solid #d5cfbd;background:var(--ss-paper)}
.scroll-showcase .ss-description{margin:0;font-size:13px;line-height:1.55;color:#53604d}
.scroll-showcase .ss-status{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:#7a7a67}
@media(min-width:1600px){.scroll-showcase .ss-modes button{font-size:18px;padding:10px}.scroll-showcase .ss-description{font-size:17px}.scroll-showcase .ss-status{font-size:13px}.scroll-showcase .ss-world-tools button{font-size:16px}}
@media(max-width:600px){.scroll-showcase .ss-window{min-height:300px}.scroll-showcase .ss-modes{padding:6px;gap:1px}.scroll-showcase .ss-modes button{font-size:13px;padding:10px 6px}.scroll-showcase .ss-world-tools{left:8px;right:8px;bottom:8px;gap:4px}.scroll-showcase .ss-world-tools button{font-size:12px;padding:9px 10px}.scroll-showcase .ss-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){.scroll-showcase button{transition:none}}
.scroll-showcase[data-reduced-motion=true] button{transition:none}