.env-finding { border-left-color: #94724d; background: #f6efe4; }

.env-explainer {
  overflow: hidden;
  margin: 2.4rem 0;
  border: 1px solid #cdbda6;
  border-radius: 18px;
  background: #eee3d4;
  color: #1d302c;
  box-shadow: 0 20px 48px rgba(45, 39, 30, .09);
}
.env-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: end;
  padding: 1.5rem 1.7rem 1.3rem;
  border-bottom: 1px solid #cdbda6;
  background: #173a34;
  color: #fffaf1;
}
.env-head h3 { margin: .25rem 0 0; color: inherit; font-size: clamp(1.25rem, 3vw, 1.85rem); }
.env-head p { max-width: 25rem; margin: 0; color: #e4d7c6; font-size: .8rem; line-height: 1.55; text-align: right; }
.env-eyebrow { color: #d8b37f; font-size: .69rem; font-weight: 700; letter-spacing: .14em; }

.env-stage { display: grid; grid-template-columns: minmax(9rem, .78fr) 1.6fr; gap: 1rem; padding: 1.45rem 1.7rem 1.15rem; }
.env-file { position: relative; min-height: 14.2rem; padding: 2.4rem 1rem 1rem; border: 1px solid #b9a586; border-radius: 10px 10px 14px 14px; background: #fffaf0; box-shadow: 6px 7px 0 #d6c4aa; }
.env-file::after { position: absolute; inset: .75rem; border: 1px dashed #d7c7b0; border-radius: 8px; content: ""; pointer-events: none; }
.env-file-tab { position: absolute; top: 0; left: 0; padding: .45rem .7rem; border-radius: 9px 0 7px 0; background: #9b6f45; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; }
.env-file strong,.env-file small { position: relative; z-index: 1; display: block; }
.env-file strong { margin-top: .25rem; font-size: 1rem; }
.env-file small { margin-top: .32rem; color: #6a6157; font-size: .69rem; line-height: 1.45; }
.env-doc-stack { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; left: 1rem; display: flex; gap: .35rem; align-items: end; height: 4rem; }
.env-doc-stack i { display: block; width: 18%; height: 1.8rem; border: 1px solid #a89476; border-radius: 3px 3px 0 0; background: #ead9bd; opacity: .18; transform: translateY(.7rem); transition: opacity .35s ease, transform .35s ease, height .35s ease; }
.env-doc-stack i:nth-child(2) { height: 2.2rem; }
.env-doc-stack i:nth-child(3) { height: 2.55rem; }
.env-doc-stack i:nth-child(4) { height: 3rem; }
.env-doc-stack i:nth-child(5) { height: 3.45rem; background: #d2a96f; }
.env-explainer[data-step="0"] .env-doc-stack i:nth-child(-n+1),
.env-explainer[data-step="1"] .env-doc-stack i:nth-child(-n+2),
.env-explainer[data-step="2"] .env-doc-stack i:nth-child(-n+3),
.env-explainer[data-step="3"] .env-doc-stack i:nth-child(-n+4),
.env-explainer[data-step="4"] .env-doc-stack i:nth-child(-n+5) { opacity: 1; transform: none; }

.env-clocks { display: grid; gap: .6rem; }
.env-clock { display: grid; grid-template-columns: 2.2rem minmax(8rem,.72fr) 1fr; gap: .7rem; align-items: center; min-height: 4.3rem; padding: .65rem .8rem; border: 1px solid #c2af92; border-radius: 12px; background: rgba(255,253,248,.86); }
.env-clock-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #315b52; font-size: 1rem; font-weight: 700; }
.env-clock > strong { font-size: .75rem; line-height: 1.3; }
.env-statuses { display: grid; }
.env-statuses span { grid-area: 1 / 1; align-self: center; color: #6b6258; font-size: .72rem; line-height: 1.35; opacity: 0; transform: translateY(.35rem); transition: opacity .3s ease, transform .3s ease; }
.env-explainer[data-step="0"] .env-statuses span:nth-child(1),
.env-explainer[data-step="1"] .env-statuses span:nth-child(2),
.env-explainer[data-step="2"] .env-statuses span:nth-child(3),
.env-explainer[data-step="3"] .env-statuses span:nth-child(4),
.env-explainer[data-step="4"] .env-statuses span:nth-child(5) { opacity: 1; transform: none; }
.env-clock-authority { border-left: 4px solid #a9734b; }
.env-clock-works { border-left: 4px solid #3d6a60; }
.env-clock-cash { border-left: 4px solid #6c6c62; }

.env-event { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(12rem,.72fr) 1fr; gap: 1rem; align-items: center; min-height: 3.2rem; padding: .7rem .9rem; border: 1px solid #bca888; border-radius: 10px; background: #fffaf0; }
.env-event > span { color: #7a5639; font-size: .64rem; font-weight: 700; letter-spacing: .1em; }
.env-event-values { display: grid; font-size: .75rem; }
.env-event-values b { grid-area: 1 / 1; opacity: 0; transform: translateY(.35rem); transition: opacity .3s ease, transform .3s ease; }
.env-explainer[data-step="0"] .env-event-values b:nth-child(1),
.env-explainer[data-step="1"] .env-event-values b:nth-child(2),
.env-explainer[data-step="2"] .env-event-values b:nth-child(3),
.env-explainer[data-step="3"] .env-event-values b:nth-child(4),
.env-explainer[data-step="4"] .env-event-values b:nth-child(5) { opacity: 1; transform: none; }

.env-live { display: flex; gap: .9rem; align-items: baseline; padding: .9rem 1.7rem; border-block: 1px solid #cdbda6; background: #203832; color: #fff; }
.env-live strong { flex: 0 0 29%; color: #e3bd8c; font-size: .68rem; letter-spacing: .09em; }
.env-live span { font-size: .75rem; line-height: 1.45; }
.env-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .9rem 1.7rem .7rem; background: #f9f2e7; }
.env-controls button { min-height: 2.25rem; padding: .45rem .72rem; border: 1px solid #a89170; border-radius: 999px; background: #fffdf8; color: #173a34; font: inherit; font-size: .71rem; font-weight: 650; cursor: pointer; }
.env-controls button:hover { border-color: #8d5e3a; color: #784528; }
.env-controls button:focus-visible { outline: 3px solid rgba(160,111,70,.38); outline-offset: 2px; }
.env-counter { margin-left: auto; color: #6a6157; font-size: .7rem; font-variant-numeric: tabular-nums; }

.env-state-copy { display: grid; grid-template-columns: repeat(5,1fr); padding: 0; margin: 0; border-top: 1px solid #cdbda6; list-style: none; }
.env-state-copy li { min-height: 8.2rem; padding: .9rem; border-right: 1px solid #cdbda6; background: #e8ddcf; color: #685f55; transition: background .3s ease, color .3s ease; }
.env-state-copy li:last-child { border-right: 0; }
.env-state-copy strong,.env-state-copy span { display: block; }
.env-state-copy strong { margin-bottom: .38rem; font-size: .73rem; line-height: 1.3; }
.env-state-copy span { font-size: .65rem; line-height: 1.45; }
.env-state-copy li.is-active { background: #fffaf0; color: #1d302c; box-shadow: inset 0 4px 0 #a9734b; }
.env-explainer figcaption { padding: .85rem 1.7rem 1rem; border-top: 1px solid #cdbda6; background: #f9f2e7; color: #6a6157; font-size: .69rem; line-height: 1.45; }

.env-pack { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; margin: 1.3rem 0 1.8rem; }
.env-pack > div { padding: 1rem; border: 1px solid #d3c3ab; border-radius: 12px; background: #f7f0e6; }
.env-pack > div:last-child { grid-column: 1 / -1; }
.env-pack span { display: block; margin-bottom: .55rem; color: #9a6944; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.env-pack strong { color: #1d302c; font-size: .86rem; }
.env-pack p { margin: .45rem 0 0; color: #665e55; font-size: .78rem; line-height: 1.55; }

@media (max-width: 760px) {
  .env-head { display: block; padding: 1.25rem 1.05rem 1rem; }
  .env-head p { margin-top: .65rem; text-align: left; }
  .env-stage { grid-template-columns: 1fr; padding: 1.1rem 1rem .9rem; }
  .env-file { min-height: 9.5rem; }
  .env-event { grid-column: 1; grid-template-columns: 1fr; gap: .3rem; }
  .env-clock { grid-template-columns: 2rem 1fr; }
  .env-statuses { grid-column: 2; }
  .env-live { display: block; padding: .85rem 1.05rem; }
  .env-live strong,.env-live span { display: block; }
  .env-live span { margin-top: .35rem; }
  .env-controls { padding: .8rem 1.05rem .6rem; }
  .env-counter { flex-basis: 100%; margin: .1rem 0 0; }
  .env-state-copy { grid-template-columns: 1fr; }
  .env-state-copy li { min-height: auto; border-right: 0; border-bottom: 1px solid #cdbda6; }
  .env-state-copy li:last-child { border-bottom: 0; }
  .env-explainer figcaption { padding: .8rem 1.05rem .95rem; }
  .env-pack { grid-template-columns: 1fr; }
  .env-pack > div:last-child { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .env-explainer *, .env-explainer *::before, .env-explainer *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}