/* Home is a gallery. Detailed controls stay in the same elements on their own pages. */ #app[data-front-page] .sfp-navigation{display:flex;align-items:center;gap:7px;flex-wrap:wrap;max-width:1280px;margin:12px auto;padding:0 20px;box-sizing:border-box;position:relative;z-index:5} #app[data-front-page] .sfp-navigation>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;padding:9px 17px;box-sizing:border-box;border:1px solid #b8d7e8;border-radius:12px;background:#f5fbff;color:#194a66;text-decoration:none;font:800 13px/1.3 var(--sk-ui-font,Nunito,sans-serif);text-shadow:none;box-shadow:none} #app[data-front-page] .sfp-navigation>a[aria-current=page]{background:#184d6b;color:#fff;border-color:#184d6b} #app[data-front-page] .sfp-detail-heading{max-width:1238px;margin:15px auto 24px;padding:22px 26px;background:#fbfdff;border:1px solid #c5dce8;border-radius:18px;color:#193f58;text-align:left;box-sizing:border-box} #app[data-front-page] .sfp-detail-heading h1{font:800 clamp(25px,4vw,38px)/1.15 var(--sk-ui-font,Nunito,sans-serif);letter-spacing:-.035em;color:#193f58;margin:9px 0} #app[data-front-page] .sfp-detail-heading p{max-width:68ch;margin:0;color:#42647a;font:14px/1.6 var(--sk-ui-font,Nunito,sans-serif)} #app[data-front-page] .sfp-back{display:inline-flex;align-items:center;min-height:44px;color:#185675;text-decoration:underline;text-underline-offset:4px;font:800 13px/1.3 var(--sk-ui-font,Nunito,sans-serif)} #app[data-front-page] .sfp-page-close{position:fixed;top:calc(78px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:220;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:46px;height:46px;min-width:44px;min-height:44px;padding:0;border:2px solid var(--ssd-accent,#285876);border-radius:50%;background:var(--ssd-panel,#fff8e9);color:var(--ssd-ink,#193f58);font:700 30px/1 system-ui,sans-serif;text-decoration:none;text-shadow:none;box-shadow:0 3px 14px #10284030;cursor:pointer} #app[data-front-page]:not([data-front-page=home]) .sfp-navigation{padding-right:76px} #app[data-front-page] .sfp-page-close:hover{outline:2px solid var(--ssd-accent,#285876);outline-offset:2px} #app[data-front-page] :is(.bv-music-feature,.sk-music-stage,#sota-connections,#bv-circle,#bv-your-room,.sk-hero-artwork,.bv-connect-header){position:relative} #app[data-front-page] .sfp-panel-close{position:absolute;top:12px;right:12px;z-index:8;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--ssd-accent,#285876);border-radius:50%;background:var(--ssd-panel,#fff8e9);color:var(--ssd-ink,#193f58);font:700 28px/1 system-ui,sans-serif;text-decoration:none;text-shadow:none;box-shadow:0 2px 10px #10284020;cursor:pointer} #app[data-front-page=music] .sk-music-stage-heading{padding-right:76px} #app[data-front-page=world] #sota-connections>.scf-heading,#app[data-front-page=skins] #bv-your-room>header,#app[data-front-page=connect] .bv-connect-header>.bv-wordmark{padding-right:60px} #app[data-front-page] [hidden]{display:none!important} #app[data-front-page] .sfp-visual-link{display:none} #app[data-front-page=home] :is(.sk-hero-artwork,.sk-music-stage-picture,.bv-circle-art,.sfp-skin-tile){position:relative} #app[data-front-page=home] .sfp-visual-link{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;box-sizing:border-box;padding:18px;min-width:44px;min-height:44px;color:#fff;background:transparent;text-decoration:none;border:0;border-radius:inherit;text-shadow:none;cursor:pointer;pointer-events:auto} #app[data-front-page=home] .sfp-visual-link>span{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;box-sizing:border-box;border:1px solid #ffffff9c;border-radius:11px;background:#082c43e8;color:#fff;font:800 12px/1.35 var(--sk-ui-font,Nunito,sans-serif);box-shadow:0 4px 18px #071c3a2b} #app[data-front-page=home] .sk-hero-artwork>.sfp-visual-link{justify-content:flex-start;align-items:flex-end} #app[data-front-page=home] .lg3d-stage>.sfp-visual-link{z-index:160} #app[data-front-page] :is(.sfp-navigation>a,.sfp-back,.sfp-visual-link,.sfp-page-close,.sfp-panel-close):focus-visible{outline:3px solid #00a9cf;outline-offset:4px} #app[data-front-page=home] .sfp-visual-link:hover>span{background:#12617c} #app:not(.sx-app)[data-front-page=home] #sota-music-home .bv-music-copy>p, #app:not(.sx-app)[data-front-page=home] #sota-music-home .bv-music-actions, #app:not(.sx-app)[data-front-page=home] #sota-music-home .bv-music-copy>[data-playlist-status], #app:not(.sx-app)[data-front-page=home] #sota-music-home .sota-music-view-tabs, #app:not(.sx-app)[data-front-page=home] #sota-music-home [data-music-panel=playlist], #app:not(.sx-app)[data-front-page=home] #sota-music-home .sk-music-stage-heading, #app:not(.sx-app)[data-front-page=home] #sota-music-home .sk-music-stage-footer{display:none!important} #app:not(.sx-app)[data-front-page=home] #sota-music-home [data-music-panel=visualiser]{display:block!important} /* Let the original 3:2 photograph determine the banner height, without cropping. */ #app.bv-welcome[data-front-page=home] #sota-music-home>.bv-music-feature{display:block;min-height:0;height:auto} #app.bv-welcome[data-front-page=home] #sota-music-home .bv-music-feature>img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;object-position:center} #app.bv-welcome[data-front-page=home] #sota-music-home .bv-music-copy{position:absolute;top:0;left:0;max-width:100%;padding:30px} #app.bv-welcome[data-front-page=home] #sota-music-home .bv-music-feature::after{background:linear-gradient(125deg,#072d33d9 0%,#102b3740 45%,transparent 70%)} #app.bv-welcome[data-front-page=home] #sota-music-home .sk-music-stage{background:radial-gradient(ellipse at 15% 85%,#ff542b1a,transparent 45%),radial-gradient(ellipse at 52% 80%,#18efa018,transparent 45%),radial-gradient(ellipse at 88% 70%,#8e48ff26,transparent 45%),#090d25} #app.bv-welcome[data-front-page=home] .sk-music-stage-picture canvas{filter:none} #app[data-front-page=home] #sota-connections :is(.scf-heading p,.slc-topline,.slc-intro,.slc-under-map,.slc-details,.slc-storage,.slc-friend-sync,.scf-warning,[data-friend-privacy],.lg3d-toolbar,.lg3d-background,.lg3d-controls,.lg3d-outline,.lg3d-state){display:none!important} #app[data-front-page=home] #sota-connections.sc-friends{padding:18px;background:#081322;border-color:#426384} #app[data-front-page=home] #sota-connections .scf-heading{margin:0 0 14px} #app[data-front-page=home] #sota-connections .scf-heading h2{color:#e7f3ff;font-size:26px} #app[data-front-page=home] #sota-connections .slc{border:0;background:transparent} #app[data-front-page=home] #sota-connections .lg3d-labels{pointer-events:none} #app[data-front-page=home] #bv-circle .bv-circle-feature>:is(small,p,button){display:none!important} #app[data-front-page=home] #bv-circle .bv-circle-feature{grid-template-columns:minmax(0,1fr);gap:10px;text-align:center} #app[data-front-page=home] #bv-circle .bv-circle-art{min-height:230px;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,#cce9ef,#e5c1b1)} #app[data-front-page=home] #bv-circle .bv-circle-art>img{width:min(62%,230px);height:auto;max-width:100%;margin:15px} #app[data-front-page=home] #bv-circle .bv-circle-feature>h2{margin:0;font-size:25px} #app[data-front-page=home] #bv-your-room>header :is(p,small), #app[data-front-page=home] #bv-your-room>.bv-discovery-note, #app[data-front-page=home] #bv-your-room .bv-collection-copy>:is(.bv-collection-line,.bv-collection-members,.bv-collection-count), #app[data-front-page=home] #bv-your-room .bv-collection-arrow{display:none!important} #app[data-front-page] .sfp-skin-tile{position:relative;min-width:0} #app[data-front-page] .sfp-skin-tile>.bv-collection-card{width:100%;height:100%;box-sizing:border-box} #app[data-front-page=home] #bv-your-room .bv-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #app[data-front-page=home] #bv-your-room .sfp-skin-tile:nth-child(n+4){display:none} #app[data-front-page=home] #bv-your-room .bv-collection-art{height:220px;margin:0;border-radius:12px 12px 0 0} #app[data-front-page=home] #bv-your-room .bv-collection-copy{padding:15px 15px 72px} #app[data-front-page=home] #bv-your-room .bv-collection-copy strong{font-size:18px} #app[data-front-page]:not([data-front-page=home]) .bv-neon-section{padding-top:0;margin-top:0} #app[data-front-page=music] .bv-neon-section,#app[data-front-page=profile] .bv-neon-section{padding:0!important;margin:0!important;min-height:0} #app[data-front-page=connect] .bv-connect-header{margin-top:0} #app[data-front-page=music] #sota-music-home{margin-top:0} @media(max-width:700px){ #app[data-front-page] .sfp-navigation{padding:0 12px;gap:6px;margin:10px auto} #app[data-front-page] .sfp-navigation>a{flex:1;min-width:52px;padding:9px 12px} #app[data-front-page] .sfp-detail-heading{margin:12px;padding:18px} #app[data-front-page=home] .sfp-visual-link{padding:12px} #app[data-front-page=home] .sfp-visual-link>span{font-size:11px;padding:8px 11px} #app.bv-welcome[data-front-page=home] #sota-music-home .bv-music-copy{padding:18px} #app.bv-welcome[data-front-page=home] #sota-music-home .bv-music-copy h1{font-size:clamp(23px,6.5vw,34px)} #app[data-front-page=home] #bv-your-room .bv-collection-grid{grid-template-columns:minmax(0,1fr)} #app[data-front-page=home] #bv-your-room .sfp-skin-tile:nth-child(n+3){display:none} #app[data-front-page=home] #bv-your-room .bv-collection-art{height:230px} #app[data-front-page=home] #bv-circle .bv-circle-art{min-height:225px} #app[data-front-page=home] #sota-connections.sc-friends{padding:12px} } @media(prefers-reduced-motion:reduce){#app[data-front-page] .sfp-visual-link{scroll-behavior:auto}} @media(forced-colors:active){#app[data-front-page] :is(.sfp-navigation>a,.sfp-detail-heading,.sfp-visual-link>span,.sfp-page-close,.sfp-panel-close){background:Canvas;color:CanvasText;border-color:CanvasText}#app[data-front-page] :is(.sfp-navigation>a,.sfp-back,.sfp-visual-link,.sfp-page-close,.sfp-panel-close):focus-visible{outline-color:Highlight}} /* Where you belong only: one native action per existing artwork card. */ #app.bv-welcome[data-front-page] #bv-your-room>header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px} #app.bv-welcome[data-front-page] #bv-your-room .bv-discovery-all{display:inline-flex!important;align-items:center;justify-content:center;position:static;width:auto!important;height:auto!important;min-width:44px;min-height:44px;aspect-ratio:auto;padding:12px 18px;border:1px solid currentColor;border-radius:10px;background:transparent;color:inherit;font:700 14px/1.4 Arial,system-ui,sans-serif;box-shadow:none;white-space:normal;cursor:pointer} #app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} #app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid>.bv-collection-card{grid-column:auto!important;position:relative;display:block;min-width:0;width:100%;height:220px!important;margin:0;padding:0;overflow:hidden;cursor:pointer} #app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid>.bv-collection-card .bv-collection-art{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:inherit} #app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid>.bv-collection-card .bv-collection-copy{position:absolute;inset:auto 16px 16px;max-width:calc(100% - 32px);padding:0} #app.bv-welcome[data-front-page] #bv-your-room .bv-collection-copy strong{display:block;color:#fff;font:700 18px/1.3 Arial,system-ui,sans-serif;text-shadow:0 1px 5px #000} #app.bv-welcome[data-front-page] #bv-your-room :is(.bv-discovery-all,.bv-collection-card):focus-visible{outline:3px solid #08768a;outline-offset:4px} @media(max-width:760px){#app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid>.bv-collection-card{height:190px!important}} @media(max-width:480px){#app.bv-welcome[data-front-page] #bv-your-room .bv-collection-grid{grid-template-columns:minmax(0,1fr)}} /* Keep the exit in the navigation layout, clear of content and panel actions. */ #app[data-front-page] .sfp-navigation{position:sticky;top:0;z-index:40;padding-block:8px;background:var(--ssd-panel,#eaf7fb);border-radius:0 0 16px 16px;box-shadow:0 3px 10px #12354b24;} #app[data-front-page]:not([data-front-page=home]) .sfp-navigation{padding-right:20px;} #app[data-front-page] .sfp-page-close{position:relative;inset:auto;z-index:auto;margin-left:auto;flex:none;} #app[data-front-page=home] .sk-hero-create{z-index:5;pointer-events:auto;} @media(max-width:700px){#app[data-front-page]:not([data-front-page=home]) .sfp-navigation{padding-right:12px;}} @media(forced-colors:active){#app[data-front-page] .sfp-navigation{background:Canvas;}} .bv-install-link,.bv-help-link{min-height:44px;padding:10px 16px;border:1px solid #286b78;border-radius:12px;background:#f5fffc;color:#23485c;font:800 14px/1.4 Nunito,system-ui,sans-serif;cursor:pointer;} html:not(.sota-help-ready) [data-sota-help]{display:none} .sota-help-dock{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:16px;margin:16px auto 0;max-width:1280px;background:#eaf7fb;color:#23485c;font:700 14px/1.4 Nunito,system-ui,sans-serif;border-radius:16px 16px 0 0;} #app[data-front-page]:not([data-front-page=home]) .sfp-navigation>.ssd-launcher{margin-left:0!important;}