@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin-800.woff2') format('woff2'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Noto Serif SC'; src: url('../fonts/noto-serif-sc-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Serif SC'; src: url('../fonts/noto-serif-sc-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Noto Serif SC'; src: url('../fonts/noto-serif-sc-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Noto Serif SC'; src: url('../fonts/noto-serif-sc-900.woff2') format('woff2'); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'Ma Shan Zheng'; src: url('../fonts/ma-shan-zheng-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Material Symbols Rounded'; src: url('../fonts/material-symbols-rounded-subset.woff2') format('woff2'); font-style: normal; font-weight: 100 700; font-display: block; }

:root {
            --md-surface: rgba(16, 12, 14, 0.86);
            --md-border: rgba(245, 196, 81, 0.42);
            --md-gold: #fbbf24;
            --md-crimson: #f43f5e;
            --md-jade: #2dd4bf;
        }

        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #07090e;
            font-family: 'Inter', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #f8fafc;
        }

        .font-imperial {
            font-family: 'Noto Serif SC', 'Cinzel', serif;
            letter-spacing: 0.08em;
        }

        .font-calligraphy {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
        }

        .material-symbols-rounded {
            font-family: 'Material Symbols Rounded';
            font-weight: normal;
            font-style: normal;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
            font-feature-settings: 'liga';
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            font-size: 18px;
            line-height: 1;
            flex-shrink: 0;
        }

        /* Material Design 3 Oriental Glassmorphic Containers */
        .md3-pill {
            background: var(--md-surface);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--md-border);
            box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.82), 0 0 24px rgba(245, 196, 81, 0.14);
        }

        .md3-card {
            background: rgba(14, 11, 15, 0.90);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(251, 191, 36, 0.48);
            box-shadow: 0 28px 68px rgba(0, 0, 0, 0.92), 0 0 48px rgba(45, 212, 191, 0.14);
        }

        .md3-btn {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.13);
        }

        .md3-btn:hover:not(:disabled) {
            background: rgba(251, 191, 36, 0.18);
            border-color: rgba(251, 191, 36, 0.58);
            transform: translateY(-1px);
        }

        .md3-btn:active:not(:disabled) {
            transform: translateY(0px) scale(0.97);
        }

        .md3-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .md3-btn-active {
            background: rgba(255, 209, 102, 0.22);
            border-color: rgba(255, 209, 102, 0.68);
            color: #fef08a;
        }

        .md3-btn-jade {
            background: rgba(192, 132, 252, 0.18);
            border-color: rgba(192, 132, 252, 0.55);
            color: #e9d5ff;
        }

        .md3-choice-card {
            transition: all 0.22s cubic-bezier(0.2, 0, 0, 1);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .md3-choice-card:hover {
            background: rgba(251, 191, 36, 0.11);
            border-color: rgba(251, 191, 36, 0.48);
        }

        .md3-choice-card.selected-gold {
            background: rgba(225, 29, 72, 0.22);
            border-color: rgba(251, 191, 36, 0.88);
            box-shadow: 0 0 24px rgba(251, 191, 36, 0.25);
        }

        .md3-choice-card.selected-jade {
            background: rgba(45, 212, 191, 0.18);
            border-color: rgba(45, 212, 191, 0.85);
            box-shadow: 0 0 24px rgba(45, 212, 191, 0.24);
        }

        /* Strict Single-Line Dock without wrapping */
        .single-line-dock {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .single-line-dock::-webkit-scrollbar {
            display: none;
        }

        #canvas-container {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        .temple-vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            background: radial-gradient(circle at 50% 48%, transparent 55%, rgba(6, 7, 11, 0.74) 100%);
        }

        .fade-transition {
            transition: opacity 0.45s cubic-bezier(0.2, 0, 0, 1), transform 0.45s cubic-bezier(0.2, 0, 0, 1);
        }

        @keyframes checkCalligraphyPop {
            0% { transform: scale(0.42); opacity: 0; }
            24% { transform: scale(1.14); opacity: 1; }
            78% { transform: scale(1.0); opacity: 1; }
            100% { transform: scale(1.26); opacity: 0; }
        }

        .check-banner-anim {
            animation: checkCalligraphyPop 1.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

/* Responsive application shell */
button { min-height: 44px; }
button:focus-visible { outline: 2px solid #fde68a; outline-offset: 3px; }
.start-scroll { overflow-y: auto; overscroll-behavior: contain; }
#start-screen[aria-hidden="true"],#start-screen[aria-hidden="true"] * { pointer-events:none!important; }
.start-card { overflow: visible; margin-block: auto; }
.start-toolbar { display:flex; justify-content:flex-end; min-height:44px; margin-bottom:16px; }
.language-button { border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; color:#e2e8f0; }
.language-glyph { color:#a5f3fc; font-size:17px; font-weight:800; line-height:1; }
.start-seal { width:64px; height:64px; border-radius:19px; margin:0 auto 14px; display:grid; place-items:center; font-size:34px; color:#fde68a; border:1px solid rgba(251,191,36,.65); background:linear-gradient(135deg,rgba(244,63,94,.2),rgba(251,191,36,.16)); box-shadow:0 0 32px rgba(251,191,36,.3); }
.start-kicker { color:#fcd34d; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:5px; }
.start-description { color:#cbd5e1; font-size:13px; line-height:1.6; max-width:440px; margin:0 auto 22px; }
.start-section { text-align:left; margin-bottom:18px; }
.start-section h2 { color:#fde68a; font-size:12px; letter-spacing:.08em; font-weight:800; margin:0 0 8px; }
.start-mode-btn strong,.start-mode-btn small,.start-diff-btn strong,.start-diff-btn small,.start-diff-btn em { display:block; }
.start-mode-btn strong { color:#f8fafc; font-size:13px; }
.start-mode-btn small { color:#94a3b8; font-size:10px; line-height:1.35; margin-top:3px; }
.start-diff-btn { text-align:left; min-width:0; }
.start-diff-btn strong { color:#f8fafc; font-size:13px; }
.start-diff-btn em { color:#5eead4; font:700 10px/1.4 ui-monospace,monospace; margin:2px 0; }
.start-diff-btn small { color:#94a3b8; font-size:9px; line-height:1.25; }
.start-primary { width:100%; min-height:50px; border:0; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:9px; color:#111827; font-weight:900; letter-spacing:.08em; background:linear-gradient(90deg,#fcd34d,#facc15,#fb7185); box-shadow:0 0 30px rgba(251,191,36,.42); }

.game-status-area { width:min(72rem,calc(100% - 24px)); margin:12px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:12px; position:relative; }
.status-chip { min-height:40px; padding:6px 14px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:12px; white-space:nowrap; }
.brand-chip i,.captured-toggle>i { width:1px; height:22px; background:#475569; }
.turn-orb { width:12px;height:12px;border-radius:50%;flex:0 0 auto; }
.turn-orb.red { background:#fb7185;box-shadow:0 0 12px #f43f5e; }
.turn-orb.black { background:#2dd4bf;box-shadow:0 0 12px #2dd4bf; }
.message-chip { min-width:0; overflow:hidden; flex:0 1 auto; }
#status-banner { overflow:hidden; text-overflow:ellipsis; color:#e2e8f0; }
#mode-status-badge,#last-move-badge { border-radius:999px;padding:3px 8px;flex:0 0 auto; }
#mode-status-badge { background:rgba(45,212,191,.16);color:#99f6e4;border:1px solid rgba(45,212,191,.35); }
#last-move-badge { background:rgba(251,191,36,.14);color:#fcd34d;border:1px solid rgba(251,191,36,.3); }
.captured-toggle { width:100%; border-radius:999px; color:#e2e8f0; display:flex; align-items:center; justify-content:center; gap:11px; padding:8px 14px; font-size:12px; }
.capture-side { display:flex;align-items:center;gap:6px; }
.capture-side b { width:11px;height:11px;transform:rotate(45deg);border-radius:3px; }
.capture-side.red b { background:#fb7185;box-shadow:0 0 10px #f43f5e; }.capture-side.black b { background:#2dd4bf;box-shadow:0 0 10px #2dd4bf; }
.capture-side strong { color:#fde68a;font-size:16px; }
.capture-chevron { width:10px;height:10px;border-right:3px solid #fcd34d;border-bottom:3px solid #fcd34d;transform:rotate(45deg) translateY(-2px);transition:transform .25s; }
.captured-toggle[aria-expanded="true"] .capture-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.captured-panel { position:absolute;right:0;top:56px;width:min(480px,100%);padding:14px;border-radius:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;transform-origin:top right;animation:capturedReveal .26s ease-out; }
.captured-panel[hidden] { display:none; }
@keyframes capturedReveal { from{opacity:0;transform:scale(.9) translateY(-10px)}to{opacity:1;transform:none} }
.captured-group { min-height:72px;border-radius:15px;padding:10px;background:rgba(255,255,255,.04);display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px; }
.captured-piece { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;position:relative;font-family:'Noto Serif SC',serif;font-weight:900;border:1px solid currentColor;animation:capturedPieceIn .36s backwards; }
.captured-piece.red { color:#fb7185;background:radial-gradient(circle,#fff7ed,#43131d); }.captured-piece.black { color:#5eead4;background:radial-gradient(circle,#17363a,#030809); }
.captured-piece sup { position:absolute;right:-3px;top:-5px;min-width:18px;height:18px;border-radius:9px;background:#fbbf24;color:#111827;font:800 10px/18px Inter;text-align:center; }
@keyframes capturedPieceIn { from{opacity:0;transform:translateY(-14px) rotate(-22deg) scale(.6)} }
.game-footer { width:min(1160px,calc(100% - 24px)); margin:0 auto max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:5px; }
.gesture-hint { font-size:10px;color:#94a3b8;display:flex;gap:10px;margin:0;white-space:nowrap; }
.game-dock { width:max-content;max-width:100%;padding:6px 10px;display:flex;align-items:stretch;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none;border-radius:999px; }
.game-dock::-webkit-scrollbar{display:none}.dock-button { min-height:40px;border-radius:999px;padding:6px 12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px; }
#btn-mode{min-width:116px}#btn-difficulty{min-width:144px}#btn-camera{min-width:112px}
.modal-action { border-radius:999px;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;gap:7px; }
.gameover-seal-wrap { width:56px;height:56px;border-radius:17px;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.4);display:grid;place-items:center;margin:0 auto 12px;font-size:32px;color:#fcd34d; }

dialog { color:#f8fafc; }
dialog::backdrop { background:rgba(2,3,9,.82);backdrop-filter:blur(8px); }
.icon-button { width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:#e2e8f0; }
.language-dialog { width:min(420px,calc(100% - 28px));border-radius:24px;padding:20px;border:1px solid rgba(251,191,36,.5); }
.language-dialog header,.guide-header { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.language-dialog h2 { font:800 20px/1.2 'Noto Serif SC',serif;color:#fef3c7; }
.language-list { display:grid;gap:8px;margin-top:18px; }.language-list button { border-radius:14px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);text-align:left; }.language-list button.active { border-color:#fbbf24;background:rgba(251,191,36,.16);color:#fde68a; }
.guide-dialog { width:min(1040px,calc(100% - 28px));height:min(760px,calc(100% - 28px));max-width:none;max-height:none;padding:0;border-radius:26px;border:1px solid rgba(251,191,36,.5);overflow:hidden; }
.guide-shell { height:100%;display:grid;grid-template-rows:auto auto 1fr auto; }
.guide-header { padding:16px 18px;border-bottom:1px solid rgba(148,163,184,.18); }.guide-header>div { display:flex;align-items:center;gap:10px; }.guide-header h2 { font:800 22px/1.2 'Noto Serif SC',serif;color:#fef3c7; }.guide-header>div>.material-symbols-rounded{color:#7dd3fc;font-size:26px;}
.guide-tabs { display:flex;gap:8px;padding:12px 18px;overflow-x:auto; }.guide-tabs button { border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:8px 15px;font-weight:750;white-space:nowrap; }.guide-tabs button.active { color:#fde68a;border-color:#fbbf24;background:rgba(251,191,36,.14); }
.guide-content { min-height:0;overflow-y:auto;padding:4px 18px 20px;overscroll-behavior:contain; }.guide-panel{display:none}.guide-panel.active{display:block}.lesson-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.piece-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.lesson-card { min-height:132px;border-radius:18px;border:1px solid rgba(148,163,184,.2);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));padding:14px;text-align:left;transition:.2s; }.lesson-card:hover{border-color:rgba(251,191,36,.65);transform:translateY(-2px)}.lesson-card header{display:flex;align-items:center;gap:9px;margin-bottom:8px}.lesson-card .piece-badge{flex:0 0 auto}.lesson-card h3{font-weight:850;color:#fef3c7}.lesson-card p{font-size:12px;line-height:1.55;color:#cbd5e1}.lesson-card small{display:block;color:#7dd3fc;margin-top:8px;font-weight:700}
.piece-badge { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fbbf24;border:1px solid #fbbf24;background:#261b0c;font:900 19px/1 'Noto Serif SC',serif;box-shadow:inset 0 0 10px rgba(251,191,36,.18); }
.interface-guide { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.interface-item { border-radius:16px;padding:15px;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.18); }.interface-item h3{color:#fde68a;font-weight:800;margin-bottom:5px}.interface-item p{color:#cbd5e1;font-size:12px;line-height:1.55}
.guide-footer { padding:10px 18px 16px;border-top:1px solid rgba(148,163,184,.16);display:flex;justify-content:center; }.guide-footer button,.demo-controls button{border-radius:999px;padding:9px 18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.lesson-demo { position:absolute;inset:78px 18px 18px;border-radius:22px;padding:18px;background:rgba(8,9,17,.97);border:1px solid rgba(56,189,248,.5);box-shadow:0 24px 70px #000;overflow:auto;z-index:2; }.lesson-demo[hidden]{display:none}.demo-heading{display:flex;justify-content:space-between;align-items:center}.demo-heading>div{display:flex;align-items:center;gap:11px}.demo-heading h3{font:800 20px/1.2 'Noto Serif SC',serif;color:#fef3c7}.lesson-demo>p{color:#cbd5e1;font-size:13px;line-height:1.55;margin:9px 0 14px}.demo-board{width:min(440px,100%);aspect-ratio:9/10;margin:auto;border-radius:17px;position:relative;overflow:hidden;background-color:#d6b76e;background-image:linear-gradient(rgba(65,42,18,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(65,42,18,.45) 1px,transparent 1px);background-size:12.5% 11.111%;border:12px solid #5c351c;box-shadow:inset 0 0 35px rgba(51,26,8,.4)}.demo-token{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .3s;background:#f8eee0;border:2px solid #9f1239;color:#9f1239;font:900 clamp(12px,4vw,22px)/1 'Noto Serif SC';box-shadow:0 4px 12px #0008;z-index:2}.demo-token.black{background:#102629;border-color:#5eead4;color:#99f6e4}.demo-target{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#34d39966;border:2px solid #6ee7b7;animation:demoPulse 1s infinite}.demo-blocker{filter:grayscale(.4);}.demo-line{position:absolute;height:3px;transform-origin:left center;background:linear-gradient(90deg,#fde047,#fb7185);box-shadow:0 0 10px #fde047;z-index:1}.demo-river{position:absolute;left:0;right:0;top:50%;height:11%;transform:translateY(-50%);display:grid;place-items:center;color:#5c351c;font:900 17px 'Noto Serif SC';background:#d9c58fdd}.demo-controls{display:flex;justify-content:center;margin-top:14px}@keyframes demoPulse{50%{transform:translate(-50%,-50%) scale(1.35);opacity:.5}}

.tour-overlay { position:fixed;inset:0;z-index:60;pointer-events:auto;background:rgba(2,3,9,.76); }.tour-overlay[hidden]{display:none}.tour-spotlight{position:absolute;border:2px solid #fcd34d;border-radius:22px;box-shadow:0 0 0 9999px rgba(2,3,9,.78),0 0 35px rgba(251,191,36,.55);transition:all .32s ease;pointer-events:none}.tour-card{position:absolute;width:min(520px,calc(100% - 28px));padding:20px;border-radius:24px;left:50%;top:50%;transform:translate(-50%,-50%)}.tour-top{display:flex;align-items:center;gap:9px;color:#fcd34d;font-weight:800}.tour-top button{margin-left:auto;background:none;border:0;color:#cbd5e1}.tour-card h2{font:900 23px/1.25 'Noto Serif SC',serif;color:#fef3c7;margin:14px 0 7px}.tour-card p{font-size:14px;line-height:1.65;color:#cbd5e1}.tour-dots{display:flex;gap:7px;margin-top:17px}.tour-dots i{width:8px;height:8px;border-radius:99px;background:#64748b}.tour-dots i.active{width:30px;background:#facc15}.tour-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.tour-actions button{border-radius:999px;padding:9px 18px}.tour-highlight{filter:drop-shadow(0 0 12px #facc15)}

@media (max-width: 780px) {
  .start-toolbar{margin-bottom:12px}.start-card{padding:16px}.start-seal{width:56px;height:56px;margin-bottom:12px}.start-description{margin-bottom:15px}.start-section{margin-bottom:13px}
  #game-hud{padding-top:max(8px,env(safe-area-inset-top));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left))}
  .game-status-area{display:grid;width:100%;margin:0;grid-template-columns:1fr;gap:6px}.status-chip,.captured-toggle{width:100%;min-height:36px;padding:5px 10px}.status-chip{font-size:11px}.brand-chip{gap:8px}.brand-chip strong{font-size:10px;letter-spacing:.035em}.brand-chip i,.captured-toggle>i{height:18px}.message-chip{justify-content:center}.captured-toggle{display:flex;font-size:11px}.capture-side strong{font-size:14px}.captured-panel{top:calc(100% + 8px);grid-template-columns:1fr 1fr}
  .game-footer{width:100%;margin:0}.gesture-hint{display:none}.game-dock{width:100%;max-width:none;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));grid-template-rows:auto auto;border-radius:22px;padding:5px;gap:3px;overflow:visible;white-space:normal}.dock-button{display:grid!important;grid-template-rows:20px 12px;place-items:center;align-content:center;min-width:0!important;width:100%;height:49px;min-height:49px;border-radius:17px;gap:2px;padding:4px 3px;font-size:9px;line-height:1}.dock-button:nth-child(-n+5){grid-column:span 4}.dock-button:nth-child(n+6){grid-column:span 5}.dock-button>span:first-child{display:grid;place-items:center;width:20px;height:20px;margin:0!important;line-height:20px;align-self:center}.dock-button .material-symbols-rounded{font-size:18px;line-height:20px}.dock-button span:last-child{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:12px;align-self:center}.dock-button .language-glyph{font-size:13px;line-height:20px}
  .guide-dialog{width:100%;height:100%;border-radius:0;border:0}.guide-header{padding-top:max(12px,env(safe-area-inset-top))}.guide-tabs{padding:9px 12px}.guide-content{padding:3px 12px 16px}.lesson-grid,.piece-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-card{min-height:142px;padding:12px}.interface-guide{grid-template-columns:1fr}.lesson-demo{inset:68px 8px 8px}.guide-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .tour-card{top:auto;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:17px}.tour-card h2{font-size:20px}.tour-card p{font-size:13px}.tour-actions button{flex:1}
}
@media (max-width: 390px) {
  .brand-chip strong{font-size:11px}.status-chip{padding-inline:10px;gap:6px}.message-chip #status-banner{max-width:42vw}.capture-side span{font-size:11px}.capture-side strong{font-size:14px}
  .start-mode-btn{padding:10px}.start-diff-btn{padding:9px}.start-diff-btn small{display:none}.lesson-grid,.piece-grid{grid-template-columns:1fr 1fr}.lesson-card{min-height:128px}
}
@media (max-height: 720px) and (max-width: 780px) {.start-card{margin-block:8px}.start-description{display:none}.start-seal{width:48px;height:48px}.start-kicker{display:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}