.moe-viz { --v-bg:#0b101b; --v-card:#121c2b; --v-line:#2a3950; --v-text:#edf3ff; --v-dim:#a4b3cb; --v-cyan:#70e6d2; --v-amber:#ffc47b; --v-purple:#b3a1ff; color:var(--v-text); background:radial-gradient(ellipse at 80% 0%,#20354c 0,transparent 52%),var(--v-bg); border:1px solid #33435c; border-radius:18px; margin:28px 0 36px; padding:24px; overflow:hidden; }
.moe-viz * { box-sizing:border-box; }
.moe-viz p { color:var(--v-dim); }
.moe-viz h2 { margin:5px 0 8px; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.04em; color:var(--v-text); }
.moe-viz h3 { margin:0; color:var(--v-text); font-size:1rem; }
.moe-viz .mv-eyebrow { font:600 10px/1.4 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; color:var(--v-cyan); }
.mv-top { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.mv-top p { margin:0; font-size:13px; max-width:570px; }
.mv-chip { border:1px solid var(--v-line); border-radius:30px; padding:6px 10px; font:11px ui-monospace,monospace; white-space:nowrap; color:var(--v-dim); }
.mv-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 18px; }
.moe-viz button,.moe-viz select { font:inherit; color:var(--v-text); background:#152235; border:1px solid #3c506b; border-radius:7px; padding:7px 11px; cursor:pointer; }
.moe-viz button:hover { background:#253b52; border-color:var(--v-cyan); }
.moe-viz button:focus-visible,.moe-viz select:focus-visible { outline:2px solid var(--v-cyan); outline-offset:3px; }
.moe-viz button[aria-pressed="true"] { background:#203b40; color:var(--v-cyan); border-color:var(--v-cyan); }
.mv-controls label { font-size:12px; color:var(--v-dim); margin-left:auto; }
.mv-controls select { margin-left:5px; font-size:12px; }
.mv-layer-heading { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--v-dim); margin-bottom:8px; }
.mv-layers { display:grid; grid-template-columns:repeat(48,1fr); gap:3px; }
.moe-viz .mv-layer { padding:0; height:25px; min-width:0; border-radius:3px; border-color:#334760; background:#22374c; }
.moe-viz .mv-layer.full { background:#554775; border-color:#7965a4; }
.moe-viz .mv-layer[aria-pressed="true"] { background:var(--v-cyan); border-color:#cafff5; box-shadow:0 0 14px #70e6d24a; }
.mv-model-flow { margin:12px 0 18px; font:11px/1.7 ui-monospace,monospace; color:var(--v-dim); }
.mv-model-flow strong { color:var(--v-text); }
.mv-map { display:grid; grid-template-columns:1fr 2.2fr; gap:14px; position:relative; }
.mv-disk,.mv-memory { border:1px solid var(--v-line); border-radius:12px; padding:15px; min-width:0; }
.mv-disk { background:#191b26; border-color:#64503b; }
.mv-memory { background:#0e1928b8; }
.mv-zone-title { display:flex; justify-content:space-between; align-items:baseline; gap:5px; margin-bottom:14px; font:600 11px ui-monospace,monospace; letter-spacing:.05em; color:var(--v-amber); }
.mv-memory .mv-zone-title { color:var(--v-cyan); }
.mv-zone-title small { font-size:10px; font-weight:400; letter-spacing:0; color:var(--v-dim); }
.moe-viz .mv-node { display:block; text-align:left; width:100%; background:var(--v-card); border:1px solid var(--v-line); padding:12px; margin:0; border-radius:8px; font-size:13px; transition:border-color .25s,box-shadow .25s; }
.mv-node strong { display:block; font-size:14px; font-weight:600; }
.mv-node small { display:block; color:var(--v-dim); font-size:11px; line-height:1.6; margin-top:3px; }
.moe-viz .mv-node.active { border-color:var(--v-cyan); box-shadow:0 0 24px #70e6d219,inset 0 0 20px #70e6d208; }
.moe-viz .mv-node.reading { border-color:var(--v-amber); box-shadow:0 0 20px #ffc47b16; }
.moe-viz .mv-node.selected { outline:1px solid var(--v-purple); outline-offset:3px; }
.mv-grid { display:grid; grid-template-columns:repeat(32,1fr); gap:2px; margin:12px 0 6px; }
.mv-dot { aspect-ratio:1; border-radius:1px; background:#3d3d49; }
.mv-dot.chosen { background:var(--v-cyan); box-shadow:0 0 4px #70e6d277; }
.mv-dot.miss { background:var(--v-amber); box-shadow:0 0 5px #ffc47b77; }
.mv-disk .mv-node+.mv-node { margin-top:15px; }
.mv-memory-body { display:grid; grid-template-columns:.85fr 1.5fr; gap:12px; }
.mv-host,.mv-device { min-width:0; }
.mv-subtitle { margin:0 0 8px; font:10px ui-monospace,monospace; letter-spacing:.06em; color:var(--v-dim); }
.mv-device-stack { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mv-device-stack .wide { grid-column:1/-1; }
.mv-device-stack .mv-node { padding:10px; }
.mv-device-stack .mv-node strong { font-size:12px; }
.mv-transfer { position:relative; margin:12px 0; padding:8px 0; border-top:1px dashed #5e554b; border-bottom:1px dashed #5e554b; font:10px/1.6 ui-monospace,monospace; color:var(--v-dim); }
.mv-transfer.running { color:var(--v-amber); border-color:var(--v-amber); }
.mv-transfer.running::after { content:''; position:absolute; top:-2px; left:0; width:22px; height:3px; background:var(--v-amber); box-shadow:0 0 9px var(--v-amber); animation:mv-transfer 1.6s linear infinite; }
@keyframes mv-transfer { to { left:calc(100% - 22px); } }
.mv-cache-grid { display:grid; grid-template-columns:repeat(16,1fr); gap:3px; margin-top:9px; }
.mv-cache-grid i { display:block; height:7px; border-radius:1px; background:#294344; }
.mv-cache-grid i.hit { background:var(--v-cyan); }
.mv-cache-grid i.new { background:var(--v-amber); }
.mv-footnote { font-size:10px; color:var(--v-dim); line-height:1.6; margin:10px 0 0; }
.mv-timeline { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:20px; }
.moe-viz .mv-stage { border:0; border-top:2px solid #33435b; border-radius:0; background:transparent; text-align:left; color:var(--v-dim); font-size:11px; padding:9px 4px; }
.moe-viz .mv-stage[aria-pressed="true"] { border-color:var(--v-cyan); color:var(--v-cyan); background:#132b30; }
.mv-narrative { min-height:68px; padding:12px 0; }
.mv-narrative strong { font-size:14px; }
.mv-narrative p { font-size:12px; margin:4px 0 0; }
.mv-detail { border-top:1px solid var(--v-line); padding-top:16px; display:grid; grid-template-columns:1fr 1.5fr; gap:24px; }
.mv-detail h3 { margin:4px 0; }
.mv-detail p { font-size:12px; margin:4px 0; }
.mv-kernel { display:block; color:var(--v-purple); font:11px/1.7 ui-monospace,monospace; overflow-wrap:anywhere; }
.moe-viz a { color:var(--v-cyan); }
.mv-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:10px; margin:12px 0 0; color:var(--v-dim); }
.mv-legend span::before { content:''; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:2px; background:var(--v-cyan); }
.mv-legend span:nth-child(2)::before { background:var(--v-amber); }
.mv-legend span:nth-child(3)::before { background:var(--v-purple); }
@media(max-width:760px) { .moe-viz { padding:16px; } .mv-map { grid-template-columns:1fr; } .mv-disk { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mv-disk .mv-zone-title { grid-column:1/-1; margin-bottom:0; } .mv-disk .mv-node+.mv-node { margin:0; } .mv-grid { gap:2px; } .mv-top .mv-chip { display:none; } .mv-layers { grid-template-columns:repeat(24,1fr); } .mv-detail { gap:12px; } }
@media(max-width:460px) { .mv-memory-body,.mv-detail { grid-template-columns:1fr; } .mv-disk { display:block; } .mv-disk .mv-zone-title { margin-bottom:12px; } .mv-disk .mv-node+.mv-node { margin-top:12px; } .mv-grid { grid-template-columns:repeat(64,1fr); } .mv-timeline { grid-template-columns:repeat(3,1fr); } .mv-controls label { margin-left:0; } .mv-layer-heading { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .mv-transfer.running::after { animation:none; left:50%; } .moe-viz .mv-node { transition:none; } }