@font-face{font-family:IBM Plex Sans;src:url(/fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg: #FAFBFC;--surface: #FFFFFF;--surface-alt: #F4F6F8;--border: #E2E6ED;--border-focus: #0055B3;--accent: #0055B3;--accent-light: #E8F0FE;--accent-soft: #4A90D9;--text: #1A1D23;--text-secondary: #4A5568;--text-muted: #5B6675;--success: #0A7B4F;--success-bg: #E6F5EE;--warning: #B45309;--warning-bg: #FEF3E2;--danger: #C53030;--danger-bg: #FEE2E2;--purple: #6B46C1;--purple-bg: #F3EEFF;--white: #FFFFFF;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.06);--font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;--serif: "Source Serif 4", "Georgia", serif;--mono: "JetBrains Mono", "Fira Code", monospace}.app-root{min-height:100vh;background:var(--bg);font-family:var(--font);color:var(--text)}.ad-consent{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1000;max-width:440px;width:calc(100% - 32px);background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px 24px;box-shadow:0 8px 30px #0000001f;font-family:var(--font)}.ad-consent p{margin:0;font-size:15px;color:var(--text);line-height:1.55;font-weight:500}.ad-consent-actions{display:flex;gap:10px;margin-top:14px}.ad-consent-btn{flex:1;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font)}.ad-consent-btn--yes{background:var(--accent);color:var(--white);border:none}.ad-consent-btn--no{background:var(--surface-alt);color:var(--text-secondary);border:1px solid var(--border)}.kofi-bubble{position:fixed;bottom:24px;right:24px;z-index:999;max-width:300px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-md);font-family:var(--font)}.kofi-bubble-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;line-height:1}.kofi-bubble p{margin:0;font-size:13px;color:var(--text-secondary);line-height:1.5}.kofi-bubble-link{display:inline-block;margin-top:10px;padding:8px 16px;background:#ff5e5b;color:var(--white);border-radius:8px;font-size:13px;font-weight:600;text-decoration:none}.ad-placeholder{background:var(--surface-alt);border:1px dashed var(--border);border-radius:8px;padding:12px 16px;text-align:center;color:var(--text-muted);font-size:12px;font-family:var(--mono);margin:16px 0}.ad-placeholder--wide{width:calc(100% - 48px);max-width:1100px;margin:16px auto 0;box-sizing:border-box}.adsense-slot{margin:16px 0;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-sizing:border-box;overflow:hidden}.adsense-slot--wide{width:calc(100% - 48px);max-width:1100px;margin:16px auto 0}.adsense-slot--inline{min-height:140px}.adsense-slot__ins{min-height:120px}.adsense-slot--wide .adsense-slot__ins{min-height:90px}.field-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}.field-input{width:100%;padding:10px 14px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:var(--font);outline:none;box-sizing:border-box;transition:border-color .2s}.field-input:focus{border-color:var(--border-focus)}.field-input--textarea{resize:vertical;min-height:56px}.field-group{margin-bottom:12px}.field-hint{margin:0 0 4px;font-size:11.5px;color:var(--text-muted);line-height:1.4}.row{display:flex;gap:12px;flex-wrap:wrap}.step-indicator{display:flex;gap:4px;margin-bottom:20px}.step-btn{flex:1;padding:8px 4px;border-radius:6px;cursor:pointer;transition:all .2s}.step-btn--current{background:var(--accent-light);border:1.5px solid var(--accent)}.step-btn--done{background:var(--success-bg);border:1.5px solid var(--success)}.step-btn--future{background:var(--surface-alt);border:1.5px solid transparent}.step-btn__number{font-size:10px;font-weight:700;font-family:var(--mono)}.step-btn__number--current{color:var(--accent)}.step-btn__number--done{color:var(--success)}.step-btn__number--future{color:var(--text-muted)}.step-btn__label{font-size:11px;font-weight:600;margin-top:2px}.step-btn__label--current{color:var(--accent)}.step-btn__label--other{color:var(--text-muted)}.lang-select{padding:6px 10px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;font-family:var(--font);outline:none}.export-bar{display:flex;gap:8px;margin-top:12px}.export-btn{padding:8px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;font-family:var(--font)}.header{background:var(--white);border-bottom:1px solid var(--border);padding:14px 24px}.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.header-title{margin:0;font-size:20px;font-weight:700;font-family:var(--serif);letter-spacing:-.3px}.header-subtitle{margin:4px 0 0;font-size:12px;color:var(--text-muted)}.header-actions{display:flex;gap:10px;align-items:center}.kofi-header-link{padding:7px 14px;background:#c53030;color:var(--white);border-radius:8px;font-size:12px;font-weight:600;text-decoration:none}.main-content{max-width:1100px;margin:0 auto;padding:24px 24px 80px}.tool-suite{margin-bottom:28px;padding:24px;background:radial-gradient(circle at top left,rgba(0,85,179,.08),transparent 32%),linear-gradient(180deg,var(--white),#F7FAFD);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.tool-suite__copy{max-width:760px;margin-bottom:18px}.tool-suite__kicker{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.tool-suite__title{margin:0;font-size:28px;line-height:1.1;color:var(--text);font-family:var(--serif)}.tool-suite__intro{margin:10px 0 0;max-width:680px;font-size:14px;line-height:1.7;color:var(--text-secondary)}.tool-suite__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tool-suite__card{background:#ffffffeb;border:1px solid var(--border);border-radius:14px;padding:16px;min-width:0}.tool-suite__card--live{border-color:#0055b359;box-shadow:inset 0 0 0 1px #0055b314}.tool-suite__card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.tool-suite__index{font-size:11px;font-family:var(--mono);color:var(--text-muted)}.tool-suite__status{padding:5px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.tool-suite__status--live{background:var(--accent-light);color:var(--accent)}.tool-suite__status--soon{background:var(--surface-alt);color:var(--text-secondary)}.tool-suite__card-title{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--text)}.tool-suite__card-desc{margin:0;font-size:13px;line-height:1.65;color:var(--text-secondary)}.section-title{font-size:15px;font-weight:700;color:var(--text-secondary);margin-bottom:12px;font-family:var(--serif)}.diagram-selector{margin-bottom:28px}.diagram-grid{display:flex;gap:8px;flex-wrap:wrap}.diagram-card{padding:10px 16px;border-radius:10px;cursor:pointer;text-align:left;transition:all .15s;min-width:140px}.diagram-card--active{background:var(--accent-light);border:1.5px solid var(--accent)}.diagram-card--inactive{background:var(--white);border:1.5px solid var(--border)}.diagram-card__label{font-size:14px;font-weight:700}.diagram-card__label--active{color:var(--accent)}.diagram-card__label--inactive{color:var(--text)}.diagram-card__desc{font-size:11.5px;color:var(--text-muted);margin-top:2px}.guide-panel{display:flex;flex-direction:column;margin-bottom:28px;padding:24px;background:transparent;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;width:100%;box-sizing:border-box}.guide-panel__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.guide-panel__title{margin-bottom:6px}.guide-panel__subtitle{margin:0;max-width:760px;font-size:13px;color:var(--text-secondary);line-height:1.55}.guide-panel__badge{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:var(--accent-light);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}.guide-panel__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.guide-panel__toggle{padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--white);color:var(--text-secondary);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font)}.guide-panel__toggle:hover{border-color:var(--accent);color:var(--accent)}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;min-width:0}.guide-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;min-height:100%;min-width:0;box-sizing:border-box;overflow:hidden}.guide-card__title{margin:0 0 10px;font-size:14px;font-weight:700;font-family:var(--serif);color:var(--text)}.guide-card__lead{margin:0;font-size:13px;line-height:1.65;color:var(--text-secondary)}.guide-card__tip{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--text-muted)}.guide-example{margin:0;padding:12px 14px;border-radius:10px;background:var(--surface-alt);border:1px solid var(--border);color:var(--text);font-size:12px;line-height:1.6;white-space:pre-wrap;font-family:var(--mono)}.guide-card--visual{display:flex;flex-direction:column}.guide-visual-frame{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;padding:12px;flex:1;display:flex;align-items:center;justify-content:center}.guide-visual-frame__inner{width:100%}.guide-visual-frame__inner svg{width:100%;height:auto;display:block}.guide-visual-svg{width:100%;height:auto;display:block;max-width:100%}.editor-layout{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.form-section{flex:1 1 360px;min-width:320px;max-width:480px}.form-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow)}.diagram-language-control{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.diagram-language-select{width:100%;margin-top:4px}.form-actions{display:flex;gap:10px;margin-top:16px;justify-content:space-between}.form-actions__nav{display:flex;gap:8px}.btn-prev{padding:9px 18px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-secondary)}.btn-next{padding:9px 18px;background:var(--accent-light);border:1.5px solid var(--accent);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--accent)}.btn-generate{padding:9px 22px;background:var(--accent);color:var(--white);border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font)}.preview-section{flex:2 1 560px;min-width:500px}.preview-language-note{margin:0 0 10px;font-size:12px;color:var(--text-muted)}.preview-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:24px;min-height:500px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.preview-card svg{width:100%;height:auto}.zoom-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:8px}.zoom-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--border);border-radius:8px;font-size:16px;font-weight:600;color:var(--text-secondary);cursor:pointer;font-family:var(--font);transition:border-color .15s,background .15s}.zoom-btn:hover{border-color:var(--accent);color:var(--accent)}.zoom-btn--reset{font-size:14px;margin-left:2px}.zoom-level{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--text-muted);min-width:42px;text-align:center}.preview-placeholder{text-align:center;color:var(--text-muted);font-size:14px;padding:40px;line-height:1.7}.preview-placeholder__icon{font-size:40px;margin-bottom:8px;opacity:.25}.footer{background:var(--white);border-top:1px solid var(--border);padding:24px;text-align:center}.footer-desc{font-size:12px;color:var(--text-muted);max-width:600px;margin:0 auto;line-height:1.6}.footer-links{margin-top:10px;display:flex;justify-content:center;gap:16px;font-size:12px}.footer-links a{color:var(--accent);text-decoration:none}@media (max-width: 920px){.tool-suite__grid,.guide-grid{grid-template-columns:1fr}.guide-panel__header{flex-direction:column}.guide-panel__badge{align-self:flex-start}}@media (max-width: 640px){.tool-suite{padding:18px}.tool-suite__title{font-size:23px}.header-inner{gap:12px;align-items:flex-start;flex-direction:column}}.feedback-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1001;background:#00000059;display:flex;align-items:center;justify-content:center;padding:24px}.feedback-modal{background:var(--white);border-radius:14px;padding:28px 32px;max-width:480px;width:100%;box-shadow:0 12px 40px #00000026;font-family:var(--font)}.feedback-modal__title{margin:0 0 6px;font-size:18px;font-weight:700;font-family:var(--serif);color:var(--text)}.feedback-modal__desc{margin:0 0 18px;font-size:13px;color:var(--text-secondary);line-height:1.5}.feedback-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.feedback-thanks{text-align:center;font-size:18px;font-weight:600;color:var(--success);padding:32px 0;margin:0}.feedback-footer-btn{background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);padding:0}.feedback-footer-btn:hover{text-decoration:underline}