/* 0.4.1: stable layout, intact character artwork, continuous hands over the keyboard. */
:root{--ink:#302c3d;--muted:#625a6d;--purple:#694177}
body{background:#f6f3f7}
.gt-app{max-width:1240px;padding-left:20px;padding-right:20px}
.screen-in,.petals,.hero-scene,.happy-portrait,.keyboard-svg{animation:none!important}
.appbar{min-height:72px}.brand{font-size:22px}.brand small{font-size:11px;letter-spacing:.03em}
.icon-button{min-height:40px;font-size:12px}.progress-label{font-size:12px}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:0;background:#fff;box-shadow:none;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.hero-copy{width:auto;padding:36px 28px;z-index:0}
.hero h1{font-size:clamp(30px,3.4vw,43px);line-height:1.35;letter-spacing:.03em}
.hero-copy>p:not(.eyebrow){max-width:none;width:auto;font-size:14px;margin:15px 0;line-height:1.8}
.hero-copy .course-caption{font-size:12px;color:#625a6d}
.hero-art{min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center;background:#eee6ef}
.hero-scene{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;filter:none!important}
.hero-chip{position:relative;inset:auto;margin:0;max-width:none;border:0;border-radius:0;padding:15px 18px;background:#fff;color:#59445f;box-shadow:none;font-size:13px;line-height:1.7}
.hero-chip strong{font-size:14px}
.daily-banner{box-shadow:none;gap:16px}.daily-banner span{font-size:12px}.daily-steps{gap:10px}.daily-steps span{font-size:12px}
.mode-card{padding:0;display:flex;flex-direction:column;min-height:0;border-radius:16px;text-align:left;overflow:hidden;background:#fff}
.mode-card img{position:relative;inset:auto;opacity:1;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:0}
.mode-card::after{display:none}.mode-card .mode-copy{padding:18px;max-width:none}.mode-card .mode-no{font-size:11px}.mode-card h2{font-size:21px;margin:8px 0}.mode-card p{font-size:13px;line-height:1.7}.mode-card .arrow{font-size:12px}
.character-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.character-tile{padding:0;border-radius:12px;overflow:hidden}.character-tile .portrait-pad{height:auto;aspect-ratio:4/3;overflow:hidden;background:#eee6ef}
.character-tile img{width:100%;height:100%;object-fit:cover;object-position:right top;transform:none}.character-tile span{font-size:12px;padding:8px 0;display:block}
.quote-card .happy-portrait{flex:none;width:72px;height:72px;border-radius:14px}.book-invite{min-height:140px}
.chapter-art{height:auto;aspect-ratio:16/9}.chapter-art img{width:100%;height:100%;object-fit:contain}
.stamp img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.growth-badge img{width:72px;height:72px;object-fit:cover;object-position:right top}
.session{max-width:1200px;margin:4px auto 0}
.session-head{gap:14px;min-height:48px;align-items:center;margin-bottom:12px}
.session-name{font-size:16px;max-width:none}.session-name small{font-size:12px;line-height:1.5}
.session-buttons{max-width:none;gap:6px;flex-wrap:wrap}.session-buttons .icon-button{font-size:12px;min-height:40px;padding:8px 10px}
.practice-grid{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:16px;align-items:start}
.desk{padding:18px 20px 12px;display:block;overflow:hidden;min-width:0;border-radius:18px;box-shadow:none}
.practice-status{font-size:12px;gap:12px;flex-wrap:wrap}.practice-status strong{font-size:14px}.mode-badge{font-size:11px}
.problem-area{height:158px;min-height:158px;padding:12px;overflow:auto;scrollbar-width:thin;contain:layout;justify-content:safe center}
.ready-copy h2{font-size:22px}.ready-copy p{font-size:12px;margin:6px 0;line-height:1.6}.ready-copy .eyebrow{display:none}.ready-copy .start-note{font-size:11px;margin:5px 0 0}.ready-copy .primary{min-height:38px;font-size:13px;padding:8px 18px}
.problem-area .kana{font-size:26px;line-height:1.5}.romaji{font-size:29px;line-height:1.6}
.finger-label{height:39px;min-height:39px;margin:4px 0;font-size:13px}.feedback{height:18px;min-height:18px;font-size:12px}
.keyboard-wrap{width:100%;max-width:720px;margin:0 auto}.keyboard-svg{height:auto;width:100%;overflow:visible;display:block}
.key rect{filter:none;fill:#fdfcfe;stroke:#d6cedd;stroke-width:1.3}.key text{font-size:17px;fill:#302c3d}.key.target rect{fill:#ffda79;stroke:#a9751c;stroke-width:2.5}.key .bump{stroke:#5d5367}
.key.usable:hover rect{stroke:#846093}.finger-mark{stroke:#b2a0c5;stroke-width:2;stroke-linecap:round;opacity:.55}
.touch-keys{display:none}.touch-mode .keyboard-svg{display:none}.touch-mode .touch-keys{display:grid;gap:7px;padding:12px 0}.touch-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}.touch-key{min-width:0;min-height:44px;border:1px solid #cfc4d8;border-radius:6px;background:#fcfafd;color:#302c3d;font:600 16px Consolas,monospace;padding:0;touch-action:manipulation}.touch-key.target{background:#ffda79;border-color:#a9751c}.touch-key:active{background:#e7dcf1;transform:none}
.finger-color-0,.finger-color-7{stroke:#b35d80}.finger-color-1,.finger-color-6{stroke:#ab8031}.finger-color-2,.finger-color-5{stroke:#478f7d}.finger-color-3,.finger-color-4{stroke:#668abd}
.hand-art{pointer-events:none}.natural-hand{fill:#fff3d4;fill-opacity:.34;stroke:#c99c70;stroke-width:1.65;stroke-linejoin:round;stroke-linecap:round}.palm-crease{fill:none;stroke:#c7a383;stroke-width:1.2;opacity:.55}.finger-crease{fill:none;stroke:#c7a383;stroke-width:1.05;opacity:.7}.guided-finger{display:none;fill:#ec668e;fill-opacity:.17;stroke:#d75279;stroke-width:2.8;stroke-linejoin:round}.guide-finger .touch-point{display:none;fill:#d54e77;stroke:#fff;stroke-width:1.8}.guide-finger.active-finger .guided-finger,.guide-finger.active-finger .touch-point{display:block}
.guide-note{display:block;font-size:11px;line-height:1.6;padding:0 0 6px}.input-notice{height:20px;color:#903150;font-size:12px;text-align:center}.input-switch{margin-top:5px}.input-switch button{min-height:36px;font-size:12px}
.mentor-panel{position:relative;min-height:0;padding:16px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;align-items:stretch;order:0;border-radius:18px;overflow:hidden}
.mentor-avatar.happy-portrait{display:block;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;flex:none;background-size:300% 200%;background-position:var(--happy-x) var(--happy-y)}
.mentor-tag{position:relative;inset:auto;order:-1;color:#694177;background:transparent;padding:0;border:0;font-size:11px}
.mentor-message{position:relative;inset:auto;width:100%;padding:0;background:transparent;box-shadow:none;border-radius:0}.mentor-message h2{font-size:15px}.mentor-message p{font-size:13px;line-height:1.8;min-height:70px}.mentor-message small{display:block;font-size:11px;line-height:1.7;margin-top:8px}
.session-tip{font-size:12px;margin-top:10px;padding:10px 14px}.pause-panel{padding:12px;gap:7px}.pause-panel h2{font-size:20px}.pause-panel p{font-size:12px}
.celebration{min-height:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;height:auto}.celebration>img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.celebration:after{display:none}.celebration-copy{position:relative;inset:auto;padding:22px;color:#302c3d}.celebration-copy h1{font-size:27px;text-shadow:none}.celebration-copy p{font-size:13px;color:#625a6d;max-width:none}.celebration-copy .eyebrow{color:#694177}.result-smile{display:none}.break-art{height:auto;min-height:0;align-self:start}.break-art>img{width:100%;height:auto;object-fit:contain;position:relative;inset:auto}.break-art:after{display:none}
.game-footer{font-size:11px;margin-top:25px}.result-content>p{font-size:13px}
.happy-portrait{position:relative;overflow:hidden;aspect-ratio:1;height:auto!important;background:none!important;flex-shrink:0;border-radius:12px}.happy-portrait>img{position:absolute;left:calc(var(--happy-x) * -2);top:calc(var(--happy-y) * -1);width:300%;max-width:none;height:200%;object-fit:fill;pointer-events:none}
@media(max-width:820px){
 .gt-app{padding-left:12px;padding-right:12px}.hero{grid-template-columns:1fr}.hero-copy{padding:23px}.hero h1{font-size:31px}.hero-art{background:#fff}.hero-scene{max-height:260px;object-fit:contain;background:#eee6ef}.hero-chip{padding:12px 20px}.hero-copy>p:not(.eyebrow){font-size:13px}.hero-actions{flex-direction:row;align-items:center}.hero-actions .primary,.hero-actions .secondary{font-size:12px;min-height:40px}
 .mode-grid{grid-template-columns:1fr;gap:12px}.mode-card{display:grid;grid-template-columns:40% minmax(0,1fr);align-items:start}.mode-card .mode-copy{padding:14px}.mode-card h2{font-size:18px}.mode-card p{font-size:12px}.mode-card img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:right top}.mode-card .mode-no,.mode-card .arrow{font-size:10px}
 .character-strip{gap:7px}.character-tile span{font-size:10px}.section-head{display:block}.section-head h2{font-size:18px}.daily-banner{padding:14px;display:block}.daily-steps{margin-top:10px;justify-content:flex-start;flex-wrap:wrap}.daily-steps span{font-size:11px}
 .appbar{min-height:64px;gap:5px}.brand{font-size:18px}.brand small{font-size:9px}.brand-mark{width:32px;height:32px;font-size:23px}.appbar-actions{gap:4px}.appbar .icon-button{font-size:10px;padding:6px;min-height:36px}.progress-label{display:none}
 .session-head{display:block;min-height:0;margin-bottom:9px}.session-name{font-size:14px;max-width:none}.session-name small{font-size:11px}.session-buttons{margin-top:8px;justify-content:flex-start;max-width:none;gap:5px}.session-buttons .icon-button{min-height:36px;font-size:11px;padding:7px 9px}
 .practice-grid{grid-template-columns:minmax(0,1fr);gap:10px}.mentor-panel{order:1;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px;align-items:center}.mentor-avatar.happy-portrait{width:72px}.mentor-tag{display:none}.mentor-message p{min-height:0;font-size:12px}.mentor-message h2{font-size:13px;margin-bottom:3px}.mentor-message small{display:none}
 .desk{padding:12px 10px 8px}.practice-status{font-size:10px;gap:7px}.practice-status strong{font-size:12px}.mode-badge{font-size:9px}.progress-track{margin:8px 0}.problem-area{height:145px;min-height:145px}.problem-area .kana{font-size:22px}.romaji{font-size:25px}.ready-copy h2{font-size:19px}.ready-copy p{font-size:11px}.ready-copy .primary{font-size:12px}
 .keyboard-wrap{max-width:600px}.finger-label{font-size:11px;height:34px;min-height:34px}.feedback{font-size:10px;min-height:17px;height:17px}.guide-note{font-size:10px}.input-switch button{font-size:11px;min-height:34px}.input-notice{font-size:10px;height:18px}.session-tip{font-size:11px;padding:9px;margin-top:8px}.result-screen{grid-template-columns:1fr}.celebration-copy{padding:18px}.celebration-copy h1{font-size:24px}.break-copy h1{font-size:23px}
}
@media(max-width:360px){.gt-app{padding-left:8px;padding-right:8px}.brand{font-size:15px}.brand small{font-size:8px}.brand-mark{width:28px;height:28px}.hero-copy{padding:20px 16px}.hero h1{font-size:29px}.hero-actions{gap:6px}.hero-actions .primary,.hero-actions .secondary{padding:9px 12px;font-size:11px}.session-buttons .icon-button{font-size:10px;padding:6px}.practice-status{gap:5px}.problem-area{height:140px;min-height:140px}.mode-card .mode-copy{padding:11px}.mode-card p{font-size:11px}.character-tile span{font-size:9px}}
@media(min-width:821px) and (max-height:800px){.appbar{min-height:58px}.keyboard-wrap{max-width:620px}.problem-area{height:145px;min-height:145px}.mentor-panel{padding:12px}.session-head{margin-bottom:8px}.desk{padding-top:12px}}
@media(min-width:600px) and (max-height:460px){.gt-app{padding-left:12px;padding-right:12px}.appbar{min-height:48px}.brand{font-size:16px}.brand small{display:none}.session-head{display:flex;align-items:center;min-height:38px;margin-bottom:8px}.session-buttons{margin-top:0;justify-content:flex-end}.session-name{font-size:12px;max-width:36%}.session-name small{font-size:10px}.session-buttons .icon-button{min-height:34px;font-size:10px;padding:6px}.practice-grid{grid-template-columns:minmax(0,1fr) 160px}.mentor-panel{order:0;display:flex;padding:10px}.mentor-avatar.happy-portrait{width:100%}.mentor-message p{font-size:11px}.desk{padding:10px}.problem-area{height:140px;min-height:140px}.keyboard-wrap{max-width:440px}.session-tip{font-size:11px}.guide-note{display:block}}
@media(min-width:600px) and (max-height:460px){.appbar{min-height:40px}.session-head{min-height:36px;margin-bottom:6px}.session-name small{display:none}.session-buttons .icon-button{min-height:32px;font-size:11px}.desk{padding:8px 10px}.practice-status{font-size:11px;gap:8px}.practice-status strong{font-size:12px}.progress-track{height:4px;margin:6px 0}.problem-area{height:86px;min-height:86px;padding:7px}.problem-area .kana{font-size:18px;line-height:1.3}.romaji{font-size:22px;line-height:1.3}.ready-copy h2{font-size:17px}.ready-copy p{display:none}.ready-copy .primary{min-height:34px;font-size:12px;padding:6px 14px}.finger-label{min-height:27px;height:27px;margin:3px 0;font-size:12px}.keycap{min-height:24px;font-size:14px}.feedback{min-height:13px;height:13px;font-size:11px}.keyboard-wrap{max-width:385px}.touch-mode .touch-keys{padding:6px 0;gap:5px}.touch-key{min-height:36px}.session-tip{font-size:11px}.input-notice:empty{height:0}.guide-note{font-size:11px}.mentor-message small{display:none}}