/* HOW IT WORKS animation imported from claude_site. */
.story{--green-900:#0b2e20;--green-800:#0f3d2a;--gold:#f2c94c;--leaf:#5fae6b;--header-h:86px}
.story h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;font-weight:800;letter-spacing:-.02em}
.story .kicker{font-size:14px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;color:var(--gold)}
.story-rail{list-style:none;padding:0;margin-bottom:0}
.story-disclaimer{position:absolute;left:24px;right:24px;bottom:12px;z-index:2;text-align:center;color:#a5bbaa;font-size:11px;line-height:1.6;pointer-events:none}

.story {
  position: relative; height: 560vh; color: #fff;
  background:
    radial-gradient(900px 600px at 70% 40%, rgba(95,174,107,.18), transparent 65%),
    linear-gradient(180deg, var(--green-900), #0a2419 100%);
}
.story-sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  overflow: hidden; display: flex; align-items: center;
}
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-ui { position: relative; z-index: 1; pointer-events: none; }
.story-steps { position: relative; width: min(400px, 100%); min-height: 290px; }
.story-step {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease;
}
.story-step.active { opacity: 1; transform: none; }
.story-num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--green-900); background: var(--gold); padding: 4px 10px; border-radius: 4px; margin-bottom: 16px; }
.story-step h2 { margin-bottom: 16px; }
.story-step p { color: rgba(255,255,255,.82); font-size: 17px; }
.story-step b { color: var(--gold); font-weight: 700; }
.story-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.story-chips span { padding: 6px 12px; border: 1px solid rgba(242,201,76,.6); border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--gold); }
.decomp { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.75); }
.decomp-bar { flex: 1; max-width: 200px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.decomp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--leaf)); }
.decomp em { font-style: normal; font-weight: 800; color: #fff; min-width: 40px; }
.story-rail { display: flex; gap: 6px; margin-top: 36px; pointer-events: auto; }
.story-rail button {
  font: inherit; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); cursor: pointer;
  background: none; border: 0; border-top: 3px solid rgba(255,255,255,.18); padding: 8px 10px 0 0; min-width: 64px; text-align: left;
  transition: color .3s, border-color .3s;
}
.story-rail li.done button { border-color: var(--leaf); color: rgba(255,255,255,.75); }
.story-rail li.active button { border-color: var(--gold); color: var(--gold); }
.story-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 13px; letter-spacing: .08em;
  color: rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: opacity .4s;
}
.story-hint span { animation: hint 1.6s ease-in-out infinite; }
.story-hint.hide { opacity: 0; }
@keyframes hint { 50% { transform: translateY(6px); } }
@media (max-width: 860px) {
  .story-sticky { align-items: flex-start; }
  .story-ui { padding-top: 24px; }
  .story-ui .kicker { margin-bottom: 8px; }
  .story-steps { min-height: 190px; }
  .story-num { margin-bottom: 10px; font-size: 12px; }
  .story-step h2 { font-size: 24px; margin-bottom: 8px; }
  .story-step h2 br { display: none; }
  .story-step p { font-size: 14px; }
  .story-chips { margin-top: 10px; }
  .story-chips span { font-size: 12px; padding: 4px 10px; }
  .decomp { margin-top: 10px; }
  .story-rail { position: absolute; left: 0; right: 0; top: calc(100svh - var(--header-h) - 60px); margin: 0; justify-content: center; }
  .story-rail button { min-width: 0; padding-right: 0; width: 60px; text-align: center; font-size: 12px; }
  .story-hint { display: none; }
}


.story-hint{bottom:48px}
.story-step:not(.active){visibility:hidden}
@media(max-width:800px){.story{--header-h:72px}}
@media(max-width:860px){.story-ui{padding-top:20px}.story-rail{top:calc(100svh - var(--header-h) - 105px)}.story-disclaimer{left:20px;right:20px;bottom:12px;font-size:10px}.story-chips span{font-size:12px}.story-step h2{font-size:24px}}
@media(max-height:650px){.story-ui{padding-top:14px}.story-step h2{font-size:22px}.story-step p{font-size:13px}.story-num{margin-bottom:8px}.story-chips{margin-top:8px}.story-rail{margin-top:15px}.story-disclaimer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.story-hint span{animation:none}.story-step{transition:none}}
@media(max-width:860px){.story-rail li{flex:1;min-width:0}.story-rail button{width:100%}}