:root {
  /* Default theme = yellow */
  --bg0: #05060a;
  --bg1: #070a14;
  --ink: #e8f7f0;
  --accent: #ffd21a;
  --accent-soft: rgba(255, 210, 26, 0.16);
  --panel: rgba(8, 10, 18, 0.82);
  --border: rgba(255, 210, 26, 0.3);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.65);

  --face-line: #ffd21a;
  --face-point: #ffffff;

  --banner-bg: rgba(0, 0, 0, 0.92);
  --banner-border: rgba(255, 210, 26, 0.9);

  --bio-label: rgba(232, 247, 240, 0.8);
  --bio-value: var(--accent);

  /* Backward-compatible aliases for existing CSS */
  --text: var(--ink);
  --bg: var(--bg0);
  --bg-panel: #0a0f1d;
  --panel-strong: #0d1222;
  --surface: #070b16;
  --accent-dim: #d4ad1a;
  --log-border: #5e4d12;
  --log-head-bg: #090d19;
  --log-text: #f0e4b7;
  --muted: #9da8b3;
  --link: var(--accent);
  --dir: var(--accent);
  --file: var(--ink);
}

:root[data-theme="yellow"] {
  --bg0: #05060a;
  --bg1: #070a14;
  --ink: #e8f7f0;
  --accent: #ffd21a;
  --accent-soft: rgba(255, 210, 26, 0.16);
  --panel: rgba(8, 10, 18, 0.82);
  --border: rgba(255, 210, 26, 0.3);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  --face-line: #ffd21a;
  --face-point: #ffffff;
  --banner-bg: rgba(0, 0, 0, 0.92);
  --banner-border: rgba(255, 210, 26, 0.9);
  --bio-label: rgba(232, 247, 240, 0.8);
  --bio-value: var(--accent);
  --bg-panel: #0a0f1d;
  --panel-strong: #0d1222;
  --surface: #070b16;
  --accent-dim: #d4ad1a;
  --log-border: #5e4d12;
  --log-head-bg: #090d19;
  --log-text: #f0e4b7;
  --muted: #9da8b3;
}

:root[data-theme="cyan"] {
  --bg0: #02040a;
  --bg1: #050916;
  --ink: #cffff0;
  --accent: #00ff99;
  --accent-soft: rgba(0, 255, 153, 0.16);
  --panel: rgba(5, 12, 16, 0.88);
  --border: rgba(110, 247, 255, 0.5);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  --face-line: #6ef7ff;
  --face-point: #00ff66;
  --banner-bg: rgba(0, 0, 0, 0.9);
  --banner-border: rgba(110, 247, 255, 0.9);
  --bio-label: rgba(207, 255, 240, 0.8);
  --bio-value: #6ef7ff;
  --bg-panel: #07121a;
  --panel-strong: #091923;
  --surface: #050c14;
  --accent-dim: #27d6aa;
  --log-border: #2b7d74;
  --log-head-bg: #060f15;
  --log-text: #bdf7e8;
  --muted: #8db8ae;
}

:root[data-theme="blue"] {
  --bg0: #02040f;
  --bg1: #050718;
  --ink: #b8eaff;
  --accent: #2c88ff;
  --accent-soft: rgba(44, 136, 255, 0.2);
  --panel: rgba(5, 7, 24, 0.88);
  --border: rgba(86, 164, 255, 0.5);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  --face-line: #56a4ff;
  --face-point: #9fd2ff;
  --banner-bg: rgba(0, 0, 0, 0.9);
  --banner-border: rgba(86, 164, 255, 0.9);
  --bio-label: rgba(184, 234, 255, 0.8);
  --bio-value: #56a4ff;
  --bg-panel: #081128;
  --panel-strong: #0a1730;
  --surface: #060e1f;
  --accent-dim: #5ea4ff;
  --log-border: #2d4f87;
  --log-head-bg: #070f22;
  --log-text: #c4e6ff;
  --muted: #86a4c3;
}

:root[data-theme="fire"] {
  --bg0: #0b0502;
  --bg1: #1a0b03;
  --ink: #ffe8c8;
  --accent: #ff9f1a;
  --accent-soft: rgba(255, 159, 26, 0.22);
  --panel: rgba(26, 11, 3, 0.9);
  --border: rgba(255, 150, 40, 0.48);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  --face-line: #ffb347;
  --face-point: #ffd17c;
  --banner-bg: rgba(15, 7, 2, 0.94);
  --banner-border: rgba(255, 150, 40, 0.92);
  --bio-label: rgba(255, 232, 200, 0.78);
  --bio-value: #ffb347;
  --bg-panel: #1f1006;
  --panel-strong: #2a1408;
  --surface: #160b04;
  --accent-dim: #d77d18;
  --log-border: #7d4b12;
  --log-head-bg: #170c05;
  --log-text: #ffd8a4;
  --muted: #c59666;
}

:root[data-theme="crimson"] {
  --bg0: #0b0208;
  --bg1: #170413;
  --ink: #ffd9f3;
  --accent: #ff2f92;
  --accent-soft: rgba(255, 47, 146, 0.22);
  --panel: rgba(23, 4, 19, 0.9);
  --border: rgba(255, 80, 152, 0.46);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.78);
  --face-line: #ff4da6;
  --face-point: #ff7bbd;
  --banner-bg: rgba(19, 3, 15, 0.94);
  --banner-border: rgba(255, 80, 152, 0.9);
  --bio-label: rgba(255, 217, 243, 0.8);
  --bio-value: #ff5cb0;
  --bg-panel: #1d0718;
  --panel-strong: #2a0a22;
  --surface: #160513;
  --accent-dim: #e24795;
  --log-border: #7b1f4f;
  --log-head-bg: #160513;
  --log-text: #ffc3e8;
  --muted: #bc7eab;
}

:root[data-theme="white"] {
  --bg0: #050505;
  --bg1: #0b0b0b;
  --ink: #f2f2f2;
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.15);
  --panel: rgba(10, 10, 10, 0.9);
  --border: rgba(255, 255, 255, 0.32);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  --face-line: #ffffff;
  --face-point: #d9d9d9;
  --banner-bg: rgba(0, 0, 0, 0.94);
  --banner-border: rgba(255, 255, 255, 0.9);
  --bio-label: rgba(242, 242, 242, 0.78);
  --bio-value: #ffffff;
  --bg-panel: #101010;
  --panel-strong: #161616;
  --surface: #0d0d0d;
  --accent-dim: #c7c7c7;
  --log-border: #4e4e4e;
  --log-head-bg: #101010;
  --log-text: #e9e9e9;
  --muted: #a8a8a8;
}

:root[data-theme="black"] {
  --bg0: #020202;
  --bg1: #050505;
  --ink: #f2f2f2;
  --accent: #f2f2f2;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --panel: rgba(8, 8, 8, 0.94);
  --border: rgba(255, 255, 255, 0.2);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.78);
  --face-line: #f2f2f2;
  --face-point: #bdbdbd;
  --banner-bg: rgba(0, 0, 0, 0.94);
  --banner-border: rgba(255, 255, 255, 0.5);
  --bio-label: rgba(242, 242, 242, 0.75);
  --bio-value: #ffffff;
  --bg-panel: #0a0a0a;
  --panel-strong: #111111;
  --surface: #070707;
  --accent-dim: #b8b8b8;
  --log-border: #4a4a4a;
  --log-head-bg: #0d0d0d;
  --log-text: #f2f2f2;
  --muted: #8e8e8e;
}

:root[data-mode="dark"] {
  color-scheme: dark;
}

:root[data-mode="light"] {
  color-scheme: light;
  --bg: #f6f1e8;
  --bg-panel: #fff9f0;
  --panel-strong: #f7efe3;
  --surface: #fffcf8;
  --ink: #1d1a17;
  --text: var(--ink);
  --muted: #7d756c;
  --border: rgba(123, 96, 55, 0.34);
  --panel: rgba(255, 250, 241, 0.96);
  --banner-bg: rgba(255, 247, 235, 0.98);
  --accent-soft: rgba(0, 0, 0, 0.05);
}

html, body { height:100%; margin:0; background:var(--bg); color:var(--accent); font-family:"Courier New", monospace; }
#wrap { display:grid; grid-template-columns:26px 1fr; height:100vh; width:100vw; overflow:hidden; }

/* application des variables */
body {
  background: var(--bg);
  color: var(--text);
}

#sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
}

#sidebar .vtitle {
  color: var(--accent);
}

.page-title {
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

/* table */
#autoindex a {
  color: var(--accent);
}
#autoindex tr:hover td {
  background: var(--bg-panel);
}

/* switch de thème */
.theme-switch {
  position: absolute;
  bottom: 20px;
  left: 10px;
  font-size: 11px;
  color: var(--accent-dim);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  cursor: pointer;
}
.theme-switch input {
  display: none;
}
.theme-switch span {
  user-select: none;
  transition: color 0.3s;
}
.theme-switch input:checked + span {
  color: var(--accent);
  font-weight: bold;
}
/* Colonne gauche étroite, titre vertical */
#sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  padding-top: 10px;
  padding-bottom: 6px;
}
#sidebar .vtitle{
  writing-mode: vertical-rl;      /* texte vertical */
     /* lettres droites */
  font-weight:300;
  letter-spacing:.1rem;
  color: var(--accent-dim);
  user-select:none;
}

.terminal-toggle {
  display: block;
  margin-top: auto;
  margin-bottom: 10px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 16px/1 "Courier New", monospace;
  cursor: pointer;
  padding: 4px 0;
}

/* Zone liste (scroll) */
#content { overflow:hidden; background:var(--bg); padding:40px 20px; height:100%; min-height:0; }

/* Table “autoindex” (existant) */
#autoindex { width:100%; border-collapse:collapse; color:var(--ink); }
#autoindex a { text-decoration:none; }
#autoindex a:hover { text-decoration:underline; }
#autoindex td { padding:6px 8px; border-bottom:1px solid var(--border); }
#autoindex tr:hover td { background: var(--bg-panel); }
#autoindex tr.expanded td { background: var(--panel-strong); }
.autoindex-detail-row td { padding: 0; border-bottom: 1px solid var(--border); }
.autoindex-detail-panel {
  padding: 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  overflow: auto;
  overscroll-behavior: contain;
}

.autoindex-loading {
  border: 1px solid #252525;
  background: #0b0b0b;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 7px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
}

.autoindex-loading-head {
  font-size: 11px;
  color: #9fd2ff;
  letter-spacing: 0.03em;
}

.autoindex-loading-line {
  font-size: 12px;
  color: #b6b6b6;
}

.autoindex-loading-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}

.autoindex-loading-bar .sq {
  width: 10px;
  height: 10px;
  border: 1px solid #3a3a3a;
  background: #111;
  animation: idx-square-fill 1.1s linear infinite;
}

.autoindex-loading-bar .sq:nth-child(1) { animation-delay: 0s; }
.autoindex-loading-bar .sq:nth-child(2) { animation-delay: .1s; }
.autoindex-loading-bar .sq:nth-child(3) { animation-delay: .2s; }
.autoindex-loading-bar .sq:nth-child(4) { animation-delay: .3s; }
.autoindex-loading-bar .sq:nth-child(5) { animation-delay: .4s; }
.autoindex-loading-bar .sq:nth-child(6) { animation-delay: .5s; }
.autoindex-loading-bar .sq:nth-child(7) { animation-delay: .6s; }
.autoindex-loading-bar .sq:nth-child(8) { animation-delay: .7s; }

@keyframes idx-square-fill {
  0%, 100% { background: #111; border-color: #3a3a3a; }
  45% { background: color-mix(in srgb, var(--accent) 85%, white); border-color: var(--accent); }
}

.autoindex-shell {
  min-height: 0;
  min-width: 0;
  width: 100%;
  gap: 0;
  align-items: stretch;
  --layout-col-1: minmax(260px, 340px);
  --layout-col-2: minmax(0, 1fr);
}

.autoindex-menu,
.autoindex-main-panel {
  min-height: 0;
  min-width: 0;
}

.autoindex-menu {
  border-top: 0;
  border-bottom: 0;
  background: none;
}

.autoindex-menu #autoindex {
  table-layout: fixed;
}

.autoindex-menu #autoindex td {
  padding: 10px 8px;
  vertical-align: top;
}

.autoindex-menu #autoindex td:first-child,
.autoindex-menu #autoindex td.name {
  padding-left: 8px;
}

.autoindex-menu #autoindex td.name {
  width: 100%;
}

.autoindex-menu #autoindex td.date,
.autoindex-menu #autoindex td.size {
  display: none;
}

.autoindex-menu #autoindex td.name a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.autoindex-menu #autoindex .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  flex: 0 0 1.1em;
}

.autoindex-menu #autoindex .icon.is-symbol,
.autoindex-compact-icon.is-symbol {
  filter: none;
  color: var(--accent-dim);
  font: 12px/1 "Courier New", monospace;
}

.autoindex-menu #autoindex tr:hover td,
.autoindex-menu #autoindex tr.expanded td {
  background-color: var(--bg-panel);
  background-image:
    repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 42%);
  background-size: 10px 100%, auto;
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
}

.autoindex-menu #autoindex tr.expanded td {
  transform: none;
  background-image:
    repeating-linear-gradient(135deg, rgba(230, 230, 230, 0.4) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
  background-size: 10px 100%, auto;
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
}

.autoindex-main-panel {
  display: none;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #181818;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  padding: 12px 0;
  overflow-x: hidden;
}

.autoindex-shell.layout-2 {
  gap: 0;
}

.autoindex-shell.layout-2 .autoindex-main-panel {
  display: block;
}

.autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split {
  padding-top: 0;
  padding-bottom: 0;
}

.autoindex-shell.layout-2 .autoindex-menu {
  border-top: 0;
  border-bottom: 0;
  background: none;
}

.autoindex-shell.layout-2 .autoindex-menu #autoindex td.name {
  width: 100%;
  padding-left: 8px;
}

.autoindex-full-label {
  display: inline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autoindex-compact-label {
  display: none;
  min-width: 0;
  max-width: 100%;
}

.autoindex-shell.layout-2 .autoindex-menu #autoindex .icon {
  display: inline;
}

.autoindex-shell.layout-2 .autoindex-menu #autoindex .autoindex-compact-label {
  display: none;
}

.autoindex-compact-icon,
.autoindex-compact-text {
  display: inline-block;
}

.autoindex-compact-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoindex-main-panel .autoindex-loading,
.autoindex-main-panel > .series-empty,
.autoindex-main-panel > p {
  margin-left: 12px;
  margin-right: 12px;
}

.autoindex-loading-head,
.autoindex-loading-line,
.autoindex-main-panel .series-empty {
  overflow-wrap: anywhere;
}

/* Responsive : simplifie le shell sur mobile */
@media (max-width: 900px){
  .autoindex-shell,
  .autoindex-shell.layout-2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #wrap{
    grid-template-columns: 26px 1fr;
    width: 100%;
    height: 100dvh;
  }

  #sidebar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    padding-bottom: 6px;
  }

  #content{
    padding: 24px 16px 18px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #corner-logo{
    display: none;
  }

  .autoindex-menu #autoindex td.name a {
    display: flex;
  }

  .autoindex-full-label {
    display: none;
  }

  .autoindex-compact-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }

  .autoindex-shell.layout-2 .autoindex-menu #autoindex .autoindex-compact-label {
    display: inline-flex;
  }

  .autoindex-shell.layout-2.is-mobile-detail .autoindex-menu {
    display: none;
  }

  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel {
    display: block;
    border-top: 0;
    padding-top: 0;
  }

  .autoindex-shell.layout-2 .autoindex-main-panel {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .autoindex-shell.layout-2 .autoindex-menu #autoindex .icon,
  .autoindex-menu #autoindex .icon {
    display: none;
  }

  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel.autoindex-panel-split,
  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel.autoindex-panel-flow,
  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel > .series-root,
  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel > .inline-tree-root,
  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel > .mobile-module-root,
  .autoindex-shell.layout-2.is-mobile-detail .autoindex-main-panel > .mobile-drilldown-root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .autoindex-shell.layout-2.is-mobile-detail .level-1,
  .autoindex-shell.layout-2.is-mobile-detail .level-2,
  .autoindex-shell.layout-2.is-mobile-detail .level-3 {
    margin-left: 0;
  }

  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail > *,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .proj-section,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .proj-text,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .media-grid,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .media-single,
  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .media-full {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .autoindex-shell.layout-2.is-mobile-detail .series-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .autoindex-shell.layout-2.is-mobile-detail #travaux-detail .proj-section,
  .members-mobile-root .proj-section {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 24px;
  }
}

@media (max-width: 520px) {
  .autoindex-menu #autoindex td {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 13px;
  }

  .autoindex-main-panel .autoindex-loading,
  .autoindex-main-panel > .series-empty,
  .autoindex-main-panel > p {
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (min-width: 901px) {
  #content {
    overflow: hidden;
  }

  .autoindex-shell.layout-2 {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }

  .autoindex-shell.layout-2 .autoindex-menu,
  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split {
    align-self: stretch;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split > .inline-tree-root,
  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split > .logs-root,
  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split > .pb-tree-root,
  .autoindex-shell.layout-2 .autoindex-main-panel.autoindex-panel-split > .lab-root {
    min-height: 0;
    height: 100%;
  }
}


.page-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 20px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
}

a{ color:var(--link); text-decoration:none } a:hover{ text-decoration:underline }
.wrap{ max-width:900px; margin:40px auto; padding:0 16px }
header{ margin-bottom:8px; position:relative }
h1{ font-size:16px; margin:0 0 6px 0 }
.crumbs a{ color:var(--muted) }
.listing{ width:100%; border-collapse:collapse; }
.listing th, .listing td{ padding:6px 8px; border-bottom:1px solid #222 }
.listing th{ color:var(--muted); font-weight:600; text-align:left }
.listing td.size, .listing td.date{ color:var(--muted) }
.icon{ display:inline-block; width:16px; text-align:center; margin-right:6px; filter: invert(1) hue-rotate(180deg); }
.dir .name a{ color:var(--dir) }
.file .name a{ color:var(--file) }
footer{ margin-top:12px; color:var(--muted) }
.hint{ color:var(--muted); margin:6px 0 14px }
.tag{ display:inline-block; font-size:11px; color:#111; background:var(--muted); padding:1px 6px; border-radius:10px; margin-left:8px }
@media (max-width:640px){ .listing td.size, .listing td.date{ display:none } }

/* Brand (small logo) */
#brand{ position:absolute; top:-28px; left:0; display:flex; align-items:center; gap:8px; }
#brand .mark{ width:16px; height:16px; opacity:.8; display:block; filter: invert(1) hue-rotate(180deg); }
#brand .host{ margin:0; color:#777 }



/* Modal (zoom from click like old OS) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-backdrop.active{ display:flex }
.modal-window{ background:#0f0f0f; border:1px solid #2a2a2a; box-shadow:0 20px 60px rgba(0,0,0,.6); width:min(900px,92vw); max-height:88vh; border-radius:6px; overflow:hidden; transform-origin:var(--ox,50%) var(--oy,50%); animation:win-zoom .25s ease-out both; display:grid; grid-template-rows:auto 1fr; }
.modal-titlebar{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#121212; border-bottom:1px solid #242424; }
.modal-titlebar .title{ font-weight:600; color:#cfcfcf; font-size:13px; }
.modal-titlebar .buttons{ display:flex; gap:6px; align-items:center }
.winbtn{ height:20px; padding:0 8px; border-radius:4px; border:1px solid #3a3a3a; background:#0a0a0a; color:#cfcfcf; font:11px/20px ui-monospace, Menlo, monospace; display:inline-block; letter-spacing:.2px }
.winbtn.close{ background:#111; border-color:#444; } .winbtn.close::before{ content:"[X]"; }
.modal-body{ padding:12px; overflow:auto }
@keyframes win-zoom{ 0%{ transform:scale(.12); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* Members folder grid */
.folder-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.folder-card{ background:#0c0c0c; border:1px solid #212121; border-radius:8px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.folder-card:hover{ border-color:#2c2c2c; background:#0e0e0e }
.folder-icon{ font-size:28px; filter: invert(1) hue-rotate(180deg); }
.folder-name{ font-size:12px; color:#cfcfcf; text-align:center; word-break:break-word }

/* Member modal (fullscreen-ish) */
#member-modal-root.modal-backdrop{ background:rgba(0,0,0,.78); }
.modal2-window{ background:#0e0e0e; border:1px solid #2a2a2a; box-shadow:0 30px 90px rgba(0,0,0,.7); width:min(1200px,96vw); height:92vh; border-radius:8px; overflow:hidden; transform-origin:var(--ox,50%) var(--oy,50%); animation:win-zoom .25s ease-out both; display:grid; grid-template-rows:auto 1fr; }
.member-layout{ display:grid; grid-template-columns: 240px 1fr; height:100%; min-height:0; }
.member-sidebar{ background:#0b0b0b; border-right:1px solid #1f1f1f; padding:12px; overflow:auto }
.member-name{ font-weight:600; color:#ddd; margin:0 0 6px 0; font-size:13px }
.member-meta{ font-size:11px; color:#999; margin-bottom:10px }
.navlist{ display:flex; flex-direction:column; gap:6px }
.navbtn{ display:block; width:100%; text-align:left; background:#111; border:1px solid #1e1e1e; color:#cfcfcf; padding:6px 8px; border-radius:6px; font:12px ui-monospace, Menlo, monospace; cursor:pointer }
.navbtn:hover{ border-color:#2b2b2b; background:#121212 }
.navbtn.active{ border-color:#3a3a3a; background:#161616 }
.member-content{ padding:12px; overflow:auto; min-height:0; }
.section-title{ font-size:13px; color:#cfcfcf; margin:8px 0; font-weight:600 }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px }
.proj-card{ border:1px solid #212121; background:#0c0c0c; border-radius:8px; padding:10px }
.proj-thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin-bottom:8px }
.proj-name{ font-size:12px; color:#e0e0e0 }
.proj-year{ font-size:11px; color:#8a8a8a }

.series-root { display: grid; gap: 10px; }
.series-toolbar { display: flex; align-items: center; gap: 10px; }
.series-filter-label { font-size: 12px; color: #adadad; }
.series-filter-menu { flex: 1; }
.series-filter-chip { min-width: 96px; padding: 8px 10px; gap: 5px; }
.series-filter-chip .member-mini-thumb { width: 52px; height: 52px; }
.series-filter-logo {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: contain;
  border: 1px solid #2c2c2c;
  background: #0a0a0a;
  padding: 5px;
  filter: brightness(0) invert(1);
}
.series-filter-placeholder {
  display: inline-grid;
  place-items: center;
  color: #9e9e9e;
  font-weight: 700;
  letter-spacing: .04em;
}
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.series-card {
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px); background-size: 10px 100%, 10px 100%; background-position: left top, right top; background-repeat: no-repeat; background-color: transparent;
  border-radius: 0;
  padding: 12px 0 12px 24px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 120ms linear, background-color 120ms linear, border-color 120ms linear;
}
.series-card::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 12px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}
.series-card:hover { border-top-color: #bdbdbd; background-image: repeating-linear-gradient(135deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%); background-size: 10px 100%, 10px 100%, auto; background-position: left top, right top, left top; background-repeat: no-repeat, no-repeat, no-repeat; transform: translateX(4px); }
.series-card.active { border-top-color: #e6e6e6; background-image: repeating-linear-gradient(135deg, rgba(230,230,230,.4) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(230,230,230,.4) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%); background-size: 10px 100%, 10px 100%, auto; background-position: left top, right top, left top; background-repeat: no-repeat, no-repeat, no-repeat; }
.series-thumb {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.series-meta { padding: 7px; display: grid; gap: 3px; }
.series-title { font-size: 13px; color: #e5e5e5; line-height: 1.3; font-weight: 600; }
.series-subtitle { font-size: 11px; color: #bcbcbc; line-height: 1.35; }
.series-period { font-size: 10px; color: #d8c884; font-variant-numeric: tabular-nums; }
.series-author { font-size: 10px; color: #aeaeae; }
.series-date { font-size: 10px; color: #888; }
.series-contrib { color: #9fc3ff; font-size: 11px; font-weight: 600; }
.series-empty { margin: 0; color: #8f8f8f; font-size: 12px; }
.mobile-module-root,
.mobile-drilldown-root {
  display: grid;
  gap: 14px;
}

.mobile-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-breadcrumb-link,
.mobile-breadcrumb-current {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mobile-breadcrumb-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.mobile-breadcrumb-current {
  color: var(--ink);
}

.mobile-breadcrumb-sep {
  color: var(--muted);
}

.mobile-detail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.mobile-stack-list {
  display: grid;
  gap: 10px;
}

.mobile-stack-item {
  width: 100%;
}

.mobile-feed-list {
  display: grid;
  gap: 18px;
}

.mobile-feed-sentinel {
  height: 1px;
}

.members-mobile-root,
.members-mobile-root > *,
.members-mobile-root .mobile-detail-card,
.members-mobile-root .members-portfolio-member-focus,
.members-mobile-root .members-portfolio-member-head,
.members-mobile-root .members-portfolio-member-copy,
.members-mobile-root .proj-text,
.members-mobile-root .proj-section,
.members-mobile-root .media-item,
.members-mobile-root .media-single,
.members-mobile-root .media-full {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.members-mobile-root {
  width: 100%;
  overflow-x: hidden;
}

.members-mobile-root .members-portfolio-member-head {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "meta"
    "site"
    "portrait"
    "bio";
  gap: 10px;
}

.members-mobile-root .members-portfolio-member-copy {
  display: contents;
}

.members-mobile-root .members-portfolio-member-copy .section-title {
  grid-area: title;
  margin-bottom: 0;
}

.members-mobile-root .member-meta-inline {
  grid-area: meta;
  margin-bottom: 0;
}

.members-mobile-root .member-site-inline {
  grid-area: site;
}

.members-mobile-root .member-bio-inline {
  grid-area: bio;
}

.members-mobile-root .members-portfolio-member-portrait {
  grid-area: portrait;
  width: min(100%, 240px);
  max-width: 100%;
  justify-self: start;
  margin: 0;
}

.members-mobile-root .members-portfolio-series-list {
  grid-template-columns: minmax(0, 1fr);
}

.members-mobile-root .members-portfolio-series-item,
.members-mobile-root .mobile-stack-item {
  min-width: 0;
  max-width: 100%;
}

.members-mobile-root .media-single.bleed,
.members-mobile-root .media-full.bleed {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .members-mobile-root {
    display: grid;
    gap: 12px;
  }

  .members-mobile-root .mobile-detail-card,
  .members-mobile-root .proj-text,
  .members-mobile-root .proj-section,
  .members-mobile-root .media-grid,
  .members-mobile-root .media-single,
  .members-mobile-root .media-full {
    width: 100%;
    max-width: 100%;
  }

  .members-mobile-root .media-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .members-mobile-root .media-grid.is-masonry .media-item {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }

  .members-mobile-root .media-carousel {
    grid-auto-columns: minmax(100%, 1fr);
  }

  .members-mobile-root .proj-section.section-grid .media-item img,
  .members-mobile-root .proj-section.section-grid .media-item video {
    min-height: 0;
  }
}

.inline-nav-root { display: grid; gap: 10px; }
.inline-nav-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1f1f1f;
}
.inline-crumb {
  border: 1px solid #2a2a2a;
  background: #101010;
  color: #d3d3d3;
  font: 11px ui-monospace, Menlo, monospace;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.inline-crumb:hover { border-color: #3a3a3a; }
.inline-nav-view { min-height: 20px; }

.member-horizontal-menu {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: stretch;
}
.inline-tree-root { display: grid; gap: 8px; }
.inline-tree-root > .member-horizontal-menu.level-0{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  padding-bottom: 6px;
}
.hierarchy-level { position: relative; min-height: 0; }
.level-1 { margin-left: 16px; }
.level-2 { margin-left: 28px; }
.level-3 { margin-left: 40px; }

.member-chip {
  border: 1px solid #2a2a2a;
  background: #101010;
  color: #d3d3d3;
  font: 12px ui-monospace, Menlo, monospace;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.member-chip.active,
.member-chip:hover {
  border-color: #3d3d3d;
  background: #141414;
}
.member-chip-media {
  display: inline-grid;
  justify-items: center;
  align-items: start;
  gap: 6px;
  text-align: center;
  min-width: 170px;
  padding: 10px 12px;
  position: relative;
  transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease, min-width 420ms ease, grid-template-columns 420ms ease;
}
.member-mini-thumb {
  width: 110px;
  height: 110px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #2c2c2c;
  flex: 0 0 auto;
  transition: width 420ms ease, height 420ms ease, border-radius 420ms ease;
}
.member-mini-placeholder {
  display: inline-block;
  background: #1d1d1d;
}
.member-chip-label{ display:block; }
.member-chip-info{ display:none; min-width: 0; overflow: hidden; }
.member-chip-name{ font-size: 22px; font-weight: 700; color:#ececec; line-height:1.12; margin-bottom:8px; overflow-wrap:anywhere; }
.member-chip-meta{ font-size: 12px; color:#b1b1b1; margin-bottom:8px; }
.member-chip-site{ font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.member-chip-bio{ margin: 10px 0 0 0; font-size: 14px; color:#d2d2d2; line-height:1.5; overflow:hidden; overflow-wrap:anywhere; }

.member-horizontal-menu.is-member-focus{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  align-items:flex-start;
  align-items:start;
  gap: 10px;
  overflow: visible;
  max-height: none;
}
.member-horizontal-menu.is-member-focus .member-chip-media{
  min-width: 74px;
  width: 74px;
  height: 74px;
  padding: 8px;
  aspect-ratio: 1 / 1;
  opacity:.56;
  filter: grayscale(.38) saturate(.72);
  transform: scale(.92);
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
}
.member-horizontal-menu.is-member-focus .member-chip-label{
  display:block;
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translate(-50%, 8px);
  max-width: calc(100% - 10px);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.92);
  border: 1px solid #2c2c2c;
  color: #efefef;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.member-horizontal-menu.is-member-focus .member-mini-thumb{
  width: 52px;
  height: 52px;
  border-radius: 4px;
}
.member-horizontal-menu.is-member-focus .member-chip-info{
  display:none;
}
.member-horizontal-menu.is-member-focus .member-chip-media.active{
  margin: 0;
  order: -1;
  margin-right: auto;
  min-width: min(560px, 60vw);
  width: auto;
  height: auto;
  aspect-ratio: auto;
  opacity:1;
  filter:none;
  transform: scale(1);
  display:grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  text-align:left;
  gap: 10px;
}
.member-horizontal-menu.is-member-focus .member-chip-media.active .member-mini-thumb{
  grid-column: 1;
  grid-row: 1;
  width: 132px;
  height: 184px;
  border-radius: 8px;
  object-fit: cover;
}
.member-horizontal-menu.is-member-focus .member-chip-media.active .member-chip-label{
  display:none;
}
.member-horizontal-menu.is-member-focus .member-chip-media.active .member-chip-info{
  display:block;
  grid-column: 2;
  grid-row: 1;
  align-self:center;
}
.member-horizontal-menu.is-member-focus .member-chip-media.active .member-chip-bio{
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.member-horizontal-menu.is-member-focus.project-open .member-chip-media.active{
  min-width: min(460px, 50vw);
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
}
.member-horizontal-menu.is-member-focus.project-open .member-chip-media.active .member-mini-thumb{
  width: 104px;
  height: 146px;
}
.member-horizontal-menu.is-member-focus.project-open .member-chip-name{
  font-size: 18px;
  margin-bottom: 6px;
}
.member-horizontal-menu.is-member-focus.project-open .member-chip-meta{
  margin-bottom: 6px;
}
.member-horizontal-menu.is-member-focus.project-open .member-chip-bio{
  -webkit-line-clamp: 3;
  font-size: 13px;
  margin-top: 6px;
}
.member-menu-collapsed .member-chip-media {
  min-width: auto;
  padding: 6px 10px;
}
.member-menu-collapsed .member-mini-thumb {
  width: 42px;
  height: 42px;
}
.project-chip-media {
  display: inline-grid;
  justify-items: center;
  align-items: start;
  gap: 8px;
  text-align: center;
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border-radius: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px); background-size: 10px 100%, 10px 100%; background-position: left top, right top; background-repeat: no-repeat; background-color: transparent;
}
.project-chip-info {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.project-chip-media > span,
.project-chip-info > span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.project-chip-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-chip-meta {
  font-size: 11px;
  font-weight: 500;
  color: #d8c884;
  line-height: 1.25;
}

.project-chip-initials {
  color: #9fc3ff;
  font-weight: 700;
}
.project-chip-summary {
  display: none;
  color: #c8c8c8;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.project-chip-summary p {
  margin: 0;
}
.project-chip-summary p + p {
  margin-top: 8px;
}
.project-mini-cover {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  object-fit: cover;
  border: 1px solid #2c2c2c;
  display: block;
}
.project-mini-placeholder {
  background: #1d1d1d;
}

.project-menu-collapsed .project-chip-media {
  min-width: auto;
  padding: 6px 10px;
}

.project-menu-collapsed .project-mini-cover {
  width: 58px;
  height: 58px;
}
.member-head-inline { margin-bottom: 18px; }
.member-head-inline .section-title {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px 0;
}
.member-meta-inline { font-size: 11px; color: #9f9f9f; margin-top: -2px; margin-bottom: 8px; }
.member-site-inline{
  display:inline-block;
  margin: 0 0 8px 0;
  font-size:12px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.member-site-inline:hover{ color: #fff; }
.member-bio-inline { margin: 0; color: #cfcfcf; font-size: 15px; line-height: 1.55; }
.member-head-split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: color-mix(in srgb, var(--bg-panel) 86%, black);
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  padding: 12px;
}
.member-profile-wrap {
  display: block;
}
.member-profile-image {
  width: 220px;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  display: block;
}
.member-profile-empty { background: #151515; }
.project-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.project-carousel.menu-dimmed {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  overflow: visible;
  min-height: 0;
}
.project-carousel.menu-dimmed .project-chip-media {
  opacity: 0.46;
  filter: saturate(0.68) brightness(0.74);
  transition: opacity 120ms linear, filter 120ms linear, transform 120ms linear;
  order: 1;
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  padding: 8px;
  text-align: center;
  transform: scale(.96);
  margin-left: 0;
  position: relative;
}
.project-carousel.menu-dimmed .project-chip-media .project-mini-cover {
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
.project-carousel.menu-dimmed .project-chip-media .project-chip-title,
.project-carousel.menu-dimmed .project-chip-media .project-chip-meta,
.project-carousel.menu-dimmed .project-chip-media .project-chip-summary {
  display: none;
}
.project-carousel.menu-dimmed .project-chip-media:hover .project-chip-title,
.project-carousel.menu-dimmed .project-chip-media:focus-visible .project-chip-title{
  display: block;
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%, 8px);
  width: calc(100% - 10px);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.92);
  border: 1px solid #2c2c2c;
  color: #efefef;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.project-carousel.menu-dimmed .project-chip-media.active {
  order: -1;
  flex: 1 1 min(560px, calc(100% - 340px));
  width: min(560px, calc(100% - 340px));
  min-width: min(560px, calc(100% - 340px));
  opacity: 1;
  filter: none;
  text-align: left;
  transform: scale(1);
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  margin-right: auto;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-mini-cover {
  width: 116px;
  height: 116px;
  aspect-ratio: 1 / 1;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-info {
  align-self: start;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-title,
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-meta,
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-summary {
  display: block;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-title {
  font-size: 18px;
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  white-space: normal;
  transform: none;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-meta {
  font-size: 11px;
}
.project-carousel.menu-dimmed .project-chip-media.active .project-chip-summary {
  margin-top: 4px;
}
.project-carousel.menu-dimmed .project-chip-media:hover,
.project-carousel.menu-dimmed .project-chip-media:focus-visible,
.project-carousel.menu-dimmed .project-chip-media.active {
  opacity: 1;
  filter: none;
}
.project-carousel.menu-dimmed .project-chip-media.active:hover,
.project-carousel.menu-dimmed .project-chip-media.active:focus-visible {
  transform: scale(1);
}
.project-carousel + .hierarchy-level.level-3 {
  margin-top: 8px;
}
.member-horizontal-menu.menu-dimmed .member-chip-media {
  opacity: 0.46;
  filter: saturate(0.68) brightness(0.74);
  transition: opacity 120ms linear, filter 120ms linear;
}
.member-horizontal-menu.menu-dimmed .member-chip-media:hover,
.member-horizontal-menu.menu-dimmed .member-chip-media:focus-visible,
.member-horizontal-menu.menu-dimmed .member-chip-media.active {
  opacity: 1;
  filter: none;
}
.project-carousel .project-chip-media {
  flex: 0 0 220px;
  width: 220px;
}
.project-carousel .project-mini-cover {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.member-horizontal-menu.is-member-focus .member-chip-media:hover .member-chip-label,
.member-horizontal-menu.is-member-focus .member-chip-media:focus-visible .member-chip-label{
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1024px) {
  .series-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .project-chip-media { min-width: 0; }
  .project-mini-cover { width: 100%; max-width: 178px; height: auto; aspect-ratio: 1 / 1; }
  .project-carousel .project-chip-media { flex-basis: 190px; width: 190px; }
  .project-carousel .project-mini-cover { max-width: none; height: auto; }
  .member-head-split { grid-template-columns: 164px minmax(0, 1fr); }
  .member-profile-image { width: 164px; max-height: 220px; }
}

@media (max-width: 760px) {
  .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-horizontal-menu.is-member-focus{
    display:flex;
    max-height: none;
  }
  .member-horizontal-menu.is-member-focus .member-chip-media{
    min-width: 64px;
    width: 64px;
    height: 64px;
  }
  .member-horizontal-menu.is-member-focus .member-chip-media .member-mini-thumb{
    width: 44px;
    height: 44px;
  }
  .member-horizontal-menu.is-member-focus .member-chip-media.active{
    min-width: min(92vw, 440px);
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .member-horizontal-menu.is-member-focus .member-chip-media.active .member-mini-thumb{
    width: 92px;
    height: 128px;
  }
  .member-horizontal-menu.is-member-focus.project-open .member-chip-media.active{
    min-width: min(92vw, 400px);
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .member-horizontal-menu.is-member-focus.project-open .member-chip-media.active .member-mini-thumb{
    width: 82px;
    height: 112px;
  }
  .project-carousel.menu-dimmed .project-chip-media{
    flex-basis: 82px;
    width: 82px;
    min-width: 82px;
  }
  .project-carousel.menu-dimmed .project-chip-media .project-mini-cover{
    width: 62px;
    height: 62px;
  }
  .project-carousel.menu-dimmed .project-chip-media.active{
    flex-basis: 100%;
    width: 100%;
    min-width: 100%;
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .project-carousel.menu-dimmed .project-chip-media.active .project-mini-cover{
    width: 82px;
    height: 82px;
  }
  .member-chip-name{ font-size: 18px; }
  .member-chip-bio{ font-size: 13px; }
  .project-chip-media { min-width: 0; }
  .project-mini-cover { width: 100%; max-width: none; height: auto; aspect-ratio: 2 / 3; }
  .project-carousel .project-chip-media { flex-basis: min(72vw, 240px); width: min(72vw, 240px); }
  .member-head-split { grid-template-columns: 1fr; }
  .member-profile-wrap { margin-bottom: 8px; }
  .member-profile-image { width: min(52vw, 220px); }
}
.proj-card-btn {
  text-align: left;
  color: inherit;
  width: 100%;
  cursor: pointer;
}
@keyframes win-shrink{ 0%{ transform:scale(1); opacity:1 } 100%{ transform:scale(.12); opacity:0 } }
.modal-window.closing, .modal2-window.closing{ animation:win-shrink .18s ease-in forwards }

/* Project detail */
.proj-hero{ width:100%; border-radius:8px; overflow:hidden; border:1px solid #1e1e1e; margin-bottom:8px }
.proj-hero img{ width:100%; height:auto; display:block }
.proj-text{ color:#cfcfcf; font-size:13px; line-height:1.5 }
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px }
.gal-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:6px; border:1px solid #202020; cursor:zoom-in }
.fullwidth{ width:100%; border:1px solid #1e1e1e; border-radius:8px; overflow:hidden; margin:6px 0 }
.fullwidth img{ width:100%; height:auto; display:block }
.link-list{ display:grid; gap:8px }
.link-item{ display:flex; align-items:center; gap:8px }
.link-item a{ text-decoration:underline }

/* Static content pages */
.content-page-shell {
  border-left: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.24) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 4px 0 4px 28px;
  min-height: 100%;
}

.content-page-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.content-page-contact {
  margin: 0;
}

.content-page-contact a {
  color: var(--ink);
  text-decoration: underline;
}

.commit-page-shell {
  --commit-border: var(--border);
  --commit-border-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --commit-text: var(--ink);
  --commit-text-dim: color-mix(in srgb, var(--ink) 78%, transparent);
  --commit-text-soft: var(--muted);
  --commit-surface: transparent;
  display: grid;
  gap: 18px;
  margin: 0 12px;
  padding: 4px 0 8px 28px;
  border-left: 0;
  background:
    repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.24) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  color: var(--commit-text);
}

.commit-page-hero {
  display: grid;
  gap: 6px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--commit-border);
}

.commit-page-kicker {
  margin: 0;
  color: var(--commit-text-soft);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.commit-page-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: clamp(24px, 4.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--commit-text);
}

.commit-page-title-prompt {
  font-size: 0.62em;
  color: var(--commit-text-soft);
  transform: translateY(-0.06em);
}

.commit-page-title-word {
  font-weight: 600;
}

.commit-page-title-cursor {
  animation: commit-blink 1s step-end infinite;
  color: var(--accent);
}

.commit-page-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--commit-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.commit-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.commit-page-panel {
  display: grid;
  gap: 12px;
  padding: 12px 0 12px 18px;
  border-top: 1px solid var(--commit-border);
  border-bottom: 1px solid color-mix(in srgb, var(--commit-border) 65%, transparent);
  background: var(--commit-surface);
  position: relative;
}

.commit-page-panel::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--commit-text-soft);
  font: 11px/1 "Courier New", monospace;
}

.commit-page-panel-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.commit-page-panel-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commit-page-panel-index {
  color: var(--commit-text-soft);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.commit-page-copy {
  display: grid;
  gap: 10px;
}

.commit-page-copy p,
.commit-page-contact-line,
.commit-page-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--commit-text-dim);
}

.commit-page-quote {
  white-space: normal;
}

.commit-page-emphasis {
  color: var(--commit-text);
}

.commit-page-contact-line a {
  color: var(--commit-text);
}

.commit-page-panel-catalogues {
  gap: 10px;
}

.commit-page-badge {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--commit-border-strong);
  color: var(--commit-text-soft);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}

.photobooth-external-shell {
  display: grid;
  gap: 6px;
  min-height: 100%;
}

.photobooth-external-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photobooth-external-head .section-title {
  margin: 0;
}

.photobooth-external-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  color: var(--accent);
  text-decoration: none;
  font: 14px/1 "Courier New", monospace;
  flex: 0 0 auto;
}

.photobooth-external-link:hover {
  background: var(--bg-panel);
  text-decoration: none;
}

.photobooth-external-body {
  min-height: calc(100vh - 170px);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.photobooth-external-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 170px);
  border: 0;
  background: #000;
}

@keyframes commit-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
  .commit-page-shell {
    margin: 0;
    padding: 4px 0 8px 18px;
  }

  .commit-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .commit-page-panel {
    padding-left: 16px;
  }

  .photobooth-external-body,
  .photobooth-external-frame {
    min-height: calc(100vh - 150px);
    height: calc(100vh - 150px);
  }
}

/* Lightbox */
#lightbox-root{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:2000 }
#lightbox-root.active{ display:flex }
.lightbox-img{ max-width:92vw; max-height:92vh; border-radius:6px; border:1px solid #222 }
.lightbox-video{ display:none; width:min(94vw, 1200px); max-height:92vh; border-radius:8px; border:1px solid #222; background:#050505; }
#lightbox-root.is-video .lightbox-img{ display:none; }
#lightbox-root.is-video .lightbox-video{ display:block; }
#lightbox-root.is-video .lightbox-video + .plyr,
#lightbox-root.is-video .plyr{
  width:min(94vw, 1200px);
  max-height:92vh;
}
.lightbox-ui{ position:fixed; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
.lb-btn{ pointer-events:auto; background:rgba(17,17,17,.7); border:1px solid #2a2a2a; color:#eee; width:42px; height:42px; border-radius:6px; display:grid; place-items:center; font-size:18px; margin:12px }
.lb-close{ position:fixed; top:10px; right:10px }
.lb-counter{ position:fixed; bottom:12px; left:50%; transform:translateX(-50%); color:#aaa; font-size:12px; background:rgba(0,0,0,.5); padding:4px 8px; border-radius:6px; border:1px solid #2a2a2a }

/* Editions */
.editions-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px }
.edition-card{ border:1px solid #212121; background:#0c0c0c; border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:8px }
.edition-cover{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; border:1px solid #202020 }
.edition-title{ font-size:12px; color:#e0e0e0 }
.edition-meta{ font-size:11px; color:#8a8a8a }

/* Music */
.albums{ display:grid; gap:16px }
.album{ border:0; border-top:1px solid #2a2a2a; border-bottom:1px solid #171717; background:transparent; border-radius:0; padding:16px 0 16px 24px; display:grid; grid-template-columns:120px 1fr; gap:16px; position:relative }
.album::before{ content:"[A]"; position:absolute; left:0; top:16px; font:11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#7c7c7c }
.album-cover{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:0; border:1px solid #202020 }
.album-title{ font-size:13px; color:#e0e0e0; margin-bottom:6px }
.album-player-wrap{ border-top:1px solid #1f1f1f; border-bottom:1px solid #161616; background:rgba(255,255,255,.015); border-left:0; border-right:0; border-radius:0; padding:10px 0; margin:8px 0 10px; }
.album-player-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.album-play-toggle{
  font:11px ui-monospace, Menlo, monospace;
  background:#111;
  border:1px solid #2a2a2a;
  color:#cfcfcf;
  padding:4px 10px;
  border-radius:4px;
  cursor:pointer;
}
.album-time{ font-size:11px; color:var(--muted); }
.album-waveform{ min-height:72px; }
.album-player{ width:100%; margin:8px 0 10px; }
.tracks{ display:grid; gap:6px }
.track{ display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid #1d1d1d; border-bottom:1px solid #131313; background:transparent; border-radius:0; padding:8px 0 }
.track.active{ border-top-color: var(--accent); background-image: repeating-linear-gradient(135deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%); background-size: 10px 100%, 10px 100%, auto; background-position: left top, right top, left top; background-repeat: no-repeat, no-repeat, no-repeat; }
.track-name{ font-size:12px; color:#cfcfcf }
.track-name small{ color: var(--muted); font-size: 11px; margin-left: 6px; }
.track .play{ font:11px ui-monospace, Menlo, monospace; background:#111; border:1px solid #2a2a2a; color:#cfcfcf; padding:3px 8px; border-radius:4px; cursor:pointer }

/* Logs feed (console look) */
.feed { 
  display: grid; 
  gap: 14px;
}

.post {
  border: 1px solid var(--log-border);
  background: color-mix(in srgb, var(--bg) 88%, black);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px var(--accent-soft) inset;
}

.post::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}

.post-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0;
  appearance: none;
  padding: 8px 10px;
  background: var(--log-head-bg);
  border-bottom: 1px solid var(--log-border);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.post-id {
  font-weight: 600;
  color: var(--accent);
}

.post-path {
  color: var(--accent-dim);
  margin-left: 6px;
}

.post-ts {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.post-kind {
  color: var(--accent-dim);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-title {
  padding: 10px 12px 2px;
  color: var(--log-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.post-summary {
  padding: 0 12px 10px;
  color: #b4b4b4;
  font-size: 12px;
  line-height: 1.45;
}

.post-body {
  padding: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--log-border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, black);
}

.post.active {
  border-color: var(--accent);
}

.post.active::before {
  width: 4px;
}

.post.active .post-head {
  background: color-mix(in srgb, var(--log-head-bg) 78%, var(--accent-soft));
}

.post-modules {
  display: grid;
  gap: 14px;
}

.logs-root .feed {
  gap: 10px;
}

.logs-root .proj-section {
  margin: 0;
}

.post-text {
  color: var(--log-text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.post-media {
  border-top: 1px solid var(--log-border);
  background: var(--surface);
}

.post-media img, 
.post-media video {
  width: 100%;
  height: auto;
  display: block;
}

.log-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}

.sentinel {
  height: 24px;
}

.term {
  font-size: 13px;
  color: var(--log-text);
}

.tline {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.tstamp {
  color: var(--muted);
  opacity: 0.6;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tprompt {
  color: var(--accent);
  font-weight: bold;
}

.tout {
  white-space: pre-wrap;
  color: var(--ink);
}


/* Man-page (manifesto) — MAN(7) header/footer */
.man { display:grid; grid-template-columns: 220px 1fr; gap:16px; }
.man .gutter{ border-right:1px solid #1f1f1f; padding-right:12px; color:#9aa; }
.man .gutter .title{ font-weight:700; letter-spacing:.5px; color:#cfd3 }
.man .gutter nav{ margin-top:8px; display:grid; gap:6px }
.man .gutter a{ color:#9fd2ff; text-decoration:none }
.man .gutter a:hover{ text-decoration:underline }
.man .content{ padding-left:4px }
.man-header, .man-footer{ display:flex; justify-content:space-between; color:#a8a8a8; font-size:11px; letter-spacing:.6px; text-transform:uppercase; border-bottom:1px solid #1f1f1f; padding-bottom:6px; margin-bottom:10px }
.man-footer{ border-top:1px solid #1f1f1f; border-bottom:0; padding-top:6px; margin-top:16px }
.man h2{ font-size:12px; letter-spacing:.8px; color:#cfcfcf; border-bottom:1px dashed #2a2a2a; padding-bottom:4px; margin:18px 0 8px }
.man p, .man ul{ font-size:13px; color:#d0d0d0; margin:8px 0 }
.man code{ background:#111; border:1px solid #222; padding:1px 4px; border-radius:4px }
.man blockquote{ margin:8px 0; padding-left:10px; border-left:2px solid #333; color:#aab }
.kbd{ display:inline-block; border:1px solid #333; padding:1px 4px; border-radius:4px; background:#0f0f0f; }

/* Manifest (code block style) */
.code-snippet{ background:#0b0b0b; border:1px solid #1f1f1f; border-radius:8px; padding:10px; margin-top:12px; overflow:auto }
.code-snippet code{ font-family: ui-monospace, Menlo, Consolas, monospace; font-size:13px; color:#d8f3c9 }

/* Events — conceptual clock */
.clock{ display:grid; gap:8px; border:1px solid #212121; background:#0b0b0b; border-radius:8px; padding:16px; text-align:center }
.clock .now{ font-size:32px; line-height:1; letter-spacing:.08em; font-variant-numeric:tabular-nums; text-shadow:0 0 8px rgba(159,210,255,.15) }
.clock .count{ font-size:12px; color:#9aa }
.clock .label{ color:#cfcfcf; text-transform:uppercase; font-size:11px; letter-spacing:.4px }
.glitch{ position:relative; display:inline-block }
.glitch::before, .glitch::after{ content:attr(data-text); position:absolute; left:0; right:0; top:0; mix-blend-mode:screen; opacity:.25; }
.glitch::before{ transform:translateX(-1px); color:#9fd2ff; animation:gx 2.2s infinite steps(2,end) }
.glitch::after{ transform:translateX(1px); color:#ff9fd2; animation:gy 1.8s infinite steps(2,end) }
@keyframes gx{ 0%, 89% {transform:translateX(0)} 90%{transform:translateX(-2px)} 92%{transform:translateX(2px)} 94%{transform:translateX(-1px)} 100%{transform:translateX(0)} }
@keyframes gy{ 0%, 92% {transform:translateX(0)} 93%{transform:translateX(2px)} 96%{transform:translateX(-1px)} 100%{transform:translateX(0)} }

.pb-root {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
}

.pb-tree-root {
  display: grid;
  gap: 10px;
}

.pb-date-menu {
  flex-wrap: wrap;
}

.pb-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pb-chip-count {
  color: #8f8f8f;
  font-size: 11px;
}

.pb-level-wrap {
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 86%, black);
  padding: 10px;
}

.lab-root {
  display: grid;
  gap: 10px;
}

.lab-tool-menu {
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.lab-tool-chip {
  display: grid;
  gap: 6px;
  text-align: left;
  justify-items: start;
  white-space: normal;
  width: 100%;
  min-width: 0;
  padding: 12px 14px 12px 24px;
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  border-radius: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px);
  background-size: 10px 100%, 10px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
}

.lab-tool-chip::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 12px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.lab-tool-chip:hover,
.lab-tool-chip:focus-visible,
.lab-tool-chip.active {
  border-top-color: #bdbdbd;
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%);
  background-size: 10px 100%, 10px 100%, auto;
  background-position: left top, right top, left top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transform: translateX(4px);
}

.lab-tool-node {
  min-height: 10px;
}

.lab-tool-panel {
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  border-radius: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px);
  background-size: 10px 100%, 10px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 14px 0 14px 24px;
  display: grid;
  gap: 10px;
  position: relative;
}

.lab-tool-panel::before {
  content: "[L]";
  position: absolute;
  left: 0;
  top: 14px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.lab-open-link {
  text-decoration: none;
}

.lab-frame-wrap {
  border: 1px solid #232323;
  border-radius: 8px;
  overflow: hidden;
  background: #060606;
}

.lab-frame-loading {
  margin: 10px;
}

.lab-frame {
  width: 100%;
  min-height: 74vh;
  border: 0;
  display: block;
}

.pb-sidebar {
  border: 1px solid #1f1f1f;
  background: color-mix(in srgb, var(--bg-panel) 86%, black);
  border-radius: 8px;
  padding: 10px;
}

.pb-heading {
  font-size: 12px;
  color: #adadad;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pb-event-list {
  display: grid;
  gap: 8px;
}

.pb-event-btn {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #101010;
  color: #d7d7d7;
  text-align: left;
  padding: 8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title count"
    "meta count";
  gap: 5px 8px;
}

.pb-event-btn:hover,
.pb-event-btn.active {
  border-color: #454545;
  background: #141414;
}

.pb-event-title {
  grid-area: title;
  font-size: 12px;
  color: #e6e6e6;
}

.pb-event-meta {
  grid-area: meta;
  font-size: 11px;
  color: #8f8f8f;
}

.pb-event-count {
  grid-area: count;
  align-self: center;
  border: 1px solid #2d2d2d;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: #b6d4ff;
}

.pb-main {
  display: grid;
  gap: 10px;
}

.pb-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.pb-title {
  margin-bottom: 4px;
}

.pb-actions {
  display: flex;
  gap: 8px;
}

.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.pb-grid.is-gridzy {
  display: block;
}

.pb-grid.is-masonry {
  display: block;
  --masonry-gap: 10px;
}

.pb-grid.is-masonry::after {
  content: "";
  display: block;
  clear: both;
}

.pb-grid.is-masonry .pb-card {
  float: left;
  width: calc((100% - (var(--masonry-gap) * (var(--cols, 5) - 1))) / var(--cols, 5));
  margin-bottom: var(--masonry-gap);
}

.pb-card {
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px); background-size: 10px 100%, 10px 100%; background-position: left top, right top; background-repeat: no-repeat; background-color: transparent;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 120ms linear, background-color 120ms linear, border-color 120ms linear;
}

.pb-card:hover {
  border-top-color: #bdbdbd;
  background-image: repeating-linear-gradient(135deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205,205,205,.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%); background-size: 10px 100%, 10px 100%, auto; background-position: left top, right top, left top; background-repeat: no-repeat, no-repeat, no-repeat;
  transform: translateX(4px);
}

.pb-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a0a0a;
}

.pb-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pb-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-top: 1px solid #1f1f1f;
  font-size: 11px;
  color: #b5b5b5;
}

@media (max-width: 900px) {
  .pb-root {
    grid-template-columns: 1fr;
  }
}

/* Content architecture v2 */
.proj-section {
  margin: 0 0 34px 0;
  padding: 10px 0 4px 12px;
  border-left: 0;
}
.proj-subtitle { margin: 0 0 10px 0; font-size: 12px; color: #d9d9d9; letter-spacing: .03em; }
.proj-markdown { color: #d0d0d0; line-height: 1.7; font-size: 15px; }
.proj-markdown p { margin: 0 0 10px 0; }
.proj-markdown h4, .proj-markdown h5 { margin: 0 0 10px 0; color: #ececec; font-size: 16px; }

.media-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(75%, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.media-carousel .media-item { scroll-snap-align: start; }

.media-carousel .media-item,
.media-splide .media-item {
  display: grid;
  place-items: center;
  background: #050505;
}

.media-splide .splide__track {
  border-radius: 8px;
}

.media-splide .splide__slide {
  padding: 0;
}

.media-splide .media-item {
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #141414;
  border-left: 0;
  border-right: 0;
}

.media-carousel .media-item img,
.media-carousel .media-item video,
.media-splide .media-item img,
.media-splide .media-item video {
  width: 100%;
  height: clamp(260px, 46vh, 520px);
  object-fit: contain;
  background: #050505;
}

.media-splide .splide__arrow {
  background: rgba(16, 16, 16, 0.8);
  border: 1px solid #343434;
  opacity: 1;
}

.media-splide .splide__arrow svg {
  fill: #e2e2e2;
}

.media-splide .splide__pagination__page {
  background: #626262;
}

.media-splide .splide__pagination__page.is-active {
  background: var(--accent);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 12px;
}

.media-grid.is-gridzy {
  display: block;
}

.media-grid.is-masonry {
  display: block;
  --masonry-gap: 12px;
}

.media-grid.is-masonry::after {
  content: "";
  display: block;
  clear: both;
}

.media-grid.is-masonry .media-item {
  float: left;
  width: calc((100% - (var(--masonry-gap) * (var(--cols, 3) - 1))) / var(--cols, 3));
  margin-bottom: var(--masonry-gap);
}

.media-item {
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #141414;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0a0a0a;
}

.media-item .plyr {
  --plyr-color-main: var(--accent);
  --plyr-video-control-color: #e7e7e7;
  --plyr-video-controls-background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
  --plyr-tooltip-background: #101010;
  --plyr-tooltip-color: #e7e7e7;
  border-radius: 0;
}

.media-item img,
.media-item video,
.media-single img,
.media-full img {
  width: 100%;
  height: auto;
  display: block;
}

.media-single {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1f1f1f;
  background: #0a0a0a;
}
.media-single.mode-contained {
  width: min(100%, 980px);
}
.media-single.mode-fullwidth {
  width: 100%;
  max-width: none;
}
.media-single.mode-cover {
  width: 100%;
  max-width: none;
  height: var(--single-h, min(62vh, 560px));
}
.media-single.mode-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.media-single.bleed {
  margin-left: -12px;
  margin-right: -12px;
  width: calc(100% + 24px);
  max-width: none;
}

.media-full {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1f1f1f;
}

.media-full.bleed {
  margin-left: -12px;
  margin-right: -12px;
  width: calc(100% + 24px);
  max-width: none;
}

@media (max-width: 900px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-carousel { grid-auto-columns: minmax(88%, 1fr); }
  .media-carousel .media-item img,
  .media-carousel .media-item video,
  .media-splide .media-item img,
  .media-splide .media-item video { height: clamp(220px, 40vh, 400px); }
}

@media (max-width: 600px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* Landing gate */
body.landing-active {
  overflow: hidden;
}

#site-root {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  opacity: 1;
  transition: opacity 140ms linear;
}

#landing {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--bg1);
  color: var(--ink);
  display: grid;
  place-items: stretch;
  padding: 12px 24px 20px;
  overflow: hidden;
  transition: opacity 140ms linear;
}

#landing::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

#landing.is-leaving {
  opacity: 0;
}

#landing[hidden] {
  display: none !important;
}

.landing-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(360px, 0.98fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  align-content: stretch;
  align-items: start;
}

.landing-manifesto-shell {
  grid-column: 1;
  grid-row: 1;
  --landing-manifesto-offset: 33vh;
  margin: 0;
  padding-left: clamp(28px, 8vw, 108px);
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  scrollbar-width: none;
}

.landing-manifesto-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.landing-manifesto-track {
  min-height: 100%;
  padding-bottom: var(--landing-manifesto-offset);
  transform: translateY(var(--landing-manifesto-offset));
}

.landing-manifesto {
  position: relative;
  margin: 0;
  white-space: pre-wrap;
  overflow: visible;
  width: 100%;
  font-family: "Courier New", monospace;
  font-size: clamp(11px, 1.5vw, 15px);
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
}

.landing-manifesto::after {
  content: "";
  display: none;
  width: var(--landing-cursor-width, 0.72em);
  height: var(--landing-cursor-height, 1em);
  margin-left: var(--landing-cursor-offset, 0.25em);
  vertical-align: -0.1em;
  background: currentColor;
  box-shadow: 0 0 var(--landing-cursor-glow, 16px) color-mix(in srgb, var(--accent) calc(var(--landing-cursor-glow-alpha, 0.38) * 100%), transparent);
}

.landing-manifesto.is-waiting::after {
  display: inline-block;
  animation: landingCursorBlink var(--landing-cursor-blink-duration, 850ms) steps(1, end) infinite;
}

.landing-manifesto.is-typing::after {
  display: inline-block;
  opacity: 1;
}

.landing-manifesto.is-complete::after {
  display: inline-block;
  animation: landingCursorBlink var(--landing-cursor-blink-duration, 850ms) steps(1, end) infinite;
}

.landing-side {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--landing-side-hidden-translate-y, 28px), 0) scale(var(--landing-side-hidden-scale, 0.965));
  filter: blur(var(--landing-side-hidden-blur, 16px));
  pointer-events: none;
  justify-self: center;
  width: 100%;
}

.landing-side.is-pending {
  opacity: 0;
  visibility: hidden;
}

.landing-side.is-revealing,
.landing-side.is-visible {
  visibility: visible;
  pointer-events: auto;
}

.landing-side.is-revealing {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  animation: landingGateReveal var(--landing-gate-reveal-duration, 860ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.landing-side.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.landing-logo-shell {
  position: relative;
  width: 100%;
  max-width: min(var(--landing-logo-max-width, 780px), 98%);
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
  aspect-ratio: 1570 / 1736;
  isolation: isolate;
}

.landing-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  transition: opacity 220ms ease;
  position: relative;
  z-index: 1;
}

.landing-logo-shell.is-fx-active .landing-logo {
  opacity: 0;
}

.landing-logo-shell.is-fx-settling .landing-logo {
  opacity: 0.72;
}

.landing-logo-ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 120ms steps(2, end);
}

.landing-logo-ghost-a {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 72%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 30%, transparent));
}

.landing-logo-ghost-b {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 18px color-mix(in srgb, #7df9ff 75%, transparent))
    drop-shadow(0 0 30px color-mix(in srgb, #7df9ff 26%, transparent));
}

.landing-logo-shell.is-fallback-active .landing-logo {
  opacity: 0.16;
}

.landing-logo-shell.is-fallback-active .landing-logo-ghost {
  opacity: 0.95;
}

.landing-logo-shell.is-fallback-active .landing-logo-ghost-a {
  transform: translate3d(var(--landing-logo-glitch-shift-a, 0px), var(--landing-logo-glitch-shift-y, 0px), 0);
  clip-path: inset(var(--landing-logo-glitch-slice-top, 0%) 0 calc(100% - var(--landing-logo-glitch-slice-bottom, 100%)) 0);
}

.landing-logo-shell.is-fallback-active .landing-logo-ghost-b {
  transform: translate3d(var(--landing-logo-glitch-shift-b, 0px), calc(var(--landing-logo-glitch-shift-y, 0px) * -0.6), 0);
  clip-path: inset(calc(var(--landing-logo-glitch-slice-top, 0%) * 0.55) 0 calc(100% - min(100%, calc(var(--landing-logo-glitch-slice-bottom, 100%) + 12%))) 0);
}

.landing-logo-shell canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}

.landing-logo-shell.is-fx-active canvas {
  opacity: 1;
}

.landing-logo-shell.is-fx-settling canvas {
  opacity: 0.38;
}

.landing-side.is-revealing #enter-site,
.landing-side.is-visible #enter-site {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.landing-side.is-revealing #enter-site {
  animation: landingButtonReveal var(--landing-button-reveal-duration, 840ms) cubic-bezier(0.22, 1, 0.36, 1) 1;
}

#enter-site {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  background: rgba(0, 0, 0, 0.88);
  color: var(--accent);
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, var(--landing-button-hidden-translate-y, 12px), 0);
  transition: opacity 140ms linear, transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

#enter-site:hover,
#enter-site:focus-visible {
  background: var(--accent);
  color: #050505;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent);
}

#enter-site:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  #landing {
    padding: 12px 16px 16px;
    min-height: 100dvh;
    height: 100dvh;
  }

  #site-root,
  #wrap {
    min-height: 100dvh;
    height: 100dvh;
  }

  .landing-inner {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
  }

  .landing-side,
  .landing-manifesto-shell {
    grid-column: 1;
    padding-left: 0;
  }

  .landing-side {
    grid-row: 1;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    max-height: min(38dvh, 360px);
    min-height: 0;
  }

  .landing-logo-shell {
    width: min(100%, 250px);
    max-width: 250px;
    max-height: min(30dvh, 280px);
    margin-inline: auto;
    overflow: visible;
  }

  .landing-logo {
    object-position: center top;
  }

  .landing-manifesto-shell {
    grid-row: 2;
    padding-left: 0;
    padding-right: 2px;
    min-height: 0;
    max-height: 100%;
    --landing-manifesto-offset: clamp(42px, 10dvh, 78px);
  }

  .landing-manifesto-track {
    min-height: auto;
  }

  .landing-manifesto {
    text-align: left;
    font-size: clamp(10px, 2.7vw, 13px);
    line-height: 1.38;
  }

  .mobile-module-root,
  .mobile-drilldown-root {
    gap: 12px;
  }

  #corner-logo {
    display: none;
  }
}

@media (max-width: 700px) {
  #landing {
    padding: 10px 12px 14px;
  }

  .landing-inner {
    position: relative;
    display: block;
    min-height: 100%;
  }

  .landing-side {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: min(100%, 268px);
    margin-inline: auto;
    transform: none;
    gap: 10px;
    max-height: none;
    z-index: 3;
  }

  .landing-side.is-revealing,
  .landing-side.is-visible {
    animation: none;
    transform: none;
    filter: none;
  }

  .landing-logo-shell {
    width: min(100%, 268px);
    max-width: 268px;
    max-height: min(42dvh, 360px);
    height: auto;
    min-height: 0;
    aspect-ratio: 1570 / 1736;
    overflow: visible;
    flex: 0 0 auto;
  }

  .landing-logo,
  .landing-logo-ghost,
  .landing-logo-shell canvas {
    width: 100%;
    height: 100%;
  }

  #enter-site {
    top: 12px;
    right: 12px;
  }

  .landing-side.is-revealing #enter-site {
    animation: none;
  }

  .landing-side.is-revealing #enter-site,
  .landing-side.is-visible #enter-site {
    transform: none;
  }

  .landing-manifesto-shell {
    position: relative;
    z-index: 1;
    height: 100%;
    max-height: 100%;
    padding-top: calc(100dvh - 25px - 1.34em);
    padding-bottom: clamp(18px, 4dvh, 34px);
    --landing-manifesto-offset: 0px;
    box-sizing: border-box;
  }

  .landing-manifesto {
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.34;
  }

  .landing-manifesto-track {
    min-height: calc(100% + min(16dvh, 112px));
    padding-bottom: clamp(72px, 15dvh, 132px);
    transform: translateY(var(--landing-manifesto-offset));
  }

  .landing-logo-shell.is-fx-active .landing-logo {
    opacity: 0;
  }

  .landing-logo-shell.is-fx-settling .landing-logo {
    opacity: 0.72;
  }

  .landing-logo-shell.is-fx-active canvas {
    opacity: 1;
  }

  .landing-logo-shell.is-fx-settling canvas {
    opacity: 0.38;
  }

  .landing-logo-shell::before {
    display: none;
  }

  #enter-site {
    top: 10px;
    right: 10px;
    min-height: 24px;
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.05em;
    transform: none;
    transition: opacity 140ms linear, border-color 180ms ease, background-color 180ms ease;
  }

  .mobile-breadcrumb {
    gap: 5px;
    font-size: 10px;
  }

  .mobile-stack-list,
  .mobile-feed-list {
    gap: 8px;
  }

  #sidebar .vtitle {
    letter-spacing:.05rem;
  }

  .terminal-toggle {
    display: block;
  }

  #terminal-shell {
    left: 26px;
    right: 0;
    transform: none;
    width: auto;
    border-top-left-radius: 0;
    height: 0;
    border-top-color: transparent;
    box-shadow: none;
    background: var(--banner-bg);
    z-index: 950;
    pointer-events: none;
  }

  #terminal-shell.is-open {
    height: 172px;
    border-top-color: var(--border);
    box-shadow: inset 0 1px 0 var(--accent-soft);
    pointer-events: auto;
  }
}

@keyframes landingCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes landingGateReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--landing-gate-start-translate-y, 32px), 0) scale(var(--landing-gate-start-scale, 0.95));
    filter: blur(var(--landing-gate-start-blur, 18px));
  }
  18% {
    opacity: 0.22;
    transform: translate3d(var(--landing-gate-jitter-x1, -16px), var(--landing-gate-jitter-y1, -8px), 0) scale(var(--landing-gate-jitter-scale1, 1.02));
    filter: blur(var(--landing-gate-jitter-blur1, 9px));
  }
  41% {
    opacity: 0.9;
    transform: translate3d(var(--landing-gate-jitter-x2, 10px), var(--landing-gate-jitter-y2, 4px), 0) scale(var(--landing-gate-jitter-scale2, 0.99));
    filter: blur(var(--landing-gate-jitter-blur2, 4px));
  }
  68% {
    transform: translate3d(var(--landing-gate-jitter-x3, -6px), var(--landing-gate-jitter-y3, -2px), 0) scale(var(--landing-gate-jitter-scale3, 1.01));
    filter: blur(var(--landing-gate-jitter-blur3, 1.5px));
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes landingButtonReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--landing-button-start-translate-y, 18px), 0);
    letter-spacing: var(--landing-button-start-letter-spacing, 0.35em);
    filter: blur(var(--landing-button-start-blur, 6px));
  }
  42% {
    opacity: var(--landing-button-glitch-opacity1, 0.5);
    transform: translate3d(var(--landing-button-glitch-x1, -8px), var(--landing-button-glitch-y1, 6px), 0);
  }
  68% {
    opacity: var(--landing-button-glitch-opacity2, 0.88);
    transform: translate3d(var(--landing-button-glitch-x2, 5px), var(--landing-button-glitch-y2, -2px), 0);
    letter-spacing: var(--landing-button-glitch-letter-spacing, 0.18em);
    filter: blur(var(--landing-button-glitch-blur, 1px));
  }
  100% {
    opacity: 1;
    transform: none;
    letter-spacing: 0.08em;
    filter: none;
  }
}

@keyframes landingGlitchOverlay {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  20% {
    opacity: var(--landing-overlay-glitch-opacity, 0.72);
    transform: translate3d(var(--landing-overlay-glitch-x1, 18px), var(--landing-overlay-glitch-y1, -6px), 0);
  }
  55% {
    opacity: var(--landing-overlay-glitch-opacity2, 0.4);
    transform: translate3d(var(--landing-overlay-glitch-x2, -12px), var(--landing-overlay-glitch-y2, 5px), 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes landingGlitchFrame {
  0% {
    opacity: 0;
    transform: translate3d(var(--landing-frame-glitch-x-start, 12px), var(--landing-frame-glitch-y-start, -4px), 0);
  }
  30% {
    opacity: var(--landing-frame-glitch-start-opacity, 0.9);
    transform: translate3d(var(--landing-frame-glitch-x-peak, -8px), var(--landing-frame-glitch-y-peak, 4px), 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* Terminal bottom strip */
#terminal-shell {
  position: fixed;
  left: 26px;
  right: 0;
  transform: none;
  width: auto;
  bottom: 0;
  height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  box-shadow: none;
  background: var(--banner-bg);
  color: var(--ink);
  z-index: 900;
  transition: height 120ms linear, background-color 120ms linear;
  cursor: text;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#terminal-shell.is-open {
  height: 172px;
  background: var(--banner-bg);
  border-top-color: var(--border);
  box-shadow: inset 0 1px 0 var(--accent-soft);
}

#corner-logo {
  position: fixed;
  right: 14px;
  bottom: 18px;
  width: 96px;
  z-index: 2600;
  opacity: 0.75;
  transition: opacity 120ms linear;
}

#corner-logo:hover,
#corner-logo:focus-visible {
  opacity: 1;
}

#corner-logo img {
  width: 100%;
  display: block;
  filter: brightness(0) invert(1);
}

.terminal-log {
  height: 132px;
  overflow: auto;
  padding: 10px 12px 0;
  font-size: 12px;
  line-height: 1.35;
  font-family: "Courier New", monospace;
}

.terminal-line {
  margin: 0 0 5px;
  white-space: pre-wrap;
}

.terminal-form {
  height: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 0 12px;
}

.terminal-prompt {
  font-size: 12px;
  color: var(--accent);
}

#terminal-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Courier New", monospace;
  font-size: 12px;
  outline: none;
}

.terminal-line.muted { color: var(--muted); }
.terminal-line.ok { color: var(--accent); }
.terminal-line.error { color: #ff6b8a; }

/* Shared left-edge motif system */
.series-card,
.project-chip-media,
.album,
.pb-card {
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px);
  background-size: 10px 100%, 10px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-color: transparent;
}

.series-card:hover,
.series-card.active,
.pb-card:hover,
.track.active {
  background-size: 10px 100%, 10px 100%, auto;
  background-position: left top, right top, left top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.series-card:hover,
.pb-card:hover,
.track.active {
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%);
}

.series-card.active {
  background-image: repeating-linear-gradient(135deg, rgba(230, 230, 230, 0.4) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(230, 230, 230, 0.4) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%);
}




.pb-sidebar,
.pb-event-btn {
  border-radius: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.22) 0 2px, transparent 2px 6px);
  background-size: 10px 100%, 10px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-color: transparent;
}

.pb-sidebar {
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  padding: 12px 0 12px 24px;
  position: relative;
}

.pb-sidebar::before {
  content: "[P]";
  position: absolute;
  left: 0;
  top: 12px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.pb-event-btn {
  border: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #171717;
  padding: 10px 10px 10px 24px;
  border-radius: 0;
  position: relative;
}

.pb-event-btn::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 10px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.pb-event-btn:hover,
.pb-event-btn.active {
  border-top-color: #bdbdbd;
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%);
  background-size: 10px 100%, 10px 100%, auto;
  background-position: left top, right top, left top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transform: translateX(4px);
}

.proj-section.section-video {
  max-width: min(420px, 100%);
}

.proj-section.section-video .media-item,
.proj-section.section-video .media-item .plyr {
  max-width: min(420px, 100%);
}

.proj-section.section-video .media-item video,
.proj-section.section-video .media-item .plyr,
.proj-section.section-video .media-item .plyr video {
  max-height: 260px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .proj-section.section-video,
  .proj-section.section-video .media-item,
  .proj-section.section-video .media-item .plyr {
    max-width: 100%;
  }

  .proj-section.section-video .media-item video,
  .proj-section.section-video .media-item .plyr,
  .proj-section.section-video .media-item .plyr video {
    max-height: 220px;
  }
}

.series-card,
.project-chip-media,
.album,
.pb-card,
.pb-sidebar,
.pb-event-btn,
.lab-tool-chip,
.lab-tool-panel {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

.series-card,
.project-chip-media,
.album,
.pb-event-btn,
.lab-tool-chip,
.lab-tool-panel {
  padding-left: 28px;
}

.series-card:hover,
.series-card.active,
.pb-card:hover,
.track.active,
.lab-tool-chip:hover,
.lab-tool-chip:focus-visible,
.lab-tool-chip.active,
.pb-event-btn:hover,
.pb-event-btn.active {
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

.media-carousel {
  grid-auto-columns: max-content;
}

.media-splide .splide__slide {
  width: auto;
}

.media-splide .media-item {
  width: fit-content;
}

.media-splide .media-item img,
.media-splide .media-item video {
  width: auto;
  max-width: min(72vw, 640px);
  height: clamp(220px, 42vh, 420px);
  object-fit: contain;
}

@media (max-width: 700px) {
  .media-splide .media-item img,
  .media-splide .media-item video {
    max-width: 88vw;
    height: clamp(180px, 34vh, 300px);
  }
}

.pb-card {
  border: 0;
  background: transparent;
  background-image: none;
  padding: 0;
  transform: none;
}

.pb-card:hover,
.pb-card:focus-visible {
  border: 0;
  background: transparent;
  background-image: none;
  transform: none;
}

.pb-thumb-wrap {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
}

.pb-thumb {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pb-card-meta {
  padding: 4px 0 0;
  border-top: 0;
}

.pb-event-btn {
  border: 0;
  border-left: 3px solid #7c7c7c;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background-image: none;
  background-color: transparent;
  padding: 10px 10px 10px 16px;
}

.pb-event-btn::before {
  display: none;
}

.pb-event-btn:hover,
.pb-event-btn.active {
  border-left-color: #d0d0d0;
  background: rgba(255, 255, 255, 0.03);
  background-image: none;
  transform: none;
}

/* Final cleanup: cards use a single left border by default */
.series-card,
.project-chip-media,
.album,
.pb-sidebar,
.pb-event-btn,
.lab-tool-chip,
.lab-tool-panel,
.pb-card {
  border: 0;
  border-left: 2px solid #6f6f6f;
  background-image: none;
  background-color: transparent;
}

.series-card:hover,
.series-card.active,
.pb-event-btn:hover,
.pb-event-btn.active,
.lab-tool-chip:hover,
.lab-tool-chip:focus-visible,
.lab-tool-chip.active,
.pb-card:hover,
.pb-card:focus-visible,
.track.active {
  border: 0;
  border-left: 2px solid #d8d8d8;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.025);
}

/* Restore slashed left border */
.series-card,
.project-chip-media,
.album,
.pb-sidebar,
.pb-event-btn,
.lab-tool-chip,
.lab-tool-panel,
.pb-card {
  border-left: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.24) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: transparent;
}

.series-card:hover,
.series-card.active,
.pb-event-btn:hover,
.pb-event-btn.active,
.lab-tool-chip:hover,
.lab-tool-chip:focus-visible,
.lab-tool-chip.active,
.pb-card:hover,
.pb-card:focus-visible,
.track.active {
  border-left: 0;
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.025);
}

/* Photobooth event list */
/* Shared large card variant */
.pb-event-list {
  gap: 14px;
}

.pb-event-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title count"
    "meta count";
  gap: 8px 12px;
  width: 100%;
  min-width: 0;
  padding: 16px 18px 16px 28px;
  border: 0;
  border-radius: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.24) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
  transform: none;
}

.pb-event-btn::before {
  display: block;
  content: ">";
  position: absolute;
  left: 10px;
  top: 17px;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.pb-event-btn:hover,
.pb-event-btn.active {
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.025);
  transform: translateX(4px);
}

.pb-event-title {
  font-size: 15px;
  line-height: 1.25;
}

.pb-event-meta {
  font-size: 12px;
}

.pb-event-count {
  align-self: start;
  padding: 4px 10px;
  font-size: 12px;
}

/* Photobooth sidebar-specific override */
.pb-sidebar .pb-event-list {
  gap: 16px;
}

.pb-sidebar .pb-event-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title count"
    "meta count";
  gap: 9px 14px;
  width: 100%;
  min-width: 0;
  padding: 18px 20px 18px 32px;
  border: 0;
  border-radius: 0;
  background-image: repeating-linear-gradient(135deg, rgba(170, 170, 170, 0.24) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
  transform: none;
}

.pb-sidebar .pb-event-btn::before {
  display: block;
  content: ">";
  position: absolute;
  left: 12px;
  top: 19px;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7c7c7c;
}

.pb-sidebar .pb-event-btn:hover,
.pb-sidebar .pb-event-btn.active {
  background-image: repeating-linear-gradient(135deg, rgba(205, 205, 205, 0.34) 0 2px, transparent 2px 6px);
  background-size: 10px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.025);
  transform: translateX(4px);
}

.pb-sidebar .pb-event-title {
  font-size: 15px;
  line-height: 1.25;
}

.pb-sidebar .pb-event-meta {
  font-size: 12px;
  line-height: 1.45;
}

.pb-sidebar .pb-event-count {
  align-self: start;
  padding: 4px 10px;
  font-size: 12px;
}

/* Black theme: darker typography */
:root[data-theme="black"] {
  --ink: #f2f2f2;
  --accent: #f2f2f2;
  --accent-dim: #b8b8b8;
  --log-text: #f2f2f2;
  --muted: #8e8e8e;
  --bio-label: rgba(242, 242, 242, 0.82);
  --bio-value: #ffffff;
  --dir: #ffffff;
  --file: #f2f2f2;
  --link: #ffffff;
}

:root[data-theme="black"] body,
:root[data-theme="black"] .shell,
:root[data-theme="black"] .section-title,
:root[data-theme="black"] .proj-name,
:root[data-theme="black"] .proj-text,
:root[data-theme="black"] .proj-subtitle,
:root[data-theme="black"] .proj-markdown,
:root[data-theme="black"] .member-chip-name,
:root[data-theme="black"] .member-chip-meta,
:root[data-theme="black"] .member-chip-site,
:root[data-theme="black"] .member-chip-bio,
:root[data-theme="black"] .member-meta-inline,
:root[data-theme="black"] .member-site-inline,
:root[data-theme="black"] .member-bio-inline,
:root[data-theme="black"] .series-title,
:root[data-theme="black"] .series-subtitle,
:root[data-theme="black"] .series-period,
:root[data-theme="black"] .series-author,
:root[data-theme="black"] .series-date,
:root[data-theme="black"] .series-contrib,
:root[data-theme="black"] .album-title,
:root[data-theme="black"] .track-name,
:root[data-theme="black"] .edition-title,
:root[data-theme="black"] .edition-meta,
:root[data-theme="black"] .pb-heading,
:root[data-theme="black"] .pb-event-title,
:root[data-theme="black"] .pb-event-meta,
:root[data-theme="black"] .pb-event-count,
:root[data-theme="black"] .lab-tool-name,
:root[data-theme="black"] .lab-tool-meta,
:root[data-theme="black"] .folder-name,
:root[data-theme="black"] .member-name,
:root[data-theme="black"] .member-meta,
:root[data-theme="black"] .navbtn,
:root[data-theme="black"] .winbtn,
:root[data-theme="black"] .modal-titlebar .title,
:root[data-theme="black"] .man .gutter,
:root[data-theme="black"] .man .gutter .title,
:root[data-theme="black"] .man-header,
:root[data-theme="black"] .man-footer,
:root[data-theme="black"] .man h2,
:root[data-theme="black"] .man p,
:root[data-theme="black"] .man ul,
:root[data-theme="black"] .clock .count,
:root[data-theme="black"] .clock .label,
:root[data-theme="black"] .terminal-line,
:root[data-theme="black"] .listing th,
:root[data-theme="black"] .listing td.size,
:root[data-theme="black"] .listing td.date,
:root[data-theme="black"] footer,
:root[data-theme="black"] .hint,
:root[data-theme="black"] .crumbs a {
  color: #f2f2f2;
}

:root[data-theme="black"] .inline-crumb,
:root[data-theme="black"] .tag,
:root[data-theme="black"] .series-empty {
  color: #b8b8b8;
}