@font-face {
  font-family:DemoSans;
  src:local('Inter'),local('Arial');
  font-display:swap;
}

:root {
  --paper:#f5f4ef;
  --ink:#20352e;
  --muted:#69736c;
  --line:#dcded4;
  --green:#274a3b;
  --lime:#d5e9ae;
  --white:#fffefa;
  --orange:#b7663f;
  --blue:#377c8b;
  font-family:DemoSans,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}

body {
  margin:0;
}

button, input, select {
  font:inherit;
}

button, a, input, select {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline:3px solid #739952;
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

.wrap {
  width:min(1280px,calc(100% - 80px));
  margin-inline:auto;
}

.eyebrow, .caption-kicker {
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
  letter-spacing:1.3px;
  font-size:10px;
  font-weight:500;
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
}

.status-dot {
  display:inline-block;
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#527d48;
  box-shadow:0 0 0 3px #527d4810;
}

.text-link {
  font-size:13px;
  font-weight:600;
  border-bottom:1px solid #a5b396;
  padding-bottom:7px;
  white-space:nowrap;
}

.text-link span {
  margin-left:32px;
}

.demo-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:17px;
}

.demo-tab {
  display:flex;
  align-items:center;
  text-align:left;
  gap:18px;
  background:transparent;
  border:1px solid #d3d9cd;
  border-radius:9px;
  padding:21px 23px;
  color:var(--muted);
  transition:background .15s,border-color .15s;
}

.demo-tab.active {
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.tab-number {
  font-family:Georgia,serif;
  display:grid;
  place-content:center;
  width:36px;
  height:40px;
  font-size:25px;
  border:1px solid #aab69f;
  border-radius:4px;
}

.active .tab-number {
  border-color:#6c8a68;
  color:var(--lime);
}

.demo-tab strong {
  font-size:17px;
  font-weight:550;
  letter-spacing:-.3px;
}

.demo-tab small {
  display:block;
  font-size:12px;
  margin-top:7px;
  font-weight:400;
  opacity:.8;
}

.studio {
  background:var(--white);
  border:1px solid #d0d6c9;
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 12px 38px #29342b07;
}

.studio-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 19px;
  border-bottom:1px solid var(--line);
}

.model-label {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:#566751;
}

.view-controls {
  display:flex;
  gap:4px;
}

.view-controls button {
  border:0;
  background:transparent;
  color:#687563;
  padding:6px 11px;
  border-radius:5px;
  font-size:11px;
}

.view-controls button.active, .view-controls button:hover {
  background:#e9eddf;
  color:var(--green);
}

#fullscreen {
  font-size:20px;
  line-height:15px;
  margin-left:7px;
}

.stage-body {
  display:flex;
  min-width:0;
}

.viewport {
  position:relative;
  flex:1;
  min-width:0;
  height:560px;
  background:#e9ede7;
  overflow:hidden;
  isolation:isolate;
}

.viewport canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

.loading {
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  background:#edf0e9ed;
  color:#657363;
  font-size:13px;
}

.loading small {
  font-size:11px;
}

.spinner {
  width:22px;
  height:22px;
  border:2px solid #c4ceb9;
  border-top-color:#58764b;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

.error {
  position:absolute;
  inset:20px;
  z-index:10;
  background:#fff4ed;
  border:1px solid #d9ac8d;
  border-radius:8px;
  padding:24px;
  color:#7e3f24;
  line-height:1.7;
  font-size:14px;
  overflow:auto;
}

.error button {
  display:block;
  margin-top:16px;
  padding:8px 16px;
}

.scene-tags {
  position:absolute;
  top:20px;
  left:23px;
  display:flex;
  gap:7px;
  z-index:2;
  pointer-events:none;
}

.ring-tag {
  padding:5px 9px;
  border:1px solid #fff8;
  border-radius:5px;
  background:#f7faf6e8;
  color:#365744;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:5px;
}

.ring-tag:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5da9b9;
}

.ring-tag.r2:before {
  background:#75a97d;
}

.ring-tag.r3:before {
  background:#9b78b0;
}

.ring-tag.done {
  background:#fafff3;
  color:#253e23;
}

.ring-tag.done:after {
  content:'✓';
  font-size:10px;
}

.scene-caption {
  position:absolute;
  left:23px;
  bottom:47px;
  max-width:345px;
  padding:14px 18px 15px;
  background:#fbfcf4ef;
  backdrop-filter:blur(8px);
  border:1px solid #ffffffb0;
  border-radius:7px;
  pointer-events:none;
  z-index:2;
}

.caption-kicker {
  font-size:8px;
  color:#798570;
  display:block;
  margin-bottom:7px;
}

.scene-caption strong {
  font-size:16px;
  font-weight:550;
  letter-spacing:-.3px;
}

.scene-caption p {
  font-size:11px;
  color:#6a7463;
  line-height:1.6;
  margin:7px 0 0;
}

.camera-hint {
  position:absolute;
  bottom:17px;
  left:23px;
  color:#64715e;
  font-size:9px;
  pointer-events:none;
  background:#e9ede7b0;
  border-radius:3px;
  padding:2px 0;
}

.camera-hint span {
  padding:0 7px;
  color:#8c9685;
}

.action-panel {
  width:285px;
  flex-shrink:0;
  background:#fcfcf7;
  border-left:1px solid var(--line);
  padding:22px 18px;
  max-height:560px;
  overflow:auto;
}

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.panel-heading h3 {
  font-size:15px;
  letter-spacing:-.3px;
  margin:0;
}

.panel-heading button {
  background:none;
  border:0;
  font-size:20px;
  color:#75806d;
}

.panel-intro {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin:9px 0 17px;
}

.arm-switch {
  display:flex;
  gap:5px;
  padding:3px;
  background:#ecefe5;
  border-radius:5px;
}

.arm-switch button {
  flex:1;
  border:0;
  background:none;
  padding:7px 10px;
  font-size:11px;
  color:#748068;
  border-radius:4px;
}

.arm-switch button.active {
  background:white;
  color:var(--green);
  box-shadow:0 1px 4px #23330f10;
}

.telemetry-key {
  display:flex;
  gap:14px;
  font-size:8px;
  color:#75816c;
  margin:19px 0 14px;
}

.telemetry-key i {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  margin-right:4px;
}

.actual-key {
  background:#558d71;
}

.target-key {
  background:#c58649;
}

.joint-row {
  margin-bottom:12px;
}

.joint-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#566750;
  margin-bottom:6px;
}

.joint-value {
  font-family:ui-monospace,monospace;
  font-size:10px;
  color:#334b31;
  font-variant-numeric:tabular-nums;
}

.joint-track {
  height:3px;
  background:#e6eadf;
  position:relative;
  border-radius:2px;
}

.joint-track .actual {
  position:absolute;
  height:3px;
  background:#67977d;
  border-radius:2px;
  left:0;
}

.joint-track .target {
  position:absolute;
  top:-2px;
  width:2px;
  height:7px;
  background:#c58649;
}

.grip-state {
  border-top:1px solid var(--line);
  margin-top:17px;
  padding-top:13px;
  font-size:10px;
  color:#5b6e52;
  line-height:1.65;
}

.control-detail {
  margin-top:16px;
}

.control-detail .eyebrow {
  font-size:8px;
}

.control-values {
  font:9px/1.9 ui-monospace,monospace;
  color:#4e6450;
  margin:8px 0;
}

.telemetry-note {
  font-size:9px;
  color:#849078;
  line-height:1.6;
  margin:16px 0 0;
}

.transport {
  padding:20px 23px 15px;
}

.timeline-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#76816e;
  margin-bottom:9px;
}

.timecode {
  font:11px ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}

.timecode b {
  color:#354931;
  font-weight:500;
}

.timecode>span:first-of-type {
  color:#a2ad99;
  padding:0 3px;
}

.timeline {
  height:31px;
  position:relative;
  margin-bottom:11px;
}

.timeline-track {
  position:absolute;
  top:10px;
  width:100%;
  height:5px;
  background:#e4e8dc;
  border-radius:4px;
  overflow:hidden;
}

#timeline-progress {
  height:100%;
  width:0;
  background:#749153;
}

#scrub {
  position:absolute;
  inset:0;
  width:100%;
  height:25px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  z-index:2;
  cursor:pointer;
}

#scrub::-webkit-slider-runnable-track {
  height:5px;
  background:transparent;
}

#scrub::-moz-range-track {
  height:5px;
  background:transparent;
}

#scrub::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#365834;
  border:2px solid #fafcf4;
  margin-top:-3.5px;
  box-shadow:0 0 0 1px #365834;
}

#scrub::-moz-range-thumb {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#365834;
  border:2px solid #fafcf4;
}

#event-markers {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.event-marker {
  position:absolute;
  top:21px;
  width:14px;
  height:15px;
  border:0;
  padding:0;
  transform:translateX(-50%);
  background:transparent;
  pointer-events:auto;
  cursor:pointer;
  z-index:3;
}

.event-marker:before {
  content:'';
  display:block;
  margin:auto;
  width:4px;
  height:4px;
  background:#8c9b7d;
  border-radius:1px;
  transform:rotate(45deg);
}

.event-marker:hover:before {
  background:#274a3b;
  transform:rotate(45deg) scale(1.5);
}

.transport-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.playback-controls, .display-controls {
  display:flex;
  align-items:center;
  gap:15px;
}

.icon-button {
  font-size:23px;
  background:none;
  border:0;
  color:#6f7b65;
  padding:4px;
}

.play-button {
  background:var(--green);
  color:#f0f6e4;
  border:0;
  border-radius:5px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:99px;
  justify-content:center;
  font-size:12px;
  font-weight:550;
}

.play-button:hover {
  background:#386046;
}

#play-icon {
  font-size:10px;
  min-width:10px;
}

.speed-label {
  font-size:10px;
  color:#7b856f;
  display:flex;
  align-items:center;
  gap:7px;
}

#speed {
  border:1px solid #dfe4d5;
  background:#fafbf6;
  border-radius:4px;
  padding:8px 7px;
  color:var(--ink);
  font-size:11px;
}

.watch-length {
  font-size:10px;
  color:#919b86;
}

.toggle {
  font-size:10px;
  color:#6b7a60;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
}

.toggle input {
  width:12px;
  height:12px;
  accent-color:#476b3e;
}

.panel-toggle {
  font-size:10px;
  background:#f1f4e9;
  color:#415b34;
  border:1px solid #dae1cd;
  padding:9px 10px;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:5px;
}

.panel-toggle[aria-expanded=true] {
  background:#dfeacc;
}

.panel-toggle span {
  font-size:15px;
}

.playback-note {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#95a08a;
  margin-top:14px;
}

.chapter-strip {
  display:flex;
  gap:7px;
  margin-top:14px;
  overflow:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}

.chapter-button {
  min-width:0;
  flex:1;
  white-space:nowrap;
  text-align:left;
  background:transparent;
  border:0;
  border-top:2px solid #d7ddce;
  padding:10px 8px 8px 2px;
  font-size:10px;
  color:#89957b;
}

.chapter-button.active {
  border-color:#66834e;
  color:#344d2b;
}

.chapter-button span {
  display:block;
  font:9px ui-monospace,monospace;
  color:#9aa58d;
  margin-top:5px;
}

.chapter-button:hover {
  border-color:#8d9f79;
  color:var(--green);
}

.studio:fullscreen {
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:0;
  border-radius:0;
}

.studio:fullscreen .stage-body {
  flex:1;
  min-height:0;
}

.studio:fullscreen .viewport, .studio:fullscreen .action-panel {
  height:auto;
  max-height:none;
}

.studio:fullscreen .viewport {
  min-height:200px;
}

.method-body {
  max-width:820px;
  padding:60px 0 90px;
}

.method-body h1 {
  font-size:48px;
  letter-spacing:-2px;
  font-weight:450;
  line-height:1.1;
}

.method-body h2 {
  font-size:25px;
  font-weight:500;
  margin-top:42px;
  letter-spacing:-.5px;
}

.method-body p, .method-body li {
  font-size:14px;
  line-height:1.85;
  color:#6b7962;
}

.method-body code {
  font-size:12px;
}

.method-body a {
  text-decoration:underline;
  text-underline-offset:3px;
}

.method-body table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  line-height:1.7;
}

.method-body td, .method-body th {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:13px 12px;
}

.method-body pre {
  padding:20px;
  background:#e9eddf;
  border-radius:7px;
  overflow:auto;
  font-size:12px;
}

.method-body .intro {
  font-size:17px;
  color:#576e48;
}

@media(min-width:1500px) {
  .viewport {
    height:610px;
  }

  .action-panel {
    max-height:610px;
  }
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 48px);
  }

  .viewport {
    height:490px;
  }

  .watch-length {
    display:none;
  }

  .display-controls, .playback-controls {
    gap:10px;
  }

  .action-panel {
    width:255px;
    max-height:490px;
  }

  .demo-tab {
    padding:18px;
  }

  .playback-note {
    font-size:7px;
  }
}

@media(max-width:700px) {
  .wrap {
    width:calc(100% - 30px);
  }

  .demo-tabs {
    gap:8px;
  }

  .demo-tab {
    padding:13px 11px;
    gap:9px;
    border-radius:7px;
    align-items:flex-start;
  }

  .tab-number {
    width:22px;
    height:27px;
    font-size:18px;
    flex-shrink:0;
  }

  .demo-tab strong {
    font-size:12px;
    line-height:1.4;
    display:block;
    letter-spacing:-.15px;
  }

  .demo-tab small {
    font-size:9px;
    line-height:1.5;
    margin-top:5px;
  }

  .studio-toolbar {
    padding:10px 11px;
    gap:5px;
  }

  .model-label {
    font-size:8px;
    gap:7px;
    max-width:170px;
    line-height:1.5;
  }

  .view-controls button {
    font-size:9px;
    padding:5px 7px;
  }

  #fullscreen {
    font-size:18px;
    margin:0;
  }

  .viewport {
    height:400px;
  }

  .scene-tags {
    left:13px;
    top:14px;
  }

  .scene-caption {
    left:12px;
    right:12px;
    bottom:36px;
    max-width:270px;
    padding:11px 13px;
  }

  .caption-kicker {
    font-size:7px;
  }

  .scene-caption strong {
    font-size:13px;
  }

  .scene-caption p {
    font-size:9px;
    margin-top:5px;
  }

  .camera-hint {
    left:13px;
    bottom:13px;
    font-size:7px;
  }

  .transport {
    padding:15px 12px 12px;
  }

  .timeline-header {
    font-size:9px;
  }

  .timecode {
    font-size:9px;
  }

  .transport-row {
    flex-wrap:wrap;
    gap:15px;
  }

  .playback-controls {
    gap:9px;
  }

  .display-controls {
    gap:12px;
  }

  .play-button {
    padding:9px 15px;
    min-width:81px;
    font-size:11px;
  }

  .speed-label {
    font-size:9px;
  }

  .toggle {
    font-size:9px;
  }

  .panel-toggle {
    font-size:9px;
    padding:6px 8px;
  }

  .playback-note>span:last-child {
    display:none;
  }

  .playback-note {
    font-size:8px;
    line-height:1.5;
  }

  .chapter-strip {
    gap:12px;
  }

  .chapter-button {
    flex:none;
    font-size:9px;
    min-width:77px;
  }

  .stage-body {
    position:relative;
  }

  .action-panel {
    position:absolute;
    right:0;
    inset-block:0;
    width:min(275px,82%);
    max-height:400px;
    z-index:5;
    box-shadow:-10px 0 35px #24321618;
  }

  .method-body {
    padding-top:30px;
  }

  .method-body h1 {
    font-size:37px;
  }

  .method-body p, .method-body li {
    font-size:12px;
  }

  .method-body table {
    font-size:10px;
  }

  .method-body td, .method-body th {
    padding:10px 6px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  .spinner {
    animation-duration:2s;
  }
}

.demo-header {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.demo-header h1 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:0;
}

.demo-header nav {
  display:flex;
  gap:25px;
  font-size:12px;
  color:#77806f;
}

.demo-header a:hover {
  color:var(--ink);
}

.demo-only .demo-tabs {
  display:flex;
  gap:24px;
  margin-bottom:15px;
  border-bottom:1px solid var(--line);
}

.demo-only .demo-tab {
  border:0;
  border-radius:0;
  padding:13px 2px 17px;
  gap:10px;
  background:transparent;
  color:#909887;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

.demo-only .demo-tab.active {
  border-color:#34543d;
  color:#294332;
}

.demo-only .tab-number {
  width:auto;
  height:auto;
  font:10px ui-monospace,monospace;
  border:0;
  color:#a0a991;
}

.demo-only .active .tab-number {
  color:#718763;
}

.demo-only .demo-tab strong {
  font-size:15px;
  font-weight:500;
  letter-spacing:-.2px;
}

.demo-only .viewport {
  height:min(64vh,680px);
  min-height:440px;
}

.demo-only .action-panel {
  max-height:min(64vh,680px);
}

.demo-only .scene-caption {
  max-width:none;
  padding:9px 12px;
  bottom:42px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fbfcf3e6;
  border:0;
}

.demo-only .caption-kicker {
  margin:0;
  font-size:8px;
}

.demo-only .scene-caption strong {
  font-size:12px;
  font-weight:500;
}

.demo-only .chapter-strip {
  margin-top:12px;
}

.demo-footnote {
  font-size:10px;
  color:#909a83;
  line-height:1.7;
  margin:16px 0 30px;
}

.demo-footnote a {
  color:#6e815b;
  margin-left:4px;
}

.demo-only .studio:fullscreen .viewport {
  height:auto;
  min-height:0;
}

.demo-only .studio:fullscreen .action-panel {
  max-height:none;
}

@media(max-width:700px) {
  .demo-header {
    height:64px;
  }

  .demo-header h1 {
    font-size:17px;
  }

  .demo-header nav {
    font-size:11px;
    gap:20px;
  }

  .demo-only .demo-tabs {
    gap:20px;
    margin-bottom:12px;
  }

  .demo-only .demo-tab {
    padding:10px 0 13px;
    gap:7px;
  }

  .demo-only .demo-tab strong {
    font-size:12px;
  }

  .demo-only .tab-number {
    font-size:9px;
  }

  .demo-only .viewport {
    height:470px;
    min-height:0;
  }

  .demo-only .action-panel {
    max-height:470px;
  }

  .demo-only .scene-caption {
    display:block;
    left:12px;
    right:auto;
    max-width:calc(100% - 24px);
    bottom:34px;
    padding:8px 10px;
  }

  .demo-only .caption-kicker {
    font-size:7px;
    margin-bottom:4px;
  }

  .demo-only .scene-caption strong {
    font-size:11px;
  }

  .demo-footnote {
    font-size:9px;
    margin-top:12px;
  }
}