.lesson-board-toolbar:has(.lesson-help-button) { grid-template-columns: 36px minmax(0, 1fr) auto; }
.lesson-board-actions { display: flex; align-items: center; gap: 7px; }
.lesson-help-button svg { display: block; width: 18px; height: 18px; }
.lesson-help-button path { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.lesson-help-button circle { fill: currentColor; }
body.lesson-help-open { overflow: hidden; }
.lesson-help-dialog {
    width: min(480px, calc(100vw - 12px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: var(--ink, #492d24);
}
.lesson-help-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    max-height: calc(100dvh - 32px);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #d9c4b5;
    border-radius: var(--radius-limit, 14px);
    background: linear-gradient(145deg, #fff9ed, #fffdf8 65%);
    color: var(--ink, #492d24);
    box-shadow: 0 7px 0 #c4a98e, 0 24px 70px #241f1b55;
    font-family: var(--sans);
    overflow: hidden;
    touch-action: pan-y;
}
.lesson-help-header { position: relative; flex-shrink: 0; padding: 24px 24px 12px; }
.lesson-help-body { min-height: 0; padding: 0 24px 20px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.lesson-help-header .lesson-help-eyebrow { margin-bottom: 0; }
.lesson-help-dialog::backdrop { background: #241f1b99; backdrop-filter: blur(4px); }
.lesson-help-close {
    position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0; border: 1px solid #d4bda5;
    border-radius: 9px; background: var(--mobile-header-cream, #fff4df);
    color: #ad4635; box-shadow: 0 3px 0 #c4a98e; font: 800 24px/1 var(--sans); cursor: pointer;
}
.lesson-help-eyebrow { margin: 0 35px 12px 0; color: #88705b; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.lesson-help-eyebrow { text-transform: uppercase; }
.lesson-help-notice { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: #fff0d5; color: #785329; font-size: 12px; line-height: 1.4; }
.page-help-art { display: block; width: 100px; height: 100px; object-fit: contain; }
.page-help-caption { margin-top: 10px; font: 800 14px/1.3 var(--sans); text-align: center; color: #67554d; }
.page-help-heading { position: relative; padding-inline-end: 46px; }
.page-help-button {
    display: inline-grid; place-items: center; flex: 0 0 34px;
    width: 34px; height: 32px; min-height: 0; padding: 0;
    border: 1px solid #d4bda5; border-radius: 9px;
    background: var(--mobile-header-cream, #fff4df); color: #ad4635;
    box-shadow: inset 0 1px 0 #fffdf8, inset 0 -1px 0 #ead8c3, 0 4px 0 #c4a98e, 0 6px 8px #79451f1a;
    cursor: pointer; vertical-align: middle; text-transform: none; letter-spacing: normal;
}
.page-help-button:focus-visible { outline: 3px solid #168675; outline-offset: 3px; }
.page-help-heading > .page-help-button { position: absolute; top: 0; right: 0; margin: 0; }
.puzzle-workout-launch-head.page-help-heading { min-height: 36px; align-items: center; }
.page-help-entry-toolbar { display: flex; justify-content: flex-end; width: 100%; margin: 0 0 8px; }
.page-help-board-toolbar { grid-template-columns: minmax(38px, 1fr) auto minmax(80px, 1fr) !important; }
.page-help-board-toolbar:has(> .puzzle-copy-button:not([hidden])) { grid-template-columns: minmax(38px, 1fr) auto minmax(130px, 1fr) !important; }
.page-help-board-toolbar > .page-help-button { grid-column: 3; grid-row: 1; justify-self: end; margin: 0 46px 4px 0 !important; }
.page-help-board-toolbar > .puzzle-copy-button { margin-right: 88px !important; }
.page-help-flex-tools > .page-help-button { margin: 0; }
@media (max-width: 620px) {
    .play-board-meta.page-help-board-toolbar > .page-help-button { width: 32px; height: 30px; margin-bottom: 0 !important; }
}
.custom-board-topline.page-help-tools::after { display: none; }
.custom-board-topline.page-help-tools > .page-help-button { grid-column: 3; grid-row: 1; justify-self: end; }
.lesson-help-dialog h2 { margin: 0; padding-right: 12px; font: 800 clamp(23px, 5vw, 28px)/1.15 var(--serif); letter-spacing: -.03em; }
.lesson-help-dialog h2:focus { outline: none; }
.lesson-help-dialog button:focus-visible { outline: 3px solid #168675; outline-offset: 4px; }
.lesson-help-visual { position: relative; display: grid; place-items: center; min-height: 180px; margin: 20px 0; padding: 15px 10px 26px; border-radius: 12px; background: #efe5d766; }
.lesson-help-fox { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; }
.lesson-help-fox > img { width: 80px; height: 80px; z-index: 1; object-fit: contain; }
.lesson-help-fox > div { position: relative; padding: 14px; border: 1px solid #d9c4b5; border-radius: 12px; background: #fffaf3; box-shadow: 0 4px 0 #cfa58d; }
.lesson-help-fox strong { display: block; font-size: 14px; line-height: 1.3; }
.lesson-help-fox p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
.lesson-help-board-wrap { position: relative; width: min(190px, 100%); aspect-ratio: 1; }
.lesson-help-dialog .lesson-help-board { position: absolute; top: 0; left: 0; margin: 0; transform-origin: top left; pointer-events: none; }
.lesson-help-journey { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.lesson-help-journey > div { position: relative; display: grid; gap: 9px; justify-items: center; }
.lesson-help-journey b { display: grid; place-items: center; width: 60px; height: 42px; border-radius: 10px; background: #7557d6; color: white; box-shadow: 0 4px 0 #493687; font-size: 18px; }
.lesson-help-journey span { font-size: 12px; font-weight: 800; }
.lesson-help-continue { display: flex; gap: 40px; margin-top: 24px; padding: 8px 16px; border-radius: 9px; background: var(--green, #078b74); color: white; font-size: 13px; font-weight: 800; }
#lesson-help-copy { margin: 0; font-size: 15px; line-height: 1.6; }
.lesson-help-note { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid #d8b990; color: #78604c; font-size: 13px; line-height: 1.5; }
.lesson-help-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 18px; border-top: 1px solid #e7dacc; background: #fffaf1; }
.lesson-help-footer .lesson-help-next { margin-left: auto; }
.help-all-topics { min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--green-dark, #315e50); font: 800 13px var(--sans); cursor: pointer; }
.help-topic-list { display: grid; gap: 8px; margin-top: 18px; }
.help-topic-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px; border: 1px solid #dbcbb9; border-radius: 9px; background: #fffdf7; color: var(--ink, #492d24); text-align: left; font: 700 14px/1.4 var(--sans); cursor: pointer; }
.help-topic-link::after { content: '→'; margin-left: auto; color: var(--green-dark, #315e50); }
.help-topic-link:hover { background: var(--green-soft, #e4eee7); border-color: var(--green, #078b74); }
.help-topic-list[hidden], .help-all-topics[hidden], .help-carousel-controls[hidden], .lesson-help-note[hidden] { display: none; }
.lesson-help-body > #lesson-help-title + .lesson-help-notice[hidden] + .lesson-help-visual[hidden] + #lesson-help-copy { margin-top: 12px; }
.lesson-help-dots { display: flex; gap: 5px; margin-right: auto; }
.lesson-help-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d8cabb; }
.lesson-help-dots .is-current { width: 18px; border-radius: 4px; background: #078b74; }
.lesson-help-next { min-width: 110px; display: flex; justify-content: space-between; gap: 20px; }
@media (max-width: 360px) {
    .lesson-help-header { padding: 24px 18px 12px; }
    .lesson-help-body { padding: 0 18px 16px; }
    .lesson-help-footer { padding: 10px 18px 14px; }
    .lesson-help-visual { min-height: 150px; margin: 16px 0; padding: 12px 8px 20px; }
    .lesson-help-board-wrap { width: min(160px, 100%); }
    #lesson-help-copy { font-size: 14px; }
    .lesson-help-note { font-size: 12px; }
    .lesson-help-fox { grid-template-columns: 50px minmax(0, 1fr); }
    .lesson-help-fox > img { width: 60px; height: 60px; }
    .lesson-help-fox > div { padding: 11px; }
    .lesson-help-journey { gap: 12px; }
}
.lesson-help-dots { min-width: 0; color: #88705b; font: 800 11px var(--sans); white-space: nowrap; }
.help-specific-visual { min-height: 115px; gap: 12px; padding: 18px 12px; }
.help-real-preview { position: relative; max-width: 100%; }
.lesson-help-dialog { touch-action: pan-y; }
.page-help-navigation-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-help-navigation-row > .strategy-back { margin: 0; }
.page-help-navigation-row > .page-help-button { margin: 0 0 4px; }
.page-help-coach-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; min-height: 36px; }
.page-help-coach-row > span { color: var(--ink); font: 800 18px/1.2 var(--sans); }
.page-help-coach-topline > .eyebrow { margin-right: auto; }
.page-help-coach-topline > .page-help-button { margin-bottom: 4px; }
.page-help-live-tip { position: relative; margin: 8px 0 12px; padding: 12px 44px 12px 14px; border: 1px solid #d9c4b5; border-radius: 10px; background: #fff9ed; color: var(--ink, #492d24); font: 600 13px/1.5 var(--sans); }
.page-help-live-tip p { margin: 0; }
.page-help-live-tip small { display: block; margin-top: 4px; color: #78604c; font-size: 11px; }
.page-help-live-tip button { position: absolute; top: 0; right: 0; width: 40px; height: 44px; border: 0; background: transparent; color: #ad4635; font: 800 24px var(--sans); cursor: pointer; }
.page-help-live-tip button:focus-visible { outline: 3px solid #168675; outline-offset: -3px; }

.lesson-help-visual[hidden] { display: none; }
.help-control-reference { display: block; width: auto; height: auto; max-width: 100%; max-height: 230px; object-fit: contain; }
.help-real-preview { overflow: clip; overflow-clip-margin: 6px; }

.help-carousel-controls { position: absolute; inset: 0; pointer-events: none; }
.lesson-help-dialog .help-carousel-arrow {
    display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: auto;
    width: 32px; height: 40px; padding: 0; border: 1px solid rgba(56,80,60,.38);
    border-radius: 999px; background: rgba(255,254,250,.94);
    box-shadow: 0 5px 18px rgba(34,35,31,.16); color: var(--green-dark, #315e50);
    font: 800 20px/1 var(--sans); cursor: pointer;
}
.lesson-help-dialog [data-help-previous] { left: 4px; }
.lesson-help-dialog [data-help-next] { right: 4px; }
.lesson-help-dialog .help-carousel-arrow:hover:not(:disabled) { border-color: var(--green, #078b74); background: var(--green-soft, #e4eee7); }
.lesson-help-dialog .help-carousel-arrow:disabled { cursor: default; opacity: .32; }
@media (max-width: 360px) {
    .lesson-help-footer { gap: 8px; }
    .lesson-help-next { min-width: 96px; gap: 12px; }
}

/* Puzzle help points to real controls in the page. */
.puzzle-help-tour[open] { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--ink,#492d24); overflow:hidden; }
.puzzle-help-tour::backdrop { background:transparent; }
.puzzle-tour-spotlight { position:fixed; border-radius:10px; box-shadow:0 0 0 200vmax rgba(24,20,18,.68); outline:2px solid #fff3d7; pointer-events:none; }
.puzzle-tour-bubble { position:fixed; box-sizing:border-box; width:min(340px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); overflow:visible; padding:10px 12px; border:1px solid #c7ac94; border-radius:12px; background:linear-gradient(180deg,#fffdf8,#fff5e8); box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 #edd7be,0 5px 0 #ae896b,0 10px 20px #0005; font:600 13px/1.4 var(--sans,sans-serif); }
.puzzle-tour-bubble header,.puzzle-tour-bubble footer { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.puzzle-tour-bubble h2 { font-size:17px; font-weight:800; line-height:1.2; margin:6px 0; outline:none; }
.puzzle-tour-bubble p { margin:6px 0; }
.puzzle-tour-bubble button { min-height:36px; padding:5px 11px; border:1px solid #c3a388; border-radius:8px; background:linear-gradient(#fffefa,#f0ddc7); box-shadow:inset 0 1px 0 #fff,0 3px 0 #ac8666,0 5px 7px #63462b26; color:#492d24; font:inherit; cursor:pointer; }
.puzzle-tour-bubble [data-next] { background:linear-gradient(#d86b50,#b74732); color:white; border-color:#a33c2a; box-shadow:inset 0 1px 0 #ffffff65,0 3px 0 #84301f,0 5px 7px #63302433; text-shadow:0 1px 0 #84301f; }
.puzzle-tour-bubble [data-close] { min-width:30px; min-height:30px; padding:2px 8px; }
.puzzle-tour-bubble footer { margin-top:8px; padding-bottom:3px; }
.puzzle-tour-bubble button:active:not(:disabled) { transform:translateY(2px); box-shadow:inset 0 1px 2px #63302426,0 1px 0 #ac8666; }
.puzzle-tour-bubble [data-next]:active { box-shadow:inset 0 1px 2px #63302440,0 1px 0 #84301f; }
.puzzle-tour-bubble button:disabled { opacity:.4; cursor:default; }
.puzzle-tour-bubble button:focus-visible { outline:3px solid #c77b39; outline-offset:2px; }
.puzzle-tour-arrow { position:absolute; left:calc(var(--arrow-left) - 7px); width:14px; height:14px; background:#fffaf3; transform:rotate(45deg); pointer-events:none; }
.puzzle-tour-bubble[data-side=below] .puzzle-tour-arrow { position:absolute; top:-7px; border-top:1px solid #d9c4b5; border-left:1px solid #d9c4b5; }
.puzzle-tour-bubble[data-side=above] .puzzle-tour-arrow { position:absolute; bottom:-7px; border-bottom:1px solid #d9c4b5; border-right:1px solid #d9c4b5; }
@media(max-height:420px) { .puzzle-tour-bubble { overflow:auto; } }