*{box-sizing:border-box;margin:0}body{background:#0c0e12;margin:0}a{text-decoration:none}.root{min-height:100vh;background:#eaeef8;color:#0d1128;font-family:DM Sans,-apple-system,sans-serif;display:flex;flex-direction:column}.header{background:#0c0e12;border-bottom:1px solid #1C2030}.header-inner{max-width:1140px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between}.header-cta{font-size:13px;font-weight:600;color:#fff;background:#4a6ff5;border:none;border-radius:7px;padding:6px 14px;text-decoration:none;font-family:DM Sans,-apple-system,sans-serif;transition:background .15s;letter-spacing:.01em}.header-cta:hover{background:#3a58c4}.logo-wrap{display:flex;align-items:center;gap:12px}.logo-text{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#e8ecf4}.tool-section{padding:48px 24px 56px}.tool-wrap{max-width:1200px;margin:0 auto;width:100%;padding:0 24px}.tool-island-wrap{min-height:560px}@media(max-width:768px){.tool-island-wrap{min-height:380px}}.tool-wrap h1{font-size:38px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#0d1128;margin:0 0 28px}.dbml-tool-layout{display:grid;grid-template-columns:1fr max-content 610px;gap:0}.dbml-tool-left{min-width:0;display:flex;flex-direction:column}.dbml-tool-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 12px;align-self:center}.dbml-tool-right{min-width:0;display:flex;flex-direction:column;gap:0}.dbml-tool-gen-btn{background:#4a6ff5;color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:DM Sans,-apple-system,sans-serif;white-space:nowrap;transition:background .15s;min-width:162px}.dbml-tool-gen-btn:hover{background:#3a58c4}.dbml-tool-arrow{flex-shrink:0}.dbml-tool-preview-wrap{border:1px solid #252A38;border-bottom:none;border-radius:10px 10px 0 0;overflow:hidden}.dbml-tool-preview{height:500px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.dbml-tool-preview-img{max-width:100%;max-height:100%;object-fit:contain;display:block}.dbml-tool-placeholder{color:#909090;font-size:15px;font-family:DM Sans,-apple-system,sans-serif}.dbml-tool-error{color:#c53030;font-size:14px;padding:24px;text-align:center;font-family:DM Sans,-apple-system,sans-serif;line-height:1.6}.dbml-tool-dl-bar{border:1px solid #252A38;border-top:1px solid #2A2A2A;border-radius:0 0 10px 10px;background:#1a1a1a;padding:10px 12px;display:flex;justify-content:flex-end;align-items:center;gap:8px}.dbml-tool-open-btn{background:#2a2e3a;color:#6e7486;border:none;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:600;cursor:not-allowed;font-family:DM Sans,-apple-system,sans-serif;white-space:nowrap;transition:background .15s,color .15s}.dbml-tool-open-btn:hover{background:#313543}.dbml-tool-open-btn.is-ready{background:#3fb950;color:#fff;font-weight:700;cursor:pointer}.dbml-tool-open-btn.is-ready:hover{background:#4bc95c}.dbml-tool-toast{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#141414;color:#909090;font-size:13px;font-weight:500;font-family:DM Sans,-apple-system,sans-serif;padding:8px 16px;border-radius:8px;border:1px solid #2A2A2A;pointer-events:none;white-space:nowrap;z-index:10;animation:dbmlFadeIn .15s ease-out}@keyframes dbmlFadeIn{0%{opacity:0}to{opacity:1}}.dbml-tool-dl-btn{background:#4a6ff5;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;font-family:DM Sans,-apple-system,sans-serif;padding:7px 16px;white-space:nowrap;transition:background .15s}.dbml-tool-dl-btn:hover{background:#3a58c4}@media(max-width:768px){.dbml-tool-layout{grid-template-columns:1fr}.dbml-tool-left{width:100%;height:220px;overflow:hidden}.dbml-tool-center{flex-direction:row;width:100%;padding:16px 0;align-self:stretch}.dbml-tool-arrow{transform:rotate(90deg)}.dbml-tool-right{width:100%}.dbml-tool-gen-btn{width:auto;padding:9px 24px}.dbml-tool-preview{height:320px}}.article-wrap{max-width:760px;margin:0 auto;padding:0 24px 72px;width:100%}.prose h2{font-size:22px;font-weight:600;letter-spacing:-.01em;color:#0d1128;margin:48px 0 16px}.prose p{font-size:16px;line-height:1.75;color:#4a5278;margin:0 0 18px}.prose ol,.prose ul{padding-left:24px;margin:0 0 18px}.prose li{font-size:16px;line-height:1.75;color:#4a5278;margin-bottom:8px}.prose strong{color:#0d1128;font-weight:600}.prose a{color:#4a6ff5;text-decoration:underline;text-underline-offset:3px}.prose a:hover{color:#3a58c4}.prose pre{background:#181b22;border:1px solid #252A38;border-radius:8px;padding:14px 16px;margin:0 0 18px;overflow-x:auto;line-height:1.7;scrollbar-width:thin;scrollbar-color:#3A3F52 transparent}.prose pre::-webkit-scrollbar{height:6px}.prose pre::-webkit-scrollbar-track{background:transparent}.prose pre::-webkit-scrollbar-thumb{background:#3a3f52;border-radius:3px}.prose pre code{font-family:Fira Code,Cascadia Code,JetBrains Mono,Courier New,monospace;font-size:13px;color:#c8cdd8;background:none;padding:0;white-space:pre}.prose code{font-family:Fira Code,Cascadia Code,JetBrains Mono,Courier New,monospace;font-size:13px;color:#c8cdd8;background:#1c2030;padding:2px 6px;border-radius:4px;white-space:nowrap}@media(max-width:640px){.tool-wrap h1{font-size:28px}.tool-section{padding:32px 20px 40px}.article-wrap{padding:0 20px 64px}}