.c510-shell{width:min(1120px,calc(100% - 2rem));margin:auto;padding:2rem 0 4rem}.c510-shell h1{font-size:clamp(2rem,6vw,3.7rem);line-height:1.05}.c510-lead{font-size:1.12rem;max-width:820px}.c510-card,.c510-method{margin:1.5rem 0;padding:clamp(1rem,3vw,1.6rem);border:1px solid #cbd5e1;border-radius:16px;background:#fff;box-shadow:0 12px 30px #0f172a12}.c510-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1rem}.c510-card label,.c510-fieldset{display:grid;gap:.4rem;font-weight:700}.c510-fieldset{border:1px solid #cbd5e1;border-radius:10px;padding:1rem}.c510-card input,.c510-card select,.c510-card textarea,.c510-card button{font:inherit}.c510-card input,.c510-card select,.c510-card textarea{width:100%;box-sizing:border-box;padding:.7rem;border:1px solid #64748b;border-radius:8px;background:#fff}.c510-card textarea{min-height:8rem;resize:vertical}.c510-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}.c510-actions button{min-height:44px;padding:.65rem 1rem;border:1px solid #64748b;border-radius:8px;background:#fff;color:#0f172a;cursor:pointer}.c510-actions .primary{background:#155e75;color:#fff;border-color:#155e75}.c510-actions button:disabled{opacity:.55}.c510-card :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}.c510-error{color:#b91c1c;font-weight:700;min-height:1.5em}.c510-status{font-weight:700}.c510-result{margin-top:1rem;padding:1rem;border-radius:12px;background:#f1f5f9;overflow-wrap:anywhere}.privacy-note,.safety-note{border-left:4px solid #0f766e;padding-left:1rem;font-weight:700}.safety-note{border-color:#b45309}.code-output{display:block;padding:.9rem;background:#0f172a;color:#f8fafc;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.flex-preview{display:flex;min-height:270px;max-height:520px;overflow:auto;padding:1rem;border:2px dashed #64748b;background:#eef6f8}.flex-preview span{display:grid;place-items:center;min-width:68px;min-height:54px;padding:.5rem;background:#155e75;color:#fff;border-radius:8px}.og-preview{max-width:620px;border:1px solid #94a3b8;border-radius:12px;overflow:hidden;background:#fff}.og-placeholder{height:180px;display:grid;place-items:center;background:#dbeafe;color:#1e3a8a;font-weight:800}.og-copy{padding:1rem}.og-copy strong,.og-copy span{display:block}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}.metric{padding:.8rem;background:#fff;border:1px solid #cbd5e1;border-radius:8px}.metric strong{display:block;font-size:1.35rem}@media(max-width:640px){.c510-shell{width:min(100% - 1rem,1120px)}.c510-card,.c510-method{padding:1rem}.code-output{font-size:.84rem}.flex-preview{min-height:220px}}