/* "From six, to five, to four" (six-five-four v002), owner-approved and locked 2026-10-28 (Daniel; Codex six-five-four v002: exactly 6/5/4 solid
   spots, no dashed extras, one quiet note inside the diagram field). Site placement of the locked style.css: every rule scoped to .dio-six-five-four,
   values unchanged. Dropped: @font-face (site fonts.css), :root/body/main rules, the review-only Replay/Still controls and button styles. The h1/h2
   rules style the h3/h4 the site uses. The two page media rules became container rules on the component width (the locked main padded the
   figure by 12 px a side under 600 px, so 600/350 px pages = 576/326 px components). The arch band masks with the site's own
   assets/arch-tile.svg; one 4.4 s pass after .2 s, ending 0 0. Keyframes renamed sfw- so no other page rule can collide. */
.dio-six-five-four{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--ink:#203846;--steel:#4c7288;font-family:var(--font);color:var(--ink);font-synthesis:none;container-type:inline-size}
.dio-six-five-four *{box-sizing:border-box}
.dio-six-five-four .six-five-four-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-six-five-four .header-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  -webkit-mask-size:179.4px 179.4px,100% 100%;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}

.dio-six-five-four .header-art>i{position:absolute;inset:0;background:linear-gradient(115deg,rgba(76,114,136,.20) 0%,rgba(76,114,136,.20) 30%,rgba(76,114,136,.34) 40%,rgba(237,135,60,.55) 47%,rgba(76,114,136,.30) 54%,rgba(76,114,136,.20) 64%,rgba(76,114,136,.20) 100%);background-size:300% 100%;background-position:0 0}
.dio-six-five-four .six-five-four.is-playing .header-art>i{animation:sfw-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes sfw-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-six-five-four .sfw-figure{margin:0}.dio-six-five-four .six-five-four{background:#f5f7f7}.dio-six-five-four .six-five-four-header{overflow:hidden}.dio-six-five-four .six-five-four-header h3{position:relative;font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0}.dio-six-five-four .diagram{padding:26px 28px 27px}.dio-six-five-four .time-label{font-size:16px;line-height:1.5;font-weight:500;color:var(--steel);margin:0 0 19px}.dio-six-five-four .evolution{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);gap:10px;align-items:start}.dio-six-five-four .stage{text-align:center;min-width:0}.dio-six-five-four .arch-diagram{display:block;width:100%;height:auto;overflow:visible}.dio-six-five-four .stage h4{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:12px 0 0}.dio-six-five-four .count-qualifier{font-size:15px;line-height:1.4;font-weight:400;color:#506875;margin:4px -4px 0}.dio-six-five-four .step-arrow{display:block;width:22px;height:24px;align-self:start;margin-top:52px;color:#68869a}.dio-six-five-four figcaption{font-size:12px;line-height:1.5;font-weight:400;color:#536b79;text-align:center;padding:16px 10px 0}.dio-six-five-four .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-six-five-four .six-five-four.is-playing .stage{animation:sfw-arrive .7s cubic-bezier(.22,.7,.25,1) .1s both}.dio-six-five-four .six-five-four.is-playing .stage-five{animation-delay:.9s}.dio-six-five-four .six-five-four.is-playing .stage-four{animation-delay:1.7s}.dio-six-five-four .six-five-four.is-playing .step-arrow{animation:sfw-fade .8s ease .7s both}.dio-six-five-four .six-five-four.is-playing .step-arrow:nth-of-type(2){animation-delay:1.5s}.dio-six-five-four .six-five-four.is-playing .diagram-note{animation:sfw-fade .7s ease 2.6s both}@keyframes sfw-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes sfw-fade{from{opacity:0}to{opacity:1}}.dio-six-five-four .six-five-four.is-paused *{animation-play-state:paused!important}
@container(max-width:576px){.dio-six-five-four .six-five-four-header h3{font-size:23px}.dio-six-five-four .diagram{padding:24px 20px}.dio-six-five-four .time-label{font-size:15px;margin-bottom:18px}.dio-six-five-four .evolution{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);gap:6px}.dio-six-five-four .step-arrow{width:16px;height:20px;margin-top:28px}.dio-six-five-four .stage h4{font-size:18px;margin-top:10px}.dio-six-five-four .count-qualifier{font-size:14px;line-height:1.35}}
@container(max-width:326px){.dio-six-five-four .six-five-four-header{padding-inline:20px}.dio-six-five-four .diagram{padding-inline:16px}.dio-six-five-four .step-arrow{margin-top:20px}.dio-six-five-four .count-qualifier{margin-inline:-4px}}
html.reduce-motion .dio-six-five-four .six-five-four *,html.dio-alive-off .dio-six-five-four .six-five-four *{animation:none!important}.dio-six-five-four .six-five-four:not(.is-playing) .header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-six-five-four .six-five-four *{animation:none!important}.dio-six-five-four .header-art>i{background-position:0 0!important}}
@media print{.dio-six-five-four .six-five-four *{animation:none!important}}

.dio-six-five-four .diagram-note{margin:24px 0 0;font-size:16px;line-height:1.5;font-weight:500;text-align:center;color:#506875}
@container(max-width:576px){.dio-six-five-four .diagram-note{margin-top:22px;font-size:15px}}

/* site guards: answer-body rules (section.part p/li, .ans-anim figcaption, h3/h4) must not reach in; values as locked */
.dio-six-five-four .six-five-four-header h3,.dio-six-five-four .stage h4{font-family:inherit;color:var(--ink);text-transform:none;padding:0}
.dio-six-five-four p{max-width:none}
.dio-six-five-four .sfw-figure figcaption{background:none}
.dio-six-five-four svg{max-width:none}
.dio-six-five-four .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* approved size (2026-11-03): GPT's locked page showed this figure at most 640 px wide; its drawing scales with width, so the wide answer column caps it there, centred */
.dio-six-five-four{max-width:640px;margin-inline:auto}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z).
   Same look as the where-bar and plan-b controls: one row above the figure, right side, wrapping on narrow widths; real buttons at least 44 px
   tall with a visible focus ring; hidden in print. Every rule is scoped to this widget. */
.dio-six-five-four .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-six-five-four .controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-six-five-four .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;cursor:pointer}
.dio-six-five-four .controls button:hover{background:#f1f5f6}.dio-six-five-four .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-six-five-four .controls button[aria-pressed=true]{background:#e6edf0}.dio-six-five-four .controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-six-five-four .controls{display:none!important}}