.af-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:34px 0 45px}
.af-flow-step{padding:17px 12px 20px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.af-flow.is-visible .af-flow-step{animation:af-step 1.2s ease-in-out}.af-flow.is-visible .af-flow-step:nth-child(2){animation-delay:.2s}.af-flow.is-visible .af-flow-step:nth-child(3){animation-delay:.4s}.af-flow.is-visible .af-flow-step:nth-child(4){animation-delay:.6s}.af-flow.is-visible .af-flow-step:nth-child(5){animation-delay:.8s}
.af-flow-step span{display:block;color:var(--red);font:9px 'Martian Mono',monospace;margin-bottom:24px}.af-flow-step strong{font:600 13px/1.3 Onest,sans-serif;letter-spacing:-.015em}
@keyframes af-step{0%,100%{border-color:var(--line);box-shadow:inset 0 0 0 transparent}35%{border-color:var(--red);box-shadow:inset 0 3px 0 var(--red)}}
.af-downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0}
.af-downloads>a{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:22px;background:var(--paper);border:1px solid var(--line);transition:background .2s}
.af-downloads>a:last-child:nth-child(odd){grid-column:1/-1}
.af-downloads>a:hover{background:#fff}.af-downloads span,.af-example>span{font:8px 'Martian Mono',monospace;text-transform:uppercase;color:var(--red)}
.af-downloads strong{font:650 25px/1.05 Onest,sans-serif;letter-spacing:-.04em}.af-downloads small{font:12px/1.5 Onest,sans-serif;color:var(--muted)}
.af-figure{margin:36px 0 44px}.af-figure img{display:block;width:100%;height:auto;border-radius:24px;background:var(--paper);border:1px solid var(--line)}
.af-figure figcaption{margin-top:12px;font:12px/1.55 Onest,sans-serif;color:var(--muted)}
.af-example{margin:28px 0;padding:25px 27px;border:1px solid var(--line);border-radius:22px;background:#f6eddb}.af-example p{margin-top:12px}
.af-checklist{display:grid;gap:8px;margin:25px 0}.af-checklist label{display:flex;gap:14px;align-items:flex-start;padding:17px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer;font-size:14px;line-height:1.55}
.af-checklist input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;accent-color:var(--red)}
.af-checklist label:has(input:checked){background:#e7eddf}.af-checklist input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.af-hero-sheet{display:grid;gap:12px;color:white}.af-hero-sheet img{display:block;width:100%;height:200px;object-fit:contain;background:#fff;border-radius:12px}.af-hero-sheet span{font:600 12px/1.4 Onest,sans-serif}
.af-reader{margin:36px 0 48px;padding:24px;border:1px solid var(--line);border-radius:26px;background:#f5eddf;scroll-margin-top:24px}
.af-reader-head>span{font:8px 'Martian Mono',monospace;color:var(--red);text-transform:uppercase}.af-reader-head h3{margin:16px 0;font:700 37px/1 Onest,sans-serif;letter-spacing:-.045em}.af-reader-head p{font-size:13px;line-height:1.6}.af-reader-head>a{display:inline-block;margin:17px 18px 0 0;font:600 12px/1.4 Onest,sans-serif;border-bottom:1px solid currentColor;padding-bottom:3px}
.af-reader-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:25px 0 20px}.af-reader-tabs button{appearance:none;text-align:left;border:1px solid #cec5b6;border-radius:12px;padding:12px 10px;background:#fffaf1;color:var(--ink);font:650 13px/1.3 Onest,sans-serif;cursor:pointer}.af-reader-tabs button span{display:block;margin-top:5px;font:10px/1.3 Onest,sans-serif;opacity:.7}.af-reader-tabs button[aria-selected="true"]{background:var(--ink);color:white;border-color:var(--ink)}.af-reader-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.af-reader-panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}.af-reader-panel[hidden]{display:none}.af-reader-panel:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.af-sheet-image{display:block;min-width:0}.af-sheet-image img{display:block;width:100%;height:auto;box-shadow:0 3px 12px #17181612;border:1px solid #d9d1c3;background:white}.af-sheet-image>span{display:block;margin-top:10px;font:11px/1.4 Onest,sans-serif;color:var(--muted)}
.af-field-notes h4{margin:0 0 18px;font:650 19px/1.1 Onest,sans-serif;letter-spacing:-.02em}.af-field-notes dl{margin:0}.af-field-notes dt{font:650 13px/1.35 Onest,sans-serif;margin-top:16px}.af-field-notes dt:first-child{margin-top:0}.af-field-notes dd{margin:5px 0 0;font:12px/1.55 Onest,sans-serif;color:#565a51}.af-field-tip{margin-top:18px!important;padding:13px;border-radius:12px;background:#e5eadf;font:12px/1.5 Onest,sans-serif}.af-reader-source{margin-top:22px!important;font:11px/1.6 Onest,sans-serif;color:var(--muted)}
.article-note a{text-decoration:underline;text-underline-offset:3px}.article-hero h1{font-size:clamp(62px,8vw,120px)}
@media(max-width:680px){.af-flow{grid-template-columns:1fr;gap:6px}.af-flow-step{display:flex;align-items:center;gap:20px;padding:14px 18px}.af-flow-step span{margin:0}.af-flow-step strong{font-size:14px}.af-flow-step br{display:none}.af-downloads{grid-template-columns:1fr}.af-figure{margin:26px 0 32px}.af-figure img{border-radius:16px}.af-example{padding:20px}.af-checklist label{padding:15px}.article-hero h1{font-size:clamp(52px,12vw,82px)}.af-reader{padding:16px;border-radius:20px}.af-reader-head h3{font-size:32px}.af-reader-tabs{gap:4px}.af-reader-tabs button{font-size:12px;padding:12px 8px}.af-reader-tabs button span{font-size:9px}.af-reader-panel{grid-template-columns:1fr;gap:24px}.af-field-notes dl{display:grid;grid-template-columns:1fr;gap:0}.af-field-notes dt{font-size:15px}.af-field-notes dd{font-size:14px}.af-field-tip{font-size:13px}.af-hero-sheet img{height:220px}}
@media(prefers-reduced-motion:reduce){.af-flow.is-visible .af-flow-step{animation:none}.af-downloads>a{transition:none}}

/* Annotated guide: the original page image remains unchanged. */
.af-reader{box-sizing:border-box;position:relative;z-index:2;background:#f5eddf;max-width:none}
.af-reader-head{max-width:960px}.af-reader-head h3{font-size:clamp(32px,3.5vw,48px)}
.af-guide-workspace{min-width:0}.af-workspace-controls{padding:0 0 18px;background:#f5eddf}
.af-reader-tabs{max-width:940px;margin-bottom:14px}.af-reader-tabs button{font-size:15px;padding:14px}.af-reader-tabs button span{font-size:12px}
.af-guide-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.af-zoom-controls{display:flex;align-items:center;gap:5px}.af-guide-toolbar button,.af-close-guide{appearance:none;border:1px solid #bfb3a1;border-radius:999px;background:#fffaf1;color:#171816;padding:11px 17px;font:600 13px/1.2 Onest,sans-serif;cursor:pointer}
.af-zoom-controls button[data-guide-zoom="in"],.af-zoom-controls button[data-guide-zoom="out"]{font-size:21px;padding:5px 14px;min-height:38px}.af-zoom-controls button:disabled{opacity:.4;cursor:default}
.af-zoom-value{min-width:56px;text-align:center;font:600 12px/1.3 Onest,sans-serif}.af-guide-toolbar .af-open-guide{background:#171816;border-color:#171816;color:white;padding:13px 20px}
.af-guide-toolbar button:focus-visible,.af-close-guide:focus-visible,.af-field-pin:focus-visible,.af-callout:focus-visible{outline:3px solid #284e9c;outline-offset:3px}
.af-guide-hint{margin-top:12px!important;font:12px/1.5 Onest,sans-serif;color:#686b62}
.af-reader-panel{display:block}.af-reader-panel[hidden]{display:none!important}
.af-stage-viewport{overflow:auto;overscroll-behavior:contain;max-width:100%;padding:18px 4px 24px;scrollbar-color:#aa9b86 #eee4d5;scrollbar-width:thin}
.af-document-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr);gap:88px;align-items:start;margin:0 auto;min-width:0}
.af-paper{position:relative;background:white;min-width:0;box-shadow:0 4px 16px #17181615}.af-paper>img{display:block;width:100%;height:auto}
.af-leader-layer{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;color:#cf3428}
.is-enhanced .af-leader-layer{display:block}.af-field-outline{fill:#ff413508;stroke:#d6382c;stroke-width:1.6;rx:4;opacity:.52;vector-effect:non-scaling-stroke}
.af-field-outline.is-active{fill:#ff413512;opacity:1;stroke-width:2.5}.af-arrow-line{fill:none;stroke:#d6382c;stroke-width:1.7;opacity:.48;vector-effect:non-scaling-stroke}.af-arrow-line.is-active{opacity:1;stroke-width:2.5}
.af-callouts{position:relative;min-width:0;z-index:3}
.af-callout{position:relative;appearance:none;display:block;width:100%;text-align:left;border:1px solid #e2a59d;border-radius:15px;background:#fffaf7;color:#171816;padding:15px 15px 15px 65px;cursor:pointer;margin:0 0 12px;box-sizing:border-box;box-shadow:none}
.is-enhanced .af-callout{position:absolute;margin:0;left:0}.af-callout.is-active{border-color:#ce3326;background:#fff7f2;box-shadow:0 0 0 1px #ce3326}
.af-callout-number{position:absolute;left:12px;top:14px;min-width:40px;padding:6px 4px;border-radius:8px;background:#ce3326;color:white;text-align:center;font:700 11px/1.3 Onest,sans-serif}
.af-callout strong{display:block;color:#b92d23;font:700 17px/1.2 Onest,sans-serif;letter-spacing:-.02em}.af-callout-text{display:block;margin-top:8px;font:400 14px/1.5 Onest,sans-serif;color:#33372f}.af-callout-example{display:block;margin-top:9px;padding:8px 0 0;border-top:1px solid #eed2cc;color:#b92d23;font:500 13px/1.45 Onest,sans-serif}
.af-field-pin{display:none;position:absolute;z-index:4;min-width:32px;height:29px;padding:0 5px;appearance:none;border:2px solid white;border-radius:8px;background:#ce3326;color:white;font:700 11px/1 Onest,sans-serif;transform:translate(-50%,-50%);box-shadow:0 1px 5px #17181630;cursor:pointer}
.is-enhanced .af-field-pin{display:block}.af-field-pin.is-active{background:#a7241b;box-shadow:0 0 0 3px #ec756c70}
.af-field-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.af-guide-dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#f5eddf;color:#171816;overflow:hidden;box-sizing:border-box}
.af-guide-dialog[open]{display:flex;flex-direction:column}.af-guide-dialog::backdrop{background:#171816b3}
.af-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 30px;border-bottom:1px solid #d4c9b8;background:#171816;color:white;flex-shrink:0}
.af-dialog-head small{font:9px/1.3 'Martian Mono',monospace;text-transform:uppercase;color:#ff9a84}.af-dialog-head h3{margin:6px 0 0;font:650 24px/1.1 Onest,sans-serif;letter-spacing:-.03em}.af-close-guide{border-color:#6e7169;background:transparent;color:white;white-space:nowrap}
.af-dialog-content{padding:0 28px;flex:1;min-height:0;overflow:hidden}.af-guide-dialog .af-guide-workspace{height:100%;display:flex;flex-direction:column}
.af-guide-dialog .af-workspace-controls{flex-shrink:0;padding:0 8px 12px}.af-guide-dialog .af-reader-tabs{margin-top:14px;max-width:none}.af-guide-dialog .af-reader-panel{flex:1;min-height:0;overflow:hidden}.af-guide-dialog .af-stage-viewport{height:100%;box-sizing:border-box;padding-top:18px}
.af-guide-dialog .af-reader-source{flex-shrink:0;margin:0!important;padding:10px 8px;font-size:10px;line-height:1.4;border-top:1px solid #ddd1bf}
.af-guide-dialog .af-dialog-head{padding-top:12px;padding-bottom:12px}.af-guide-dialog .af-reader-tabs{margin-top:10px;margin-bottom:10px}.af-guide-dialog .af-reader-tabs button{padding:10px 14px}.af-guide-dialog .af-open-guide{display:none}
.af-mobile-detail{display:none}
@media(min-width:1700px){.af-callout strong{font-size:18px}.af-callout-text{font-size:15px}}
@media(max-width:800px){
 .af-reader{padding:16px}.af-document-stage{display:block}.af-callouts{margin-top:18px;height:auto!important;max-width:calc(var(--af-base-width,350px) - 4px)}
 .is-enhanced .af-callout{position:relative!important;top:auto!important;display:none}.is-enhanced .af-callout.is-active{display:block}.af-callout{padding:16px 14px 16px 63px}.af-callout strong{font-size:16px}.af-callout-text{font-size:14px}.af-callout-example{font-size:13px}
 .af-reader-tabs{gap:4px}.af-reader-tabs button{padding:11px 8px;font-size:12px}.af-reader-tabs button span{font-size:9px}
 .af-guide-toolbar{gap:10px}.af-guide-toolbar .af-open-guide{font-size:11px;padding:12px 14px}.af-zoom-controls button{padding:9px 12px;font-size:12px}.af-zoom-controls button[data-guide-zoom="in"],.af-zoom-controls button[data-guide-zoom="out"]{padding:3px 12px}.af-zoom-value{min-width:44px}
 .af-guide-hint{font-size:11px}.af-field-pin{min-width:34px;height:32px}.af-stage-viewport{padding-top:15px}.af-dialog-head{padding:13px 14px;gap:10px}.af-dialog-head h3{font-size:18px}.af-dialog-head small{font-size:7px}.af-close-guide{font-size:11px;padding:10px 12px}.af-dialog-content{padding:0 10px}.af-guide-dialog .af-workspace-controls{padding-left:0;padding-right:0}.af-guide-dialog .af-reader-source{font-size:9px}
 .af-guide-dialog .af-callouts{display:none}.af-guide-dialog .af-mobile-detail{display:block;flex-shrink:0;max-height:27dvh;overflow:auto;border:1px solid #ce3326;border-radius:14px;padding:12px 14px;margin:8px 0;background:#fff7f2}.af-mobile-detail strong{display:block;color:#b92d23;font:700 16px/1.2 Onest,sans-serif}.af-mobile-detail .af-callout-text{font-size:13px;margin-top:6px}.af-mobile-detail .af-callout-example{font-size:12px;margin-top:6px;padding-top:6px}
}