*{box-sizing:border-box}body{margin:0;font:14px system-ui,Arial;color:#24273a;background:#f5f6fa}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #d7d9e3;background:#fff;padding:8px 11px;border-radius:7px}button:disabled{opacity:.4;cursor:default}.primary{background:#5145e8;color:#fff;border-color:#5145e8}header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#fff;padding:12px 16px;border-bottom:1px solid #e0e1e8}header strong{margin-right:10px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:14px;padding:14px}.stage{min-width:0;max-width:1150px;width:100%;margin:0 auto}.panel{background:#fff;border:1px solid #e0e1e8;border-radius:12px;padding:15px;align-self:start}.panel h3{font-size:15px;margin:10px 0}.field{margin:12px 0}.field label{display:block;font-size:12px;color:#626779;margin-bottom:5px}.field input,.field textarea,.field select{width:100%;border:1px solid #d4d6e1;border-radius:7px;padding:8px}.field textarea{height:78px;resize:vertical}.toolbar,.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}.nav{justify-content:space-between}.muted{color:#747989;font-size:12px}.frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#e8eaf0;border-radius:10px;touch-action:none;isolation:isolate}.layer{position:absolute;top:0;left:0;width:100%;transform-origin:top left;transition:transform .15s ease}.layer img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.highlight{position:absolute;border:3px solid var(--accent,#5145e8);border-radius:9px;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent,#5145e8) 25%,transparent);pointer-events:none}.dot{position:absolute;width:23px;height:23px;border-radius:50%;border:4px solid #fff;background:var(--accent,#5145e8);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#5145e8) 45%,transparent);transform:translate(-50%,-50%);pointer-events:none;animation:pulse 1.7s infinite}@keyframes pulse{50%{box-shadow:0 0 0 16px transparent}}.tip{position:absolute;width:265px;max-width:75%;background:var(--accent,#5145e8);color:white;border-radius:11px;padding:14px;box-shadow:0 12px 25px #0003;z-index:3}.tip strong{font-size:16px;display:block;margin-bottom:8px}.tip p{margin:0 0 12px;line-height:1.5;overflow-wrap:anywhere}.tip footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.tip button{background:#ffffff30;color:white;border:0;padding:5px 9px}.steps{max-height:250px;overflow:auto;border:1px solid #e1e2e8;border-radius:7px}.step{display:flex;align-items:center;gap:4px;padding:5px}.step.active{background:#eeeaff}.step .choose{flex:1;text-align:left;border:0;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step button{padding:4px 7px}.empty{display:grid;place-content:center;text-align:center;height:100%;padding:25px;color:#777b8a}.activeTool{background:#5145e8;color:#fff}.notice{margin:10px 0;color:#5e6375}.error{color:#b42d2d}.success{color:#187246}.bottom{display:flex;align-items:center;gap:9px;margin-top:10px}.bar{height:5px;background:#e3e4ee;flex:1;border-radius:8px;overflow:hidden}.bar>div{height:100%;background:#5145e8}.hidden{display:none!important}@media(max-width:850px){.layout{grid-template-columns:1fr}.panel{order:-1}}
/* Playback-only: restrained highlight pulse, no step transition */
.mock-browser .highlight {animation:bp-breathe 2.2s ease-in-out infinite;}
@keyframes bp-breathe {0%,100% {box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#5145e8) 20%,transparent)} 50% {box-shadow:0 0 0 9px color-mix(in srgb,var(--accent,#5145e8) 23%,transparent)}}
@media (prefers-reduced-motion:reduce){.mock-browser .highlight{animation:none}}

/* Screenshot loading state: only visible until the image has decoded */
.mock-browser .frame .bp-loader{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#fff;opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 160ms ease;pointer-events:none}
.mock-browser .frame.bp-loading .bp-loader{opacity:1;visibility:visible}
.mock-browser .frame.bp-loading #layer,.mock-browser .frame.bp-loading #tip{opacity:0}
.bp-spinner{width:34px;height:34px;border:3px solid #e6e3ff;border-top-color:#5145e8;border-radius:50%;animation:bp-spin .75s linear infinite}
@keyframes bp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bp-spinner{animation-duration:2s}}