:root { color-scheme: light; --ink:#14231d; --muted:#5c6963; --paper:#fff; --soft:#edf3ef; --line:#ccd9d1; --green:#246b4b; --green-dark:#184a34; --coral:#bb5945; --blue:#315f8a; --code:#102019; --focus:#efb83f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.skip-link { background:var(--ink); color:white; left:1rem; padding:.7rem 1rem; position:fixed; top:-5rem; z-index:100; }
.skip-link:focus { top:1rem; }
.site-header { align-items:center; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); display:flex; gap:1rem; height:64px; justify-content:space-between; padding:0 max(1.25rem,calc((100% - 1180px)/2)); position:sticky; top:0; z-index:20; }
.brand { align-items:center; display:flex; font-weight:800; gap:.65rem; text-decoration:none; }
.brand-mark { align-items:center; background:var(--green); border-radius:6px; color:white; display:inline-flex; height:32px; justify-content:center; width:32px; }
.site-header nav,footer nav { display:flex; flex-wrap:wrap; gap:1rem; }
.site-header nav a,footer a { font-size:.9rem; font-weight:700; text-decoration:none; }
.site-header nav a:hover,footer a:hover,.inline-link:hover { color:var(--green); }
.product-intro { background-color:#16251f; background-image:url("./assets/combine-source-map-flow.png"); background-position:center; background-size:cover; color:white; min-height:360px; position:relative; }
.product-intro::before { background:rgba(15,31,24,.74); content:""; inset:0; position:absolute; }
.intro-content { margin:0 auto; max-width:1180px; padding:4rem 1.25rem; position:relative; }
.intro-content h1 { font-size:3.4rem; line-height:1.05; margin:0 0 1rem; max-width:920px; overflow-wrap:anywhere; }
.intro-content>p:not(.eyebrow) { font-size:1.15rem; line-height:1.65; max-width:760px; }
.eyebrow { color:#71d3a5; font-size:.78rem; font-weight:800; letter-spacing:0; margin:0 0 .65rem; text-transform:uppercase; }
.install-row { align-items:center; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.35rem; }
.install-row code { background:rgba(5,17,12,.82); border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:.8rem 1rem; }
.release-line { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.release-line span { border-left:3px solid #e27961; font-size:.88rem; padding-left:.55rem; }
.section-inner { margin:0 auto; max-width:1080px; padding:3.2rem 1.25rem; }
.section-inner.wide { max-width:1280px; }
.tool-band { background:var(--soft); border-bottom:1px solid var(--line); }
.section-heading { align-items:end; display:flex; gap:1rem; justify-content:space-between; margin-bottom:1.25rem; }
h2 { font-size:2rem; letter-spacing:0; margin:0; }
h3 { font-size:.95rem; letter-spacing:0; margin:0; }
.control-bar { align-items:end; background:var(--paper); border:1px solid var(--line); border-radius:8px; display:grid; gap:.75rem; grid-template-columns:1fr 1fr 1fr 1fr 130px auto; margin-bottom:.9rem; padding:.9rem; }
label { display:grid; gap:.35rem; min-width:0; }
label span { color:var(--muted); font-size:.76rem; font-weight:800; }
input,textarea { background:white; border:1px solid #aebeb4; border-radius:6px; color:var(--ink); min-width:0; padding:.68rem .75rem; }
input:focus,textarea:focus,button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.primary-button,.compact-button,.icon-button,.text-button,.segmented-control button { border:1px solid transparent; border-radius:6px; cursor:pointer; font-weight:800; }
.primary-button { background:var(--green); color:white; min-height:42px; padding:.65rem 1rem; }
.primary-button:hover { background:var(--green-dark); }
.compact-button { background:white; color:var(--ink); min-height:38px; padding:.55rem .8rem; }
.icon-button { background:white; border-color:var(--line); font-size:1.25rem; height:42px; width:42px; }
.text-button { background:transparent; color:var(--blue); padding:.25rem .4rem; }
.sources-grid { display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:.9rem; }
.editor-panel,.output-panel { background:var(--paper); border:1px solid var(--line); border-radius:8px; min-width:0; overflow:hidden; }
.editor-panel header,.output-panel header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:48px; justify-content:space-between; padding:0 .9rem; }
.editor-panel header span { color:var(--muted); font-size:.75rem; font-weight:700; }
.editor-panel textarea { border:0; border-radius:0; display:block; font-family:"SFMono-Regular",Consolas,monospace; height:210px; line-height:1.55; resize:vertical; width:100%; }
.output-panel { display:grid; grid-template-rows:48px 44px minmax(0,1fr); }
.segmented-control { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:.3rem; padding:.35rem .75rem; }
.segmented-control button { background:transparent; color:var(--muted); padding:.4rem .65rem; }
.segmented-control button[aria-pressed="true"] { background:var(--ink); color:white; }
pre { background:var(--code); color:#edf5f0; margin:0; overflow:auto; padding:1rem; white-space:pre-wrap; word-break:break-word; }
#result-output { height:310px; }
code,pre,textarea { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.86rem; }
.status-bar { align-items:center; color:var(--muted); display:flex; flex-wrap:wrap; font-size:.82rem; gap:.55rem; min-height:42px; padding:.65rem .2rem 0; }
.status-indicator { background:var(--green); border-radius:50%; height:9px; width:9px; }
.status-indicator.error { background:var(--coral); }
.status-separator { background:var(--line); height:16px; width:1px; }
.content-band { border-bottom:1px solid var(--line); }
.content-band.muted { background:#f7f9f8; }
.content-grid { align-items:start; display:grid; gap:2.5rem; grid-template-columns:.8fr 1.2fr; }
.content-band p,.resource-band p,footer span { color:var(--muted); line-height:1.65; }
.code-surface { display:grid; gap:.75rem; }
.code-surface pre { border-radius:8px; }
.api-table-wrapper { border:1px solid var(--line); border-radius:8px; overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th,td { border-bottom:1px solid var(--line); padding:.85rem; text-align:left; vertical-align:top; }
th { background:var(--soft); font-size:.8rem; }
tr:last-child td { border-bottom:0; }
.inline-link { color:var(--green); font-weight:800; text-decoration:none; }
.proof-grid { align-items:start; display:grid; gap:2rem; grid-template-columns:.7fr 1.3fr; }
.proof-list { display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
.proof-list div { background:var(--soft); min-height:116px; padding:1rem; }
.proof-list dt { color:var(--green); font-size:1.7rem; font-weight:900; }
.proof-list dd { color:var(--muted); line-height:1.45; margin:.3rem 0 0; }
.resource-band { background:#1c3028; color:white; }
.resource-grid { align-items:center; display:flex; gap:2rem; justify-content:space-between; }
.resource-grid nav { display:flex; flex-wrap:wrap; gap:.6rem; }
.resource-grid a { border:1px solid #789487; border-radius:6px; padding:.7rem .85rem; text-decoration:none; }
footer { align-items:start; display:flex; gap:2rem; justify-content:space-between; margin:0 auto; max-width:1180px; padding:2rem 1.25rem; }
footer div { display:grid; gap:.35rem; }
@media(max-width:1080px){.control-bar{grid-template-columns:repeat(2,minmax(0,1fr));}.content-grid,.proof-grid{grid-template-columns:1fr;}}
@media(max-width:700px){.site-header{align-items:flex-start;height:auto;padding-bottom:.8rem;padding-top:.8rem}.site-header nav{display:none}.brand{font-size:.86rem;overflow-wrap:anywhere}.intro-content{padding-bottom:2.6rem;padding-top:2.6rem}.intro-content h1{font-size:1.95rem;overflow-wrap:normal}.intro-content>p:not(.eyebrow){font-size:1rem}.control-bar,.sources-grid{grid-template-columns:1fr}.section-heading{align-items:start}.editor-panel textarea{height:230px}#result-output{height:300px}.proof-list{grid-template-columns:1fr}.resource-grid,footer{align-items:flex-start;display:grid}}