.loop-demo{background:var(--ml-color-cobalt)}.loop-workspace{background:var(--ml-color-ivory);color:var(--ml-color-navy);max-width:var(--ml-container-wide);grid-template-columns:13rem minmax(0,1fr);min-height:42rem;margin:0 auto;display:grid}.loop-progress{border-right:1px solid var(--ml-color-rule);padding:0;list-style:none}.loop-progress li{border-bottom:1px solid var(--ml-color-rule);color:var(--ml-color-text-muted);font-size:var(--ml-type-utility);text-transform:uppercase;gap:.5rem;min-height:6rem;padding:1rem;display:grid}.loop-progress li span{color:var(--ml-color-coral)}.loop-progress li.is-active{color:var(--ml-color-navy)}.loop-progress li[aria-current=step]{background:var(--ml-color-coral)}.loop-panel{min-width:0;padding:clamp(1.5rem,5vw,4rem)}.loop-stage,.loop-stage fieldset{border:0;margin:0;padding:0}.loop-stage fieldset+fieldset{margin-top:2.5rem}.loop-stage>legend,.loop-stage fieldset>legend{font-family:var(--ml-font-display);letter-spacing:-.04em;max-width:54rem;padding:0;font-size:clamp(2.5rem,5vw,5rem);font-weight:650;line-height:.94}.loop-stage fieldset>legend{font-size:clamp(1.75rem,3vw,2.75rem)}.loop-stage>p{color:var(--ml-color-text-muted);margin-top:1.5rem;line-height:1.6}.loop-choice-grid,.loop-choice-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:2.5rem;display:grid}.loop-events,.loop-timing{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-choice-grid label,.loop-choice-row label{background:var(--ml-color-neutral-100);border:1px solid var(--ml-color-rule);cursor:pointer;gap:.8rem;min-height:9rem;padding:1.25rem;display:grid}.loop-choice-grid label.is-selected,.loop-choice-row label.is-selected{background:var(--ml-color-navy);color:var(--ml-color-ivory)}.loop-choice-grid input,.loop-choice-row input{accent-color:var(--ml-color-coral);width:1.25rem;height:1.25rem}.loop-choice-grid b,.loop-choice-row b{font-family:var(--ml-font-display);font-size:1.2rem}.loop-choice-grid span,.loop-choice-row span{color:var(--ml-color-text-muted);line-height:1.5}.loop-choice-grid label.is-selected span,.loop-choice-row label.is-selected span{color:var(--ml-color-text-muted-on-dark)}.loop-stage-actions{justify-content:space-between;align-items:center;margin-top:2.5rem;display:flex}.loop-stage-actions button,.loop-next,.loop-reset{border:1px solid var(--ml-color-navy);color:var(--ml-color-navy);cursor:pointer;background:0 0;min-height:3.5rem;padding:0 1.25rem}.loop-stage-actions .loop-next,.loop-next,.loop-reset{background:var(--ml-color-coral);border-color:var(--ml-color-coral);color:var(--ml-color-navy);font-weight:800}.loop-next{margin-top:2.5rem;margin-left:auto;display:block}.loop-fields{grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;display:grid}.loop-fields label{gap:.6rem;display:grid}.loop-fields label>span{color:var(--ml-color-text-muted);font-size:var(--ml-type-utility);text-transform:uppercase;font-weight:800}.loop-fields :where(input,select){border:1px solid var(--ml-color-rule);color:var(--ml-color-navy);background:0 0;width:100%;min-height:3.5rem;padding:.8rem}.loop-result-head{border-bottom:1px solid var(--ml-color-rule);grid-template-columns:1fr minmax(20rem,.8fr);gap:2rem;padding-bottom:2rem;display:grid}.loop-result-head>div>p,.loop-result-head>div>span,.loop-sequence small{color:var(--ml-color-text-muted);font-size:var(--ml-type-utility);letter-spacing:.08em;text-transform:uppercase;font-weight:850}.loop-result-head h3{letter-spacing:-.04em;margin:1rem 0;font-size:clamp(2.75rem,5vw,5.5rem);line-height:.92}.loop-result-head blockquote{align-self:end;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.6}.loop-sequence{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:2rem;display:grid}.loop-sequence>p{color:var(--ml-color-text-muted);grid-column:1/-1;margin-bottom:1rem;line-height:1.5}.loop-sequence article{background:var(--ml-color-neutral-100);min-height:12rem;padding:1.25rem}.loop-sequence h4{margin-top:1.5rem;font-size:1.35rem}.loop-sequence article p{color:var(--ml-color-text-muted);margin-top:.75rem;line-height:1.5}.loop-reset{margin-top:2rem}@media (width<=1024px){.loop-workspace{grid-template-columns:1fr}.loop-progress{border-bottom:1px solid var(--ml-color-rule);border-right:0;grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.loop-progress li{border-bottom:0;border-right:1px solid var(--ml-color-rule)}.loop-sequence{grid-template-columns:1fr 1fr}}@media (width<=768px){.loop-choice-grid,.loop-choice-row,.loop-events,.loop-timing,.loop-fields,.loop-result-head,.loop-sequence{grid-template-columns:1fr}.loop-panel{padding:2rem 20px}}@media (width<=430px){.loop-progress{grid-template-columns:1fr 1fr}.loop-stage-actions{flex-direction:column-reverse;align-items:stretch;gap:.75rem}.loop-stage-actions button,.loop-next,.loop-reset{width:100%}}@media (width<=360px){.loop-panel{padding-left:16px;padding-right:16px}}@media (prefers-reduced-motion:reduce){.loop-demo *{transition-duration:.01ms!important}}
