/* Siri Flow. All interaction is native HTML plus CSS; no external visual assets. */
/* Colors follow MacStories: white page / #333 text in light, #202020 page / #bababa text in dark. */
/* @tokens light */
.sf {
 --sf-ink:#1d1d1f; --sf-text:#333; --sf-mute:#6e6e73; --sf-bg:#fff; --sf-soft:#f2f2f4; --sf-hover:#f7f7f8; --sf-line:#e4e4e7; --sf-code:#f2f2f2;
 --sf-accent:#b00a0f; --sf-seg-on:#fff; --sf-seg-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04); --sf-card-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 30px rgba(0,0,0,.05);
 --sf-ring-shadow:0 10px 30px rgba(40,50,70,.16),inset 0 1px 1px rgba(255,255,255,.85); --sf-ring-on:rgba(29,29,31,.45); --sf-ring-ink:#2c2c2e;
 --sf-conic:conic-gradient(from 0deg,#dad7e7 0deg,#c8d4ee 85deg,#c3e2e0 145deg,#e5e1c6 200deg,#ebd1cf 255deg,#e0d3e7 320deg,#dad7e7 360deg); --sf-tint:255,255,255; --sf-t2:.42; --sf-t1:.66; --sf-t0:.88;
 --sf-mark-on:#1d1d1f; --sf-mark-off:#dcdce1;
}
/* @end */
/* @tokens dark */
.theme-dark .sf {
 --sf-ink:#f2f2f2; --sf-text:#c9c9cb; --sf-mute:#8e8e93; --sf-bg:#171717; --sf-soft:#262628; --sf-hover:#202022; --sf-line:#333336; --sf-code:#2a2a2c;
 --sf-accent:#53c8f0; --sf-seg-on:#454549; --sf-seg-shadow:0 1px 3px rgba(0,0,0,.5); --sf-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
 --sf-ring-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.12); --sf-ring-on:rgba(242,242,242,.6); --sf-ring-ink:#ececf0;
 --sf-conic:conic-gradient(from 0deg,#43405a 0deg,#384868 85deg,#325454 145deg,#55503a 200deg,#584044 255deg,#4b4058 320deg,#43405a 360deg); --sf-tint:255,255,255; --sf-t2:.07; --sf-t1:.14; --sf-t0:.22;
 --sf-mark-on:#f2f2f2; --sf-mark-off:#3c3c41;
}
/* @end */
@media (prefers-color-scheme:dark) {
 .sf:not(.theme-light .sf) {
 --sf-ink:#f2f2f2; --sf-text:#c9c9cb; --sf-mute:#8e8e93; --sf-bg:#171717; --sf-soft:#262628; --sf-hover:#202022; --sf-line:#333336; --sf-code:#2a2a2c;
 --sf-accent:#53c8f0; --sf-seg-on:#454549; --sf-seg-shadow:0 1px 3px rgba(0,0,0,.5); --sf-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
 --sf-ring-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.12); --sf-ring-on:rgba(242,242,242,.6); --sf-ring-ink:#ececf0;
 --sf-conic:conic-gradient(from 0deg,#43405a 0deg,#384868 85deg,#325454 145deg,#55503a 200deg,#584044 255deg,#4b4058 320deg,#43405a 360deg); --sf-tint:255,255,255; --sf-t2:.07; --sf-t1:.14; --sf-t0:.22;
 --sf-mark-on:#f2f2f2; --sf-mark-off:#3c3c41;
 }
}
.sf { --sf-sans:system-ui,-apple-system,"Helvetica Neue",Helvetica,sans-serif; --sf-mono:ui-monospace,"SF Mono",Menlo,monospace; --sf-orb:radial-gradient(ellipse at 25% 90%,#f7ba83,transparent 46%),radial-gradient(ellipse at 92% 75%,#56cdc3,transparent 55%),radial-gradient(ellipse at 10% 20%,#bb79d8,transparent 60%),#466685;
 display:block; position:relative; container-type:inline-size; container-name:sf; box-sizing:border-box; width:100%; max-width:100%; margin:2rem 0; padding:0; border:1px solid var(--sf-line); border-radius:18px; background:var(--sf-bg); box-shadow:var(--sf-card-shadow); color:var(--sf-text); font:400 15px/1.5 var(--sf-sans); text-align:left; text-transform:none; letter-spacing:0; font-style:normal; overflow:visible; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
/* Reset only this figure so even aggressive article styles cannot leak into it. */
.sf :is(div,span,header,section,article,ol,li,label,input,h2,h3,p,details,summary,figcaption,strong) { box-sizing:border-box; margin:0; padding:0; border:0; min-width:0; color:inherit; background:transparent; font-family:inherit; font-size:inherit; font-style:normal; font-weight:inherit; line-height:inherit; text-align:inherit; letter-spacing:inherit; text-transform:none; text-indent:0; overflow:visible; box-shadow:none; }
.sf :is(ol,li) { list-style:none; }
.sf .sf-radio { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; clip-path:inset(50%); }
.sf .sf-radio:focus-visible + label,.sf .sf-s:focus-visible { outline:2px solid var(--sf-accent); outline-offset:2px; }
.sf .sf-s:focus-visible { border-radius:6px; }

/* Type */
.sf .sf-title { font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.01em; color:var(--sf-ink); text-wrap:balance; }
.sf .sf-lede { margin-top:8px; font-size:15px; line-height:1.5; color:var(--sf-text); text-wrap:pretty; }
.sf .sf-body { font-size:14px; line-height:1.55; color:var(--sf-text); overflow-wrap:anywhere; text-wrap:pretty; }
.sf .sf-body + .sf-body { margin-top:10px; }
.sf .sf-fine { display:block; color:var(--sf-mute); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.sf .sf-n { font-weight:600; }

/* Sections */
.sf .sf-head { padding:26px 24px 6px; }
.sf .sf-layers { padding:14px 24px 10px; }
.sf .sf-requests { margin-top:18px; padding:26px 24px 6px; border-top:1px solid var(--sf-line); }
.sf .sf-about { margin:10px 24px 0; padding-top:10px; border-top:1px solid var(--sf-line); }
.sf .sf-about .sf-d-body { padding:2px 0 10px; }
.sf .sf-cap { display:block; padding:12px 24px 20px; color:var(--sf-mute); font-size:12px; line-height:1.5; font-style:normal; text-align:left; }

.sf .sf-evidence-note { margin:0 0 12px; }

/* The rings, in the proportions of Apple's diagram. The map is its own container, so lettering scales with it. */
.sf .sf-map { position:relative; width:min(calc(100% + 16px),400px); aspect-ratio:1; margin:6px 0 26px calc((100% - min(100% + 16px,400px)) / 2); isolation:isolate; container-type:inline-size; }
.sf .sf-ring { display:block; position:absolute; border-radius:50%; cursor:pointer; box-shadow:var(--sf-ring-shadow); color:var(--sf-ring-ink); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease; }
.sf .sf-ring-3 { inset:0; background:var(--sf-conic); }
.sf .sf-ring-2 { inset:11%; background:linear-gradient(rgba(var(--sf-tint),var(--sf-t2)),rgba(var(--sf-tint),var(--sf-t2))),var(--sf-conic); }
.sf .sf-ring-1 { inset:21%; background:linear-gradient(rgba(var(--sf-tint),var(--sf-t1)),rgba(var(--sf-tint),var(--sf-t1))),var(--sf-conic); }
.sf .sf-ring-0 { inset:32%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5%; background:linear-gradient(rgba(var(--sf-tint),var(--sf-t0)),rgba(var(--sf-tint),var(--sf-t0))),var(--sf-conic); }
.sf .sf-ring:hover { transform:translateY(-2px); }
.sf .sf-layers:has(.sf-layer-radio[value="3"]:checked) .sf-ring-3,.sf .sf-layers:has(.sf-layer-radio[value="2"]:checked) .sf-ring-2,.sf .sf-layers:has(.sf-layer-radio[value="1"]:checked) .sf-ring-1,.sf .sf-layers:has(.sf-layer-radio[value="0"]:checked) .sf-ring-0 { box-shadow:var(--sf-ring-shadow),0 0 0 2px var(--sf-bg),0 0 0 4px var(--sf-ring-on); filter:saturate(1.25); }
.sf .sf-arc { position:absolute; inset:0; pointer-events:none; overflow:clip; border-radius:50%; }
.sf .sf-letter { position:absolute; inset:0; transform:rotate(var(--a)); }
.sf .sf-letter-glyph { position:absolute; left:50%; transform:translateX(-50%); font-size:2.65cqw; line-height:1; font-weight:500; }
.sf .sf-arc-flip .sf-letter-glyph { transform:translateX(-50%) rotate(180deg); font-weight:650; color:var(--sf-ink); }
.sf .sf-ico { position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:4cqw; height:4cqw; font-size:3.4cqw; line-height:1; color:var(--sf-ring-ink); transform:translate(-50%,-50%) rotate(var(--a)) translateY(-23.5cqw) rotate(calc(-1 * var(--a))); pointer-events:none; }
.sf .sf-ico-voice { gap:.13em; }
.sf .sf-ico-voice > span { display:block; width:.14em; height:.42em; border-radius:.1em; background:currentColor; }
.sf .sf-ico-voice > span:nth-child(2),.sf .sf-ico-voice > span:nth-child(4) { height:.72em; }
.sf .sf-ico-voice > span:nth-child(3) { height:1em; }
.sf .sf-ico-image::before { content:""; display:block; width:1.1em; height:.92em; border:.11em solid currentColor; border-radius:.22em; }
.sf .sf-ico-image > span { position:absolute; left:.33em; top:.35em; width:.2em; height:.2em; border-radius:50%; background:currentColor; }
.sf .sf-ico-image::after { content:""; position:absolute; left:.25em; right:.25em; bottom:.3em; height:.34em; background:currentColor; clip-path:polygon(0 100%,36% 12%,57% 58%,72% 38%,100% 100%); }
.sf .sf-ico-text { flex-direction:column; align-items:flex-start; gap:.2em; }
.sf .sf-ico-text > span { display:block; width:1.1em; height:.12em; border-radius:.06em; background:currentColor; }
.sf .sf-ico-text > span:nth-child(2) { width:.72em; }
.sf .sf-ico-text > span:nth-child(3) { width:.94em; }
.sf .sf-ring-3 .sf-letter-glyph { top:4.15%; }
.sf .sf-ring-2 .sf-letter-glyph { top:4.7%; }
.sf .sf-ring-1 .sf-letter-glyph { top:7.15%; }
.sf .sf-orb { position:relative; display:block; width:40%; aspect-ratio:1; overflow:hidden; border-radius:50%; background:var(--sf-orb); box-shadow:inset 0 1px 5px rgba(255,255,255,.4),0 3px 12px rgba(80,105,139,.18); }
.sf .sf-person-head { position:absolute; width:32%; height:35%; left:34%; top:17%; background:#f5f7f7; border-radius:50%; }
.sf .sf-person-body { position:absolute; width:70%; height:47%; left:15%; bottom:-14%; background:#f5f7f7; border-radius:50% 50% 0 0; }
.sf .sf-you { font-size:5.6cqw; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--sf-ink); }

/* Ring marks: a 16px set of rings with one band filled. Used by the legend and the timeline. */
.sf .sf-mark { display:block; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle closest-side,var(--sf-mark-off) 0 100%,transparent 100%); }
.sf .sf-mark-0 { background:radial-gradient(circle closest-side,var(--sf-mark-on) 0 36%,var(--sf-mark-off) 36% 100%,transparent 100%); }
.sf .sf-mark-1 { background:radial-gradient(circle closest-side,var(--sf-mark-off) 0 36%,var(--sf-mark-on) 36% 58%,var(--sf-mark-off) 58% 100%,transparent 100%); }
.sf .sf-mark-2 { background:radial-gradient(circle closest-side,var(--sf-mark-off) 0 58%,var(--sf-mark-on) 58% 80%,var(--sf-mark-off) 80% 100%,transparent 100%); }
.sf .sf-mark-3 { background:radial-gradient(circle closest-side,var(--sf-mark-off) 0 80%,var(--sf-mark-on) 80% 100%,transparent 100%); }

/* The legend is the layer control: a list, not a row of buttons. */
.sf .sf-legend { display:flex; flex-direction:column; gap:2px; }
.sf .sf-layer { display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:12px; align-items:start; align-content:start; padding:11px 14px; border-radius:12px; cursor:pointer; transition:background .2s ease; }
.sf .sf-layer:hover { background:var(--sf-hover); }
.sf .sf-layer > .sf-mark { margin-top:3px; }
.sf .sf-layer-name { font-size:15px; font-weight:600; line-height:1.45; color:var(--sf-ink); }
.sf .sf-layer-text { grid-column:2; margin-top:1px; font-size:14px; line-height:1.5; color:var(--sf-mute); text-wrap:pretty; }
.sf .sf-layer-radio:checked + .sf-layer { background:var(--sf-soft); }
.sf .sf-layer-radio:checked + .sf-layer .sf-layer-text { color:var(--sf-text); }

/* Segmented control for the five requests. */
.sf .sf-seg { display:flex; flex-wrap:wrap; gap:2px; margin-top:18px; padding:3px; border-radius:11px; background:var(--sf-soft); }
.sf .sf-seg-item { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:38px; padding:6px 10px; border-radius:8px; font-size:13px; font-weight:500; line-height:1.2; white-space:nowrap; color:var(--sf-text); cursor:pointer; transition:background .2s ease,color .2s ease; }
.sf .sf-seg-item:hover { color:var(--sf-ink); }
.sf .sf-example-radio:checked + .sf-seg-item { background:var(--sf-seg-on); box-shadow:var(--sf-seg-shadow); color:var(--sf-ink); font-weight:600; }
.sf .sf-example { display:none; }
.sf:has(.sf-example-radio[value="0"]:checked) .sf-example[data-example="0"],.sf:has(.sf-example-radio[value="1"]:checked) .sf-example[data-example="1"],.sf:has(.sf-example-radio[value="2"]:checked) .sf-example[data-example="2"],.sf:has(.sf-example-radio[value="3"]:checked) .sf-example[data-example="3"],.sf:has(.sf-example-radio[value="4"]:checked) .sf-example[data-example="4"] { display:block; animation:sf-reveal .3s ease both; }

/* One request: header, then a timeline the reader scrolls instead of clicking through. */
.sf .sf-req { padding:24px 0 4px; }
.sf .sf-req-meta { font-size:12px; line-height:1.5; color:var(--sf-mute); }
.sf .sf-req-text { margin:6px 0 10px; font-size:21px; line-height:1.3; font-weight:600; letter-spacing:-.01em; color:var(--sf-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.sf .sf-req-sum { font-size:15px; line-height:1.55; color:var(--sf-text); text-wrap:pretty; }
.sf .sf-req-facts { display:flex; flex-wrap:wrap; gap:2px 7px; margin-top:10px; font-size:12px; line-height:1.5; color:var(--sf-mute); }
.sf .sf-flow { margin:20px 0 0; }
.sf .sf-ev { position:relative; display:grid; grid-template-columns:46px 16px minmax(0,1fr); column-gap:10px; padding-bottom:22px; }
.sf .sf-ev::before { content:""; position:absolute; left:calc(46px + 10px + 7.5px); top:20px; bottom:0; width:1px; background:var(--sf-line); }
.sf .sf-ev:last-child::before { display:none; }
.sf .sf-ev:last-child { padding-bottom:10px; }
.sf .sf-ev-time { padding-top:3px; font-size:12px; line-height:1.5; text-align:right; white-space:nowrap; color:var(--sf-mute); }
.sf .sf-ev-dot { margin-top:3px; box-shadow:0 0 0 3px var(--sf-bg); }
.sf .sf-ev-who { display:block; font-size:12px; line-height:1.5; font-weight:600; color:var(--sf-mute); }
.sf .sf-ev-title { margin:1px 0 4px; font-size:15px; line-height:1.45; font-weight:600; color:var(--sf-ink); overflow-wrap:anywhere; text-wrap:pretty; }
.sf .sf-ev-you .sf-ev-title,.sf .sf-ev-reply .sf-ev-title { font-weight:400; }
.sf .sf-ev-text { font-size:14px; line-height:1.5; color:var(--sf-text); overflow-wrap:anywhere; text-wrap:pretty; }
.sf .sf-ev-text + .sf-ev-text { margin-top:4px; }

/* Disclosures. A chevron drawn in CSS replaces the browser marker. */
.sf .sf-d { display:block; margin-top:4px; }
.sf .sf-s { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:4px 0; cursor:pointer; list-style:none; font-size:13px; line-height:1.4; font-weight:500; color:var(--sf-mute); -webkit-tap-highlight-color:transparent; }
.sf .sf-s::-webkit-details-marker { display:none; }
.sf .sf-s::before { content:""; flex:none; width:6px; height:6px; margin:0 2px 0 1px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(-45deg); transition:transform .2s ease; }
.sf .sf-d[open] > .sf-s::before { transform:translateY(-2px) rotate(45deg); }
.sf .sf-d[open] > .sf-s,.sf .sf-s:hover { color:var(--sf-ink); }
.sf .sf-d-body { padding:2px 0 6px; }
.sf .sf-inspect { margin-top:2px; }
.sf .sf-inspect .sf-d-body { padding-bottom:0; }

/* Evidence for one model call. Plain labeled rows; nothing here needs to be read to follow the story. */
.sf .sf-hop { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.sf .sf-hop-t { padding:4px 0 10px; font-size:12px; color:var(--sf-mute); }
.sf .sf-row { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:10px 0; border-top:1px solid var(--sf-line); }
.sf .sf-k { display:block; font-size:12px; font-weight:600; color:var(--sf-mute); }
.sf .sf-i { display:block; }
.sf .sf-tool { font:500 12.5px/1.5 var(--sf-mono); overflow-wrap:anywhere; }
.sf .sf-note,.sf .sf-txt { margin:5px 0; font-size:12.5px; color:var(--sf-mute); }
.sf .sf-pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0 8px; padding:10px 12px; border-radius:8px; background:var(--sf-code); font:400 12px/1.55 var(--sf-mono); color:var(--sf-text); }
.sf .sf-big { font-size:14px; }
.sf .sf-bar-w { height:6px; margin:8px 0 6px; border-radius:3px; background:var(--sf-soft); overflow:hidden; }
.sf .sf-bar { display:flex; width:calc(var(--t) / 200000 * 100%); height:100%; }
.sf .sf-seg-dev,.sf .sf-seg-usr,.sf .sf-seg-tx,.sf .sf-seg-oth { display:block; width:calc(var(--c) / var(--t) * 100%); height:100%; }
.sf .sf-seg-dev { background:#9b8fd6; }
.sf .sf-seg-usr { background:#d98bb5; }
.sf .sf-seg-tx { background:#6fb8b0; }
.sf .sf-seg-oth { background:#c4c4c9; }
.sf .sf-bar-l { display:flex; flex-wrap:wrap; gap:2px 12px; margin-bottom:6px; font-size:12px; color:var(--sf-mute); }
.sf .sf-l-dev::before,.sf .sf-l-usr::before,.sf .sf-l-tx::before,.sf .sf-l-oth::before { content:""; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:2px; vertical-align:0; background:#9b8fd6; }
.sf .sf-l-usr::before { background:#d98bb5; }
.sf .sf-l-tx::before { background:#6fb8b0; }
.sf .sf-l-oth::before { background:#c4c4c9; }
.sf .sf-secs { padding-top:4px; }
.sf .sf-sec { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:5px 0; font-size:12px; border-top:1px solid var(--sf-line); }
.sf .sf-sec-g { color:var(--sf-mute); }
.sf .sf-sec-c { color:var(--sf-mute); }
.sf .sf-sec-b { grid-column:1 / -1; display:block; height:3px; width:calc(var(--c) / var(--d) * 100%); border-radius:2px; background:#9b8fd6; }
.sf .sf-call { display:flex; flex-wrap:wrap; gap:4px 10px; margin-bottom:4px; }
.sf .sf-arg { color:var(--sf-mute); }
.sf .sf-ans { margin:2px 0 6px; color:var(--sf-text); }
.sf .sf-src { display:flex; flex-wrap:wrap; gap:2px 10px; margin:6px 0; font-size:12px; color:var(--sf-mute); }
.sf .sf-tag { display:inline-block; margin-right:6px; padding:1px 6px; border-radius:4px; background:var(--sf-soft); font-size:11px; color:var(--sf-text); }
.sf .sf-exp { font-size:12.5px; color:var(--sf-mute); }
.sf .sf-song { display:flex; gap:10px; padding:4px 0; font-size:12.5px; }
.sf .sf-song-n { min-width:18px; color:var(--sf-mute); }
.sf .sf-blur { display:inline-block; filter:blur(3px); opacity:.65; pointer-events:none; user-select:none; -webkit-user-select:none; }
@keyframes sf-reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Wide enough for the rings and their legend side by side (the MacStories column is about 700px). */
@container sf (min-width:620px) {
 .sf .sf-head { padding:32px 32px 6px; }
 .sf .sf-layers { padding:22px 32px 14px; }
 .sf .sf-map { width:min(100%,480px); margin:6px auto 34px; }
 .sf .sf-legend { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
 .sf .sf-requests { padding:28px 32px 6px; }
 .sf .sf-about { margin-left:32px; margin-right:32px; }
 .sf .sf-cap { padding-left:32px; padding-right:32px; }
 .sf .sf-seg-item { min-height:34px; }
 .sf .sf-row { grid-template-columns:150px minmax(0,1fr); gap:10px; }
 .sf .sf-k { padding-top:1px; }
}
@container sf (max-width:359px) {
 .sf .sf-head { padding:22px 16px 4px; }
 .sf .sf-layers { padding:12px 16px 8px; }
 .sf .sf-requests { padding:22px 16px 4px; }
 .sf .sf-about { margin-left:16px; margin-right:16px; }
 .sf .sf-cap { padding-left:16px; padding-right:16px; }
 .sf .sf-layer { padding:10px 10px; }
 .sf .sf-seg-item { padding:6px 6px; font-size:12px; }
 .sf .sf-req-text { font-size:19px; }
 .sf .sf-ev { grid-template-columns:38px 16px minmax(0,1fr); column-gap:8px; }
 .sf .sf-ev::before { left:calc(38px + 8px + 7.5px); }
 .sf .sf-ev-time { font-size:11px; }
 .sf .sf-letter-glyph { font-size:2.85cqw; }
}
@media (prefers-reduced-motion:reduce) {
 .sf .sf-example { animation:none !important; }
 .sf .sf-ring,.sf .sf-layer,.sf .sf-seg-item,.sf .sf-s::before { transition:none; }
 .sf .sf-ring:hover { transform:none; }
}