@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--mf-bg:#121214;--mf-surface:#18181b;--mf-surface-2:#27272a;--mf-on-bg:#f4f4f5;--mf-on-surface:#e4e4e7;--mf-muted:#a1a1aa;--mf-faint:#71717a;--mf-outline:#3f3f46;--mf-outline-strong:#f4f4f5;--mf-primary:#3b82f6;--mf-primary-300:#93c5fd;--mf-primary-600:#2563eb;--mf-secondary:#ef4444;--mf-tertiary:#eab308;--mf-font-sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;--mf-font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--mf-r-sm:4px;--mf-r-md:8px;--mf-r-lg:12px;--mf-r-xl:16px;--mf-r-full:9999px;--mf-space-xs:4px;--mf-space-sm:8px;--mf-space-md:16px;--mf-space-lg:24px;--mf-space-xl:32px;--mf-sidebar-w:300px;--mf-inspector-w:280px;--mf-topbar-h:52px;--mf-statusbar-h:30px}.mf-shell{grid-template-rows:auto 1fr auto;grid-template-columns:var(--mf-shell-sidebar-track,var(--mf-sidebar-w)) minmax(0, 1fr) var(--mf-shell-inspector-track,var(--mf-inspector-w));background:var(--mf-bg);width:100%;height:100vh;color:var(--mf-on-bg);font-family:var(--mf-font-sans);-webkit-font-smoothing:antialiased;grid-template-areas:"topbar topbar topbar""sidebar main inspector""status status status";display:grid;position:relative;overflow:hidden}.mf-shell:before{content:"";z-index:2;background:linear-gradient(90deg, var(--mf-primary) 0%, color-mix(in srgb, var(--mf-primary) 60%, var(--mf-tertiary)) 50%, var(--mf-tertiary) 100%);opacity:.9;height:2px;position:absolute;inset:0 0 auto}.mf-shell__topbar{grid-area:topbar}.mf-shell__sidebar{grid-area:sidebar;min-width:0}.mf-shell__main{grid-area:main;min-width:0;overflow:hidden}.mf-shell__inspector{grid-area:inspector;min-width:0}.mf-shell__status{grid-area:status}.mf-label{font-family:var(--mf-font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mf-muted);font-size:11px;font-weight:500}.mf-dot{border-radius:var(--mf-r-full);background:var(--mf-faint);flex:none;width:7px;height:7px;display:inline-block}.mf-dot--primary{background:var(--mf-primary);box-shadow:0 0 6px color-mix(in srgb, var(--mf-primary) 70%, transparent)}.mf-dot--secondary{background:var(--mf-secondary)}.mf-dot--tertiary{background:var(--mf-tertiary)}.mf-topbar{align-items:center;gap:var(--mf-space-md);height:var(--mf-topbar-h);padding:0 var(--mf-space-md);background:var(--mf-surface);border-bottom:1px solid var(--mf-outline);display:flex}.mf-topbar__left,.mf-topbar__right{align-items:center;gap:var(--mf-space-sm);flex:none;display:flex}.mf-topbar__center{justify-content:center;align-items:center;gap:var(--mf-space-sm);flex:1;min-width:0;display:flex}.mf-topbar__brand{align-items:center;gap:var(--mf-space-sm);font-family:var(--mf-font-mono);letter-spacing:.06em;color:var(--mf-on-bg);font-size:13px;font-weight:600;display:flex}.mf-topbar__brand-mark{background:linear-gradient(135deg, var(--mf-primary), var(--mf-primary-600));border-radius:3px;width:14px;height:14px;rotate:45deg}.mf-sidebar{background:var(--mf-surface);flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.mf-sidebar--left{border-right:1px solid var(--mf-outline)}.mf-sidebar--right{border-left:1px solid var(--mf-outline)}.mf-sidebar__header{justify-content:space-between;align-items:center;gap:var(--mf-space-sm);padding:0 var(--mf-space-md);border-bottom:1px solid var(--mf-outline);flex:none;height:40px;display:flex}.mf-sidebar__body{flex:1;min-height:0;overflow:auto}.mf-sidebar__footer{padding:var(--mf-space-sm) var(--mf-space-md);border-top:1px solid var(--mf-outline);flex:none}.mf-sidebar__collapse{border-radius:var(--mf-r-sm);width:22px;height:22px;color:var(--mf-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .12s,color .12s;display:inline-flex}.mf-sidebar__collapse:hover{background:var(--mf-surface-2);color:var(--mf-on-surface)}.mf-sidebar__collapse svg{transition:rotate .18s}.mf-sidebar.is-collapsed .mf-sidebar__collapse svg{rotate:180deg}.mf-inspector{background:var(--mf-surface);border-left:1px solid var(--mf-outline);flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.mf-inspector__header{align-items:center;gap:var(--mf-space-sm);padding:0 var(--mf-space-md);border-bottom:1px solid var(--mf-outline);flex:none;height:40px;display:flex}.mf-inspector__body{min-height:0;padding:var(--mf-space-md);gap:var(--mf-space-md);flex-direction:column;flex:1;display:flex;overflow:auto}.mf-panel{background:var(--mf-surface-2);border:1px solid var(--mf-outline);border-radius:var(--mf-r-md);overflow:hidden}.mf-panel--muted{background:color-mix(in srgb, var(--mf-surface-2) 55%, transparent)}.mf-panel__header{justify-content:space-between;align-items:center;gap:var(--mf-space-sm);padding:var(--mf-space-sm) var(--mf-space-md);border-bottom:1px solid var(--mf-outline);display:flex}.mf-panel__body{padding:var(--mf-space-md);color:var(--mf-on-surface);font-size:14px}.mf-editor{background:var(--mf-bg);flex-direction:column;height:100%;min-height:0;display:flex}.mf-editor__toolbar{align-items:center;gap:var(--mf-space-sm);min-height:40px;padding:0 var(--mf-space-md);border-bottom:1px solid var(--mf-outline);flex:none;display:flex}.mf-editor__canvas{flex:1;min-height:0;position:relative;overflow:auto}.mf-editor__empty{justify-content:center;align-items:center;gap:var(--mf-space-md);text-align:center;background-image:radial-gradient(color-mix(in srgb, var(--mf-outline) 55%, transparent) 1px, transparent 1px);background-position:50%;background-size:22px 22px;flex-direction:column;height:100%;display:flex}.mf-editor__empty-mark{border:1px solid var(--mf-outline);border-radius:var(--mf-r-md);width:40px;height:40px;color:var(--mf-faint);background:var(--mf-surface);place-items:center;display:grid}.mf-editor__empty-text{font-family:var(--mf-font-mono);letter-spacing:.04em;color:var(--mf-faint);max-width:280px;font-size:12px;line-height:1.6}.mf-statusbar{align-items:center;gap:var(--mf-space-md);height:var(--mf-statusbar-h);padding:0 var(--mf-space-md);background:var(--mf-surface);border-top:1px solid var(--mf-outline);font-family:var(--mf-font-mono);letter-spacing:.04em;color:var(--mf-muted);font-size:11px;display:flex}.mf-statusbar__left,.mf-statusbar__right{align-items:center;gap:var(--mf-space-md);display:flex}.mf-statusbar__center{justify-content:center;gap:var(--mf-space-md);flex:1;display:flex}.mf-statusbar__item{align-items:center;gap:var(--mf-space-xs);display:inline-flex}