/* Containers hosting the simulator (hero, simulator page, lessons) */
.sim-mount{position:relative;background:#0d0f12 radial-gradient(ellipse at 50% 70%,rgba(242,84,27,.14),transparent 60%);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.sim-mount--hero{aspect-ratio:16/11;min-height:340px;width:100%}
@media (max-width:700px){.sim-mount--hero{aspect-ratio:auto;height:440px;min-height:0}}
.sim-mount--page{height:calc(100vh - var(--hh));min-height:520px;border-radius:0;border:0}
.sim-mount--lesson{aspect-ratio:16/9;min-height:360px;width:100%}
@media (max-width:700px){.sim-mount--lesson{aspect-ratio:auto;height:420px;min-height:0}}
.sim-mount .sim{position:absolute;inset:0;border-radius:inherit}
.sim-poster{position:absolute;inset:0;display:grid;place-items:center}
.sim-poster::before{content:"";width:46%;aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f4f2ee' stroke-opacity='.35' stroke-width='1.5'%3E%3Ccircle cx='30' cy='30' r='16'/%3E%3Ccircle cx='90' cy='30' r='16'/%3E%3Ccircle cx='30' cy='90' r='16'/%3E%3Ccircle cx='90' cy='90' r='16'/%3E%3Cpath d='M30 30l60 60M90 30L30 90' stroke-width='4'/%3E%3C/g%3E%3Crect x='50' y='50' width='20' height='20' rx='4' fill='%23f2541b'/%3E%3C/svg%3E") center/contain no-repeat;animation:hover 3s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.sim-poster::before{animation:none}}
.route-simulator main{background:#0d0f12}
.simpage-info{background:var(--paper)}