:root {
  color-scheme: dark;
  --bg: #101321;
  --panel: #191e2e;
  --line: #30374d;
  --muted: #a1abc2;
  --text: #f0f2fa;
  --accent: #c6b5ff;
  --purple: #7b62c9;
  --panel-opacity: 1;
  --pattern-opacity: 0.24;
  --ui-font-weight: 400;
  --ui-heading-weight: 620;
  --ui-text-stroke: 0.18px;
  --pattern-color: color-mix(
    in srgb,
    #ffffff calc(var(--pattern-opacity) * 100%),
    transparent
  );
  font:
    var(--ui-font-size, 14px)/1.6 "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
    "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-weight: var(--ui-font-weight);
  -webkit-text-stroke: var(--ui-text-stroke) var(--ui-outline-color, #101321);
  text-shadow: 0 0.3px 0.7px var(--ui-outline-color, #101321);
  padding-top: env(safe-area-inset-top);
}
body[data-theme="light"] {
  --panel: #f4f1fa;
  --line: #cfc8dd;
  --muted: #625f70;
  --text: #211f29;
  --ui-outline-color: #ffffff;
}
body[data-theme="starry"] {
  --panel: #11182b;
  --line: #34415f;
  --muted: #aab8d3;
  --text: #f4f7ff;
}
body[data-pattern="dots"] {
  background-image: radial-gradient(var(--pattern-color) 1px, transparent 1px);
  background-size: 18px 18px;
}
body[data-pattern="grid"] {
  background-image:
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px);
  background-size: 28px 28px;
}
body[data-pattern="stars"] {
  background-image:
    radial-gradient(
      circle at 18% 25%,
      var(--pattern-color) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 73% 12%,
      var(--pattern-color) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 42% 78%,
      var(--pattern-color) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 90% 66%,
      var(--pattern-color) 0 1px,
      transparent 1.5px
    );
  background-size: 120px 120px;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--button-bg, #252b3f);
  color: var(--button-fg, var(--text));
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 44px;
  touch-action: manipulation;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-ring, #d6c7ff);
  outline-offset: 3px;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
a {
  color: var(--accent);
}
[hidden] {
  display: none !important;
}
header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #ffffff0b;
}
.brand {
  display: flex;
  gap: 9px;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-size: 17px;
  letter-spacing: 0.1em;
  font-weight: var(--ui-heading-weight);
}
.brand small {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-left: 5px;
}
.star {
  font-size: 29px;
  color: var(--accent);
}
.version {
  font-size: 10px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
}
.icon-button {
  margin-left: auto;
  border-radius: 50%;
  width: 32px;
  min-height: 32px;
  padding: 2px;
  background: transparent;
  color: var(--muted);
}
.help-button {
  margin-left: 0;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 99px;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
}
#helpOpen {
  margin-left: auto;
}
#stage {
  height: 49svh;
  min-height: 280px;
  max-height: 610px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #303245, #151a2a 75%);
  isolation: isolate;
}
#view {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  position: relative;
  z-index: 1;
}
#cameraVideo,
#backgroundVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none;
}
#stage[data-background="camera"] #cameraVideo {
  display: block;
}
#stage[data-background="video"] #backgroundVideo {
  display: block;
}
#stage[data-background="transparent"] {
  background-color: #252a38;
  background-image: conic-gradient(
    #33394a 25%,
    transparent 0 50%,
    #33394a 0 75%,
    transparent 0
  );
  background-size: 24px 24px;
}
#stage[data-background="green"] {
  background: #00ff00;
}
#empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-align: center;
  padding: 20px;
}
#empty h1 {
  font-size: 29px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  margin: 8px 0;
}
#empty p:not(.eyebrow) {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 20px;
}
#empty small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 12px;
}
.orbit {
  width: 62px;
  height: 62px;
  border: 1px solid #bda8ff44;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow: 0 0 0 8px #bda8ff06;
}
.orbit span {
  font-size: 35px;
  color: #c6b5ff;
}
.eyebrow {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.18em;
  color: #a99cca;
  margin: 0 0 4px;
}
#empty .eyebrow {
  font-size: 8px;
}
.stage-top {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  z-index: 3;
  pointer-events: none;
}
.stage-top span {
  font-size: 10px;
  padding: 4px 9px;
  background: #131725b8;
  border-radius: 6px;
  color: #d4d8e5;
}
#modelBadge {
  max-width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fps {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.view-actions {
  position: absolute;
  right: 12px;
  bottom: 32px;
  display: flex;
  gap: 5px;
  z-index: 3;
}
.view-actions button {
  padding: 5px 10px;
  font-size: 11px;
  min-height: 34px;
  background: #141927d9;
  backdrop-filter: blur(8px);
}
.view-actions .record-quick {
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid #ff879c88;
  background: #651e37e8;
  color: #fff;
  white-space: nowrap;
}
#stageHint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #d5d9e7;
  font-size: 9px;
  z-index: 3;
  text-shadow: 0 1px 4px #000;
}
.workspace {
  border-top: 1px solid #55516e;
  border-radius: 22px 22px 0 0;
  background: color-mix(
    in srgb,
    var(--panel) calc(var(--panel-opacity) * 100%),
    transparent
  );
  position: relative;
  margin-top: -1px;
  z-index: 4;
  min-height: 43svh;
  padding-bottom: env(safe-area-inset-bottom);
}
.quick-start {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 10px 2px;
}
.quick-start button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 5px;
  min-height: 42px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}
.quick-start b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #211833;
  font-size: 10px;
}
#extendedExpressionTools { margin-top: 14px; }
#extendedExpressionTools > summary { padding: 8px 0; color: var(--accent); font-weight: 650; }
#extendedExpressionTools input[type="file"] { display: block; width: 100%; margin-top: 8px; font-size: 13px; }
#extendedExpressionTools input:not([type="file"]),
#extendedExpressionTools select { width: 100%; margin-top: 7px; }
#extendedExpressionTools .slider-label { margin-block: 12px; }
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--line);
  gap: 4px;
}
.tabs button {
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  padding: 8px 3px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 45px;
}
.tabs button > span {
  font-size: 17px;
}
.tabs button.active {
  color: var(--accent);
  background: #c6b5ff0d;
  box-shadow: inset 0 -2px var(--accent);
}
.panels {
  padding: 20px 20px 12px;
  min-width: 0;
}
body.panels-collapsed .panels {
  display: none;
}
body.panels-collapsed .workspace {
  min-height: 0;
}
.tab-panel {
  width: 100%;
  min-width: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.section-heading > div {
  min-width: 0;
}
.section-heading .step-tag {
  flex: 0 0 auto;
  white-space: nowrap;
}
h2 {
  font-size: 17px;
  font-weight: 650;
  margin: 0;
  letter-spacing: 0.02em;
}
.step-tag {
  font-size: 10px;
  background: #c6b5ff16;
  border: 1px solid #c6b5ff33;
  color: var(--accent);
  border-radius: 99px;
  padding: 3px 9px;
}
.primary {
  border-color: #a58ce5;
  background: var(--button-bg, #bca4f4);
  color: var(--button-fg, #201734);
  font-weight: 650;
}
.wide {
  width: 100%;
}
.secondary {
  margin-top: 10px;
  background: transparent;
  color: var(--text);
}
.note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin: 10px 0;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.control-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #131827;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 11px;
  color: var(--muted);
}
.compact-control {
  margin-top: 10px;
}
select {
  min-width: 0;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  font-size: 12px;
  padding: 5px 0;
}
select option {
  background: var(--panel);
}
.info-card {
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 10px;
  margin: 14px 0;
  background: #141928;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-card b {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.mini-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #76829d;
  padding: 8px 10px 16px;
}
.dot {
  width: 4px;
  height: 4px;
  background: #7fae9a;
  border-radius: 50%;
}
.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.chips button {
  padding: 6px 12px;
  font-size: 11px;
  min-height: 36px;
  border-radius: 99px;
}
.chips button.selected {
  border-color: var(--accent);
  background: #c6b5ff22;
  color: #deceff;
}
#savedFaces { display: block; }
.expression-category + .expression-category { border-top: 1px solid var(--line); padding-top: 8px; }
.expression-category h3 { margin: 8px 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.expression-category .chips { margin: 6px 0 10px; }
.strength,
.slider-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #dce1f0;
  margin: 15px 0;
}
.strength input,
.slider-label input {
  width: 100%;
}
output {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  accent-color: var(--accent);
  min-height: 32px;
  cursor: pointer;
  margin: 2px 0;
  touch-action: pan-y;
  width: 100%;
}
body[data-theme="light"] .control-card,
body[data-theme="light"] .info-card,
body[data-theme="light"] .music-card,
body[data-theme="light"] .background-grid button {
  background-color: #ffffffb8;
}
body[data-theme="light"] .strength,
body[data-theme="light"] .slider-label,
body[data-theme="light"] .check-row {
  color: var(--text);
}
body[data-theme="light"] dialog {
  background: #f7f4fb;
}
input[type="checkbox"] {
  accent-color: #c6b5ff;
  width: 18px;
  height: 18px;
}
details {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  margin: 15px 0;
}
summary {
  cursor: pointer;
  font-size: 12px;
  min-height: 24px;
  color: #d6dcec;
}
input[type="text"],
input[type="search"],
input:not([type]) {
  background: #101624;
  color: var(--text);
  border: 1px solid #3b435b;
  border-radius: 9px;
  padding: 12px;
  width: 100%;
  min-width: 0;
  font-size: 16px;
}
#morphSearch {
  margin: 12px 0;
  font-size: 13px;
}
.morph-row {
  padding: 9px 0;
  border-bottom: 1px solid #ffffff0b;
}
.morph-row label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.morph-row small {
  color: #7f8ca7;
  font-size: 9px;
  display: block;
  overflow-wrap: anywhere;
}
.register-card {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.register-card > label {
  font-size: 12px;
}
.expression-priority {
  margin-top: 12px;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  font-size: 12px;
  line-height: 1.6;
}
.consent-row input {
  margin-top: 3px;
  flex: 0 0 auto;
}
#firstRun {
  max-width: 480px;
}
.intro-copy {
  font-size: 13px;
}
.first-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.first-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.first-steps b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #211833;
}
#firstRun[open] {
  display: block;
}
.input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.input-row button {
  flex-shrink: 0;
  border-color: #8d76be;
}
.text-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 7px 0;
  font-size: 11px;
  min-height: 32px;
}
.transport {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.transport #play {
  flex: 1;
}
.transport button {
  min-height: 48px;
}
.priority-help {
  margin-top: 4px;
}
.loop,
.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mapping-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(140px, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ffffff12;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.mapping-row select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px;
}
.background-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.background-grid button {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  padding: 9px 4px;
  font-size: 10px;
  background: #141928;
  color: var(--text);
}
.background-grid button.selected {
  border-color: var(--accent);
  background: #c6b5ff13;
}
.swatch {
  height: 38px;
  width: 100%;
  border-radius: 6px;
}
.swatch.normal {
  background: radial-gradient(#4e4d6b, #151a2a);
}
.swatch.transparent {
  background: conic-gradient(
    #5f6780 25%,
    #343a4d 0 50%,
    #5f6780 0 75%,
    #343a4d 0
  );
  background-size: 14px 14px;
}
.swatch.green {
  background: #00c64c;
}
.swatch.camera {
  display: grid;
  place-items: center;
  font-size: 25px;
  color: #c6b5ff;
  background: #2b304b;
}
#busy {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #111522db;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #bda8ff33;
  border-top-color: #c6b5ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  background: #38304d;
  border: 1px solid #bda8ff66;
  padding: 12px 16px;
  border-radius: 12px;
  z-index: 100;
  font-size: 12px;
  box-shadow: 0 8px 35px #0008;
}
dialog {
  width: min(450px, 92vw);
  max-height: 85svh;
  overflow: auto;
  color: var(--text);
  background: var(--panel);
  border: 1px solid #575071;
  border-radius: 18px;
  padding: 22px;
}
dialog::backdrop {
  background: #070a12aa;
}
dialog li {
  margin: 10px 0;
}
dialog p,
dialog li {
  font-size: 12px;
  line-height: 1.9;
}
dialog ol {
  padding-left: 20px;
}
.zip-vmd-entries {
  display: grid;
  gap: 8px;
  max-height: min(42svh, 360px);
  overflow: auto;
  margin: 12px 0;
  overscroll-behavior: contain;
}
.zip-vmd-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.zip-vmd-entry input { width: 22px; height: 22px; margin: 1px 0 0; }
.zip-vmd-entry small { display: block; margin-top: 3px; color: var(--muted); }
.settings-dialog {
  width: min(620px, 94vw);
  max-height: 88dvh;
  padding: 16px;
  overscroll-behavior: contain;
}
.license-dialog {
  width: min(720px, 94vw);
  max-height: min(88dvh, 900px);
  padding: 16px;
  overscroll-behavior: contain;
}
.license-heading {
  position: sticky;
  top: -16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 12px;
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.license-heading h2 { margin: 0; }
.license-close { flex: 0 0 auto; min-height: 42px; white-space: nowrap; }
.license-entry { margin: 14px 0; }
.license-entry h3 { margin: 8px 0; font-size: 14px; }
.license-entry pre {
  max-height: 34dvh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b0e18;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.inline-link { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); text-decoration: underline; font-size: inherit; }
.settings-heading {
  position: sticky;
  top: -16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 12px;
  padding: 14px 16px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.settings-heading h2 {
  margin: 0;
}
.settings-heading .note {
  margin: 4px 0 0;
}
.settings-category {
  border-bottom: 1px solid var(--line);
  padding: 0 2px 8px;
}
.settings-category > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.settings-category > .note {
  margin: 4px 0 10px;
}
.settings-category > #panel-background {
  padding: 0;
}
.build-info-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.build-info-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.build-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.build-info-row span { color: var(--muted); }
.build-info-row b { text-align: right; overflow-wrap: anywhere; }
.build-info-card > .note { margin: 8px 0 0; }
@media (max-width: 370px) {
  header {
    gap: 6px;
    padding-inline: 10px;
  }
  .version { display: inline-flex; font-size: 9px; padding: 2px 5px; white-space: nowrap; }
  .help-button {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 10px;
  }
}
.load-error {
  color: #ffd0cd;
}
#stage:fullscreen {
  height: 100vh;
  max-height: none;
}
#stage.fullscreen-fallback {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  z-index: 200;
  border-radius: 0;
}
body.stage-fullscreen {
  overflow: hidden;
}
#stage.fullscreen-fallback .view-actions,
#stage:fullscreen .view-actions {
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 12px));
}
body.has-model #empty {
  display: none;
}
@media (min-width: 760px) {
  body {
    max-width: 1100px;
    margin: auto;
  }
  main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    padding: 18px;
    gap: 18px;
  }
  #stage {
    height: calc(100svh - 105px);
    max-height: none;
    border-radius: 20px;
  }
  .workspace {
    border: 1px solid var(--line);
    border-radius: 20px;
    height: calc(100svh - 105px);
    overflow: auto;
    margin: 0;
  }
  .tabs {
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 5;
  }
  #empty h1 {
    font-size: 33px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  header {
    height: 44px;
  }
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
  }
  #stage {
    height: calc(100svh - 44px);
    min-height: 0;
  }
  .workspace {
    height: calc(100svh - 44px);
    overflow: auto;
    margin: 0;
    border-radius: 0;
  }
  .panels {
    padding: 14px;
  }
  #empty h1 {
    font-size: 20px;
  }
  .orbit {
    display: none;
  }
  #empty p:not(.eyebrow) {
    margin: 5px;
  }
  .tabs {
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 5;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .workspace { transition: none !important; }
}
.music-card {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin: 18px 0;
}
.music-card h3 {
  font-size: 13px;
  margin: 0;
}
.music-card .section-heading {
  margin: 0;
}
.music-card .slider-label {
  align-items: center;
}
#musicOffset {
  width: 95px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111727;
  color: var(--text);
  padding: 10px;
  font-size: 16px;
}
#musicName {
  overflow-wrap: anywhere;
}
#musicStatus.error {
  color: #ffd0cd;
}
.color-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 12px;
  color: #dce1f0;
}
.color-setting input {
  width: 48px;
  height: 38px;
  border: 0;
  background: transparent;
  padding: 2px;
}
html,
body {
  height: 100%;
  min-height: 0;
}
body {
  height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
header {
  flex: 0 0 56px;
}
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(180px, 38%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
#stage {
  height: auto;
  min-height: 0;
  max-height: none;
}
.workspace {
  height: auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  border-radius: 18px 18px 0 0;
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
}
@media (min-width: 760px) {
  body {
    max-width: 1100px;
    margin: auto;
  }
  main {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 18px;
    gap: 18px;
  }
  #stage {
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 20px;
  }
  .workspace {
    height: 100%;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    margin: 0;
  }
}
@media (max-width: 759px) and (orientation: landscape) {
  header {
    height: 44px;
    flex-basis: 44px;
  }
  main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .workspace {
    border-radius: 0;
  }
  .panels {
    padding: 12px;
  }
}
@media (max-width: 759px) {
  body.panels-collapsed main {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body.panels-collapsed .workspace {
    overflow: visible;
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
}
@media (max-width: 370px) {
  header {
    padding-inline: 12px;
  }
  .brand {
    font-size: 15px;
  }
  .quick-start span {
    font-size: 9px;
  }
  .panels {
    padding-inline: 14px;
  }
  #panel-model > .section-heading h2 {
    font-size: 19px;
    line-height: 1.45;
  }
  #modelInfo,
  #panel-model > .wide,
  #panel-model > .note {
    max-width: 100%;
  }
  .transport {
    gap: 6px;
  }
  .transport button {
    padding-inline: 9px;
  }
}
body.broadcast-mode {
  max-width: none;
  padding: 0;
  background: transparent;
}
body.broadcast-mode > header,
body.broadcast-mode .workspace,
body.broadcast-mode #toast {
  display: none !important;
}
body.broadcast-mode main {
  position: fixed;
  inset: 0;
  display: block;
  padding: 0;
}
body.broadcast-mode #stage {
  position: absolute;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
}
body.broadcast-mode .stage-top,
body.broadcast-mode .view-actions,
body.broadcast-mode #stageHint {
  display: none !important;
}
body.broadcast-mode.recording .stage-top {
  display: flex !important;
  padding: max(12px, env(safe-area-inset-top)) 14px 0;
}
body.broadcast-mode.recording .stage-top > span {
  display: none;
}

/* Stage colour is independent of UI themes; legacy transparency is retained. */
#stage:not([data-background]), #stage[data-background="normal"] { background: var(--stage-color, #151a2a); }
#backgroundChoices [hidden] { display: none !important; }
#normalBackgroundSettings input[type="text"] { max-width: 12em; }

/* β v0.2.4-dev.1: option-based gentle UI text. No font files or web requests. */
body:not([data-theme="light"]) { --ui-outline-color: #101321; }
h1, h2, h3, .section-heading h2, .tabs button.active {
  font-weight: var(--ui-heading-weight);
}
/* Inputs and buttons should inherit user's weight choice, not platform defaults. */
button, input, select, textarea { font-weight: var(--ui-font-weight); }
/* Never blur preview model: text treatment is limited to normal HTML UI. */

/* Mobile-first stage: keep the character visible and open controls as a compact sheet. */
@media (max-width: 759px) and (orientation: portrait) {
  body { padding-top: env(safe-area-inset-top); }
  header { position: relative; z-index: 8; flex: 0 0 52px; height: 52px; gap: 7px; padding-inline: 12px; }
  .brand { font-size: 14px; letter-spacing: .03em; }
  .brand small { display: none; }
  .version { display: inline-flex; flex: 0 0 auto; font-size: 9px; padding: 2px 5px; white-space: nowrap; }
  #helpOpen, #settingsOpen { margin-left: 0; min-height: 40px; padding-inline: 10px; font-size: 12px; }
  #helpOpen { margin-left: auto; }
  main { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; }
  #stage { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; border-radius: 0; }
  /* Match the compact v5 sheet so the live 3D stage remains visible; panel contents keep their own scroll. */
  .workspace { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: min(56dvh, 460px); min-height: 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--panel) 96%, transparent); padding-bottom: max(env(safe-area-inset-bottom), 6px); box-shadow: 0 -8px 32px #0004; }
  .tabs { flex: 0 0 auto; position: relative; top: auto; padding: 5px 10px 0; }
  .tabs button { min-height: 50px; font-size: 13px; }
  .panels { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px 20px; }
  .workspace { transition: height .2s ease; }
  body.panels-collapsed .workspace { height: calc(80px + max(env(safe-area-inset-bottom), 6px)); overflow: hidden; }
  body.panels-collapsed .workspace .panels { display: none; }
  body.panels-collapsed main { display: block; }
  .view-actions { bottom: calc(96px + env(safe-area-inset-bottom)); }
  #stageHint { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .panel-handle {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 100%;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .panel-handle > span { display: block; width: 38px; height: 4px; border-radius: 99px; background: var(--muted); opacity: .72; }
  body.panel-dragging .workspace { transition: none !important; }
  .settings-dialog { max-height: calc(100dvh - env(safe-area-inset-top) - 12px); }
}