#tutorial-builder { scroll-margin-top: 160px; min-width: 0; }
.tutorial-builder-body { cursor: default; }
.tb-intro, .tb-section-heading, .tb-upload, .tb-step-heading, .tb-step-actions, .tb-mark-tools, .tb-export-actions, .tb-pagination { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-intro { justify-content: space-between; margin-bottom: 24px; }
.tb-intro > span { font-size: 17px; font-weight: 600; }
.tb-intro small, .tb-upload small, .tb-section-heading > span { color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.6; }
.tb-settings { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.tutorial-builder-body label { display: grid; gap: 8px; min-width: 0; color: rgba(255,255,255,.6); font-size: 13px; }
.tutorial-builder-body input:not([type="file"]), .tutorial-builder-body textarea, .tutorial-builder-body select { width: 100%; min-width: 0; padding: 12px 14px; color: #f4f4f1; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; font: inherit; font-size: 15px; line-height: 1.5; }
.tutorial-builder-body textarea { resize: vertical; min-height: 100px; }
.tutorial-builder-body select { color-scheme: dark; }
.tutorial-builder-body :is(input, textarea, select, button, canvas):focus-visible, .tb-upload-label:focus-within { outline: 2px solid #97c7ff; outline-offset: 3px; }
.tb-upload { margin: 18px 0 12px; }
.tutorial-builder-body .tb-upload-label { display: inline-flex; position: relative; align-items: center; color: #f4f4f1; cursor: pointer; overflow: hidden; }
.tb-upload-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.tool-panel .tb-status { margin-bottom: 24px; padding: 12px 14px; border-radius: 12px; font-size: 13px; background: rgba(151,199,255,.055); color: #adc4d9; white-space: pre-line; overflow-wrap: anywhere; }
.tool-panel .tb-status.is-error { color: #ffc7bb; background: rgba(250,121,94,.08); }
.tb-workspace { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
.tb-workspace > section { min-width: 0; }
.tb-section-heading { justify-content: space-between; margin-bottom: 16px; }
.tb-section-heading h3 { margin: 0; font-size: 17px; font-weight: 600; }
.tb-empty { padding: 50px 18px; text-align: center; line-height: 1.9; color: rgba(255,255,255,.4); border: 1px dashed rgba(255,255,255,.16); border-radius: 18px; }
.tb-step { padding: 18px; margin-bottom: 16px; background: rgba(0,0,0,.13); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; }
.tb-step-heading { justify-content: space-between; margin-bottom: 16px; }
.tb-step-heading h4 { margin: 0; font-size: 15px; }
.tb-step-actions { gap: 6px; }
.tutorial-builder-body .tool-button { min-height: 42px; font-size: 13px; padding: 0 14px; width: auto; }
.tb-step-actions .tool-button { min-width: 42px; padding: 0 10px; }
.tutorial-builder-body button:disabled { opacity: .35; cursor: default; transform: none; }
.tb-step-fields { display: grid; gap: 14px; }
.tb-mark-tools { gap: 6px; margin: 14px 0 10px; }
.tb-mark-tools .tool-button { border-radius: 10px; }
.tb-mark-tools .is-selected { background: rgba(151,199,255,.16); border-color: #97c7ff; color: #d7e9ff; }
.tb-image-stage { border-radius: 12px; overflow: hidden; background: #090c0f; border: 1px solid rgba(255,255,255,.1); padding: 8px; }
.tb-image-stage canvas { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; margin: auto; }
.tb-image-stage canvas.is-drawing { touch-action: none; cursor: crosshair; }
.tb-step-note { display: block; margin-top: 8px; color: rgba(255,255,255,.4); font-size: 12px; line-height: 1.6; }
.tb-preview-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tb-preview { padding: 0; min-height: 220px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.12); }
.tb-preview > span { color: rgba(255,255,255,.4); font-size: 13px; }
.tb-preview canvas { display: block; width: 100%; height: auto; }
.tb-preview canvas[hidden], .tb-pagination[hidden] { display: none; }
.tb-pagination { justify-content: center; margin: 14px 0; }
.tb-pagination > span { color: rgba(255,255,255,.65); font-size: 13px; min-width: 80px; text-align: center; }
.tb-export-actions { margin-top: 16px; }
.tutorial-builder-body .tb-primary { color: #101820; background: #c5def4; border-color: #c5def4; }
.tutorial-builder-body .tool-note { font-size: 12px; line-height: 1.8; }
@media (min-width: 761px) { #tutorial-builder { grid-column: 1 / -1; } }
@media (max-width: 960px) { .tb-workspace { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  #tutorial-builder { scroll-margin-top: 120px; }
  #tutorial-builder:not(.is-open) .tutorial-builder-body { display: none; }
  .tb-settings { grid-template-columns: 1fr; }
  .tb-intro { gap: 6px; margin-bottom: 18px; }
  .tb-intro > span { font-size: 14px; }
  .tb-upload small { flex-basis: 100%; }
  .tb-step { padding: 12px; }
  .tb-step-heading { align-items: start; }
  .tb-step-actions { gap: 4px; }
  .tb-mark-tools { gap: 5px; }
  .tb-mark-tools .tool-button { padding: 0 9px; font-size: 12px; }
  .tb-export-actions .tool-button { flex: 1; }
}