body { background: radial-gradient(ellipse at top right, #34205b, transparent 65%), #091422; }
main { width: min(1040px, calc(100% - 36px)); }
h1 { max-width: 19ch; color: #fff2c7; }
h2 { color: #ffcf65; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; margin-top: 12px; }
h3 { margin-top: 0; font-size: 1.3rem; }
section { scroll-margin-top: 24px; padding: 32px 0; border-bottom: 1px solid #34495e; }
.guide-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 28px 0 12px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.control-grid .card { margin: 12px 0; border-color: #507185; border-radius: 8px; }
.keyline { color: #fff2c7; font-weight: 750; }
kbd { display: inline-block; border: 1px solid #8ee6ff; border-bottom-width: 3px; border-radius: 5px; padding: 2px 10px; font: inherit; }
.mode-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 28%); gap: 36px; align-items: start; }
figure { margin: 24px 0 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid #507185; border-radius: 8px; }
figcaption { color: #a4bbce; font-size: .85rem; margin: 8px 0; }
.play-card { border-color: #ffcf65; border-radius: 8px; }
.skip { position: absolute; top: -100px; left: 18px; background: #071b2a; padding: 12px; z-index: 1; }
.skip:focus { top: 8px; }
@media(max-width: 650px) { .control-grid, .mode-section { grid-template-columns: 1fr; } .mode-section { gap: 8px; } figure { width: min(100%, 280px); margin: 0 auto 12px; } }