* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#FFFFFF; --bg2:#F5F5F3; --fg:#0C0C0C; --dim:#6f6964; --dim2:#d6d2cb;
  --panel:#FCFCFA; --line:rgba(12,12,12,0.14); --line-strong:rgba(12,12,12,0.30);
  --c-education:#1A6FB5; --c-research:#C0351A; --c-publications:#4B5563; --c-jobs:#0B7A5A;
  --c-creative:#C47B00; --c-skills:#6D28D9; --c-influences:#0E7490;
  --c-media:#B45309;
}
html,body {
  width:100%; height:100%; min-height:100dvh; overflow:hidden;
  background:var(--bg); color:var(--fg); font-family:'IBM Plex Mono',monospace;
}
body::before {
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(12,12,12,.015) 3px,rgba(12,12,12,.015) 4px);
  pointer-events:none; z-index:1000;
}

#ambient-net { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; opacity:.16; }

#canvas { position:fixed; top:0; left:0; bottom:42px; right:0; z-index:2; }
#canvas.interactive-foreground { z-index:130; }
#canvas svg { width:100%; height:100%; touch-action:none; }

#overview-hero {
  position:fixed; top:0; left:0; bottom:42px; width:min(47vw,760px);
  display:flex; align-items:center; justify-content:flex-start;
  padding:4vw 3.6vw 4vw 4.8vw; z-index:120; pointer-events:auto;
  opacity:0; transform:translateY(12px); text-align:left;
  transition:
    opacity .55s ease,
    transform .72s cubic-bezier(.19,1,.22,1);
}
#overview-hero.show { opacity:1; transform:translateY(0); }
#overview-hero.intro-stage {
  left:50%; width:min(92vw,1180px); padding:0 24px;
  justify-content:center; text-align:center; transform:translate(-50%,0);
}
#overview-hero.handoff-out { transition:none; }
#overview-hero.return-zone { cursor:pointer; }
#overview-hero.return-zone #hero-inner { cursor:default; }
#hero-inner {
  --hero-name-width:620px;
  max-width:620px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  opacity:1;
  transition:opacity .24s ease;
}
#overview-hero.handoff-out #hero-inner { opacity:0; }
#overview-hero.intro-stage #hero-inner {
  max-width:1100px;
  align-items:center;
}
#hero-kicker,
#hero-tip {
  display:none;
}
#hero-name {
  --hero-gap:.26em;
  font-size:clamp(42px,5.9vw,94px);
  line-height:.94; font-weight:700; letter-spacing:.14em;
  white-space:nowrap; min-height:1em; display:flex; align-items:flex-end; gap:0;
  justify-content:flex-start;
}
#overview-hero.intro-stage #hero-name { justify-content:center; }

#hero-name .name-part {
  display:inline-flex; align-items:flex-end;
}
#hero-name .first-name {
  transition:transform 1.18s cubic-bezier(.22,1,.36,1);
  transform-origin:right bottom;
  will-change:transform;
}
#hero-name .last-name {
  transition:transform 1.18s cubic-bezier(.22,1,.36,1);
  transform-origin:left bottom;
  will-change:transform;
}
#hero-name .space-gap {
  display:inline-block; width:var(--hero-gap);
  transition:width .72s cubic-bezier(.22,1,.36,1), opacity .42s ease;
}
#hero-name .char {
  display:inline-block; opacity:0; transform:translateY(12px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1), filter .6s ease;
  will-change:transform, opacity, filter;
}
#hero-name .char.visible { opacity:1; transform:translateY(0); }
#hero-name .char.fade-away { opacity:0 !important; transform:translateY(-1px) scale(.96); filter:blur(2px); }
#hero-meta {
  margin-top:24px;
  width:min(100%, calc(var(--hero-name-width, 620px) * 0.9));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  align-self:flex-start;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .72s ease, transform .98s cubic-bezier(.19,1,.22,1);
}
#overview-hero.desc-visible #hero-meta {
  opacity:1;
  transform:translateY(0);
}
#hero-desc {
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  align-self:flex-start;
  text-align:left;
  text-wrap:pretty;
  overflow-wrap:break-word;
  font-size:15px;
  line-height:1.92;
  color:#5f5955;
  letter-spacing:.02em;
}
#hero-links {
  width:auto;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  pointer-events:auto;
  flex-wrap:wrap;
}
.hero-icon-link {
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--fg);
  opacity:.66;
  transition:opacity .18s ease, transform .18s ease;
}
.hero-icon-link:hover {
  opacity:1;
  transform:translateY(-1px);
}
.hero-icon-link svg {
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#mode-trigger {
  display:inline-flex;
  align-items:center;
  position:relative;
  min-width:122px;
  padding:2px;
  border:1px solid rgba(12,12,12,.18);
  border-radius:999px;
  overflow:hidden;
  background:rgba(12,12,12,.66);
  backdrop-filter:blur(8px);
}
#mode-trigger.is-hidden {
  display:none;
}
#mode-trigger::before {
  content:'';
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  width:calc(50% - 2px);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 1px 6px rgba(12,12,12,.06);
  transform:translateX(0);
  transition:transform .22s cubic-bezier(.22,1,.36,1), background .18s ease;
}
#mode-trigger[data-active-mode='linear']::before {
  transform:translateX(calc(100% + 0px));
}
.mode-trigger-btn {
  position:relative;
  z-index:1;
  flex:1 1 0;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.92);
  font-family:'IBM Plex Mono',monospace;
  font-size:7.6px;
  letter-spacing:.11em;
  text-transform:uppercase;
  min-width:58px;
  padding:5px 8px;
  cursor:pointer;
  opacity:.46;
  transition:opacity .18s ease, color .18s ease;
}
.mode-trigger-btn.is-active {
  opacity:1;
  color:var(--fg);
}
.mode-trigger-btn:hover {
  opacity:.82;
}

#special-view {
  position:fixed; top:0; right:0; bottom:42px; left:52vw;
  z-index:125; display:none; align-items:flex-start; justify-content:center;
  padding:48px 44px 106px; pointer-events:auto;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
#special-view.show { display:flex; }
#special-view.is-short-sheet {
  align-items:center;
}
#special-view::-webkit-scrollbar { width:6px; }
#special-view::-webkit-scrollbar-thumb { background:rgba(12,12,12,0.18); }
#category-back {
  display:none;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  margin-left:4px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  box-shadow:none;
  transition:opacity .18s ease, transform .18s ease;
  opacity:.78;
}
#category-back.is-visible {
  display:inline-flex;
}
#category-back svg {
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#category-back:hover {
  opacity:1;
  transform:translateY(-1px);
}
#experience-prompt {
  position:fixed;
  inset:0 0 42px 0;
  z-index:126;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  pointer-events:none;
}
#experience-prompt.show {
  display:flex;
  pointer-events:auto;
}
#experience-prompt .xp-shell {
  min-width:min(320px, 92vw);
  padding:22px 24px 20px;
  border:1px solid var(--line);
  background:rgba(247,245,241,.94);
  box-shadow:0 18px 50px rgba(12,12,12,.08);
  backdrop-filter:blur(6px);
  text-align:center;
}
#experience-prompt .xp-kicker {
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:12px;
}
#experience-prompt .xp-copy {
  font-size:13px;
  line-height:1.7;
  color:#5f5955;
  margin-bottom:16px;
}
#experience-prompt .xp-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#experience-prompt .xp-btn {
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--fg);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:10px 13px;
  cursor:pointer;
  transition:all .16s ease;
}
#experience-prompt .xp-btn:hover {
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
#special-view .sv-shell {
  width:min(640px, 100%);
  margin:0 auto;
  padding:34px 34px 30px;
  position:relative;
  border:1px solid var(--line);
  background:rgba(247,245,241,.94);
  box-shadow:0 18px 50px rgba(12,12,12,.08);
  backdrop-filter:blur(6px);
}
#special-view .sv-mobile-stack {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#special-view .sv-mobile-stack .sv-shell {
  width:100%;
}
#special-view .sv-kicker {
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
#special-view .sv-title {
  font-size:28px; line-height:1.08; letter-spacing:.08em; font-weight:700;
  margin-bottom:16px;
}
#special-view .sv-copy {
  font-size:14px; line-height:1.9; color:#5f5955;
  margin-bottom:22px; max-width:52ch;
}
#special-view .sv-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
#special-view .sv-card {
  border:1px solid var(--line);
  background:#F1EEE8;
  padding:18px 18px 16px;
}
#special-view .sv-card-link {
  display:block;
  color:inherit;
  text-decoration:none;
}
#special-view .sv-card.is-clickable {
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#special-view .sv-card.is-clickable:hover {
  transform:translateY(-2px);
  border-color:var(--line-strong);
  background:#F5F2EC;
  box-shadow:0 10px 22px rgba(12,12,12,.06);
}
#special-view .sv-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  padding:9px 12px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--fg);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .16s ease;
}
#special-view .sv-back:hover {
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
#special-view .sv-article-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:-2px 0 18px;
}
#special-view .sv-chip {
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--line);
  color:var(--dim);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:#F1EEE8;
}
#special-view .sv-article-body {
  font-size:13.5px;
  line-height:1.95;
  color:#5f5955;
  max-width:60ch;
}
#special-view .sv-article-body p + p { margin-top:14px; }
#special-view .sv-article-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
#special-view .sv-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--fg);
  border:1px solid var(--line-strong);
  padding:10px 14px;
  transition:all .16s ease;
}
#special-view .sv-link:hover {
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
#special-view .sv-card-label {
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px;
}
#special-view .sv-card-title {
  font-size:15px; line-height:1.35; font-weight:700; letter-spacing:.04em;
  margin-bottom:10px;
}
#special-view .sv-card-body {
  font-size:12.5px; line-height:1.82; color:#5f5955;
}
#special-view .sv-note {
  margin-top:18px; font-size:11px; line-height:1.8; color:#7a7470;
  letter-spacing:.03em;
}
#special-view .sv-mobile-back-note {
  width:100%;
  margin-top:14px;
  text-align:center;
  font-size:10px;
  line-height:1.7;
  color:var(--dim);
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.74;
}
#special-view .sv-timeline-list {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}
#special-view .sv-timeline-item {
  border:1px solid var(--line);
  background:#F1EEE8;
  padding:18px 18px 16px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#special-view .sv-timeline-item:hover {
  transform:translateY(-2px);
  border-color:var(--line-strong);
  background:#F5F2EC;
  box-shadow:0 10px 22px rgba(12,12,12,.06);
}
#special-view .sv-timeline-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  min-width:0;
}
#special-view .sv-timeline-title {
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.04em;
}
#special-view .sv-timeline-date {
  flex:0 1 auto;
  max-width:none;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  border:1px solid var(--line);
  padding:6px 9px;
  background:#F7F5F1;
  white-space:nowrap;
  text-align:right;
}
#special-view .sv-timeline-meta {
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:8px;
}
#special-view .sv-timeline-body {
  font-size:12.5px;
  line-height:1.82;
  color:#5f5955;
}
#group-tray {
  display:none !important; position:fixed; bottom:42px; left:0; right:0; min-height:58px;
  align-items:center; justify-content:center; gap:8px; z-index:160;
  padding:10px 28px; overflow-x:auto; overflow-y:hidden;
  background:linear-gradient(to top, var(--bg) 55%, transparent 100%);
  scrollbar-width:none; scroll-snap-type:x proximity;
}
#group-tray::-webkit-scrollbar { display:none; }
.tray-pill {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  padding:9px 17px; border:1px solid; background:transparent;
  cursor:pointer; text-transform:uppercase; transition:all .15s; opacity:.28;
  flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;
  border-color:var(--line-strong); color:var(--fg);
}
.tray-pill:hover { opacity:.72; }
.tray-pill.active {
  opacity:1; background:var(--fg); color:var(--bg) !important; border-color:var(--fg) !important;
}
.tray-pill.overview-pill { border-color:var(--line-strong); }

#panel {
  position:fixed; top:0; bottom:42px; right:-676px; width:652px;
  background:var(--panel); border-left:1px solid var(--line);
  z-index:180; transition:right .22s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
#panel.open { right:0; }
#panel-scroll { height:100%; overflow-y:auto; padding:34px 38px 52px; }
#panel-scroll::-webkit-scrollbar { width:2px; }
#panel-scroll::-webkit-scrollbar-thumb { background:var(--line-strong); }
#p-close {
  position:absolute; top:16px; right:16px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.1em; background:none; border:1px solid var(--line-strong);
  color:var(--fg); padding:8px 11px; cursor:pointer; transition:all .12s;
}
#p-close:hover { background:var(--fg); color:var(--bg); }
#p-cat  { font-size:10px; letter-spacing:.26em; text-transform:uppercase; margin-bottom:10px; }
#p-title{ font-size:30px; font-weight:700; line-height:1.12; white-space:pre-line; margin-bottom:18px; padding-right:96px; }
#p-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.p-meta-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:8px 10px;
  border:1px solid var(--line);
  background:#F7F5F1;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
#p-summary {
  display:none;
  font-size:16px;
  line-height:1.86;
  color:#4f4945;
  margin-bottom:22px;
  max-width:42ch;
}
#p-summary.show { display:block; }
#p-body {
  display:none;
  font-size:15.5px; line-height:2.06; color:#5a5450; white-space:pre-line;
  border-top:1px solid var(--line); padding-top:22px; margin-bottom:30px;
}
#p-body.show { display:block; }
.p-section {
  display:none;
  margin-bottom:24px;
}
.p-section.show { display:block; }
.p-section-label {
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:10px;
}
.p-bullet-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.p-bullet-item {
  position:relative;
  padding-left:16px;
  font-size:14.5px;
  line-height:1.86;
  color:#5a5450;
}
.p-bullet-item::before {
  content:'';
  position:absolute;
  left:0;
  top:.75em;
  width:6px;
  height:6px;
  border:1px solid rgba(12,12,12,.26);
}
#p-actions {
  display:none;
  flex-direction:column;
  gap:10px;
}
#p-actions.show { display:flex; }
.panel-link,
.panel-resource {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  color:inherit;
  transition:color .16s ease;
}
.panel-link:hover,
.panel-resource:hover { color:var(--fg); }
.panel-resource {
  padding:12px 0;
  border-top:1px solid var(--line);
}
.panel-resource:first-child {
  border-top:none;
  padding-top:0;
}
.panel-resource-main { min-width:0; }
.panel-resource-label {
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg);
}
.panel-resource-meta {
  display:block;
  margin-top:5px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.panel-resource-arrow {
  font-size:14px;
  color:#8a847f;
  line-height:1;
}
#p-conn-head {
  font-size:10px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; margin-bottom:12px;
}
.conn-group-label {
  font-size:9px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; margin:18px 0 8px;
}
.ci {
  font-size:12px; padding:13px 0; border-bottom:1px solid var(--line); color:#6a6460;
  cursor:pointer; display:flex; align-items:flex-start; gap:12px; transition:color .12s;
}
.ci:hover { color:var(--fg); }
.ci-dot { width:7px; height:7px; border:1px solid #999; flex-shrink:0; margin-top:5px; }
.ci-main { flex:1; min-width:0; }
.ci-label { display:block; line-height:1.4; }
.ci-meta { display:flex; align-items:center; gap:8px; margin-top:6px; }
.ci-badge { font-size:9px; letter-spacing:.12em; color:#888; text-transform:uppercase; border:1px solid var(--line-strong); padding:4px 8px; }
.ci-arrow { font-size:14px; color:#bbb; line-height:1; padding-top:2px; }

#footer {
  position:fixed; bottom:0; left:0; right:0; min-height:42px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.96); z-index:220;
  display:flex; align-items:center; justify-content:center; padding:6px 22px;
}
#footer-copy {
  font-size:10px;
  color:var(--dim);
  letter-spacing:.09em;
  text-transform:uppercase;
}
#footer-hint { display:none !important; }
.ftext { font-size:10px; color:var(--dim); letter-spacing:.07em; }
.ftext a { color:var(--dim); text-decoration:none; }
.ftext a:hover { color:var(--fg); }

button, .tray-pill, .ci, a { touch-action:manipulation; }

@media (max-width:1100px) {
  #hero-name { font-size:clamp(38px,5.2vw,76px); }
  #overview-hero { width:min(50vw,640px); padding-left:4vw; }
  #hero-meta { width:min(100%, calc(var(--hero-name-width, 560px) * 0.9)); }
}
@media (max-width:1100px) and (min-width:681px) {
  #overview-hero {
    pointer-events:none;
  }
  #hero-inner {
    pointer-events:none;
  }
  #hero-links,
  #hero-links a,
  #mode-trigger,
  #mode-trigger *,
  #category-back {
    pointer-events:auto;
  }
  #special-view .sv-grid {
    grid-template-columns:1fr;
  }
}
@media (max-width:920px) {
  #panel { width:min(92vw,470px); right:-94vw; }
  #overview-hero { width:min(54vw,520px); padding-left:28px; padding-right:18px; }
  #hero-meta { width:min(100%, calc(var(--hero-name-width, 500px) * 0.9)); }
  #special-view { left:48vw; padding:38px 26px 50px; }
  #special-view.is-short-sheet {
    justify-content:center;
  }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px) {
  #overview-hero {
    pointer-events:none;
  }
  #hero-inner {
    pointer-events:none;
  }
  #hero-links,
  #hero-links a,
  #mode-trigger,
  #mode-trigger * {
    pointer-events:auto;
  }
  html, body {
    height:auto;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #canvas { bottom:36px; }
  #canvas {
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #canvas svg {
    display:block;
    height:auto;
    min-height:100%;
    touch-action:pan-y;
  }
  #overview-hero {
    top:0;
    bottom:36px;
    width:min(46vw,430px);
    align-items:flex-start;
    padding:12px 14px 8px 24px;
  }
  #overview-hero.intro-stage {
    align-items:center;
  }
  #hero-inner {
    max-width:400px;
  }
  #hero-name {
    font-size:clamp(26px,7.2vw,54px);
    letter-spacing:.11em;
    line-height:.9;
  }
  #hero-meta {
    margin-top:10px;
    width:min(100%, 392px);
    gap:8px;
  }
  #hero-desc {
    font-size:10.5px;
    line-height:1.58;
    max-width:38ch;
  }
  #hero-links {
    gap:8px;
  }
  .hero-icon-link {
    width:20px;
    height:20px;
  }
  .hero-icon-link svg {
    width:16px;
    height:16px;
  }
  #special-view {
    left:42vw;
    bottom:36px;
    padding:18px 16px 22px;
  }
  #special-view .sv-shell {
    padding:22px 22px 20px;
  }
  #footer {
    min-height:36px;
    padding:4px 16px;
  }
  #footer-copy,
  .ftext {
    font-size:8px;
    line-height:1.15;
  }
}
@media (max-width:680px) {
  html, body {
    height:auto;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #canvas {
    top:0;
    bottom:44px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #canvas svg {
    display:block;
    height:auto;
    min-height:100%;
    touch-action:pan-y;
  }
  #mode-trigger {
    position:static;
    left:auto;
    bottom:auto;
    transform:none;
    z-index:auto;
    margin-left:auto;
    flex-shrink:0;
  }
  .mode-trigger-btn {
    font-size:7.2px;
    letter-spacing:.1em;
    padding:4px 6px;
    min-width:54px;
  }
  #special-view {
    left:0; top:0; bottom:44px; padding:8px 18px 86px;
    align-items:flex-start;
    overscroll-behavior:auto;
  }
  #experience-prompt {
    inset:0 0 44px 0;
    padding:18px;
  }
  #experience-prompt .xp-shell {
    min-width:0;
    width:100%;
    max-width:320px;
    padding:18px 18px 16px;
  }
  #experience-prompt .xp-actions {
    gap:8px;
  }
  #experience-prompt .xp-btn {
    font-size:9px;
    padding:9px 11px;
  }
  #special-view .sv-shell {
    width:100%; padding:18px 20px 22px;
  }
  #special-view .sv-title { font-size:22px; }
  #special-view .sv-copy { font-size:13px; line-height:1.85; }
  #special-view .sv-grid { grid-template-columns:1fr; }
  #overview-hero {
    top:0; left:0; right:0; bottom:auto; width:auto; min-height:158px;
    padding:24px 22px 0; justify-content:center; text-align:center; transform:none;
  }
  #overview-hero.intro-stage {
    left:0; right:0; width:auto; height:calc(100dvh - 44px); padding:0 22px;
    justify-content:center; text-align:center; transform:none;
  }
  #hero-inner { max-width:100%; align-items:flex-start; }
  #hero-name {
    white-space:normal; font-size:clamp(28px,9vw,44px); letter-spacing:.12em;
    justify-content:center;
  }
  #overview-hero.intro-stage #hero-name {
    flex-wrap:wrap;
    row-gap:.08em;
  }
  #overview-hero.intro-stage #hero-name .name-part { display:flex; }
  #hero-name .space-gap.mobile-break {
    width:100%;
    flex-basis:100%;
    height:0;
  }
  #hero-meta {
    margin-top:14px;
    width:100%;
    gap:10px;
    align-items:flex-start;
  }
  #hero-links {
    width:auto;
    gap:9px;
    justify-content:flex-start;
  }
  #hero-desc {
    width:100%;
    max-width:none;
    font-size:12px;
    line-height:1.82;
  }
  #group-tray {
    bottom:44px; justify-content:flex-start; padding:6px 18px; gap:10px;
    min-height:44px; border-top:1px solid rgba(12,12,12,0.06);
  }
  .tray-pill {
    font-size:10px; padding:10px 14px; min-height:38px;
    display:flex; align-items:center;
  }
  #panel {
    top:auto; bottom:0; left:0; right:0; width:100%; height:min(68vh,560px);
    border-left:none; border-top:1px solid var(--line);
    transform:translateY(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  #panel.open { right:0; transform:translateY(0); }
  #panel-scroll { padding:24px 20px 32px; }
  #p-close { top:14px; right:14px; }
  #p-title { font-size:21px; padding-right:64px; }
  #p-meta { gap:6px; margin-bottom:14px; }
  .p-meta-chip { font-size:8px; padding:7px 9px; min-height:24px; }
  #p-summary { font-size:13px; line-height:1.75; margin-bottom:18px; }
  #p-body { font-size:12.8px; line-height:1.9; }
  .p-section { margin-bottom:18px; }
  .p-bullet-item { font-size:12.5px; line-height:1.8; }
  .panel-resource-label { font-size:10px; }
  .panel-resource-meta { font-size:8.5px; }
  .ci { font-size:12px; padding:13px 0; }
  #footer {
    min-height:44px;
    padding:4px 18px;
    align-items:center;
    justify-content:space-between;
  }
  #footer-copy {
    position:absolute;
    left:18px;
    font-size:8.2px;
    line-height:1.2;
    text-align:left;
    transform:none;
    transition:left .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1);
  }
  #footer.is-intro-only #footer-copy {
    left:50%;
    text-align:center;
    transform:translateX(-50%);
  }
  #footer #mode-trigger {
    position:absolute;
    right:18px;
    opacity:1;
    transform:translateY(0);
    transition:opacity .28s ease, transform .36s cubic-bezier(.22,1,.36,1);
  }
  #footer.is-intro-only #mode-trigger {
    opacity:0;
    transform:translateY(4px);
    pointer-events:none;
    transition:none;
  }
  .ftext { font-size:8.5px; line-height:1.2; }
}