:root{color-scheme:light;--background:#f7f7f4;--foreground:#171717;--muted:#6b6f76;--panel:#ffffff;--line:#d9ddd8;--accent:#126b68;--accent-strong:#0b4f4c;--danger:#ad2f2f;--code:#101418}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--foreground);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}code,pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.workspace{min-height:100vh;padding:24px}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto 20px}.eyebrow{margin:0 0 4px;color:var(--accent);font-size:.84rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin:0}h1{font-size:clamp(2rem,4vw,4.2rem);line-height:.95;letter-spacing:0}h2{font-size:1rem}h3{margin:0;font-size:.94rem}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.ghostButton,.primaryButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid transparent;font-weight:700}.primaryButton{background:var(--accent);color:white}.primaryButton:hover{background:var(--accent-strong)}.primaryButton:disabled{cursor:not-allowed;opacity:.55}.ghostButton{background:var(--panel);border-color:var(--line);color:var(--foreground)}.inputBand{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);grid-gap:14px;gap:14px;max-width:1440px;margin:0 auto 14px}.dropzone{display:flex;min-height:220px;align-items:center;justify-content:center;flex-direction:column;gap:12px;border:1px dashed #9da6a2;border-radius:8px;background:#eef3ef;color:#33413d;font-weight:700;text-align:center}.dropzone input{display:none}textarea{width:100%;min-height:220px;resize:vertical;border:1px solid var(--line);padding:14px;background:var(--panel);color:var(--foreground)}.errorBar,.warningBar,textarea{border-radius:8px;line-height:1.45}.errorBar,.warningBar{display:flex;align-items:flex-start;gap:10px;max-width:1440px;margin:0 auto 14px;padding:12px 14px}.errorBar{background:#ffeceb;color:var(--danger);border:1px solid #efb7b3}.warningBar{background:#fff6df;color:#6f4d00;border:1px solid #ead28e}.outputGrid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(240px,.8fr) minmax(360px,1.4fr);grid-gap:14px;gap:14px;max-width:1440px;margin:0 auto;align-items:stretch}.codePanel,.panel{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}.panelHeader{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}.panelHeader span{color:var(--muted);font-size:.86rem;white-space:nowrap}.preview{display:grid;place-items:center;min-height:360px;padding:18px;background-image:linear-gradient(45deg,#edf0ed 25%,transparent 0),linear-gradient(-45deg,#edf0ed 25%,transparent 0),linear-gradient(45deg,transparent 75%,#edf0ed 0),linear-gradient(-45deg,transparent 75%,#edf0ed 0);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview svg{display:block;width:100%;max-width:320px;max-height:320px}.codePanel{display:flex;flex-direction:column}pre{flex:1 1;min-height:360px;margin:0;padding:16px;overflow:auto;background:var(--code);color:#ecf2f0;font-size:.84rem;line-height:1.55}.seoSection{max-width:1440px;margin:28px auto 0;padding:24px 0 8px;border-top:1px solid var(--line);color:#2f3437}.seoSection>div:first-child{max-width:760px}.seoSection h2{margin-bottom:8px;font-size:1.25rem}.seoSection p{color:var(--muted);line-height:1.65}.seoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:18px;gap:18px;margin-top:20px}.seoGrid article{display:grid;grid-gap:8px;gap:8px}@media (max-width:1080px){.outputGrid{grid-template-columns:1fr 1fr}.codePanel{grid-column:1/-1}}@media (max-width:760px){.workspace{padding:16px}.inputBand,.outputGrid,.topbar{grid-template-columns:1fr}.topbar{display:grid;align-items:start}.actions{justify-content:stretch}.actions button{flex:1 1}.dropzone,.preview,pre,textarea{min-height:260px}.seoGrid{grid-template-columns:1fr}}