*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:#09090b;color:#f4f4f5;height:100vh;overflow:hidden}#root{height:100vh}.app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;gap:20px;padding:12px 20px;background:#18181b;border-bottom:1px solid #27272a}.header-home{text-decoration:none}.header h1{font-family:Bricolage Grotesque,system-ui,sans-serif;font-size:18px;font-weight:600;color:#f4f4f5}.subtitle{font-size:13px;color:#a1a1aa}.format-badge{display:flex;gap:3px;background:#27272a;border-radius:6px;padding:3px;margin-left:8px}.format-option{padding:5px 14px;border:none;border-radius:4px;background:transparent;color:#71717a;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.format-option:hover{color:#d4d4d8;background:#ffffff0d}.format-option.active{background:#e94560;color:#fff}.format-option.detected{background:#e9456026;color:#e94560}.format-option.active.detected{background:#e94560;color:#fff}.examples-dropdown{position:relative;margin-left:auto}.examples-trigger{display:flex;align-items:center;gap:5px;padding:4px 12px;border:1px solid #27272a;border-radius:4px;background:transparent;color:#a1a1aa;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.examples-trigger:hover,.examples-trigger.open{background:#27272a;color:#f4f4f5}.examples-trigger svg{transition:transform .15s}.examples-trigger.open svg{transform:rotate(180deg)}.examples-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:#18181b;border:1px solid #27272a;border-radius:6px;box-shadow:0 8px 24px #0006;z-index:50;padding:4px 0;animation:dropdown-in .12s ease-out}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.examples-group{padding:2px 0}.examples-group+.examples-group{border-top:1px solid #27272a}.examples-group-label{padding:6px 12px 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#52525b}.examples-item{display:block;width:100%;padding:6px 12px;border:none;background:transparent;color:#d4d4d8;font-size:12px;text-align:left;cursor:pointer;transition:all .1s}.examples-item:hover{background:#27272a;color:#f4f4f5}.examples-item.active{color:#e94560}.github-link{margin-left:8px}.panels{display:flex;flex:1;min-height:0}.editor-panel{flex:0 0 40%;display:flex;flex-direction:column;border-right:1px solid #27272a}.cm-wrapper{flex:1;min-height:0;overflow:hidden}.cm-wrapper .cm-editor{height:100%}.token-bar{display:flex;align-items:center;gap:6px;padding:0 16px;height:30px;flex-shrink:0;background:#18181b;border-top:1px solid #27272a;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12px;color:#a1a1aa}.token-bar .token-count{color:#e94560;font-weight:600}.preview-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.preview-tabs{display:flex;gap:0;background:#18181b;border-bottom:1px solid #27272a;flex-shrink:0}.preview-tab{padding:8px 20px;border:none;border-bottom:2px solid transparent;background:transparent;color:#a1a1aa;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.preview-tab:hover{color:#f4f4f5;background:#ffffff08}.preview-tab.active{color:#e94560;border-bottom-color:#e94560}.preview-content{flex:1;overflow:hidden;background:#fff;position:relative}.mermaid-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mermaid-svg svg{max-width:none;width:auto;height:auto}.mermaid-loading{color:#999;font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mermaid-error{color:#f87171;font-size:13px;font-family:monospace;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.dot-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.dot-svg svg{max-width:none;width:auto;height:auto}.dot-loading{color:#999;font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.dot-error{color:#f87171;font-size:13px;font-family:monospace;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.compare-layout{display:flex;height:100%}.compare-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.compare-divider{width:1px;background:#27272a;flex-shrink:0}.compare-label{padding:4px 12px;background:#18181b;color:#a1a1aa;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #27272a;flex-shrink:0}.viewport{width:100%;height:100%;overflow:hidden;cursor:grab;position:relative}.viewport:active{cursor:grabbing}.viewport-canvas{transform-origin:0 0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;touch-action:none}.viewport-canvas svg{max-width:none;width:100%;height:100%}.viewport-controls{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:2px;z-index:10}.viewport-controls button{width:28px;height:28px;border:none;border-radius:4px;background:transparent;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;padding:0}.viewport-controls button:hover{color:#333;background:#0000000f}.viewport-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fade-in .15s ease-out}.viewport-modal{position:relative;width:90vw;height:85vh;background:#fff;border-radius:12px;overflow:hidden;cursor:grab;box-shadow:0 24px 80px #00000040;animation:modal-in .2s ease-out}.viewport-modal:active{cursor:grabbing}.viewport-modal .viewport-canvas{width:100%;height:100%}.viewport-modal .viewport-controls button:hover{color:#333;background:#00000014}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.placeholder{color:#999;font-size:14px;margin:auto}.github-link{color:#52525b;display:flex;align-items:center;transition:color .15s}.github-link:hover{color:#f4f4f5}.export-toolbar{position:absolute;bottom:10px;right:10px;display:flex;gap:4px;padding:4px;background:#18181bd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(39,39,42,.6);border-radius:8px;z-index:10;flex-shrink:0}.export-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#ffffff0f;color:#d4d4d8;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.export-btn:hover{background:#ffffff24;color:#fff;border-color:#fff3}@media(max-width:768px){.header{flex-wrap:wrap;gap:8px;padding:8px 12px}.header h1{font-size:16px}.subtitle{display:none}.examples-dropdown{margin-left:auto}.panels{flex-direction:column}.editor-panel{flex:0 0 45%;border-right:none;border-bottom:1px solid #27272a}.preview-panel{flex:1;min-height:0}.format-badge{margin-left:auto}.export-toolbar{bottom:6px;right:6px;gap:3px;padding:3px}.export-btn{padding:5px 8px;font-size:11px}}