.resource-interactive-page {
  --resource-accent: #3f746b;
  --resource-accent-deep: #123f3d;
  --resource-tint: #dce9e4;
  --resource-warm: #d9aa71;
}
.resource-interactive-theme-amber { --resource-accent: #8b654b; --resource-accent-deep: #173f3d; --resource-tint: #eee2d2; --resource-warm: #c88c5f; }
.resource-interactive-theme-lavender { --resource-accent: #68647e; --resource-accent-deep: #173f3d; --resource-tint: #e3e1ec; --resource-warm: #d8a65c; }
.resource-interactive-theme-fog { --resource-accent: #466a61; --resource-accent-deep: #143f3d; --resource-tint: #dfe8e4; --resource-warm: #9d8fb4; }
.resource-interactive-theme-coral { --resource-accent: #a45f4d; --resource-accent-deep: #123f3d; --resource-tint: #e7ece8; --resource-warm: #c98670; }

.resource-interactive-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--hero-space-top)) 0 0;
  background:
    radial-gradient(circle at 8% 28%, color-mix(in srgb, var(--resource-warm) 22%, transparent), transparent 28rem),
    radial-gradient(circle at 91% 12%, color-mix(in srgb, var(--resource-accent) 18%, transparent), transparent 31rem),
    linear-gradient(138deg, #f6f2ec 0%, #f0ede8 52%, var(--resource-tint) 100%);
  isolation: isolate;
}
.resource-interactive-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(30,31,32,.034) 1px, transparent 1px), linear-gradient(90deg, rgba(30,31,32,.034) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 88%, transparent); }
.resource-interactive-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .58rem; margin-bottom: clamp(2.8rem, 5vw, 4.8rem); color: #666b69; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .055em; text-transform: uppercase; }
.resource-interactive-breadcrumbs a { border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.resource-interactive-breadcrumbs a:hover { border-color: currentColor; color: var(--resource-accent-deep); }
.resource-interactive-hero-layout { display: grid; min-height: clamp(31rem, 51vw, 43rem); align-items: center; grid-template-columns: minmax(0, .9fr) minmax(25rem, .7fr); gap: clamp(3rem, 8vw, 8rem); }
.resource-interactive-copy { position: relative; z-index: 3; align-self: center; padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.resource-interactive-kicker { margin: 0 0 1.25rem; color: var(--resource-accent); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 550; letter-spacing: .08em; text-transform: uppercase; }
.resource-interactive-copy h1 { max-width: 15ch; margin: 0; font-size: clamp(3.1rem, 5.1vw, 5.3rem); font-weight: 430; letter-spacing: -.055em; line-height: .99; }
.resource-interactive-copy h1 em { color: var(--resource-accent); font-weight: 370; }
.resource-interactive-intro { max-width: 720px; margin: 1.6rem 0 0; color: #505856; font-size: var(--text-lead); line-height: 1.7; }
.resource-interactive-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 2.2rem; }
.resource-interactive-actions > a:not(.button) { padding: .7rem .15rem; border-bottom: 1px solid rgba(20,63,61,.28); color: var(--resource-accent-deep); font-size: var(--text-action); font-weight: 560; }
.resource-interactive-scene { position: relative; min-height: 33rem; align-self: stretch; }
.resource-interactive-orbit { position: absolute; top: 50%; left: 50%; width: min(39vw, 34rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--resource-accent) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 4.8rem color-mix(in srgb, var(--resource-accent) 3%, transparent), 0 0 0 9.6rem color-mix(in srgb, var(--resource-accent) 2%, transparent); transform: translate(-50%,-50%); animation: resource-orbit 18s linear infinite; }
.resource-interactive-orbit::after { position: absolute; top: 9%; right: 8%; width: .72rem; aspect-ratio: 1; border-radius: 50%; background: var(--resource-warm); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--resource-warm) 16%, transparent); content: ""; }
.resource-interactive-card { position: absolute; border: 1px solid rgba(20,63,61,.14); border-radius: 1.7rem; background: rgba(250,249,246,.9); box-shadow: 0 2rem 5rem rgba(20,63,61,.12); }
.resource-interactive-card.is-back { top: 9%; right: -8%; width: 68%; height: 70%; padding: 1.25rem; color: color-mix(in srgb, var(--resource-accent) 60%, #fff); transform: rotate(6deg); }
.resource-interactive-card.is-back span { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .07em; }
.resource-interactive-card.is-back i { display: block; width: 70%; height: 1px; margin-top: 1.2rem; background: currentColor; opacity: .42; }
.resource-interactive-card.is-main { top: 14%; left: 2%; width: min(26rem, 86%); min-height: 25rem; padding: clamp(1.7rem, 3vw, 2.5rem); transform: rotate(-2.5deg); animation: resource-card-float 5.5s ease-in-out infinite; }
.resource-interactive-card.is-main small { color: var(--resource-accent); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .07em; text-transform: uppercase; }
.resource-interactive-card.is-main > strong { display: block; max-width: 12ch; margin-top: 1rem; color: #262b29; font-size: clamp(1.65rem, 2.7vw, 2.55rem); font-weight: 430; letter-spacing: -.04em; line-height: 1.08; }
.resource-interactive-card ol { display: grid; margin: 2rem 0 0; padding: 0; list-style: none; gap: .75rem; }
.resource-interactive-card li { display: grid; align-items: center; padding-top: .7rem; border-top: 1px solid rgba(20,63,61,.13); color: #59615e; font-size: var(--text-action); grid-template-columns: 2rem minmax(0,1fr); gap: .6rem; }
.resource-interactive-card li span { color: var(--resource-accent); font-family: var(--font-mono); font-size: var(--text-label); }
.resource-interactive-card b { position: absolute; right: 1.4rem; bottom: 1.3rem; display: grid; width: 2.7rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--resource-accent-deep); color: #fff; font-size: 1.1rem; font-weight: 400; }
.resource-interactive-facts { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(20,63,61,.14); list-style: none; grid-template-columns: repeat(4,minmax(0,1fr)); }
.resource-interactive-facts li { min-height: 6.7rem; padding: 1.25rem 1.5rem 1.35rem 0; }
.resource-interactive-facts li + li { padding-left: 1.5rem; border-left: 1px solid rgba(20,63,61,.14); }
.resource-interactive-facts strong, .resource-interactive-facts span { display: block; }
.resource-interactive-facts strong { color: var(--resource-accent-deep); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 520; }
.resource-interactive-facts span { margin-top: .25rem; color: #69706e; font-size: var(--text-label); line-height: 1.45; }

.resource-interactive-context { padding: var(--section-space-compact) 0; background: #f8f5f0; }
.resource-interactive-context-grid { display: grid; align-items: start; grid-template-columns: minmax(0,.9fr) minmax(24rem,.66fr); gap: clamp(3rem,8vw,8rem); }
.resource-interactive-context h2 { max-width: 18ch; margin: 0; }
.resource-interactive-context h2 em { color: var(--resource-accent); }
.resource-interactive-context p { max-width: 660px; margin: 0; color: #59605e; font-size: var(--text-support); line-height: 1.75; }
.resource-interactive-context p + p { margin-top: 1rem; }

.resource-interactive-next { position: relative; padding: var(--section-space-compact) 0; overflow: hidden; background: var(--resource-tint); }
.resource-interactive-next::after { position: absolute; top: 50%; right: -10rem; width: 27rem; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--resource-accent) 16%, transparent); border-radius: 50%; box-shadow: 0 0 0 4rem color-mix(in srgb, var(--resource-accent) 3%, transparent), 0 0 0 8rem color-mix(in srgb, var(--resource-accent) 2%, transparent); content: ""; transform: translateY(-50%); pointer-events: none; }
.resource-interactive-next-grid { position: relative; z-index: 2; display: grid; align-items: end; grid-template-columns: minmax(0,.9fr) minmax(24rem,.67fr); gap: clamp(3rem,8vw,8rem); }
.resource-interactive-next-grid > div:first-child > span { display: block; margin-bottom: .9rem; color: var(--resource-accent); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .07em; text-transform: uppercase; }
.resource-interactive-next h2 { max-width: 16ch; margin: 0; }
.resource-interactive-next h2 em { color: var(--resource-accent); }
.resource-interactive-next p { max-width: 650px; margin: 0; color: #4f5b57; font-size: var(--text-support); line-height: 1.72; }
.resource-interactive-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: 1.8rem; }
.resource-interactive-next-actions > button { min-height: 3rem; padding: .65rem .1rem; border: 0; border-bottom: 1px solid rgba(20,63,61,.25); background: transparent; color: var(--resource-accent-deep); font: inherit; font-size: var(--text-action); font-weight: 560; cursor: pointer; }

@keyframes resource-card-float { 0%,100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-1.2deg) translateY(-.55rem); } }
@keyframes resource-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 980px) {
  .resource-interactive-hero-layout { grid-template-columns: minmax(0,1fr) minmax(20rem,.72fr); gap: 2.5rem; }
  .resource-interactive-scene { min-height: 29rem; }
  .resource-interactive-context-grid, .resource-interactive-next-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (max-width: 760px) {
  .resource-interactive-hero { padding-top: calc(var(--header-height) + var(--hero-space-top)); }
  .resource-interactive-hero-layout { min-height: 0; grid-template-columns: 1fr; }
  .resource-interactive-copy { padding-bottom: 0; }
  .resource-interactive-copy h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .resource-interactive-scene { min-height: 27rem; }
  .resource-interactive-card.is-back { right: -10%; }
  .resource-interactive-card.is-main { left: 4%; width: 82%; }
  .resource-interactive-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .resource-interactive-facts li:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid rgba(20,63,61,.14); }
  .resource-interactive-facts li:nth-child(4) { border-top: 1px solid rgba(20,63,61,.14); }
  .resource-interactive-context-grid, .resource-interactive-next-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
  .resource-interactive-scene { min-height: 25rem; }
  .resource-interactive-card.is-main { top: 8%; left: 0; width: 92%; min-height: 22.5rem; }
  .resource-interactive-card.is-back { top: 15%; width: 76%; height: 62%; }
  .resource-interactive-card.is-main > strong { font-size: 1.65rem; }
  .resource-interactive-card li { font-size: .84rem; }
  .resource-interactive-facts strong { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-interactive-orbit, .resource-interactive-card.is-main { animation: none; }
}