/* "Why a filling needs more numbing" (Numbing), owner-approved and locked 2026-10-29 (Daniel: "approved- send to lead for publish to claude
   and request next assignment"; Codex numbing-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-numbing,
   values unchanged. Dropped: @font-face (site fonts.css supplies Nunito Sans), :root/body/main resets and the private Replay/Still control styles.
   The h1/h2 rules style the h3/h4 the site uses; the header element is a div. The page breakpoints (560px, 350px screens with the review page's
   padding) became the component's own widths (536px, 326px) as container queries, since the drawing sits in the answer column. The arch band masks
   with the site's own assets/arch-tile.svg (resolved from this stylesheet's folder). */
.dio-numbing{font-family:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;font-synthesis:none;color:#203846;container-type:inline-size}
.dio-numbing *{box-sizing:border-box}.dio-numbing 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-numbing .numbing-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-numbing .nb-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-numbing .nb-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-numbing .numbing.is-playing .nb-header-art>i{animation:numbing-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes numbing-wave{from{background-position:100% 0}to{background-position:0 0}}

.dio-numbing .numbing{background:#f5f7f7}.dio-numbing .numbing-header{overflow:hidden}.dio-numbing .numbing-header h3{position:relative;margin:0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:#203846}
.dio-numbing .nb-comparison{display:grid;grid-template-columns:1fr 1fr;padding:25px 24px 26px;gap:0}.dio-numbing .nb-example{min-width:0;padding:0 18px}.dio-numbing .nb-example+.nb-example{border-left:1px solid #d5dfe3}.dio-numbing .nb-example h4{font-size:19px;line-height:1.35;font-weight:500;margin:0 0 10px;color:#203846}.dio-numbing .nb-example p{font-size:16px;line-height:1.5;font-weight:400;margin:13px 0 0;max-width:30ch}
.dio-numbing .nb-stage{position:relative;aspect-ratio:4/5;width:100%;max-width:340px;margin:auto;isolation:isolate;overflow:hidden}.dio-numbing .nb-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;border-radius:0}.dio-numbing .nb-bur{z-index:2}.dio-numbing .nb-tooth{z-index:1}.dio-numbing .nb-annotation{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}.dio-numbing .nb-leader{fill:none;stroke:#4c7288;stroke-width:1.3;vector-effect:non-scaling-stroke}.dio-numbing .nb-nerve-dot{fill:#b66f78;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}.dio-numbing .nb-focus{fill:none;stroke:#d78a50;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.9}
.dio-numbing .nb-nerve-label{position:absolute;z-index:4;top:34.9%;left:0;font-size:14px;line-height:1.3;font-weight:500;padding:3px 4px 3px 0;background:#f5f7f7;color:#4c7288}.dio-numbing .nb-lift-arrow{fill:none;stroke:#4c7288;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dio-numbing .nb-note{margin:0;padding:22px 28px 24px;border-top:1px solid #d4dfe5;background:#e8eff3;font-size:16px;line-height:1.55;font-weight:400}.dio-numbing .nb-note strong{font-weight:500}.dio-numbing .nb-caption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}.dio-numbing .nb-credits{margin:7px 0 0;text-align:center;font-size:11px;line-height:1.45;color:#667e8b}.dio-numbing .nb-credits a{color:inherit;text-underline-offset:2px}
.dio-numbing .nb-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-numbing .numbing.is-playing .nb-example.is-started .nb-bur{animation:nb-bur-arrive 1s cubic-bezier(.3,.7,.2,1) .25s both}.dio-numbing .numbing.is-playing .nb-example.is-started .nb-focus{animation:nb-focus-reveal .7s ease 1.1s both}.dio-numbing .numbing.is-playing .nb-example.is-started .nb-tooth{animation:nb-tooth-lift 2s cubic-bezier(.3,.7,.2,1) .25s both}.dio-numbing .numbing.is-playing .nb-example.is-started .nb-lift-arrow{animation:nb-appear .4s ease .6s both}/* 2026-11-11 watched review: the tooth now waits for the filling to finish (numbing.js), so its own lead-in is .25 s instead of 1.65 s; the lift itself is unchanged */
@keyframes nb-bur-arrive{from{transform:translate(3%,-4%);opacity:0}to{transform:none;opacity:1}}@keyframes nb-tooth-lift{from{transform:translate(var(--nb-return-x),var(--nb-return-y))}to{transform:translate(0,0)}}@keyframes nb-focus-reveal{from{opacity:0}to{opacity:.9}}@keyframes nb-appear{from{opacity:0}to{opacity:1}}.dio-numbing .numbing.is-paused *{animation-play-state:paused!important}
@container(max-width:536px){.dio-numbing .numbing-header h3{font-size:23px}.dio-numbing .nb-comparison{grid-template-columns:1fr;padding:24px 20px;gap:25px}.dio-numbing .nb-example{padding:0}.dio-numbing .nb-example+.nb-example{border-left:0;border-top:1px solid #d5dfe3;padding-top:24px}.dio-numbing .nb-stage{max-width:300px}.dio-numbing .nb-example h4{font-size:19px;margin-bottom:0}.dio-numbing .nb-example p{max-width:34ch;margin-top:10px}.dio-numbing .nb-note{padding:21px 20px 23px}.dio-numbing .nb-credits{font-size:11px}.dio-numbing .nb-caption{padding-inline:4px}}
@container(max-width:326px){.dio-numbing .numbing-header{padding-inline:20px}.dio-numbing .nb-comparison{padding-inline:16px}.dio-numbing .nb-nerve-label{font-size:13px}.dio-numbing .nb-note{padding-inline:16px}}
html.reduce-motion .dio-numbing .numbing *,html.dio-alive-off .dio-numbing .numbing *{animation:none!important}.dio-numbing .numbing:not(.is-playing) .nb-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-numbing .numbing *{animation:none!important}.dio-numbing .nb-header-art>i{background-position:0 0!important}}
@media print{.dio-numbing .numbing *{animation:none!important}}

/* On phones each comparison plays when its own model enters view. */
.dio-numbing .numbing.is-playing .nb-example:not(.is-started) .nb-tooth{transform:translate(var(--nb-return-x),var(--nb-return-y))}.dio-numbing .numbing.is-playing .nb-example:not(.is-started) .nb-bur,.dio-numbing .numbing.is-playing .nb-example:not(.is-started) .nb-focus,.dio-numbing .numbing.is-playing .nb-example:not(.is-started) .nb-lift-arrow{opacity:0}
html.reduce-motion .dio-numbing .nb-tooth,html.dio-alive-off .dio-numbing .nb-tooth{transform:none!important}html.reduce-motion .dio-numbing .nb-bur,html.reduce-motion .dio-numbing .nb-focus,html.reduce-motion .dio-numbing .nb-lift-arrow,html.dio-alive-off .dio-numbing .nb-bur,html.dio-alive-off .dio-numbing .nb-focus,html.dio-alive-off .dio-numbing .nb-lift-arrow{opacity:1!important}@media(prefers-reduced-motion:reduce){.dio-numbing .nb-tooth{transform:none!important}.dio-numbing .nb-bur,.dio-numbing .nb-focus,.dio-numbing .nb-lift-arrow{opacity:1!important}}

/* Native cavity-cut clip; default remains the complete final rendered still. */
.dio-numbing .nb-drill-video{opacity:0;z-index:1}.dio-numbing .numbing.is-playing .nb-example.is-started .nb-drill-video{opacity:1}.dio-numbing .nb-drill-video[data-failed=true]{opacity:0!important}
.dio-numbing .nb-ian-label{position:absolute;left:1%;bottom:0;z-index:4;font-size:12px;line-height:1.3;font-weight:500;color:#a13732;background:#f5f7f7;padding:1px 4px}
html.reduce-motion .dio-numbing .nb-drill-video,html.dio-alive-off .dio-numbing .nb-drill-video{display:none!important}
@media(prefers-reduced-motion:reduce){.dio-numbing .nb-drill-video{display:none!important}}
@media print{.dio-numbing .nb-drill-video{display:none!important}}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z). One row above the figure, right side,
   wrapping on narrow widths, outside the title band; button look, focus ring and print rule follow the adapters that already ship controls. */
.dio-numbing .nb-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-numbing .nb-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-numbing .nb-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-numbing .nb-controls button:hover{background:#f1f5f6}.dio-numbing .nb-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-numbing .nb-controls button[aria-pressed=true]{background:#e6edf0}.dio-numbing .nb-controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-numbing .nb-controls{display:none!important}}