body.guide-page {
    height: auto;
    min-height: 100%;
    user-select: text;
    touch-action: auto;
    font-size: 16px;
    line-height: 1.65;
}
.guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}
.guide-brand {
    font-size: 22px;
    letter-spacing: 0.16em;
    text-decoration: none;
}
.guide-page a { color: var(--fg); text-underline-offset: 3px; }
.guide-play {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--fg);
    border-radius: 8px;
    background: var(--start);
    color: #111 !important;
    text-decoration: none;
    font-weight: 600;
}
.guide-main { display: block; overflow: visible; max-width: 800px; margin: 0 auto; padding: 24px; }
.guide-main h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.2; letter-spacing: normal; margin: 12px 0 20px; }
.guide-main h2 { font-size: 23px; letter-spacing: normal; line-height: 1.3; margin-top: 36px; }
.guide-intro { font-size: 18px; }
.guide-main li { margin-bottom: 10px; }
.guide-ladder { list-style: none; padding: 0; }
.guide-ladder li { display: flex; gap: 18px; align-items: center; padding: 10px 0; }
.guide-ladder strong {
    flex: 0 0 108px;
    text-align: center;
    padding: 9px 8px;
    border: 1px solid var(--fg);
    border-radius: 8px;
    font-size: 18px;
    letter-spacing: 0.1em;
}
.example-start { background: var(--start); color: #111; }
.example-end { background: var(--end); color: #111; }
.guide-next { margin: 32px 0; }
.guide-footer { display: block; max-width: 800px; margin: 0 auto; padding: 24px; text-align: center; }
@media(max-width:420px) {
    .guide-header, .guide-main { padding: 20px; }
    .guide-ladder li { gap: 12px; align-items: flex-start; }
    .guide-ladder strong { flex-basis: 96px; font-size: 16px; }
}