.mf-how-carousel{position:relative;min-width:0}.mf-how-glow{position:absolute;inset:4% -6% 2%;pointer-events:none;background:radial-gradient(closest-side,rgba(99,102,241,.2),transparent 72%);filter:blur(10px)}
.mf-how-window{position:relative;overflow:hidden;border:1px solid rgba(76,91,121,.68);border-radius:16px;background:#0b1220;box-shadow:0 28px 70px -30px rgba(0,0,0,.9),0 0 70px -35px rgba(129,140,248,.65)}
.mf-how-topbar{position:relative;height:44px;display:flex;align-items:center;padding:0 13px;border-bottom:1px solid rgba(51,65,85,.65);background:#10192a}.mf-how-traffic{display:flex;gap:5px}.mf-how-traffic i{width:7px;height:7px;border-radius:50%;background:#fb7185}.mf-how-traffic i:nth-child(2){background:#fbbf24}.mf-how-traffic i:nth-child(3){background:#4ade80}
.mf-how-window-title{position:absolute;left:50%;max-width:60%;transform:translateX(-50%);text-align:center}.mf-how-window-title strong,.mf-how-window-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-how-window-title strong{font-size:11px;font-weight:700;color:#dbe4f3}.mf-how-window-title small{font:8px var(--mono);color:var(--subtle)}.mf-how-live{margin-left:auto;font:700 8px var(--mono);color:var(--success)}.mf-how-live i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}
.mf-how-workspace{display:grid;grid-template-columns:46px minmax(0,1fr);min-height:410px}.mf-how-rail{display:flex;flex-direction:column;align-items:center;gap:11px;padding:12px 7px;border-right:1px solid rgba(51,65,85,.65);background:#0a101c}.mf-how-rail>span{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;color:#52617a;font:700 7px var(--mono)}.mf-how-rail .mf-how-mark{margin-bottom:7px;background:linear-gradient(135deg,#818cf8,#6366f1);box-shadow:0 0 16px rgba(99,102,241,.4)}.mf-how-mark img{width:14px;height:14px}.mf-how-rail>span.is-active{color:#c7d2fe;background:#1d2840}
.mf-how-scenes{display:grid;min-width:0;background:radial-gradient(circle at 85% 10%,rgba(99,102,241,.09),transparent 34%),#0d1524}.mf-how-scene{grid-area:1/1;min-width:0;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease}.mf-how-scene.is-active{opacity:1;visibility:visible;pointer-events:auto}.mf-how-scene-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.mf-how-scene-head>span{font:700 8px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}.mf-how-scene-head>b{border:1px solid;border-radius:999px;padding:4px 8px;font:700 8px var(--mono);text-transform:uppercase}.mf-role-you{color:var(--indigo-soft);border-color:rgba(129,140,248,.28)!important;background:rgba(99,102,241,.12)}.mf-role-agents{color:var(--success);border-color:rgba(74,222,128,.28)!important;background:rgba(74,222,128,.1)}.mf-role-system{color:var(--warning);border-color:rgba(251,191,36,.28)!important;background:rgba(251,191,36,.1)}.mf-eyebrow{font:700 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo-light)}
.mf-chat{display:grid;gap:11px;padding:13px;border:1px solid #24324c;border-radius:10px;background:rgba(15,26,46,.72)}.mf-chat-user{justify-self:end;max-width:82%;padding:9px 11px;border-radius:11px 11px 3px 11px;background:#27334a;color:#dbe4f3;font-size:10px;line-height:1.45}.mf-chat-assistant{padding:1px 2px 2px}.mf-chat-assistant h3{margin-top:5px;color:var(--text);font-size:12px}.mf-chat-assistant p{margin-top:4px;max-width:42em;color:var(--muted);font-size:9px;line-height:1.5}
.mf-chat-plan,.mf-epic-card,.mf-refinement,.mf-workflow,.mf-agent-list,.mf-artifact,.mf-evidence{border:1px solid #24324c;border-radius:10px;background:rgba(15,26,46,.88)}.mf-chat-plan{margin-top:10px;padding:10px 12px}.mf-chat-plan>.mf-eyebrow{display:block;margin-bottom:6px;color:var(--subtle)}.mf-chat-plan>div{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid rgba(51,65,85,.55)}.mf-chat-plan>div:first-of-type{border-top:0}.mf-chat-plan i{width:21px;height:21px;display:grid;place-items:center;flex:none;border-radius:6px;background:rgba(99,102,241,.12);color:var(--indigo-soft);font:700 7px var(--mono);font-style:normal}.mf-chat-plan strong,.mf-chat-plan small{display:block}.mf-chat-plan strong{color:#dbe4f3;font-size:9px}.mf-chat-plan small{color:var(--subtle);font-size:8px}
.mf-chat-action,.mf-artifact-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.mf-chat-action>span{color:var(--subtle);font:600 8px var(--mono)}.mf-chat-action button,.mf-artifact-actions button{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:7px;background:var(--indigo);color:#fff;font:700 8px var(--mono)}.mf-chat-action button:hover,.mf-artifact-actions button:hover{background:#5558e6}
.mf-terminal-scene{padding:0;background:#070b12!important}.mf-terminal-bar{height:38px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 13px;border-bottom:1px solid #202b3d;background:#0b111c;font:700 7px var(--mono);letter-spacing:.08em;text-transform:uppercase}.mf-terminal-bar span{color:#c7d2fe}.mf-terminal-bar b{justify-self:center;color:#52617a;font-weight:600}.mf-terminal-bar em{color:#64748b;font-style:normal}.mf-terminal-body{min-height:371px;padding:18px 20px 20px;background:#070b12;color:#cbd5e1;font-family:var(--mono)}.mf-terminal-command{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #182234;font:8px/1.5 var(--mono)}.mf-terminal-command span{color:#4ade80;font-weight:700}.mf-terminal-command code{color:#e2e8f0}.mf-terminal-intent{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;margin-top:13px;padding:10px 12px;border-left:2px solid #6366f1;background:#10162a}.mf-terminal-intent span,.mf-terminal-output span,.mf-terminal-decision span,.mf-terminal-ready>span{color:#818cf8;font:700 7px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase}.mf-terminal-intent strong{color:#edf2f8;font:600 9px/1.5 var(--mono)}.mf-terminal-output{margin-top:14px;padding:10px 0;border-top:1px solid #182234;border-bottom:1px solid #182234}.mf-terminal-output p{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:4px 1px;font:7px/1.45 var(--mono)}.mf-terminal-output code{overflow:hidden;color:#94a3b8;text-overflow:ellipsis;white-space:nowrap}.mf-terminal-output b{color:#4ade80;font-weight:700;text-transform:uppercase}.mf-terminal-decision{padding:10px 0 8px}.mf-terminal-decision p{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:3px 1px;font:7px/1.45 var(--mono)}.mf-terminal-decision span{color:#fbbf24}.mf-terminal-decision code{color:#aeb8cc}.mf-terminal-ready{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid rgba(74,222,128,.24);border-radius:6px;background:rgba(74,222,128,.055);font:7px var(--mono)}.mf-terminal-ready>span{color:#4ade80}.mf-terminal-ready strong{color:#86efac}.mf-terminal-ready i{width:6px;height:11px;margin-left:1px;background:#86efac;animation:mf-terminal-cursor 1s steps(1,end) infinite}@keyframes mf-terminal-cursor{0%,48%{opacity:1}49%,100%{opacity:0}}
.mf-epic-card{padding:12px}.mf-epic-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.mf-epic-card-head>span{min-width:0;overflow:hidden;color:#dbe4f3;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.mf-epic-card-head>span b{margin-right:6px;color:var(--indigo-light);font:700 8px var(--mono)}.mf-epic-card-head em{flex:none;padding:3px 6px;border-radius:5px;background:rgba(99,102,241,.12);color:var(--indigo-soft);font:700 7px var(--mono);font-style:normal}.mf-epic-card>p{margin-top:9px;color:var(--muted);font-size:9px;line-height:1.5}.mf-epic-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.mf-epic-meta span{padding:7px;border:1px solid rgba(51,65,85,.6);border-radius:6px;color:var(--subtle);font-size:7px}.mf-epic-meta b{display:block;margin-top:2px;overflow:hidden;color:#cbd5e1;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.mf-refinement{margin-top:10px;overflow:hidden}.mf-refinement>div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px}.mf-refinement>div+div{border-top:1px solid rgba(51,65,85,.55)}.mf-refinement i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(74,222,128,.1);color:var(--success);font:700 8px var(--mono);font-style:normal}.mf-refinement strong,.mf-refinement small{display:block}.mf-refinement strong{color:#dbe4f3;font-size:9px}.mf-refinement small{color:var(--subtle);font-size:8px}.mf-refinement>div>b{color:var(--success);font:700 7px var(--mono)}.mf-refinement>div>b.active{color:var(--indigo-light)}.mf-refinement>div:last-child i{background:rgba(99,102,241,.12);color:var(--indigo-soft)}
.mf-state-write{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #24324c;border-radius:8px;background:#101a2e;font:700 8px var(--mono)}.mf-state-write span{color:var(--indigo-light)}.mf-state-write b{color:var(--subtle);font-weight:600}
.mf-workflow{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 11px}.mf-workflow>span{display:grid;justify-items:center;gap:5px;min-width:44px;color:var(--subtle)}.mf-workflow>span i{width:23px;height:23px;display:grid;place-items:center;border:1px solid #334155;border-radius:50%;font:700 8px var(--mono);font-style:normal}.mf-workflow>span b{font:600 7px var(--mono)}.mf-workflow>span.done{color:var(--success)}.mf-workflow>span.done i{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}.mf-workflow>span.active{color:var(--indigo-soft)}.mf-workflow>span.active i{border-color:var(--indigo);background:rgba(99,102,241,.16);box-shadow:0 0 12px rgba(99,102,241,.24)}.mf-workflow>em{height:1px;flex:1;margin-top:11px;background:#334155}.mf-workflow>span.done+em{background:linear-gradient(90deg,var(--success),var(--indigo))}
.mf-agent-list{margin-top:10px;overflow:hidden}.mf-agent-list>div{display:flex;align-items:center;gap:9px;padding:10px}.mf-agent-list>div+div{border-top:1px solid rgba(51,65,85,.55)}.mf-avatar{width:26px;height:26px;display:grid;place-items:center;flex:none;border-radius:7px;background:#312e81;color:#c7d2fe;font:700 7px var(--mono)}.mf-avatar.qa{background:#153c32;color:#86efac}.mf-agent-list p{min-width:0;flex:1}.mf-agent-list p strong,.mf-agent-list p small{display:block}.mf-agent-list p strong{font-size:10px;color:#dbe4f3}.mf-agent-list p small{margin-top:1px;font-size:8px;color:var(--subtle)}.mf-agent-list>div>b{font:700 7px var(--mono);text-transform:uppercase;color:var(--indigo-light)}.mf-agent-list>div>b.done,.mf-agent-list>div>b.ready{color:var(--success)}
.mf-artifact{overflow:hidden}.mf-artifact-head{display:flex;align-items:center;gap:9px;padding:10px 11px;border-bottom:1px solid #24324c;background:#0a101c}.mf-artifact-icon{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:7px;background:rgba(99,102,241,.14);color:var(--indigo-soft)}.mf-artifact-head p{min-width:0;flex:1}.mf-artifact-head strong,.mf-artifact-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-artifact-head strong{color:#dbe4f3;font-size:9px}.mf-artifact-head small{color:var(--subtle);font:7px var(--mono)}.mf-artifact-head>b{color:var(--success);font:700 7px var(--mono)}.mf-artifact-body{padding:12px}.mf-artifact-body h3{margin-top:5px;color:var(--text);font-size:13px}.mf-artifact-body>p{margin-top:4px;color:var(--muted);font-size:8px}.mf-artifact-body>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.mf-artifact-body>div>span{padding:8px;border:1px solid rgba(51,65,85,.65);border-radius:7px;background:#101a2e}.mf-artifact-body>div b,.mf-artifact-body>div small{display:block}.mf-artifact-body>div b{color:#dbe4f3;font-size:12px}.mf-artifact-body>div small{margin-top:2px;color:var(--subtle);font-size:7px}
.mf-evidence{margin-top:10px;padding:6px 12px}.mf-evidence>div{display:flex;align-items:center;gap:9px;padding:7px 0}.mf-evidence i,.mf-artifact-actions>span i{width:20px;height:20px;display:grid;place-items:center;flex:none;border-radius:6px;background:rgba(74,222,128,.1);color:var(--success);font:700 9px var(--mono);font-style:normal}.mf-evidence strong,.mf-evidence small{display:block}.mf-evidence strong{font-size:10px;color:#dbe4f3}.mf-evidence small{font-size:8px;color:var(--subtle)}.mf-artifact-actions>span{display:flex;align-items:center;gap:6px;color:#86efac;font-size:8px}.mf-artifact-actions>span i{border-radius:50%;background:#14532d}
.mf-how-controls{position:relative;margin-top:13px;display:grid;grid-template-columns:32px 1fr auto 32px;align-items:center;gap:10px}.mf-how-controls>button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #263553;border-radius:50%;background:#0d1524;color:var(--muted)}.mf-how-controls>button:hover{border-color:var(--indigo);color:var(--indigo-soft)}.mf-how-controls>p{display:flex;align-items:baseline;gap:6px}.mf-how-controls>p strong{font-size:10px;color:#cbd5e1}.mf-how-controls>p span{font:8px var(--mono);color:#52617a}.mf-how-dots{display:flex;gap:6px}.mf-how-dots button{width:6px;height:6px;padding:0;border-radius:999px;background:#334155;transition:width .2s ease,background .2s ease}.mf-how-dots button.is-active{width:18px;background:var(--indigo)}
.mf-how-scene.is-active .mf-stage-1{animation:mf-stage-in .48s cubic-bezier(.22,.6,.2,1) .12s both}.mf-how-scene.is-active .mf-stage-2{animation:mf-stage-in .52s cubic-bezier(.22,.6,.2,1) .72s both}.mf-how-scene.is-active .mf-stage-3{animation:mf-stage-in .55s cubic-bezier(.22,.6,.2,1) 1.35s both}@keyframes mf-stage-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:900px){.how-side{max-width:36rem}.mf-how-carousel{max-width:680px}}
@media(max-width:560px){.mf-how-workspace{grid-template-columns:36px minmax(0,1fr);min-height:430px}.mf-how-rail{padding-inline:5px}.mf-how-rail>span{width:24px;height:24px;font-size:6px}.mf-how-scene{padding:14px 12px}.mf-terminal-scene{padding:0}.mf-terminal-bar{grid-template-columns:1fr auto}.mf-terminal-bar b{display:none}.mf-terminal-body{min-height:391px;padding:15px 13px}.mf-terminal-command code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-terminal-intent{grid-template-columns:1fr;gap:4px}.mf-terminal-output p{grid-template-columns:55px minmax(0,1fr)}.mf-terminal-output p b{display:none}.mf-terminal-output p:last-child{display:none}.mf-terminal-decision p{grid-template-columns:72px minmax(0,1fr)}.mf-how-window-title{max-width:64%}.mf-how-window-title strong{font-size:9px}.mf-epic-meta{gap:4px}.mf-workflow>span{min-width:38px}.mf-how-controls{grid-template-columns:32px 1fr 32px}.mf-how-controls>p{display:none}.mf-how-dots{justify-content:center}}
@media(prefers-reduced-motion:reduce){.mf-how-scene,.mf-how-dots button{transition:none}.mf-terminal-ready i{animation:none}.mf-how-scene.is-active .mf-stage-1,.mf-how-scene.is-active .mf-stage-2,.mf-how-scene.is-active .mf-stage-3{animation:none}}