/* Only the theme chooser and optional help; lesson geometry is unchanged V4. */
.beginner-fixed .preparation-note { margin:0; }
/* Apply the fixed V4-016 reading-mode spacing, preserving the original sizes. */
.beginner-fixed [data-japanese-mode="hira"] ruby rt { line-height:.70; }
.beginner-fixed [data-japanese-mode="hira"] .step-info .outcome { line-height:1.50; }
.beginner-fixed [data-japanese-mode="hira"] .preparation-note,
.beginner-fixed [data-japanese-mode="hira"] .page-task-card > p { line-height:1.35; }
.beginner-fixed [data-japanese-mode="hira"] .step-info .page-task-card li { line-height:1.40; }
.beginner-fixed [data-japanese-mode="hira"] .try-card { line-height:1.50; padding-top:10px; }
.beginner-fixed [data-japanese-mode="hira"] .step-info:has(.page-task-card):has(.stage-preview):has(.try-card) { gap:7px; }
.beginner-fixed .beginner-theme-list { flex:1; min-height:0; overflow:auto; padding:16px; }
.beginner-fixed .beginner-theme { border:2px solid var(--ink); border-radius:13px; margin-bottom:10px; background:#fff; overflow:hidden; }
.beginner-fixed .beginner-theme > summary { display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 14px; font-size:15px; font-weight:900; list-style:none; }
.beginner-fixed .beginner-theme > summary::-webkit-details-marker { display:none; }
.beginner-fixed .beginner-theme > summary::before { content:'▸'; flex:none; }
.beginner-fixed .beginner-theme[open] > summary::before { content:'▾'; }
.beginner-fixed .beginner-theme-title { flex:1; }
.beginner-fixed .beginner-theme-number { display:grid; place-items:center; flex:none; width:25px; height:25px; border:2px solid var(--ink); border-radius:50%; background:#fff; }
.beginner-fixed .beginner-theme-count { color:#627195; font-size:11px; }
.beginner-fixed .beginner-map-note { margin:0; padding:14px 16px 0; font-size:13px; line-height:1.8; }
.beginner-fixed .beginner-theme[open] > summary { background:#e9edff; border-bottom:2px solid var(--ink); }
.beginner-fixed .beginner-theme-tasks { display:grid; gap:8px; padding:10px; }
.beginner-fixed .beginner-theme-tasks .map-item { width:100%; text-align:left; }
.beginner-fixed .beginner-map-groups { display:block; overflow:auto; }
.beginner-fixed .beginner-help-button { margin-left:auto; border:2px solid var(--ink); border-radius:999px; background:#fff; padding:5px 9px; cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }
.beginner-fixed dialog[data-beginner-dialog]:not([open]) { display:none; }
.beginner-fixed dialog[data-beginner-dialog] { position:fixed; inset:0; margin:auto; display:flex; flex-direction:column; width:min(840px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; color:var(--ink); border:3px solid var(--ink); border-radius:22px; background:#fff; box-shadow:0 6px 0 var(--ink); font-family:inherit; }
.beginner-fixed dialog[data-beginner-dialog]::backdrop { background:#1d2a4d99; }
.beginner-fixed .beginner-helper-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:12px 22px; border-bottom:2px solid #bac5dd; }
.beginner-fixed .beginner-helper-tabs button, .beginner-fixed .beginner-helper-body button { border:2px solid var(--ink); border-radius:9px; background:#fff; padding:8px 12px; font:inherit; font-weight:800; cursor:pointer; }
.beginner-fixed .beginner-helper-tabs button[aria-pressed="true"] { background:var(--blue); color:#fff; }
.beginner-fixed .beginner-helper-body { overflow:auto; min-height:0; padding:22px; font-size:15px; line-height:1.8; }
.beginner-fixed .beginner-helper-body p { margin:0 0 14px; }
.beginner-fixed .beginner-helper-body li { margin-bottom:12px; }
.beginner-fixed .beginner-helper-body label { display:block; margin:12px 0; font-weight:800; }
.beginner-fixed .beginner-helper-body input, .beginner-fixed .beginner-helper-body textarea { display:block; width:100%; padding:10px; border:2px solid #bac5dd; border-radius:9px; color:var(--ink); background:#fff; font:inherit; }
.beginner-fixed .beginner-helper-body output, .beginner-fixed .beginner-helper-body pre { display:block; padding:14px; background:var(--workspace); border-radius:12px; white-space:pre-wrap; font:inherit; }
.beginner-fixed .beginner-helper-body details { border:2px solid #bac5dd; border-radius:12px; padding:12px; margin:12px 0; }
.beginner-fixed .beginner-helper-body summary { cursor:pointer; font-weight:900; }
.beginner-fixed .beginner-story-button { align-self:center; }

/* Six visible choices replace the tiny numbered rail inside the same footer. */
.beginner-fixed .footer .step-rail.beginner-theme-nav { display:block; position:relative; min-width:0; }
.beginner-fixed .beginner-theme-dock { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.beginner-fixed .beginner-theme-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; height:74px; padding:5px 3px 4px; border:2px solid var(--ink); border-top:5px solid var(--theme-color); border-radius:13px; background:#fff; box-shadow:0 3px 0 var(--ink); cursor:pointer; font-weight:900; }
.beginner-fixed .beginner-theme-tile:hover { background:#f5f7ff; }
.beginner-fixed .beginner-theme-tile.is-current-theme { background:color-mix(in srgb,var(--theme-color) 14%,white); box-shadow:0 3px 0 var(--ink),inset 0 0 0 1px var(--theme-color); }
.beginner-fixed .beginner-theme-tile[aria-expanded="true"] { transform:translateY(-3px); box-shadow:0 6px 0 var(--ink); }
.beginner-fixed .beginner-dock-icon { display:grid; place-items:center; height:23px; }
.beginner-fixed .beginner-dock-icon img { display:block; width:27px; height:23px; object-fit:contain; }
.beginner-fixed .beginner-finish-symbol { color:var(--green); font-size:25px; line-height:1; }
.beginner-fixed .beginner-dock-label { font-size:15px; line-height:1.3; white-space:nowrap; }
.beginner-fixed [data-japanese-mode="hira"] .beginner-dock-label { padding-top:3px; }
.beginner-fixed .beginner-dock-progress { font-size:9px; line-height:1.25; white-space:nowrap; color:#627195; }
.beginner-fixed .is-current-theme .beginner-dock-progress { color:var(--ink); }
.beginner-fixed .beginner-dock-caret { position:absolute; top:3px; right:6px; font-size:13px; line-height:1; color:#627195; }
.beginner-fixed .beginner-task-sheet { position:absolute; z-index:8; left:0; right:0; bottom:calc(100% + 14px); display:flex; flex-direction:column; min-height:0; max-height:min(390px,calc(var(--shell-height,800px) - 220px)); border:3px solid var(--ink); border-radius:19px; background:#fff; box-shadow:0 6px 0 var(--ink),0 10px 32px #1d2a4d30; overflow:hidden; text-align:left; }
.beginner-fixed .beginner-task-sheet[hidden], .beginner-fixed .beginner-footer-task-group[hidden] { display:none; }
.beginner-fixed .beginner-task-sheet-head { display:flex; align-items:center; gap:12px; padding:10px 13px; color:#fff; background:var(--theme-color); border-bottom:2px solid var(--ink); }
.beginner-fixed .beginner-task-sheet-head h2 { display:flex; flex:1; align-items:center; gap:10px; min-width:0; margin:0; font-size:16px; line-height:1.6; }
.beginner-fixed .beginner-task-sheet-head h2 > img { width:25px; height:25px; object-fit:contain; }
.beginner-fixed .beginner-task-sheet-head h2 > .beginner-finish-symbol { color:#fff; }
.beginner-fixed .beginner-task-sheet-head button { flex:none; width:30px; height:30px; padding:0; border:2px solid #fff; border-radius:50%; background:transparent; color:#fff; font-size:23px; line-height:1; cursor:pointer; }
.beginner-fixed .beginner-task-sheet-note { margin:0; padding:9px 13px 0; font-size:12px; line-height:1.6; }
.beginner-fixed .beginner-task-sheet-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:11px 13px 14px; }
.beginner-fixed .beginner-footer-task-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.beginner-fixed .beginner-task-sheet .step-dot { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; height:auto; min-height:62px; padding:9px 10px; border:2px solid #bac5dd; border-radius:12px; background:#f8faff; color:var(--ink); box-shadow:0 2px 0 #bac5dd; font-size:13px; font-weight:900; text-align:left; }
.beginner-fixed .beginner-task-sheet .step-dot:hover { border-color:var(--ink); }
.beginner-fixed .beginner-task-sheet .step-dot.is-current { border-color:var(--theme-color); background:color-mix(in srgb,var(--theme-color) 10%,white); box-shadow:0 2px 0 var(--theme-color); }
.beginner-fixed .beginner-task-mark { display:grid; place-items:center; flex:none; width:24px; height:24px; border:2px solid #a8b5d0; border-radius:50%; background:#fff; color:#8b96b5; font-size:15px; }
.beginner-fixed .is-done .beginner-task-mark { border-color:var(--green); background:var(--green); color:#fff; }
.beginner-fixed .beginner-task-name { flex:1; min-width:0; line-height:1.6; }
.beginner-fixed .beginner-task-name small { display:block; font-size:10px; color:#627195; }
.beginner-fixed .beginner-task-arrow { flex:none; font-size:17px; color:#627195; }