/* Shared tutorial player. Native video controls remain the no-script fallback. */
@layer components {
  .walkthrough { margin-top: 0; margin-bottom: 30px; }
  .walkthrough-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; color: #606977; font-size: 12px; font-weight: 550; }
  .walkthrough-heading span:first-child { display: flex; align-items: center; gap: 8px; }
  .walkthrough-heading .icon { width: 17px; height: 17px; color: var(--purple); }
  .walkthrough-heading span:last-child { font-variant-numeric: tabular-nums; font-size: 11px; color: #7d748c; }
  .walkthrough .video-card { border: 1px solid #e6dfef; border-radius: 14px; background: #fff; box-shadow: 0 6px 24px #33244b0b; }
  .tutorial-player { color: #fff; background: #152820; overflow: hidden; }
  .tutorial-player [hidden] { display: none !important; }
  .player-stage { position: relative; background: #10231b; }
  .tutorial-player video { width: 100%; max-height: none; aspect-ratio: auto; height: auto; display: block; object-fit: contain; }
  .tutorial-player video::cue { color: white; background: #10231be6; font: 16px/1.5 system-ui, sans-serif; }
  .player-start { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; border: 1px solid #ffffff50; border-radius: 999px; padding: 14px 21px; color: #fff; background: #086148ed; box-shadow: 0 6px 30px #1f0b4355; backdrop-filter: blur(12px); font-size: 13px; font-weight: 600; white-space: nowrap; }
  .player-start:hover { background: #0b7658; }
  .player-start .icon { width: 23px; height: 23px; fill: currentColor; stroke-width: 1; }
  .player-controls { padding: 8px 12px 9px; background: linear-gradient(125deg, #20392e, #14251d); }
  .player-toolbar { display: flex; align-items: center; gap: 6px; min-height: 40px; }
  .player-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; min-height: 38px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #ede9f5; padding: 7px; line-height: 1; font-size: 11px; transition: background .15s, color .15s; }
  .player-button:hover { background: #ffffff14; color: #fff; }
  .player-button > span { display: inline-flex; align-items: center; }
  .player-button .icon { width: 19px; height: 19px; stroke-width: 1.8; }
  .player-button [data-play-icon] .icon { fill: currentColor; stroke-width: 1; }
  .player-button [data-pause-icon] .icon { stroke-width: 3; }
  .player-time { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; color: #f3eefb; padding: 0 4px; }
  .player-time-divider, [data-player-duration] { color: #aaa2b8; }
  .player-spacer { flex: 1; }
  .player-volume { display: flex; align-items: center; gap: 1px; }
  .tutorial-player input[type=range] { --progress: 0%; display: block; appearance: none; -webkit-appearance: none; border: 0; padding: 0; height: 20px; cursor: pointer; background: transparent; margin: 0; accent-color: #a5d9be; }
  .tutorial-player input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 9px; background: linear-gradient(to right, #a5d9be 0 var(--progress), #ffffff30 var(--progress) 100%); }
  .tutorial-player input[type=range]::-moz-range-track { height: 4px; border-radius: 9px; background: linear-gradient(to right, #a5d9be 0 var(--progress), #ffffff30 var(--progress) 100%); }
  .tutorial-player input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #e7f7ef; box-shadow: 0 1px 5px #0005; }
  .tutorial-player input[type=range]::-moz-range-thumb { border: 0; width: 12px; height: 12px; border-radius: 50%; background: #e7f7ef; box-shadow: 0 1px 5px #0005; }
  .tutorial-player .player-seek { width: 100%; }
  .tutorial-player [data-player-volume] { --progress: 100%; width: 48px; }
  .tutorial-player .player-captions { padding: 7px 10px; border-color: #ffffff25; color: #ddd5e9; }
  .cc-icon { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 3px; font-size: 9px; font-weight: 750; letter-spacing: -.06em; }
  .player-captions[aria-pressed=true] { background: #a5d9be; border-color: #a5d9be; color: #123d2c; }
  .player-speed { appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 38px; width: 48px; text-align: center; border: 1px solid #ffffff25; border-radius: 8px; color: #eee6f8; background: #ffffff08; font: 600 11px system-ui, sans-serif; padding: 6px 4px; }
  .player-speed option { background: #20392e; color: #fff; }
  .player-speed:hover { background: #ffffff14; }
  .tutorial-player :focus-visible { outline: 2px solid #b8e4cf; outline-offset: 2px; }
  .player-status { color: #e7def4; font-size: 12px; padding: 9px 16px; border-top: 1px solid #ffffff20; }
  .tutorial-player:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: #10231b; }
  .tutorial-player:fullscreen .player-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .tutorial-player:fullscreen video { width: 100%; height: 100%; max-height: 100%; }
  .tutorial-player:fullscreen .player-controls { flex: 0 0 auto; width: 100%; padding: 12px 24px max(12px, env(safe-area-inset-bottom)); }
  .tutorial-player:fullscreen .player-toolbar { gap: 12px; }
  .walkthrough .video-footer { padding: 12px 16px; color: #7b7385; font-size: 10px; }
  .walkthrough .video-footer a { color: #086148; }
}
@layer responsive {
  @media (max-width: 360px) {
    .player-captions > span:last-child { display: none; }
  }
  @media (max-width: 600px) {
    .player-toolbar { gap: 3px; flex-wrap: wrap; }
    .player-controls { padding: 5px 7px 7px; }
    .player-button { min-width: 36px; min-height: 40px; padding: 7px; }
    .player-time { font-size: 10px; padding: 0 2px; }
    .tutorial-player [data-player-volume] { display: none; }
    .tutorial-player .player-captions { padding: 7px; gap: 5px; font-size: 10px; }
    .player-speed { width: 42px; min-height: 40px; }
    .player-start { padding: 12px 16px; font-size: 12px; }
    .walkthrough .video-footer { gap: 10px; }
    .walkthrough .video-footer > span { display: none; }
    .walkthrough .video-footer a { margin-left: 0; }
  }
}