/* "Why the roof of your mouth can sting" (Pizza burn), owner-approved and locked 2026-10-29 (Codex pizza-burn v002). The locked style.css, every
   rule scoped to .dio-pizza-burn with values unchanged. The header band masks the site's own assets/arch-tile.svg (same tile, cd8e28f9...),
   reached from this stylesheet's folder. Dropped: @font-face (the site's fonts.css supplies Nunito Sans), :root/body/main page rules, the private
   controls and button styles. The 600 px and 350 px breakpoints follow the component's width (container queries). The last block keeps the
   answer page's own body, heading and figcaption rules out of the widget. */
.dio-pizza-burn{--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-pizza-burn *{box-sizing:border-box}.dio-pizza-burn figure{margin:0}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-pizza-burn .pizza-burn-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-pizza-burn .pz-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}
/* resting state is the end frame: steel lines, the orange crest already past */
.dio-pizza-burn .pz-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-pizza-burn .pizza-burn.is-playing .pz-header-art>i{animation:pizza-burn-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes pizza-burn-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-pizza-burn .pizza-burn{background:#f5f7f7}.dio-pizza-burn .pizza-burn-header{overflow:hidden}.dio-pizza-burn .pizza-burn-header h3{position:relative;margin:0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-pizza-burn .pz-body{padding:26px 28px 24px}.dio-pizza-burn .pz-orientation{font-size:14px;line-height:1.5;font-weight:400;color:#536f80;margin:0 0 18px}.dio-pizza-burn .pz-focus-label{margin:0 auto 8px;text-align:center}.dio-pizza-burn .pz-focus-label h4{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.012em;margin:0 0 4px}.dio-pizza-burn .pz-focus-label h4::before{content:'';display:inline-block;width:9px;height:9px;margin-right:9px;vertical-align:2px;border-radius:50%;background:transparent;border:1.5px solid #cf8146}.dio-pizza-burn .pz-focus-label p{font-size:15px;line-height:1.5;font-weight:400;color:#536b79;margin:0}
.dio-pizza-burn .pz-anatomy{width:100%;max-width:490px;height:auto;display:block;margin:0 auto}.dio-pizza-burn .pz-other-label{display:flex;align-items:center;justify-content:center;gap:10px;max-width:420px;font-size:16px;line-height:1.5;font-weight:500;text-align:center;margin:12px auto 6px}
.dio-pizza-burn .pz-explanation{padding:22px 28px 25px;background:#eaf0f3;border-top:1px solid #d5e0e6}.dio-pizza-burn .pz-explanation h4{font-size:19px;line-height:1.4;font-weight:500;letter-spacing:-.012em;margin:0 0 8px}.dio-pizza-burn .pz-explanation p{font-size:16px;font-weight:400;line-height:1.55;margin:0}
.dio-pizza-burn .pz-caption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}.dio-pizza-burn .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-pizza-burn .pizza-burn.is-playing .pz-focus-label,.dio-pizza-burn .pizza-burn.is-playing .pn-focus-ring{animation:pz-appear .7s ease .35s both}.dio-pizza-burn .pizza-burn.is-playing .pz-other-label{animation:pz-appear .8s ease 1.5s both}.dio-pizza-burn .pizza-burn.is-playing .pz-explanation{animation:pz-appear .7s ease 2.6s both}@keyframes pz-appear{from{opacity:0}to{opacity:1}}.dio-pizza-burn .pizza-burn.is-paused *{animation-play-state:paused!important}
@container (max-width:600px){.dio-pizza-burn .pizza-burn-header h3{font-size:23px}.dio-pizza-burn .pz-body{padding:23px 20px 24px}.dio-pizza-burn .pz-focus-label h4{font-size:19px}.dio-pizza-burn .pz-orientation{margin-bottom:19px}.dio-pizza-burn .pz-explanation{padding:21px 20px 23px}.dio-pizza-burn .pz-explanation h4{font-size:18px}.dio-pizza-burn .pz-caption{padding-inline:4px}}
@container (max-width:350px){.dio-pizza-burn .pizza-burn-header{padding-inline:20px}.dio-pizza-burn .pz-body{padding-inline:16px}.dio-pizza-burn .pz-orientation{font-size:13px}.dio-pizza-burn .pz-focus-label h4{font-size:18px}.dio-pizza-burn .pz-focus-label p{font-size:14px}.dio-pizza-burn .pz-other-label{font-size:15px;gap:8px}.dio-pizza-burn .pz-explanation{padding-inline:16px}}
html:is(.reduce-motion,.dio-alive-off) .dio-pizza-burn .pizza-burn *{animation:none!important}.dio-pizza-burn .pizza-burn:not(.is-playing) .pz-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-pizza-burn .pizza-burn *{animation:none!important}.dio-pizza-burn .pz-header-art>i{background-position:0 0!important}}
@media print{.dio-pizza-burn .pizza-burn *{animation:none!important}}
/* site guards: the answer body's section.part p/li rules, heading styles and .ans-anim figcaption must not reach into the widget */
.dio-pizza-burn :is(h3,h4){font-family:var(--font);color:var(--ink);text-transform:none}
.dio-pizza-burn .pizza-burn p{max-width:none}.dio-pizza-burn .pz-body p.pz-orientation{color:#536f80}.dio-pizza-burn .pz-focus-label p{color:#536b79}.dio-pizza-burn .pz-other-label,.dio-pizza-burn .pz-explanation p{color:var(--ink)}
.dio-pizza-burn figure figcaption.pz-caption{margin:0;border:0;background:none;font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}
@container (max-width:600px){.dio-pizza-burn figure figcaption.pz-caption{padding-inline:4px}}
.dio-pizza-burn svg.pz-anatomy{max-width:490px}
/* 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-pizza-burn .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-pizza-burn .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-pizza-burn .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-pizza-burn .controls button:hover{background:#f1f5f6}.dio-pizza-burn .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-pizza-burn .controls button[aria-pressed=true]{background:#e6edf0}.dio-pizza-burn .controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-pizza-burn .controls{display:none!important}}