@keyframes toast-in{0%{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes toast-out{0%{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}.container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}header{text-align:center;margin-bottom:2.5rem}header h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}header h1 span{color:var(--accent)}header p.tagline{color:var(--muted);margin-top:.35rem;font-size:1.05rem}.features{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}.controls select,.pill{background:var(--surface);border:1px solid var(--border)}.pill{border-radius:9999px;padding:.3rem .85rem;font-size:.8rem;color:var(--muted);white-space:nowrap}.controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:.75rem}.controls label{font-size:.85rem;color:var(--muted)}.controls select{color:var(--text);border-radius:6px;padding:.4rem .6rem;font-size:.85rem;font-family:var(--font-sans);cursor:pointer}.controls select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.btn-group{margin-left:auto;display:flex;gap:.5rem}.btn-convert{background:var(--accent-btn, #1f6feb);color:#fff;border:0;border-radius:6px;padding:.55rem 1.4rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s}.btn-convert:hover{opacity:.88}.btn-convert:disabled{opacity:.45;cursor:not-allowed}.btn-clear{background:0 0;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:.55rem 1.1rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s}.btn-clear:hover{color:var(--text);border-color:var(--muted)}.editor-label{font-size:.8rem;color:var(--muted);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}.editor-label .badge,textarea{font-size:.7rem;padding:.1rem .45rem;border-radius:4px;background:var(--surface);border:1px solid var(--border)}textarea{width:100%;color:var(--text);border-radius:8px;padding:.85rem 1rem;font-family:var(--font-mono);font-size:.85rem;line-height:1.55;resize:vertical;tab-size:4}#diagram{min-height:220px}#output{min-height:200px}.section,.seo-content ul{margin-bottom:1rem}#outputSection{display:none}#outputSection.visible{display:block}.input-row{display:flex;gap:1rem;align-items:stretch}.input-col,.preview-col{flex:1;min-width:0}.preview-col{display:none}.preview-col.visible{display:flex;flex-direction:column}.preview-label{font-size:.8rem;color:var(--muted);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}#mermaidPreview,.preview-label .badge{background:var(--surface);border:1px solid var(--border)}.preview-label .badge{font-size:.7rem;padding:.1rem .45rem;border-radius:4px}#mermaidPreview{flex:1;border-radius:8px;padding:.85rem 1rem;overflow:auto;min-height:220px;display:flex;align-items:center;justify-content:center}#mermaidPreview svg{max-width:100%;height:auto}#mermaidPreview .mermaid-error{color:var(--muted);font-size:.8rem;text-align:center;font-style:italic}#mermaidPreview .mermaid-placeholder{color:var(--muted);font-size:.85rem;font-style:italic}.meta,.status{margin-top:.35rem}.status{font-size:.8rem;min-height:1.2em}.status.error{color:var(--red)}.status.ok{color:var(--green)}.meta span,.status.loading{color:var(--muted)}.meta{display:flex;gap:1rem;flex-wrap:wrap}.meta span{font-size:.75rem}.meta span b{color:var(--text);font-weight:500}@media (max-width:700px){.container{padding:1.25rem 1rem}header h1{font-size:1.5rem}.controls{flex-direction:column;align-items:stretch}.btn-group{margin-left:0}.input-row{flex-direction:column}}.rate-banner{padding:.6rem 1rem;border-radius:8px;font-size:.85rem;line-height:1.5;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.rate-banner[hidden]{display:none}.rate-banner.warn{background:color-mix(in srgb,var(--yellow) 15%,transparent);border:1px solid var(--yellow);color:var(--yellow)}.rate-banner.error{background:color-mix(in srgb,var(--red) 15%,transparent);border:1px solid var(--red);color:var(--red)}.rate-banner::before{font-size:1.1rem}.rate-banner.warn::before{content:"⚠️"}.rate-banner.error::before{content:"🚫"}.seo-content{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}.seo-content h2{font-size:1.3rem;font-weight:700;margin-bottom:.75rem}.seo-content h3{font-size:1.05rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem}.seo-content li,.seo-content p{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:1rem}.seo-content ul{padding-left:1.5rem}.seo-content li{font-size:.88rem;margin-bottom:.4rem;line-height:1.6}.seo-content h2,.seo-content h3,.seo-content li strong{color:var(--text)}.seo-content li a,.seo-content p a{color:var(--text);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;text-decoration-color:var(--accent);font-weight:600}.toast-container{position:fixed;top:64px;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:420px;width:100%}.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.65rem;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;line-height:1.5;box-shadow:0 4px 24px rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:toast-in .3s ease-out forwards;transform:translateX(110%);opacity:0}.toast.removing{animation:toast-out .25s ease-in forwards}.toast-icon{font-size:1.15rem;line-height:1;flex-shrink:0;margin-top:.1rem}.toast-body{flex:1;min-width:0}.toast-title{font-weight:600;font-size:.85rem;margin-bottom:.15rem}.toast-msg{font-size:.8rem;opacity:.88;word-break:break-word}.toast-close{background:0 0;border:0;color:inherit;font-size:1.1rem;cursor:pointer;opacity:.5;padding:0 0 0 .25rem;line-height:1;flex-shrink:0}.toast-close:hover{opacity:1}.toast.error{background:color-mix(in srgb,var(--red) 14%,var(--surface));border:1px solid var(--red);color:var(--red)}.toast.warn{background:color-mix(in srgb,var(--yellow) 14%,var(--surface));border:1px solid var(--yellow);color:var(--yellow)}.toast.info{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid var(--accent);color:var(--accent)}@media (max-width:700px){.toast-container{right:.75rem;left:.75rem;max-width:none;width:auto}}