@font-face {
  font-family:Public Sans;
  src:url('/assets/fonts/public-sans.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:IBM Plex Mono;
  src:url('/assets/fonts/plex-mono.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
:root {
  --bg:#191b18;
  --surface:#20231e;
  --ink:#e9e9de;
  --muted:#a5aa9d;
  --line:#3b4035;
  --accent:#cadb7c;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Public Sans',Arial,sans-serif;
  --max:1280px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:auto;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
::selection {
  background:var(--accent);
  color:var(--bg);
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:var(--accent);
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
}
img,svg {
  max-width:100%;
}
p {
  margin:0 0 1.1em;
}
h1,h2,h3 {
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.04em;
  margin:0;
}
h2 {
  font-size:1.75rem;
}
h3 {
  font-size:1.5rem;
}
.site-shell {
  position:relative;
  z-index:1;
  max-width:var(--max);
  padding:0 48px;
  margin:auto;
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:120px;
  border-bottom:1px solid var(--line);
}
.identity {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:1rem;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.03em;
}
.identity-note {
  display:block;
  color:var(--muted);
  font:0.75rem/1.7 var(--mono);
  letter-spacing:0;
}
.monogram {
  font:500 1.5rem var(--mono);
  border:1px solid #717763;
  padding:5px 8px;
}
.monogram span {
  color:var(--accent);
}
nav {
  display:flex;
  gap:26px;
  font-size:0.875rem;
}
nav a {
  padding:12px 0;
  position:relative;
  color:var(--muted);
}
nav a[aria-current] {
  color:var(--ink);
}
nav a[aria-current]:after {
  position:absolute;
  content:'';
  height:3px;
  background:var(--accent);
  bottom:2px;
  left:0;
  width:16px;
}
.portfolio-link {
  font:0.75rem var(--mono);
  color:var(--muted);
}
.portfolio-link span {
  color:var(--accent);
  margin-left:10px;
}
.intro {
  padding:46px 0 64px;
}
.eyebrow {
  font:0.75rem/1.5 var(--mono);
  letter-spacing:.06em;
  display:block;
}
.intro>.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
}
.tiny-cross {
  font-size:1.375rem;
  color:var(--accent);
  line-height:1;
}
.edition {
  margin-left:auto;
}
.intro-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:60px;
  margin-top:42px;
  align-items:end;
}
.intro h1 {
  font-size:clamp(3rem,5.8vw,4.875rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.066em;
}
.intro h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--accent);
  letter-spacing:-.05em;
}
.intro-copy {
  max-width:380px;
  padding-top:8px;
  font-size:1rem;
}
.intro-copy p:last-of-type {
  font-size:0.9375rem;
  line-height:1.7;
}
.muted {
  color:var(--muted);
}
.accent {
  color:var(--accent);
}
.text-link {
  font-size:0.875rem;
  border-bottom:1px solid #666d57;
  padding-bottom:6px;
  display:inline-flex;
  gap:30px;
  align-items:center;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-bottom:22px;
}
.section-heading h2 {
  font-size:1.125rem;
  letter-spacing:-.03em;
}
.section-index {
  font:0.75rem var(--mono);
  color:var(--muted);
  margin-right:16px;
}
.section-heading>a {
  font:0.75rem var(--mono);
  color:var(--muted);
}
.bench {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  border:1px solid var(--line);
  background:var(--surface);
}
.bench-info {
  padding:34px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-right:1px solid var(--line);
}
.bench-info h3 {
  font-size:2.75rem;
  line-height:1.08;
  margin:24px 0 18px;
  letter-spacing:-.05em;
}
.bench-info p {
  font-size:0.9375rem;
  max-width:300px;
  color:var(--muted);
}
.button-link {
  font-size:0.875rem;
  border-bottom:1px solid var(--accent);
  padding:7px 0;
  display:inline-flex;
  gap:34px;
}
.button-link span {
  color:var(--accent);
}
.bench-note {
  font:0.75rem/1.6 var(--mono);
  margin-top:35px;
}
.status-mark {
  display:inline-block;
  border:1px solid var(--accent);
  width:7px;
  height:7px;
  margin-right:6px;
}
.plot-preview {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-image:linear-gradient(#34392c66 1px,transparent 1px),linear-gradient(90deg,#34392c66 1px,transparent 1px);
  background-size:32px 32px;
  padding:24px;
}
.plot-meta,.plot-caption {
  display:flex;
  justify-content:space-between;
  font:0.75rem var(--mono);
  color:var(--muted);
  gap:10px;
}
.plot-caption {
  font-size:0.75rem;
  letter-spacing:.08em;
}
.plot-preview svg {
  width:100%;
  overflow:visible;
  margin:8px 0;
}
.plot-target {
  stroke:#727a63;
  stroke-width:1;
  stroke-dasharray:5 7;
  fill:none;
}
.plot-line {
  stroke:var(--accent);
  stroke-width:2;
  fill:none;
}
.plot-dot {
  fill:var(--accent);
  stroke:var(--surface);
  stroke-width:3;
}
.plot-annotation {
  stroke:#8c947b;
  stroke-width:1;
  fill:none;
}
.plot-preview text {
  font:0.75rem var(--mono);
  fill:var(--muted);
}
.plot-preview:hover .plot-line {
  stroke:#e1efa4;
}
.home-bottom {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:72px;
  margin:70px 0 76px;
}
.note-row {
  display:block;
  border-top:1px solid var(--line);
  padding:22px 0;
}
.note-date {
  font:0.75rem var(--mono);
  color:var(--muted);
}
.note-row h3 {
  font-size:1.375rem;
  letter-spacing:-.03em;
  margin:10px 0;
}
.note-type {
  font-size:0.8125rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
}
.now-aside {
  border-left:1px solid var(--line);
  padding-left:34px;
  margin-top:1px;
}
.now-aside .eyebrow {
  color:var(--muted);
}
.now-aside h2 {
  font-size:2rem;
  margin:22px 0;
}
.now-aside p {
  color:var(--muted);
  font-size:0.9375rem;
}
.site-footer {
  border-top:1px solid var(--line);
  padding:27px 0 32px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px;
  font-size:0.75rem;
}
.site-footer>div {
  display:flex;
  gap:24px;
}
.footer-small {
  width:100%;
  font:0.75rem var(--mono);
  color:var(--muted);
  margin:0;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--accent);
  color:var(--bg);
  padding:12px;
  z-index:10;
}
.skip-link:focus {
  top:12px;
}
@media(min-width:1500px) {
  .site-shell {
    padding:0 32px;
  }
  .intro {
    padding-top:55px;
  }
  .intro h1 {
    font-size:5.375rem;
  }
  .intro-grid {
    gap:90px;
  }
  .intro-copy {
    font-size:1.0625rem;
  }
  .bench-info {
    padding:38px;
  }
}
@media(max-width:1000px) {
  .site-shell {
    padding:0 30px;
  }
  .site-header {
    gap:20px;
  }
  .portfolio-link {
    display:none;
  }
  .intro-grid {
    gap:30px;
    grid-template-columns:1.35fr 1fr;
  }
  .intro h1 {
    font-size:3.75rem;
  }
  .intro-copy {
    font-size:0.9375rem;
  }
  .bench-info {
    padding:25px;
  }
  .bench-info h3 {
    font-size:2.375rem;
  }
  .home-bottom {
    gap:35px;
  }
  .plot-caption {
    font-size:0.75rem;
  }
}
@media(max-width:700px) {
  .site-shell {
    padding:0 22px;
  }
  .site-header {
    padding:24px 0 18px;
    align-items:flex-start;
    flex-direction:column;
    gap:19px;
  }
  .identity-note {
    font-size:0.75rem;
  }
  nav {
    width:100%;
    justify-content:space-between;
    gap:18px;
    font-size:0.875rem;
  }
  nav a {
    padding:5px 0 10px;
  }
  .intro {
    padding:28px 0 42px;
  }
  .intro>.eyebrow {
    font-size:0.75rem;
    gap:8px;
  }
  .edition {
    display:none;
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:29px;
  }
  .intro h1 {
    font-size:clamp(2.75rem,9.7vw,4.0625rem);
  }
  .intro-copy {
    max-width:500px;
    font-size:1rem;
    padding:0;
  }
  .intro-copy p {
    max-width:40ch;
  }
  .intro-copy p:last-of-type {
    font-size:0.9375rem;
  }
  .section-heading h2 {
    font-size:1rem;
  }
  .section-heading>a {
    font-size:0.75rem;
  }
  .section-index {
    font-size:0.75rem;
    margin-right:8px;
  }
  .bench {
    grid-template-columns:1fr;
  }
  .bench-info {
    padding:26px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .bench-info h3 {
    font-size:2.375rem;
    margin-top:20px;
  }
  .bench-info h3 br {
    display:none;
  }
  .bench-info p {
    max-width:35ch;
  }
  .bench-note {
    margin-top:24px;
  }
  .plot-preview {
    min-height:235px;
    padding:18px;
  }
  .plot-preview svg {
    margin:16px 0;
  }
  .home-bottom {
    grid-template-columns:1fr;
    gap:40px;
    margin:45px 0;
  }
  .now-aside {
    border-left:0;
    border-top:1px solid var(--line);
    padding:30px 0 0;
  }
  .now-aside h2 {
    font-size:2rem;
  }
  .now-aside p {
    max-width:42ch;
  }
  .site-footer {
    gap:20px;
  }
  .site-footer>div {
    width:100%;
    justify-content:space-between;
  }
  .footer-name .muted {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* Reading pages and archive */
.page-heading {
  padding:58px 0 48px;
  max-width:850px;
}
.page-heading>.eyebrow {
  color:var(--muted);
  margin-bottom:28px;
}
.page-heading h1 {
  font-size:clamp(2.625rem,5.5vw,4.375rem);
  letter-spacing:-.06em;
  line-height:1.08;
}
.page-heading>p {
  font-size:1.1875rem;
  line-height:1.65;
  color:var(--muted);
  max-width:650px;
  margin:24px 0 0;
}
.archive-label {
  display:flex;
  justify-content:space-between;
  font:0.75rem var(--mono);
  color:var(--muted);
  padding:0 45px 16px 0;
}
.experiment-row {
  display:grid;
  grid-template-columns:90px 1fr 200px 20px;
  gap:24px;
  border-top:1px solid var(--line);
  padding:30px 0;
  align-items:start;
}
.experiment-id {
  font:0.75rem var(--mono);
  color:var(--muted);
  padding-top:6px;
}
.experiment-row h2 {
  font-size:1.6875rem;
  line-height:1.25;
}
.experiment-row p {
  font-size:1rem;
  line-height:1.7;
  max-width:490px;
  color:var(--muted);
  margin:12px 0 0;
}
.experiment-meta {
  font:0.75rem/1.7 var(--mono);
  padding-top:4px;
}
.experiment-meta span {
  display:block;
}
.experiment-meta span:first-child {
  color:var(--muted);
  margin-bottom:14px;
}
.row-arrow {
  color:var(--accent);
}
.archive-footnote {
  font-size:0.875rem;
  color:var(--muted);
  padding:28px 0 60px;
  border-top:1px solid var(--line);
  margin:0;
}
.article-layout {
  display:grid;
  grid-template-columns:240px minmax(0,670px);
  gap:70px;
  margin:12px 0 90px;
  border-top:1px solid var(--line);
  padding-top:45px;
}
.article-index {
  align-self:start;
}
.article-index>.eyebrow {
  color:var(--muted);
  font-size:0.75rem;
}
.article-index nav {
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:18px;
}
.article-index nav a {
  padding:4px 0;
  font-size:0.875rem;
  color:var(--muted);
}
.article-index nav a:hover {
  color:var(--accent);
}
.prose {
  font-size:1.125rem;
  line-height:1.85;
  min-width:0;
}
.prose h2 {
  font-size:1.8125rem;
  margin:0 0 22px;
}
.prose h3 {
  margin:30px 0 12px;
}
.prose section+section {
  margin-top:50px;
}
.prose a,.now-list p a {
  text-decoration:underline;
  text-decoration-color:#737c61;
  text-underline-offset:4px;
}
.prose p {
  color:#cdd1c4;
}
.prose a {
  color:var(--ink);
}
.small {
  font-size:0.875rem;
  line-height:1.8;
}
.prose .muted {
  color:var(--muted);
}
.prose pre {
  font:0.875rem/1.8 var(--mono);
  overflow:auto;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--accent);
}
details {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:15px 0;
  margin:24px 0;
}
summary {
  cursor:pointer;
  font-size:1rem;
}
details p {
  font-size:1rem;
}
.project-facts {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  padding:28px 0 35px;
}
.project-facts .eyebrow {
  color:var(--muted);
  font-size:0.75rem;
  margin-bottom:9px;
}
.project-facts strong {
  font-size:0.9375rem;
  font-weight:400;
}
.project-facts>div:last-child {
  align-self:center;
}
.signal-flow {
  background:var(--surface);
  border-left:2px solid var(--accent);
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:25px 0;
  font:0.875rem/1.9 var(--mono);
}
.signal-flow b {
  font-weight:400;
  color:var(--muted);
}
.link-divider {
  margin:0 8px;
  color:var(--muted);
}
.notes-archive {
  max-width:860px;
  min-height:180px;
}
.notes-archive .note-row {
  padding:28px 0;
}
.notes-archive h2 {
  font-size:1.875rem;
  margin:16px 0;
}
.notes-archive p {
  color:var(--muted);
  font-size:1rem;
  margin-bottom:20px;
}
.definition-list dt {
  font-size:1rem;
  color:var(--accent);
  font-family:var(--mono);
  margin-top:28px;
}
.definition-list dd {
  margin:8px 0 25px;
  color:#cdd1c4;
}
.now-list>section {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:70px;
  padding:30px 0;
  border-top:1px solid var(--line);
}
.now-list .eyebrow {
  color:var(--muted);
  padding-top:8px;
}
.now-list h2 {
  font-size:1.75rem;
  line-height:1.3;
}
.now-list p {
  max-width:630px;
  margin:16px 0 0;
  color:#cdd1c4;
}
.contact-links {
  margin-top:26px;
}
.contact-links a {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:18px 0;
  text-decoration:none;
}
.contact-links span {
  font-size:0.875rem;
  color:var(--muted);
}
.error-links {
  display:flex;
  gap:36px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:150px;
}
.spring-bench {
  background:var(--surface);
  border:1px solid var(--line);
  margin:0 0 50px;
}
.spring-top {
  display:flex;
  justify-content:space-between;
  padding:24px 30px;
  border-bottom:1px solid var(--line);
  gap:20px;
}
.spring-top>.eyebrow {
  font-size:0.75rem;
}
.spring-chart {
  padding:10px 25px 0;
  max-width:1000px;
  margin:auto;
}
.spring-chart svg {
  display:block;
  width:100%;
  height:auto;
}
.spring-chart text {
  fill:var(--muted);
  font:0.75rem var(--mono);
}
.chart-grid {
  fill:none;
  stroke:#3b4333;
  stroke-width:1;
}
.spring-controls {
  padding:28px 32px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  border-top:1px solid var(--line);
}
.spring-controls[hidden],.spring-actions[hidden] {
  display:none;
}
.damping-control {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.damping-control label {
  font-size:0.9375rem;
}
.damping-control label span {
  color:var(--muted);
  margin-left:10px;
}
.damping-control output {
  font:1.125rem var(--mono);
  color:var(--accent);
}
input[type=range] {
  grid-column:1/-1;
  width:100%;
  height:28px;
  accent-color:var(--accent);
  margin:0;
  cursor:pointer;
}
.range-ends {
  display:flex;
  justify-content:space-between;
  grid-column:1/-1;
  font-size:0.75rem;
  color:var(--muted);
}
.control-label {
  font:0.75rem var(--mono);
  color:var(--muted);
  display:block;
  margin:4px 0 14px;
}
.preset-buttons {
  display:flex;
  gap:8px;
}
.preset-buttons button,.stop-button {
  border:1px solid #626c53;
  background:transparent;
  color:var(--ink);
  padding:9px 13px;
  font-size:0.875rem;
  border-radius:0;
}
.preset-buttons button[aria-pressed=true] {
  border-color:var(--accent);
  color:var(--accent);
  background:#cadb7c0b;
}
.preset-buttons button:hover,.stop-button:not(:disabled):hover {
  border-color:var(--accent);
}
.spring-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:0 32px 28px;
}
.run-button {
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
  padding:10px 18px;
  font-size:0.875rem;
  min-width:130px;
}
.run-button:hover {
  background:#deeba5;
}
.run-button:disabled,.stop-button:disabled {
  opacity:.45;
}
.spring-status {
  font:0.75rem/1.65 var(--mono);
  color:var(--muted);
  margin:0;
  flex:1;
  min-width:200px;
}
.no-script {
  padding:20px 30px;
  color:var(--muted);
}
@media(max-width:1000px) {
  .article-layout {
    grid-template-columns:170px minmax(0,1fr);
    gap:35px;
  }
  .experiment-row {
    grid-template-columns:75px 1fr 150px 16px;
    gap:18px;
  }
  .now-list>section {
    grid-template-columns:170px 1fr;
    gap:35px;
  }
  .spring-controls {
    gap:32px;
  }
  .preset-buttons {
    flex-wrap:wrap;
  }
}
@media(max-width:700px) {
  .page-heading {
    padding:35px 0;
  }
  .page-heading>.eyebrow {
    font-size:0.75rem;
    margin-bottom:23px;
  }
  .page-heading h1 {
    font-size:clamp(2.375rem,9vw,3.625rem);
  }
  .page-heading>p {
    font-size:1.0625rem;
    line-height:1.75;
    margin-top:22px;
  }
  .archive-label {
    font-size:0.75rem;
    padding-right:0;
  }
  .archive-label span:last-child {
    display:none;
  }
  .experiment-row {
    grid-template-columns:1fr auto;
    gap:12px;
    padding:26px 0;
  }
  .experiment-id {
    grid-column:1;
  }
  .experiment-row>div:first-of-type {
    grid-column:1/-1;
    grid-row:2;
  }
  .experiment-row h2 {
    font-size:1.625rem;
  }
  .experiment-row p {
    font-size:0.9375rem;
  }
  .experiment-meta {
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    gap:7px 22px;
  }
  .experiment-meta span:first-child {
    margin:0;
  }
  .row-arrow {
    grid-column:2;
    grid-row:1;
  }
  .archive-footnote {
    font-size:0.8125rem;
    padding-bottom:45px;
  }
  .article-layout {
    display:block;
    margin:0 0 55px;
    padding-top:25px;
  }
  .article-index {
    margin-bottom:34px;
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
  }
  .article-index nav {
    flex-direction:row;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:5px 22px;
    margin-top:14px;
  }
  .article-index nav a {
    font-size:0.8125rem;
  }
  .prose {
    font-size:1.0625rem;
    line-height:1.85;
  }
  .prose h2 {
    font-size:1.625rem;
  }
  .prose section+section {
    margin-top:40px;
  }
  .project-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
  }
  .project-facts strong {
    font-size:0.875rem;
  }
  .project-facts>div:last-child {
    grid-column:1/-1;
  }
  .project-facts .eyebrow {
    font-size:0.75rem;
  }
  .signal-flow {
    font-size:0.75rem;
    padding:22px 12px;
  }
  .notes-archive h2 {
    font-size:1.6875rem;
    line-height:1.25;
  }
  .now-list>section {
    grid-template-columns:1fr;
    gap:16px;
    padding:27px 0;
  }
  .now-list h2 {
    font-size:1.625rem;
  }
  .now-list p {
    font-size:1rem;
  }
  .spring-top {
    padding:18px;
    gap:10px;
    flex-wrap:wrap;
  }
  .spring-top>.eyebrow {
    font-size:0.75rem;
  }
  .spring-chart {
    padding:15px 5px 5px;
  }
  .spring-controls {
    grid-template-columns:1fr;
    gap:25px;
    padding:22px 18px;
  }
  .spring-actions {
    padding:0 18px 23px;
    gap:12px;
  }
  .spring-status {
    flex-basis:100%;
  }
  .preset-buttons button {
    flex:1;
    min-height:44px;
  }
  .control-label {
    font-size:0.75rem;
  }
  .spring-chart text {
    font-size:0.8125rem;
  }
  .run-button,.stop-button {
    min-height:44px;
  }
  .no-script {
    font-size:0.875rem;
    padding:18px;
  }
  .error-links {
    margin-bottom:80px;
  }
  .small {
    font-size:0.8125rem;
  }
}
/* Small metadata stays legible without competing with the reading text. */
.plot-meta,.plot-caption,.plot-preview text,.note-date,.footer-small {
  font-size:0.75rem;
}
.plot-caption {
  letter-spacing:0;
}
.identity-note {
  font-size:0.75rem;
}
.plot-preview .plot-caption {
  line-height:1.5;
}
.workbench-extra {
  display:grid;
  grid-template-columns:1fr 1.6fr auto 20px;
  gap:24px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  font-size:0.875rem;
}
.workbench-extra>.eyebrow {
  color:var(--muted);
}
.workbench-extra>.muted {
  font:0.75rem var(--mono);
}
@media(max-width:700px) {
  .workbench-extra {
    grid-template-columns:1fr auto;
    gap:9px 15px;
    padding:20px 0;
  }
  .workbench-extra>.eyebrow {
    grid-column:1/-1;
  }
  .workbench-extra>span:nth-child(2) {
    grid-column:1;
    grid-row:2;
  }
  .workbench-extra>.muted {
    grid-row:3;
  }
  .workbench-extra>span:last-child {
    grid-column:2;
    grid-row:2;
  }
}
@media(max-width:700px) {
  .intro-copy p:last-of-type,.bench-info p,.now-aside p {
    font-size:1rem;
  }
  .intro>.eyebrow {
    font-size:.75rem;
  }
  .plot-caption {
    font-size:.75rem;
  }
}
@media(max-width:700px) {
  .spring-chart text {
    font-size:1.75rem;
  }
  .plot-preview text {
    font-size:1.625rem;
  }
  .plot-preview text:nth-last-of-type(3) {
    display:none;
  }
}
/* The project itself carries the homepage, without a substitute demo. */
.intro-copy a:not(.text-link), .archive-footnote a { text-decoration:underline; text-underline-offset:4px; }
.project-feature { display:grid; grid-template-columns:1.5fr 1fr; gap:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:38px 0 44px; }
.project-feature h2 { font-size:clamp(2rem,4vw,3rem); margin:18px 0 24px; }
.project-feature p { max-width:540px; }
.project-links { align-self:center; border-left:1px solid var(--line); padding-left:32px; }
.project-links a { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.project-links p { font: .875rem/1.8 var(--mono); color:var(--muted); margin:22px 0 0; }
.personal-links { margin:58px 0 70px; max-width:720px; }
.personal-links h2 { font-size:1.125rem; margin-bottom:20px; }
.personal-links a { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:18px 0; border-top:1px solid var(--line); }
.personal-links span { color:var(--muted); font-size:.875rem; }
@media(max-width:700px) {
 .project-feature { grid-template-columns:1fr; gap:24px; padding:28px 0; }
 .project-links { padding:0; border-left:0; }
 .personal-project .section-heading { flex-wrap:wrap; gap:12px; }
 .personal-links { margin:40px 0 50px; }
}

/* RFID input path. The four labels are real game abilities; the animation is site UI. */
.project-feature { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; gap:clamp(28px,5vw,70px); }
.project-feature-copy { min-width:0; }
.project-feature .project-links { border-left:0; padding:24px 0 0; margin-top:24px; }
.project-feature .project-links a { padding:13px 0; }
.ability-panel { min-width:0; padding:24px; border:1px solid #596149; background:var(--surface); }
.ability-top { display:flex; justify-content:space-between; gap:16px; font:.75rem/1.5 var(--mono); letter-spacing:.06em; color:var(--muted); }
.ability-current { display:flex; justify-content:space-between; align-items:baseline; gap:15px; min-height:105px; padding:21px 0 14px; font-size:clamp(2.25rem,4vw,3.3rem); font-weight:600; line-height:1.13; letter-spacing:-.055em; color:var(--accent); }
.ability-current-mark { font:1.5rem/1 var(--mono); }
.signal-map { display:grid; grid-template-columns:auto minmax(6px,1fr) auto minmax(6px,1fr) auto minmax(6px,1fr) auto; align-items:center; gap:8px; padding:19px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:.6875rem/1.4 var(--mono); color:var(--muted); }
.signal-map i { position:relative; height:1px; background:#667053; overflow:hidden; }
.signal-map i::after { content:''; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.ability-options { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:23px; }
.ability-panel[data-ready] .ability-options { display:grid; }
.ability-options button { min-height:48px; display:flex; align-items:center; gap:12px; padding:10px 12px; text-align:left; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:0; font-size:.875rem; line-height:1.4; }
.ability-options button span { font:.6875rem/1.4 var(--mono); color:var(--muted); }
.ability-options button[aria-pressed=true] { border-color:var(--accent); background:#cadb7c14; }
.ability-options button[aria-pressed=true] span { color:var(--accent); }
.ability-explainer { font-size:.8125rem; line-height:1.6; color:var(--muted); margin:19px 0 0; }
.project-facts + .ability-panel { max-width:860px; margin:0 0 60px; }
.project-facts + .ability-panel .ability-current { min-height:125px; }
.project-facts + .ability-panel .ability-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .site-header nav a::before { content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease-out; }
 .site-header nav a:hover::before, .site-header nav a:focus-visible::before { transform:scaleX(1); }
 .experiment-row { transition:border-color .2s ease,background-color .2s ease; }
 .experiment-row:hover,.experiment-row:focus-visible { border-color:var(--accent); background-color:#cadb7c0b; }
 .project-links a span, .personal-links a span, .contact-links a span, .experiment-row .row-arrow { transition:transform .18s ease-out; }
 .project-links a:hover span, .project-links a:focus-visible span, .personal-links a:hover span, .personal-links a:focus-visible span, .contact-links a:hover span, .contact-links a:focus-visible span, .experiment-row:hover .row-arrow, .experiment-row:focus-visible .row-arrow { transform:translateX(4px); }
 .ability-options button { transition:background-color .18s ease-out,border-color .18s ease-out,transform .18s ease-out; }
 .ability-options button:hover { transform:translateY(-2px); border-color:#9aad6d; }
}
@media(prefers-reduced-motion:no-preference) {
 .ability-switched .signal-map i::after { animation:signal-pass .24s ease-out both; }
 .ability-switched .signal-map i:nth-of-type(2)::after { animation-delay:.08s; }
 .ability-switched .signal-map i:nth-of-type(3)::after { animation-delay:.16s; }
 .ability-switched .ability-current-mark { animation:mark-tick .2s ease-out; }
}
@keyframes signal-pass { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mark-tick { from { transform:translateX(-6px); opacity:.35; } to { transform:translateX(0); opacity:1; } }
@media(max-width:700px) {
 .project-feature { grid-template-columns:1fr; }
 .ability-panel { padding:18px; }
 .ability-current { min-height:95px; }
 .project-facts + .ability-panel .ability-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .signal-map { gap:5px; font-size:.625rem; }
}
@media(max-width:350px) {
 .signal-map { font-size:.5625rem; }
 .ability-options button { gap:7px; padding:8px; }
}

/* The controller path advances with the reader's scroll position. */
.controller-story { --story-progress:0; border-top:1px solid var(--line); margin:18px 0 88px; }
.story-heading { padding:48px 0 36px; }
.story-heading .eyebrow { color:var(--accent); }
.story-heading h2 { font-size:clamp(2.5rem,5vw,4.5rem); margin:16px 0 10px; }
.story-heading p { color:var(--muted); margin:0; }
.story-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:clamp(38px,8vw,120px); align-items:start; }
.story-display { min-width:0; min-height:390px; padding:30px; border:1px solid #596149; background:var(--surface); display:flex; flex-direction:column; justify-content:space-between; }
.controller-story[data-ready] .story-display { position:sticky; top:clamp(24px,11vh,120px); }
.story-display-head,.story-track-labels { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font:.75rem/1.5 var(--mono); letter-spacing:.04em; }
.story-readout { display:flex; flex-direction:column; gap:4px; padding:34px 0; }
.story-readout strong { font:600 clamp(5rem,9vw,8.75rem)/.95 var(--sans); letter-spacing:-.085em; color:var(--accent); }
.story-readout span { font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.15; font-weight:600; letter-spacing:-.04em; }
.story-track { height:2px; background:#596149; overflow:hidden; margin-bottom:16px; }
.story-track span { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(var(--story-progress)); transform-origin:left; }
.story-track-labels { font-size:.6875rem; }
.story-steps { min-width:0; }
.story-step { min-height:56vh; display:flex; flex-direction:column; justify-content:center; border-top:1px solid var(--line); padding:38px 0; opacity:.54; }
.story-step:last-child { border-bottom:1px solid var(--line); }
.story-step[data-active] { opacity:1; border-top-color:var(--accent); }
.story-step .eyebrow { color:var(--accent); }
.story-step h3 { font-size:clamp(2rem,4vw,3.5rem); margin:20px 0 15px; }
.story-step p { max-width:31ch; color:var(--muted); font-size:1.0625rem; line-height:1.7; }
.controller-story:not([data-ready]) .story-step { opacity:1; }

/* A signal probe follows mouse input; the light stays behind the page content. */
.cursor-reticle,.cursor-glow { display:none; position:fixed; top:0; left:0; pointer-events:none; opacity:0; will-change:transform; }
.cursor-reticle {
  z-index:200; width:30px; height:30px;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/8px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top/1px 8px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/8px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/1px 8px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/8px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/1px 8px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/8px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/1px 8px no-repeat;
  filter:drop-shadow(0 0 5px #cadb7c70);
  transition:opacity .15s ease,width .2s ease,height .2s ease,filter .2s ease;
}
.cursor-reticle::before { content:''; position:absolute; top:50%; left:50%; width:4px; height:4px; background:var(--ink); box-shadow:0 0 8px var(--accent); transform:translate(-50%,-50%); }
.cursor-reticle::after { content:''; position:absolute; inset:8px; border:1px solid #cadb7c7a; border-radius:50%; transition:inset .2s ease,border-color .2s ease,background-color .2s ease; }
.cursor-glow { z-index:0; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,#cadb7c27 0%,#cadb7c14 28%,#cadb7c07 51%,transparent 72%); transition:opacity .25s ease; }

/* Hidden game controls stay readable and usable on touch screens. */
.bonus-mark { margin-left:12px; width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--accent); font:1rem/1 var(--mono); vertical-align:middle; }
.bonus-mark:hover,.bonus-mark:focus-visible { border-color:var(--accent); background:#cadb7c14; }
.bonus-room { width:min(520px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; padding:27px; border:1px solid var(--accent); border-radius:0; background:var(--surface); color:var(--ink); box-shadow:0 30px 100px #000c,0 0 36px #cadb7c20; }
.bonus-room::backdrop { background:#090b08dc; backdrop-filter:blur(5px); }
.bonus-room-top { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--accent); }
.bonus-room-top button { width:36px; height:36px; border:1px solid var(--line); background:transparent; color:var(--ink); font:1.5rem/1 var(--sans); }
.bonus-room h2 { margin:12px 0 8px; font-size:clamp(2rem,6vw,3rem); }
.bonus-room p { margin:0; color:var(--muted); font-size:.9375rem; line-height:1.55; }
.bonus-room-status { margin:23px 0 10px; color:var(--accent); font:.75rem/1.5 var(--mono); letter-spacing:.06em; }
.bonus-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.bonus-cell { aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); background:var(--bg); color:var(--accent); font:1rem/1 var(--mono); }
.bonus-cell[data-wall] { background:repeating-linear-gradient(135deg,#30382a 0 3px,#252a22 3px 6px); border-color:#48503e; }
.bonus-cell[data-token] { border-color:#87975f; box-shadow:inset 0 0 0 1px #cadb7c25; }
.bonus-cell[data-player] { border-color:var(--accent); background:var(--accent); color:var(--bg); box-shadow:0 0 12px #cadb7c66; }
.bonus-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0 18px; }
.bonus-controls button { min-height:44px; border:1px solid #667053; background:transparent; color:var(--ink); font:1.25rem/1 var(--mono); }
.bonus-controls button:hover,.bonus-controls button:focus-visible { border-color:var(--accent); background:#cadb7c18; }
.bonus-room .bonus-room-message { min-height:1.55em; }
.bonus-room[data-complete] .bonus-room-message { color:var(--accent); }
.bonus-room>a { display:inline-block; margin-top:16px; border-bottom:1px solid var(--accent); color:var(--accent); font-size:.875rem; }
html[data-bonus-open] .cursor-reticle,html[data-bonus-open] .cursor-glow { display:none!important; }

/* The backtick key toggles a game-dev style layout inspection view. */
html[data-hitboxes] .site-shell :is(header,nav,main,section,article,aside,footer) { outline:1px solid #cadb7c80; outline-offset:-1px; }
html[data-hitboxes] .site-shell :is(a,button,input) { outline:1px dashed #f6bd73; outline-offset:2px; }
.hitbox-hud { position:fixed; top:16px; right:16px; z-index:120; display:flex; align-items:center; gap:14px; padding:8px 10px 8px 14px; border:1px solid var(--accent); background:var(--surface); color:var(--accent); box-shadow:0 8px 24px #0008; font:.75rem/1.3 var(--mono); }
.hitbox-hud button { width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--ink); font:1.25rem/1 var(--sans); }
@media(pointer:fine) and (hover:hover) and (prefers-reduced-motion:no-preference) {
 html[data-custom-cursor],html[data-custom-cursor] * { cursor:none!important; }
 .cursor-reticle[data-enabled],.cursor-glow[data-enabled] { display:block; }
 .cursor-reticle[data-visible] { opacity:1; }
 .cursor-glow[data-visible] { opacity:.8; }
 .cursor-glow[data-visible][data-action] { opacity:1; }
 .cursor-reticle[data-action] { width:44px; height:44px; filter:drop-shadow(0 0 9px #cadb7caa); }
 .cursor-reticle[data-action]::after { inset:10px; border-color:var(--accent); background:#cadb7c14; }
 .cursor-reticle[data-pressed]::after { inset:15px; background:#cadb7c55; }
}
@media(max-width:700px) {
 .controller-story { margin:12px 0 58px; }
 .story-heading { padding:36px 0 27px; }
 .story-grid { display:block; }
 .story-display { min-height:220px; padding:19px; margin-bottom:20px; }
 .controller-story[data-ready] .story-display { top:0; z-index:2; min-height:195px; }
 .story-readout { flex-direction:row; align-items:baseline; gap:23px; padding:18px 0; }
 .story-readout strong { font-size:4.75rem; }
 .story-readout span { font-size:1.75rem; }
 .story-step { min-height:46vh; padding:30px 0; }
 .story-step h3 { margin:13px 0 8px; }
 .story-step p { font-size:1rem; }
}
@media(prefers-reduced-motion:reduce) {
 .story-display { display:none; }
 .story-step { min-height:0; opacity:1; }
 .cursor-reticle,.cursor-glow { display:none!important; }
}