@import "https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;1,300&family=IBM+Plex+Mono:wght@400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f6f3ee;--bg-card:#faf8f5;--bg-hover:#edeae3;--ink:#1c1916;--ink-2:#5a5650;--ink-3:#9a948e;--cyan:#287c7f;--orange:#92400e;--border:#d8d3c8;--border-hi:#b8b2a6;--font-mono:"IBM Plex Mono", monospace;--font-serif:"Crimson Pro", Georgia, serif}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}.app{flex-direction:column;min-height:100vh;display:flex}main{background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);background-size:24px 24px;flex:1}header{z-index:100;background:var(--bg);border-bottom:3px solid var(--border);position:sticky;top:0}header h1{justify-content:center;align-items:center;max-width:1000px;height:60px;margin:0 auto;padding:0 3rem;display:flex}.logo{font-family:var(--font-mono);color:var(--cyan);font-size:23px;font-weight:900}.logo span{color:var(--orange);font-size:22px}.hero{padding:5rem 2rem 4.5rem}.hero-inner{max-width:1000px;margin:0 auto}.hero-title{font-family:var(--font-serif);letter-spacing:-.02em;margin-bottom:1.5rem;font-size:clamp(2.8rem,6vw,4.2rem);font-weight:300;line-height:1.08}.hero-title em{color:var(--cyan);font-style:italic}.hero-sub{color:var(--ink-2);max-width:500px;margin-bottom:2.5rem;font-size:14px;line-height:1.8}.hero-sub code{color:var(--orange);background:#b4530912;border-radius:3px;padding:1px 5px}.hero-cta{border:1px solid var(--border);background:var(--bg-card);color:var(--ink-2);border-radius:3px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;transition:all .12s;display:inline-flex}.hero-cta:hover{border-color:var(--orange);color:var(--cyan)}.category-section{max-width:1000px;margin:0 auto;padding:3.5rem 2rem 5rem}.category-grid{background:var(--bg);border-radius:5px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;display:grid;overflow:hidden}.category-card{all:unset;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);border-radius:20px;flex-direction:column;gap:10px;margin:5px;padding:1.5rem;transition:background .1s;display:flex;position:relative}.category-card:hover{background:var(--bg-hover)}.category-card--soon{cursor:default;opacity:.5}.category-card--soon:hover{background:var(--bg-card)}.card-top{justify-content:space-between;align-items:center;display:flex}.card-logo{object-fit:contain;width:24px;height:24px}.card-lang{color:var(--orange);border:1px solid var(--orange);background:var(--bg);border-radius:3px;padding:2px 7px;font-size:11px}.card-name{color:var(--ink);font-size:15px;font-weight:600}.card-desc{color:var(--ink-3);flex:1;font-size:12px;line-height:1.6}.card-outputs{flex-wrap:wrap;gap:5px;display:flex}.output-pill{color:var(--cyan);background:#2c52820d;border:1px solid #2c528226;border-radius:3px;padding:2px 7px;font-size:11px}.footer{border-top:1px solid var(--border);background:var(--bg-card)}.footer-inner{align-items:center;gap:2rem;max-width:1000px;margin:0 auto;padding:1.5rem 2rem;display:flex}.footer-logo{color:var(--ink);font-size:12px;font-weight:500}.footer-note{color:var(--ink-3);flex:1;font-size:12px;font-style:italic}.footer-link{color:var(--ink-3);font-size:12px;transition:color .12s}.footer-link:hover{color:var(--cyan)}.generator-page{max-width:1000px;margin:0 auto;padding:2.5rem 2rem 5rem}.generator-header{margin-bottom:2.5rem}.back-link{color:var(--ink-3);font-size:12px;transition:color .1s}.back-link:hover{color:var(--cyan)}.generator-title-row{align-items:center;gap:12px;margin:1rem 0 .5rem;display:flex}.generator-logo{object-fit:contain;width:28px;height:28px}.generator-title{font-family:var(--font-serif);font-size:2rem;font-weight:600}.generator-subtitle{color:var(--ink-2);font-size:13px}.generator-subtitle code{color:var(--orange);background:#b4530912;border-radius:3px;padding:1px 5px}.generator-body{grid-template-columns:280px 1fr;align-items:start;gap:2rem;display:grid}.option-panel{flex-direction:column;gap:1.75rem;display:flex}.option-section{flex-direction:column;display:flex}.option-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px;font-size:11px}.chip-grid{flex-direction:column;gap:6px;display:flex}.select-field{flex-direction:column;gap:5px;display:flex}.field-label{color:var(--ink-2);font-size:12px}.field-select{font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--border);color:var(--ink);cursor:pointer;border-radius:3px;width:100%;padding:6px 10px;font-size:12px}.field-select:focus{border-color:var(--cyan);outline:none}.toggle-chip{all:unset;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);text-align:left;border-radius:12px;flex-direction:column;gap:3px;padding:8px 12px;transition:all .2s;display:flex}.toggle-chip:hover{background:var(--bg-hover);border-color:var(--border-hi)}.toggle-chip--on{border-color:var(--cyan);background:#2c52820d}.chip-label{color:var(--ink-2);font-size:12.5px}.toggle-chip--on .chip-label{color:var(--cyan);font-weight:600}.chip-hint{color:var(--ink-2);font-size:11px}.preview-column{flex-direction:column;gap:12px;display:flex}.preview-pane{border:1px solid var(--border);border-radius:5px;overflow:hidden}.preview-header{background:var(--bg-hover);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.preview-filename{color:var(--ink-2);font-size:12px}.preview-actions{align-items:center;gap:8px;display:flex}.format-toggle{border:1px solid var(--border);border-radius:3px;display:flex;overflow:hidden}.fmt-btn{font-family:var(--font-mono);background:var(--bg-card);color:var(--ink-3);cursor:pointer;border:none;padding:3px 10px;font-size:11px;transition:all .1s}.fmt-btn--active{background:var(--orange);color:#fff}.copy-btn{font-family:var(--font-mono);background:var(--bg-card);color:var(--ink-3);border:1px solid var(--border);cursor:pointer;border-radius:3px;padding:3px 10px;font-size:11px;transition:all .1s}.copy-btn:hover{color:var(--ink);border-color:var(--border-hi)}.preview-code{font-family:var(--font-mono);background:var(--ink);color:var(--bg-card);white-space:pre;min-height:200px;padding:1.25rem;font-size:12px;line-height:1.7;overflow-x:auto}.download-btn{font-family:var(--font-mono);background:var(--cyan);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:10px 20px;font-size:13px;transition:opacity .1s}.download-btn:hover{opacity:.88}@media (width<=720px){.generator-body{grid-template-columns:1fr}}