.help-dialog{--lesson-mine:#c7354a;--lesson-mine-soft:#fbe9ed;--lesson-safe:#21804b;--lesson-safe-soft:#e1f2e8;width:min(920px,calc(100% - 32px));height:min(820px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden}
.help-dialog[open]{display:flex;flex-direction:column}.help-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px;flex-shrink:0}.help-header h2{font-size:20px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}.help-header h2 svg{color:var(--green);width:21px;height:21px}
.help-tabs{display:flex;gap:22px;padding:0 24px;border-bottom:1px solid var(--line);flex-shrink:0}.help-tabs button{min-width:0;min-height:44px;padding:12px 0;font-size:12px;color:var(--muted);border-bottom:2px solid transparent}.help-tabs button[aria-selected=true]{border-color:var(--green);color:var(--green);font-weight:600}
.help-lessons{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:0;flex:1}.help-nav{padding:16px 12px;border-right:1px solid var(--line);overflow:auto}.help-nav h3{font-size:10px;font-weight:500;color:var(--muted);margin:16px 10px 8px}.help-nav h3:first-child{margin-top:6px}.help-nav button{display:block;width:100%;padding:11px 10px;font-size:12px;text-align:left;line-height:1.5;border-left:2px solid transparent}.help-nav button:hover{background:var(--bg)}.help-nav button[aria-current=true]{background:var(--green-soft);color:var(--green);border-left-color:var(--green);font-weight:550}
.help-panel{min-height:0;overflow:auto;padding:24px 30px 30px;scrollbar-width:thin}.help-lesson-picker{display:none}.lesson-heading>span{font-size:10px;color:var(--green)}.lesson-heading h3{font-size:21px;font-weight:600;line-height:1.5;margin:7px 0 10px;overflow-wrap:anywhere}.lesson-intro{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 18px}
.lesson-modes{display:flex;gap:3px;background:var(--line);padding:3px;border-radius:5px;width:max-content}.lesson-modes button{font-size:11px;min-width:85px;height:30px;border-radius:3px;color:var(--muted)}.lesson-modes button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:550}
.lesson-figure{margin:22px 0 16px;border-bottom:1px solid var(--line);padding-bottom:17px}.lesson-board-heading{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;margin-bottom:16px}.lesson-board-heading>span:last-child{color:var(--red)}
.lesson-board{display:grid;grid-template-columns:repeat(var(--lesson-cols),minmax(0,1fr));gap:5px;width:min(100%,calc(var(--lesson-cols)*52px + (var(--lesson-cols) - 1)*5px));margin:0 auto;user-select:none}.lesson-cell{position:relative;min-width:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--tile-open);border:1px solid transparent;border-radius:4px;font:650 22px/1 ui-rounded,-apple-system,sans-serif;color:var(--muted);padding:0}
.lesson-cell.unknown{background:var(--covered);color:var(--green);box-shadow:inset 0 -2px 0 var(--tile-border)}.lesson-cell.focused{outline:2px solid #be9b43;outline-offset:-2px;background:#f7edcf;color:#786226}.lesson-cell.is-mine,.lesson-cell.selected[data-mark=mines]{background:var(--lesson-mine-soft);color:var(--lesson-mine);box-shadow:none}.lesson-cell.is-safe,.lesson-cell.selected[data-mark=safe]{background:var(--lesson-safe-soft);color:var(--lesson-safe);box-shadow:none}.lesson-cell.selected{outline:2px solid currentColor;outline-offset:-2px}.lesson-cell[data-number="1"]{color:#4c84bd}.lesson-cell[data-number="2"]{color:#38826a}.lesson-cell[data-number="3"]{color:#ca705f}.lesson-cell small{position:absolute;top:4px;left:5px;font:500 9px/1 -apple-system,sans-serif}.lesson-cell svg{width:20px;height:20px}.lesson-cell.is-mine svg,.lesson-cell.selected[data-mark=mines] svg{fill:currentColor}.lesson-cell.is-safe svg,.lesson-cell.selected[data-mark=safe] svg{stroke-width:3}.lesson-cell:focus-visible{outline:3px solid #5884bd;outline-offset:2px}
.lesson-relations{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:16px 0 0}.lesson-relations p{margin:0;font:12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}.lesson-figure figcaption{font-size:10px;color:var(--muted);line-height:1.7;margin-top:16px}
.lesson-cell.assumed-mine{background:var(--lesson-mine-soft);color:var(--lesson-mine)}.lesson-cell.assumed-safe{background:var(--lesson-safe-soft);color:var(--lesson-safe)}.lesson-cell.assumed-mine,.lesson-cell.assumed-safe{border:2px dashed currentColor;outline:none;box-shadow:none}.lesson-cell.assumed-mine svg{fill:currentColor}.lesson-cell.assumed-safe svg{stroke-width:3}.assumption-mark{position:absolute;top:3px;right:4px;font:700 12px/1 -apple-system,sans-serif}.lesson-cell.conflict{background:var(--lesson-mine-soft);color:var(--lesson-mine);outline:3px solid var(--lesson-mine);outline-offset:-3px}.lesson-cell.conflict::after{content:'!';position:absolute;top:3px;right:4px;font:700 12px/1 -apple-system,sans-serif}
.help-step-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.help-step-toolbar>span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.help-step-toolbar>div{display:flex;gap:4px}.help-step-toolbar .icon-button{width:33px;height:33px}.previous-arrow svg{transform:rotate(180deg)}.help-step-text{min-height:64px;margin:12px 0 14px;font-size:13px;line-height:1.9}.help-equations{border-left:2px solid var(--green);padding-left:13px;min-height:30px}.help-equations p{font:12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;margin:3px 0;color:var(--green);overflow-wrap:anywhere}
.help-question{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.8;margin:17px 0}.help-question>svg{width:21px;height:21px;margin-top:2px}.help-question>span{min-width:0}.help-question strong{display:block;font-weight:600;margin-bottom:4px}.help-question[data-mark=mines]>svg,.help-question[data-mark=mines] strong{color:var(--lesson-mine)}.help-question[data-mark=mines]>svg{fill:currentColor}.help-question[data-mark=safe]>svg,.help-question[data-mark=safe] strong{color:var(--lesson-safe)}.help-question[data-mark=safe]>svg{stroke-width:3}.help-practice-actions{display:flex;gap:10px;flex-wrap:wrap}.help-practice-actions button{font-size:11px;min-height:38px;padding:9px 13px}.help-practice-actions svg{width:15px;height:15px}.help-feedback{font-size:12px;line-height:1.9;min-height:60px;margin:17px 0 0}.help-feedback[data-state=correct]{color:var(--green)}.help-feedback[data-state=retry]{color:var(--red)}
.help-rules{overflow:auto;min-height:0;padding:10px 30px 30px;font-size:13px;line-height:1.9}.help-rules h3{font-size:16px;font-weight:600;margin:22px 0 10px}.help-rules p{color:var(--muted);margin:8px 0 16px}.help-rules table{border-collapse:collapse;width:100%;font-size:12px}.help-rules th,.help-rules td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left;vertical-align:top}.help-rules th{font-weight:550;width:105px}.help-rules td{color:var(--muted)}
[data-theme=dark] .help-dialog{--lesson-mine:#ff7989;--lesson-mine-soft:#472e34;--lesson-safe:#65d69b;--lesson-safe-soft:#253e32}[data-theme=dark] .lesson-cell.focused:not(.is-mine):not(.is-safe):not(.assumed-mine):not(.assumed-safe):not(.conflict){background:#4a412b;color:#f2d486}[data-theme=dark] .lesson-cell[data-number="1"]{color:#8cb3df}[data-theme=dark] .lesson-cell[data-number="2"]{color:#8ecba9}[data-theme=dark] .lesson-cell[data-number="3"]{color:#e49d89}
[data-theme=dark] .lesson-cell.assumed-mine,[data-theme=dark] .lesson-cell.conflict{background:var(--lesson-mine-soft);color:var(--lesson-mine)}[data-theme=dark] .lesson-cell.assumed-safe{background:var(--lesson-safe-soft);color:var(--lesson-safe)}
@media(max-width:650px){.help-dialog{width:calc(100% - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px)}.help-header{padding:12px 15px 6px}.help-header h2{font-size:18px}.help-tabs{padding:0 18px}.help-lessons{display:flex;flex-direction:column}.help-nav{display:none}.help-panel{padding:18px 19px 24px}.help-lesson-picker{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);margin-bottom:20px}.help-lesson-picker select{font:12px -apple-system,sans-serif;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:4px;min-height:36px;width:100%;padding:7px 9px}.lesson-heading h3{font-size:19px}.lesson-intro{font-size:12px}.lesson-cell{font-size:20px}.lesson-cell svg{width:18px;height:18px}.help-step-text{font-size:12px;min-height:86px}.help-rules{padding:8px 18px 24px}.help-rules th{width:78px}.help-rules th,.help-rules td{padding:10px 5px}.help-equations p{font-size:11px}.lesson-relations{gap:3px 13px}.lesson-relations p{font-size:11px}}

.help-rules .medal-table { table-layout: fixed; font-variant-numeric: tabular-nums; }
.help-rules { flex: 1; }
.help-rules:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.help-rules .medal-table th, .help-rules .medal-table td { width: auto; vertical-align: middle; overflow-wrap: anywhere; }
.help-rules .medal-table th:first-child { width: 22%; }
.medal-table thead th { color: var(--text); }
.medal-grade { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.medal-grade img { display: block; width: 64px; height: 96px; object-fit: contain; }
.medal-table strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.medal-single { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.medal-rules { padding-left: 18px; margin: 14px 0 20px; color: var(--muted); font-size: 12px; }
.medal-rules li { padding-left: 2px; margin: 6px 0; }
@media (max-width: 650px) {
  .help-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .help-tabs button { padding: 10px 4px; }
  .help-rules .medal-table th:first-child { width: 64px; }
  .help-rules .medal-table th, .help-rules .medal-table td { padding: 10px 4px; }
  .medal-grade { gap: 4px; }
  .medal-grade img { width: 42px; height: 63px; }
}