:root{font:15px/1.6 system-ui,sans-serif;color:#252525;background:#fff}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}[hidden]{display:none!important}a{color:inherit;text-underline-offset:3px}button{cursor:pointer}:focus-visible{outline:2px solid #666;outline-offset:3px}
header,main,body>footer{max-width:820px;margin:auto;padding:24px}header{padding-bottom:0}header>a{font-weight:600;text-decoration:none}header span{color:#666;margin-left:12px}main{padding-top:8px;padding-bottom:48px}h1,h2,h3{font-size:15px;line-height:1.6;font-weight:600}h1{font-size:20px}h2{margin:32px 0 8px}h3{margin:20px 0 8px}p{margin:0 0 12px}.note,.references,body>footer{color:#666}.note{margin:0 0 8px}.example{margin:28px 0;scroll-margin-top:20px}.example h2{margin:0 0 4px}.toolbar{display:flex;gap:16px;align-items:center;border-bottom:1px solid #ddd}.tabs{display:flex;gap:16px;flex:1}.toolbar button{border:0;background:none;color:#666;padding:6px 0}.toolbar button[aria-selected=true]{color:#252525;box-shadow:0 1px #252525}.pane{padding:16px 0;border-bottom:1px solid #eee;min-height:80px;overflow-wrap:anywhere}.source{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.document ul{padding-left:22px}.document li{margin:4px 0}.document table{font-size:inherit}.afm svg{max-width:100%;height:auto}.references{margin-top:36px}body>footer{border-top:1px solid #ddd}section{scroll-margin-top:20px}@media(max-width:600px){header,main,body>footer{padding:16px}.tabs{gap:12px}.toolbar{gap:12px}header span{display:block;margin:0}}
/* Source remains visible while switching output renderers. */
header,main,body>footer{max-width:1240px}
.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #e5e5e5;border-radius:8px;overflow:hidden}
.comparison-side{min-width:0}.comparison-side+.comparison-side{border-left:1px solid #e5e5e5}
.comparison .toolbar{padding:0 12px;gap:12px;min-height:40px;white-space:nowrap}
.comparison .tabs{gap:12px}.comparison .pane{padding:12px;margin:0;border-bottom:0;max-height:480px;overflow:auto;min-height:100px}
.comparison .source{background:#fafafa;font-size:12px;line-height:1.6;tab-size:4}
.comparison .output{font-size:14px}.toolbar button{font-size:13px}
@media(max-width:560px){.comparison{grid-template-columns:1fr}.comparison-side+.comparison-side{border-left:0;border-top:1px solid #e5e5e5}.comparison .source{max-height:220px}}
/* A document outline and readable rule measure; examples retain the full width. */
header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
header h1{font:inherit;font-weight:600;margin:0}header h1 a{text-decoration:none}header span{margin:0}
.document{max-width:80ch}.document table{display:block;max-width:100%;overflow-x:auto}
.contents{display:flex;flex-wrap:wrap;gap:4px 16px;margin:20px 0 28px;padding:12px 0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.spec-section{margin:32px 0}.spec-section>h2{margin:0 0 12px}.spec-section>h2>a{text-decoration:none}.spec-section>h2>a:hover{text-decoration:underline}
.spec-section>.example{margin:16px 0 24px}.example h3{margin:0 0 4px}
.comparison .source,.toolbar button{font-size:13px}.comparison .output{font-size:15px}
#overview .comparison .pane{max-height:620px}
#syntax .document{max-width:none}#syntax table{display:table;table-layout:fixed}#syntax th:first-child{width:24%}#syntax th,#syntax td{vertical-align:top}#syntax td{overflow-wrap:anywhere}
@media(max-width:600px){header span{display:inline}.contents{gap:4px 12px}}