:root { --ink:#102a43; --muted:#52616b; --line:#d9e2ec; --paper:#f7fafc; --accent:#0b7285; --accent-dark:#075563; --danger:#b42318; --shadow:0 18px 45px rgba(16,42,67,.11); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; line-height:1.55; } .site-header, main, footer { width:min(1120px,calc(100% - 40px)); margin:auto; } .site-header { display:flex; justify-content:space-between; align-items:center; padding:22px 0; } .wordmark { color:var(--ink); font-size:1.25rem; font-weight:800; text-decoration:none; letter-spacing:-.04em; } .wordmark span { color:var(--accent); } .eyebrow,.kicker { color:var(--accent-dark); font-size:.78rem; text-transform:uppercase; letter-spacing:.11em; font-weight:800; } .hero { max-width:780px; padding:56px 0 40px; } h1 { margin:0 0 18px; font-size:clamp(2.2rem,6vw,4.5rem); letter-spacing:-.065em; line-height:1.02; } h2 { letter-spacing:-.035em; margin-top:0; } .lede { color:var(--muted); font-size:1.12rem; max-width:650px; } .product-cta { display:inline-block; border-radius:8px; background:var(--accent); color:#fff; font-weight:750; padding:12px 16px; text-decoration:none; } .product-cta:hover { background:var(--accent-dark); } .hero-cta { margin-top:22px; } .generator { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(350px,1.1fr); gap:24px; align-items:start; } .panel { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:28px; } label,legend { display:block; font-weight:700; font-size:.92rem; margin:0 0 7px; } fieldset { border:0; padding:0; margin:24px 0; } input,select { width:100%; border:1px solid #9fb3c8; border-radius:8px; color:var(--ink); font:inherit; padding:11px 12px; background:#fff; } input:focus,select:focus,button:focus,a:focus { outline:3px solid rgba(11,114,133,.26); outline-offset:2px; } .hint { margin:6px 0 0; color:var(--muted); font-size:.82rem; } .segmented { display:flex; flex-wrap:wrap; gap:8px; } .segmented label { border:1px solid #9fb3c8; border-radius:999px; padding:7px 10px; font-weight:600; margin:0; cursor:pointer; } .segmented input { width:auto; margin-right:5px; accent-color:var(--accent); } .mx-heading,.artifact-heading,.result-heading { display:flex; justify-content:space-between; gap:14px; align-items:center; } .mx-row { display:flex; gap:8px; margin:8px 0; } .mx-row input { min-width:0; } button { border:0; border-radius:8px; font:inherit; font-weight:750; cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.48; } .primary { width:100%; color:#fff; background:var(--accent); padding:12px; margin-top:24px; } .primary:hover { background:var(--accent-dark); } .secondary { padding:9px 11px; color:var(--accent-dark); background:#e0f2f1; white-space:nowrap; } .text-button,.remove-mx,.copy { padding:0; color:var(--accent-dark); background:transparent; font-size:.84rem; } .remove-mx { color:var(--danger); padding:0 5px; } .form-error { background:#fef3f2; color:var(--danger); border-left:4px solid var(--danger); padding:10px; border-radius:4px; } .output-panel { min-height:455px; } #empty-state { color:var(--muted); display:grid; place-content:center; height:390px; text-align:center; } .artifact { border-top:1px solid var(--line); margin-top:20px; padding-top:20px; } .artifact p { color:var(--muted); font-size:.86rem; } pre { margin:10px 0 0; padding:16px; overflow:auto; border-radius:9px; color:#e6fffa; background:#102a43; font: .83rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; } code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; } .checklist ol { padding-left:22px; } .content { max-width:760px; padding:76px 0; } .kit-callout { border:1px solid #a7e4db; background:var(--mint, #e6fffa); border-radius:16px; margin-bottom:48px; padding:28px; } .kit-callout h2 { font-size:clamp(1.55rem,4vw,2.2rem); margin-bottom:10px; } .kit-callout p:not(.kicker) { color:var(--muted); max-width:620px; } details { background:#fff; border:1px solid var(--line); border-radius:9px; margin:10px 0; padding:14px 16px; } summary { cursor:pointer; font-weight:700; } details p { color:var(--muted); margin:10px 0 0; } footer { border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; padding:26px 0 38px; } @media (max-width:780px) { .site-header,main,footer { width:min(100% - 28px,1120px); } .hero { padding-top:35px; } .generator { grid-template-columns:1fr; } .panel { padding:20px; } .result-heading { align-items:flex-start; flex-direction:column; } }