.tutorial-panel { margin-block: 24px; }
.tutorial-icon { width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; }
.device-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tutorial-intro, .tutorial-step__body, .tutorial-note { font-family: "Segoe UI", system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; }
.tutorial-intro { margin: 0 0 24px; color: #fce6ba; }
.tutorial-part + .tutorial-part { margin-top: 32px; padding-top: 28px; border-top: 2px solid #87b8cc; }
.tutorial-part h3, .tutorial-option h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 20px; color: #fff; }
.tutorial-part h3 > .tutorial-icon { width: 26px; height: 26px; flex-basis: 26px; color: #fdcc04; }
.tutorial-steps { list-style: none; display: grid; gap: 18px; padding: 0; margin: 0; }
.tutorial-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px 14px; }
.tutorial-step__badge { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; color: #fff; background: #1b4f62; border: 1px solid #87b8cc; border-radius: 10px; margin-top: 2px; }
.tutorial-step__badge > span { position: absolute; right: -6px; bottom: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fce6ba; color: #163b46; font: 700 11px "Segoe UI", sans-serif; }
.tutorial-step__body { flex: 1; min-width: 0; color: #fce6ba; }
.tutorial-step__body p { margin: 0; }
.tutorial-step__body strong { color: #fff; font-weight: 750; }
.tutorial-step__link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tutorial-step__link:hover { color: #fdcc04; }
.tutorial-step__link > .tutorial-icon { width: 17px; height: 17px; flex-basis: 17px; }
.tutorial-step__link span { min-width: 0; }
.tutorial-step .copy-field { grid-column: 1 / -1; }
.tutorial-step textarea { font-family: Consolas, monospace; font-size: 13px; color: #fff; padding: 10px; line-height: 1.6; }
.tutorial-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tutorial-option { min-width: 0; padding: 20px; border: 2px solid #87b8cc; border-radius: 8px; background: #1b4f62; }
.tutorial-note { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; padding: 12px; border-left: 3px solid #fdcc04; background: #1b4f62; color: #fce6ba; }
.tutorial-note .tutorial-icon { color: #fdcc04; margin-top: 2px; }
.tutorial-video { margin-top: 18px; }
.tutorial-video summary { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; cursor: pointer; font-family: "Segoe UI", sans-serif; font-size: 16px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tutorial-video video { display: block; width: min(100%, 300px); max-height: 480px; aspect-ratio: 9 / 16; margin-top: 16px; border-radius: 8px; background: #020303; }
@media (max-width: 760px) {
  .tutorial-options { grid-template-columns: minmax(0, 1fr); }
  .tutorial-step { gap: 12px; }
  .tutorial-step .copy-controls textarea { flex-basis: 100%; width: 100%; min-width: 0; }
  .tutorial-step .copy-controls { flex-wrap: wrap; }
}