.help-page { gap: 20px; }
.help-card { min-width: 0; border: 1px solid #ffffff20; border-radius: 12px; background: #18181bf5; overflow: hidden; }
.help-heading { margin: 0; padding: 14px 20px; text-align: center; color: #f5d76e; font: 700 26px/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.help-tabs { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid #ffffff20; }
.help-tabs label { padding: 13px; text-align: center; color: #bdb8ad; cursor: pointer; font: 600 16px/1.4 Inter, sans-serif; }
.help-tabs label + label { border-left: 1px solid #ffffff20; }
.help-tabs label:hover { background: #ffffff08; color: #fff; }
.help-mode, .help-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#help-screen:checked ~ .help-tabs label[for="help-screen"],
#help-keys:checked ~ .help-tabs label[for="help-keys"] { background: #f5d76e18; color: #f5d76e; box-shadow: inset 0 -2px #f5d76e; }
#help-screen:focus-visible ~ .help-tabs label[for="help-screen"],
#help-keys:focus-visible ~ .help-tabs label[for="help-keys"] { outline: 2px solid #ffcc1a; outline-offset: -5px; }
.help-control-panel { display: none; min-height: 390px; padding: 30px 22px; }
#help-screen:checked ~ .help-screen-panel { display: grid; place-items: center; }
#help-keys:checked ~ .help-keys-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.help-phone { position: relative; width: min(360px, 100%); aspect-ratio: 360 / 400; }
.help-phone img { position: absolute; height: auto; left: 2.777778%; bottom: 5.5%; }
.help-phone .help-phone-screen { width: 55.555556%; top: 5.5%; bottom: auto; opacity: .6; }
.help-phone .help-phone-frame { width: 61.111111%; top: 0; left: 0; bottom: auto; }
.help-phone .help-phone-accelerate { width: 96.944444%; }
.help-phone .help-phone-boost { width: 97.222222%; }
.help-phone .help-phone-steering { width: 34.166667%; }
.help-phone .help-phone-assist { width: 48.055556%; top: 5.5%; bottom: auto; }
.help-page kbd { display: inline-grid; place-items: center; min-width: 29px; height: 32px; padding: 0 8px; color: #f7f3ea; background: #302f32; border: 1px solid #ffffff40; border-bottom-width: 3px; border-radius: 5px; font: 600 14px/1 Inter, sans-serif; }
.help-key-diagram { display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; }
.help-key-diagram kbd { width: 48px; height: 48px; font-size: 22px; }
.help-key-up { grid-column: 2; }
.help-key-up + kbd { grid-column: 1; }
.help-primary-keys { display: grid; gap: 10px; color: #ede8de; font: 15px/1.5 Inter, sans-serif; }
.help-primary-keys > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; }
.help-primary-keys kbd { width: 64px; }
.help-primary-keys dd { display: flex; gap: 14px; }
.help-shortcuts { width: 100%; max-width: 360px; }
.help-shortcuts summary { display: block; width: fit-content; margin: auto; padding: 12px; min-height: 44px; color: #f5d76e; cursor: pointer; text-align: center; font: 600 14px/1.5 Inter, sans-serif; }
.help-shortcuts summary::-webkit-details-marker { display: none; }
.help-show-less, .help-shortcuts[open] .help-show-all { display: none; }
.help-shortcuts[open] .help-show-less { display: inline; }
.help-keys { margin-top: 12px; }
.help-keys > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; border-bottom: 1px solid #ffffff0d; font: 13px/1.5 Inter, sans-serif; color: #ede8de; }
.help-keys dd { display: flex; align-items: center; gap: 4px; color: #bdb8ad; }
.help-note { margin-top: 14px; color: #bdb8ad; font: 12px/1.6 Inter, sans-serif; }
.help-bonuses { list-style: none; display: grid; gap: 8px; padding: 4px 20px 18px; }
.help-bonuses li { display: flex; align-items: center; gap: 16px; color: #ede8de; font: 15px/1.5 Inter, sans-serif; }
.help-bonuses img { width: 112px; height: 76px; object-fit: contain; flex-shrink: 0; }
.help-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 22px; }
.help-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #c8bfae; font: 13px/1.5 Inter, sans-serif; text-underline-offset: 4px; }
.help-info { margin-top: -20px; }
.help-info a { color: #a7a398; font-size: 12px; }
.help-page a:hover { color: #fff; }
.help-page a:focus-visible, .help-shortcuts summary:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 3px; border-radius: 3px; }
@media (max-width: 480px) {
    .help-control-panel { min-height: 350px; padding: 24px 16px; }
    .help-bonuses { padding-inline: 14px; }
    .help-bonuses li { gap: 12px; font-size: 14px; }
    .help-bonuses img { width: 88px; height: 60px; }
    .help-keys kbd { padding-inline: 5px; min-width: 25px; font-size: 12px; }
}