html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    font-family: -apple-system,system-ui,sans-serif;
}
* {
    box-sizing: border-box;
}
#theme-stage,
#theme-stage iframe {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
#global-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    font-size: 13px;
}
.global-anchor {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 40px);
}
.global-brand {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: 2px;
    line-height: 1.5;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgb(0 0 0 / .35);
}
.global-brand svg {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .25));
}
html[data-color-mode=light] .global-brand {
    color: #2d332d;
    text-shadow: 0 1px 6px rgb(255 255 255 / .35);
}
html[data-color-mode=light] .global-brand svg {
    color: #48614c;
    filter: none;
}
[data-global-slot] > * {
    pointer-events: auto;
}
.top-left,
.bottom-left {
    inset-inline-start: max(20px,env(safe-area-inset-left));
}
.top-right,
.bottom-right {
    inset-inline-end: max(20px,env(safe-area-inset-right));
}
.top-left,
.top-center,
.top-right {
    top: max(20px,env(safe-area-inset-top));
}
.bottom-left,
.bottom-center,
.bottom-right {
    bottom: max(20px,env(safe-area-inset-bottom));
}
.top-center,
.bottom-center {
    left: 50%;
    transform: translateX(-50%);
}
#global-settings {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    transition: background-color .1s,opacity .1s;
}
#global-settings img {
    width: 33.8px;
    height: 33.8px;
    transition: transform .33s;
}
#global-settings:hover img {
    transform: rotate(20deg);
}
#global-settings[aria-expanded=true] {
    background: rgb(170 170 170 / .4);
    backdrop-filter: blur(13px);
    border-color: rgb(255 255 255 / .075);
}
#global-settings[aria-expanded=true] img {
    transform: rotate(60deg);
}
#global-settings:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}
#schema-settings {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 151;
    width: min(100vw,clamp(300px,44vw,380px));
    max-width: calc(100vw - 48px);
    max-height: 100dvh;
    overscroll-behavior: contain;
    overflow: auto;
    padding: 24px 20px 100px;
    background: rgba(0,0,0,.1);
    border-inline-start:1px solid #ffffff3d;
    -webkit-backdrop-filter:blur(10px) saturate(150%);
    backdrop-filter:blur(10px) saturate(150%);
    box-shadow:inset 0 1px 0 #ffffff55,0 16px 50px #0004;
    color: #fff;
    font: 13px/1.5 -apple-system,system-ui,sans-serif;
}
#schema-settings[hidden] {
    display: none;
}
#schema-settings h2 {
    margin: 0 0 24px;
    font-size: 18px;
}
#schema-settings h3 {
    margin: 24px 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: #aaa;
}
.settings-group {
    border-radius: 20px;
    background: #222;
    padding: 4px 14px;
}
.settings-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    border-bottom: 1px solid #333;
}
.settings-field:last-child {
    border: 0;
}
.settings-field input,
.settings-field select {
    min-width: 0;
    max-width: 50%;
    color: inherit;
    background: #393939;
    border: 0;
    border-radius: 10px;
    padding: 6px 10px;
}
#shell-error {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    color: white;
    background: #222;
    border-radius: 10px;
    padding: 12px 18px;
}
@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        transition: none!important;
        animation: none!important;
    }
}
#settings-backdrop{position:fixed;inset:0;z-index:150;background:transparent}
#settings-backdrop[data-theme-list=true]{pointer-events:none}
#settings-backdrop[hidden],#settings-resize[hidden]{display:none}
#settings-resize{position:fixed;top:50%;width:18px;height:76px;transform:translate(-50%,-50%);z-index:152;cursor:ew-resize;touch-action:none;display:grid;place-items:center}
#settings-resize::after{content:'';width:4px;height:48px;border-radius:99px;background:#94a3b8;box-shadow:0 0 0 3px rgb(127 127 127 / .12)}
#settings-resize:focus-visible{outline:2px solid #465fff;border-radius:8px}
/* This full-content theme uses its original light/dark palette, including the search UI. */
html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-inspiration/"]){filter:none}
html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-memoir/"]){filter:none}
#theme-stage:has(iframe[src*="/packages/shiyu-memoir/"][data-theme-modal-open=true]){z-index:160}
html[data-color-mode=light] #schema-settings{background:rgba(255,255,255,.07);color:#182230;border-inline-start-color:#ffffff52;box-shadow:inset 0 1px 0 #ffffff85,0 16px 50px #0002}
html[data-color-mode=light] #schema-settings h3{color:#667085}
html[data-color-mode=light] .settings-group{background:#f2f4f7}
html[data-color-mode=light] .settings-field{border-color:#e4e7ec}
html[data-color-mode=light] .settings-field input,html[data-color-mode=light] .settings-field select{background:#f2f4f7;color:#182230}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-flip/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-rain/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-emergence/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-earth/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-cosmos/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-evolution/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-starlink/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-paper/"]){filter:none}

html[data-color-mode=light] #theme-stage:has(iframe[src*="/packages/shiyu-forest/"]){filter:none}

/* Homepage framework settings; unrelated to desktop view settings. */
.homepage-settings-empty{display:grid;justify-items:center;align-content:center;min-height:240px;color:#9098a5;text-align:center}
.homepage-settings-empty svg{width:40px;height:40px;opacity:.7}
.homepage-settings-skeleton{display:grid;gap:12px;margin:20px 0}
.homepage-settings-skeleton i{display:block;height:48px;border-radius:12px;background:linear-gradient(100deg,#8882 25%,#8884 45%,#8882 65%);background-size:240% 100%;animation:homepage-settings-load 1.5s infinite}
@keyframes homepage-settings-load{to{background-position:-240% 0}}
.homepage-settings-error{display:block;width:100%;border:1px solid #8885;border-radius:12px;padding:12px;background:transparent;color:inherit;cursor:pointer}
.homepage-theme-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:18px}
.homepage-theme-card{position:relative;display:block;min-width:0;border:1px solid #8883;border-radius:14px;padding:7px;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}
.homepage-theme-card[aria-pressed=true]{border-color:#8b9eff;box-shadow:0 0 0 1px #8b9eff}
.homepage-themes-close{display:grid;place-items:center;flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:inherit;font:24px/1 system-ui;cursor:pointer}.homepage-themes-close:hover{background:#8882}.homepage-themes-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
#schema-settings[data-view=themes] .homepage-settings-heading{position:sticky;top:0;z-index:3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .homepage-theme-card{transition:transform 220ms ease,filter 220ms ease;transform:perspective(800px) rotateX(0deg) rotateY(0deg)}
 .homepage-theme-card:hover{z-index:1;transform:perspective(800px) translateY(-6px) rotateX(var(--theme-tilt-x,0deg)) rotateY(var(--theme-tilt-y,0deg)) scale(1.05);filter:drop-shadow(0 12px 18px #0004)}
}
.homepage-theme-card>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 3px 3px}
.homepage-theme-media{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#8882}
.homepage-theme-media img{display:block;width:100%;height:100%;object-fit:cover;opacity:0}
.homepage-theme-media[data-ready=true] img{opacity:1}
.homepage-theme-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.homepage-theme-media[data-video-playing=true] .homepage-theme-video{opacity:1}
.homepage-theme-media[data-video-loading=true]::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#8881,#8883,#8881);background-size:240% 100%;animation:homepage-settings-load 1.5s infinite;pointer-events:none}
.homepage-video-retry{position:absolute;inset:auto 4px 4px;padding:4px 7px;border:0;border-radius:6px;background:#25282de6;color:white;font:11px system-ui;cursor:pointer}
.homepage-video-retry[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.homepage-theme-media[data-video-loading=true]::after{animation:none}}
.homepage-image-retry{position:absolute;inset:0;border:0;background:#8882;color:inherit;font:inherit;cursor:pointer}
.homepage-image-retry[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.homepage-settings-skeleton i{animation:none}}
#theme-stage.homepage-loading{background:linear-gradient(110deg,#8881,#8883,#8881);background-size:240% 100%;animation:homepage-settings-load 1.5s infinite}
#shell-error button{margin-inline-start:12px;padding:5px 10px;border:1px solid #8887;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
@media(prefers-reduced-motion:reduce){#theme-stage.homepage-loading{animation:none}}

/* Photographic card artwork must never inherit the generic negative-image filter. */
html[data-color-mode=light] #theme-stage:has(iframe[src*="theme=reactbits-lanyard"]){filter:none}

/* Both homepage panels share this single framework surface. */
#global-themes{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer;pointer-events:auto}
#global-themes svg{width:30px;height:30px}#global-themes:hover,#global-themes[aria-expanded=true]{background:transparent;backdrop-filter:none}
#global-themes:focus-visible{outline:2px solid #94a3b8;outline-offset:3px}
#schema-settings[data-view=themes]{inset-inline-end:0;inset-inline-start:auto;border-inline-end:0;border-inline-start:1px solid #ffffff3d}
/* Keep theme artwork from obscuring the settings text; controls retain their own styling. */
#schema-settings[data-view=settings]{background:rgba(24,26,32,.38);-webkit-backdrop-filter:blur(32px) saturate(150%);backdrop-filter:blur(32px) saturate(150%)}
html[data-color-mode=light] #schema-settings[data-view=settings]{background:rgba(249,250,252,.42)}
html[data-color-mode=light] #schema-settings[data-view=themes]{border-inline-start-color:#ffffff52}
.homepage-settings-heading{font:600 16px/1.5 -apple-system,system-ui,sans-serif;margin:0 0 20px}


/* Shared scrolling for both homepage panels; no native arrow buttons. */
#schema-settings{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.3) transparent}
@supports selector(::-webkit-scrollbar){#schema-settings{scrollbar-width:auto;scrollbar-color:auto}#schema-settings::-webkit-scrollbar{width:4px;height:4px}#schema-settings::-webkit-scrollbar-track,#schema-settings::-webkit-scrollbar-corner{background:transparent;border:0}#schema-settings::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border:0;border-radius:99px}#schema-settings::-webkit-scrollbar-button{display:none;width:0;height:0}}

#schema-settings{container-type:inline-size;container-name:homepage-panel}
@container homepage-panel (min-width:400px){.homepage-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container homepage-panel (min-width:640px){.homepage-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.homepage-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.homepage-settings-reset{flex-shrink:0;border:0;border-radius:8px;padding:6px 8px;background:transparent;color:inherit;font:400 12px system-ui;cursor:pointer;opacity:.7}.homepage-settings-reset:hover{background:#8882;opacity:1}.homepage-settings-reset:disabled{opacity:.4;cursor:wait}

/* The two homepage side panels share sizing; do not scale text or hit targets. */
@media(max-width:600px),(max-height:650px){#schema-settings{padding:16px 14px calc(72px + env(safe-area-inset-bottom))}#schema-settings h2{margin-bottom:16px}}
@media(max-width:480px){#schema-settings{max-width:100vw}}
@media(max-width:320px){#schema-settings{width:100vw}}
@container homepage-panel (max-width:300px){.settings-field{flex-wrap:wrap;gap:8px;padding-block:8px}.settings-field label{overflow-wrap:anywhere}.homepage-settings-heading{flex-wrap:wrap;gap:8px}.settings-group{padding-inline:10px}}

/* Homepage content controls sit immediately before the existing account slot. */
#homepage-content-toggle{pointer-events:auto;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:transparent;color:#aaa;cursor:pointer}
#homepage-content-toggle svg{width:25px;height:25px}#homepage-content-toggle .content-eye-slash{display:none}#homepage-content-toggle[aria-pressed=true] .content-eye-slash{display:block}
html[data-home-content-hidden] .hp-information-stage{visibility:hidden;pointer-events:none}html[data-home-content-hidden] .hp-information-stage *{pointer-events:none!important}
#homepage-content-toggle:focus-visible{outline:2px solid #7797d2;outline-offset:3px}

/* Same visible size and ink for the two homepage utility icons. */
#global-settings,#homepage-content-toggle{color:#fff}
html[data-color-mode=light] #global-settings,html[data-color-mode=light] #homepage-content-toggle{color:#303630}
#global-settings .homepage-settings-icon,#homepage-content-toggle>svg{width:34px;height:34px;opacity:.65;transition:opacity .22s ease,transform .32s ease;transform-origin:center}
#global-settings:hover .homepage-settings-icon,#homepage-content-toggle:hover>svg{opacity:1}
#global-settings:hover .homepage-settings-icon{transform:rotate(20deg)}
#global-settings[aria-expanded=true] .homepage-settings-icon{transform:rotate(60deg)}
#homepage-content-toggle:hover>svg{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){#global-settings .homepage-settings-icon,#homepage-content-toggle>svg{transition:none;transform:none!important}}

#global-themes{width:52px;height:52px;color:#fff}html[data-color-mode=light] #global-themes{color:#303630}#global-themes>svg{width:34px;height:34px;opacity:.65;transition:opacity .22s ease,transform .32s ease}#global-themes:hover>svg{opacity:1;transform:scale(1.08)}@media(prefers-reduced-motion:reduce){#global-themes>svg{transition:none;transform:none}}
/* Compact homepage chrome shares one horizontal centerline. */
#homepage-scene #global-layer>.global-anchor:is(.top-left,.top-center,.top-right){height:44px;align-items:center}
#homepage-scene #global-settings,#homepage-scene #homepage-content-toggle,#homepage-scene #global-themes{width:44px;height:44px;flex:none}
#homepage-scene #global-settings .homepage-settings-icon,#homepage-scene #homepage-content-toggle>svg,#homepage-scene #global-themes>svg{width:26px;height:26px}
#homepage-scene [data-global-slot="top-right"]{width:44px;min-height:44px;align-content:center}
#homepage-scene .homepage-account-avatar{width:30px;height:30px}
#homepage-scene .shell-world-entry{min-height:34px}
#schema-settings{border-start-start-radius:20px;border-end-start-radius:20px}
#schema-settings .homepage-settings-heading{cursor:grab;touch-action:none}#schema-settings .homepage-settings-heading:active{cursor:grabbing}#schema-settings[style*="left:"]{border-radius:20px}
#settings-resize{position:fixed;width:14px;transform:translateX(-50%);z-index:152;cursor:ew-resize;touch-action:none;display:grid;place-items:center}
#schema-settings[data-dock=left]{border-radius:0 20px 20px 0!important;border-inline-start:0;border-inline-end:1px solid #ffffff30}#schema-settings[data-dock=right]{border-radius:20px 0 0 20px!important}#schema-settings .homepage-settings-heading{cursor:default;justify-content:flex-start;gap:8px}#schema-settings .homepage-settings-grip{display:grid;place-items:center;flex:none;border:0;background:transparent;color:inherit;opacity:.4;padding:4px;cursor:grab;touch-action:none}#schema-settings .homepage-settings-grip:active{cursor:grabbing}#schema-settings .homepage-settings-grip:focus-visible{outline:2px solid #7797d2;opacity:.8}.homepage-settings-heading .homepage-themes-close{margin-inline-start:auto}
#schema-settings .homepage-settings-heading{position:relative;padding-top:24px}
#schema-settings .homepage-settings-grip{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:24px;padding:0}
#schema-settings .homepage-settings-grip svg{transform:rotate(90deg)}
#schema-settings .homepage-settings-heading{padding-top:0;min-height:32px}
#schema-settings .homepage-settings-grip{top:50%;transform:translate(-50%,-50%)}

html #homepage-scene .global-brand,html #homepage-scene .global-brand>svg{color:var(--homepage-brand-primary,#292b30);text-shadow:none;filter:none}html[data-home-brand-ink=light] #homepage-scene .global-brand,html[data-home-brand-ink=light] #homepage-scene .global-brand>svg{color:#fff;text-shadow:0 1px 4px #0003}
.homepage-search-shortcut-hint{font:400 12px/1.4 system-ui,sans-serif;color:inherit;opacity:.55;white-space:nowrap;pointer-events:none}#global-layer>.bottom-right{color:#fff;right:max(27px,env(safe-area-inset-right))}html[data-color-mode=light] #global-layer>.bottom-right{color:#303630}@media(max-width:480px){.homepage-search-shortcut-hint{font-size:10px}}
#global-layer .homepage-search-shortcut-hint{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 0;font:400 11px/1.4 system-ui,sans-serif;color:inherit;opacity:.6;pointer-events:auto;cursor:pointer}#global-layer .homepage-search-shortcut-hint kbd{font:400 10px system-ui,sans-serif;border:1px solid currentColor;border-radius:4px;padding:2px 5px;margin-inline-start:5px;opacity:.7}#global-layer .homepage-search-shortcut-hint:hover{opacity:.9}#global-layer .homepage-search-shortcut-hint:focus-visible{outline:2px solid #7797d2;outline-offset:5px;border-radius:4px}

/* This photographic wallpaper theme preserves source image colors. */
html[data-color-mode=light] #theme-stage:has(iframe[src*="theme=reactbits-infinite-menu"]){filter:none}
/* Theme chrome follows its rendered backdrop, independently of the selected day/night mode. */
html #homepage-scene :is(#global-settings,#homepage-content-toggle,#global-themes){color:var(--homepage-chrome-ink,#f9fafb)}
#schema-settings[data-view=themes] .homepage-settings-heading{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--homepage-chrome-ink,inherit)}
#schema-settings[data-view=themes] .homepage-settings-heading :is(button,svg){color:inherit}
html #theme-stage:has(iframe[src*="codrops-infinite-canvas"]),html #theme-stage>iframe[src*="codrops-infinite-canvas"]{filter:none!important}