/* Mobile-first interaction layer, shared by the web app and Android. */
.mobile-nav,.mobile-brand,.mobile-practice-actions{display:none}.mobile-disclosure{display:contents}.mobile-disclosure>summary{display:none}
#mobileMenu{padding:24px;max-width:480px;border-radius:24px}#mobileMenu::backdrop{background:#08172d99;backdrop-filter:blur(4px)}.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.mobile-menu-head h2{font-size:23px}.mobile-menu-head .eyebrow{margin-bottom:8px}.mobile-menu-head button{width:44px;height:44px;font-size:24px;flex-shrink:0}.mobile-menu-links{display:grid;gap:4px;margin:8px 0 20px}.mobile-menu-links a{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px;border-radius:12px;font-size:16px;color:#214970}.mobile-menu-links a:hover{background:#eff5ff}.mobile-menu-links a>span{flex:1}.mobile-menu-links small{display:block;color:#647b95;line-height:1.6;font-size:12px;margin-top:3px}.mobile-language{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.mobile-language select{font-size:16px;min-height:48px}.mobile-install{width:100%;margin-top:20px;font-size:15px;min-height:48px}.mobile-feedback{display:block;margin:12px auto;min-height:44px}
@media(max-width:760px){
 :root{--mobile-nav:calc(66px + env(safe-area-inset-bottom,0px));--mobile-player:72px}html{scroll-padding-top:84px;scroll-padding-bottom:160px}body{font-size:16px;-webkit-text-size-adjust:100%}.sidebar{display:none!important}.app{margin-left:0;min-width:0}.topbar{position:sticky;top:0;z-index:32;min-height:64px;height:64px;flex-wrap:nowrap;gap:10px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));box-shadow:0 4px 20px #183a6507}.mobile-brand{display:flex;flex-shrink:0}.mobile-brand img{border-radius:8px}.topbar #breadcrumb{font-size:13px;font-weight:650;color:#264666;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.topbar>div{margin-left:auto;gap:0}.topbar .avatar{width:40px;height:40px;font-size:14px}.topbar .feedback-shortcut,.topbar #helpBtn,.topbar #connection,.topbar .status-dot,.topbar .language-control{display:none}.app main{padding:24px 16px calc(var(--mobile-nav) + var(--mobile-player) + 34px);max-width:620px;min-width:0}h1,.page-heading h1{font-size:28px;letter-spacing:-1px;line-height:1.15}.page-heading{display:block;margin-bottom:24px}.page-heading p{font-size:14px;line-height:1.7;margin-top:10px}.page-heading .chip{display:none}h2{font-size:21px;line-height:1.3}h3{font-size:17px}p{font-size:15px;line-height:1.75}.eyebrow{font-size:10px;line-height:1.6;letter-spacing:1.1px}.button,.button.small,.text-btn{font-size:14px;min-height:44px;padding:12px 16px;border-radius:12px}.icon-btn{width:44px;height:44px;font-size:18px;flex-shrink:0}.round-play{width:52px;height:52px;font-size:18px}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px;min-height:48px;border-radius:12px}input[type=range]{min-height:44px;accent-color:#2877ff}input[type=checkbox],input[type=radio]{width:22px;height:22px;flex-shrink:0;accent-color:#2877ff}button,a,input,select,summary{-webkit-tap-highlight-color:#2877ff18}summary{min-height:48px;cursor:pointer}.mobile-nav{position:fixed;inset:auto 0 0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--mobile-nav);padding:5px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left));gap:2px;background:#fff;border-top:1px solid #dce6f3;box-shadow:0 -6px 30px #19375109}.mobile-nav a,.mobile-nav button{min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;color:#667b94;padding:5px 2px;border-radius:13px}.mobile-nav span{font-size:22px;line-height:24px}.mobile-nav strong{font-size:10px;line-height:16px;font-weight:650}.mobile-nav .active{background:#eaf2ff;color:#2169dc}.bottom-player{left:0;right:0;bottom:var(--mobile-nav);height:var(--mobile-player);padding:8px 14px;gap:10px;box-shadow:0 -5px 20px #12345a09;z-index:40}.mini-song{flex:1;min-width:0;gap:0}.mini-song .mini-art,.mini-song small{display:none}.mini-song strong{font-size:12px;line-height:1.45;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-controls{gap:9px}.mini-controls .round-play{width:50px;height:50px;font-size:17px}.mini-controls .icon-btn{width:40px;height:44px}#miniTime{font-size:11px;min-width:30px}#openScore{font-size:11px;padding:4px;min-width:44px;max-width:62px;text-align:center}.dashboard-grid,.dashboard-side,.lesson-layout,.practice-layout,.plan-cards,.plus-tools,.stage-grid{grid-template-columns:minmax(0,1fr);gap:20px}.welcome-panel{display:block;padding:20px;border-radius:22px;margin-bottom:24px}.welcome-roko{flex-direction:row;justify-content:flex-start;margin-bottom:14px}.welcome-roko .coach-sprite{width:70px;height:70px}.welcome-roko>span{font-size:9px;max-width:180px;text-align:left}.welcome-content h2{font-size:25px}.welcome-content>p{font-size:14px}.welcome-levels{grid-template-columns:1fr;gap:9px}.welcome-levels button{padding:14px;min-height:58px;border-radius:13px}.welcome-levels strong{font-size:15px}.welcome-levels span{font-size:12px;margin-top:3px}.welcome-panel legend{font-size:13px}.welcome-time{display:flex;flex-wrap:wrap;gap:8px}.welcome-time legend{width:100%}.welcome-time button{font-size:13px;padding:10px 15px;margin:0;min-height:44px}.welcome-next,.first-next{flex-direction:column;align-items:stretch;padding:17px;gap:14px}.welcome-next .button{width:100%}.welcome-next strong{font-size:15px}.welcome-next small{font-size:12px}.welcome-foot{flex-direction:column;align-items:flex-start;font-size:13px}.hero-card{padding:24px;min-height:240px}.hero-card h2{font-size:26px}.hero-card p{font-size:14px}.hero-copy{max-width:90%}.course-cards{grid-template-columns:1fr;gap:12px}.course-card{padding:20px;border-radius:16px}.course-card h3{font-size:16px}.course-card p{font-size:13px}.course-card .eyebrow{font-size:10px}.course-bottom{font-size:12px}.section-title{gap:10px;align-items:center;flex-wrap:wrap;margin-top:30px}.section-title h2{font-size:20px}.section-title .text-btn{padding-left:0;padding-right:0;font-size:12px}.daily-card,.tip-card,.plus-card,.profile-card,.level-block,.lesson-preview-catalog{border-radius:18px}.tip-card h3{font-size:17px}.tip-card p,.aside-note{font-size:14px}.ring-wrap p{font-size:13px}.week span{font-size:10px}.card-kicker{font-size:14px}.mobile-disclosure{display:block;margin:0 0 16px;border:1px solid #d7e3f2;border-radius:16px;background:#fff;overflow:hidden;scroll-margin-top:80px}.mobile-disclosure>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;gap:12px;padding:16px;font-size:14px;font-weight:650;color:#234b77;min-height:56px}.mobile-disclosure>summary::-webkit-details-marker{display:none}.mobile-disclosure>summary::after{content:'+';font-size:24px;font-weight:400;line-height:20px}.mobile-disclosure[open]>summary{border-bottom:1px solid #e1e9f3}.mobile-disclosure[open]>summary::after{content:'−'}.mobile-disclosure:not([open])>:not(summary){display:none!important}.mobile-disclosure[open]>.filters{display:grid}.mobile-disclosure>#coachHost{padding:14px}.mobile-disclosure .coach-panel{border:0;box-shadow:none;background:transparent;margin:0;padding:0;display:block}.coach-portrait{display:none}.coach-copy h2{font-size:19px}.coach-copy p{font-size:14px}.coach-copy small{font-size:11px}.coach-panel{padding:18px;display:block}.coach-actions{display:grid;grid-template-columns:1fr;gap:9px}.coach-actions .button{font-size:14px;min-height:46px}.coach-utilities button{min-height:44px}.coach-paths button{font-size:15px;line-height:1.6}.library-tabs{gap:20px;overflow-x:auto;white-space:nowrap;margin:18px 0}.library-tabs button{font-size:14px;min-height:44px}.notice{font-size:13px;padding:14px 16px;line-height:1.7}.mobile-search{display:block;width:100%;min-width:0;padding:14px 16px;border:1px solid #c6d8ed;border-radius:14px;margin-bottom:12px;color:#294966;background:#fff}.filters{padding:16px;grid-template-columns:1fr 1fr;gap:12px;margin:0}.filters select{width:100%;min-width:0;max-width:none;padding:12px;font-size:14px}.filter-count{align-items:center;gap:12px;font-size:12px;margin:12px 0}.filter-count .text-btn{font-size:12px;padding:8px 0}.song-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:16px 14px;min-height:86px}.song-name{font-size:15px;line-height:1.4;white-space:normal}.song-artist{font-size:11px;line-height:1.5;margin-top:5px}.song-row .song-meta{display:block;grid-column:auto;font-size:11px}.song-row .song-meta:nth-child(3){display:none}.song-row .level-tag{display:none}.song-row .row-end{display:none}.song-list{border-radius:16px}.level-head{padding:20px;gap:14px}.level-head h2{font-size:19px}.level-head p{font-size:13px}.lesson-row{min-height:70px;padding:16px;gap:12px}.lesson-row strong{font-size:15px;line-height:1.5}.lesson-row small{font-size:12px}.lesson-content,.lesson-card,.quiz,.first-route,.reading-school{padding:20px}.lesson-content p,.lesson-content li,.quiz-intro,.answer-feedback,.answer-feedback p,.question legend{font-size:15px;line-height:1.75}.question legend{font-weight:650}.quiz label{font-size:15px;min-height:48px;line-height:1.6}.reading-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.reading-tabs button{font-size:12px;min-height:46px;padding:9px 6px;border-radius:10px;line-height:1.4}.reading-score{border-radius:12px;background:white;padding:8px;overscroll-behavior-x:contain}.reading-score svg{min-width:360px}.reading-help,.lesson-score{padding:16px}.reading-explain p{font-size:14px}.first-route li{padding:16px 0;gap:12px}.first-route button{font-size:14px;min-height:44px}.practice-breadcrumb{display:flex;gap:8px;font-size:12px;flex-wrap:wrap}.practice-breadcrumb .text-btn{font-size:12px;padding:6px 0}.practice-heading{flex-direction:column;align-items:flex-start;gap:12px}.practice-heading h1{font-size:26px}.practice-heading p{font-size:14px}.mobile-practice-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-bottom:14px}.mobile-practice-actions button{background:#edf4ff;border:1px solid #c6daf6;border-radius:13px;color:#225a9b;font-size:13px;min-height:48px;padding:10px}.score-shell{border-radius:18px;min-width:0}.score-toolbar{padding:16px;gap:10px;flex-wrap:wrap;font-size:12px}.score-toolbar strong{font-size:13px}.score-paper{padding:20px 12px}.score-caption{font-size:22px;margin-bottom:20px}.score-caption small{font-size:11px;line-height:1.6}.score-grid,.dense-score{grid-template-columns:minmax(0,1fr);gap:20px}.measure{padding-top:20px;border:1px solid #e5ebf4;border-radius:10px;overscroll-behavior-x:contain;scroll-margin-top:90px}.measure svg{min-width:300px}.measure.selected{border-color:#75a9f7;box-shadow:0 0 0 2px #2877ff18}.measure .measure-num{font-size:11px;left:12px;top:5px}.score-key{padding:16px;gap:12px;font-size:12px}.chord-strip{font-size:12px;padding:14px;flex-wrap:wrap;line-height:1.6}.transport{display:none}.practice-tip{font-size:12px;line-height:1.75}.mixer{display:block;border:0;padding:18px;border-radius:0}.mixer h3{display:none}.mixer label{font-size:14px;min-height:44px;margin:4px 0;gap:12px}.mixer .field{font-size:14px;line-height:1.7;margin-top:12px}.mixer-group{padding:12px 0;border-bottom:1px solid #e4ecf5}.mixer-group:last-child{border:0}.speed-options{gap:8px}.speed-options button{min-height:44px;font-size:14px;border-radius:10px}.mixer select{min-height:48px;font-size:15px}.sound-status,.sound-status .text-btn{font-size:12px}.kit-panel,.band-panel,.focus-panel,.history-panel,.plus-practice{border:0;margin:0;padding:18px}.kit-channels{grid-template-columns:minmax(0,1fr);gap:10px}.kit-channel{padding:14px;border:1px solid #e3ebf4;border-radius:12px}.kit-channel strong{font-size:14px}.kit-channel label{font-size:13px}.kit-channel button{min-width:44px;min-height:44px;font-size:13px}.tool-heading h3{font-size:18px}.tool-heading p,.tool-heading span{font-size:13px}.band-channel{min-width:0}.band-channel label,.band-channel strong{font-size:14px}.band-channel button{min-height:44px;min-width:44px}.practice-modes{flex-wrap:wrap;gap:8px}.practice-modes .button{font-size:13px;min-height:46px;flex:1;min-width:120px}.section-shortcuts button{min-height:48px;font-size:13px;padding:12px;min-width:120px}.section-selection{font-size:13px;line-height:1.7}.roko-practice-bar{padding:16px;display:block;margin-bottom:16px}.roko-practice-bar strong{font-size:16px}.roko-practice-bar span{font-size:13px}.roko-practice-bar>div{margin-top:10px}.roko-practice-bar .button{font-size:13px}.stat-cards{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{padding:16px 10px;border-radius:14px;min-width:0}.stat-card strong{font-size:25px}.stat-card span{font-size:11px;line-height:1.6}.progress-table{padding:20px}.progress-row>div:first-child{font-size:14px}.progress-row small{font-size:12px}.profile-grid{grid-template-columns:minmax(0,1fr)}.profile-card{padding:20px}.profile-identity{align-items:flex-start}.profile-avatar{flex-basis:52px;height:52px;font-size:24px}.profile-identity h2{font-size:21px;overflow-wrap:anywhere}.profile-stats{gap:6px}.profile-stats strong{font-size:21px}.profile-stats span{font-size:11px;line-height:1.5}.profile-stats>div{padding:12px 8px}.profile-mode-tabs{flex-direction:row;gap:8px}.profile-mode-tabs button{font-size:13px;min-height:48px;padding:10px}.profile-card form label{font-size:14px}.profile-card form button[type=submit]{width:100%;font-size:15px}.profile-cloud{padding:16px}.plus-form{grid-template-columns:1fr}.plus-card p,.plus-card label,.backup-input{font-size:14px}.release-help h2{font-size:21px}.release-help p,.release-help li{font-size:15px;line-height:1.8}.release-status{font-size:14px}dialog{padding:24px 20px;border-radius:22px;max-height:calc(100dvh - 36px);width:calc(100% - 24px);overscroll-behavior:contain}dialog h2{font-size:25px}dialog p,dialog li{font-size:15px;line-height:1.75}dialog .close-btn{width:44px;height:44px;font-size:25px}.mobile-menu-links a:focus-visible,.mobile-nav a:focus-visible{outline-offset:-3px}#toast{bottom:calc(var(--mobile-nav) + var(--mobile-player) + 12px);max-width:calc(100% - 32px);font-size:14px;padding:14px 18px}
}
@media(min-width:761px){.mobile-search{flex:1}.mobile-disclosure>.filters{display:flex}#mobileMenu{max-height:85vh}}
@media(max-width:360px){.app main{padding-left:12px;padding-right:12px}.welcome-panel{padding:17px}.mini-song strong{max-width:96px}.bottom-player{gap:6px;padding-left:12px;padding-right:10px}.mini-controls{gap:5px}.reading-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:1fr}.mobile-nav strong{font-size:9px}}

@media(max-width:760px){.mobile-route-options{padding:16px}.welcome-content>.mobile-disclosure{margin-top:14px}.welcome-roko>span{font-size:9px}.welcome-foot{gap:6px}.welcome-roko .coach-sprite{width:56px;height:56px}.welcome-next{margin:16px 0 0}.mini-controls .icon-btn{display:inline-grid}#miniTime{display:inline}.mini-song strong{max-width:105px}}

.mobile-song-info{display:none}@media(max-width:760px){.mobile-song-info{display:block;font-size:11px;line-height:1.6;color:#607b9d;margin-top:5px}#miniPlayer #miniRestart{display:inline-grid}#miniPlayer #miniTime{display:inline}.mini-controls{gap:6px}.mini-song strong{max-width:94px}.song-artist{font-size:10px}.welcome-foot .text-btn{padding-left:0}}

@media(max-width:760px){body[data-mobile-page=practice] #main>[data-mobile-panel=roko]{display:none}.mobile-practice-guide{padding:0 14px 14px}.mobile-practice-guide .exercise-guide{margin:0;padding:16px}.mobile-practice-guide .practice-breadcrumb{margin-top:14px}.mobile-practice-guide .roko-practice-bar{margin-top:14px}#mobileTempoDialog{margin:auto auto 0;width:100%;max-width:620px;max-height:85dvh;border-radius:24px 24px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))}#mobileTempoDialog::backdrop{background:#08172d99;backdrop-filter:blur(3px)}#mobileTempoDialog>.mobile-menu-head{position:sticky;top:-20px;background:#fff;z-index:1;padding:12px 0;margin-top:-12px}#mobileTempoDialog .mixer{padding:0 4px}#mobileTempoDialog h2{margin:0;font-size:23px}.player-title h1{font-size:24px}.page-heading>.button{margin-top:10px;font-size:12px;min-height:40px;padding:8px 14px}}

@media(max-width:760px){.score-caption{display:none}.mobile-practice-actions{scroll-margin-top:80px}}

.mobile-practice-tabs{display:none}@media(max-width:760px){.mobile-practice-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;background:#e8eff9;border-radius:14px;margin:0 0 16px}.mobile-practice-tabs button{background:transparent;color:#59718d;border-radius:10px;min-height:44px;font-size:14px;font-weight:650}.mobile-practice-tabs button[aria-selected=true]{background:#fff;color:#2468cc;box-shadow:0 2px 7px #1b416815}.mobile-practice-view{min-width:0}.mobile-practice-view>.practice-tip{font-size:13px;margin:0 0 14px}.practice-layout>div>.practice-tip{display:none}body[data-mobile-page=practice] #main>.page-heading{margin-bottom:18px}.kit-channel label input{width:100%}}

@media(max-width:760px){.lesson-score{overflow-x:auto;overscroll-behavior-x:contain;min-width:0}.lesson-score svg{max-width:none}}

@media(max-width:760px){#main p{font-size:14px;line-height:1.8}body[data-mobile-page=lesson] #main p,body[data-mobile-page=lesson] #main li{font-size:15px;line-height:1.85}}