* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #0a0a1a; color: white; }

        /* 復習モードのバナー（?review=1 で表示） */
        .review-banner {
            background: linear-gradient(135deg, #4338ca, #6366f1);
            color: #eef2ff; font-size: 13.5px; line-height: 1.6;
            padding: 11px 20px; text-align: center;
        }
        .review-banner b { color: #fff; }

        /* ===== 「答えを見る」前の1クッション ===== */
        #answer-guard {
            position: fixed; inset: 0; z-index: 9998;
            background: rgba(4, 4, 20, 0.82);
            backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        #answer-guard[hidden] { display: none; }
        #answer-guard-box {
            width: 100%; max-width: 380px; text-align: center;
            background: linear-gradient(160deg, #1c1407, #12100a);
            border: 2px solid #f59e0b; border-radius: 18px; padding: 26px 22px;
        }
        #answer-guard .ag-icon { font-size: 34px; margin-bottom: 8px; }
        #answer-guard .ag-title { font-size: 17px; font-weight: 800; color: #fcd34d; margin-bottom: 8px; }
        #answer-guard .ag-desc { font-size: 13.5px; line-height: 1.7; color: #d1d5db; margin-bottom: 18px; }
        #answer-guard .ag-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
        #answer-guard .btn-primary { --btn-accent: #f59e0b; background: linear-gradient(135deg, #f59e0b, #d97706); }

        /* ===== クエストクリア報酬オーバーレイ ===== */
        #reward-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(4, 4, 20, 0.82);
            backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
            animation: rw-fade 0.25s ease;
        }
        #reward-overlay[hidden] { display: none; }
        @keyframes rw-fade { from { opacity: 0; } to { opacity: 1; } }

        #reward-modal {
            position: relative;
            width: 100%; max-width: 420px;
            background: linear-gradient(160deg, #16162e, #0d0d20);
            border: 2px solid #4a4aff;
            border-radius: 20px;
            padding: 30px 26px 26px;
            text-align: center;
            box-shadow: 0 0 60px rgba(74,74,255,0.35);
            animation: rw-pop 0.36s cubic-bezier(.2,1.3,.4,1);
            max-height: 90vh; overflow-y: auto;
        }
        @keyframes rw-pop {
            from { transform: scale(0.86) translateY(14px); opacity: 0; }
            to   { transform: none; opacity: 1; }
        }

        #reward-close {
            position: absolute; top: 10px; right: 14px;
            background: none; border: none; color: #64748b;
            font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
        }
        #reward-close:hover { color: #e2e8f0; }

        .rw-burst { font-size: 54px; line-height: 1; animation: rw-bounce 0.7s ease; }
        @keyframes rw-bounce {
            0% { transform: scale(0.3) rotate(-18deg); }
            60% { transform: scale(1.18) rotate(6deg); }
            100% { transform: none; }
        }
        .rw-title {
            font-size: 22px; font-weight: 900; color: #34d399;
            margin: 8px 0 18px; letter-spacing: 0.02em;
        }

        .rw-xp { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
        .rw-xp-num {
            font-size: 46px; font-weight: 900; color: #fbbf24;
            text-shadow: 0 0 24px rgba(251,191,36,0.5);
        }
        .rw-xp-unit { font-size: 18px; font-weight: 800; color: #fbbf24; }
        .rw-bonus { font-size: 12.5px; color: #a5b4fc; margin-top: 6px; }
        .rw-bonus[hidden] { display: none; }
        /* 連続学習日数（通常クリアで出す） */
        .rw-streak {
            margin-top: 12px; display: inline-block;
            background: #2a1608; border: 1px solid #f59e0b; color: #fcd34d;
            padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: bold;
        }

        .rw-levelup {
            margin: 18px 0 4px; padding: 14px;
            background: linear-gradient(135deg, #4338ca, #7c3aed);
            border-radius: 12px;
            animation: rw-glow 1.4s ease-in-out infinite alternate;
        }
        .rw-levelup[hidden] { display: none; }
        @keyframes rw-glow {
            from { box-shadow: 0 0 8px rgba(124,58,237,0.4); }
            to   { box-shadow: 0 0 26px rgba(124,58,237,0.85); }
        }
        .rw-levelup-label {
            font-size: 11px; font-weight: 900; letter-spacing: 0.22em; color: #fde68a;
        }
        .rw-levelup-num { font-size: 19px; font-weight: 900; color: white; margin-top: 3px; }

        .rw-level-row {
            display: flex; align-items: center; gap: 10px; margin-top: 22px;
        }
        .rw-lv-tag { font-size: 11px; font-weight: 800; color: #818cf8; white-space: nowrap; }
        .rw-bar-wrap {
            flex: 1; height: 9px; border-radius: 99px;
            background: #1e1b4b; overflow: hidden;
        }
        .rw-bar-fill {
            height: 100%; width: 0%; border-radius: 99px;
            background: linear-gradient(90deg, #6366f1, #fbbf24);
            transition: width 0.9s cubic-bezier(.2,.8,.2,1);
        }
        .rw-next-text { font-size: 11.5px; color: #64748b; margin-top: 8px; }

        .rw-badges {
            margin-top: 22px; padding-top: 18px;
            border-top: 1px solid #1f2937;
        }
        .rw-badges[hidden] { display: none; }
        .rw-badges-title {
            font-size: 13px; font-weight: 800; color: #fbbf24; margin-bottom: 12px;
        }
        .rw-badge {
            display: flex; align-items: center; gap: 12px;
            background: #111827; border: 1.5px solid #fbbf24;
            border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
            text-align: left;
            animation: rw-slide 0.45s ease backwards;
        }
        @keyframes rw-slide {
            from { transform: translateX(-14px); opacity: 0; }
            to   { transform: none; opacity: 1; }
        }
        .rw-badge-icon { font-size: 30px; }
        .rw-badge-name { font-size: 14px; font-weight: 800; color: white; }
        .rw-badge-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }

        /* コース修了（最後のクエストをクリアしたとき） */
        .rw-course-complete {
            margin-top: 22px; padding: 20px 18px;
            border-radius: 14px;
            background: linear-gradient(135deg, #fffbeb, #fef3c7);
            border: 1.5px solid #c7a44a;
            text-align: center;
        }
        .rw-cc-title {
            font-size: 17px; font-weight: 800; color: #a1893f;
            letter-spacing: 0.04em;
        }
        .rw-cc-name {
            font-size: 15px; font-weight: 800; color: #1e1b4b; margin-top: 6px;
        }
        .rw-cc-desc {
            font-size: 12.5px; color: #7c6a35; margin-top: 6px; line-height: 1.7;
        }
        .rw-cc-btn {
            display: inline-block; margin-top: 14px;
            padding: 11px 26px; border-radius: 10px;
            background: linear-gradient(135deg, #c7a44a, #a1893f);
            color: white; text-decoration: none;
            font-size: 14px; font-weight: 800;
            box-shadow: 0 3px 10px rgba(160, 130, 50, 0.32);
        }
        .rw-cc-btn:hover { filter: brightness(1.07); }

        .rw-continue {
            margin-top: 24px; width: 100%;
            padding: 13px; border: none; border-radius: 11px;
            background: #4a4aff; color: white;
            font-size: 15.5px; font-weight: 800; font-family: inherit;
            cursor: pointer; transition: background 0.2s;
        }
        .rw-continue:hover { background: #3a3ae0; }

        /* ===== ボタン3段階 =====
           Primary   … 前に進む主動作（実行 / 次のクエストへ / クエストを開始）
           Secondary … 補助動作（ヒント / スライドを見る / もう一度試す）
           Tertiary  … 逃げ道・脇道（リセット / 答えを見る / 戻る / シェア）
           色みが要る場合は --btn-accent を上書きする（例: ヒント=amber） */
        .btn-primary, .btn-secondary, .btn-tertiary {
            font-family: inherit; cursor: pointer; white-space: nowrap;
            transition: opacity 0.2s, background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
        }
        .btn-primary {
            --btn-accent: #4a4aff;
            background: linear-gradient(135deg, #4a4aff, #6366f1); color: #fff; border: none;
            padding: 12px 22px; border-radius: 10px; font-size: 15px; font-weight: bold;
            letter-spacing: 0.02em;
        }
        .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        .btn-primary:active { transform: translateY(0); }
        .btn-secondary {
            --btn-accent: #818cf8;
            background: transparent; border: 1px solid var(--btn-accent); color: var(--btn-accent);
            padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: bold;
        }
        .btn-secondary:hover { background: color-mix(in srgb, var(--btn-accent) 12%, transparent); }
        .btn-tertiary {
            --btn-accent: #9ca3af;
            background: transparent; border: none; color: var(--btn-accent);
            padding: 6px 8px; border-radius: 6px; font-size: 13px; font-weight: normal;
            text-decoration: underline; text-underline-offset: 3px;
        }
        .btn-tertiary:hover { color: #e5e7eb; background: rgba(255,255,255,0.04); }

        .header {
            background: #111827; padding: 9px 20px; display: flex;
            align-items: center; gap: 14px; border-bottom: 2px solid #4a4aff;
        }
        .header a { color: #9ca3af; text-decoration: none; font-size: 14px; white-space: nowrap; }
        .header a:hover { color: white; }
        .header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        /* 1行目: どのコースの何問目か */
        .header-breadcrumb {
            display: flex; align-items: center; gap: 7px;
            font-size: 11.5px; color: #6b7280; font-weight: bold;
        }
        .header-breadcrumb .hb-course { color: #a5b4fc; }
        .header-breadcrumb .hb-sep { color: #374151; }
        .header-breadcrumb .hb-progress { color: #9ca3af; letter-spacing: 0.03em; }
        .header-breadcrumb .hb-total { color: #4b5563; }
        /* C-4: 新レイアウトのみ。breadcrumb の下にコース内の現在位置を細いバーで示す */
        .header-progress {
            height: 4px; width: 100%; max-width: 260px;
            background: #1e1b4b; border-radius: 99px; overflow: hidden; margin: 1px 0 2px;
        }
        .header-progress-fill {
            display: block; height: 100%; min-width: 4px; border-radius: 99px;
            background: linear-gradient(90deg, #4a4aff, #8b7bff);
        }
        /* 2行目: クエスト名 */
        .header h1 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* 3行目: 難易度・獲得XP */
        .header-meta { display: flex; align-items: center; gap: 8px; }
        .xp-badge {
            background: #0e2a1c; color: #6ee7b7; border: 1px solid #10b981;
            padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: bold; white-space: nowrap;
        }
        .lang-badge {
            background: #1e1b4b; color: #c7d2fe; border: 1px solid #4a4aff;
            padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; white-space: nowrap;
        }
        /* Secondary（.btn-secondary の既定色をそのまま使う） */
        .view-slide-btn { padding: 5px 14px; }
        .level-badge {
            font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
        }
        .level-badge.基礎 { background: #1e3a5f; color: #60a5fa; border: 1px solid #2563eb; white-space: nowrap; }
        .level-badge.応用 { background: #3b1f6e; color: #c084fc; border: 1px solid #7c3aed; white-space: nowrap; }
        .level-badge.発展 { background: #3d1a1a; color: #f87171; border: 1px solid #dc2626; white-space: nowrap; }

        /* ===== 3カラム ===== */
        .container {
            display: grid;
            grid-template-columns: 0.75fr 1.45fr 1fr;
            /* ヘッダーが3行構成になったぶん高さを引く */
            height: calc(100vh - 78px);
        }

        /* ===== 新レイアウト (NEW_QUEST_LAYOUT): PC 左右2カラム =====
           目標: 1080p で 課題・コード・結果がスクロールなしで同時に見える。
           左=課題/解説/ヒント/期待する出力/見本、右=エディタ+実行/実行結果。 */
        .container-v2 {
            display: grid;
            grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
            gap: 12px;
            /* C-1: 固定高で内容を引き伸ばさず自然な高さで積む（間延び防止）。
               1画面に収まるかはコンテンツ量の結果として維持し、溢れたらページごとスクロール。
               各カラムは上端揃えで、短い方が縦に引き伸ばされないようにする */
            align-items: start;
            padding: 12px;
            background: #0a0a1a;
        }
        .qv-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
        /* 左：内容は自然な高さで積み、溢れたらページごとスクロール（内部clampしない） */
        .qv-left { min-height: 0; }
        .qv-card {
            background: #0d0d2b; border: 1px solid #1f2937; border-radius: 12px; padding: 16px;
        }
        .qv-card .task { margin-bottom: 12px; }
        .qv-card .lesson-fold:last-child { margin-bottom: 0; }
        .qv-expected .expected-output { max-height: 200px; overflow-y: auto; }
        .qv-sample { margin-top: 0; }           /* C-1: 期待する出力の直後に詰める（下端寄せをやめる） */

        /* 右：エディタ(伸縮) の下に 実行結果(自動) を積む。
           固定高で内部スクロールに閉じ込めず、溢れたらページごとスクロールさせる */
        .qv-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
        /* C-1: エディタは伸びて出力を下端に押しやらない。自然な高さで、直下に出力を詰める */
        .qv-right .editor-col { flex: 0 1 auto; min-height: 0; border: 1px solid #1f2937; border-radius: 12px; overflow: visible; }
        .qv-right .quiz-col { min-height: 0; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; }
        .qv-right .editor-area { min-height: 0; }
        .container-v2 .CodeMirror { min-height: 240px; }
        .qv-result { flex: 0 0 auto; }
        .qv-result .panel { margin-bottom: 12px; }
        /* C-3: 実行が正解のときだけ JS が表示する即時フィードバック（XP表示のみ・付与はしない） */
        .qv-xp-flash {
            display: flex; align-items: center; gap: 8px;
            background: #052e16; color: #34d399; border: 1px solid #10b981;
            border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
            font-size: 13px; font-weight: bold;
            animation: qv-xp-pop 0.35s ease;
        }
        .qv-xp-flash[hidden] { display: none; }
        @keyframes qv-xp-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .qv-your-output .output { max-height: 40vh; overflow-y: auto; }

        /* B-2: スマホは「課題 / コード / 結果」の3タブ＋下部固定ナビ */
        .qv-bottomnav { display: none; }
        @media (max-width: 768px) {
            .container-v2 { display: block; height: auto; padding: 0 0 68px; }
            .container-v2 .qv-col { display: block; }
            .container-v2 .qv-right { display: block; }
            .container-v2 #mob-instruction,
            .container-v2 #mob-editor,
            .container-v2 #mob-preview { display: none; }
            .container-v2 #mob-instruction.mob-active { display: block; padding: 14px; }
            .container-v2 #mob-editor.mob-active,
            .container-v2 #mob-preview.mob-active { display: block; }
            .container-v2 .qv-result { max-height: none; }
            .container-v2 .qv-your-output .output { max-height: none; }

            /* 下部固定ナビ：[ヒント] [▶ 実行する(最大)] [次へ] */
            .qv-bottomnav {
                display: flex; gap: 8px; align-items: stretch;
                position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
                padding: 8px 10px; background: #0e1320; border-top: 1px solid #1f2937;
            }
            .qv-bottomnav .qv-nav-btn {
                flex: 1; display: flex; align-items: center; justify-content: center;
                background: #111827; color: #c7d2fe; border: 1px solid #374151;
                border-radius: 10px; font-size: 13px; font-weight: bold; font-family: inherit;
                text-decoration: none; cursor: pointer; padding: 12px 6px;
            }
            .qv-bottomnav .qv-nav-run { flex: 2.2; padding: 12px; font-size: 15px; }
        }

        /* 左：説明 */
        .instruction { padding: 0; background: #0d0d2b; border-right: 1px solid #1f2937; overflow-y: auto; display: flex; flex-direction: column; }
        .instruction-inner { padding: 18px 20px; flex: 1; }
        .instruction .description {
            background: #111827; padding: 14px 16px; border-radius: 10px; border-left: 3px solid #4a4aff;
            margin-bottom: 14px; line-height: 1.9; font-size: 14px;
        }
        .instruction .description code {
            background: #1e1b4b; color: #c7d2fe; padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 13px;
        }
        .task-label { font-size: 11px; font-weight: bold; color: #10b981; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
        .instruction .task {
            background: #052e16; border: 1px solid #10b981; padding: 14px 16px;
            border-radius: 10px; margin-bottom: 14px; line-height: 1.8; font-size: 14px;
        }
        .instruction .task code {
            background: #064e3b; color: #6ee7b7; padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 13px;
        }
        /* 折りたたみ（▸ 解説を見る / ▸ ヒントを見る）。課題カードを主役にして詳細はここへ落とす */
        .lesson-fold { margin-bottom: 10px; }
        .lesson-fold > summary {
            list-style: none; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px; border-radius: 20px;
            border: 1px solid #4b5563; color: #9ca3af;
            font-size: 13px; transition: border-color 0.2s, color 0.2s, background 0.2s;
        }
        .lesson-fold > summary::-webkit-details-marker { display: none; }
        .lesson-fold > summary::before { content: '▸'; font-size: 11px; }
        .lesson-fold[open] > summary::before { content: '▾'; }
        .lesson-fold > summary:hover { border-color: #818cf8; color: #c7d2fe; background: rgba(129,140,248,0.08); }
        .lesson-fold[open] > summary { margin-bottom: 8px; }
        .lesson-fold.hint-fold > summary { border-color: #f59e0b; color: #f59e0b; }
        .lesson-fold.hint-fold > summary:hover { border-color: #fbbf24; color: #fcd34d; background: rgba(245,158,11,0.12); }
        .hint { background: #1c1407; border: 1px solid #f59e0b; border-left: 3px solid #f59e0b; padding: 12px 14px; border-radius: 8px; color: #fcd34d; font-size: 13px; line-height: 1.7; }

        /* コーデ */
        .chara-wrap { text-align: center; margin-top: 14px; padding-bottom: 12px; }
        #chara-img { height: 110px; transition: opacity 0.15s, transform 0.15s; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
        #chara-img.bounce { animation: chara-bounce 0.4s ease; }
        @keyframes chara-bounce {
            0% { transform: scale(1); }
            40% { transform: scale(1.18); }
            70% { transform: scale(0.94); }
            100% { transform: scale(1); }
        }

        /* 中央：コード（タブ＋エディタ） */
        .editor-col { display: flex; flex-direction: column; background: #0a0a1a; overflow: hidden; }
        .editor-header { background: #0e1320; border-bottom: 1px solid #1f2937; padding: 8px 14px 0; display: flex; flex-direction: column; gap: 0; }
        .editor-label { font-size: 10px; color: #6b7280; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
        .tabs { display: flex; background: transparent; }
        .tab {
            padding: 9px 16px; cursor: pointer; color: #9ca3af; font-size: 13px;
            border-right: 1px solid #1f2937; background: transparent; font-family: monospace;
            border-bottom: 2px solid transparent; transition: color 0.15s;
            border-top: 0; border-left: 0;
        }
        .tab.active { background: #0a0a1a; color: #fff; border-bottom: 2px solid #4a4aff; }
        .tab:hover { color: #e5e7eb; }
        .editor-area { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
        .cm-wrap { display: none; }
        .cm-wrap.active { display: block; }
        .CodeMirror { border-radius: 8px; font-size: 14px; height: auto; min-height: 420px; border: 1px solid #1f2937; }
        .editor-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
        /* Primary（実行）＋ Tertiary（リセットは逃げ道なのでテキストリンク） */
        .run-btn { padding: 12px; }
        .reset-draft-btn { padding: 10px 12px; }

        /* 右：プレビュー＋見本 */
        .preview-col { background: #0d0d2b; border-left: 1px solid #1f2937; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
        .panel { background: #111827; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; }
        .panel-head { background: #0e1320; padding: 9px 14px; font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1f2937; }
        .panel-head.prev { color: #38bdf8; }
        .panel-head.samp { color: #34d399; }
        .panel-body { padding: 0; }
        .output {
            padding: 14px; font-family: monospace; font-size: 13px; min-height: 80px;
            color: #10b981; white-space: pre-wrap; background: #060d18; line-height: 1.7;
            max-height: 380px; overflow-y: auto;
        }
        .output-placeholder { color: #374151; font-style: italic; }
        iframe.preview-frame { width: 100%; height: 320px; border: none; background: #fff; display: block; }
        pre.sample-code {
            margin: 0; padding: 14px; font-family: monospace; font-size: 12px; line-height: 1.7;
            color: #e2e8f0; white-space: pre; overflow-x: auto; background: #060d18; cursor: pointer;
        }
        pre.sample-code:hover { background: #0b1220; }
        .sample-tabs { display: flex; background: #0a1018; border-bottom: 1px solid #1f2937; }
        .sample-tab { padding: 7px 13px; font-size: 12px; color: #6b7280; cursor: pointer; font-family: monospace; transition: color 0.15s; background: transparent; border: 0; }
        .sample-tab.active { color: #34d399; border-bottom: 2px solid #34d399; }
        .sample-pane { display: none; }
        .sample-pane.active { display: block; }
        .copy-btn { background: #34d399; color: #042214; border: none; padding: 4px 11px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; }
        .copy-btn:hover { background: #6ee7b7; }
        /* Tertiary（答えを見るは逃げ道。枠線をやめてテキストリンクに落とす） */
        .answer-toggle { --btn-accent: #6b7280; padding: 4px 8px; font-size: 12px; }
        .sample-wrap { display: none; }
        .sample-wrap.shown { display: block; }

        /* 期待出力パネル */
        .expected-label { color: #60a5fa; font-size: 11px; font-weight: bold; letter-spacing: 0.06em; padding: 8px 14px 4px; background: #0e1320; }
        pre.expected-output {
            margin: 0; padding: 10px 14px 14px; font-family: monospace; font-size: 13px;
            color: #a5f3fc; background: #060d18; white-space: pre-wrap; line-height: 1.7;
        }

        /* 正解バナー */
        #success-banner {
            display: none; background: linear-gradient(135deg, #052e16, #073d20); border: 2px solid #10b981; border-radius: 14px;
            padding: 18px 16px; text-align: center; animation: pop 0.3s ease;
            position: relative; overflow: hidden; box-shadow: 0 0 28px rgba(16,185,129,0.22);
        }
        #success-banner::before {
            content: '★  ★  ★';
            position: absolute; top: 10px; left: 0; right: 0;
            color: rgba(251,191,36,0.7); font-size: 18px; letter-spacing: 18px;
            pointer-events: none; animation: reward-sparkle 1.2s ease-in-out infinite alternate;
        }
        @keyframes pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes reward-sparkle { from { opacity: 0.35; transform: translateY(0); } to { opacity: 1; transform: translateY(4px); } }
        #success-banner .sb-msg { color: #34d399; font-size: 16px; font-weight: bold; margin-bottom: 12px; }
        /* Primary（前進系は緑にする＝.is-go） */
        .btn-primary.is-go { background: linear-gradient(135deg, #10b981, #059669); }
        #success-banner .sb-btn { padding: 12px 28px; }
        .feedback-panel {
            background: #1f1a0b; border: 2px solid #f59e0b; border-radius: 14px;
            padding: 14px; color: #fde68a; animation: pop 0.3s ease;
        }
        .feedback-panel[hidden] { display: none; }
        .feedback-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .feedback-head img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }
        .feedback-title { font-size: 16px; font-weight: 900; color: #fbbf24; }
        .feedback-hint { color: #fde68a; font-size: 13px; line-height: 1.7; margin-top: 3px; }
        .feedback-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .feedback-col { background: #060d18; border: 1px solid #374151; border-radius: 10px; overflow: hidden; }
        .feedback-label { background: #111827; color: #cbd5e1; font-size: 11px; font-weight: bold; padding: 7px 10px; border-bottom: 1px solid #374151; }
        .feedback-lines { margin: 0; padding: 8px 10px; color: #e5e7eb; font-family: monospace; font-size: 12px; line-height: 1.7; white-space: pre-wrap; min-height: 42px; }
        .feedback-lines mark { display: block; margin: 0 -4px; padding: 0 4px; background: rgba(245,158,11,0.22); color: #fde68a; border-radius: 4px; }
        .feedback-raw { margin-top: 10px; color: #9ca3af; font-size: 11px; }
        .feedback-raw summary { cursor: pointer; }
        .feedback-raw pre { margin-top: 6px; background: #060d18; border-radius: 8px; padding: 8px; overflow-x: auto; white-space: pre-wrap; }
        .free-note { color: #6ee7b7; font-size: 13px; padding: 12px 14px; line-height: 1.6; }

        /* 練習問題ページ */
        #practice-page { display: none; }
        .practice-header { background: #111827; padding: 15px 30px; display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #4a4aff; flex-wrap: wrap; }
        .practice-header h1 { font-size: 20px; flex: 1; }
        .practice-header a { color: #9ca3af; text-decoration: none; font-size: 14px; }
        .practice-header a:hover { color: white; }
        .practice-progress-chip {
            background: #052e16; color: #6ee7b7; border: 1px solid #10b981;
            border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: bold; white-space: nowrap;
        }
        .practice-body { max-width: 1280px; margin: 0 auto; padding: 30px 20px; }
        .practice-sub { color: #6b7280; text-align: center; margin-bottom: 25px; font-size: 15px; }

        /* 2カラムレイアウト（左:コード  右:プレビュー+結果帯） */
        .practice-item {
            background: #111827;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 22px;
            border: 1px solid #1f2937;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            align-items: start;
            position: relative;
        }
        .practice-item.is-correct { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,0.18); }
        .practice-item.is-incorrect { border-color: #f59e0b; }
        .practice-status-chip {
            position: absolute; top: 10px; right: 12px;
            background: #1f2937; color: #9ca3af; border: 1px solid #374151;
            border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: bold;
        }
        .practice-status-chip.ok { background: #052e16; color: #6ee7b7; border-color: #10b981; }
        .practice-status-chip.ng { background: #1f1a0b; color: #fde68a; border-color: #f59e0b; }
        .practice-left { display: flex; flex-direction: column; gap: 10px; }
        .practice-left > p { color: #e5e7eb; font-size: 16px; margin: 0; line-height: 1.6; }
        .practice-right { display: flex; flex-direction: column; gap: 10px; }
        .practice-item .CodeMirror { width: 100% !important; min-height: 160px; height: auto; border-radius: 8px; font-size: 14px; }
        .practice-item .run-btn { width: 100%; }

        /* ===== B-3: 練習問題を1問ずつ表示（新レイアウト時に JS が #practice-page へ .qp-single を付与） ===== */
        /* .qp-single が付かない旧レイアウトでは以下は一切効かないので出力は不変 */
        #practice-page.qp-single .practice-item { display: none; margin-bottom: 0; }
        #practice-page.qp-single .practice-item.qp-active { display: grid; }
        .qp-flow { max-width: 1280px; margin: 0 auto 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
        .qp-dots { display: flex; gap: 9px; }
        .qp-dot { width: 13px; height: 13px; border-radius: 999px; background: #1f2937; border: 1px solid #374151; transition: all .2s; }
        .qp-dot.done { background: #10b981; border-color: #10b981; }
        .qp-dot.current { box-shadow: 0 0 0 3px rgba(74,74,255,0.45); border-color: #4a4aff; }
        .qp-count { color: #cbd5e1; font-size: 14px; font-weight: bold; }
        .qp-flow-foot { max-width: 1280px; margin: 20px auto 0; display: flex; justify-content: flex-end; }
        .qp-next-btn {
            background: #4a4aff; color: #fff; border: none; border-radius: 10px;
            padding: 12px 28px; font-size: 15px; font-weight: bold; cursor: pointer;
        }
        .qp-next-btn:hover { background: #3838e0; }
        .qp-next-btn.hidden { display: none; }

        /* 右カラム上部：iframeプレビュー（HTML/CSS系のみ） */
        .ppreview-wrap { }
        .ppreview-label { font-size: 11px; font-weight: bold; color: #6b7280; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }

        /* 右カラム下部：実行結果・見本を横並びの帯で表示 */
        .pout-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        /* 見本なし（pout-wrapが1つだけ）のとき全幅に */
        .pout-row > .pout-wrap:only-child { grid-column: 1 / -1; }

        /* 実行結果ボックス */
        .pout-wrap {
            background: #060d18;
            border: 1px solid #1f2937;
            border-radius: 10px;
            padding: 12px 14px;
            min-height: 60px;
            max-height: 180px;
            overflow-y: auto;
        }
        .pout-label { font-size: 11px; font-weight: bold; color: #6b7280; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }

        /* 見本出力ボックス */
        .pexpect-wrap {
            background: #041810;
            border: 1px solid #064e3b;
            border-radius: 10px;
            padding: 12px 14px;
            max-height: 180px;
            overflow-y: auto;
        }
        .pexpect-wrap-label { font-size: 11px; font-weight: bold; color: #34d399; letter-spacing: 0.06em; margin-bottom: 6px; }

        .pexpect { color: #6ee7b7; font-size: 13px; font-family: monospace; white-space: pre-wrap; }
        .pout { color: #9ca3af; font-family: monospace; font-size: 13px; min-height: 20px; white-space: pre-wrap; }
        .piframe { width: 100%; height: 220px; border: 1px solid #1f2937; border-radius: 8px; background:#fff; display: block; }
        .pok { display: none; color: #10b981; font-weight: bold; margin-top: 8px; font-size: 14px; }
        .png { display: none; color: #ef4444; font-weight: bold; margin-top: 8px; font-size: 14px; }

        /* HTML/CSS練習問題タブ */
        .p-tabs { display: flex; border-bottom: 1px solid #1f2937; margin-bottom: 6px; }
        .p-tab { padding: 6px 14px; color: #6b7280; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent; transition: color 0.15s; background: transparent; border-top: 0; border-left: 0; border-right: 0; }
        .p-tab.active { color: #4a4aff; border-bottom-color: #4a4aff; }
        .p-tab:hover { color: #e5e7eb; }
        .p-cm-wrap { display: none; }
        .p-cm-wrap.active { display: block; }

        /* SQLテーブル表示 */
        .sql-table { border-collapse: collapse; width: 100%; font-family: monospace; font-size: 12px; margin-top: 4px; }
        .sql-table th, .sql-table td { border: 1px solid #1f2937; padding: 5px 10px; text-align: left; white-space: nowrap; }
        .sql-table th { background: #0e1320; color: #34d399; font-weight: bold; }
        .sql-table tbody tr:nth-child(odd) td { background: #060d18; color: #10b981; }
        .sql-table tbody tr:nth-child(even) td { background: #081018; color: #10b981; }
        .pexpect-wrap .sql-table th { color: #6ee7b7; }
        .pexpect-wrap .sql-table tbody tr td { color: #a7f3d0; }

        /* レスポンシブ：768px以下は縦並び */
        @media (max-width: 768px) {
            .practice-item { grid-template-columns: 1fr; }
            .pout-row { grid-template-columns: 1fr; }
        }
        #score-result { display: none; text-align: center; padding: 30px; border-radius: 15px; margin-top: 20px; font-size: 22px; font-weight: bold; }
        #next-btn { display: none; text-align: center; margin-top: 20px; padding-bottom: 50px; }
        .next-link { background: #10b981; color: #000; padding: 15px 40px; border-radius: 10px; text-decoration: none; font-size: 18px; font-weight: bold; display: inline-block; }
        .next-link:hover { background: #059669; }

        #toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px); background: #10b981; color: #042214; padding: 12px 24px; border-radius: 30px; font-weight: bold; font-size: 15px; opacity: 0; transition: all 0.3s; z-index: 999; }
        #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

        /* ===== 説明スライド画面 ===== */
        #slide-screen {
            position: fixed; inset: 0; z-index: 500;
            background: #0a0a1a; display: flex; flex-direction: column;
            overflow: hidden;
        }
        .slide-header {
            background: #111827; padding: 10px 20px;
            display: flex; align-items: center; gap: 14px;
            border-bottom: 2px solid #4a4aff; flex-shrink: 0;
        }
        .slide-header a { color: #9ca3af; text-decoration: none; font-size: 14px; white-space: nowrap; }
        .slide-header a:hover { color: white; }
        .slide-header h1 { font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .slide-counter-badge {
            background: #1e1b4b; color: #c7d2fe; border: 1px solid #4a4aff;
            padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; white-space: nowrap;
        }
        /* Tertiary（とばして問題へ＝脇道） */
        .slide-skip-btn { padding: 7px 12px; }
        .slide-body {
            flex: 1; display: grid; grid-template-columns: 1fr 1.4fr;
            gap: 0; overflow: hidden;
        }
        .slide-left {
            background: #0d0d2b; border-right: 1px solid #1f2937;
            padding: 24px 22px; overflow-y: auto;
            display: flex; flex-direction: column; gap: 16px;
        }
        .slide-chara { text-align: center; }
        .slide-chara img { height: 90px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
        .slide-title-text {
            font-size: 18px; font-weight: bold; color: #c7d2fe;
            border-left: 3px solid #4a4aff; padding-left: 12px;
        }
        .slide-explanation {
            background: #111827; border-left: 3px solid #4a4aff;
            padding: 14px 16px; border-radius: 10px;
            line-height: 2; font-size: 14px; color: #e2e8f0;
        }
        .slide-explanation code {
            background: #1e1b4b; color: #c7d2fe; padding: 1px 6px;
            border-radius: 4px; font-family: monospace; font-size: 13px;
        }
        .slide-right {
            background: #0a0a1a; padding: 20px 18px;
            overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
        }
        .slide-code-panel {
            background: #111827; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden;
        }
        .slide-panel-head {
            background: #0e1320; padding: 9px 14px; font-size: 12px; font-weight: bold;
            color: #818cf8; border-bottom: 1px solid #1f2937; letter-spacing: 0.06em;
        }
        .slide-code-body {
            padding: 12px 14px; font-family: monospace; font-size: 13px;
            background: #060d18; line-height: 1.9;
            /* 横に長い行は折り返さず横スクロールで全体を読めるようにする（PC・スマホ共通） */
            overflow-x: auto; -webkit-overflow-scrolling: touch;
        }
        .slide-code-line {
            display: flex; align-items: baseline; gap: 0;
            /* 行を内容幅まで広げる（min-width:100%で短い行も全幅）。これで親のscrollWidthが
               伸び、overflow-x:auto が実際にスクロールする。行番号とコードは同一flex行のため
               スクロールしてもズレない。 */
            width: max-content; min-width: 100%;
        }
        .slide-line-num {
            color: #374151; width: 28px; flex-shrink: 0; text-align: right;
            padding-right: 10px; user-select: none; font-size: 12px;
        }
        .slide-line-code { color: #e2e8f0; white-space: pre; flex-shrink: 0; }
        .slide-annotation {
            margin-left: 14px; color: #fbbf24; font-size: 12px;
            display: flex; align-items: center; gap: 4px; white-space: nowrap;
        }
        .slide-annotation::before { content: '←'; color: #f59e0b; }
        .slide-output-panel {
            background: #111827; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden;
        }
        .slide-output-body {
            padding: 12px 14px; font-family: monospace; font-size: 13px;
            color: #10b981; background: #060d18; white-space: pre; line-height: 1.9;
            min-height: 48px;
            /* 実行結果も横長は横スクロールで全体を読めるように（縦は .slide-right が担当） */
            overflow-x: auto; -webkit-overflow-scrolling: touch;
        }
        /* 横スクロール可能なことを示す細いスクロールバー（視覚ヒント） */
        .slide-code-body::-webkit-scrollbar, .slide-output-body::-webkit-scrollbar { height: 8px; }
        .slide-code-body::-webkit-scrollbar-thumb, .slide-output-body::-webkit-scrollbar-thumb {
            background: #334155; border-radius: 4px;
        }
        .slide-code-body::-webkit-scrollbar-track, .slide-output-body::-webkit-scrollbar-track { background: transparent; }
        .slide-nav {
            background: #111827; border-top: 1px solid #1f2937;
            padding: 14px 24px; display: flex; align-items: center;
            gap: 14px; flex-shrink: 0;
        }
        /* Secondary（スライドの前後移動） */
        .slide-nav-btn { padding: 9px 22px; border-radius: 8px; font-size: 14px; }
        .slide-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
        .slide-dots { flex: 1; display: flex; gap: 8px; justify-content: center; }
        .slide-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: #1f2937; border: 1px solid #374151;
            cursor: pointer; transition: all 0.2s;
            padding: 0;
        }
        .slide-dot.active { background: #4a4aff; border-color: #818cf8; transform: scale(1.2); }
        /* Primary（クエストを始める） */
        .slide-start-btn { padding: 11px 26px; }
        /* コードなしスライド：説明エリアを全幅に */
        .slide-body.no-code { grid-template-columns: 1fr; }
        .slide-body.no-code .slide-right { display: none; }
        .slide-body.no-code .slide-left { border-right: none; max-width: 860px; width: 100%; margin: 0 auto; }

        @media (max-width: 768px) {
            .slide-body { grid-template-columns: 1fr; overflow-y: auto; }
            .slide-left { padding: 14px 12px; border-right: none; border-bottom: 1px solid #1f2937; gap: 12px; }
            .slide-right { padding: 14px 12px; gap: 10px; }
            .slide-chara img { height: 56px; }
            .slide-title-text { font-size: 15px; }
            .slide-explanation { font-size: 13px; line-height: 1.8; padding: 12px 14px; }
            /* コードブロックを横スクロール可能に */
            .slide-code-body {
                overflow-x: auto; -webkit-overflow-scrolling: touch;
                font-size: 12px; padding: 10px 12px;
            }
            .slide-line-code { white-space: pre; }
            .slide-output-body {
                overflow-x: auto; -webkit-overflow-scrolling: touch;
                font-size: 12px;
            }
            .slide-annotation { font-size: 11px; }
            .slide-nav { padding: 10px 14px; gap: 8px; }
            .slide-nav-btn { padding: 8px 14px; font-size: 13px; }
            .slide-start-btn { padding: 9px 18px; font-size: 14px; }
            .slide-header { padding: 8px 12px; gap: 8px; }
            .slide-header h1 { font-size: 13px; }
        }

        /* ===== 選択式クイズ ===== */
        .quiz-col { display: flex; flex-direction: column; background: #0a0a1a; overflow: hidden; }
        .quiz-header { background: #0e1320; border-bottom: 1px solid #1f2937; padding: 12px 16px; flex-shrink: 0; }
        .quiz-counter { font-size: 12px; color: #6b7280; font-weight: bold; letter-spacing: 0.06em; margin-bottom: 8px; }
        .quiz-progress-bar { background: #1f2937; border-radius: 4px; height: 6px; }
        .quiz-progress-fill { background: #4a4aff; height: 6px; border-radius: 4px; transition: width 0.4s; }
        .quiz-area { flex: 1; padding: 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
        .quiz-question { font-size: 16px; color: #e2e8f0; line-height: 1.7; font-weight: bold; }
        .quiz-choices { display: flex; flex-direction: column; gap: 10px; }
        .quiz-choice-btn {
            background: #111827; border: 1.5px solid #1f2937; color: #e5e7eb;
            padding: 12px 16px; border-radius: 10px; cursor: pointer;
            text-align: left; font-size: 14px; line-height: 1.5; transition: all 0.15s; width: 100%;
        }
        .quiz-choice-btn:hover:not([disabled]) { border-color: #4a4aff; background: #1e1b4b; }
        .quiz-choice-btn.correct { border-color: #10b981 !important; background: #052e16 !important; color: #34d399 !important; }
        .quiz-choice-btn.incorrect { border-color: #ef4444 !important; background: #2d0a0a !important; color: #f87171 !important; }
        .quiz-choice-btn[disabled] { cursor: default; }
        .quiz-feedback { padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.7; display: none; }
        .quiz-feedback.show-correct { background: #052e16; border: 1px solid #10b981; color: #6ee7b7; display: block; }
        .quiz-feedback.show-incorrect { background: #2d0a0a; border: 1px solid #ef4444; color: #fca5a5; display: block; }
        /* 不正解時の「あなたの回答 / 正解」比較（コード実行時の feedback-panel と同じ見た目） */
        .quiz-feedback .feedback-diff { margin-top: 10px; }
        /* Primary（クイズを前に進める）。display は JS が block/none で切り替える */
        .quiz-next-btn { display: none; padding: 12px; width: 100%; }
        .quiz-done-btn { display: none; padding: 12px; width: 100%; }
        .quiz-score-panel { display: none; text-align: center; padding: 30px 20px; flex-direction: column; gap: 16px; }
        .quiz-score-panel.active { display: flex; }
        .quiz-score-num { font-size: 52px; font-weight: bold; color: #818cf8; }
        .quiz-score-label { font-size: 14px; color: #6b7280; }
        .quiz-score-msg { color: #9ca3af; font-size: 15px; }
        /* Primary（結果画面から次へ） */
        .quiz-score-proceed-btn { padding: 14px 28px; font-size: 16px; align-self: center; }

        /* ===== スマホ対応 ===== */
        .mobile-tab-bar {
            display: none;
        }

        @media (max-width: 768px) {
            /* ヘッダー */
            .header { padding: 9px 12px; gap: 8px; }
            .header h1 { font-size: 13px; }
            .header a { font-size: 12px; }
            .lang-badge { display: none; }
            .level-badge { display: none; }
            .header a:last-child { display: none; } /* ホームリンク非表示 */

            /* モバイルタブバー */
            .mobile-tab-bar {
                display: flex;
                background: #111827;
                border-bottom: 2px solid #1f2937;
                position: sticky;
                top: 0;
                z-index: 50;
            }
            .mobile-tab-btn {
                flex: 1;
                padding: 12px 4px;
                background: transparent;
                border: none;
                color: #6b7280;
                font-size: 13px;
                font-weight: bold;
                cursor: pointer;
                border-bottom: 3px solid transparent;
                transition: all 0.2s;
            }
            .mobile-tab-btn.active {
                color: #4a4aff;
                border-bottom-color: #4a4aff;
                background: #0d0d2b;
            }

            /* 3カラムを縦積み → タブで切り替え */
            .container {
                display: block;
                height: auto;
            }
            .instruction, .editor-col, .preview-col {
                display: none;
                border: none;
            }
            .instruction.mob-active,
            .editor-col.mob-active,
            .preview-col.mob-active {
                display: flex;
                flex-direction: column;
                min-height: calc(100vh - 100px);
            }
            .instruction.mob-active { display: block; min-height: auto; }
            .preview-col.mob-active { display: flex; }

            /* エディタ */
            .CodeMirror { font-size: 14px; min-height: 240px; }
            .practice-item .CodeMirror { min-height: 160px; }
            .editor-actions { grid-template-columns: 1fr; }
            .run-btn { font-size: 15px; padding: 14px; }
            .reset-draft-btn { padding: 12px; }
            .feedback-diff { grid-template-columns: 1fr; }

            /* 練習問題 */
            .practice-header { padding: 10px 14px; gap: 10px; }
            .practice-header h1 { font-size: 16px; }
            .practice-progress-chip { order: 3; width: 100%; text-align: center; }
            .practice-body { padding: 20px 14px; }

            /* トースト */
            #toast { bottom: 70px; font-size: 14px; padding: 10px 20px; }
        }