/* rawgit.net — warm paper, dark ink, one clear action. No remote fonts or UI dependencies. */
:root {
  color-scheme: light;
  --paper:#f6f5ef; --surface:#fffefa; --ink:#23332c; --muted:#616b63;
  --line:#d8dcd0; --accent:#ad3e23; --accent-hover:#8e301a;
  --accent-ink:#fffaf4; --tint:#edf2e8; --field:#f6f7f1;
  --badge:#dfe8d8; --warning:#854308; --warning-bg:#fff0d4;
  --code:#24372e; --code-text:#f0f4e9; --focus:#ad3e23;
  --sans:"Segoe UI", -apple-system, BlinkMacSystemFont, "Noto Sans", sans-serif;
  --serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius:8px;
}
:root[data-theme="dark"] {
  color-scheme:dark; --paper:#171e1a; --surface:#1e2822; --ink:#e9eee2; --muted:#b3beb2;
  --line:#3b4a3f; --accent:#f1a17d; --accent-hover:#ffc3a6; --accent-ink:#251d17;
  --tint:#25332a; --field:#17211b; --badge:#344939; --warning:#f9c18b;
  --warning-bg:#3c2e1c; --code:#101a13; --code-text:#e9eee2; --focus:#f1a17d;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark; --paper:#171e1a; --surface:#1e2822; --ink:#e9eee2; --muted:#b3beb2;
    --line:#3b4a3f; --accent:#f1a17d; --accent-hover:#ffc3a6; --accent-ink:#251d17;
    --tint:#25332a; --field:#17211b; --badge:#344939; --warning:#f9c18b;
    --warning-bg:#3c2e1c; --code:#101a13; --code-text:#e9eee2; --focus:#f1a17d;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color:var(--accent); }
button, input, textarea, select { font:inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
button, .button { transition:background-color .15s,color .15s,border-color .15s; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset:2px; }
::selection { background:var(--badge); color:var(--ink); }
p, h1, h2, h3 { margin:0; }
p { text-wrap:pretty; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-family:var(--serif); font-size:clamp(42px,5.1vw,66px); font-weight:500; letter-spacing:-2.8px; line-height:1.07; }
h1 em { color:var(--accent); font-weight:400; }
h2 { font-size:24px; line-height:1.25; font-weight:600; letter-spacing:-.55px; }
h3 { font-size:17px; line-height:1.4; font-weight:600; }
.shell { width:min(1120px,calc(100% - 80px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:12px; left:12px; transform:translateY(-180%); z-index:10; background:var(--ink); color:var(--paper); padding:12px 18px; }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; align-items:center; gap:32px; padding-block:23px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-1.2px; text-decoration:none; flex-shrink:0; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border:1.5px solid var(--ink); border-radius:4px; font-size:26px; line-height:1; font-weight:400; }
.brand-suffix { color:var(--accent); }
.site-header nav { display:flex; gap:28px; align-items:center; margin-left:auto; }
.site-header nav a { display:flex; align-items:center; min-height:44px; text-decoration:none; color:var(--muted); font-size:14px; }
.site-header nav a[aria-current] { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:9px; text-decoration-thickness:2px; }
.theme-toggle { width:44px; height:44px; display:grid; place-items:center; padding:0; font-size:25px; color:var(--ink); background:none; border:1px solid var(--line); border-radius:50%; }
.theme-toggle:hover { background:var(--tint); }
.hero { display:grid; grid-template-columns:1.75fr 1fr; gap:72px; align-items:end; padding:54px 0 44px; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:1.65px; line-height:1.6; font-weight:500; color:var(--muted); margin-bottom:18px; }
.hero-aside { padding-bottom:5px; }
.hero-aside p { color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:18px; }
.text-link { display:inline-flex; gap:9px; align-items:center; min-height:36px; font-size:14px; text-decoration:none; font-weight:600; }
.text-link:hover { text-decoration:underline; }
.workbench { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 4px 0 -1px var(--line); }
.workbench-heading, .result-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.workbench-heading h2, .result-heading h2 { font-size:16px; letter-spacing:0; display:flex; align-items:center; gap:11px; }
.step { display:grid; place-items:center; color:var(--muted); width:26px; height:26px; border:1px solid var(--line); border-radius:50%; font:11px var(--mono); }
.quiet-link { font-size:12px; color:var(--muted); text-decoration:none; display:inline-flex; gap:5px; align-items:center; min-height:32px; }
.quiet-link:hover { text-decoration:underline; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.input-row { display:flex; gap:12px; align-items:stretch; }
.source-field { display:flex; gap:10px; align-items:center; flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--field); padding-left:15px; }
.source-field:focus-within { border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
.source-field:has([aria-invalid="true"]) { border-color:var(--accent); }
.input-mark { color:var(--muted); font-size:21px; }
#source { width:100%; min-width:0; height:54px; background:none; border:0; border-radius:4px; padding:0 8px 0 0; color:var(--ink); font:14px var(--mono); }
#source:focus-visible { outline:none; }
#source::placeholder { color:var(--muted); opacity:.85; }
.clear-button { border:0; background:none; color:var(--muted); width:44px; height:44px; flex-shrink:0; font-size:22px; }
.clear-button:hover { color:var(--ink); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:44px; padding:10px 18px; font-size:13px; font-weight:600; border:1px solid transparent; border-radius:5px; text-decoration:none; white-space:nowrap; }
.button-primary { color:var(--accent-ink); background:var(--accent); }
.button-primary:hover:not(:disabled) { color:var(--accent-ink); background:var(--accent-hover); }
.button-dark { color:var(--paper); background:var(--ink); }
.button-dark:hover:not(:disabled) { color:var(--accent-ink); background:var(--accent); }
.button-secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.button-secondary:hover:not(:disabled) { background:var(--tint); border-color:var(--muted); color:var(--ink); }
#generate { min-width:160px; font-size:14px; }
.input-help { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; margin-top:8px; color:var(--muted); font-size:12px; }
.examples { display:flex; align-items:center; flex-wrap:wrap; gap:3px; }
.examples span { margin-right:3px; }
.examples button { background:none; color:var(--ink); border:0; padding:9px 7px; min-height:36px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; font-size:12px; }
.examples button:hover { color:var(--accent); text-decoration-color:var(--accent); }
.status { color:var(--muted); font-size:13px; min-height:21px; line-height:1.6; margin-top:12px; overflow-wrap:anywhere; }
.status[data-kind="error"] { color:var(--accent); }
.status[data-kind="warning"] { color:var(--warning); }
.status:empty { min-height:0; margin:0; }
.workbench[data-state="loading"] #generate { opacity:.7; }
.result-heading { margin-top:27px; padding-top:24px; border-top:1px solid var(--line); margin-bottom:18px; }
.source-meta { font:11px var(--mono); color:var(--muted); overflow-wrap:anywhere; }
.results { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.result { border:1px solid var(--line); border-radius:6px; padding:21px; min-width:0; }
.result-production { background:var(--tint); }
.result-top { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:8px; }
.result-top h3 { font-size:18px; letter-spacing:-.3px; }
.badge { display:inline-flex; align-items:center; gap:5px; background:var(--badge); color:var(--ink); font:10px/1.5 var(--mono); padding:4px 8px; border-radius:3px; }
.badge-neutral { background:var(--field); color:var(--muted); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.result-help { color:var(--muted); font-size:13px; line-height:1.6; margin:11px 0 16px; min-height:42px; }
.result-url { resize:none; display:block; width:100%; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); padding:12px; font:12px/1.75 var(--mono); height:72px; overflow-wrap:anywhere; }
.result-url::placeholder { color:var(--muted); opacity:.8; }
.result-actions { display:flex; gap:20px; align-items:center; margin-top:17px; min-height:44px; }
.result-actions .text-link { font-size:12px; }
.result-actions .button { min-width:104px; }
.embed-tools { margin-top:22px; border-top:1px solid var(--line); }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.embed-tools summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 0 1px; font-size:14px; font-weight:600; min-height:44px; }
.summary-meta { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:20px; font-weight:400; }
.summary-meta span { font-size:20px; transition:transform .15s; }
details[open] .summary-meta span { transform:rotate(45deg); }
.embed-body { margin-top:22px; }
.embed-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
select { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:10px 34px 10px 12px; min-height:44px; font-size:13px; max-width:100%; }
.code-output { width:100%; resize:vertical; min-height:108px; background:var(--code); color:var(--code-text); font:12px/1.9 var(--mono); border:1px solid var(--line); border-radius:5px; padding:17px; overflow-wrap:anywhere; }
.code-output::placeholder { color:var(--code-text); opacity:.7; }
.integrity-row { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-top:24px; }
.integrity-row h3 { font-size:14px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.optional { font-size:11px; font-weight:400; color:var(--muted); }
.integrity-row p { color:var(--muted); font-size:12px; margin-top:5px; }
.integrity-row .button { flex-shrink:0; }
.hash-result { margin-top:18px; }
.hash-row { display:flex; gap:12px; }
.hash-row input { min-width:0; width:100%; font:12px var(--mono); border:1px solid var(--line); background:var(--field); color:var(--ink); border-radius:4px; padding:10px; }
.gist-picker { padding:18px; background:var(--tint); border:1px solid var(--line); border-radius:5px; margin-top:14px; }
.gist-picker select { width:100%; }
.notice { padding:16px; border:1px solid var(--line); margin-top:14px; font-size:14px; }
.principles { display:grid; grid-template-columns:1fr 1.35fr; gap:100px; margin-block:76px 52px; }
.principles h2 { font-family:var(--serif); font-weight:500; font-size:38px; line-height:1.16; letter-spacing:-1.2px; margin-bottom:19px; }
.principles .eyebrow { font-size:10px; }
.principle-list { display:grid; gap:23px; }
.principle-list article { display:flex; gap:21px; padding-bottom:23px; border-bottom:1px solid var(--line); }
.principle-list article:last-child { border:0; padding-bottom:0; }
.principle-number { font:11px/2 var(--mono); color:var(--accent); flex-shrink:0; }
.principle-list h3 { margin-bottom:6px; font-size:15px; }
.principle-list p { color:var(--muted); font-size:14px; }
.platform-strip { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px 0; border-top:1px solid var(--line); font-size:12px; }
.platform-strip p { color:var(--muted); }
.platform-strip div { display:flex; flex-wrap:wrap; gap:28px; font:12px var(--mono); }
.site-footer { border-top:1px solid var(--line); padding:27px 0 32px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.brand-small { font-size:15px; letter-spacing:-.7px; }
.site-footer p { color:var(--muted); font-size:11px; }
.site-footer nav { display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; }
.site-footer nav a { font-size:11px; text-decoration:none; min-height:32px; display:inline-flex; align-items:center; gap:4px; }
.site-footer nav a:hover { text-decoration:underline; }
.document-hero { padding:63px 0 48px; border-bottom:1px solid var(--line); }
.document-lead { max-width:650px; color:var(--muted); font-size:17px; line-height:1.75; margin-top:25px; }
.document-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:90px; padding:42px 0 64px; }
.contents { align-self:start; position:sticky; top:32px; }
.contents nav { display:grid; gap:3px; }
.contents .eyebrow { font-size:10px; margin-bottom:11px; }
.contents nav a { display:flex; align-items:center; font-size:13px; color:var(--muted); text-decoration:none; min-height:39px; padding-block:5px; }
.contents nav a:hover { color:var(--accent); }
.contents .button { margin-top:22px; }
.document-content { min-width:0; }
.document-content section { margin-bottom:46px; padding-bottom:44px; border-bottom:1px solid var(--line); scroll-margin-top:28px; }
.document-content section:last-child { margin-bottom:0; border:0; padding-bottom:0; }
.document-content h2 { font-family:var(--serif); font-size:34px; font-weight:500; letter-spacing:-.8px; margin-bottom:23px; line-height:1.2; }
.document-content h3 { margin-top:25px; margin-bottom:10px; }
.document-content p { margin-bottom:17px; color:var(--muted); font-size:15px; line-height:1.85; }
.document-content p:last-child { margin-bottom:0; }
.document-content strong { color:var(--ink); font-weight:600; }
.document-content .eyebrow { font-size:10px; line-height:1.5; color:var(--accent); margin-bottom:14px; }
code { font:12px/1.7 var(--mono); background:var(--tint); padding:2px 4px; border-radius:2px; overflow-wrap:anywhere; }
.how-to { padding:0; list-style:none; counter-reset:steps; display:grid; gap:24px; }
.how-to li { counter-increment:steps; padding-left:47px; position:relative; }
.how-to li:before { content:counter(steps,decimal-leading-zero); position:absolute; left:0; top:0; color:var(--accent); font:13px/2 var(--mono); }
.how-to h3 { margin:0 0 8px; }
.how-to p { margin:0; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:28px; padding:23px 0; border-block:1px solid var(--line); }
.comparison h3 { font-size:17px; margin-top:12px; }
.comparison p { font-size:14px; }
.table-scroll { width:100%; overflow:auto; margin:22px 0; border:1px solid var(--line); border-radius:5px; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
th,td { padding:15px; border-bottom:1px solid var(--line); vertical-align:top; }
thead { background:var(--tint); font-size:11px; }
tr:last-child th,tr:last-child td { border-bottom:0; }
table code { font-size:11px; background:none; padding:0; }
table small { color:var(--muted); font-size:11px; }
.code-example { background:var(--code); color:var(--code-text); padding:19px 21px; border-radius:5px; margin:22px 0; }
.code-example span { font:10px var(--mono); opacity:.8; }
.code-example pre { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:0; }
.code-example code { background:none; padding:0; color:inherit; font-size:12px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; min-height:52px; font-size:14px; font-weight:600; }
.faq summary:after { content:'+'; font-size:22px; font-weight:400; color:var(--muted); }
.faq details[open] summary:after { content:'−'; }
.faq details p { padding:0 22px 18px 0; margin:0; }
.closing { display:flex; justify-content:space-between; align-items:center; gap:24px; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:29px; margin-bottom:58px; }
.closing p { font-family:var(--serif); font-size:27px; }
.error-page { padding-block:90px 110px; min-height:65vh; }
.error-page>p:not(.eyebrow) { margin-top:27px; max-width:500px; color:var(--muted); }
.button-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:27px; }
@media (max-width:950px) {
 .shell { width:calc(100% - 48px); }
 .hero { gap:36px; grid-template-columns:1.5fr 1fr; }
 h1 { font-size:52px; letter-spacing:-2px; }
 .hero-aside p { font-size:14px; }
 .principles { gap:50px; }
 .platform-strip { align-items:start; }
 .platform-strip div { gap:18px; }
 .document-layout { gap:40px; grid-template-columns:180px minmax(0,1fr); }
 .site-footer nav { margin-left:0; }
}
@media (max-width:680px) {
 .shell { width:calc(100% - 32px); }
 .site-header { gap:13px; padding-block:14px; }
 .brand { font-size:18px; gap:8px; }
 .brand-mark { width:26px; height:26px; font-size:21px; }
 .site-header nav { gap:13px; }
 .site-header nav a { font-size:12px; }
 .theme-toggle { width:36px; height:44px; border:0; font-size:24px; }
 .hero { grid-template-columns:1fr; gap:23px; padding:36px 0 30px; }
 h1 { font-size:48px; letter-spacing:-2.2px; }
 .eyebrow { font-size:10px; letter-spacing:1.2px; margin-bottom:14px; }
 .hero-aside p { max-width:450px; font-size:14px; margin-bottom:8px; }
 .workbench { padding:20px 16px; }
 .workbench-heading { gap:6px; margin-bottom:15px; }
 .workbench-heading h2,.result-heading h2 { font-size:14px; gap:8px; }
 .quiet-link { font-size:11px; }
 .input-row { flex-direction:column; gap:10px; }
 #source { font-size:13px; }
 #generate { width:100%; min-height:48px; }
 .input-help { gap:3px; margin-top:11px; }
 .examples { gap:4px; }
 .examples button { min-height:44px; padding-inline:6px; }
 .result-heading { margin-top:22px; padding-top:20px; }
 .results { grid-template-columns:1fr; gap:12px; }
 .result { padding:18px; }
 .result-help { min-height:0; }
 .result-url { height:79px; }
 .result-actions { justify-content:space-between; }
 .result-actions .button { min-height:46px; }
 .summary-meta { font-size:11px; gap:10px; }
 .embed-tools summary { font-size:13px; }
 .integrity-row { flex-direction:column; align-items:start; gap:13px; }
 .integrity-row .button { width:100%; }
 .hash-row { flex-direction:column; gap:9px; }
 .hash-row input { min-height:44px; }
 .principles { grid-template-columns:1fr; gap:29px; margin-block:49px 36px; }
 .principles h2 { font-size:34px; }
 .principle-list { gap:20px; }
 .principle-list article { gap:17px; padding-bottom:20px; }
 .platform-strip { flex-direction:column; gap:14px; }
 .platform-strip div { gap:13px 22px; line-height:1.8; }
 .site-footer { flex-direction:column; align-items:start; gap:12px; padding-block:24px; }
 .site-footer nav { gap:7px 17px; }
 .document-hero { padding-block:39px 30px; }
 .document-lead { font-size:15px; margin-top:20px; }
 .document-layout { grid-template-columns:1fr; gap:34px; padding-block:26px 36px; }
 .contents { position:static; border-bottom:1px solid var(--line); padding-bottom:23px; }
 .contents nav { display:flex; gap:5px 19px; flex-wrap:wrap; }
 .contents nav .eyebrow { width:100%; }
 .contents nav a { min-height:38px; font-size:12px; }
 .contents .button { display:none; }
 .document-content h2 { font-size:30px; }
 .document-content p { font-size:14px; }
 .comparison { gap:20px; }
 th,td { padding:12px; }
 .closing { padding:23px; flex-direction:column; align-items:start; margin-bottom:35px; }
 .closing p { font-size:25px; }
 .error-page { padding-block:54px 65px; }
}
@media (max-width:370px) {
 .brand-mark { display:none; }
 .site-header { gap:8px; }
 .site-header nav { gap:11px; }
 h1 { font-size:42px; }
 .comparison { grid-template-columns:1fr; }
 .summary-meta { font-size:10px; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; animation:none!important; } }
@media print { :root { color-scheme:light; } body { background:white; color:black; } .theme-toggle,.contents,.closing,.site-footer,.site-header nav { display:none!important; } .document-layout { display:block; } .shell { width:100%; } .document-content section { break-inside:avoid; } }
@media (max-width:680px) {
 .theme-toggle { width:44px; min-width:44px; }
 .examples button { min-width:44px; }
 .quiet-link,.text-link,.contents nav a,.site-footer nav a { min-height:44px; }
}
@media (max-width:480px) {
 .site-header { flex-wrap:wrap; gap:3px 12px; padding-block:10px 5px; }
 .site-header .brand { flex:1; }
 .site-header nav { order:2; width:100%; margin-left:0; gap:27px; }
 .site-header nav a { min-width:44px; }
 .theme-toggle { margin-left:auto; }
}