:root {
  --blue: #0000ee;
  --red: #cc1b12;
  --ink: #111111;
  --faint: #858585;
  --hair: #dedbd4;
  --paper: #f1efe9;
  --panel: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}

#wrap { display: flex; height: calc(100% - 45px); }
#panel {
  flex: 0 0 340px;
  overflow-y: auto;
  border-right: 1px solid var(--hair);
  padding: 21px 18px 60px 24px;
  background: var(--panel);
  scrollbar-width: thin;
}
#view { flex: 1; min-width: 0; position: relative; overflow: hidden; background: var(--paper); }
#view canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; outline: none; }
#view canvas:active { cursor: grabbing; }

.eyebrow { color: var(--red); font-size: 8px; letter-spacing: 1.7px; margin-bottom: 8px; }
h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 31px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}
.lede { color: #5e5e5e; font-size: 9px; line-height: 1.65; max-width: 290px; }
.panel-section { margin-top: 22px; padding-top: 2px; }
.panel-section.first { margin-top: 18px; }
.panel-section h2 {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: 1.8px;
  margin-bottom: 11px;
}
.panel-section h2 span { color: var(--red); font-weight: normal; }
.row { margin-bottom: 10px; }
.row > label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 8px;
  margin-bottom: 4px;
}
.row label output { color: var(--blue); font-size: 9px; letter-spacing: 0; text-transform: none; }
.row label output.warn { color: var(--red); }

select,
input[type="number"],
input[type="text"],
button,
textarea {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fff;
  color: var(--blue);
  font: inherit;
}
select, input[type="number"], input[type="text"] { height: 26px; padding: 4px 6px; }
input[type="range"] {
  width: 100%;
  height: 15px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 14px;
  margin-top: -6px;
  background: #fff;
  border: 1.5px solid var(--red);
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 8px; height: 12px; border: 1.5px solid var(--red); border-radius: 0; background: #fff; }
input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { border-color: var(--faint); }
button {
  color: var(--red);
  border-color: var(--red);
  min-height: 29px;
  padding: 7px 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 8px;
  cursor: pointer;
}
button:hover, button.primary { color: #fff; background: var(--red); }
button.primary:hover { background: var(--blue); border-color: var(--blue); }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.button-grid { display: grid; gap: 6px; margin-bottom: 8px; }
.button-grid.two { grid-template-columns: 1fr 1fr; }
.button-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.check-line { display: flex; gap: 7px; align-items: center; color: var(--red); font-size: 8px; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 6px; }
.check-line input { accent-color: var(--blue); }
.note { color: var(--faint); font-size: 8px; line-height: 1.55; margin-top: 10px; }
.note code { font-family: Menlo, Consolas, monospace; font-size: 8px; color: var(--ink); }
.note a { color: var(--blue); }
.note.status { min-height: 12px; color: var(--blue); }
.note.status.error { color: var(--red); }

/* segmented LOD switch */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.segmented button { border-color: var(--ink); color: var(--ink); background: #fff; }
.segmented button + button { border-left: 0; }
.segmented button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.segmented button:hover:not(.active) { background: #f4f2ff; color: var(--blue); }

/* figure list */
.figure-list { border: 1px solid var(--hair); margin: 8px 0 8px; max-height: 128px; overflow-y: auto; }
.figure-list button {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 0; border-bottom: 1px solid var(--hair);
  min-height: 24px; padding: 5px 8px; text-align: left;
  color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 9px; background: #fff;
}
.figure-list button:last-child { border-bottom: 0; }
.figure-list button:hover { background: #f7f5ef; color: var(--ink); }
.figure-list button.selected { background: var(--blue); color: #fff; }
.figure-list button small { font-size: 7px; letter-spacing: .5px; opacity: .8; text-transform: uppercase; }
.figure-list .empty { padding: 8px; color: var(--faint); font-size: 8px; }
.name-line { display: grid; grid-template-columns: 1fr 74px; gap: 6px; }

/* body controls */
.param-group { margin-top: 12px; }
.param-group h3 { color: var(--red); font-size: 8px; letter-spacing: 1.4px; margin-bottom: 6px; }
.param-group .group-note { color: var(--faint); font-size: 8px; line-height: 1.5; margin: -2px 0 8px; }
.param-row { margin-bottom: 7px; }
.param-row label {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--ink); font-size: 8px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 2px;
}
.param-row label output { color: var(--blue); font-size: 9px; text-transform: none; letter-spacing: 0; }

/* pose controls */
.pose-controls details { border-top: 1px solid var(--hair); }
.pose-controls details:last-child { border-bottom: 1px solid var(--hair); }
.pose-controls summary {
  cursor: pointer; list-style: none; padding: 7px 0;
  color: var(--blue); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.pose-controls summary::-webkit-details-marker { display: none; }
.pose-controls summary::after { content: '+'; color: var(--red); font-size: 10px; }
.pose-controls details[open] summary::after { content: '−'; }
.pose-controls summary small { color: var(--faint); letter-spacing: .5px; font-size: 7px; }
.joint-block { padding: 2px 0 8px 8px; border-left: 1px solid var(--hair); margin: 0 0 8px 2px; }
.joint-block h4 { color: var(--ink); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; display: flex; justify-content: space-between; }
.joint-block h4 .ik-badge { color: #fff; background: var(--blue); font-size: 7px; padding: 1px 4px; letter-spacing: .8px; }
.dof-row { margin-bottom: 4px; }
.dof-row label { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; letter-spacing: .4px; }
.dof-row label output { color: var(--blue); font-size: 9px; }
.ik-summary { margin-bottom: 8px; }
.ik-summary .ik-line { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 8px; color: var(--ink); border: 1px solid var(--hair); padding: 4px 6px; margin-bottom: 4px; }
.ik-summary .ik-line b { color: var(--blue); font-weight: normal; }
.ik-summary .ik-line button { width: auto; min-height: 20px; padding: 2px 6px; font-size: 7px; }
.ik-summary .empty { color: var(--faint); font-size: 8px; }

textarea#sceneJson {
  height: 220px;
  padding: 6px;
  font-family: Menlo, Consolas, monospace;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--ink);
  resize: vertical;
  margin-bottom: 6px;
  white-space: pre;
}

/* viewport overlays */
#statsCard, #hint {
  position: absolute; pointer-events: none;
}
#statsCard {
  left: 18px; top: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--hair);
  max-width: 300px;
}
#statsCard p { color: var(--red); font-size: 7px; letter-spacing: 1.5px; margin-bottom: 4px; }
#statsCard strong { display: block; font-family: Georgia, serif; font-style: italic; font-weight: normal; font-size: 16px; letter-spacing: -.3px; margin-bottom: 4px; }
#statsCard span { display: block; color: #4e4e4e; font-size: 8px; line-height: 1.6; }
#hint {
  right: 18px; bottom: 14px;
  color: var(--faint); font-size: 8px; letter-spacing: 1.2px;
}
#webglError {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--red); font-size: 12px; background: var(--paper);
}
#webglError[hidden] { display: none; }

@media (max-width: 860px) {
  #wrap { flex-direction: column; }
  #panel { flex: 0 0 auto; max-height: 48vh; border-right: 0; border-bottom: 1px solid var(--hair); }
  #view { flex: 1; min-height: 0; }
}

/* hand shape quick buttons */
.hand-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 2px 0 6px; }
.hand-shapes button { min-height: 20px; padding: 3px 2px; font-size: 7px; letter-spacing: .5px; }

/* props */
.prop-list { border: 1px solid var(--hair); margin: 8px 0; max-height: 120px; overflow-y: auto; }
.prop-list .prop-line { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--hair); font-size: 8px; color: var(--ink); }
.prop-list .prop-line:last-child { border-bottom: 0; }
.prop-list .prop-line b { color: var(--blue); font-weight: normal; }
.prop-list .prop-line button { width: auto; min-height: 20px; padding: 2px 6px; font-size: 7px; }
.prop-list .empty { padding: 8px; color: var(--faint); font-size: 8px; }

.portfolio-start { padding: 12px; margin: 12px 0; border: 1px solid var(--hair); background: #f5f3ec; }
.portfolio-start .note { margin: 9px 0; }
.portfolio-start button { min-height: 36px; }
@media (max-width: 860px) {
  #wrap { flex-direction: column-reverse; }
  #view { flex: 0 0 43%; min-height: 180px; }
  #panel { max-height: none; flex: 1; min-height: 0; }
  #hint { font-size: 7px; max-width: 85%; }
}