:root{color-scheme:light;--paper:#f9f8f4;--ink:#25231f;--line:#d5d1c7;--green:#225941;--muted:#5e5950;font:16px/1.5 system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}main,.top{max-width:1280px;margin:auto;width:calc(100% - 72px)}.top{display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line);font-size:.83rem;font-weight:650}.top a,footer a{color:inherit;text-decoration:none}a{color:var(--green);text-underline-offset:4px}a:hover{text-decoration:underline}.mast{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:32px 0 24px}.eyebrow,.mode,.plate,h2,footer{font:600 .73rem/1.4 ui-monospace,monospace;letter-spacing:.1em}.eyebrow{color:var(--green)}h1{font:normal clamp(3rem,8vw,7.4rem)/.98 Georgia,serif;letter-spacing:-.068em;margin:.12em 0 0}h1 i{font-weight:normal;color:var(--green)}h1 sup{font:600 .72rem ui-monospace,monospace;color:var(--green);letter-spacing:0;margin-left:12px;vertical-align:top;display:inline-block;margin-top:1.4em}.mast p,.landing p{margin:0;color:var(--muted);font-size:1rem}.toolbar{min-height:54px;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 12px;background:#fffefa}.mode{display:flex;align-items:center;gap:8px}.mode i{width:7px;height:7px;background:#41815d;border-radius:50%;flex:none}.actions{display:flex;gap:7px}button,.primary{border:1px solid var(--line);background:#fffefa;color:var(--ink);font:650 .82rem/1.2 system-ui,sans-serif;padding:.65rem .85rem;cursor:pointer;text-decoration:none;border-radius:3px}.primary{background:var(--green);color:white;border-color:var(--green);display:inline-block}button:hover,.primary:hover{filter:brightness(.92)}:focus-visible{outline:3px solid #9a5cd4;outline-offset:3px}.stage{height:clamp(330px,58vh,680px);position:relative;border:1px solid var(--line);border-top:0;background:#f2f2f2;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}canvas:focus-visible{outline-offset:-4px}video{display:none;position:absolute;right:12px;bottom:12px;width:clamp(76px,14vw,150px);aspect-ratio:4/3;object-fit:contain;background:#242523;border:2px solid var(--paper);transform:scaleX(-1);pointer-events:none}video.live{display:block}.plate{position:absolute;left:10px;bottom:10px;background:var(--paper);padding:4px 7px;color:#4b5148;pointer-events:none;font-size:.63rem}.status{padding:10px 0;color:var(--muted);font-size:.86rem;min-height:3rem}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-block:1px solid var(--line);padding:16px 0}h2{color:var(--green);margin:0 0 7px}.notes p,details p{color:var(--muted);margin:0;max-width:68ch}details{margin:24px 0}details p{margin-top:10px}summary{cursor:pointer;font-weight:650}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding:16px 0 30px}.landing{padding-top:42px}.landing p{margin:18px 0}.specimen{display:grid;grid-template-columns:repeat(18,1fr);gap:12px;place-items:center;background:#f2f2f2;border:1px solid var(--line);padding:25px 15px;margin:28px 0}.specimen span{width:min(var(--size),100%);aspect-ratio:1;background:var(--color);border-radius:100%}.log{max-width:800px;padding:32px 0}.log h1{font-size:clamp(2.8rem,8vw,5.7rem);margin-bottom:25px}.log h2{margin-top:24px}.log p{max-width:70ch}
@media(max-width:680px){main,.top{width:calc(100% - 26px)}.mast{display:block;padding:24px 0 16px}.mast p{margin-top:12px}.mast p br{display:none}.toolbar{padding:6px}.mode{font-size:.59rem;letter-spacing:.03em}.actions button{font-size:.73rem;padding:.6rem}.notes{grid-template-columns:1fr;gap:14px}.specimen{grid-template-columns:repeat(12,1fr);gap:9px}}

.studio-top {
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.studio-brand {
  white-space: nowrap;
}
.studio-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.studio-nav a {
  padding: 6px 0;
}
.studio-nav .assignment-tab {
  border: 1px solid var(--green);
  border-radius: 3px;
  padding: 6px 10px;
  color: var(--green);
}
.studio-nav .assignment-tab:hover,
.studio-nav .assignment-tab[aria-current="page"] {
  background: var(--green);
  color: white;
  text-decoration: none;
}
.studio-nav a[aria-current="page"]:not(.assignment-tab) {
  text-decoration: underline;
}
.studio-intro {
  padding: clamp(34px, 7vw, 84px) 0 clamp(30px, 5vw, 64px);
}
.studio-intro .eyebrow {
  margin: 0;
}
.studio-lede {
  max-width: 44ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.studio-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font: 600 .73rem/1.4 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.studio-section-head h2 {
  margin: 0;
}
.project-card {
  display: block;
  margin-bottom: 28px;
  padding: clamp(12px, 3vw, 26px);
  border: 1px solid var(--line);
  background: #fffefa;
  color: var(--ink);
  text-decoration: none;
}
.project-card:hover {
  border-color: var(--green);
  text-decoration: none;
}
.project-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.project-caption h3 {
  margin: 5px 0 0;
  font: normal clamp(1.7rem, 4vw, 3.1rem)/1.05 Georgia, serif;
}
.project-arrow {
  color: var(--green);
  font-size: 1.3rem;
}
.project-card .specimen {
  margin: 16px 0 12px;
}
.project-card p {
  margin: 0;
  color: var(--muted);
}