.tutorial-player { --player-blue:#2f80ed; }
.tutorial-player .demo-layout { grid-template-columns:170px minmax(0,1fr); gap:20px; }
.tutorial-player .demo-product-mark { background:transparent; box-shadow:none; }
.tutorial-player .demo-product-mark img { width:34px; height:34px; }
.tutorial-player .demo-card-top { gap:12px; }
.tutorial-player .demo-card-actions { flex-wrap:wrap; gap:12px; }
.demo-speed { border:1px solid #deE8f6; border-radius:8px; background:#fff; color:#7c91ae; padding:6px; font:11px var(--sans); }
.tutorial-player .demo-progress { overflow:hidden; }
.tutorial-player .demo-progress span { width:100%; transform:scaleX(0); transform-origin:left; transition:none; will-change:transform; }
.tutorial-player .demo-stage { border-color:#dbe7f6; background:#eef5fc; box-shadow:0 12px 32px #587daa12; }
.tutorial-player .demo-screen { aspect-ratio:8/5; background:linear-gradient(145deg,#f3f8fe,#e7effc); isolation:isolate; }
.demo-world { position:absolute; left:0; top:0; width:1000px; height:625px; transform-origin:0 0; pointer-events:none; }
.demo-camera { position:absolute; width:1000px; height:625px; transform-origin:0 0; will-change:transform; }
.tutorial-player .demo-focus { left:0; top:0; border:2px solid #3d8af5; border-radius:9px; box-shadow:0 0 0 3px #fff9; transform:none; animation:none; pointer-events:none; }
.tutorial-player .demo-focus span { display:none; }
.demo-pointer { position:absolute; top:0; left:0; width:23px; height:29px; pointer-events:none; color:#173c70; z-index:3; transform-origin:2px 2px; will-change:transform; }
.demo-pointer svg { width:100%; height:100%; filter:drop-shadow(1px 3px 2px #16385a30); }
.demo-click-ring { position:absolute; top:0; left:0; width:38px; height:38px; border:2px solid #3487f1; border-radius:50%; background:#62a5ff18; pointer-events:none; z-index:2; will-change:transform,opacity; }
.demo-source-label { position:absolute; bottom:12px; left:12px; padding:4px 8px; color:#7489a6; background:#ffffffed; border:1px solid #e2ebf7; border-radius:6px; font-size:9px; pointer-events:none; }
.demo-scene-notice { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; background:#f5f9ffed; color:#7088aa; font-size:12px; }
.demo-scene-notice button { border:1px solid #c6dcfb; padding:8px 15px; border-radius:8px; background:#fff; color:#2f80ed; cursor:pointer; }
.demo-scene-footer { display:flex; align-items:center; gap:8px; padding:10px 13px; background:#fff; color:#8295af; font-size:11px; border-top:1px solid #e2ebf7; }
.demo-scene-footer>i { width:6px; height:6px; border-radius:50%; background:#82a9df; flex-shrink:0; }
.demo-scene-footer.is-result>i { background:#39ad7e; }
.demo-scene-footer .demo-time { margin-left:auto; flex-shrink:0; font:10px var(--mono); color:#96a7bf; }
.demo-action-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.demo-action-list>li { flex:1; min-width:0; }
.demo-action-list button { display:flex; align-items:center; gap:7px; width:100%; min-height:39px; border:1px solid #e1eaf6; padding:8px 10px; border-radius:9px; background:#ffffffa8; color:#8b9cb3; font:11px var(--sans); text-align:left; cursor:pointer; }
.demo-action-list button span { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; background:#eef3fa; font:9px var(--mono); flex-shrink:0; }
.demo-action-list button[aria-current="step"] { background:#edf5ff; border-color:#bfD9fa; color:#347edb; }
.demo-action-list button[aria-current="step"] span { color:#fff; background:#4c90ec; }
.demo-action-list button.is-done span { background:#e6f6ee; color:#25976b; }
.tutorial-player .demo-caption { animation:none; grid-template-columns:37px minmax(0,1fr); gap:12px; align-items:start; padding:18px 16px; min-height:100px; background:#f7fbff; border-color:#e0eaf7; }
.tutorial-player .caption-index { width:33px; height:33px; border-radius:10px; font-size:11px; }
.tutorial-player .caption-copy h3 { font-size:17px; margin-bottom:6px; }
.tutorial-player .caption-copy>p:last-child { font-size:12px; color:#7389a8; }
.tutorial-player .demo-controls { justify-content:space-between; align-items:center; gap:8px; margin-top:14px; }
.demo-controls-main { display:flex; gap:8px; }
.tutorial-player .control-button:disabled { opacity:.42; cursor:default; transform:none; }
.demo-safety-note { margin:14px 0 0; color:#9aabc0; font-size:10px; line-height:1.7; text-align:center; }
.tutorial-player .demo-step { min-height:63px; }
.tutorial-player .demo-step.is-complete>span { color:#36a67b; }
.tutorial-player .demo-step.is-active { box-shadow:none; }
.tutorial-player .stage-status { font-family:var(--sans); font-size:10px; color:#7e94ae; }
.tutorial-player.is-playing .stage-status { color:#3ba375; }
.tutorial-player .stage-status .status-dot { background:currentColor; }
.tutorial-body .mini-pointer { animation:none; }
.demo-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:980px){.tutorial-player .demo-layout{grid-template-columns:145px minmax(0,1fr);gap:12px;}.tutorial-player .demo-step{padding:11px 7px;column-gap:5px;}.tutorial-player .demo-step small{font-size:9px;}}
@media(max-width:700px){.tutorial-player .demo-layout{grid-template-columns:1fr;padding:13px 12px 17px;gap:13px;}.tutorial-player .demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:6px;}.tutorial-player .demo-step{min-width:0;min-height:36px;padding:7px 6px;gap:5px;justify-content:center;}.tutorial-player .demo-step b{font-size:10px;white-space:nowrap;}.tutorial-player .demo-step>span{font-size:8px;}.tutorial-player .demo-card-top{padding:15px 13px;}.tutorial-player .demo-count strong{font-size:15px;}.tutorial-player .demo-stage-bar{padding:0 9px;gap:6px;font-size:8px;height:33px;}.tutorial-player .stage-status{font-size:8px;}.tutorial-player .stage-traffic{display:none;}.demo-action-list{gap:5px;}.demo-action-list button{min-height:43px;gap:5px;padding:6px;font-size:9px;}.demo-action-list button span{width:14px;height:14px;font-size:8px;}.tutorial-player .demo-caption{grid-template-columns:27px minmax(0,1fr);gap:9px;padding:14px 12px;min-height:124px;}.tutorial-player .caption-index{width:26px;height:26px;font-size:9px;border-radius:8px;}.tutorial-player .caption-copy h3{font-size:15px;}.tutorial-player .caption-copy>p:last-child{font-size:11px;line-height:1.8;}.demo-source-label{font-size:7px;bottom:7px;left:7px;padding:2px 5px;}.demo-scene-footer{font-size:9px;padding:9px;min-height:36px;}.demo-time{font-size:8px!important;}.demo-pointer{width:18px;height:23px;}.demo-controls-main{flex:1;}.tutorial-player .control-button{flex:1;min-height:37px;font-size:10px;}.tutorial-player .control-button-replay{flex:0 0 auto;padding:0 5px;}.demo-safety-note{font-size:9px;text-align:left;}}

@media(max-width:700px){.demo-action-list{grid-template-columns:repeat(2,minmax(0,1fr));}.demo-action-list button{font-size:10px;min-height:36px;}.tutorial-player .demo-step b{font-size:9px;}.tutorial-player .demo-card-actions{gap:6px;}.demo-speed{font-size:10px;}.demo-scene-footer>span:first-of-type{min-width:0;}}