/* V309: scoped room skin; original lesson, medals and Pill nodes are retained. */
body.compassIntegrated{margin:0!important;padding:0!important;background:var(--paper)!important;background-image:none!important;color:var(--ink)!important;min-height:100vh}
body.compassIntegrated::before,body.compassIntegrated::after{display:none!important}
#compassLegacy{display:none!important}
body.compassIntegrated>#ssVisibleLevels,body.compassIntegrated>#ssLetterNav,body.compassIntegrated>#ssRoomTransport,body.compassIntegrated>#ssWorkshopBadge{display:none!important}
.ssCompassApp{color:var(--ink);text-align:left;text-shadow:none!important}
.ssCompassApp button{position:static!important;width:auto;max-width:100%;margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;min-width:0}
.ssCompassApp h1,.ssCompassApp h2,.ssCompassApp h3{color:var(--ink);text-shadow:none!important}
.ssCompassApp .brand .approved-logo{display:block;width:220px;max-width:100%;height:auto}
.ssCompassApp .view-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ssCompassApp .view-tabs button{min-height:44px;font-size:13px;padding:8px 12px}
.ssCompassApp .layout-picker{display:grid;gap:7px}
.ssCompassApp .layout-control{align-items:flex-end}
.ssCompassApp .collection-strip{gap:16px}
#compassRoom .ssCompassApp #levels{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center;gap:6px;margin:0 auto!important;width:100%}
#compassRoom .ssCompassApp #levels .medal{width:76px!important;height:80px!important;min-width:0!important;padding:5px!important;font-size:11px!important}
#compassRoom .ssCompassApp #levels .medal svg{max-width:48px;max-height:48px}
.ssCompassApp .medal-caption{display:none}
#compassRoom .ssCompassApp #big{display:block!important;position:relative!important;width:100%!important;min-height:125px!important;height:auto!important;padding:20px 0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;color:var(--ink)!important;font-size:clamp(32px,4vw,54px)!important;line-height:1.45!important;text-align:center!important;box-shadow:none!important;text-shadow:none!important;overflow-wrap:anywhere}
#compassRoom .ssCompassApp #big .spop{color:var(--blue)!important}
#compassRoom .ssCompassApp #en{display:block!important;font-size:18px!important;line-height:1.5!important;color:var(--muted)!important;min-height:24px!important;text-align:center!important;margin:4px 0!important}
#compassRoom .ssCompassApp #wbInf{display:block!important;margin:8px 0!important;text-align:center;font-size:15px!important;color:var(--muted)!important}
#compassRoom .ssCompassApp #wbOri{display:flex!important;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 0!important;font-size:10px!important;background:transparent!important;color:var(--muted)!important}
#compassRoom .ssCompassApp #wbNav{display:flex!important;gap:6px;justify-content:center;flex-wrap:wrap;margin:16px 0 0!important}
#compassRoom .ssCompassApp #wbNav button{min-height:44px!important;width:auto!important;padding:8px 10px!important;border-radius:10px!important;font-size:11px!important;background:var(--surface)!important;color:var(--ink)!important}
#compassRoom .ssCompassApp #vbSourceHost{margin-top:16px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
#compassRoom .ssCompassApp #note{display:block!important;color:var(--muted)!important;font-size:12px!important;padding:6px!important}
#compassRoom .ssCompassApp #wbChoose{max-width:100%}
.ssCompassApp .lesson>*{position:relative;z-index:1}
#compassRoom .ssCompassApp #vfs{max-width:100%;overflow-wrap:anywhere}
#compassRoom .ssCompassApp #wbChoose button{height:auto!important;min-height:44px!important;max-width:100%!important;font-size:16px!important}
.ssCompassApp .transport-wrap{position:relative;bottom:auto;max-width:950px;width:100%;margin:22px auto;z-index:40}
#compassRoom .ssCompassApp #ssPill[data-compass]{position:relative!important;inset:auto!important;translate:none!important;transform:none!important;transition:none!important;animation:none!important;display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;min-height:76px;height:auto!important;padding:12px 16px!important;border-radius:22px!important;background:var(--ink)!important;border:1px solid var(--slava-paint-line-strong, #637983)!important;color:var(--slava-paint-gold, #fffdf8)!important;--ss-accent:var(--slava-paint-gold, #eee4ca);--ss-surface:var(--ink);--ss-on:var(--slava-paint-bg-deep, #243951)}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssText{display:none!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>button{width:auto!important;height:48px!important;min-height:48px!important;min-width:48px!important;flex:0 0 auto;padding:8px 14px!important;border:1px solid var(--slava-paint-line-strong, #758c9b)!important;border-radius:12px!important;font-size:12px!important;color:var(--slava-paint-gold, #fffdf8)!important;display:flex!important;gap:8px!important;background:transparent!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>button svg{width:18px;height:18px}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssTog{background:var(--slava-paint-gold, #eee4ca)!important;color:var(--slava-paint-ink-dark, #23394d)!important;width:144px!important;border-color:var(--slava-paint-gold, #eee4ca)!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssTog::after{content:"Continuous play"}
#compassRoom .ssCompassApp #ssPill[data-compass][data-state="playing"]>.ssTog::after{content:"Pause"}
#compassRoom .ssCompassApp #ssPill[data-compass][data-state="paused"]>.ssTog::after{content:"Resume"}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssStop::after{content:"Stop"}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssStop{width:100px!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssExp{border-radius:50%!important;width:48px!important;padding:0!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssExp svg{display:none}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssExp::after{content:"⚙";font-size:22px}
#compassRoom .ssCompassApp #ssPill[data-compass]>.compass-repeat{border-color:transparent!important;margin-left:auto}
#compassRoom .ssCompassApp #ssPill[data-compass]>.compass-repeat[aria-pressed=true]{color:var(--slava-paint-gold, #fff3d8)!important;background:var(--slava-paint-paper-glass, #ffffff12)!important}
.compass-pill-brand{min-width:140px;margin-right:auto;font-size:11px;line-height:1.5}
.compass-pill-brand strong,.compass-pill-brand small{display:block}
.compass-pill-brand small{font-size:10px;color:var(--slava-paint-ink-soft, #c3d0d7)}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass]{position:fixed!important;inset:24px 16px auto auto!important;display:block!important;width:min(460px,calc(100vw - 32px))!important;max-height:calc(100dvh - 48px)!important;min-height:0;padding:0!important;overflow:auto!important;background:var(--slava-paint-gold, #e8e0d2)!important;--ss-surface:var(--slava-paint-gold, #e8e0d2);--ss-edge:var(--slava-paint-card-glass, #73685b);--ss-accent:var(--slava-paint-blue, #285274);--ss-on:var(--slava-paint-gold, #fffdf8)}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass]>.compass-pill-brand,#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass]>button{display:none!important}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass] .ssRich{max-height:none!important;color:var(--slava-paint-ink-dark, #243951)!important;background:var(--slava-paint-gold, #f6f3eb)!important}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass] .ssRich .ssStop{display:flex!important}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass] button{font-size:13px!important}
body.compassIntegrated>dialog.ssCompassApp{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 40px);overflow:auto;z-index:2147483000}
body.compassIntegrated>dialog.ssCompassApp:not([open]){display:none}
@media(max-width:760px){
.ssCompassApp .brandrow{align-items:flex-start;gap:18px;flex-direction:column}
.ssCompassApp .brand .approved-logo{width:190px}
.ssCompassApp .layout-control{width:100%;align-items:flex-start}
.ssCompassApp .view-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.ssCompassApp .layout-picker{width:100%}
.ssCompassApp .view-tabs button{font-size:12px;padding:8px 6px}
#compassRoom .ssCompassApp #ssPill[data-compass]{display:grid!important;grid-template-columns:1fr 1fr 48px;gap:8px!important;padding:12px!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>.compass-pill-brand{grid-column:1/-1;min-width:0}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssTog,#compassRoom .ssCompassApp #ssPill[data-compass]>.ssStop{width:100%!important}
#compassRoom .ssCompassApp #ssPill[data-compass]>.compass-repeat{grid-column:1/3;grid-row:3;margin:0;justify-content:flex-start}
#compassRoom .ssCompassApp #ssPill[data-compass]>.ssExp{grid-column:3;grid-row:2}
#compassRoom .ssCompassApp #levels{gap:4px!important}
#compassRoom .ssCompassApp #levels .medal{width:calc((100vw - 60px)/5)!important;max-width:72px;min-height:68px!important;height:72px!important;font-size:9px!important}
#compassRoom .ssCompassApp #levels .medal svg{width:38px!important;height:38px!important}
.ssCompassApp .lesson{padding:18px;min-width:0}
#compassRoom .ssCompassApp #ssPill.ssOpen[data-compass]{display:block!important}
}


body#compassRoom{display:block!important;width:100%!important;max-width:none!important;align-items:normal!important}

#compassRoom .ssCompassApp #wbNav{display:none!important}
#compassRoom .ssCompassApp .lesson .ornament{order:20}
#compassRoom .ssCompassApp .lesson #big{order:3}
#compassRoom .ssCompassApp .lesson #en{order:4}
#compassRoom .ssCompassApp .lesson #wbInf{order:5}
#compassRoom .ssCompassApp .lesson #wbOri{order:6}
#compassRoom .ssCompassApp .lesson .meaning-status{order:7}
#compassRoom .ssCompassApp .lesson #vbSourceHost{order:12}
#compassRoom .ssCompassApp .lesson #note{order:14}

body#compassRoom{border:0!important;border-radius:0!important;box-shadow:none!important}
#compassRoom .ssCompassApp #levels{visibility:visible!important;opacity:1!important;transform:none!important;max-height:none!important;height:auto!important;pointer-events:auto!important}
#compassRoom .ssCompassApp #levels .medal{visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
#compassRoom .ssCompassApp .slava-content-source-trigger{color:var(--blue)!important;background:var(--surface)!important;border-color:var(--line)!important;font-size:12px!important;min-height:44px!important}