.workshop-page { --accent: #688968; }
.workshop-hero { min-height: 600px; display: grid; grid-template-columns: 1fr .94fr; gap: 7%; align-items: center; padding-top: 50px; padding-bottom: 75px; }
.workshop-hero-copy { max-width: 590px; }
.workshop-hero h1 { margin: 0 0 22px; font-size: clamp(55px, 7.2vw, 82px); font-weight: 500; line-height: .98; letter-spacing: -.075em; }
.workshop-hero h1 em, .pid-heading h2 em, .workshop-notes-heading h2 em, .workshop-projects > h2 em, .workshop-end h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.workshop-hero-copy > p:not(.eyebrow) { max-width: 470px; margin: 0 0 23px; color: #69685e; font-size: 13px; line-height: 1.85; }
.workshop-hero-art { min-height: 370px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #d6d0c3; background: radial-gradient(ellipse at 56% 45%, #d5dec9 0, transparent 51%), linear-gradient(155deg, #ede8dd, #e5dfd3); }
.workshop-hero-art svg { width: 100%; height: auto; overflow: visible; }
.workshop-track-shadow { fill: none; stroke: #cfc8b9; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.workshop-track { fill: none; stroke: #414a3d; stroke-width: 3; stroke-dasharray: 10 9; stroke-linecap: round; stroke-linejoin: round; animation: track-dash 18s linear infinite; }
.workshop-track-start { fill: #e9b56c; stroke: #f9edce; stroke-width: 3; }
.workshop-track-node { fill: #c76a50; stroke: #fff1d7; stroke-width: 3; }
.workshop-star-path { fill: none; stroke: #68896877; stroke-width: 1.5; stroke-dasharray: 3 7; }
.workshop-star { fill: #d69a53; filter: drop-shadow(0 2px 6px #d69a5380); }
.workshop-art-label { position: absolute; color: #807d70; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.label-track { top: 19px; left: 19px; }.label-loop { bottom: 17px; left: 19px; }.workshop-art-sticker { position: absolute; right: 19px; top: 20px; display: grid; width: 68px; aspect-ratio: 1; place-content: center; transform: rotate(8deg); border: 1px solid #cd7458; border-radius: 50%; color: #b65c43; font-family: var(--mono); font-size: 7px; line-height: 1.4; letter-spacing: .1em; text-align: center; }
@keyframes track-dash { to { stroke-dashoffset: -190; } }

.pid-lab { padding-top: 85px; padding-bottom: 103px; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.pid-heading { display: grid; grid-template-columns: 1fr .78fr; gap: 10%; align-items: end; margin-top: 32px; }
.workshop-kicker, .pid-eyebrow { margin: 0 0 15px; color: #858276; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.pid-heading h2, .workshop-notes-heading h2, .workshop-projects > h2 { margin: 0; font-size: clamp(39px, 5.1vw, 59px); font-weight: 500; line-height: 1.05; letter-spacing: -.065em; }
.pid-heading > p { max-width: 420px; margin: 0 0 4px; color: #747368; font-size: 11px; line-height: 1.8; }
.pid-bench { display: grid; grid-template-columns: 1.45fr .8fr; gap: 24px; margin-top: 39px; padding: 18px; border: 1px solid #34443a; background: #18221d; color: #ecebdd; box-shadow: 0 20px 55px #26221916; }
.pid-screen-wrap { min-width: 0; border: 1px solid #36483c; background: #0f1715; }
.pid-screen-top { min-height: 39px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 13px; border-bottom: 1px solid #334137; color: #8d9c8e; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.pid-screen-top span:first-child { display: flex; align-items: center; gap: 8px; }
.pid-screen-top i { width: 6px; height: 6px; border-radius: 50%; background: #86dda0; box-shadow: 0 0 9px #86dda0; }
.pid-screen-top span:last-child { color: #8be1a2; text-align: right; }
#pid-canvas { width: 100%; height: auto; display: block; aspect-ratio: 800 / 330; background: #101816; }
.pid-canvas-caption { margin: 0; padding: 12px 14px 14px; border-top: 1px solid #334137; color: #869187; font-size: 9px; line-height: 1.65; }
.pid-controls { display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 3px; }
.pid-controls-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 13px; border-bottom: 1px solid #344138; }
.pid-eyebrow { display: block; margin-bottom: 7px; color: #92c59a; font-size: 7px; }
.pid-controls-heading h3 { margin: 0; color: #f0eddf; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.pid-control-icon { color: #8be1a2; font-size: 22px; }
.pid-control { display: block; padding: 14px 0 12px; border-bottom: 1px solid #303b33; cursor: pointer; }
.pid-control > span { display: flex; align-items: baseline; gap: 8px; }
.pid-control b { color: #96e0a6; font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pid-control strong { color: #dadccf; font-family: var(--serif); font-size: 14px; font-weight: 500; }
.pid-control output { margin-left: auto; color: #d4d7c8; font-family: var(--mono); font-size: 9px; }
.pid-control small { display: block; margin: 5px 0 8px; color: #929b8e; font-size: 8px; line-height: 1.5; }
.pid-control input { width: 100%; margin: 4px 0 0; accent-color: #8be1a2; cursor: pointer; }
.pid-control input:focus-visible, .pid-actions button:focus-visible { outline: 2px solid #9be7a9; outline-offset: 4px; }
.pid-readout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 14px; margin-top: auto; padding: 14px 0 12px; color: #889487; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.pid-readout strong { color: #c8eccd; font-size: 12px; font-weight: 400; }.pid-readout span:last-child { grid-column: 1 / -1; color: #738176; }
.pid-actions { display: flex; gap: 8px; }
.pid-actions button { min-height: 40px; border: 1px solid #526b58; background: #24342a; color: #e8eddf; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; cursor: pointer; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.pid-actions button:hover { transform: translateY(-1px); border-color: #94e5a6; background: #2d4735; }
.pid-play { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 11px; }.pid-play span:last-child { color: #8de5a3; font-size: 12px; }
.pid-reset { padding: 0 11px; }
.pid-reset span { color: #8de5a3; font-size: 13px; }
.pid-live-status { min-height: 25px; margin: 9px 0 0; color: #8e9c8c; font-size: 8px; line-height: 1.5; }

.workshop-notes { padding-top: 81px; padding-bottom: 95px; border-top: 1px solid var(--line); }
.workshop-notes-heading { display: grid; grid-template-columns: .95fr 1fr; gap: 10%; align-items: end; margin-top: 31px; }
.workshop-notes-heading > p { max-width: 480px; margin: 0 0 4px; color: #6c6b61; font-size: 11px; line-height: 1.8; }
.loop-cards { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 39px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.loop-cards article { min-height: 225px; padding: 19px 20px 23px 0; }
.loop-cards article + article { padding-left: 20px; border-left: 1px solid var(--line); }
.loop-cards article > span, .bench-project-number { color: var(--accent); font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.loop-cards article > i { display: block; margin-top: 20px; color: #bb8b56; font-size: 20px; font-style: normal; }
.loop-cards h3 { margin: 10px 0 8px; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.loop-cards p { max-width: 250px; margin: 0; color: #747368; font-size: 9px; line-height: 1.7; }
.workshop-projects { padding-top: 78px; padding-bottom: 89px; border-top: 1px solid var(--line); }
.workshop-projects > h2 { margin-top: 29px; }
.bench-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 33px; }
.bench-project-grid article { min-height: 218px; display: flex; flex-direction: column; align-items: flex-start; padding: 19px; border: 1px solid #d8d2c6; background: #f0ebe2; }
.bench-project-grid h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.bench-project-grid p { margin: 0; color: #6d6b61; font-size: 9px; line-height: 1.7; }
.bench-project-grid a { margin-top: auto; padding-top: 16px; color: #5b765d; font-size: 8px; }
.bench-project-grid a span { margin-left: 5px; color: #bd6d4d; }
.workshop-end { min-height: 345px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 55px; border-top: 1px solid var(--line); text-align: center; }
.workshop-end .eyebrow { display: flex; }.workshop-end h2 { margin: 0; font-size: clamp(46px, 6vw, 68px); font-weight: 500; line-height: 1.03; letter-spacing: -.065em; }
.workshop-end > p:not(.eyebrow) { margin: 15px 0 0; color: #706f64; font-size: 10px; }.workshop-end .guide-end-links { margin-top: 20px; }.workshop-end .guide-text-link { color: #4e584d; }

@media (max-width: 820px) {
  .workshop-hero { min-height: 560px; gap: 4%; }
  .workshop-hero-art { min-height: 315px; }
  .pid-bench { grid-template-columns: 1.2fr .85fr; gap: 14px; padding: 12px; }
  .pid-control { padding-block: 11px 10px; }
  .pid-control strong { font-size: 12px; }
}
@media (max-width: 620px) {
  .workshop-hero { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-top: 45px; padding-bottom: 59px; }
  .workshop-hero h1 { font-size: 58px; }
  .workshop-hero-copy > p:not(.eyebrow) { font-size: 12px; }
  .workshop-hero-art { width: min(100%, 460px); min-height: 295px; margin-inline: auto; }
  .pid-lab, .workshop-notes, .workshop-projects { padding-top: 67px; padding-bottom: 76px; }
  .pid-heading, .workshop-notes-heading { grid-template-columns: 1fr; gap: 17px; margin-top: 26px; }
  .pid-heading h2, .workshop-notes-heading h2, .workshop-projects > h2 { font-size: 42px; }
  .pid-bench { grid-template-columns: 1fr; gap: 15px; margin-top: 28px; padding: 10px; }
  .pid-controls { padding-inline: 7px; }
  .pid-control { padding-block: 12px; }
  .pid-controls-heading h3 { font-size: 20px; }
  .pid-readout { margin-top: 0; }
  .loop-cards { grid-template-columns: 1fr; margin-top: 28px; }
  .loop-cards article { min-height: 170px; padding: 15px 0; }
  .loop-cards article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .loop-cards article > i { margin-top: 13px; }
  .loop-cards p { max-width: 370px; }
  .bench-project-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 26px; }
  .bench-project-grid article { min-height: 180px; }
  .workshop-end { min-height: 320px; }
  .workshop-end h2 { font-size: 51px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-track { animation: none; }
  .pid-actions button { transition: none; }
}