:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --ink: #244e49; --muted: #6b817d; --paper: #fffdf7; --line: #ddd4b8;
  --green: #4d9b76; --green-dark: #327357; --gold: #efb84a; --coral: #df7565;
  --blue: #5599c7; --navy: #203c5b; --shadow: 0 20px 46px rgba(44,68,63,.15);
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #f1f7eb; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; color: var(--ink); background: radial-gradient(circle at 7% 9%, rgba(239,184,74,.2) 0 130px, transparent 132px), radial-gradient(circle at 94% 13%, rgba(102,166,143,.16) 0 170px, transparent 172px), linear-gradient(145deg,#f1f8eb,#fffaf1 54%,#f0eef8); }
.sky-background { position: fixed; inset: 0; z-index: -1; opacity: .2; background-image: radial-gradient(circle,rgba(65,107,95,.18) 1.2px,transparent 1.4px); background-size: 36px 36px; pointer-events: none; }
button { color: inherit; font: inherit; } button:not(:disabled) { cursor: pointer; } button:disabled { cursor: default; } button:focus-visible { outline: 4px solid rgba(239,184,74,.8); outline-offset: 4px; }
h1,h2,h3,p { margin-top: 0; }
.app { width: min(1120px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 20px 0 54px; }
.topbar,.brand,.topbar-actions,.hero-actions,.section-heading,.route-head,.progress-row,.control-heading,.game-actions,.feedback-card,.result-actions,.log-heading { display: flex; align-items: center; }
.topbar { min-height: 68px; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.brand { gap: 12px; padding: 0; text-align: left; background: transparent; border: 0; }.brand-mark { display: grid; width: 57px; height: 57px; place-items: center; font-size: 29px; background: #fff1c6; border: 3px solid #dfca97; border-radius: 19px; box-shadow: 0 8px 17px rgba(58,79,70,.13); rotate: -4deg; }.brand strong,.brand small { display: block; }.brand strong { font-size: 24px; font-weight: 900; }.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { gap: 9px; }.sound-button,.back-button,.secondary-button { min-height: 49px; color: var(--ink); font-weight: 900; background: rgba(255,253,247,.95); border: 2px solid var(--line); border-radius: 17px; }.sound-button { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; }.back-button { width: 49px; padding: 0; font-size: 22px; }.secondary-button { padding: 0 18px; }.sound-button:hover,.back-button:hover,.secondary-button:hover { border-color: #76a78c; }
.primary-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; color: white; font-weight: 900; background: var(--green); border: 0; border-radius: 17px; box-shadow: 0 8px 0 var(--green-dark); }.primary-button:hover { background: #438f6a; }.primary-button:active,.secondary-button:active { translate: 0 2px; }.primary-button.compact { min-height: 45px; margin-left: auto; padding-inline: 18px; box-shadow: 0 5px 0 var(--green-dark); }
.eyebrow { margin: 0 0 8px; color: #39775e; font-family: Georgia,serif; font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero { display: grid; min-height: 500px; align-items: center; grid-template-columns: 1.03fr .97fr; gap: 34px; padding: clamp(36px,5vw,62px); overflow: hidden; background: rgba(255,253,247,.97); border: 3px solid var(--line); border-radius: 46px; box-shadow: var(--shadow); }
.hero h1 { max-width: 640px; margin-bottom: 18px; font-size: clamp(46px,5.6vw,70px); font-weight: 900; letter-spacing: -.05em; line-height: 1; }.hero-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 26px; color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1.5; }.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-scene { position: relative; width: min(100%,430px); aspect-ratio: 1; margin-inline: auto; overflow: hidden; background: linear-gradient(#183450 0 64%,#a66f54 65% 76%,#755447 77%); border: 8px solid white; border-radius: 42px; box-shadow: 0 22px 40px rgba(35,58,78,.25); }.hero-stars,.hero-stars::before { position: absolute; inset: 0; content: ""; background-image: radial-gradient(circle,rgba(255,255,255,.75) 1px,transparent 1.5px); background-size: 33px 29px; }.hero-moon { position: absolute; top: 30px; right: 35px; width: 70px; height: 70px; background: #f4e1af; border-radius: 50%; box-shadow: inset -15px -8px 0 rgba(118,103,84,.13),0 0 25px rgba(255,232,164,.4); }.hero-moon::before { position: absolute; top: 15px; left: 14px; width: 13px; height: 13px; content: ""; background: #d7c49a; border-radius: 50%; box-shadow: 28px 20px 0 #d7c49a,5px 36px 0 3px #ddcba5; }
.hero-lander,.lander { position: absolute; z-index: 4; width: 104px; height: 112px; }.hero-lander { top: 115px; left: 50%; translate: -50% 0; }.cabin { position: absolute; top: 15px; left: 20px; display: grid; width: 64px; height: 62px; place-items: center; color: #80c9db; font-size: 25px; background: #f2efe2; border: 5px solid #53676d; border-radius: 28px 28px 17px 17px; box-shadow: inset -8px -5px 0 rgba(0,0,0,.08); }.antenna { position: absolute; top: 0; left: 50px; width: 5px; height: 23px; background: #53676d; border-radius: 4px; }.antenna::before { position: absolute; top: -5px; left: -5px; width: 15px; height: 15px; content: ""; background: var(--coral); border: 3px solid white; border-radius: 50%; }.leg { position: absolute; top: 67px; width: 7px; height: 38px; background: #53676d; border-radius: 5px; }.leg::after { position: absolute; bottom: -2px; width: 25px; height: 7px; content: ""; background: #53676d; border-radius: 5px; }.leg.left { left: 25px; rotate: 24deg; }.leg.left::after { left: -17px; }.leg.right { right: 25px; rotate: -24deg; }.leg.right::after { right: -17px; }.flame,.engine-flame { position: absolute; z-index: -1; top: 76px; left: 42px; width: 22px; height: 42px; background: linear-gradient(#fff2a2,#f4a440 52%,transparent); clip-path: polygon(15% 0,85% 0,100% 65%,50% 100%,0 65%); animation: flame 1s ease-in-out infinite alternate; } @keyframes flame { to { height: 31px; opacity: .75; } }
.hero-pad { position: absolute; bottom: 52px; left: 50%; translate: -50% 0; display: grid; width: 180px; height: 48px; place-items: center; color: #e9dbb3; font-size: 11px; font-weight: 900; letter-spacing: .15em; background: #4b565c; border: 5px solid #d6b76b; border-radius: 50%; }.hero-gauge { position: absolute; right: 16px; bottom: 16px; z-index: 7; min-width: 120px; padding: 10px 13px; text-align: center; background: rgba(255,255,255,.92); border-radius: 15px; }.hero-gauge small,.hero-gauge b,.hero-gauge span { display: block; }.hero-gauge small { color: var(--muted); font-weight: 900; }.hero-gauge b { margin: 2px 0; font-size: 26px; }.hero-gauge span { color: var(--green-dark); font-size: 10px; font-weight: 900; }
.formula-note { display: grid; align-items: center; grid-template-columns: 57px 1fr; gap: 14px; margin-top: 18px; padding: 16px 20px; background: #fff3cf; border: 2px solid #e8ce82; border-radius: 23px; }.formula-note > span { display: grid; width: 52px; height: 52px; place-items: center; font-size: 28px; background: white; border-radius: 16px; }.formula-note p { margin: 0; }.formula-note strong,.formula-note small { display: block; }.formula-note small { margin-top: 4px; color: #756b50; font-weight: 800; line-height: 1.4; }
.routes-section { margin-top: 48px; }.section-heading { justify-content: space-between; gap: 24px; margin-bottom: 18px; }.section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(34px,4.5vw,50px); line-height: 1.05; }.section-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; text-align: right; }.routes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.route-card { min-height: 270px; padding: 23px; text-align: left; background: var(--paper); border: 3px solid var(--line); border-radius: 29px; box-shadow: 0 8px 0 #d9d3bd; transition: translate .18s ease,border-color .18s ease; }.route-card:hover { border-color: #76a88b; translate: 0 -4px; }.route-head { justify-content: space-between; margin-bottom: 22px; }.route-icon { display: grid; width: 70px; height: 70px; place-items: center; font-size: 37px; background: #fff0c4; border: 5px solid #eed994; border-radius: 23px; rotate: -3deg; }.route-card[data-color="coral"] .route-icon { background: #fbe2dc; border-color: #efc0b7; }.route-card[data-color="blue"] .route-icon { background: #e1eff7; border-color: #c5deec; }.route-card em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 900; }.route-card > strong { display: block; margin-bottom: 8px; font-size: 24px; }.route-card > small { display: block; min-height: 62px; margin-bottom: 18px; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.45; }.progress-track { display: block; width: 100%; height: 11px; overflow: hidden; background: #ebe7d9; border-radius: 999px; }.progress-track > span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }[data-color="coral"] .progress-track > span { background: var(--coral); }[data-color="blue"] .progress-track > span { background: var(--blue); }
.game-shell,.log-shell { padding: clamp(24px,4vw,45px); background: var(--paper); border: 3px solid var(--line); border-radius: 42px; box-shadow: var(--shadow); }.progress-row { justify-content: space-between; gap: 18px; margin-bottom: 22px; }.progress-row > div > strong,.progress-row > div > small { display: block; }.progress-row > div > strong { font-size: 18px; }.progress-row > div > small { max-width: 760px; margin-top: 5px; color: var(--muted); font-weight: 800; line-height: 1.45; }.round-badge { display: grid; min-width: 82px; height: 82px; place-items: center; align-content: center; color: white; font-family: Georgia,serif; font-size: 29px; font-weight: 900; background: var(--navy); border: 6px solid #cfe0e7; border-radius: 50%; }.round-badge small { display: block; font-family: inherit; font-size: 10px; }.mission { max-width: 880px; margin: 0 auto 20px; text-align: center; }.mission h1 { margin-bottom: 8px; font-size: clamp(34px,5vw,54px); letter-spacing: -.035em; }.mission p { margin: 0; color: var(--muted); font-weight: 800; line-height: 1.45; }
.simulator { overflow: hidden; background: #e9f1ed; border: 3px solid #c7d8cf; border-radius: 31px; }.telemetry { display: grid; align-items: center; grid-template-columns: repeat(7,auto); justify-content: center; gap: 10px; padding: 14px; background: #f5f7ef; border-bottom: 2px solid #c7d8cf; }.telemetry article { min-width: 120px; padding: 9px 12px; text-align: center; background: white; border: 2px solid #d8ddd4; border-radius: 14px; }.telemetry small,.telemetry b { display: block; }.telemetry small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }.telemetry b { margin-top: 3px; font-size: 21px; }.telemetry b span { font-size: 11px; }.telemetry .unknown { background: #fff5d2; border-color: #e6cf89; }.telemetry .target { color: #2f7356; background: #e5f3e7; border-color: #a8cdb0; }.operator { font-size: 24px; font-weight: 900; }
.landing-scene { position: relative; height: 330px; overflow: hidden; background: linear-gradient(#183652 0 67%,#a86f54 68% 78%,#744e41 79%); }.star-field { position: absolute; inset: 0 0 25%; background-image: radial-gradient(circle,rgba(255,255,255,.73) 1px,transparent 1.5px); background-size: 34px 30px; opacity: .75; }.world-label { position: absolute; top: 18px; left: 18px; z-index: 7; padding: 9px 12px; color: var(--navy); background: rgba(255,255,255,.9); border-radius: 14px; }.world-label b,.world-label small { display: block; }.world-label small { margin-top: 2px; font-size: 10px; font-weight: 800; }.lander { top: 72px; left: 50%; translate: -50% 0; transition: top .35s ease; }.landing-scene.landed .lander { top: 186px; }.landing-scene.too-fast .lander { top: 110px; }.landing-scene.too-slow .lander { top: 38px; }.descent-line { position: absolute; top: 86px; left: calc(50% + 78px); display: grid; color: #fff; text-align: center; }.descent-line span { font-size: 48px; line-height: .8; }.descent-line small { padding: 5px 8px; font-weight: 900; background: rgba(23,46,69,.76); border-radius: 10px; }.surface { position: absolute; right: 0; bottom: 0; left: 0; height: 95px; background: linear-gradient(#9b664d,#6e4b3f); border-top: 5px solid #c68d6a; }.landing-pad { position: absolute; top: -10px; left: 50%; translate: -50% 0; display: grid; width: 190px; height: 45px; place-items: center; color: #f0dca1; font-size: 11px; font-weight: 900; letter-spacing: .15em; background: #4e565b; border: 5px solid #d4b869; border-radius: 50%; }.rock { position: absolute; background: #68483d; border-radius: 50% 50% 30% 30%; }.rock.one { top: 26px; left: 12%; width: 55px; height: 32px; }.rock.two { top: 42px; right: 14%; width: 40px; height: 24px; }.speed-display { position: absolute; right: 17px; bottom: 111px; z-index: 8; min-width: 105px; padding: 9px 12px; color: white; text-align: center; background: #b95f53; border: 3px solid rgba(255,255,255,.65); border-radius: 15px; }.speed-display.safe { background: #3f8b65; }.speed-display.slow { background: #527f9f; }.speed-display small,.speed-display b,.speed-display span { display: block; }.speed-display small { font-size: 9px; font-weight: 900; text-transform: uppercase; }.speed-display b { font-size: 26px; }.speed-display span { font-size: 10px; font-weight: 900; }
.control-heading { justify-content: space-between; gap: 15px; margin: 24px 0 12px; }.control-heading strong { font-size: 19px; }.control-heading small { color: var(--muted); font-weight: 900; }.thrust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.thrust-card { display: grid; min-height: 134px; place-items: center; align-content: center; gap: 8px; padding: 16px; text-align: center; background: white; border: 3px solid #d8d4c5; border-radius: 23px; box-shadow: 0 7px 0 #d6d0bb; }.thrust-card:hover:not(:disabled) { border-color: #6ca184; translate: 0 -2px; }.thrust-card:disabled { opacity: .55; box-shadow: none; }.thrust-card.is-selected.too-fast,.thrust-card.is-selected.too-slow { color: #89443e; background: #fff0ed; border-color: #e3968c; }.thrust-card.is-selected.landed { color: #286448; background: #e6f4e8; border-color: #77b28d; }.thrust-card strong,.thrust-card small { display: block; }.thrust-card strong { font-size: 18px; }.thrust-card small { color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.35; }.thrust-icon { display: flex; height: 35px; align-items: flex-end; justify-content: center; gap: 5px; }.thrust-icon i { display: block; width: 9px; height: 15px; background: #efb547; border-radius: 5px 5px 1px 1px; }.thrust-icon i:nth-child(2) { height: 25px; }.thrust-icon i:nth-child(3) { height: 33px; }.thrust-icon.weak i:nth-child(n+2) { opacity: .18; }.thrust-icon.middle i:nth-child(3) { opacity: .18; }
.hint-note { margin-top: 14px; padding: 14px 16px; color: #735f2f; background: #fff6d5; border: 2px solid #e7cd76; border-radius: 18px; }.hint-note strong { display: block; margin-bottom: 4px; }.hint-note p { margin: 0; font-weight: 800; line-height: 1.4; }.game-actions { justify-content: flex-end; margin-top: 18px; }.feedback-card { gap: 14px; min-height: 84px; margin-top: 18px; padding: 15px 17px; background: #f3f6f2; border: 2px solid #d7ded5; border-radius: 22px; }.feedback-card[data-kind="error"] { background: #fff0ed; border-color: #e5a59c; }.feedback-card[data-kind="hint"] { background: #fff6d6; border-color: #e7cc74; }.feedback-card[data-kind="success"] { background: #e8f5ea; border-color: #9fc9aa; }.feedback-card > span { display: grid; min-width: 50px; height: 50px; place-items: center; font-size: 26px; background: white; border-radius: 15px; }.feedback-card p { flex: 1; margin: 0; }.feedback-card strong,.feedback-card small { display: block; }.feedback-card small { margin-top: 4px; color: var(--muted); font-weight: 800; line-height: 1.4; }
.result-card { max-width: 850px; margin: 55px auto 0; padding: clamp(34px,6vw,64px); text-align: center; background: var(--paper); border: 3px solid var(--line); border-radius: 43px; box-shadow: var(--shadow); }.result-lander { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; padding: 13px; color: white; background: var(--navy); border-radius: 22px; }.result-lander span { font-size: 43px; }.result-lander b { letter-spacing: .15em; }.result-card h1 { margin-bottom: 12px; font-size: clamp(40px,6vw,62px); line-height: 1.03; }.result-card > p:not(.eyebrow) { color: var(--muted); font-size: 17px; font-weight: 800; line-height: 1.5; }.stars { margin: 17px 0; font-size: 48px; letter-spacing: 7px; }.stars span { color: #ddd8c8; }.stars .earned { color: var(--gold); text-shadow: 0 4px 0 #cc9233; }.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 24px 0; }.result-stats span { padding: 14px; background: #eef5eb; border: 2px solid #d6e2d2; border-radius: 18px; }.result-stats b,.result-stats small { display: block; }.result-stats b { font-size: 25px; }.result-stats small { margin-top: 4px; color: var(--muted); font-weight: 800; }.result-actions { justify-content: center; flex-wrap: wrap; gap: 13px; }
.log-heading { justify-content: space-between; gap: 25px; margin-bottom: 22px; }.log-heading h1 { margin-bottom: 8px; font-size: clamp(38px,5vw,58px); }.log-heading p { margin: 0; color: var(--muted); font-weight: 800; }.log-heading > strong { min-width: 95px; padding: 13px 16px; text-align: center; background: #e4f0e5; border: 2px solid #bcd6bf; border-radius: 18px; }.log-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }.log-card { position: relative; display: grid; min-height: 185px; align-items: center; grid-template-columns: 70px 1fr; gap: 15px; padding: 20px; background: #edf5ee; border: 2px solid #bed4c1; border-radius: 24px; }.log-card.is-locked { color: #8c928d; background: #efeee7; border-color: #d8d4c7; }.log-number { position: absolute; top: 10px; right: 12px; color: var(--muted); font-size: 11px; font-weight: 900; }.log-icon { display: grid; width: 64px; height: 64px; place-items: center; font-size: 32px; background: white; border-radius: 19px; }.log-card strong,.log-card small,.log-card em { display: block; }.log-card strong { font-size: 20px; }.log-card small { margin-top: 3px; color: var(--muted); font-weight: 900; }.log-card p { margin: 9px 0 5px; font-size: 13px; font-weight: 900; }.log-card em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.35; }
.qa-report { max-width: 860px; margin: 35px auto; padding: clamp(25px,4vw,44px); background: white; border: 3px solid #b8d5bf; border-radius: 33px; box-shadow: var(--shadow); }.qa-report.has-failures { border-color: #e4a198; }.qa-report h1 { margin-bottom: 8px; font-size: clamp(38px,5vw,58px); }.qa-summary { color: var(--muted); font-weight: 900; }.qa-report ul { display: grid; gap: 8px; margin: 24px 0; padding: 0; list-style: none; }.qa-report li { display: grid; align-items: center; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 11px 13px; background: #f2f8f1; border-radius: 13px; }.qa-report li.fail { background: #fff0ed; }.qa-report li > span { display: grid; width: 25px; height: 25px; place-items: center; color: white; font-weight: 900; background: var(--green); border-radius: 50%; }.qa-report li.fail > span { background: var(--coral); }.qa-report li small { color: var(--muted); }.qa-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy > p:not(.eyebrow) { margin-inline: auto; }.hero-actions { justify-content: center; }.hero-scene { width: min(520px,100%); }.routes-grid { grid-template-columns: 1fr; }.route-card { min-height: 0; }.route-card > small { min-height: 0; }.telemetry { grid-template-columns: repeat(4,1fr); }.telemetry .operator { display: none; }.thrust-grid { grid-template-columns: 1fr; }.thrust-card { grid-template-columns: 55px 1fr; min-height: 92px; text-align: left; }.thrust-card small { grid-column: 2; margin-top: -7px; }.log-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .app { width: min(1120px,calc(100% - 20px)); padding-top: 10px; }.topbar { min-height: 58px; margin-bottom: 12px; }.brand-mark { width: 49px; height: 49px; font-size: 24px; }.brand strong { font-size: 18px; }.brand small { display: none; }.sound-button { width: 49px; padding: 0; justify-content: center; }.sound-button span:last-child { display: none; }.hero { padding: 27px 20px; border-radius: 32px; }.hero h1 { font-size: clamp(39px,11.5vw,50px); }.hero-copy > p:not(.eyebrow) { font-size: 16px; }.hero-scene { max-width: 355px; border-width: 6px; border-radius: 30px; }.formula-note { grid-template-columns: 48px 1fr; padding: 13px; }.formula-note > span { width: 45px; height: 45px; }.section-heading,.log-heading { align-items: flex-start; flex-direction: column; }.section-heading > p { text-align: left; }.routes-section { margin-top: 35px; }.game-shell,.log-shell { margin-inline: -6px; padding: 21px 15px; border-radius: 30px; }.progress-row { align-items: flex-start; }.round-badge { min-width: 68px; height: 68px; font-size: 24px; }.mission h1 { font-size: 34px; }.telemetry { grid-template-columns: repeat(2,1fr); gap: 7px; }.telemetry article { min-width: 0; }.landing-scene { height: 320px; }.world-label { top: 12px; left: 12px; }.speed-display { right: 10px; bottom: 108px; }.descent-line { left: calc(50% + 65px); }.control-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.feedback-card { align-items: flex-start; flex-wrap: wrap; }.feedback-card .compact { width: 100%; margin-left: 0; }.result-stats { grid-template-columns: 1fr; }.result-actions { align-items: stretch; flex-direction: column; }.log-card { grid-template-columns: 60px 1fr; padding: 17px; }.qa-report li { grid-template-columns: 30px 1fr; }.qa-report li small { grid-column: 2; } }
@media (max-width: 410px) { .hero-actions > * { width: 100%; }.hero h1 { font-size: 39px; }.hero-scene { max-width: 310px; }.hero-gauge { right: 9px; bottom: 9px; }.route-card { padding: 20px; }.route-card > strong { font-size: 22px; }.landing-scene { height: 300px; }.lander { scale: .9; }.descent-line { left: calc(50% + 52px); }.speed-display { min-width: 92px; }.thrust-card { grid-template-columns: 45px 1fr; padding: 13px; }.thrust-card strong { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.landing-scene.landed .lander {
  top: 150px;
}

.landing-scene.landed .engine-flame {
  opacity: 0;
  animation: none;
}

.descent-line.is-final {
  color: #eaffef;
}

.descent-line.is-final span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: 0 auto 5px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: #3f8b65;
  font-size: 25px;
  line-height: 1;
}

.descent-line.is-final small {
  color: #214f3c;
  background: #e9f7ec;
}

@media (max-width: 700px) {
  .landing-scene.landed .lander {
    top: 124px;
  }

  .landing-scene.too-fast .lander {
    top: 100px;
  }
}

@media (max-width: 410px) {
  .landing-scene.landed .lander {
    top: 109px;
  }

  .landing-scene.too-fast .lander {
    top: 85px;
  }

  .descent-line.is-final {
    top: 78px;
    left: calc(50% + 20px);
  }

  .descent-line.is-final small {
    display: none;
  }
}