.interactive-learning-page .scenario-options{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.interactive-learning-page .scenario-options button{padding:14px 20px;min-height:48px;background:#fff;color:#131311;border:1px solid #a8b78c;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}
.interactive-learning-page .scenario-options button[aria-pressed=true]{background:#131311;color:#c6fd50;border-color:#131311;box-shadow:4px 4px #c6fd50}
.interactive-learning-page .scenario-options button:hover{transform:translateY(-2px)}
.interactive-learning-page .scenario-options button:focus-visible{outline:3px solid #719a18;outline-offset:4px}
.interactive-learning-page .scenario-canvas{border:1px solid #b7ca91;border-radius:22px;padding:30px;background:linear-gradient(145deg,#fff,#eff8dd);box-shadow:0 18px 40px #1313110a;min-width:0}
.interactive-learning-page p.scenario-input{display:inline-block;padding:12px 18px;margin:0 0 30px;background:#131311;color:#fff;border-radius:10px;font-size:.9375rem;line-height:1.5}
.interactive-learning-page .scenario-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:0 0 30px}
.interactive-learning-page .scenario-route li{position:relative;min-width:0;min-height:136px;border:1px solid #b7ca91;border-radius:16px;padding:22px;background:#fff;transition:background .35s,box-shadow .35s,transform .35s}
.interactive-learning-page .scenario-route li span{display:block;margin-bottom:18px;font-size:.875rem;font-weight:750;color:#527500}
.interactive-learning-page .scenario-route li strong{display:block;line-height:1.4;font-size:1rem;color:#131311}
.interactive-learning-page .scenario-route li:not(:last-child)::after{content:'→';position:absolute;right:-25px;top:calc(50% - 18px);color:#527500;font-size:1.5rem;animation:learning-arrow 1.6s ease-in-out infinite}
.interactive-learning-page .scenario-route li.is-active{background:#c6fd50;border-color:#131311;box-shadow:4px 5px #131311;transform:translateY(-3px)}
.interactive-learning-page p.scenario-result{margin:0;border-left:4px solid #8cbc2c;padding:18px 22px;border-radius:0 12px 12px 0;background:white;color:#131311;font-weight:650;line-height:1.6}
@media(max-width:1024px){.interactive-learning-page .scenario-route{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.interactive-learning-page .scenario-route li::after{display:none}}
@media(max-width:760px){.interactive-learning-page .scenario-options{display:grid;grid-template-columns:1fr}.interactive-learning-page .scenario-options button{text-align:left}.interactive-learning-page .scenario-canvas{padding:22px}.interactive-learning-page .scenario-route{grid-template-columns:1fr;gap:28px}.interactive-learning-page .scenario-route li{min-height:110px;padding:20px}.interactive-learning-page .scenario-route li:not(:last-child)::after{display:block;content:'↓';right:calc(50% - 7px);top:auto;bottom:-29px;font-size:1.35rem;animation:none}.interactive-learning-page p.scenario-result{padding:16px}.interactive-learning-page p.scenario-input{max-width:100%;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.interactive-learning-page .scenario-route li,.interactive-learning-page .scenario-options button{transition:none!important;transform:none!important}.interactive-learning-page .scenario-route li::after{animation:none!important}}
