.mf-demo{max-width:1440px;width:calc(100% - 112px);margin:38px auto 60px}.mf-header{display:flex;justify-content:space-between;gap:40px;margin-bottom:30px}.mf-header h1{font:500 clamp(30px,3.2vw,44px)/1.1 var(--sans);letter-spacing:-1.5px;margin-bottom:18px}.mf-header p{font-size:14px;line-height:1.85;color:var(--muted);max-width:790px}.mf-header>a{font-size:12px;white-space:nowrap;margin-top:12px}.mf-shell{border:1px solid #bac2b9;background:#14232b;overflow:hidden}.mf-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr)}.mf-viewport{height:540px;position:relative;overflow:hidden;background:#18252e}.mf-viewport canvas{display:block;width:100%;height:100%;touch-action:none}.mf-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#c2cfc8;pointer-events:none}.mf-scene-top{position:absolute;top:19px;left:22px;right:20px;display:flex;align-items:center;justify-content:space-between;color:#c0cfc9;font-size:9px;letter-spacing:1.4px;pointer-events:none}.mf-scene-top>div{display:flex;gap:4px;pointer-events:auto}.mf-scene-top button{padding:7px 9px;background:#17262ed9;border:1px solid #ffffff1a;border-radius:3px;color:#b6c4c2;font-size:10px}.mf-scene-top button[aria-pressed=true]{color:#e4eed3;border-color:#9baf8570}.mf-scene-bottom{position:absolute;left:22px;bottom:18px;display:flex;gap:15px;color:#bac9c6;font-size:9px;pointer-events:none}.mf-scene-bottom span{display:flex;align-items:center;gap:6px}.mf-scene-bottom i{display:inline-block;width:6px;height:6px;border-radius:1px;background:#abb8be}.mf-scene-bottom .mf-key-fixture{background:#a2bd92}.mf-scene-bottom .mf-key-access{background:#e8cd6d}.mf-scene-bottom .mf-key-force{background:#b1c9e7}.mf-orbit-hint{position:absolute;right:20px;bottom:18px;color:#99aaa8;font-size:8px;letter-spacing:1px;pointer-events:none}.mf-search{border-left:1px solid #ffffff17;padding:21px 22px 18px;min-width:0;color:#d9e5df;background:#142129;display:flex;flex-direction:column}.mf-tree-header{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:1.5px}.mf-tree-header span:last-child{color:#96aaa7;letter-spacing:0;font-variant-numeric:tabular-nums}.mf-tree{height:310px;margin:12px -9px 0;flex-shrink:0}.mf-tree svg{width:100%;height:100%;overflow:visible}.mf-tree .mf-edge{fill:none;stroke:#35504e;stroke-width:1;transition:opacity .18s,stroke .18s}.mf-tree .mf-edge.is-pruned{stroke:#704c4c;stroke-dasharray:3 4;opacity:.5}.mf-tree .mf-edge.is-current{stroke:#e8cd6d;stroke-width:1.7;opacity:1}.mf-tree .mf-edge.is-path{stroke:#b0ce9c;stroke-width:1.8;opacity:1}.mf-node{cursor:pointer;outline:none}.mf-node .mf-hit{fill:transparent;stroke:none}.mf-node .mf-circle{fill:#23363b;stroke:#4c6561;stroke-width:1.2;transition:fill .18s,stroke .18s}.mf-node.is-good .mf-circle{fill:#b0ce9c;stroke:#c4dfae}.mf-node.is-pruned .mf-circle{fill:#3c3033;stroke:#b57870}.mf-node.is-current .mf-circle{fill:#e8cd6d;stroke:#f5e7a5;stroke-width:2}.mf-node:hover .mf-circle,.mf-node:focus-visible .mf-circle{stroke:#fff;stroke-width:3}.mf-node .mf-cross{stroke:#dd9588;stroke-width:1.4;pointer-events:none}.mf-tree text{fill:#9eb1aa;font:10px var(--sans);letter-spacing:.5px;pointer-events:none}.mf-tree .mf-count-label{font-size:9px;fill:#7f9692}.mf-tree-legend{display:flex;gap:18px;font-size:9px;color:#9caea8;margin-top:-3px}.mf-tree-legend span{display:flex;align-items:center;gap:5px}.mf-tree-legend i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:7px;height:7px;border-radius:50%}.mf-node-good{background:#b0ce9c}.mf-node-bad{color:#df968c;font-size:15px}.mf-node-current{background:#e8cd6d}.mf-selection{border-top:1px solid #ffffff15;margin-top:19px;padding-top:17px}.mf-selection>span{font-size:8px;letter-spacing:1.5px;color:#a9c18f}.mf-selection h2{font:500 17px/1.3 var(--sans);letter-spacing:-.3px;margin:8px 0}.mf-selection p{font-size:11px;line-height:1.65;color:#9eb0aa;min-height:38px}.mf-checks{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-top:1px solid #ffffff17;color:#dbe4d7;padding:17px 22px;gap:24px}.mf-checks>div{position:relative;border-right:1px solid #ffffff15}.mf-checks>div:last-child{border:0}.mf-checks span{display:block;font-size:9px;color:#9eafa8;margin-bottom:6px}.mf-checks strong{font:400 15px var(--sans);font-variant-numeric:tabular-nums}.mf-checks strong.is-bad{color:#e1a292}.mf-checks strong.is-good{color:#c3d8a5}.mf-dof{display:inline-flex;gap:4px;margin-left:11px}.mf-dof i{height:6px;width:6px;border-radius:50%;background:#3b4a4b}.mf-dof i.filled{background:#b3ce9a}.mf-controls{background:#eef0e6;display:flex;align-items:center;gap:17px;padding:13px 20px;color:#374235;min-height:55px}.mf-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:none;padding:6px 0;font-size:11px;white-space:nowrap}.mf-controls #mf-play{min-width:55px;justify-content:flex-start}.mf-controls #mf-replay{font-size:21px}.mf-controls input{min-width:20px;flex:1;accent-color:#737e56;cursor:pointer;height:3px}.mf-controls>span{font:10px monospace}.mf-controls #mf-solution{margin-left:8px}.mf-caption{font-size:11px;color:var(--muted);line-height:1.7;margin-top:14px;max-width:830px}.mf-experiment{margin-top:58px;padding-top:30px;border-top:1px solid var(--rule)}.mf-experiment>div{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:23px}.mf-experiment h2{font:500 25px var(--sans);letter-spacing:-.7px}.mf-experiment p{font-size:12px;color:var(--muted)}.mf-experiment video{display:block;width:100%;max-height:720px;aspect-ratio:16/9;background:#18252e;border:1px solid var(--rule)}
.page-work .mf-preview{position:absolute;inset:0;margin:0;width:100%;height:100%}.mf-preview .mf-shell,.mf-preview .mf-workspace,.mf-preview .mf-viewport{height:100%;border:0}.mf-preview .mf-workspace{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.mf-preview .mf-search{padding:15px 10px 10px}.mf-preview .mf-tree-header{font-size:7px;letter-spacing:.6px}.mf-preview .mf-tree-header span:last-child{display:none}.mf-preview .mf-tree{height:calc(100% - 37px);margin:0 -5px}.mf-preview .mf-tree-legend{font-size:7px;gap:8px;margin-top:0}.mf-preview :is(.mf-scene-top,.mf-scene-bottom,.mf-orbit-hint,.mf-selection,.mf-checks){display:none}.mf-preview .mf-controls{position:absolute;bottom:9px;left:9px;z-index:2;padding:0;background:none;min-height:0}.mf-preview .mf-controls>:not(#mf-play){display:none}.mf-preview #mf-play{min-width:58px;height:28px;padding:6px 9px;font:10px var(--sans);color:#25362d;background:#f5f6eee8;border:1px solid #ffffff66;border-radius:3px}.mf-preview .mf-viewport canvas{touch-action:pan-y}
@media(min-width:1600px){.mf-viewport{height:610px}.mf-tree{height:360px}}
@media(max-width:1000px){.mf-demo{width:calc(100% - 64px)}.mf-workspace{grid-template-columns:minmax(0,1.4fr) minmax(285px,1fr)}.mf-search{padding-inline:16px}.mf-orbit-hint{display:none}.mf-scene-top{left:15px;right:15px}.mf-scene-top>span{font-size:8px}.mf-scene-bottom{left:15px;gap:10px}}
@media(max-width:960px){.mf-demo{width:calc(100% - 36px);margin-top:25px}.mf-header{gap:15px}.mf-header h1{font-size:31px;letter-spacing:-1px}.mf-header p{font-size:13px}.mf-header>a{font-size:11px}.mf-workspace{grid-template-columns:1fr}.mf-viewport{height:380px}.mf-search{border-left:0;border-top:1px solid #ffffff17;padding:18px 20px}.mf-tree{height:245px;max-width:520px;width:100%;align-self:center}.mf-selection p{min-height:0}.mf-selection{margin-top:15px}.mf-checks{grid-template-columns:1fr 1fr;row-gap:17px;padding:18px 20px}.mf-checks>div:nth-child(2){border:0}.mf-controls{gap:12px;padding:11px 14px}.mf-controls #mf-solution{font-size:10px;margin-left:0}.mf-caption{font-size:10px}.mf-experiment{margin-top:40px}.mf-experiment>div{display:block}.mf-experiment p{margin-top:10px}.mf-preview .mf-search{border-top:0;max-height:100%;overflow:hidden}.mf-preview .mf-tree{max-width:none;width:auto}.mf-preview .mf-viewport{height:100%}}
.mf-tree text{font-size:12px}.mf-tree .mf-count-label{font-size:11px}
.mf-preview .mf-tree-legend,.mf-preview .mf-tree text{display:none}.mf-preview .mf-tree{height:calc(100% - 14px)}
@media(prefers-reduced-motion:reduce){.mf-tree .mf-edge,.mf-node .mf-circle{transition:none}}

.mf-tree text{paint-order:stroke;stroke:#142129;stroke-width:5px;stroke-linejoin:round;font-size:13px}