.orbit-page { isolation: isolate; }
.orbit-main { position: relative; z-index: 1; }
.home-background-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.home-background-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-background-media.is-loading { visibility: hidden; }
/* Only the applied video changes the center; thumbnail previews do not. */
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .orbit-center { background: transparent; border-color: transparent; box-shadow: none; }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .orbit-halo { display: block; }
.has-home-background .home-background-layer::after { content: ''; position: absolute; inset: 0; background: rgb(250 249 246 / 12%); }
.home-background-layer:has(> video.home-background-media:not(.is-loading))::after { display: none; }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-tab { background: rgb(255 252 248 / 34%); border-color: rgb(255 250 245 / 48%); box-shadow: 5px 0 18px -10px rgb(20 13 10 / 24%); backdrop-filter: blur(10px); }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-tab:hover { background: rgb(255 252 248 / 52%); }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-launcher-right .office-tab { box-shadow: -5px 0 18px -10px rgb(20 13 10 / 24%); }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-panel { background: rgb(255 252 248 / 46%); border-color: rgb(255 250 245 / 52%); box-shadow: 12px 0 38px -18px rgb(20 13 10 / 32%); backdrop-filter: blur(14px); }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-pin { background: rgb(255 252 248 / 45%); backdrop-filter: blur(8px); }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-pin[aria-pressed="true"] { background: #852f31; color: #fffaf5; }
[data-theme="dark"] .orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-tab { background: rgb(28 31 39 / 40%); border-color: rgb(226 201 173 / 28%); }
[data-theme="dark"] .orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-tab:hover { background: rgb(28 31 39 / 58%); }
[data-theme="dark"] .orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-panel { background: rgb(28 31 39 / 54%); border-color: rgb(226 201 173 / 30%); }
[data-theme="dark"] .orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-pin { background: rgb(28 31 39 / 50%); }
[data-theme="dark"] .orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-pin[aria-pressed="true"] { background: #80504e; color: white; }
.orbit-page:has(.home-background-layer > video.home-background-media:not(.is-loading)) .office-launcher-right .office-panel { box-shadow: -12px 0 38px -18px rgb(20 13 10 / 32%); }
.has-animated-home-background .home-background-layer { background: #fbfaf7; overflow: hidden; }
.has-animated-home-background .home-background-layer::before { content: ''; position: absolute; inset: -24%; background: radial-gradient(ellipse at 8% 12%, rgb(162 35 57 / 18%) 0 7%, transparent 34%), radial-gradient(ellipse at 92% 86%, rgb(207 165 76 / 22%) 0 8%, transparent 34%), radial-gradient(circle at 50% 50%, rgb(255 255 255 / 94%) 0 16%, transparent 48%), linear-gradient(132deg, transparent 0 31%, rgb(171 45 62 / 12%) 31.3% 32%, transparent 32.3% 100%), linear-gradient(312deg, transparent 0 62%, rgb(200 151 61 / 16%) 62.3% 63%, transparent 63.3% 100%), conic-gradient(from 24deg at 50% 50%, #fbfaf7, #f5e9df 20%, #fffdf9 40%, #f0e4d5 57%, #fffefa 72%, #f3e1e3 87%, #fbfaf7); filter: blur(20px) saturate(.9); animation: home-red-white-gold 26s ease-in-out infinite alternate; }
.has-animated-home-background .home-background-layer::after { background: linear-gradient(118deg, rgb(255 255 255 / 18%), transparent 42%, rgb(214 171 79 / 8%) 70%, rgb(163 39 58 / 3%)); mix-blend-mode: normal; }
.has-animated-home-background .orbit-tool strong { text-shadow: 0 1px 3px rgb(255 255 255 / 92%), 0 0 8px rgb(255 255 255 / 60%); }
@keyframes home-red-white-gold { 0% { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1); } 50% { transform: translate3d(2%, 3%, 0) rotate(3deg) scale(1.05); } 100% { transform: translate3d(5%, -2%, 0) rotate(6deg) scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .has-animated-home-background .home-background-layer::before { animation: none; } }
.has-home-background .orbit-tool strong { text-shadow: 0 1px 3px #fff, 0 0 8px #fff; }
.home-background-controls { flex-shrink: 0; pointer-events: none; }
.home-background-toggle { height: 100%; padding: 0 16px; border: 1px solid rgb(133 47 49 / 24%); border-radius: 22px; background: rgb(255 252 248 / 65%); backdrop-filter: blur(12px); color: #702329; font-size: 14px; font-weight: 600; cursor: pointer; pointer-events: auto; }
.home-background-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 460px; max-width: 100%; max-height: calc(var(--home-page-height, 100dvh) - 88px); padding: 16px; overflow: auto; border: 1px solid #e5d8cb; border-radius: 18px; background: #fffcf8; box-shadow: 0 12px 40px -16px #704a3366; pointer-events: auto; }
.home-background-panel[hidden] { display: none; }
.home-background-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; cursor: move; user-select: none; touch-action: none; }
.home-background-heading h2 { margin: 0; font-size: 16px; color: #852f31; }
.home-background-close { width: 28px; height: 28px; border-radius: 50%; background: #f8f0e8; font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.home-background-form input { width: 100%; padding: 9px 10px; border: 1px solid #decebf; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.home-background-form input:focus-visible { outline: 2px solid #b96b59; outline-offset: 1px; }
.home-background-add { display: flex; gap: 8px; margin-top: 8px; }
.home-background-add select { min-width: 0; flex: 1; padding: 7px; border: 1px solid #decebf; border-radius: 8px; background: #fff; color: #554438; font: inherit; font-size: 12px; }
.home-background-add button { padding: 8px 12px; border-radius: 8px; background: #852f31; color: #fff; font-size: 12px; cursor: pointer; }
.home-background-status { margin: 10px 0 0; font-size: 12px; color: #96502d; }
.home-background-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.home-background-row { position: relative; min-width: 0; }
.home-background-choice { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; min-width: 0; padding: 0; overflow: hidden; border-radius: 10px; text-align: left; background: #f6eee6; font-size: 12px; cursor: pointer; box-shadow: 0 0 0 1px rgb(133 47 49 / 12%); }
.home-background-thumb { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #f3eee8; }
.home-background-thumb img, .home-background-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.home-background-thumb.is-loading::before, .home-background-thumb.is-fallback::before { content: attr(data-kind); position: absolute; inset: 0; display: grid; place-items: center; color: #852f31; font-size: 10px; background: linear-gradient(135deg, #f1dfd0, #e5c18b); }
.home-background-thumb.is-loading::after, .home-background-thumb.is-fallback::after { display: none; }
.home-background-thumb.is-loading img, .home-background-thumb.is-loading video { visibility: hidden; }
.home-background-thumb.is-builtin { background: radial-gradient(ellipse at 8% 12%, rgb(162 35 57 / 18%), transparent 60%), radial-gradient(ellipse at 92% 86%, rgb(207 165 76 / 22%), transparent 60%), linear-gradient(132deg, #fbfaf7, #f3e1e3 48%, #fffdf9 70%, #f0e4d5); }
.home-background-thumb.is-default { background: linear-gradient(135deg, #fbfaf7, #f1e7dc); }
.home-background-choice-label { position: absolute; bottom: 8px; left: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 5px; color: #65483b; background: rgb(255 252 248 / 88%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-background-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px #a64e47; }
.home-background-choice[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #852f31; font-size: 14px; }
.home-background-choice:focus-visible { outline: 3px solid #b96b59; outline-offset: 3px; }
.home-background-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgb(255 252 248 / 92%); color: #852f31; font-size: 20px; line-height: 1; cursor: pointer; }
.home-background-remove:hover { background: #f7e5df; color: #852f31; }
.home-background-choice-label.is-video-label { display: none; }
.home-halo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: #65483b; font-size: 13px; }
.home-halo-controls input[type="color"] { width: 36px; height: 30px; padding: 2px; border: 1px solid #decebf; border-radius: 6px; background: transparent; cursor: pointer; }
.home-halo-hex { width: 82px; min-width: 0; padding: 6px; border: 1px solid #decebf; border-radius: 6px; background: white; color: #65483b; font: 12px monospace; }
.home-halo-reset { margin-left: auto; padding: 7px 9px; border-radius: 6px; color: #852f31; background: #f3e8de; cursor: pointer; }
.home-background-position { margin-top: 12px; width: 100%; padding: 10px; border-radius: 8px; background: #852f31; color: white; cursor: pointer; }
.home-background-position-editor { position: absolute; inset: 0; z-index: 100; }
.home-background-position-editor[hidden], .home-background-position[hidden] { display: none; }
.home-background-drag-surface { position: absolute; inset: 0; cursor: grab; touch-action: none; outline: none; }
.home-background-drag-surface:active { cursor: grabbing; }
.home-background-position-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: max-content; max-width: calc(100% - 24px); padding: 10px; border-radius: 12px; background: #fffcf8; box-shadow: 0 3px 20px #0002; color: #852f31; font-size: 13px; }
.home-background-position-bar button { padding: 8px 12px; border-radius: 6px; background: #f3e8de; color: #852f31; cursor: pointer; }