#method-scene3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #02090d;
}

#method-scene3d[hidden] { display: none; }
#method-scene3d > canvas { display: block; width: 100%; height: 100%; }
#method-scene3d > canvas:focus-visible,
#scene-canvas:focus-visible {
  outline: 2px solid #54e5c2;
  outline-offset: -3px;
}
.webgl-ready #scene-canvas { opacity: 0; pointer-events: none; }
.webgl-unavailable #scene-canvas { opacity: 1; pointer-events: auto; }
.webgl-ready .canvas-topline,
.webgl-ready .axis-key,
.webgl-ready .view-help { z-index: 3; }

.method-scene3d-toolbar {
  position: absolute;
  z-index: 2;
  top: 46px;
  left: 12px;
  width: min(540px, calc(100% - 24px));
  padding: 7px;
  border: 1px solid rgba(86, 226, 197, .24);
  border-radius: 4px;
  background: rgba(2, 12, 17, .82);
  backdrop-filter: blur(14px);
  color: #b9d1d8;
  font-size: 10px;
}
.method-scene3d-toolbar:not([open]) {
  width: min(230px, calc(100% - 24px));
}
.method-scene3d-summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.method-scene3d-summary::-webkit-details-marker { display: none; }
.method-scene3d-summary::before {
  content: "+";
  flex: 0 0 auto;
  color: #54e5c2;
  font: 14px/1 ui-monospace, monospace;
}
.method-scene3d-toolbar[open] .method-scene3d-summary::before { content: "−"; }
.method-scene3d-summary:focus-visible {
  outline: 2px solid #54e5c2;
  outline-offset: 2px;
}
.method-scene3d-toolbar-body { padding-top: 6px; }
.scene-workspace:has(.scene-controls) .method-scene3d-toolbar { top: 124px; }
.scene-controls {
  width: min(650px, calc(100% - 32px));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scene-control { min-width: 0; }
  .scene-control input[type="range"] { width: 100%; }
.scene-control select { min-width: 0; width: 100%; }

.method-scene3d-label {
  color: #b9d1d8;
  font: 9px ui-monospace, monospace;
  letter-spacing: .09em;
}
.method-scene3d-disclosure {
  margin-left: auto;
  color: #6f939f;
  font: 9px ui-monospace, monospace;
}

.method-scene3d-frames,
.method-scene3d-presets { display: flex; gap: 5px; flex-wrap: wrap; }
.method-scene3d-frames { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.method-scene3d-presets { margin-top: 6px; }
.method-scene3d-toolbar button {
  border: 1px solid #27424d;
  background: #07161d;
  color: #9bb8c2;
  padding: 5px 7px;
  font: inherit;
  cursor: pointer;
}
.method-scene3d-toolbar button:hover,
.method-scene3d-toolbar button.active,
.method-scene3d-toolbar button:focus-visible { border-color: #54e5c2; color: #eafffa; }
.method-scene3d-toolbar button:disabled { opacity: .38; cursor: not-allowed; }
.method-scene3d-layer-details { margin-top: 6px; color: #78909a; }
.method-scene3d-layer-details summary { cursor: pointer; font: 9px ui-monospace, monospace; letter-spacing: .04em; }
.method-scene3d-layers { margin-top: 6px; border-top: 1px solid #17313b; }
.method-scene3d-layer {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(39, 66, 77, .55);
}
.method-scene3d-layer input { grid-column: 1 / -1; width: 100%; accent-color: #54e5c2; }
.method-scene3d-layer.layer-error span { color: #ff866f; }
.method-scene3d-note { margin-top: 6px; color: #e4b95d; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .method-scene3d-toolbar {
    top: 78px;
    width: calc(100% - 24px);
    max-height: min(48vh, 286px);
    overflow: hidden;
  }
  .method-scene3d-toolbar:not([open]) { width: min(230px, calc(100% - 24px)); }
  .method-scene3d-toolbar-body { max-height: calc(min(48vh, 286px) - 51px); overflow: auto; }
  .scene-workspace:has(.scene-controls) .method-scene3d-toolbar { top: 180px; }
  .method-scene3d-summary,
  .method-scene3d-toolbar button,
  .transport button,
  .mode { min-height: 44px; }
  .method-scene3d-toolbar button { min-width: 44px; }
  .method-scene3d-note { white-space: normal; }
  .scene-controls {
    left: 10px;
    right: 10px;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scene-control { min-width: 0; }
  .scene-control input[type="range"] { width: 100%; }
}