/* "Three try-ins, same base", owner-approved and locked 2026-10-29 (Daniel: "approved- send to lead for publish.  ask for next assignment";
   Codex family-c/three-tryins-v002, final smooth turn, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to
   .dio-three-tryins, the review page's @font-face, :root, body, .review-shell and .review-note rules dropped (Nunito Sans comes from the
   site's fonts.css), h1 shown as the component title h3 and the h2 headings as h4. Values are unchanged. The arch tile is the site's own
   assets/arch-tile.svg (byte-identical to the lock's art/arch-tile.svg). Breakpoints follow the component's width (container queries). */
.dio-three-tryins{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#2f4452;background:#fff;font-synthesis:none}
.dio-three-tryins *{box-sizing:border-box}
.dio-three-tryins :is(h3,h4){font-family:inherit;color:inherit}
.dio-three-tryins .tt-card{margin:0;background:#fff;container-type:inline-size}
.dio-three-tryins .tt-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-three-tryins .tt-field{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-three-tryins .tt-field>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-three-tryins .tt-head h3{font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}.dio-three-tryins .tt-body{padding:24px 28px 28px;overflow:hidden}.dio-three-tryins .tt-story-heading{text-align:center;min-height:100px;display:flex;flex-direction:column;justify-content:center}.dio-three-tryins .tt-step-label{font-size:14px;line-height:1.4;color:#57707f;margin:0 0 7px;font-weight:400}.dio-three-tryins .tt-step-label:empty{display:none}.dio-three-tryins .tt-step-title{font-size:26px;line-height:1.3;font-weight:500;letter-spacing:-.02em;margin:0}.dio-three-tryins .tt-stage{position:relative;aspect-ratio:1.4;isolation:isolate}.dio-three-tryins :is(.tt-front,.tt-turn,.tt-board){position:absolute;left:50%;top:50%;width:100%;height:auto;max-width:none;aspect-ratio:2;transform:translate(-50%,-50%);display:block;border-radius:0}.dio-three-tryins .tt-turn{opacity:0;pointer-events:none;aspect-ratio:1.4}.dio-three-tryins .tt-board{overflow:visible;opacity:0}.dio-three-tryins .tt-guides{fill:none;pointer-events:none}.dio-three-tryins .tt-center{stroke:#4c7288;stroke-width:1.2;stroke-dasharray:4 5}.dio-three-tryins .tt-smile{stroke:#ed873c;stroke-width:1.5}.dio-three-tryins .tt-mark{fill:#fff;stroke:#2f4452;stroke-width:1.1}.dio-three-tryins .tt-mark path{fill:none;stroke-width:1.3}.dio-three-tryins .tt-guides :is(path,circle){vector-effect:non-scaling-stroke}.dio-three-tryins .tt-feedback{position:absolute;right:8%;top:9%;font-size:17px;line-height:1.3;background:#fff;border:1px solid #cad5da;padding:9px 15px;opacity:0}.dio-three-tryins .tt-legend{display:flex;justify-content:center;gap:28px;color:#506875;font-size:14px;line-height:1.4;min-height:22px;margin-top:-22px;opacity:0}.dio-three-tryins .tt-legend span{display:inline-flex;align-items:center;gap:8px}.dio-three-tryins .tt-legend i{height:16px;width:1px;border-left:1px dashed #4c7288}.dio-three-tryins .tt-legend svg{width:23px;height:15px;fill:none;stroke:#ed873c;stroke-width:1.5}.dio-three-tryins .tt-tick{visibility:hidden;color:#2f4452}.dio-three-tryins .tt-aligned .tt-tick{visibility:visible}.dio-three-tryins .tt-narration{font-size:18px;line-height:1.5;min-height:54px;text-align:center;max-width:660px;margin:22px auto 0;color:#506875}.dio-three-tryins .tt-controls{display:flex;gap:10px;margin:0;justify-content:flex-end;padding:0 28px 24px}.dio-three-tryins .tt-controls[hidden]{display:none}.dio-three-tryins .tt-controls button{font:500 15px/1.2 "Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;min-height:48px;min-width:88px;padding:11px 18px;border:1px solid #bdcdd6;border-radius:0;background:#fff;color:#2f4452;cursor:pointer}.dio-three-tryins .tt-controls button:hover,.dio-three-tryins .tt-controls button[aria-pressed=true]{background:#e5edf1}.dio-three-tryins .tt-controls button:focus-visible{outline:2px solid #2f4452;outline-offset:3px}.dio-three-tryins .tt-controls button:disabled{opacity:.55;cursor:default}.dio-three-tryins .tt-card>figcaption{font-size:15px;line-height:1.5;color:#506875;padding:18px 28px 0;margin:0;background:#fff;text-align:left}.dio-three-tryins .tt-card>figcaption span{display:block}.dio-three-tryins .tt-card>figcaption span+span{margin-top:5px}.dio-three-tryins .tt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.dio-three-tryins .tt-static{display:none}.dio-three-tryins .tt-card[data-mode=still] .tt-dynamic{display:none}.dio-three-tryins .tt-card[data-mode=still] .tt-static{display:block}.dio-three-tryins .tt-static h4{font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.02em;margin:8px auto 0;text-align:center;max-width:600px}.dio-three-tryins .tt-static-underside{position:relative;aspect-ratio:1.4;overflow:hidden}.dio-three-tryins .tt-static-underside img{position:absolute;left:50%;top:50%;width:100%;height:auto;max-width:none;transform:translate(-50%,-50%);border-radius:0}.dio-three-tryins .tt-static-front{width:100%;height:auto;max-width:none;display:block;margin:0 auto;border-radius:0}.dio-three-tryins .tt-static p{font-size:18px;line-height:1.5;margin:10px 0 0;text-align:center;color:#506875}.dio-three-tryins .tt-static h4:not(:first-child){margin-top:20px}
.dio-three-tryins .tt-started .tt-field>i{animation:tt-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}.dio-three-tryins .tt-paused .tt-field>i{animation-play-state:paused}.dio-three-tryins .tt-card[data-mode=still] .tt-field>i{animation:none;background-position:0 0}@keyframes tt-wave{from{background-position:100% 0}to{background-position:0 0}}
@container(max-width:520px){.dio-three-tryins .tt-head h3{font-size:23px}.dio-three-tryins .tt-body{padding:18px 18px 22px}.dio-three-tryins .tt-story-heading{min-height:112px}.dio-three-tryins .tt-step-title{font-size:23px}.dio-three-tryins .tt-step-label{font-size:13px}.dio-three-tryins .tt-feedback{top:2%;right:0;font-size:14px;padding:7px 11px}.dio-three-tryins .tt-legend{gap:18px;font-size:12px;margin-top:-3px}.dio-three-tryins .tt-narration{font-size:17px;line-height:1.5;min-height:78px;margin-top:20px}.dio-three-tryins .tt-controls{padding:0 20px 22px}.dio-three-tryins .tt-controls button{font-size:14px;padding:11px 15px}.dio-three-tryins .tt-card>figcaption{padding:17px 20px 0}.dio-three-tryins .tt-static h4{font-size:23px}.dio-three-tryins .tt-static p{font-size:17px}.dio-three-tryins .tt-static h4:not(:first-child){margin-top:28px}}
@media(prefers-reduced-motion:reduce){.dio-three-tryins .tt-card *{animation:none!important;transition:none!important}}html.reduce-motion .dio-three-tryins .tt-card *,html[data-motion="reduce"] .dio-three-tryins .tt-card *,.dio-alive-off .dio-three-tryins .tt-card *{animation:none!important;transition:none!important}
@media print{.dio-three-tryins :is(.tt-dynamic,.tt-controls){display:none!important}.dio-three-tryins .tt-static{display:block!important}.dio-three-tryins .tt-field>i{animation:none!important}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-three-tryins.dio-three-tryins .tt-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-three-tryins.dio-three-tryins .tt-controls[hidden]{display:none}
.dio-three-tryins.dio-three-tryins .tt-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;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-three-tryins.dio-three-tryins .tt-controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-three-tryins.dio-three-tryins .tt-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-three-tryins.dio-three-tryins .tt-controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-three-tryins.dio-three-tryins .tt-controls button:disabled{opacity:.55;color:#203846;cursor:default}
/* the row is drawn first although it follows the card body in the markup */
.dio-three-tryins.dio-three-tryins .tt-card{display:flex;flex-direction:column}
.dio-three-tryins.dio-three-tryins .tt-controls{order:-1}
@media print{.dio-three-tryins.dio-three-tryins .tt-controls{display:none!important}}
/* end animation controls */