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(380px,100vw);
    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[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-base/"]){filter:none}
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}
@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-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:#aaaaaa66;backdrop-filter:blur(13px)}
#global-themes:focus-visible{outline:2px solid #94a3b8;outline-offset:3px}
#schema-settings[data-view=themes]{inset-inline-end:auto;inset-inline-start:0;width:min(380px,100vw);border-inline-start:0;border-inline-end: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,.92)}
html[data-color-mode=light] #schema-settings[data-view=settings]{background:rgba(249,250,252,.94)}
html[data-color-mode=light] #schema-settings[data-view=themes]{border-inline-end-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}