/* A quieter shell, with the experiments close to the top. */
:root {
  --bg:#03060c; --panel:#0d131df0; --raised:#17212e; --hover:#202d3e;
  --border:#283444; --text:#edf1f7; --muted:#b0bdcf; --subtle:#91a1b7;
  --accent-text:#e9b86a; --radius:10px;
}
:root[data-theme="light"] {
  --bg:#f4f6fa; --panel:#ffffffed; --raised:#e8edf4; --hover:#dce4ef;
  --border:#c8d1dd; --text:#172333; --muted:#46556b; --subtle:#58697e;
  --green:#326744;
}
:root[data-theme="black"] {
  --bg:#000000; --panel:#000000; --raised:#111111; --hover:#202020;
  --border:#333333; --text:#f5f5f5; --muted:#bfbfbf; --subtle:#a3a3a3;
}
body { background:transparent; }
#starfield { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
html { isolation:isolate; }
.app { position:relative; }
.rail { background:color-mix(in srgb, var(--bg) 93%, transparent); }
.topbar { background:color-mix(in srgb, var(--bg) 85%, transparent); min-height:64px; }
.brand-mark { border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.eyebrow,.card-open,.nav-item.active,.guide-block h2,.breadcrumb a:hover,.brand-mark { color:var(--accent-text); }
.nav-item.active, .filter[aria-pressed="true"] { color:var(--accent-text); background:color-mix(in srgb, var(--accent) 10%, var(--bg)); border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); }
button.primary:hover { background:var(--accent); border-color:var(--accent); filter:brightness(1.08); }
::selection { background:var(--accent); color:var(--accent-ink); }
input,progress { accent-color:var(--accent); }
:is(button,a,input,select,summary):focus-visible { outline-color:var(--accent-text); }
.favorite { background:var(--bg); color:var(--text); border-color:var(--border); }
.favorite[aria-pressed="true"] { color:var(--accent-text); border-color:var(--accent-text); }
.loading { background:var(--bg); }
.explore { padding-top:25px; }
.intro { align-items:center; margin-bottom:20px; gap:18px; }
.intro .eyebrow { display:none; }
.intro h1 { font-size:clamp(32px,3.4vw,47px); margin:0 0 7px; letter-spacing:-.045em; }
.intro-copy { font-size:14px; line-height:1.6; max-width:none; }
.continue-button { border:0!important; background:transparent!important; color:var(--accent-text)!important; padding:8px 0 8px 16px; }
.continue-button small { text-transform:none; letter-spacing:0; color:var(--muted); }
.featured { position:relative; grid-template-columns:.85fr 1.15fr; min-height:172px; margin:20px 0 22px; border-radius:10px; }
.featured-content { padding:20px 24px; }
.featured h2 { margin:5px 0 8px; font-size:25px; }
.featured p:not(.eyebrow) { margin:0 0 14px; max-width:340px; line-height:1.55; }
.featured .primary { padding:8px 12px; font-size:12px; }
.featured-art { min-height:185px; background:#071018; display:grid; place-items:center; }
.featured-art iframe { border:0; width:100%; height:100%; position:absolute; inset:0; pointer-events:none; }
.preview-motion { position:absolute; bottom:10px; right:10px; z-index:1; font-size:10px; padding:5px 9px; background:#071018e8; border-color:#354556; color:#d7e2ef; }
.library-tools { margin:20px 0 16px; }
.filters { display:none; }
.world-card { background:var(--panel); }
.world-card:hover { border-color:var(--accent-text); }
.preview { height:148px; }
.topbar-actions { display:flex; align-items:center; gap:22px; }
.appearance { position:relative; z-index:50; }
.appearance summary { display:flex; gap:9px; align-items:center; cursor:pointer; list-style:none; padding:7px 11px; font-size:12px; border:1px solid var(--border); border-radius:7px; background:var(--panel); }
.appearance summary::-webkit-details-marker { display:none; }
.appearance[open] summary { border-color:var(--accent-text); }
.appearance-dot { width:11px; height:11px; border-radius:50%; background:var(--accent); border:1px solid var(--border); }
.appearance-panel { position:absolute; right:0; top:calc(100% + 12px); width:300px; padding:18px; background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 60px #0005; }
.appearance-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:15px; }
.appearance-heading button { padding:0; width:30px; height:30px; font-size:22px; background:transparent; }
.appearance fieldset { border:0; padding:0; margin:0 0 18px; min-width:0; }
.appearance fieldset:last-child { margin-bottom:0; }
.appearance legend { font-size:12px; font-weight:600; padding:0; margin-bottom:9px; }
.theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.theme-options label { display:flex; align-items:center; gap:5px; justify-content:center; flex:1; padding:9px 5px; border:1px solid var(--border); border-radius:6px; font-size:12px; cursor:pointer; }
.theme-options label:has(:checked) { border-color:var(--accent-text); background:color-mix(in srgb,var(--accent) 10%,var(--bg)); }
.theme-options input { margin:0; }
.accent-options { display:flex; gap:10px; margin-bottom:13px; }
.accent-options button { background:var(--swatch); border:3px solid var(--bg); outline:1px solid var(--border); padding:0; width:36px; height:36px; border-radius:50%; }
.accent-options button[aria-pressed="true"] { outline:2px solid var(--text); }
.custom-accent,.motion-option,.density-label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.custom-accent input { width:43px; height:30px; padding:2px; border:1px solid var(--border); background:var(--raised); cursor:pointer; border-radius:5px; }
.motion-option { margin-bottom:15px; }
.motion-option input { width:17px; height:17px; }
#starDensity { width:100%; margin:8px 0; }
#motionNote { font-size:11px; color:var(--subtle); margin:6px 0 0; line-height:1.5; }
@media (max-width:1100px) { .topbar-note { display:none; } }
@media (max-width:860px) {
  .filters { display:flex; flex-wrap:nowrap; overflow-x:auto; padding:3px 3px 9px; gap:7px; margin:0 0 12px; }
  .filter { flex:0 0 auto; }
  .explore { padding-top:22px; }
  .featured { grid-template-columns:1fr 1fr; }
  .featured-content { padding:18px; }
}
@media (max-width:580px) {
  .rail { padding:12px 18px; }
  .brand small { font-size:9px; }
  .topbar { padding:9px 18px; min-height:50px; gap:8px; }
  .topbar-actions { gap:0; }
  .appearance-panel { width:min(300px,calc(100vw - 36px)); }
  .explore { padding:20px 18px 36px; }
  .intro { display:block; margin-bottom:16px; }
  .intro h1 { font-size:34px; }
  .intro-copy { font-size:13px; max-width:325px; }
  .continue-button { margin:8px 0 0; padding:0; }
  .continue-button small { display:none; }
  .featured { grid-template-columns:1.12fr 1fr; min-height:167px; margin:16px 0 20px; }
  .featured-art { order:0; min-height:167px; }
  .featured-art iframe { width:210%; left:-35%; }
  .featured-content { padding:14px; }
  .featured .eyebrow { font-size:9px; }
  .featured h2 { font-size:20px; }
  .featured p:not(.eyebrow) { font-size:11px; line-height:1.45; margin-bottom:10px; }
  .featured .primary { font-size:11px; padding:7px 9px; }
  .preview-motion { font-size:9px; padding:5px 6px; right:6px; bottom:6px; }
  .library-tools { margin:18px 0 12px; gap:10px; }
  .library-tools h2 { font-size:18px; }
  .library-tools p { font-size:11px; }
  .search input { min-height:40px; font-size:12px; }
  .search svg { top:12px; }
  .preview { height:165px; }
}

/* Live collection carousel and compact directory. */
.showcase-heading,.showcase-controls {display:flex;align-items:center;justify-content:space-between;gap:10px}
.showcase-heading .eyebrow {margin:0}
.showcase-controls button {padding:6px 10px;font-size:12px}
#examplePosition {font-size:11px;color:var(--muted);white-space:nowrap}
#featuredTrack {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;border-radius:10px;overscroll-behavior-x:contain}
#featuredTrack .featured {flex:0 0 100%;scroll-snap-align:start;margin:10px 0 0;min-width:0;box-sizing:border-box}
#featuredTrack .featured-art {position:relative;overflow:hidden}
#featuredTrack iframe {width:100%;left:0}
#exampleDots {display:flex;justify-content:center;gap:8px;padding:10px}
#exampleDots button {width:24px;height:6px;padding:0;border:0;border-radius:9px;background:var(--border)}
#exampleDots button[aria-pressed=true] {background:var(--accent)}
.nav-collection {margin:6px 0}
.nav-collection summary {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px;cursor:pointer;font-size:12px;color:var(--text);list-style:none;border:1px solid var(--border);background:var(--panel);border-radius:7px}
.nav-collection summary::-webkit-details-marker {display:none}
.nav-collection summary:hover {background:var(--hover);color:var(--text)}
.collection-arrow {width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav-collection[open] .collection-arrow {transform:rotate(180deg)}
.nav-collection:not([open]) > .collection-worlds {display:none}
.nav-collection[open] > .collection-worlds {display:block}
.collection-worlds {padding:0 0 8px 12px;margin:0 10px;border-left:1px solid var(--border)}
.collection-worlds a {display:block;padding:8px 5px;font-size:12px;color:var(--muted);text-decoration:none}
.collection-worlds a:hover {color:var(--accent-text)}
@media(max-width:580px) {.showcase-heading {align-items:flex-start;flex-direction:column;gap:8px}.showcase-controls {width:100%}#featuredTrack .featured {grid-template-columns:1fr;min-height:360px}#featuredTrack .featured-art {height:200px;order:0}.featured-content {order:1}}
@media(prefers-reduced-motion:reduce) {.collection-arrow {transition:none}}

#featuredTrack .featured {min-height:260px}
#featuredTrack .featured-content {align-self:center}
#featuredTrack .featured-art {min-height:260px}
.nav-collection a[aria-current=page] {color:var(--accent-text);font-weight:600}
@media(max-width:580px){#featuredTrack .featured-art {min-height:200px}#featuredTrack .featured {min-height:360px}}

/* Keep the toggle accessible while reclaiming space for the experiment. */
.sidebar-toggle { display:flex; align-items:center; justify-content:center; gap:8px; min-height:36px; margin-bottom:14px; width:100%; color:var(--muted); background:transparent; }
.sidebar-toggle>span:first-child { font-size:24px; line-height:1; }
.sidebar-toggle-label { font-size:12px; }
@media(min-width:861px) {
  :root[data-sidebar-collapsed="true"] { --rail-width:56px; }
  :root[data-sidebar-collapsed="true"] .rail { padding:16px 8px; }
  :root[data-sidebar-collapsed="true"] .rail>:not(.sidebar-toggle) { display:none; }
  :root[data-sidebar-collapsed="true"] .sidebar-toggle-label { display:none; }
}
@media(max-width:860px) { .sidebar-toggle { display:none; } }

/* Soft accent actions match the selected navigation tabs. */
#showMoreExperiments, #featuredTrack .feature-launch {
  color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
}
#showMoreExperiments:hover, #featuredTrack .feature-launch:hover {
  color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 16%,var(--bg));
  border-color:color-mix(in srgb,var(--accent) 50%,var(--border));
}

.settings-menu { position:relative; }
.settings-menu>summary { display:grid; place-items:center; width:44px; height:44px; list-style:none; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--accent-text); }
.settings-menu>summary::-webkit-details-marker { display:none; }
.settings-menu[open]>summary { border-color:var(--accent-text); }
.settings-content { position:absolute; inset-inline-end:0; top:calc(100% + 8px); width:min(340px,calc(100vw - 36px)); max-height:calc(100dvh - 160px); overflow-y:auto; padding:14px; background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 60px #0005; z-index:100; }
.settings-heading { margin:0 0 12px; font-size:13px; color:var(--muted); }
.settings-content .appearance, .settings-content .locale-control { margin:0 0 8px; width:100%; }
.settings-content .appearance-panel, .settings-content .locale-menu { position:static; width:100%; max-width:100%; margin-top:8px; box-shadow:none; padding:12px; }
.settings-content .appearance summary, .settings-content .locale-control>summary { min-height:44px; }

.topbar>.topbar-actions { margin-inline-start:auto; }

/* The brand is the persistent home link, next to the page settings. */
.topbar>.brand { margin:0; color:var(--text); text-decoration:none; flex-shrink:1; min-width:0; }
.topbar>.brand strong { display:block; font-size:18px; }
.topbar>.brand small { font-size:9px; }
.topbar>.brand .brand-mark { flex-shrink:0; }
@media(max-width:860px) {
  .rail { display:none; }
  .topbar { flex-wrap:nowrap; }
  .topbar>.brand { gap:9px; }
  .topbar>.brand strong { font-size:16px; }
  .topbar>.brand small { font-size:8px; }
  .topbar>.topbar-actions { flex-shrink:0; }
}

/* PSL identity: a single mark without a repeated subtitle. */
.topbar > .brand .psl-logo { display:block; width:144px; height:auto; max-width:100%; }