:root {
  color-scheme: light;
  --bg: #f3f3f1;
  --ink: #202423;
  --panel: #252928;
  --panel-2: #2d3130;
  --muted: rgba(32,36,35,.58);
  --line: rgba(50,54,53,.13);
  --blue: #5d8ee8;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
}

* { box-sizing: border-box; }
*[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, a { font: inherit; color: inherit; }
button { border: 0; padding: 0; background: none; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: var(--bg);
}

.webgl, .webgl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.webgl canvas { cursor: grab; }
.stage.is-dragging .webgl canvas { cursor: grabbing; }

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 53%, rgba(255,255,255,.04) 0 38%, rgba(0,0,0,.025) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.018), transparent 15%, transparent 82%, rgba(0,0,0,.025));
}

.chrome { position: absolute; z-index: 8; }
.top-left-cluster { top: 8px; left: 8px; display: flex; align-items: center; gap: 10px; }
.logo-tile,
.primary-pill,
.action-btn,
.brand-dock,
.filter-pill {
  background: rgba(32,36,35,.96);
  color: #fff;
  box-shadow: 0 13px 25px rgba(23,27,26,.19), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.logo-tile {
  width: 78px; height: 55px; border-radius: 22px; display: grid; place-items: center; text-decoration: none;
}
.logo-tile svg,
.logo-tile img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0); }
html[data-theme="dark"] .logo-tile img {
  filter: none;
}

.primary-pill {
  height: 55px; border-radius: 25px; padding: 5px 7px; display: flex; align-items: stretch; gap: 2px;
}
.primary-item {
  color: rgba(255,255,255,.50); min-width: 78px; padding: 0 11px; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; cursor: pointer; border-radius: 19px; text-decoration: none; transition: color .2s ease, background .2s ease;
}
.primary-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.primary-item.is-active, .primary-item:hover { color: #fff; }
.primary-item.is-active { background: rgba(255,255,255,.035); }

.top-actions { top: 16px; right: 17px; display: flex; gap: 10px; }
.action-btn {
  height: 52px; border-radius: 19px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease;
}
.action-btn:hover { transform: translateY(-1px); }
.action-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.action-btn.project { min-width: 168px; background: rgba(255,204,0,.97); color: #111; box-shadow: 0 11px 24px rgba(255,204,0,.28), inset 0 1px 0 rgba(255,255,255,.35); }

.brand-dock {
  left: 8px; top: 32.1%; width: 70px; height: 354px; border-radius: 23px; padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 7px; overflow: visible;
}
.dock-item {
  flex: 0 0 47px; width: 47px; border-radius: 11px; display: grid; place-items: center; background: #1b1e1d; color: rgba(255,255,255,.76); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: transform .18s ease, filter .18s ease;
}
.dock-item:hover { transform: translateX(2px); filter: brightness(1.07); }
.dock-item.is-active { color: #55f4ce; background: #07100e; }
.dock-item.dock-yellow { background: #ffc718; color: #202020; }
.dock-item.dock-purple { background: #121015; color: #8857ff; }
.dock-item.dock-rust { background: #994328; color: #7bc1bb; }
.dock-glyph { font-weight: 800; line-height: 1; font-size: 23px; letter-spacing: -.08em; }
.glyph-a { font-size: 21px; transform: skew(-10deg); }
.glyph-flower { font-size: 29px; color: rgba(255,255,255,.16); }
.glyph-z { font-size: 29px; font-weight: 500; }
.glyph-u { font-size: 25px; border-bottom: 5px solid currentColor; padding: 0 3px 2px; }
.glyph-wave { font-size: 29px; transform: rotate(-7deg); }
.glyph-lines { font-size: 29px; transform: skew(-16deg); color: rgba(255,255,255,.42); }
.dock-more {
  position: absolute; left: 78px; top: 43.5%; width: 24px; height: 24px; border-radius: 999px; background: rgba(32,36,35,.95); color: rgba(255,255,255,.75); display: grid; place-items: center;
  box-shadow: 0 5px 13px rgba(0,0,0,.18); cursor: pointer;
}
.dock-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.filter-pill {
  left: 50%; bottom: 47px; transform: translateX(-50%); min-height: 61px; border-radius: 24px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; gap: 2px;
}
.filter-item {
  height: 47px; padding: 0 12px; border-radius: 17px; color: rgba(255,255,255,.38); display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.filter-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.filter-item.is-active, .filter-item:hover { color: #fff; }
.filter-item.is-active { background: rgba(255,255,255,.025); }

.zoom-reset, .statusbar {
  position: absolute; z-index: 7; bottom: 9px; color: rgba(26,29,28,.35); font-size: 9px; letter-spacing: .02em;
}
.zoom-reset { right: 12px; cursor: pointer; opacity: 0; pointer-events: none; }
.statusbar { left: 12px; opacity: 0; }

.site-footer {
  left: 17px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(26, 29, 28, 0.45);
  pointer-events: auto;
}
.site-footer p { margin: 0; }
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover { color: var(--ink); }

.drawer { position: absolute; z-index: 30; inset: 0; pointer-events: none; visibility: hidden; }
.drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(24,27,26,.20); opacity: 0; transition: opacity .32s ease; backdrop-filter: blur(4px); }
.drawer-sheet {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(550px, calc(100vw - 20px)); padding: 60px 42px 42px; border-radius: 27px;
  background: rgba(31,35,34,.96); color: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.24); backdrop-filter: blur(26px); transform: translateX(calc(100% + 16px)); transition: transform .42s cubic-bezier(.2,.8,.2,1); overflow: auto;
}
.drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
.drawer[aria-hidden="false"] .drawer-sheet { transform: translateX(0); }
.drawer-close { position: absolute; right: 24px; top: 24px; font-size: 11px; color: rgba(255,255,255,.62); cursor: pointer; }
.drawer-content h2 { margin: 0 0 18px; font-size: clamp(36px,4vw,62px); font-weight: 520; line-height: .98; letter-spacing: -.045em; }
.drawer-content p { margin: 0; max-width: 45ch; color: rgba(255,255,255,.62); line-height: 1.55; font-size: 14px; }
.drawer-grid { margin-top: 45px; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.09); }
.drawer-stat { background: #202423; padding: 22px; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
.drawer-stat b { font-size: 28px; font-weight: 500; }
.drawer-stat span { font-size: 10px; color: rgba(255,255,255,.46); }
.case-list { margin-top: 42px; border-top: 1px solid rgba(255,255,255,.12); }
.case-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.case-row span:first-child { font-size: 14px; }.case-row span:last-child { font-size: 10px; color: rgba(255,255,255,.46); }



.case-dialog { position:absolute; inset:0; z-index:45; visibility:hidden; pointer-events:none; }
.case-dialog[aria-hidden="false"] { visibility:visible; pointer-events:auto; }
.case-dialog-backdrop { position:absolute; inset:0; background:rgba(23,26,25,.28); opacity:0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:opacity .28s ease; }
.case-dialog-panel { position:absolute; left:50%; top:50%; width:min(1060px,calc(100vw - 44px)); height:min(660px,calc(100vh - 54px)); transform:translate(-50%,-47%) scale(.975); opacity:0; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr); overflow:hidden; border-radius:28px; background:#f7f7f4; color:#202423; box-shadow:0 35px 100px rgba(0,0,0,.27), inset 0 0 0 1px rgba(25,28,27,.08); transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .28s ease; }
.case-dialog[aria-hidden="false"] .case-dialog-backdrop { opacity:1; }
.case-dialog[aria-hidden="false"] .case-dialog-panel { opacity:1; transform:translate(-50%,-50%) scale(1); }
.case-dialog-media { min-width:0; position:relative; overflow:hidden; background:#111; box-shadow:inset -1px 0 rgba(0,0,0,.08); }
.case-dialog-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; user-select:none; -webkit-user-drag:none; }
.case-dialog-copy { position:relative; min-width:0; padding:44px 40px 32px; display:flex; flex-direction:column; }
.case-dialog-close { position:absolute; z-index:2; top:18px; right:18px; width:38px; height:38px; border-radius:13px; display:grid; place-items:center; cursor:pointer; background:rgba(32,36,35,.94); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.case-dialog-close svg { width:18px; height:18px; }
.case-dialog-kicker { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-right:45px; color:rgba(32,36,35,.48); font-size:11px; }
.case-dialog-kicker span:first-child { height:26px; padding:0 10px; border:1px solid rgba(32,36,35,.25); border-radius:999px; display:inline-flex; align-items:center; font-style:italic; color:#252928; }
.case-dialog-copy h2 { margin:34px 0 18px; font-size:clamp(44px,5vw,76px); line-height:.91; letter-spacing:-.055em; font-weight:540; }
.case-dialog-copy h2.is-long { font-size:clamp(28px,3.1vw,42px); line-height:.98; letter-spacing:-.04em; }
.case-dialog-copy > p { margin:0; max-width:39ch; color:rgba(32,36,35,.60); font-size:14px; line-height:1.55; }
.case-dialog-facts { margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(32,36,35,.12); }
.case-dialog-facts div { padding:14px 12px 14px 0; border-bottom:1px solid rgba(32,36,35,.12); min-width:0; }
.case-dialog-facts div:last-child { grid-column:1/-1; }
.case-dialog-facts dt { margin:0 0 6px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:rgba(32,36,35,.38); }
.case-dialog-facts dd { margin:0; font-size:12px; line-height:1.35; color:#292d2c; }
.case-dialog-nav { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.case-nav-button { height:52px; border-radius:17px; padding:0 15px; display:flex; align-items:center; gap:9px; cursor:pointer; background:#e9e9e5; color:#252928; font-size:12px; transition:transform .16s ease,background .16s ease; }
.case-nav-button:hover { transform:translateY(-1px); background:#e2e2de; }
.case-nav-button.is-next { justify-content:flex-end; background:#252928; color:#fff; }
.case-nav-button.is-next:hover { background:#171a19; }
.case-nav-button svg { width:17px; height:17px; }

@media (max-width: 800px) {
  .top-left-cluster { top: 7px; left: 7px; gap: 7px; }
  .logo-tile { width: 55px; height: 48px; border-radius: 18px; }
  .logo-tile svg,
  .logo-tile img { width: 24px; height: 24px; }
  .primary-pill { height: 48px; border-radius: 20px; padding: 4px; }
  .primary-item { min-width: 61px; padding: 0 8px; font-size: 12px; gap: 5px; }
  .primary-item svg { width: 15px; height: 15px; }
  .top-actions { top: 7px; right: 7px; gap: 7px; }
  .action-btn { height: 48px; border-radius: 18px; padding: 0 13px; min-width: 48px !important; }
  .action-btn span { display: none; }
  .action-btn svg { width: 20px; height: 20px; }
  .brand-dock { display: none; }
  .site-footer { display: none; }
  .filter-pill { bottom: max(47px, calc(env(safe-area-inset-bottom) + 40px)); width: calc(100vw - 14px); min-height: 55px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 5px 7px; scrollbar-width: none; }
  .filter-pill::-webkit-scrollbar { display: none; }
  .filter-item { height: 45px; padding: 0 10px; font-size: 12px; gap: 6px; }
  .filter-item svg { width: 17px; height: 17px; }
  .drawer-sheet { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); padding: 60px 24px 32px; border-radius: 24px; }
  .case-dialog-panel { width:calc(100vw - 12px); height:calc(100vh - 12px); border-radius:24px; grid-template-columns:1fr; grid-template-rows:42% 58%; }
  .case-dialog-copy { padding:24px 22px 18px; overflow:auto; }
  .case-dialog-copy h2 { margin:18px 0 12px; font-size:44px; }
  .case-dialog-copy > p { font-size:12px; }
  .case-dialog-facts { margin-top:20px; }
  .case-dialog-nav { margin-top:20px; position:sticky; bottom:0; padding-top:10px; background:linear-gradient(transparent,#f7f7f4 24%); }
  .case-dialog-close { top:12px; right:12px; }
}

@media (max-width: 520px) {
  .primary-item { min-width: 64px; }
  .filter-item span { display: none; }
  .filter-item { width: 45px; justify-content: center; padding: 0; }
  .filter-pill { width: auto; max-width: calc(100vw - 16px); left: 50%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop, .drawer-sheet, .case-dialog-backdrop, .case-dialog-panel, .action-btn, .filter-item, .primary-item { transition-duration: .01ms !important; }
}

/* V5 — theme switch + complete dark theme */
html { transition: background-color .28s ease; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101311;
  --ink: #eef1ee;
  --panel: #232724;
  --panel-2: #2b302d;
  --muted: rgba(238,241,238,.58);
  --line: rgba(238,241,238,.13);
  --blue: #5d8ee8;
  background: var(--bg);
}
body, .stage { transition: background-color .28s ease, color .28s ease; }

.theme-toggle {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(32,36,35,.96);
  color: #fff;
  box-shadow: 0 11px 24px rgba(23,27,26,.17), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .2s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid #7ca6f2; outline-offset: 3px; }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; stroke-width: 1.8; transition: opacity .18s ease, transform .24s ease; }
.theme-icon-sun { opacity: 0; transform: rotate(-18deg) scale(.72); }
.theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle {
  background: rgba(239,242,238,.94);
  color: #171a18;
  box-shadow: 0 11px 26px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.42);
}
html[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(18deg) scale(.72); }
html[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }

html[data-theme="dark"] .stage::after {
  background:
    radial-gradient(circle at 50% 53%, rgba(255,255,255,.018) 0 36%, rgba(0,0,0,.12) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.012), transparent 16%, transparent 80%, rgba(0,0,0,.15));
}
html[data-theme="dark"] .logo-tile,
html[data-theme="dark"] .primary-pill,
html[data-theme="dark"] .action-btn,
html[data-theme="dark"] .brand-dock,
html[data-theme="dark"] .filter-pill {
  background: rgba(34,39,36,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] .action-btn.project { background: rgba(255,204,0,.98); color: #111; box-shadow: 0 12px 27px rgba(255,204,0,.28), inset 0 1px 0 rgba(255,255,255,.35); }
html[data-theme="dark"] .dock-more { background: rgba(42,47,44,.97); box-shadow: 0 6px 16px rgba(0,0,0,.34); }
html[data-theme="dark"] .zoom-reset,
html[data-theme="dark"] .statusbar,
html[data-theme="dark"] .site-footer { color: rgba(238,241,238,.45); }
html[data-theme="dark"] .site-footer a:hover { color: #eef1ee; }

html[data-theme="dark"] .drawer-backdrop { background: rgba(0,0,0,.38); }
html[data-theme="dark"] .drawer-sheet { background: rgba(28,32,30,.975); box-shadow: 0 28px 90px rgba(0,0,0,.48); }
html[data-theme="dark"] .drawer-stat { background: #191d1b; }

html[data-theme="dark"] .case-dialog-backdrop { background: rgba(0,0,0,.48); }
html[data-theme="dark"] .case-dialog-panel {
  background: #171b18;
  color: #f1f3ef;
  box-shadow: 0 36px 110px rgba(0,0,0,.55), inset 0 0 0 1px rgba(238,241,238,.09);
}
html[data-theme="dark"] .case-dialog-media { box-shadow: inset -1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .case-dialog-close { background: rgba(239,242,238,.94); color: #171a18; box-shadow: 0 9px 24px rgba(0,0,0,.30); }
html[data-theme="dark"] .case-dialog-kicker { color: rgba(238,241,238,.48); }
html[data-theme="dark"] .case-dialog-kicker span:first-child { border-color: rgba(238,241,238,.28); color: #eef1ee; }
html[data-theme="dark"] .case-dialog-copy > p { color: rgba(238,241,238,.62); }
html[data-theme="dark"] .case-dialog-facts { border-top-color: rgba(238,241,238,.13); }
html[data-theme="dark"] .case-dialog-facts div { border-bottom-color: rgba(238,241,238,.13); }
html[data-theme="dark"] .case-dialog-facts dt { color: rgba(238,241,238,.39); }
html[data-theme="dark"] .case-dialog-facts dd { color: #e6e9e5; }
html[data-theme="dark"] .case-nav-button { background: #292e2b; color: #eef1ee; }
html[data-theme="dark"] .case-nav-button:hover { background: #313733; }
html[data-theme="dark"] .case-nav-button.is-next { background: #eef1ee; color: #171a18; }
html[data-theme="dark"] .case-nav-button.is-next:hover { background: #fff; }

@media (max-width: 800px) {
  .theme-toggle { width: 48px; height: 48px; flex-basis: 48px; border-radius: 18px; }
  .theme-toggle svg { width: 19px; height: 19px; }
  html[data-theme="dark"] .case-dialog-nav { background: linear-gradient(transparent,#171b18 24%); }
}

@media (prefers-reduced-motion: reduce) {
  html, body, .stage, .theme-toggle, .theme-toggle svg { transition-duration: .01ms !important; }
}




/* V6 — single primary action after hiding Cases */
.primary-pill-single { padding-inline: 5px; }
.primary-pill-single .primary-item:not([hidden]) { min-width: 84px; }
@media (max-width: 800px) {
  .primary-pill-single .primary-item:not([hidden]) { min-width: 68px; }
}

/* V9 — frosted glass homepage chrome + cutout project presentation */
:root {
  --glass-bg: rgba(255,255,255,.46);
  --glass-bg-strong: rgba(255,255,255,.58);
  --glass-border: rgba(255,255,255,.72);
  --glass-border-soft: rgba(255,255,255,.48);
  --glass-ink: #242827;
  --glass-muted: rgba(36,40,39,.62);
  --glass-shadow: 0 14px 38px rgba(45,54,50,.13), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(255,255,255,.24);
  --glass-blur: blur(24px) saturate(155%);
}
html[data-theme="dark"] {
  --glass-bg: rgba(24,29,26,.54);
  --glass-bg-strong: rgba(30,35,32,.64);
  --glass-border: rgba(255,255,255,.15);
  --glass-border-soft: rgba(255,255,255,.10);
  --glass-ink: #f2f4f1;
  --glass-muted: rgba(242,244,241,.62);
  --glass-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.025);
}

.logo-tile,
.primary-pill,
.action-btn,
.brand-dock,
.filter-pill,
.theme-toggle,
.dock-more {
  background: var(--glass-bg) !important;
  color: var(--glass-ink) !important;
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}
.logo-tile,
.primary-pill,
.action-btn,
.theme-toggle,
.filter-pill,
.brand-dock {
  position: relative;
  overflow: hidden;
}
.logo-tile::before,
.primary-pill::before,
.action-btn::before,
.theme-toggle::before,
.filter-pill::before,
.brand-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 42%, rgba(255,255,255,.12));
  mix-blend-mode: soft-light;
  opacity: .8;
}
.logo-tile > *, .primary-pill > *, .action-btn > *, .theme-toggle > *, .filter-pill > *, .brand-dock > * { position: relative; z-index: 1; }

.primary-item { color: var(--glass-muted); }
.primary-item.is-active,
.primary-item:hover { color: var(--glass-ink); }
.primary-item.is-active { background: rgba(255,255,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
html[data-theme="dark"] .primary-item.is-active { background: rgba(255,255,255,.075); }

.action-btn.project {
  background: linear-gradient(135deg, rgba(255,204,0,.82), rgba(240,192,0,.58)) !important;
  color: #111 !important;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 14px 34px rgba(255,204,0,.28), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.theme-toggle { color: var(--glass-ink) !important; }
html[data-theme="dark"] .theme-toggle { background: var(--glass-bg) !important; color: var(--glass-ink) !important; }

.brand-dock { background: rgba(255,255,255,.36) !important; border-color: rgba(255,255,255,.62); }
html[data-theme="dark"] .brand-dock { background: rgba(25,30,27,.47) !important; border-color: rgba(255,255,255,.11); }
.dock-item {
  background: rgba(255,255,255,.32) !important;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.dock-item.is-active { background: rgba(15,31,27,.70) !important; color: #55f4ce; border-color: rgba(102,242,208,.12); }
.dock-item.dock-yellow { background: rgba(255,199,24,.58) !important; color: #202020; }
.dock-item.dock-purple { background: rgba(36,24,45,.54) !important; color: #9c73ff; }
.dock-item.dock-rust { background: rgba(153,67,40,.55) !important; color: #a7e7df; }
html[data-theme="dark"] .dock-item:not(.dock-yellow):not(.dock-purple):not(.dock-rust):not(.is-active) { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.07); }
.dock-more { background: rgba(255,255,255,.44) !important; }
html[data-theme="dark"] .dock-more { background: rgba(255,255,255,.08) !important; }

.filter-item { color: var(--glass-muted); }
.filter-item.is-active,
.filter-item:hover { color: var(--glass-ink); }
.filter-item.is-active { background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.54); }
html[data-theme="dark"] .filter-item.is-active { background: rgba(255,255,255,.08); }

/* Project imagery has no synthetic card/background around it. */
.case-dialog-media { background: #ecece8; }
.case-dialog-media img { object-fit: contain; object-position: center; padding: clamp(18px, 3vw, 44px); }
html[data-theme="dark"] .case-dialog-media { background: #101310; }

@media (max-width: 800px) {
  :root { --glass-blur: blur(20px) saturate(150%); }
}
/* V9.1 position correction: chrome that is itself anchored to the stage remains absolute. */
.filter-pill, .brand-dock { position: absolute; }
.logo-tile, .primary-pill, .action-btn, .theme-toggle { position: relative; }


/* V10 requested refinements */
.brand-dock[hidden] { display: none !important; }
.filter-pill { bottom: 47px; }
@media (max-width: 800px) {
  .filter-pill { bottom: max(47px, calc(env(safe-area-inset-bottom) + 40px)); }
}