.field-sequence{position:relative;overflow:hidden}.field-sequence:after{content:"";pointer-events:none;background-image:linear-gradient(oklch(18% .014 255/.05) 1px,#0000 1px),linear-gradient(90deg,oklch(18% .014 255/.05) 1px,#0000 1px);background-size:42px 42px;position:absolute;inset:0 0 0 52%}.field-sequence-heading{z-index:1;align-items:end;gap:2rem;display:grid;position:relative}.field-sequence-heading h2{max-width:11ch;color:var(--color-ink);font-family:var(--font-display);letter-spacing:-.05em;text-transform:uppercase;margin-top:1.2rem;font-size:clamp(3.5rem,7vw,6.8rem);font-weight:800;line-height:.82}.field-sequence-heading h2>span{color:var(--color-blue);display:block}.field-sequence-heading>p{max-width:39rem;color:var(--color-ink-muted);font-size:1.05rem;line-height:1.8}.field-sequence-stage{z-index:1;background:var(--color-ink);border:1px solid oklch(18% .014 255/.14);margin-top:clamp(3rem,6vw,5rem);display:grid;position:relative;box-shadow:0 32px 85px oklch(18% .014 255/.15)}.field-sequence-visual{isolation:isolate;background:var(--color-blue-deep);min-height:29rem;position:relative;overflow:hidden}.field-sequence-visual>img{object-fit:cover;clip-path:inset(0 3% 0 0);opacity:0;width:100%;height:100%;min-height:29rem;transition:clip-path .9s cubic-bezier(.16,1,.3,1),opacity .76s,transform 1.4s cubic-bezier(.16,1,.3,1);position:absolute;inset:0;transform:scale(1.025)}.field-sequence-visual>img[data-active=true]{z-index:1;clip-path:inset(0);opacity:1;transform:scale(1)}.field-sequence-visual:after{z-index:2;content:"";background:linear-gradient(#0000 50%,oklch(10% .014 255/.7));position:absolute;inset:0}.field-sequence-grid{z-index:3;background-image:linear-gradient(oklch(100% 0 0/.1) 1px,#0000 1px),linear-gradient(90deg,oklch(100% 0 0/.1) 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 72%);mask-image:linear-gradient(90deg,#000,#0000 72%)}.field-sequence-status{z-index:4;position:absolute;bottom:1.4rem;left:1.25rem;right:1.25rem}.field-sequence-status span{color:var(--color-safety);letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.68rem;font-weight:800;display:block}.field-sequence-status strong{color:#fff;font-family:var(--font-display);text-transform:uppercase;margin-top:.45rem;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.9;display:block}.field-sequence-progress{z-index:5;grid-template-columns:repeat(4,1fr);gap:2px;height:.28rem;display:grid;position:absolute;bottom:0;left:0;right:0}.field-sequence-progress span{background:oklch(100% 0 0/.18);height:100%;position:relative;overflow:hidden}.field-sequence-progress span:after{content:"";background:var(--color-safety);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.field-sequence-progress span[data-built=true]:after,.field-sequence-progress span[data-current=true]:after{transform:scaleX(1)}.field-sequence-progress span[data-current=true][data-playing=true]:after{animation:3s linear forwards field-sequence-progress}.field-sequence-copy{color:#fff;flex-direction:column;justify-content:center;padding:clamp(1.7rem,5vw,4rem);display:flex}.field-sequence-count{color:var(--color-safety);font-family:var(--font-display);font-size:clamp(4.5rem,8vw,7rem);font-weight:800;line-height:.8}.field-sequence-count span{color:oklch(100% 0 0/.24);font-size:.35em}.field-sequence-copy h3{font-family:var(--font-display);text-transform:uppercase;margin-top:2rem;font-size:clamp(2.5rem,4.5vw,4rem);font-weight:800;line-height:.9}.field-sequence-copy>p{color:oklch(100% 0 0/.72);max-width:38rem;margin-top:1.15rem;font-size:1rem;line-height:1.75}.field-sequence-controls{gap:.5rem;margin-top:2rem;display:flex}.field-sequence-controls button{color:#fff;letter-spacing:.1em;text-transform:uppercase;border:1px solid oklch(100% 0 0/.2);justify-content:center;align-items:center;gap:.6rem;min-width:3.1rem;min-height:3.1rem;padding-inline:.85rem;font-size:.7rem;font-weight:800;transition:border-color .18s,background-color .18s,color .18s;display:inline-flex}.field-sequence-controls button:hover{border-color:var(--color-safety);background:var(--color-safety);color:var(--color-ink)}.field-sequence-tabs{z-index:1;background:oklch(18% .014 255/.16);grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1px;display:grid;position:relative}.field-sequence-tabs button{min-height:5rem;color:var(--color-ink-muted);text-align:left;background:#fff;border-bottom:3px solid #0000;padding:.9rem 1rem;transition:color .18s,background-color .18s,border-color .18s}.field-sequence-tabs button>span{color:var(--color-blue);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.65rem;display:block}.field-sequence-tabs button strong{font-family:var(--font-display);text-transform:uppercase;margin-top:.35rem;font-size:1.25rem;display:block}.field-sequence-tabs button[data-active=true]{border-bottom-color:var(--color-safety);background:var(--color-blue-deep);color:#fff}@keyframes field-sequence-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (width>=768px){.field-sequence-tabs{grid-template-columns:repeat(4,1fr)}}@media (width>=900px){.field-sequence-heading{grid-template-columns:1.05fr .95fr}.field-sequence-stage{grid-template-columns:minmax(0,1.35fr) minmax(22rem,.65fr)}.field-sequence-visual,.field-sequence-visual>img{min-height:45rem}}@media (prefers-reduced-motion:reduce){.field-sequence-visual>img{transition:none;animation:none}.field-sequence-progress span[data-current=true][data-playing=true]:after{animation:none}}
