.cover-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mineral-line);
  font-size: 14px;
  text-decoration: none;
}
.reference-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hairline);
  background: var(--mineral-scene);
}
.reference-stage[data-backdrop="grain"] {
  background:
    radial-gradient(circle, #d3cec738 .65px, transparent 1.2px) center / 9px 9px,
    var(--mineral-scene);
}
.reference-halo {
  position: absolute;
  inset: 0 1%;
  z-index: -1;
  background: var(--touch-frame-halo);
  pointer-events: none;
}
.reference-stage img {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  object-fit: contain;
}
.light-stage {
  min-height: 340px;
  padding: 40px 13% 56px;
}
.light-workbench {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  border: 1px solid var(--hairline);
  background: #171716;
}
.light-workbench .light-stage { border: 0; }
.lab-controls { padding: 20px 24px; border-left: 1px solid var(--hairline); }
.lab-controls fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.lab-controls legend, .range { color: var(--quiet); font-size: 13px; margin-bottom: 7px; }
.lab-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-buttons button, .text-action, .sample-save {
  appearance: none;
  color: var(--paper);
  background: #1c1b18;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 8px 12px;
  min-height: 42px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lab-buttons button[aria-pressed="true"], .sample-save[aria-pressed="true"] {
  background: var(--paper);
  color: #141413;
  border-color: var(--paper);
}
.lab-buttons button:disabled, .text-action:disabled { opacity: .53; cursor: default; }
.lab-buttons button:not(:disabled):hover, .text-action:not(:disabled):hover, .sample-save:hover { border-color: var(--quiet); }
.book :is(button, input):focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.range { display: grid; grid-template-columns: 1fr auto; margin-top: 9px; align-items: center; }
.range output { font-variant-numeric: tabular-nums; }
.range input { grid-column: 1 / -1; width: 100%; margin: 3px 0 0; min-height: 24px; accent-color: var(--paper); }
.text-action { background: transparent; text-align: left; }
.text-action span { margin-left: 12px; }
.light-workbench + .annotation { margin-top: 12px; }
.light-study-reflection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.check-switch { display: flex; align-items: center; gap: 9px; color: var(--quiet); margin-top: 22px; font-size: 14px; }
.check-switch input { width: 18px; height: 18px; accent-color: var(--paper); }
#surface-samples { margin-top: 12px; }
#surface-samples article {
  background: #0b0b0a;
  border: 1px solid var(--hairline);
  padding: 10px;
}
#surface-samples[data-lit="true"] article {
  background:
    radial-gradient(circle, #dedad275 .7px, transparent 1.25px) center / 8px 8px,
    radial-gradient(ellipse at 95% 10%, #969189 0%, #0b0b0a 65%);
}
.type-title { font-size: 32px; line-height: 1.2; }
.type-highlight { font-size: 30px; letter-spacing: -.02em; }
.type-body { font-size: 24px; line-height: 1.4; }
.type-tab { font-size: 21px; }
.type-note { font-size: 18px; }
.anchor-sample {
  background: var(--touch-anchor-surface);
  position: relative;
  border: 0;
}
.anchor-sample::after {
  content: '';
  position: absolute;
  inset: auto 28px 0;
  height: 1px;
  background: linear-gradient(90deg, #e3ded4a8, #e3ded422 65%, transparent);
}
.component-demo { position: relative; }
.card-sample {
  border-radius: 0;
  width: 100%;
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  position: relative;
}
.card-sample::before {
  content: '';
  position: absolute;
  inset: 0 12% 16%;
  background: var(--touch-frame-halo);
  z-index: -1;
}
.card-sample img { margin-top: 16px; }
.card-sample[aria-pressed="true"] { border-color: var(--mineral-secondary); }
.card-sample .colour-dot { background: #252525; border: 1px solid #77746c; }
.sample-save { position: absolute; right: 12px; top: 12px; width: 42px; padding: 0; font-size: 22px; }
.motion-lab { margin-top: 24px; }
.motion-stage { margin: 18px auto 0; position: relative; overflow: hidden; width: min(100%, 340px); aspect-ratio: 9 / 16; background: #000; outline: 1px solid var(--hairline); }
.motion-stage iframe { position: absolute; top: 0; left: 0; width: 900px; height: 1600px; border: 0; transform-origin: top left; }
@media (max-width: 630px) {
  .light-workbench { grid-template-columns: minmax(0, 1fr); }
  .light-stage { min-height: 230px; }
  .lab-controls { border-left: 0; border-top: 1px solid var(--hairline); padding: 16px; }
  .reference-stage figcaption { font-size: 9px; }
  .type-spec, .component-set { padding: 14px; }
  .type-spec > div { overflow-wrap: anywhere; }
}