:root{--ink:#29272b;--muted:#62616a;--paper:#f6f4f0;--line:#d8d4d0;--berry:#813c55;--berry-wash:#f5e9ee;--old:#e9edf0;--warning:#82451c;--warning-wash:#fff3e5;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;font-size:16px;line-height:1.5}
*{box-sizing:border-box}body{margin:0}a{color:var(--berry);text-underline-offset:3px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:5px;padding:11px 17px;background:#fff;color:var(--ink);min-height:44px}button:hover{border-color:var(--berry)}button:disabled{cursor:default;opacity:.48}button.primary{background:var(--berry);border-color:var(--berry);color:white;font-weight:600}button.primary:hover{background:#692c43}:focus-visible{outline:3px solid #386d91;outline-offset:3px}[hidden]{display:none!important}.skip-link{position:absolute;top:-90px;left:20px;background:white;padding:12px;z-index:10}.skip-link:focus{top:10px}.masthead{max-width:1320px;margin:auto;display:flex;align-items:center;gap:24px;padding:24px 40px;border-bottom:1px solid var(--line);font-size:.85rem}.wordmark{font-family:Georgia,serif;font-size:1.6rem;color:var(--ink);text-decoration:none}.thread-mark{display:inline-block;color:var(--berry);font-size:2rem;margin-right:7px}.edition{color:var(--muted);margin-right:auto}.masthead>a:last-child{font-size:.85rem}main{max-width:1240px;margin:auto;padding:0 40px}.intro{padding:40px 0 30px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end}.eyebrow{font-size:.68rem;letter-spacing:.12em;font-weight:700;color:var(--muted)}.intro .eyebrow{grid-column:1/-1;margin:0 0 10px}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-size:3.5rem;line-height:1.06;font-weight:400;letter-spacing:-.035em;margin-bottom:0}h1 em{font-weight:400;color:var(--berry)}.intro>p:last-child{font-size:1.05rem;max-width:350px;margin:0 0 6px;color:var(--muted)}h2{font-size:1.15rem;font-weight:600;margin-bottom:0}h3{font-size:1.1rem}.workspace{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(360px,1.25fr);background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}.input-panel{padding:26px 28px;border-right:1px solid var(--line)}.result-panel{padding:26px 30px;min-width:0;background:#fdfcfb}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:25px}.section-number{font-size:.75rem;font-family:monospace;color:var(--berry);border-bottom:2px solid var(--berry);padding-bottom:2px}.small-tag{margin-left:auto;font-size:.65rem;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 6px}label{display:block;font-size:.82rem;font-weight:600;margin:0 0 7px}label span{font-weight:400;display:block;font-size:.75rem;color:var(--muted)}input[type=number],select,textarea{width:100%;border:1px solid #aaa6ad;border-radius:4px;background:white;color:var(--ink);padding:10px 11px;min-height:44px}textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.6;font-size:.9rem;resize:vertical;min-height:128px}textarea::placeholder{color:#77737b}.hint{font-size:.76rem;color:var(--muted);line-height:1.5;margin:7px 0 16px}.example-row{margin:20px 0}.example-row label{font-size:.72rem;color:var(--muted)}.conventions{border:0;padding:19px 0 0;margin:22px 0 0;border-top:1px solid var(--line)}.conventions legend{font-size:.75rem;font-weight:600;padding:0 8px 0 0}.checkbox{display:flex;gap:9px;align-items:flex-start;line-height:1.5;font-weight:400;font-size:.8rem;margin:6px 0 17px}.checkbox input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--berry)}.checkbox span{font-size:inherit;color:inherit}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.conventions>div:not(.field-pair){margin-top:18px}.explain{width:100%;margin-top:18px;display:flex;justify-content:space-between}.privacy{font-size:.72rem;color:var(--muted);text-align:center;margin:10px 0 0}.empty-state{padding:65px 12px;text-align:center}.empty-state h3{font-family:Georgia,serif;font-size:1.65rem;font-weight:400}.empty-state>p{font-size:.9rem;color:var(--muted)}.empty-state .hint{font-size:.76rem;margin:40px auto 0;max-width:290px}.empty-diagram{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:34px}.empty-diagram span{border:1px solid #bcc4cb;border-radius:50%;width:30px;height:38px;background:var(--old);font-size:.75rem;display:grid;place-items:center}.empty-diagram span.accent{background:var(--berry-wash);border-color:#c38ba0;color:var(--berry)}.empty-diagram i{font-size:1.8rem;color:var(--muted);margin:0 6px}.status{font-size:.85rem;margin-bottom:16px;padding:10px 12px;border-left:3px solid var(--berry);background:var(--berry-wash)}.status.conflict{border-color:var(--warning);background:var(--warning-wash);color:var(--warning)}.status p{margin:3px 0 0;font-size:.75rem}.totals{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.totals>div+div{border-left:1px solid var(--line);padding-left:22px}.totals span{display:block;font-size:.75rem;color:var(--muted)}.totals strong{font-family:Georgia,serif;font-weight:400;font-size:2.7rem;line-height:1.3;font-variant-numeric:tabular-nums}.totals small{display:block;font-size:.7rem;color:var(--muted)}details{font-size:.8rem}summary{cursor:pointer;min-height:44px;padding:10px 0;color:var(--muted)}details ul{padding-left:20px}details p{font-size:.75rem;color:var(--muted)}.assumptions{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}.step-header{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:.72rem;margin-bottom:9px}.step-header .eyebrow{white-space:nowrap}.step-header>span:last-child{text-align:right;color:var(--berry)}progress{height:4px;width:100%;display:block;border:0;background:var(--line);accent-color:var(--berry)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--berry)}.step-card{padding:24px 20px 16px;border:1px solid var(--line);border-top:0;background:white}.step-card h3{font-family:Georgia,serif;font-size:1.65rem;line-height:1.25;font-weight:400;margin-bottom:10px;overflow-wrap:anywhere}.step-card>p{font-size:.85rem;color:var(--muted)}.mapping{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;align-items:center;padding:16px 0}.mapping-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.1em;margin-bottom:10px;color:var(--muted)}.mapping small{font-size:.68rem;color:var(--muted)}.positions{display:flex;flex-wrap:wrap;gap:5px;min-height:38px;align-items:center;margin-bottom:5px}.positions span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:36px;background:var(--old);border:1px solid #b4bec7;border-radius:14px;font:.78rem ui-monospace,monospace;padding:0 6px}.positions.new span{background:var(--berry-wash);border-color:#bd8197;color:#742e48}.positions .none{background:none;border:0;padding:0;color:var(--muted);font-family:Arial,sans-serif;font-size:.78rem}.map-arrow{color:var(--muted);font-size:1.6rem;text-align:center}.step-card .running-count{font-size:.72rem;border-top:1px dashed var(--line);padding-top:14px;margin:12px 0 0;font-variant-numeric:tabular-nums}.step-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.step-controls button{font-size:.85rem}.source-block{margin-top:24px}.source-block>p{font:.8rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;margin:9px 0 12px}mark{background:#ead1dc;color:#542039;padding:2px 0;box-decoration-break:clone}.text-button{background:none;border:none;padding:8px 0;color:var(--berry);text-decoration:underline;text-underline-offset:4px;font-size:.74rem;min-height:44px}.result-actions{display:flex;gap:20px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px}.notice{font-size:.8rem;color:var(--muted);margin:10px 0 0}.error-box,.issues{padding:14px;background:var(--warning-wash);border-left:3px solid var(--warning);color:#663411;font-size:.8rem;margin-top:20px}.error-box h3{font-size:.9rem}.error-box p{white-space:pre-wrap;overflow-wrap:anywhere}.error-box>a{display:block;min-height:32px}.issues{margin:0 0 15px}.issues p:last-child{margin:0}.issues button{font-size:.75rem;margin-bottom:10px}.saved-controls{display:flex;gap:20px}#step-list{padding-left:24px;max-height:350px;overflow:auto}#step-list li{margin-bottom:7px}#step-list button{width:100%;text-align:left;font-size:.76rem}#step-list button[aria-current=step]{border-color:var(--berry);background:var(--berry-wash)}.syntax{display:grid;grid-template-columns:1fr 1.65fr;gap:60px;padding:62px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px}.syntax h2{font-family:Georgia,serif;font-size:2rem;font-weight:400;line-height:1.2;margin-bottom:16px}.syntax p{font-size:.85rem;color:var(--muted)}dl{margin:0}dt{font-size:.88rem;font-weight:600;margin-top:22px}dt:first-child{margin-top:0}dd{margin:6px 0 0;font-size:.8rem;color:var(--muted);line-height:1.8}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;color:var(--ink);overflow-wrap:anywhere}.scope-note{margin-top:24px;padding:20px;background:#ece9e5;border-radius:5px}.scope-note h3{font-size:.9rem}.scope-note p{font-size:.78rem;margin-bottom:8px}.references{padding:25px 0;font-size:.75rem;color:var(--muted)}.references h2,.references h3{font-size:.85rem}footer{max-width:1240px;padding:20px 40px 35px;margin:auto;font-family:Georgia,serif;display:flex;justify-content:space-between;gap:20px}footer span{font-family:Arial,sans-serif;font-size:.7rem;color:var(--muted)}
@media(max-width:850px){.masthead{padding:18px 24px}.edition{display:none}.masthead>a:last-child{margin-left:auto}main{padding:0 24px}.intro{column-gap:24px}h1{font-size:2.9rem}.input-panel,.result-panel{padding:22px 20px}.workspace{grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr)}.syntax{gap:28px}footer{padding-left:24px;padding-right:24px}}
@media(max-width:700px){.masthead{padding:14px 18px;gap:8px}.wordmark{font-size:1.3rem}.masthead>a:last-child{font-size:.7rem}main{padding:0 16px}.intro{display:block;padding:28px 0 25px}h1{font-size:2.8rem}.intro>p:last-child{margin:18px 0 0;font-size:.95rem;max-width:100%}.workspace{display:block}.input-panel{border-right:0;border-bottom:1px solid var(--line)}.result-panel{min-height:340px}.empty-state{padding:30px 0}.syntax{display:block;padding:35px 0}.syntax-content{margin-top:25px}.result-actions{flex-wrap:wrap;gap:3px}.step-header{align-items:flex-start}.field-pair{gap:12px}.field-pair label{min-height:45px}.small-tag{font-size:.6rem}footer{padding:20px 16px;display:block}footer span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Task-first typography and follow-along revision, 2026-11-12. */
:root {
  --ink: #233d35;
  --muted: #56645e;
  --paper: #f6f5ef;
  --line: #d6ded7;
  --berry: #285e4d;
  --berry-wash: #e9f2e9;
  --old: #eaf0f4;
  --warning: #7c451f;
  --warning-wash: #fff3df;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
button,input,select,textarea { font: inherit; }
button { min-height: 48px; border-radius: 10px; padding: 11px 18px; }
button.primary { background: var(--berry); }
button.primary:hover { background: #1e493b; }
button[aria-pressed=true] { background: var(--berry-wash); border-color: var(--berry); }
:focus-visible { outline: 3px solid #346ba0; outline-offset: 4px; }
.masthead { max-width: 1280px; padding: 18px 32px; gap: 20px; font-size: .9375rem; }
.wordmark { display:flex; align-items:center; gap:10px; font-family:inherit; font-weight:750; font-size:1.4rem; letter-spacing:-.035em; }
.thread-mark { width:36px; height:36px; margin:0; fill:none; stroke:var(--berry); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.masthead>a:last-child { font-size:.875rem; }
.edition { font-size:.875rem; }
main { max-width:1280px; padding:0 32px; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 0; }
.intro .eyebrow { margin-bottom:6px; }
.eyebrow { font-size:.875rem; letter-spacing:.015em; font-weight:650; }
h1 { font-family:inherit; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.2; letter-spacing:-.04em; font-weight:750; }
.intro p:last-child { font-size:1rem; color:var(--muted); margin:10px 0 0; max-width:630px; }
.scope-badge { flex-shrink:0; font-size:.875rem; padding:8px 13px; border:1px solid #c8d7c9; border-radius:30px; background:#edf1e6; color:#344c3a; }
.workspace { grid-template-columns:minmax(320px,.9fr) minmax(0,1.2fr); border:0; background:none; gap:20px; overflow:visible; border-radius:0; align-items:start; }
.input-panel,.result-panel { padding:26px; border:1px solid var(--line); border-radius:18px; min-width:0; background:#fff; }
.result-panel { background:#fcfdf9; }
.section-title { gap:12px; margin-bottom:22px; }
h2 { font-size:1.1875rem; font-weight:700; letter-spacing:-.02em; }
.section-number { font-family:inherit; font-size:.875rem; font-weight:700; padding:0; width:30px; height:30px; display:grid; place-items:center; background:var(--berry-wash); border:0; border-radius:50%; }
.small-tag { display:none; }
label { font-size:.9375rem; line-height:1.5; font-weight:600; }
label span { font-size:.875rem; }
input[type=number],select,textarea { padding:11px 12px; min-height:48px; border-color:#94a59c; border-radius:9px; }
textarea { font-size:1rem; line-height:1.65; min-height:126px; }
textarea::placeholder { color:#64736b; }
.hint { font-size:.875rem; line-height:1.55; margin:9px 0 16px; }
.quick-examples { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 18px; }
.quick-examples>span { width:100%; font-size:.875rem; color:var(--muted); }
.quick-examples button { font-size:.875rem; padding:8px 12px; min-height:44px; border-color:#bbcfbd; background:#f3f7ee; color:var(--berry); }
.example-row { margin:16px 0 24px; }
.example-row label { font-size:.875rem; }
.conventions { margin-top:20px; padding-top:18px; }
.conventions legend { font-size:.9375rem; }
.checkbox { font-size:.9375rem; margin:8px 0 18px; gap:10px; line-height:1.6; }
.checkbox input { width:20px; height:20px; margin-top:3px; }
.field-pair { gap:14px; }
.conventions>div:not(.field-pair) { margin-top:20px; }
.explain { font-size:1rem; margin-top:22px; }
.privacy { font-size:.875rem; margin-top:12px; }
.empty-state { padding:44px 12px 52px; }
.empty-state h3 { font-family:inherit; font-size:1.5rem; font-weight:700; letter-spacing:-.025em; }
.empty-state>p { font-size:1rem; max-width:350px; margin-left:auto; margin-right:auto; }
.empty-state .hint { font-size:.875rem; margin-top:30px; max-width:350px; }
.empty-diagram { margin-bottom:28px; }
.empty-diagram span { font-size:1rem; width:36px; height:44px; border-color:#a5b6bd; }
.empty-diagram span.accent { border-color:#9cbaa0; color:var(--berry); }
.view-controls { display:flex; flex-wrap:wrap; gap:10px; margin:-4px 0 20px; }
.view-controls button { font-size:.875rem; }
.view-controls button:first-child { background:#eaf2e6; border-color:#b7ccb5; color:#244e3c; font-weight:650; }
.status { font-size:.9375rem; padding:12px 14px; border-radius:0 9px 9px 0; margin-bottom:22px; }
.status p { font-size:.875rem; margin-top:4px; }
.step-header { font-size:.875rem; align-items:flex-start; margin-bottom:12px; }
.step-header>span:last-child { max-width:65%; }
progress { height:6px; border-radius:6px 6px 0 0; overflow:hidden; }
.step-card { padding:24px; border-radius:0 0 12px 12px; border-color:#c4d6c3; background:#f1f6ec; }
.step-card h3 { font-family:inherit; font-size:1.8rem; line-height:1.25; letter-spacing:-.025em; font-weight:720; margin-bottom:12px; }
.step-card>p { font-size:1rem; line-height:1.65; }
.step-card .stitch-key { color:#325744; font-size:.9375rem; font-weight:600; margin:0 0 18px; }
.mapping { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:10px; padding:14px 0; }
.mapping-label { font-size:.875rem; letter-spacing:0; font-weight:650; margin-bottom:10px; }
.mapping small { font-size:.875rem; display:block; line-height:1.5; }
.positions { min-height:48px; margin-bottom:8px; }
.positions span { min-width:44px; height:48px; font-family:inherit; font-size:1.125rem; font-weight:700; font-variant-numeric:tabular-nums; border-radius:16px; background:#e8eef2; color:#2f4b5b; border-color:#9eb2bc; }
.positions.new span { background:#dcead7; color:#294f38; border-color:#9bb398; }
.positions .none { font-size:.9375rem; font-weight:400; }
.step-card .running-count { font-size:.875rem; line-height:1.6; padding-top:15px; margin-top:10px; }
.step-controls { gap:12px; margin-top:14px; }
.step-controls button { font-size:1rem; min-height:52px; }
.source-block { margin-top:22px; padding:16px; border:1px dashed #bdcbbd; border-radius:10px; background:#fff; }
.source-block>p { font-size:.9375rem; line-height:1.8; margin-bottom:0; }
mark { background:#d7e8cc; color:#21432f; }
.count-review { margin-top:25px; padding-top:22px; border-top:1px solid var(--line); }
.count-review>h3 { font-size:1rem; margin-bottom:16px; }
.totals { gap:16px; margin-bottom:16px; }
.totals>div+div { padding-left:16px; }
.totals span,.totals small { font-size:.875rem; }
.totals strong { font-family:inherit; font-size:2rem; font-weight:700; letter-spacing:-.04em; }
details { font-size:.9375rem; }
summary { min-height:48px; padding:12px 0; }
details p { font-size:.875rem; }
.assumptions { margin-bottom:6px; }
.text-button { font-size:.875rem; min-height:48px; }
.result-actions { gap:14px; flex-wrap:wrap; }
.notice { font-size:.875rem; line-height:1.6; }
.error-box,.issues { font-size:.9375rem; line-height:1.6; border-radius:0 10px 10px 0; padding:16px; }
.error-box h3 { font-size:1.0625rem; }
.issues button { font-size:.9375rem; }
#step-list button { font-size:.9375rem; line-height:1.6; }
.syntax { gap:48px; padding:48px 0; }
.syntax h2 { font-family:inherit; font-size:1.8rem; font-weight:700; letter-spacing:-.03em; }
.syntax p { font-size:1rem; }
dt { font-size:1rem; }
dd { font-size:.9375rem; line-height:1.7; }
code { font-size:.9375rem; }
.scope-note { background:#eaece2; padding:22px; border-radius:12px; }
.scope-note h3 { font-size:1rem; }
.scope-note p { font-size:.9375rem; }
.references { font-size:.875rem; line-height:1.7; }
.references h2,.references h3 { font-size:1rem; }
footer { font-family:inherit; font-weight:650; max-width:1280px; padding:20px 32px 32px; }
footer span { font-family:inherit; font-size:.875rem; font-weight:400; }
body.large-type .step-card h3 { font-size:2.2rem; }
body.large-type .step-card>p,body.large-type .mapping small,body.large-type .source-block>p { font-size:1.1875rem; }
body.large-type .mapping-label { font-size:1rem; }
body.large-type .positions span { font-size:1.5rem; min-width:52px; height:56px; }
body.focus-mode .intro,body.focus-mode .input-panel,body.focus-mode .syntax,body.focus-mode .references,body.focus-mode footer,body.focus-mode .masthead>a:last-child { display:none; }
body.focus-mode .workspace { display:block; max-width:800px; margin:24px auto; }
body.focus-mode .result-panel { padding:28px; }
body.focus-mode .view-controls { position:sticky; top:0; z-index:2; padding:12px 0; margin-top:0; background:#fcfdf9; scroll-margin-top:0; }
body.focus-mode .step-controls { position:sticky; bottom:0; padding:12px 0; background:#fcfdf9; z-index:1; }
@media(max-width:1000px) {
  .scope-badge { display:none; }
  .workspace { grid-template-columns:minmax(290px,.9fr) minmax(0,1.1fr); gap:16px; }
  .input-panel,.result-panel { padding:22px; }
  .field-pair { grid-template-columns:1fr; }
  .field-pair label { min-height:0; }
}
@media(max-width:760px) {
  .masthead { padding:16px 20px; }
  .edition { display:none; }
  .masthead>a:last-child { margin-left:auto; }
  main { padding:0 16px; }
  .intro { padding:24px 4px; }
  h1 { font-size:1.9rem; }
  .intro p:last-child { font-size:1rem; }
  .workspace { display:block; }
  .input-panel,.result-panel { padding:22px; margin-bottom:18px; border-radius:14px; }
  .field-pair { grid-template-columns:1fr 1fr; }
  .syntax { display:block; padding:32px 4px; }
  .syntax-content { margin-top:28px; }
  footer { padding:20px; display:block; }
  footer span { display:block; margin-top:8px; }
  body.focus-mode .workspace { margin:16px 0; }
  body.focus-mode .result-panel { padding:20px; }
}
@media(max-width:400px) {
  .masthead { padding:14px 16px; }
  .wordmark { font-size:1.2rem; gap:7px; }
  .thread-mark { width:29px; height:29px; }
  .masthead>a:last-child { font-size:.875rem; max-width:110px; text-align:right; }
  .input-panel,.result-panel { padding:18px; }
  .field-pair { grid-template-columns:1fr; }
  .step-card { padding:18px; }
  .step-card h3 { font-size:1.625rem; }
  .step-header { flex-direction:column; gap:4px; }
  .step-header>span:last-child { text-align:left; max-width:100%; }
  .step-controls { gap:8px; }
  .step-controls button { padding:10px 8px; }
  .totals { grid-template-columns:1fr; gap:12px; }
  .totals>div+div { padding-left:0; border:0; }
  .view-controls { gap:8px; }
  body.large-type .mapping { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); }
  body.large-type .map-arrow { transform:none; }
}

textarea { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body.focus-mode .section-title { margin-bottom:10px; }
body.focus-mode .view-controls { gap:8px; }
body.focus-mode .view-controls button { flex:1; padding:10px 8px; min-height:44px; }
body.focus-mode .status:not(.conflict) p { display:none; }