:root {
            --mc-sky-top: #7ec8e3;
            --mc-sky-bottom: #cdeefb;
            --mc-grass: #5d9c2e;
            --mc-grass-dark: #457a20;
            --mc-dirt: #8b5a2b;
            --mc-dirt-dark: #6b431f;
            --mc-wood: #c8a165;
            --mc-wood-dark: #a07c46;
            --mc-stone: #9a9a9a;
            --mc-stone-dark: #707070;
            --mc-diamond: #4ec9e0;
            --mc-gold: #ffd700;
            --mc-emerald: #3fbf5f;
            --mc-redstone: #d64530;
            --mc-ink: #2b1b0e;
            --mc-panel: #d8b988;
            --font-pixel: 'Press Start 2P', monospace;
            --font-clear: system-ui, sans-serif;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; }
        html, body { height: 100%; overscroll-behavior: none; }
        body {
            font-family: var(--font-clear);
            background: linear-gradient(180deg, var(--mc-sky-top) 0%, var(--mc-sky-bottom) 70%);
            min-height: 100vh;
            min-height: 100dvh;
            padding: 16px 16px 46px;
            position: relative;
        }
        body::after {
            content: '';
            position: fixed;
            left: 0; right: 0; bottom: 0;
            height: 40px;
            background:
                linear-gradient(180deg, var(--mc-grass) 0 10px, var(--mc-dirt) 10px 40px),
                repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 4px, transparent 4px 40px);
            border-top: 3px solid var(--mc-grass-dark);
            z-index: 0;
        }
        .container {
            background:
                repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 24px),
                var(--mc-panel);
            border: 4px solid var(--mc-ink);
            border-radius: 6px;
            padding: 24px;
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            box-shadow: 0 12px 0 rgba(0,0,0,0.25), inset 4px 4px 0 rgba(255,255,255,0.25), inset -4px -4px 0 rgba(0,0,0,0.2);
            min-height: calc(100vh - 32px);
            min-height: calc(100dvh - 32px);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }
        #app:focus { outline: none; }
        /* ponytail: flex-column children default min-width:auto and refuse to
           shrink below min-content -> whole page scrolls sideways on phones.
           One rule lets every section shrink to the screen width. */
        .container > * { min-width: 0; max-width: 100%; }
        @media (max-width: 520px) {
            body { padding: 10px 10px 46px; }
            .container { padding: 12px; }
        }

        .global-blipola-voice{position:fixed;right:18px;bottom:58px;z-index:9999;display:flex;align-items:center;gap:8px;padding:12px 16px;background:#ffd700;color:#2b1b0e;border:4px solid #2b1b0e;border-radius:8px;box-shadow:0 5px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.5);font-weight:900;font-size:1.05rem;cursor:pointer}.global-blipola-voice:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.5)}.global-blipola-voice span{font-size:.85rem}@media(max-width:520px){.global-blipola-voice{right:10px;bottom:48px;padding:10px 12px;font-size:1rem}.global-blipola-voice span{display:none}}
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 16px;
        }
        .topbar-left, .topbar-right { display: flex; gap: 8px; align-items: center; }
        .icon-btn {
            font-size: 1.6rem;
            background: var(--mc-stone);
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            box-shadow: inset 3px 3px 0 rgba(255,255,255,0.45), inset -3px -3px 0 rgba(0,0,0,0.3);
            width: 56px;
            height: 56px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-btn:active { transform: translateY(2px); box-shadow: inset -3px -3px 0 rgba(255,255,255,0.45), inset 3px 3px 0 rgba(0,0,0,0.3); }
        .star-badge {
            font-family: var(--font-pixel);
            background: var(--mc-diamond);
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            box-shadow: inset 3px 3px 0 rgba(255,255,255,0.45), inset -3px -3px 0 rgba(0,0,0,0.25);
            padding: 12px 16px;
            font-size: 1rem;
            color: #063a42;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        h1 { font-family: var(--font-pixel); text-align: center; font-size: 1.5rem; line-height: 1.6; color: var(--mc-emerald); text-shadow: 3px 3px 0 rgba(0,0,0,0.35); margin-bottom: 20px; }
        h2 { font-family: var(--font-pixel); text-align: center; font-size: 1.1rem; line-height: 1.6; color: var(--mc-ink); text-shadow: 2px 2px 0 rgba(255,255,255,0.4); margin-bottom: 20px; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
        }
        .card {
            background: var(--mc-wood);
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.35), inset -4px -4px 0 rgba(0,0,0,0.25);
            padding: 24px 16px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.05s;
            position: relative;
            min-height: 96px;
        }
        .card:active { transform: translateY(3px); box-shadow: inset -4px -4px 0 rgba(255,255,255,0.35), inset 4px 4px 0 rgba(0,0,0,0.25); }
        .card.cat-letters { background: var(--mc-wood); }
        .card.cat-numbers { background: var(--mc-stone); }
        .card.cat-words { background: #e8d9b5; }
        .card.cat-chinese { background: #e2a63c; }
        .card.cat-spanish { background: #e08a4f; }
        .card.cat-math { background: var(--mc-gold); }
        .card.cat-progress { background: var(--mc-diamond); }
        .card.cat-science { background: #a8e6cf; }
        .card.cat-patterns { background: #dda0dd; }
        .card.cat-comparing { background: #ffd93d; }
        .card.cat-positions { background: #87ceeb; }
        .card.cat-measurement { background: #ffb347; }
        .card.cat-time { background: #98fb98; }
        .card.cat-money { background: #ffd700; }
        .card.cat-onemoreless { background: #ff6b6b; }
        .card.cat-rhyming { background: #a18cd1; }
        .card.cat-sightwords { background: #fad390; }
        .freeplay-filter-bar {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 0 auto 16px;
            max-width: 600px;
        }
        .freeplay-filter-btn {
            font-family: var(--font-clear);
            font-size: 0.92rem;
            font-weight: 800;
            padding: 8px 14px;
            border-radius: 20px;
            border: 2px solid var(--mc-ink);
            background: #f3e6c8;
            color: var(--mc-ink);
            cursor: pointer;
            box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -2px 0 rgba(0,0,0,0.15);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: transform 0.05s;
        }
        .freeplay-filter-btn:active {
            transform: translateY(2px);
        }
        .freeplay-filter-btn.active {
            background: var(--mc-gold);
            box-shadow: inset -2px -2px 0 rgba(255,255,255,0.4), inset 2px 2px 0 rgba(0,0,0,0.2);
            transform: translateY(1px);
        }
        @media (max-width: 520px) {
            .freeplay-filter-bar {
                gap: 6px;
                margin-bottom: 12px;
            }
            .freeplay-filter-btn {
                font-size: 0.8rem;
                padding: 6px 10px;
            }
        }
        /* Pre-K to Grade 8 curriculum browser */        .grade-stage{display:inline-block;margin-left:6px;padding:4px 7px;border:2px solid var(--mc-ink);border-radius:4px;background:var(--mc-gold);font-size:.62rem;font-weight:900}.grade-stage-copy{margin:0 0 12px;color:rgba(43,27,14,.65);font-size:.8rem;line-height:1.4}@media(max-width:520px){.grade-stage{font-size:.56rem;padding:3px 5px}.grade-stage-copy{font-size:.74rem}}.grade-unit-start{margin-top:8px;padding:9px 12px;border:2px solid var(--mc-ink);border-radius:4px;background:var(--mc-emerald);color:#fff;font-weight:900;cursor:pointer;box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.2)}.grade-unit-start:active{transform:translateY(2px)}.grade-unit-progress{font-size:.68rem;color:rgba(43,27,14,.62);margin-top:4px}.grade-lesson-card{width:100%;max-width:760px;background:#f3e6c8;border:3px solid var(--mc-ink);border-radius:6px;padding:18px;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.18)}.grade-lesson-kicker{font-size:.7rem;font-weight:900;opacity:.6;letter-spacing:.8px;margin-bottom:8px}.grade-lesson-title{font-family:var(--font-pixel);font-size:.95rem;line-height:1.6;margin-bottom:14px}.grade-lesson-prompt{font-size:1.25rem;font-weight:800;line-height:1.5;margin-bottom:16px}.grade-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grade-choice{min-height:58px;padding:12px;border:3px solid var(--mc-ink);border-radius:5px;background:#fff;font-size:1rem;font-weight:800;cursor:pointer}.grade-sort-selected{min-height:58px;padding:10px;border:2px dashed var(--mc-ink);border-radius:5px;background:#fff;margin-bottom:10px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}.grade-sort-token{padding:8px 10px;background:var(--mc-gold);border:2px solid var(--mc-ink);border-radius:4px;font-weight:800}.grade-sort-empty{opacity:.6;font-size:.85rem}.grade-sort-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.grade-sort-word{min-height:52px}.grade-sort-reset,.grade-text-submit{margin-top:10px;padding:10px 14px;border:3px solid var(--mc-ink);border-radius:5px;background:var(--mc-wood);font-weight:900;cursor:pointer}.grade-text-answer{width:100%;min-height:120px;padding:12px;border:3px solid var(--mc-ink);border-radius:5px;background:#fff;font:600 1rem/1.5 var(--font-clear);resize:vertical;user-select:text}.grade-text-meta{margin-top:6px;font-size:.75rem;opacity:.65}.grade-choice.correct{background:#bdf2cf;border-color:var(--mc-emerald)}.grade-choice.incorrect{background:#f7c9c2;border-color:var(--mc-redstone)}.grade-feedback{min-height:30px;margin-top:12px;font-weight:800;line-height:1.4}.grade-blipola{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 11px;background:#fff;border:2px solid var(--mc-ink);border-radius:10px;font-size:.85rem}.grade-hint{margin-left:auto;padding:7px 9px;border:2px solid var(--mc-ink);border-radius:4px;background:var(--mc-gold);font-weight:900;cursor:pointer}.grade-end{width:100%;max-width:620px;text-align:center;background:#f3e6c8;border:3px solid var(--mc-ink);border-radius:6px;padding:22px}.grade-score{font-family:var(--font-pixel);font-size:1.5rem;margin:12px 0}.grade-end-stat{margin:6px 0}.grade-end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.grade-end-actions button{min-height:46px;padding:10px 16px;border:3px solid var(--mc-ink);border-radius:5px;font-weight:900;cursor:pointer;background:var(--mc-emerald);color:#fff}@media(max-width:520px){.grade-choices{grid-template-columns:1fr}.grade-lesson-card{padding:14px}.grade-lesson-prompt{font-size:1.05rem}.grade-choice{min-height:52px;font-size:.92rem}}.course-overview{text-align:center;background:#f3e6c8;border:3px solid var(--mc-ink);border-radius:6px;padding:18px;margin-bottom:18px;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.18)}.course-overview-icon{font-size:3rem}.course-overview-grade{font-size:.72rem;font-weight:800;letter-spacing:1px;margin-top:5px;color:rgba(43,27,14,.6)}.course-overview h2{margin:8px 0}.course-overview p{max-width:680px;margin:0 auto;color:rgba(43,27,14,.7);font-size:.9rem;line-height:1.5}.course-badge{display:inline-block;margin-top:12px;padding:6px 9px;border:2px solid var(--mc-ink);border-radius:4px;background:#fff;font-size:.65rem;font-weight:900}.course-unit{background:#dedede;border:3px solid var(--mc-ink);border:3px solid var(--mc-ink);border-radius:5px;margin-bottom:12px;overflow:hidden}.course-unit-head{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;background:var(--mc-wood);font-size:.78rem}.course-unit-head span{font-weight:900;opacity:.65}.course-lessons{padding:8px 10px}.course-lesson{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid rgba(43,27,14,.15);font-size:.82rem}.course-lesson:last-child{border-bottom:0}.course-lesson-num{width:25px;height:25px;display:flex;align-items:center;justify-content:center;background:var(--mc-gold);border:2px solid var(--mc-ink);border-radius:4px;font-weight:900;font-size:.7rem;flex:0 0 25px}@media(max-width:520px){.course-unit-head{font-size:.68rem}.course-lesson{font-size:.74rem}}

        .cloud-tree-note{margin:0 0 10px;padding:9px 11px;background:#fff3c4;border:2px solid var(--mc-ink);border-radius:4px;font-size:.76rem;font-weight:800}.cloud-tree-grade,.cloud-tree-subject{border:2px solid var(--mc-ink);border-radius:5px;background:#f3e6c8;margin:8px 0;overflow:hidden}.cloud-tree-grade>summary,.cloud-tree-subject>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:11px 12px;font-weight:900}.cloud-tree-grade>summary::-webkit-details-marker,.cloud-tree-subject>summary::-webkit-details-marker{display:none}.cloud-tree-grade>summary:before,.cloud-tree-subject>summary:before{content:'▶';font-size:.65rem;margin-right:7px}.cloud-tree-grade[open]>summary:before,.cloud-tree-subject[open]>summary:before{content:'▼'}.cloud-tree-grade>summary{background:var(--mc-wood);font-size:.86rem}.cloud-tree-subject>summary{background:#dedede;font-size:.78rem}.cloud-tree-units{padding:2px 10px 9px}.cloud-tree-unit{padding:9px 2px;border-top:1px solid rgba(43,27,14,.15)}.cloud-tree-unit-main{display:flex;justify-content:space-between;gap:8px;font-size:.76rem;font-weight:800}.cloud-tree-unit .parent-progress-label{font-size:.68rem}@media(max-width:520px){.cloud-tree-grade>summary,.cloud-tree-subject>summary{padding:10px;font-size:.72rem}.cloud-tree-unit-main{font-size:.7rem}.cloud-tree-unit .parent-progress-label{font-size:.62rem}}
        .grade-page-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;background:#fff3c4;border:3px solid var(--mc-ink);border-radius:5px;padding:12px;margin-bottom:18px}.grade-page-banner strong{font-family:var(--font-pixel);font-size:.82rem}.grade-page-banner span{font-size:.78rem;color:rgba(43,27,14,.65)}
        .grade-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}.grade-tab{background:var(--mc-wood);border:3px solid var(--mc-ink);border-radius:5px;padding:14px 10px;text-align:center;font-weight:800;cursor:pointer;box-shadow:inset 3px 3px 0 rgba(255,255,255,.3),inset -3px -3px 0 rgba(0,0,0,.2)}.grade-tab.active{background:var(--mc-gold);transform:translateY(2px)}.grade-tab .grade-icon{font-size:1.7rem;display:block;margin-bottom:5px}.grade-tab .grade-name{font-size:.9rem}.grade-subtitle{text-align:center;color:rgba(43,27,14,.65);margin:-8px 0 18px;font-size:.9rem}.course-section{margin-top:18px}.course-section-title{font-family:var(--font-pixel);font-size:.85rem;margin:0 0 10px;color:var(--mc-ink)}.course-card{display:flex;align-items:center;gap:12px;background:#f3e6c8;border:3px solid var(--mc-ink);border-radius:5px;padding:12px;margin-bottom:10px;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.18)}.course-card .course-icon{font-size:2rem;flex:0 0 42px;text-align:center}.course-card .course-info{min-width:0;flex:1}.course-card .course-name{font-weight:800;font-size:1rem}.course-card .course-desc{color:rgba(43,27,14,.65);font-size:.78rem;margin-top:3px}.course-card .course-status{font-size:.7rem;font-weight:800;padding:5px 7px;border:2px solid var(--mc-ink);border-radius:4px;white-space:nowrap;background:#bdf2cf}.course-card.planned{opacity:.78;background:#dedede}.course-card.planned .course-status{background:#fff}@media(max-width:520px){.grade-tabs{grid-template-columns:repeat(3,1fr);gap:7px}.grade-tab{padding:10px 5px}.grade-tab .grade-name{font-size:.72rem}.grade-tab .grade-icon{font-size:1.4rem}.course-card{padding:10px;gap:9px}.course-card .course-name{font-size:.9rem}.course-card .course-desc{font-size:.72rem}.course-card .course-status{font-size:.62rem}}

        .icon { font-size: 3.2rem; margin-bottom: 8px; }
        .label { font-family: var(--font-clear); font-size: 1.3rem; color: var(--mc-ink); font-weight: 700; }
        .sublabel { font-family: var(--font-clear); font-size: 0.85rem; color: rgba(43,27,14,0.65); margin-top: 4px; }
        .mastered-check {
            position: absolute;
            top: 6px;
            right: 6px;
            background: var(--mc-emerald);
            color: white;
            border: 2px solid var(--mc-ink);
            border-radius: 4px;
            width: 24px;
            height: 24px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .big-btn {
            font-family: var(--font-pixel);
            display: block;
            width: 100%;
            max-width: 360px;
            margin: 10px auto;
            padding: 20px 12px;
            font-size: 0.95rem;
            line-height: 1.6;
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            cursor: pointer;
            color: white;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.35), inset -4px -4px 0 rgba(0,0,0,0.3);
        }
        .big-btn.learn { background: var(--mc-diamond); }
        .big-btn.play { background: var(--mc-redstone); }
        .big-btn.again { background: var(--mc-emerald); }
        .big-btn.home { background: var(--mc-wood-dark); }
        .big-btn.write { background: var(--mc-gold); color: var(--mc-ink); }
        .big-btn:active { transform: translateY(3px); box-shadow: inset -4px -4px 0 rgba(255,255,255,0.35), inset 4px 4px 0 rgba(0,0,0,0.3); }
        .center-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
        .prompt-box { margin-bottom: 24px; }
        .prompt-visual { font-size: 5rem; margin-bottom: 8px; }
        .prompt-word { font-family: var(--font-clear); font-size: 2.2rem; font-weight: 800; color: var(--mc-ink); letter-spacing: 2px; }
        .choices {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            width: 100%;
            max-width: 460px;
        }
        .choice-btn {
            font-family: var(--font-clear);
            background: #f3e6c8;
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.4), inset -4px -4px 0 rgba(0,0,0,0.2);
            padding: 20px 10px;
            min-height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--mc-ink);
            cursor: pointer;
        }
        .choice-btn.word-choice { font-size: 1.6rem; }
        .choice-btn.chinese-choice { flex-direction: column; font-size: 1.8rem; gap: 4px; }
        .choice-btn:active { transform: translateY(3px); box-shadow: inset -4px -4px 0 rgba(255,255,255,0.4), inset 4px 4px 0 rgba(0,0,0,0.2); }
        .choice-btn.correct { background: #bdf2cf; border-color: var(--mc-emerald); animation: pop 0.4s; }
        .choice-btn.incorrect { background: #f7c9c2; border-color: var(--mc-redstone); animation: shake 0.4s; }
        .choice-btn.persist { box-shadow: 0 0 0 4px var(--mc-gold); }
        @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
        @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
        .replay-btn {
            font-family: var(--font-clear);
            background: var(--mc-gold);
            border: 3px solid var(--mc-ink);
            border-radius: 4px;
            box-shadow: inset 3px 3px 0 rgba(255,255,255,0.4), inset -3px -3px 0 rgba(0,0,0,0.25);
            padding: 10px 20px;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--mc-ink);
            margin: 10px 0 20px;
            cursor: pointer;
        }
        .progress-bar-track {
            background: var(--mc-stone-dark);
            border: 2px solid var(--mc-ink);
            border-radius: 4px;
            height: 12px;
            width: 100%;
            overflow: hidden;
            margin-top: 6px;
        }
        .progress-bar-fill { background: var(--mc-emerald); height: 100%; }
        .footer { text-align: center; color: rgba(43,27,14,0.55); margin-top: 20px; font-size: 0.8rem; }
        .dots-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 320px; font-size: 2.2rem; margin-bottom: 10px; }
        .math-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
        .math-eq { font-family: var(--font-pixel); font-size: 2.2rem; color: var(--mc-ink); line-height: 1.5; display: flex; align-items: center; gap: 10px; }
        .math-eq .op { color: var(--mc-redstone); }
        .math-eq .qm { color: var(--mc-emerald); }
        .trophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 14px; margin-top: 16px; }
        .trophy { font-family: var(--font-clear); background: var(--mc-wood); border: 3px solid var(--mc-ink); border-radius: 4px; box-shadow: inset 3px 3px 0 rgba(255,255,255,0.35), inset -3px -3px 0 rgba(0,0,0,0.2); padding: 16px; text-align: center; color: var(--mc-ink); font-weight: 700; }
        .trophy.locked { opacity: 0.4; background: var(--mc-stone); }
        .trophy .icon { font-size: 2.4rem; margin-bottom: 4px; }
        .trace-box {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 320px;
            background: #f3e6c8;
            border: 3px solid var(--mc-ink);
            border-radius: 8px;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.4), inset -4px -4px 0 rgba(0,0,0,0.15);
            margin: 0 auto;
            overflow: hidden;
        }
        .trace-ghost {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-clear);
            font-weight: 800;
            color: rgba(43,27,14,0.2);
            letter-spacing: 2px;
            pointer-events: none;
            user-select: none;
            padding: 10px;
            text-align: center;
            white-space: nowrap;
        }
        .trace-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
        .trace-controls { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
        .color-picker { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
        .color-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mc-ink); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
        .color-swatch:hover { transform: scale(1.15); }
        .color-swatch.active { box-shadow: 0 0 0 3px var(--mc-gold), 2px 2px 0 rgba(0,0,0,0.2); transform: scale(1.15); }
        .confetti-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
        .confetti-piece { position: absolute; font-size: 1.8rem; animation: fall 1.1s ease-in forwards; }
        @keyframes fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(70vh) rotate(360deg); opacity: 0; } }
        .draw-canvas { width: 100%; max-width: 900px; height: clamp(320px, 55vh, 600px); background: #fff; border: 3px solid var(--mc-ink); border-radius: 8px; touch-action: none; cursor: crosshair; box-shadow: inset 4px 4px 0 rgba(255,255,255,0.4), inset -4px -4px 0 rgba(0,0,0,0.15); }
        .draw-toolbar { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }
        .draw-toolbar .icon-btn { font-size: 1.8rem; }
        .draw-swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--mc-ink); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
        .draw-swatch:hover { transform: scale(1.15); }
        .draw-swatch.active { box-shadow: 0 0 0 3px var(--mc-gold), 2px 2px 0 rgba(0,0,0,0.2); transform: scale(1.15); }
        .draw-size { display: flex; gap: 8px; align-items: center; margin-left: 8px; }
        .draw-size-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--mc-ink); background: #f3e6c8; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .draw-size-btn.active { background: var(--mc-gold); }
        .draw-dot { border-radius: 50%; background: var(--mc-ink); }
        .draw-tool-btn { width: 48px; height: 48px; border-radius: 10px; border: 3px solid var(--mc-ink); background: #f3e6c8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); transition: background 0.15s; }
        .draw-tool-btn:hover { background: #e8d5a8; }
        .draw-tool-btn.active { background: var(--mc-gold); }
        .learn-display { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 40; }
        .learn-display-inner { background: #f3e6c8; border: 4px solid var(--mc-ink); border-radius: 12px; padding: 30px 50px; text-align: center; box-shadow: 6px 6px 0 rgba(0,0,0,0.3); max-width: 90vw; }
        .learn-display-letter { font-size: 6rem; font-family: var(--font-clear); font-weight: 800; color: var(--mc-ink); min-height: 100px; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; }
        .learn-display-word { font-size: 2.5rem; font-family: var(--font-clear); font-weight: 700; color: var(--mc-ink); margin-top: 10px; }
        .learn-display-sub { font-size: 1.2rem; color: #888; margin-top: 8px; }
        /* Streak */
        .streak-badge {
            font-family: var(--font-pixel);
            font-size: 0.85rem;
            color: var(--mc-ink);
            background: var(--mc-gold);
            border: 2px solid var(--mc-ink);
            border-radius: 4px;
            padding: 6px 12px;
            margin-bottom: 12px;
            display: none;
            animation: pop 0.3s;
        }
        .streak-badge.active { display: inline-block; }
        .streak-badge.fire { background: #ff6b35; color: #fff; }
        .streak-badge.unstoppable { background: #9b59b6; color: #fff; }
        .streak-badge.legendary { background: linear-gradient(135deg, #ffd700, #ff6b35); color: #fff; font-size: 1rem; }
        /* Pattern sequence display */
        .pattern-seq { font-size: 2.4rem; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
        .pattern-q { font-size: 2.4rem; color: var(--mc-redstone); font-weight: 800; }
        /* Comparison visual */
        .compare-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 2.5rem; margin-bottom: 10px; }
        .compare-emojis { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .compare-emoji-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 180px; }
        .compare-symbol { font-family: var(--font-pixel); font-size: 2rem; color: var(--mc-redstone); }
        /* Position scene */
        .position-scene { font-size: 2.8rem; margin-bottom: 10px; letter-spacing: 4px; }
        /* Measurement items */
        .measure-wrap { display: flex; align-items: center; justify-content: center; gap: 30px; font-size: 2rem; margin-bottom: 10px; }
        .measure-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .measure-emoji { font-size: 3rem; }
        /* Coin display */
        .coin-wrap { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
        .coin { font-size: 2.2rem; }
        .coin-label { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--mc-ink); }
        .coin-stack { display: flex; flex-direction: column; align-items: center; }
        /* Word choice for sight words */
        .choice-btn.sightword-choice { font-size: 2.5rem; font-weight: 800; letter-spacing: 3px; }
        .choice-btn.compare-choice { font-size: 2.8rem; font-weight: 800; }
        .cat-worksheets { background: #8e44ad; }
        @media print {
            body { background: white !important; padding: 0 !important; }
            body::after { display: none !important; }
            .container { box-shadow: none !important; border: none !important; background: white !important; min-height: auto !important; }
            .topbar { display: none !important; }
            .footer { display: none !important; }
        }
    .world-progress{max-width:760px;margin:0 auto 18px;padding:13px 15px;border:3px solid var(--mc-ink);border-radius:16px;background:var(--mc-wood);box-shadow:inset 2px 2px 0 rgba(255,255,255,.25)}.world-header{display:flex;justify-content:space-between;gap:10px;font-weight:800}.world-track{height:14px;margin:9px 0 6px;background:var(--mc-stone);border:2px solid var(--mc-ink);border-radius:8px;overflow:hidden}.world-fill{height:100%;background:var(--mc-diamond);transition:width .35s ease}.world-text{font-size:.82rem;font-weight:700;opacity:.85}
    .skill-map{max-width:760px;margin:22px auto;padding:16px;border:3px solid var(--mc-ink);border-radius:16px;background:#fff}.skill-map h3{margin:0 0 4px}.skill-intro{margin:0 0 14px;color:#777;font-size:.9rem}.skill-row{padding:10px 0;border-top:1px solid rgba(0,0,0,.12)}.skill-top{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}.skill-track{height:10px;margin:6px 0 4px;background:var(--mc-stone);border:1px solid var(--mc-ink);border-radius:6px;overflow:hidden}.skill-fill{height:100%;background:var(--mc-grass);transition:width .3s ease}.skill-meta{font-size:.75rem;color:#777}
    .review-card{max-width:760px;margin:0 auto 18px;padding:15px;border:3px solid var(--mc-ink);border-radius:18px;background:#fff}.review-head{display:flex;justify-content:space-between;gap:10px;font-weight:800}.review-sub{margin-top:3px;color:#777;font-size:.86rem}.review-icon{font-size:2rem;float:left;margin-right:12px}.review-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.review-chip{padding:6px 9px;border-radius:12px;background:#eef7e9;font-size:.82rem;font-weight:700}.review-btn{border:2px solid var(--mc-ink);border-radius:12px;padding:9px 14px;background:var(--mc-grass);font:inherit;font-weight:900;cursor:pointer}.review-btn:active{transform:translateY(1px)}
    .review-results{max-width:760px}.review-score{font-size:2rem;font-weight:900;color:#0e6b7a;margin:8px 0}.review-summary{font-size:1rem;font-weight:700}.review-result-card{margin:14px 0;padding:14px;border:2px solid var(--mc-ink);border-radius:14px;background:#fff;text-align:left}.review-result-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.parent-dashboard{max-width:820px;margin:0 auto}.parent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.parent-kicker{font-size:.75rem;font-weight:900;letter-spacing:2px;color:#0e6b7a}.parent-date{font-size:.85rem;color:#666}.parent-diamond{font-size:1.25rem;font-weight:900}.parent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.parent-stat{padding:18px 10px;border:2px solid var(--mc-ink);border-radius:14px;background:#fff;text-align:center;font-weight:800}.parent-stat-number{font-size:2rem;color:#0e6b7a}.parent-card{margin:14px 0;padding:16px;border:2px solid var(--mc-ink);border-radius:14px;background:#fff}.parent-card h3{margin:0 0 12px}.parent-focus-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #ddd}.parent-focus-row:last-child{border-bottom:0}.parent-good{font-weight:800}.parent-progress{height:18px;background:#eee;border-radius:10px;overflow:hidden;border:1px solid #bbb}.parent-progress-fill{height:100%;background:var(--mc-green);border-radius:10px}.parent-progress-label{margin-top:8px;font-size:.9rem;font-weight:700;color:#555}@media(max-width:600px){.parent-grid{grid-template-columns:1fr}.parent-focus-row{font-size:.9rem}}
    /* ---------- Home dashboard ---------- */
    .home-hero{text-align:center;padding:8px 12px 16px}.home-kicker{font-weight:900;letter-spacing:.12em;font-size:.78rem;opacity:.7}.home-hero h1{margin:6px 0 4px}.home-hero p{margin:0;color:#777}
    .today-card{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto 20px;padding:18px;border:3px solid #d9b44a;border-radius:22px;background:linear-gradient(135deg,#fff9d8,#fff);box-shadow:0 6px 0 rgba(0,0,0,.08);cursor:pointer}.today-icon{font-size:2.5rem}.today-copy{flex:1;min-width:0;text-align:left}.today-kicker{font-size:.75rem;font-weight:900;letter-spacing:.1em;color:#9b7410}.today-title{font-size:1.35rem;font-weight:900;margin-top:2px}.today-sub{color:#777;margin-top:3px}.today-card .big-btn{width:auto;min-width:110px;margin:0}
    .home-section-title{max-width:760px;margin:18px auto 10px;padding:0 4px}.home-featured{max-width:760px;margin:0 auto}.home-grade-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}.home-grade-card{min-height:92px;padding:12px 8px;background:#f3e6c8;border:3px solid var(--mc-ink);border-radius:6px;box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.16);cursor:pointer;text-align:center}.home-grade-card:active{transform:translateY(2px)}.home-grade-icon{font-size:1.8rem;line-height:1.2}.home-grade-label{font-family:var(--font-pixel);font-size:.72rem;margin-top:5px}.home-grade-sub{font-size:.65rem;opacity:.65;margin-top:4px}.home-grade-card.active-grade{background:#d9f1df}.home-grade-card.planned-grade{opacity:.82}@media(max-width:600px){.home-grade-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.home-grade-card{min-height:78px;padding:9px 6px}.home-grade-icon{font-size:1.5rem}.home-grade-label{font-size:.62rem}.home-grade-sub{font-size:.58rem}}@media(max-width:360px){.home-grade-menu{gap:6px}.home-grade-card{min-height:72px}.home-grade-icon{font-size:1.35rem}}.home-tools{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}.home-tool{border:2px solid rgba(43,27,14,.12);border-radius:16px;padding:13px 10px;background:#fff;font:inherit;font-weight:800;cursor:pointer;min-height:52px}.home-tool:active,.today-card:active{transform:translateY(1px)}
    @media(max-width:560px){.today-card{flex-wrap:wrap}.today-card .big-btn{width:100%}.home-hero h1{font-size:1.65rem}}

        /* ---------- BlockQuest Classroom Animation System ---------- */
        @media (prefers-reduced-motion: no-preference) {
            .container { animation: mcPageIn 0.45s ease-out both; }
            .grid .card { animation: mcCardIn 0.38s cubic-bezier(.2,.8,.2,1) both; }
            .grid .card:nth-child(2n) { animation-delay: .04s; }
            .grid .card:nth-child(3n) { animation-delay: .08s; }
            .grid .card:nth-child(4n) { animation-delay: .12s; }
            .big-btn, .choice-btn, .review-chip, .parent-card, .trophy { transition: transform .16s ease, filter .16s ease; }
            .big-btn:hover, .choice-btn:hover, .card:hover, .review-chip:hover { transform: translateY(-3px); filter: brightness(1.04); }
            .daily-missions { animation: mcSlideUp .42s ease-out both; }
            .streak-badge.active { animation: mcFirePulse 1.2s ease-in-out infinite; }
            .star-badge { animation: mcFloat 2.8s ease-in-out infinite; }
            .mastered-check { animation: mcPopIn .35s cubic-bezier(.2,1.5,.4,1) both; }
            .progress-bar-fill, .world-fill, .skill-fill { animation: mcProgressIn .8s ease-out both; transform-origin: left center; }
            .mc-animate-in { animation: mcSlideUp .4s ease-out both; }
            .mc-reward { animation: mcReward .75s cubic-bezier(.2,1.4,.4,1) both; }
            .mc-celebrate { animation: mcCelebrate .9s ease-out both; }
        }
        @keyframes mcPageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
        @keyframes mcCardIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
        @keyframes mcSlideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
        @keyframes mcPopIn { 0% { opacity:0; transform:scale(.4); } 70% { transform:scale(1.18); } 100% { opacity:1; transform:scale(1); } }
        @keyframes mcProgressIn { from { transform:scaleX(0); } to { transform:scaleX(1); } }
        @keyframes mcFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
        @keyframes mcFirePulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
        @keyframes mcReward { 0% { opacity:0; transform:translateY(12px) scale(.5) rotate(-8deg); } 60% { opacity:1; transform:translateY(-5px) scale(1.12) rotate(3deg); } 100% { opacity:1; transform:none; } }
        @keyframes mcCelebrate { 0% { transform:scale(.85); opacity:.2; } 55% { transform:scale(1.06); opacity:1; } 100% { transform:scale(1); opacity:1; } }
        .mc-floaters { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:60; }
        .mc-floater { position:absolute; font-size:1.8rem; animation:mcFloatUp 1s ease-out forwards; }
        @keyframes mcFloatUp { 0% { opacity:0; transform:translate(0,10px) scale(.5) rotate(0); } 20% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),-90px) scale(1.2) rotate(18deg); } }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
        }

        @media (prefers-reduced-motion: no-preference) {
            .choice-btn.correct { animation: mcCorrectPop .45s cubic-bezier(.2,1.5,.4,1); }
            .choice-btn.incorrect { animation: mcWrongShake .42s ease-in-out; }
            .world-progress.world-unlock { animation: mcWorldUnlock .8s cubic-bezier(.2,1.4,.4,1); }
        }
        @keyframes mcCorrectPop { 0%{transform:scale(1)} 45%{transform:scale(1.1) rotate(-1deg)} 100%{transform:scale(1)} }
        @keyframes mcWrongShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 50%{transform:translateX(7px)} 75%{transform:translateX(-4px)} }
        @keyframes mcWorldUnlock { 0%{transform:scale(.96);filter:brightness(1)} 45%{transform:scale(1.04);filter:brightness(1.18)} 100%{transform:scale(1);filter:brightness(1)} }

        .mc-levelup { position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:70; background:rgba(0,0,0,.08); }
        .mc-levelup-box { text-align:center; min-width:260px; padding:24px 30px; border:4px solid #222; border-radius:14px; background:linear-gradient(#f8fff0,#e5f7d8); box-shadow:0 10px 0 #222, 0 18px 30px rgba(0,0,0,.22); }
        .mc-levelup-icon { font-size:3rem; }
        .mc-levelup-title { margin-top:4px; font-size:2rem; font-weight:900; letter-spacing:2px; }
        .mc-levelup-skill { margin-top:8px; font-weight:700; }
        .mc-levelup-reward { margin-top:12px; font-size:1.3rem; font-weight:900; }
        @media (prefers-reduced-motion: no-preference) { .mc-levelup-box { animation:mcLevelUpBox .85s cubic-bezier(.2,1.35,.4,1) both; } .mc-levelup-icon { animation:mcLevelUpIcon .8s ease-out both; } }
        @keyframes mcLevelUpBox { 0%{opacity:0;transform:scale(.45) rotate(-3deg)} 65%{opacity:1;transform:scale(1.08) rotate(1deg)} 100%{transform:scale(1)} }
        @keyframes mcLevelUpIcon { 0%{transform:translateY(18px) scale(.3);opacity:0} 70%{transform:translateY(-5px) scale(1.2);opacity:1} 100%{transform:none} }
        @media (prefers-reduced-motion: reduce) { .mc-levelup-box,.mc-levelup-icon { animation:none; } }

        .world-map { display:flex; align-items:flex-start; gap:6px; margin:12px 0 10px; overflow-x:auto; padding:5px 2px 8px; scrollbar-width:thin; }
        .world-node { min-width:74px; text-align:center; opacity:.42; transform:scale(.94); transition:opacity .3s ease, transform .3s ease, filter .3s ease; }
        .world-node-icon { width:52px; height:52px; margin:auto; display:grid; place-items:center; border:3px solid #333; border-radius:10px; background:#d7d7d7; font-size:1.8rem; box-shadow:0 4px 0 #333; }
        .world-node-name { margin-top:6px; font-size:.72rem; font-weight:800; white-space:nowrap; }
        .world-node-threshold { font-size:.62rem; opacity:.72; margin-top:2px; }
        .world-node.unlocked { opacity:1; transform:scale(1); filter:none; }
        .world-node.unlocked .world-node-icon { background:#eaf7df; }
        .world-node.active .world-node-icon { box-shadow:0 4px 0 #333, 0 0 0 3px rgba(255,215,0,.45); }
        .world-node.active { transform:scale(1.06); }
        .world-connector { flex:1; min-width:18px; height:5px; margin-top:25px; border-radius:4px; background:#aaa; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
        .world-node.unlocked + .world-connector { background:#78a84b; }
        @media (prefers-reduced-motion:no-preference) {
            .world-node.unlocked .world-node-icon { animation:mcWorldNodeIn .55s cubic-bezier(.2,1.4,.4,1) both; }
            .world-node.active .world-node-icon { animation:mcWorldPulse 1.8s ease-in-out infinite; }
        }
        @keyframes mcWorldNodeIn { 0%{transform:scale(.5) rotate(-8deg);opacity:.2} 70%{transform:scale(1.12) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
        @keyframes mcWorldPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px) scale(1.05)} }
        @media (max-width:600px) { .world-node { min-width:68px; } .world-node-icon { width:46px; height:46px; font-size:1.55rem; } }

        .world-node { appearance:none; border:0; padding:0; color:inherit; font:inherit; background:transparent; cursor:default; }
        .world-node.unlocked { cursor:pointer; }
        .world-node.selected .world-node-icon { box-shadow:0 4px 0 #333, 0 0 0 4px rgba(76,175,80,.45); }
        .world-detail { max-height:0; overflow:hidden; opacity:0; margin:0; border-radius:12px; background:#f4f8ef; border:0 solid #333; transition:max-height .45s ease, opacity .3s ease, margin .3s ease, padding .3s ease; }
        .world-detail.open { max-height:420px; opacity:1; margin:4px 0 12px; padding:14px; border-width:2px; box-shadow:0 4px 0 rgba(0,0,0,.18); }
        .world-detail-title { display:flex; align-items:center; justify-content:space-between; font-size:1.05rem; font-weight:900; }
        .world-close { border:2px solid #333; background:#fff; border-radius:7px; width:30px; height:30px; cursor:pointer; font-weight:900; }
        .world-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
        .world-detail-label { font-size:.68rem; font-weight:900; letter-spacing:.7px; margin-bottom:7px; opacity:.7; }
        .world-skills { display:flex; flex-wrap:wrap; gap:6px; }
        .world-skill-chip { display:inline-flex; gap:5px; align-items:center; padding:6px 8px; border:2px solid #bbb; border-radius:8px; background:#fff; font-size:.76rem; }
        .world-skill-chip.mastered { border-color:#6e9e45; background:#edf8df; }
        .world-building { display:flex; align-items:center; gap:8px; padding:7px 8px; margin-bottom:6px; border:2px solid #bbb; border-radius:8px; background:#fff; font-size:.78rem; }
        .world-building span { font-size:1.25rem; }
        @media (prefers-reduced-motion:no-preference) { .world-detail.open { animation:mcWorldDetailIn .45s ease-out both; } .world-node.selected .world-node-icon { animation:mcWorldSelect .55s cubic-bezier(.2,1.4,.4,1); } }
        @keyframes mcWorldDetailIn { from{transform:translateY(-8px);opacity:0} to{transform:translateY(0);opacity:1} }
        @keyframes mcWorldSelect { 0%{transform:scale(1)} 55%{transform:scale(1.13) rotate(-2deg)} 100%{transform:scale(1)} }
        @media (max-width:600px) { .world-detail-grid { grid-template-columns:1fr; gap:10px; } }

        .world-building { display:flex; align-items:center; gap:10px; padding:9px; margin-bottom:7px; border:2px solid #bbb; border-radius:9px; background:#fff; overflow:hidden; }
        .building-art { min-width:78px; height:52px; display:flex; align-items:center; justify-content:center; gap:2px; font-size:1.45rem; background:repeating-linear-gradient(0deg,#e7e7e7 0 8px,#f5f5f5 8px 16px); border:2px solid #999; border-radius:7px; }
        .building-info { min-width:0; flex:1; }
        .building-info strong { display:block; font-size:.76rem; }
        .building-info span { display:block; font-size:.64rem; opacity:.72; margin:2px 0 5px; }
        .building-track { height:6px; background:#ddd; border-radius:5px; overflow:hidden; }
        .building-fill { height:100%; transform-origin:left; background:#6f9d48; transition:width .7s ease; }
        .world-building.finished { border-color:#6f9d48; background:#f0f9e8; }
        @media (prefers-reduced-motion:no-preference) { .world-building.finished .building-art { animation:mcBuildingFinish .75s cubic-bezier(.2,1.4,.4,1); } .building-fill { animation:mcBuildFill .8s ease-out both; } }
        @keyframes mcBuildingFinish { 0%{transform:scale(.85) rotate(-2deg);filter:brightness(1)} 55%{transform:scale(1.08) rotate(1deg);filter:brightness(1.25)} 100%{transform:scale(1)} }
        @keyframes mcBuildFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
<style>.account-bar{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin:8px 0;flex-wrap:wrap}.account-sync{font-size:.74rem;font-weight:800;opacity:.78;min-height:24px;display:inline-flex;align-items:center;gap:3px}.account-btn{border:2px solid #333;border-radius:9px;background:#fff;padding:8px 11px;min-height:44px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #333}.account-name{font-size:.82rem;font-weight:800}.account-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:18px}.account-box{width:min(410px,100%);box-sizing:border-box;background:#f7fbf1;border:4px solid #333;border-radius:16px;padding:22px;box-shadow:0 10px 0 #222,0 20px 40px rgba(0,0,0,.3)}.account-box h2{margin:0 0 8px}.account-box p{font-size:.84rem;opacity:.72}.account-box input{width:100%;box-sizing:border-box;margin:7px 0;padding:11px;border:2px solid #999;border-radius:8px;font-size:1rem}.account-actions{display:flex;gap:8px;margin-top:10px}.account-actions button,.account-switch button{flex:1;padding:10px;border:2px solid #333;border-radius:8px;background:#fff;font-weight:800;cursor:pointer}.account-status{min-height:22px;margin-top:8px;font-size:.82rem;font-weight:700}.account-switch{margin-top:9px;text-align:center}.account-switch button{width:100%;border:0;padding:6px;background:transparent;font-size:.76rem;box-shadow:none}@media(prefers-reduced-motion:no-preference){.account-box{animation:mcAccountIn .35s cubic-bezier(.2,1.3,.4,1)}}@keyframes mcAccountIn{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:none}}
/* ---------- Mobile layout hardening ---------- */
html { width: 100%; overflow-x: hidden; }
body { width: 100%; overflow-x: hidden; }
.container { overflow-x: hidden; }
img, canvas, svg, video { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.topbar, .topbar-left, .topbar-right { min-width: 0; }
.topbar-left, .topbar-right { flex-shrink: 1; }
.topbar-right { justify-content: flex-end; }
.topbar .icon-btn { flex: 0 0 56px; }
.topbar .star-badge { min-width: 0; white-space: nowrap; overflow: hidden; }
.learn-display-inner { width: min(90vw, 600px); max-height: 88vh; overflow: auto; padding: 24px; }
.learn-display-word { overflow-wrap: anywhere; }
.trace-ghost { white-space: normal; overflow-wrap: anywhere; }
.math-eq { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.compare-wrap, .measure-wrap { max-width: 100%; flex-wrap: wrap; }
.parent-header, .world-header, .review-head { min-width: 0; }
.parent-header > *, .world-header > *, .review-head > * { min-width: 0; }
.today-copy { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body { padding: 8px 8px 54px; }
  .container { width: 100%; max-width: 100%; min-height: calc(100dvh - 62px); padding: 10px; border-width: 3px; }
  .topbar { gap: 6px; margin-bottom: 10px; }
  .topbar-left, .topbar-right { gap: 5px; }
  .topbar .icon-btn { width: 46px; height: 46px; flex-basis: 46px; font-size: 1.25rem; }
  .star-badge { padding: 8px 9px; font-size: .72rem; }
  h1 { font-size: 1.2rem; line-height: 1.45; margin-bottom: 14px; }
  h2 { font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .card { min-width: 0; min-height: 86px; padding: 14px 7px; }
  .icon { font-size: 2.35rem; }
  .label { font-size: 1rem; overflow-wrap: anywhere; }
  .sublabel { font-size: .72rem; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 100%; }
  .choice-btn { min-width: 0; min-height: 76px; padding: 14px 6px; font-size: 1.7rem; overflow-wrap: anywhere; }
  .choice-btn.word-choice { font-size: 1.15rem; }
  .choice-btn.chinese-choice { font-size: 1.35rem; }
  .choice-btn.sightword-choice { font-size: 1.55rem; letter-spacing: 1px; }
  .choice-btn.compare-choice { font-size: 2rem; }
  .prompt-visual { font-size: 4rem; }
  .prompt-word { font-size: 1.65rem; overflow-wrap: anywhere; }
  .big-btn { max-width: 100%; padding: 16px 9px; font-size: .78rem; }
  .trace-box { height: min(52vh, 280px); }
  .draw-canvas { height: min(58vh, 480px); }
  .draw-toolbar { gap: 7px; }
  .draw-swatch { width: 38px; height: 38px; }
  .draw-tool-btn { width: 44px; height: 44px; }
  .compare-wrap, .measure-wrap { gap: 12px; font-size: 2rem; }
  .position-scene { font-size: 2.2rem; letter-spacing: 2px; overflow-wrap: anywhere; }
  .math-eq { font-size: 1.65rem; gap: 6px; }
  .trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .trophy { min-width: 0; padding: 12px 7px; }
  .world-detail.open { max-height: 70vh; overflow-y: auto; }
  .account-bar { flex-wrap: wrap; }
}
/* ---------- Extra narrow-screen layout hardening ---------- */
.parent-focus-row > *, .skill-top > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 430px) {
  .home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-tool { padding-left: 7px; padding-right: 7px; }
  .skill-top { flex-wrap: wrap; }
  .parent-focus-row { flex-wrap: wrap; }
}
/* ---------- Narrow-screen component hardening ---------- */
#blipolaBuddy { flex-wrap: wrap; }
#blipolaBuddy #blipolaMessage { min-width: 0; flex: 1 1 150px; overflow-wrap: anywhere; }

#blipolaBuddy .choice-btn { width: auto; max-width: 100%; min-height: 44px; flex: 0 0 auto; }
.mc-levelup-box { width: min(92vw, 520px); max-width: 100%; min-width: 0; }
@media (max-width: 430px) {
  #blipolaBuddy { gap: 7px; padding: 8px 9px !important; }
  #blipolaBuddy > .choice-btn { padding: 8px 9px !important; font-size: .9rem; }

  .mc-levelup-box { padding: 18px 14px; }
  .mc-levelup-title { font-size: 1.5rem; letter-spacing: 1px; }
  .mc-levelup-reward { font-size: 1.05rem; }
}
@media (max-width: 430px) {
  .container { min-height: calc(100dvh - 62px); }
  .account-modal { padding: 10px; }
  .account-box { padding: 16px; border-width: 3px; }
  .account-actions { flex-direction: column; }
}
@media (orientation: landscape) and (max-height: 600px) {
  body { padding-bottom: 44px; }
  .container { min-height: auto; }
  .draw-canvas { height: 55vh; min-height: 220px; }
  .trace-box { height: 220px; }
  .learn-display-inner { max-height: 82vh; }
}
@media (max-width: 380px) {
  .topbar { gap: 4px; }
  .topbar-left, .topbar-right { gap: 4px; }
  .topbar .icon-btn { width: 38px; height: 38px; flex-basis: 38px; font-size: 1rem; }
  .topbar .star-badge { max-width: 78px; padding: 6px 5px; font-size: .58rem; overflow:hidden; text-overflow:ellipsis; }
  .grid { gap: 7px; }
  .card { padding: 11px 5px; min-height: 78px; }
  .icon { font-size: 2rem; }
  .label { font-size: .9rem; }
  .choices { gap: 7px; }
  .choice-btn { min-height: 68px; font-size: 1.45rem; }
  .choice-btn.word-choice { font-size: 1rem; }
  .big-btn { font-size: .7rem; }
}

/* ---------- Mobile touch UX and safe-area hardening ---------- */
body { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
.global-blipola-voice { bottom: calc(58px + env(safe-area-inset-bottom)); }
.learn-display { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); overflow-y: auto; }
.learn-display-inner { width: min(90vw, 760px); max-width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; }
.account-modal { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); overflow-y: auto; }
.account-box { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
.world-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.review-btn { min-height: 44px; }
@media (max-width: 600px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .global-blipola-voice { bottom: calc(48px + env(safe-area-inset-bottom)); }
  .draw-size-btn { width: 44px; height: 44px; }
  .draw-swatch { width: 42px; height: 42px; }
  .color-swatch { width: 42px; height: 42px; }
  .world-detail.open { max-height: min(70vh, calc(100dvh - 150px)); }
}
@media (max-width: 380px) {
  .draw-toolbar { gap: 6px; }
  .draw-swatch { width: 40px; height: 40px; }
  .color-swatch { width: 40px; height: 40px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  body { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
  .learn-display-inner { max-height: calc(82vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
/* ---------- Component-level narrow-screen hardening ---------- */
.math-eq { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.compare-wrap, .measure-wrap { min-width: 0; max-width: 100%; }
.position-scene { max-width: 100%; overflow-wrap: anywhere; }
.world-detail-grid, .world-building { min-width: 0; }
.building-art { flex: 0 1 78px; }
.building-info { overflow-wrap: anywhere; }
.today-card { min-width: 0; }
.today-title, .today-sub { overflow-wrap: anywhere; }
.trace-controls > *, .color-picker > * { flex: 0 0 auto; }
@media (max-width: 600px) {
  .math-eq { font-size: 1.5rem; gap: 5px; line-height: 1.35; }
  .compare-wrap { gap: 9px; font-size: 1.7rem; }
  .measure-wrap { gap: 12px; font-size: 1.6rem; }
  .position-scene { font-size: 2.15rem; letter-spacing: 2px; }
  .color-picker { gap: 7px; flex-wrap: wrap; max-width: 100%; }
  .color-swatch { width: 42px; height: 42px; }
  .world-detail-grid { grid-template-columns: 1fr; }
  .world-building { align-items: flex-start; }
  .building-art { min-width: 64px; width: 64px; height: 48px; }
  .today-card { padding: 14px; gap: 9px; }
  .today-icon { font-size: 2rem; }
  .today-title { font-size: 1.15rem; }
}
@media (max-width: 380px) {
  .math-eq { font-size: 1.3rem; }
  .compare-wrap, .measure-wrap { gap: 7px; }
  .position-scene { font-size: 1.9rem; letter-spacing: 1px; }
  .today-card { padding: 12px; }
  .today-title { font-size: 1.05rem; }
}


/* ---------- Compact My Learning World on phones ---------- */
@media (max-width: 600px) {
  .world-progress { margin-bottom: 12px; padding: 9px 10px; border-width: 2px; border-radius: 12px; }
  .world-header { font-size: .78rem; gap: 6px; }
  .world-map { gap: 4px; margin: 7px 0 6px; padding: 3px 1px 5px; }
  .world-node { min-width: 58px; }
  .world-node-icon { width: 38px; height: 38px; border-width: 2px; border-radius: 8px; font-size: 1.25rem; box-shadow: 0 3px 0 #333; }
  .world-node-name { margin-top: 4px; font-size: .62rem; }
  .world-node-threshold { font-size: .55rem; margin-top: 1px; }
  .world-connector { min-width: 10px; height: 4px; margin-top: 19px; }
  .world-track { height: 10px; margin: 6px 0 4px; border-width: 1px; }
  .world-text { font-size: .7rem; }
}
@media (max-width: 380px) {
  .world-progress { padding: 8px; }
  .world-node { min-width: 54px; }
  .world-node-icon { width: 34px; height: 34px; font-size: 1.1rem; }
  .world-node-name { font-size: .56rem; }
  .world-node-threshold { font-size: .5rem; }
  .world-connector { min-width: 7px; margin-top: 17px; }
}

/* ---------- Advanced graph controls ---------- */
.grade-graph-bar-wrap.picked{outline:3px solid #6b7280;border-radius:10px}.grade-graph-bar-wrap{touch-action:manipulation}
/* ---------- Measurement controls ---------- */
.grade-measure-object{height:34px;display:flex;align-items:center;justify-content:flex-start;margin:12px auto 18px;width:92%;background:repeating-linear-gradient(90deg,#6b7280 0 10%,transparent 10% 11%);border-radius:8px;overflow:hidden}.grade-measure-object span{font-size:25px;margin-left:4px}.grade-ruler{overflow-x:auto;padding-bottom:5px}.grade-ruler-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(42px,1fr);min-width:300px;border-bottom:4px solid #6b7280}.grade-ruler-mark{height:46px;background:linear-gradient(#6b7280,#6b7280) center top/3px 18px no-repeat;border:0;font-weight:800;cursor:pointer}.grade-ruler-mark span{display:block;margin-top:20px}.grade-measure-help{text-align:center;font-weight:700;margin-top:10px}.grade-measure-compare{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.grade-measure-option{min-width:100px;min-height:82px;border:2px solid #cfc6b8;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}.grade-compare-object{height:20px;background:#6b7280;border-radius:5px}.grade-measure-sort{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto 10px}.grade-measure-sort-item{min-height:48px;border:2px solid #cfc6b8;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-weight:800;cursor:pointer}.grade-measure-sort-item.picked{outline:3px solid #6b7280}.grade-interactive-reset{margin-left:8px;min-height:44px;padding:8px 14px;border:2px solid #cfc6b8;border-radius:9px;background:#fff;font-weight:800}@media(max-width:420px){.grade-ruler-track{grid-auto-columns:42px}.grade-measure-option{min-width:92px}}
/* ---------- Ten-frame and Place Value controls ---------- */
.grade-tenframe{display:grid;grid-template-columns:repeat(5,44px);grid-template-rows:repeat(2,44px);gap:5px;justify-content:center;margin:12px auto}.grade-tenframe-cell{border:2px solid #9b9185;background:#fff;border-radius:6px;cursor:pointer}.grade-tenframe-cell.filled{background:#6b7280;box-shadow:inset 0 0 0 5px #fff}.grade-tenframe-count{text-align:center;font-weight:800}.grade-place-visual{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}.grade-place-label{text-align:center;font-weight:900;margin-bottom:6px}.grade-ten-groups{display:flex;flex-wrap:wrap;gap:7px;max-width:210px;justify-content:center}.grade-ten-group{display:grid;grid-template-columns:repeat(5,12px);gap:3px;padding:5px;border:2px solid #9b9185;border-radius:7px}.grade-ten-group span{width:12px;height:12px;border-radius:50%;background:#6b7280}.grade-ones{display:flex;flex-wrap:wrap;gap:6px;max-width:120px}.grade-one-dot{width:22px;height:22px;border-radius:50%;background:#6b7280}.grade-place-inputs{display:flex;justify-content:center;gap:12px;margin:14px 0;flex-wrap:wrap}.grade-place-inputs label{font-weight:800}.grade-place-inputs input{width:62px;margin-left:5px;font-size:18px;padding:8px;border:2px solid #cfc6b8;border-radius:8px}@media(max-width:420px){.grade-tenframe{grid-template-columns:repeat(5,40px);grid-template-rows:repeat(2,40px);gap:4px}.grade-tenframe-cell{min-width:40px;min-height:40px}}
/* ---------- Word Problem interaction controls ---------- */
.grade-word-story-icon{text-align:center;font-size:2rem;margin-bottom:4px}.grade-word-objects{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:360px;margin:10px auto}.grade-word-object{width:42px;height:42px;border:2px solid #cfc6b8;border-radius:50%;background:#fff;font-size:1.35rem;cursor:pointer;line-height:1}.grade-word-object.selected{transform:scale(1.08);outline:3px solid #6b7280;background:#f1f1f1}.grade-word-counter{text-align:center;font-weight:800;margin:6px}.grade-word-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
/* ---------- Data & Graphs interaction controls ---------- */
.grade-graph-title{font-weight:900;text-align:center;margin-bottom:8px}.grade-graph-area{height:175px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;border-left:2px solid #8d8479;border-bottom:2px solid #8d8479;padding:8px 6px 0 22px;position:relative}.grade-graph-bar-wrap{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:48px;height:100%;cursor:pointer;font:inherit}.grade-graph-bar{display:block;width:34px;background:#6b7280;border-radius:7px 7px 0 0;min-height:18px}.grade-graph-count{font-size:.8rem;font-weight:900}.grade-graph-label{font-size:.72rem;font-weight:800;white-space:nowrap}.grade-graph-y{position:absolute;display:flex;flex-direction:column;justify-content:space-between;height:160px;font-size:.68rem;color:#766c60}.grade-graph-help{text-align:center;font-size:.78rem;color:#766c60;margin-top:8px}@media(max-width:420px){.grade-graph-label{font-size:.62rem}.grade-graph-bar{width:27px}.grade-graph-bar-wrap{min-width:40px}}
/* ---------- Additional Math interaction controls ---------- */
.grade-shape-grid,.grade-clock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:440px;margin:auto}.grade-shape-card,.grade-clock-card{min-height:88px;border:2px solid #cfc6b8;border-radius:12px;background:#fff;font:inherit;font-weight:800;cursor:pointer;padding:8px}.grade-shape-card:hover,.grade-clock-card:hover{transform:translateY(-1px)}.shape-symbol{display:block;font-size:2.2rem;line-height:1.1}.clock-svg{width:62px;height:62px;display:block;margin:auto}.grade-sort-selected{min-height:46px;margin-bottom:10px;padding:8px;border-radius:10px;background:#f7f3ed;display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}.grade-sort-empty{color:#766c60;font-size:.82rem}@media(max-width:420px){.grade-shape-grid,.grade-clock-grid{grid-template-columns:1fr 1fr;gap:7px}.grade-shape-card,.grade-clock-card{min-height:78px}}
/* ---------- Interactive Math controls ---------- */
.grade-interactive-box{margin:14px auto;padding:14px;border:2px solid #e4dccf;border-radius:14px;background:#fffdf9;max-width:520px;text-align:center}.grade-interactive-label{font-weight:800;margin-bottom:10px}.grade-numberline{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.grade-numberline-point,.grade-compare-buttons button{min-width:42px;min-height:42px;border:2px solid #cfc6b8;border-radius:10px;background:#fff;font:inherit;font-weight:800;cursor:pointer}.grade-numberline-point:hover,.grade-compare-buttons button:hover{transform:translateY(-1px)}.grade-count-objects{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:10px 0}.grade-count-dot{width:38px;height:38px;border-radius:50%;border:2px solid #8a8177;background:#fff;cursor:pointer}.grade-count-dot.selected{box-shadow:inset 0 0 0 9px #777}.grade-interactive-check{min-height:42px;padding:8px 14px;border:0;border-radius:10px;font-weight:800;cursor:pointer}.grade-compare-buttons{display:flex;gap:14px;justify-content:center}.grade-compare-buttons button{min-width:100px}
/* ---------- Compact course unit cards ---------- */
.grade-unit-summary{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 12px;font-size:.82rem;color:#675d52}.grade-unit-summary span{padding:5px 8px;border-radius:8px;background:#f7f3ed}
/* ---------- Grade 1 math interaction styles ---------- */
.grade-text-answer{display:block;width:min(420px,100%);box-sizing:border-box;margin:14px auto;padding:14px 16px;border:2px solid #cfc6b8;border-radius:12px;font:inherit;font-size:1.1rem;background:#fff}
.grade-text-answer:focus{outline:3px solid rgba(70,130,180,.25);border-color:#5b7ea6}.grade-text-answer.incorrect{border-color:#a33}.grade-visual-prompt{margin:12px auto;padding:12px;border-radius:12px;background:#f7f3ed;text-align:center;font-size:1.2rem;letter-spacing:.08em}
/* ---------- Runtime error diagnostics ---------- */
.runtime-error-report{position:fixed;right:14px;bottom:14px;z-index:99999;width:min(430px,calc(100vw - 28px));max-height:min(72vh,620px);overflow:auto;background:#fff;border:3px solid #8b2e2e;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:16px;color:#2b1b0e;font-family:inherit}
.runtime-error-report h3{margin:0 0 8px;font-size:1rem}.runtime-error-report p{margin:6px 0;font-size:.82rem;line-height:1.35}.runtime-error-report pre{white-space:pre-wrap;word-break:break-word;background:#f7f3ed;border-radius:10px;padding:10px;font-size:.7rem;line-height:1.35;max-height:260px;overflow:auto}.runtime-error-actions{display:flex;gap:8px;flex-wrap:wrap}.runtime-error-actions button{min-height:42px;padding:8px 12px;border:0;border-radius:10px;font-weight:800;cursor:pointer}.runtime-error-badge{position:fixed;right:12px;bottom:12px;z-index:99998;display:none;min-height:42px;border:0;border-radius:12px;padding:8px 12px;background:#8b2e2e;color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.22)}
@media(max-width:600px){.runtime-error-report{right:8px;bottom:8px;width:calc(100vw - 16px);padding:12px}.runtime-error-report pre{max-height:220px}}

/* Interactive tiles converted from <div onclick> to <button>: neutralize UA button chrome so the
   class rules still decide the look. Zero specificity on purpose. */
:where(button.card, button.today-card, button.course-card, button.color-swatch, button.draw-swatch,
       button.draw-size-btn, button.draw-tool-btn, button.star-badge) {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
}