/* Scoped to keep native style:v2 button defaults from changing the layout. */

.phone-screen{background:#050d17;color:#f4f7ff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:calc(28 * var(--rpx, .5px));line-height:1.5}
#piano-app div, #piano-app button, #piano-app input, #piano-app textarea, #piano-app div{box-sizing:border-box}
#piano-app button{margin:0;padding:0;background:none;color:inherit;font:inherit;line-height:1.5;border-radius:0;text-align:left;width:auto;min-width:0;border:0;box-sizing:border-box;letter-spacing:normal}
#piano-app button::after{border:none}
#piano-app button[disabled]{opacity:.5;color:inherit}
#piano-app img{display:block;flex-shrink:0}
#piano-app input, #piano-app textarea{color:#f4f7ff;font:inherit}
#piano-app input::placeholder, #piano-app textarea::placeholder{color:#a7b6cc}
#piano-app span{overflow-wrap:break-word}
#piano-app.page{position:relative;background:radial-gradient(ellipse at 30% 0%,#0b1727 0,transparent 42%),#050d17;min-height:var(--page-height, 100vh);padding-bottom:calc(20px + var(--safe-bottom, 0px))}
#piano-app .page-content{padding:0 calc(36 * var(--rpx, .5px))}
#piano-app .safe-top{flex-shrink:0}
#piano-app.with-tabs{padding-bottom:calc(88px + var(--safe-bottom, 0px))}
#piano-app .nav-header{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height, 44px);margin:0 8px 10px;flex-shrink:0}
#piano-app .nav-title{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none;min-width:0;flex:1;text-align:center;font-size:16px}
#piano-app .nav-spacer{width:var(--nav-side, 52px);flex-shrink:0;display:flex;align-items:center}
#piano-app .icon-btn{width:calc(88 * var(--rpx, .5px));height:calc(88 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;flex-shrink:0}
#piano-app .icon{width:calc(40 * var(--rpx, .5px));height:calc(40 * var(--rpx, .5px))}
#piano-app .small-icon{width:calc(32 * var(--rpx, .5px));height:calc(32 * var(--rpx, .5px))}
#piano-app .big-icon{width:calc(60 * var(--rpx, .5px));height:calc(60 * var(--rpx, .5px))}
#piano-app .h1{display:block;font-size:calc(40 * var(--rpx, .5px));line-height:1.4;font-weight:650;letter-spacing:calc(0.3 * var(--rpx, .5px))}
#piano-app .h2{display:block;font-size:calc(32 * var(--rpx, .5px));line-height:1.5;font-weight:650}
#piano-app .h3{display:block;font-size:calc(28 * var(--rpx, .5px));font-weight:600}
#piano-app .muted, #piano-app .subtle{color:#afbed3}
#piano-app .small{font-size:calc(23 * var(--rpx, .5px))}
#piano-app .line-break{display:block}
#piano-app .center{text-align:center;display:block}
#piano-app .grow{flex:1;min-width:0}
#piano-app .grow>span{display:block}
#piano-app .green-text{color:#35edaa}
#piano-app .blue-text{color:#6cb3ff}
#piano-app .cyan-text, #piano-app .link{color:#70e6f5}
#piano-app .white-text{color:#fff}
#piano-app .danger{color:#ff8e9f}
#piano-app .btn{min-height:calc(88 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px)) calc(28 * var(--rpx, .5px));border-radius:calc(999 * var(--rpx, .5px));text-align:center;font-weight:650;font-size:calc(29 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;gap:calc(16 * var(--rpx, .5px))}
#piano-app .primary{background:linear-gradient(110deg,#2bec9e,#16d98b);color:#04261e}
#piano-app .cyan{background:linear-gradient(100deg,#65e9f3,#3aa9ff);color:#041f33}
#piano-app .outline{border:calc(1 * var(--rpx, .5px)) solid #3c6285;background:#081521;color:#e9f0fd}
#piano-app .secondary{background:#1a2c41;color:#c1cfe2}
#piano-app .indigo{background:linear-gradient(110deg,#3549c9,#16395b);border:calc(1 * var(--rpx, .5px)) solid #547cf3;color:#f5f7ff}
#piano-app .compact{font-size:calc(25 * var(--rpx, .5px));min-height:calc(66 * var(--rpx, .5px));padding:calc(14 * var(--rpx, .5px)) calc(30 * var(--rpx, .5px));display:inline-flex}
#piano-app .text-button{color:#7bd7eb;font-size:calc(25 * var(--rpx, .5px));min-height:calc(72 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;padding:calc(12 * var(--rpx, .5px)) 0}
#piano-app .full{width:100%}
#piano-app .section-heading{display:flex;align-items:center;justify-content:space-between;min-height:calc(76 * var(--rpx, .5px));margin-top:calc(28 * var(--rpx, .5px));margin-bottom:calc(8 * var(--rpx, .5px))}
#piano-app .panel, #piano-app .menu-group{background:linear-gradient(120deg,#142438,#0c1927);border-radius:calc(24 * var(--rpx, .5px))}
#piano-app .menu-group{margin-bottom:calc(24 * var(--rpx, .5px));padding:0 calc(22 * var(--rpx, .5px))}
#piano-app .menu-row{display:flex;align-items:center;gap:calc(22 * var(--rpx, .5px));width:100%;min-height:calc(100 * var(--rpx, .5px));border-bottom:calc(1 * var(--rpx, .5px)) solid #223247;font-size:calc(27 * var(--rpx, .5px))}
#piano-app .menu-row:last-child{border-bottom:0}
#piano-app .menu-row>span:nth-child(2){flex:1}
#piano-app .chevron{font-size:calc(34 * var(--rpx, .5px));color:#b3c4dc;margin-left:auto;padding-left:calc(8 * var(--rpx, .5px))}
#piano-app .standalone{padding:0 calc(24 * var(--rpx, .5px));background:#101f30;border-radius:calc(20 * var(--rpx, .5px))}
#piano-app .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#08131f;border-top:calc(1 * var(--rpx, .5px)) solid #1c3046;display:flex;justify-content:space-around;padding:8px 10px calc(8px + var(--safe-bottom, 0px));}
#piano-app .tab-item{flex:1;display:flex;align-items:center;flex-direction:column;color:#a5b4ca;font-size:calc(21 * var(--rpx, .5px));gap:calc(4 * var(--rpx, .5px));min-width:0;min-height:44px}
#piano-app .tab-item.selected{color:#56e7f1}
#piano-app .tab-icon{width:calc(38 * var(--rpx, .5px));height:calc(38 * var(--rpx, .5px))}
#piano-app .bottom-action{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,#050d17 80%,transparent);z-index:5;padding:16px calc(36 * var(--rpx, .5px)) calc(16px + var(--safe-bottom, 0px))}
#piano-app .avatar{width:calc(100 * var(--rpx, .5px));height:calc(100 * var(--rpx, .5px));border-radius:50%;object-fit:cover;border:calc(2 * var(--rpx, .5px)) solid #af9b89}
#piano-app .avatar.mini{width:calc(80 * var(--rpx, .5px));height:calc(80 * var(--rpx, .5px))}
#piano-app .avatar.large{width:calc(112 * var(--rpx, .5px));height:calc(112 * var(--rpx, .5px))}
#piano-app .chosen{border:calc(1 * var(--rpx, .5px)) solid #6dbbff!important;background:linear-gradient(120deg,#1b3954,#10203a)!important}
#piano-app .empty-state{padding:calc(56 * var(--rpx, .5px)) calc(12 * var(--rpx, .5px));display:flex;align-items:center;flex-direction:column;gap:calc(20 * var(--rpx, .5px));text-align:center}
#piano-app .empty-state .muted{line-height:1.8}
#piano-app .empty-state .btn{width:100%;margin-top:calc(12 * var(--rpx, .5px))}
#piano-app .empty-inline{display:block;padding:calc(32 * var(--rpx, .5px)) calc(10 * var(--rpx, .5px));font-size:calc(25 * var(--rpx, .5px));color:#a9bad0;text-align:center;line-height:1.8}
#piano-app .input{width:100%;background:#0a1726;border:calc(1 * var(--rpx, .5px)) solid #304660;border-radius:calc(16 * var(--rpx, .5px));height:calc(90 * var(--rpx, .5px));padding:calc(20 * var(--rpx, .5px)) calc(24 * var(--rpx, .5px))}
#piano-app .field-label{display:block;color:#b8c8dd;font-size:calc(25 * var(--rpx, .5px));margin:calc(24 * var(--rpx, .5px)) 0 calc(12 * var(--rpx, .5px))}
#piano-app .error-message{display:block;color:#ffadb9;background:#321c2b;padding:calc(20 * var(--rpx, .5px));border-radius:calc(16 * var(--rpx, .5px));margin-top:calc(20 * var(--rpx, .5px));font-size:calc(24 * var(--rpx, .5px))}
#piano-app .status-note{display:block;font-size:calc(24 * var(--rpx, .5px));line-height:1.7;color:#afbed3;margin:calc(22 * var(--rpx, .5px)) 0 calc(32 * var(--rpx, .5px))}
#piano-app .tiny-dot{width:calc(12 * var(--rpx, .5px));height:calc(12 * var(--rpx, .5px));background:#32e6b1;border-radius:50%;flex-shrink:0}
#piano-app .tiny-dot.warning{background:#f7c65e}
#piano-app .btn{width:100%}
#piano-app .btn.compact{width:auto}
/* Welcome */
#piano-app.login-page{display:flex;flex-direction:column;background:#040b12;height:auto;min-height:var(--page-height, 100vh);overflow:visible;padding:0 0 var(--safe-bottom, 0px)}
#piano-app .login-brand{position:relative;z-index:2;text-align:center;padding:12px 20px 0;flex-shrink:0}
#piano-app .brand-title{display:block;font-weight:750;letter-spacing:calc(3 * var(--rpx, .5px));font-size:24px}
#piano-app .login-brand .subtle{display:block;margin-top:calc(6 * var(--rpx, .5px));font-size:13px;letter-spacing:1px}
#piano-app .wave-mark{display:flex;align-items:center;justify-content:center;height:42px;gap:4px;margin-bottom:12px}
#piano-app .wave-mark>div{background:linear-gradient(#7e79ff,#2385ff);border-radius:calc(8 * var(--rpx, .5px));width:5px;height:20px}
#piano-app .wave-mark>div:nth-child(2), #piano-app .wave-mark>div:nth-child(6){height:28px}
#piano-app .wave-mark>div:nth-child(3), #piano-app .wave-mark>div:nth-child(5){height:36px}
#piano-app .wave-mark>div:nth-child(4){height:46px}
#piano-app .login-art{position:relative;flex:1 0 180px;min-height:160px;height:auto;margin-top:0}
#piano-app .login-art>img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0}
#piano-app .art-shade{position:absolute;inset:0;background:linear-gradient(0deg,#050d17 0,transparent 28%,transparent 70%,#050d17 100%)}
#piano-app .login-message{position:relative;z-index:2;text-align:center;margin-top:-28px;flex-shrink:0;padding:0 20px}
#piano-app .display-title{display:block;font-weight:750;letter-spacing:calc(2 * var(--rpx, .5px));font-size:28px;line-height:1.4}
#piano-app .login-message>.muted{display:block;font-size:14px;margin-top:12px}
#piano-app .login-actions{position:relative;z-index:2;margin-top:0;padding:24px calc(40 * var(--rpx, .5px)) 8px;flex-shrink:0}
#piano-app .login-actions>.btn+.btn{margin-top:12px}
#piano-app .consent{display:flex;align-items:center;justify-content:center;color:#a8b9d0;flex-wrap:nowrap;font-size:11px;gap:0;min-height:44px;margin-top:12px}
#piano-app .checkbox{display:flex;align-items:center;justify-content:center;border:calc(1 * var(--rpx, .5px)) solid #7395b9;border-radius:calc(8 * var(--rpx, .5px));width:20px;height:20px;flex-shrink:0;margin-right:0;font-size:14px}
#piano-app .checkbox.checked{background:#25e699;border-color:#25e699;color:#04261e}
/* Learners and home */
#piano-app.learners-page{padding-bottom:calc(100px + var(--safe-bottom, 0px))}
#piano-app .intro{margin:calc(12 * var(--rpx, .5px)) 0 calc(44 * var(--rpx, .5px))}
#piano-app .intro>.muted{display:block;margin-top:calc(14 * var(--rpx, .5px));line-height:1.9}
#piano-app .learner-card{display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px));border:calc(1 * var(--rpx, .5px)) solid #1c334b;background:linear-gradient(125deg,#142437,#0d1b2a);border-radius:calc(22 * var(--rpx, .5px));margin-bottom:calc(20 * var(--rpx, .5px))}
#piano-app .learner-card .small{margin-top:calc(8 * var(--rpx, .5px))}
#piano-app .checkmark{width:calc(30 * var(--rpx, .5px));height:calc(30 * var(--rpx, .5px));border-radius:50%;background:#21e394;color:#073526;text-align:center;line-height:calc(30 * var(--rpx, .5px));flex-shrink:0;font-size:calc(22 * var(--rpx, .5px))}
#piano-app .add-learner{width:100%;display:flex;align-items:center;gap:calc(28 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px));border-radius:calc(22 * var(--rpx, .5px));background:linear-gradient(110deg,#15283c,#0b1827);color:#b1c5e0}
#piano-app .plus-circle{display:flex;align-items:center;justify-content:center;width:calc(90 * var(--rpx, .5px));height:calc(90 * var(--rpx, .5px));border-radius:50%;background:#21334b;font-size:calc(56 * var(--rpx, .5px));color:#e8eef8}
#piano-app .modal-backdrop{position:fixed;inset:0;background:#000a;z-index:30;display:flex;align-items:flex-end;padding:12px 12px calc(12px + var(--safe-bottom, 0px))}
#piano-app .sheet{width:100%;padding:calc(24 * var(--rpx, .5px)) calc(32 * var(--rpx, .5px)) calc(34 * var(--rpx, .5px));background:#122235;border:calc(1 * var(--rpx, .5px)) solid #3a5573;border-radius:calc(28 * var(--rpx, .5px));overflow:auto;max-height:calc(var(--page-height, 100vh) - 80px)}
#piano-app .sheet>.section-heading{margin-top:0}
#piano-app .sheet .btn{margin-top:calc(28 * var(--rpx, .5px))}
#piano-app .avatar-picker{display:flex;justify-content:center;gap:calc(30 * var(--rpx, .5px));margin:calc(14 * var(--rpx, .5px)) 0 calc(30 * var(--rpx, .5px))}
#piano-app .avatar-picker .avatar{width:calc(94 * var(--rpx, .5px));height:calc(94 * var(--rpx, .5px));padding:calc(4 * var(--rpx, .5px))}
#piano-app .greeting{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--rpx, .5px));padding:12px 0 24px}
#piano-app .greeting .h1{font-size:calc(37 * var(--rpx, .5px))}
#piano-app .greeting .muted{display:block;font-size:calc(25 * var(--rpx, .5px));margin-top:calc(7 * var(--rpx, .5px))}
#piano-app .wave-hand{color:#f9cc6b}
#piano-app .hero-card{position:relative;height:calc(282 * var(--rpx, .5px));border-radius:calc(26 * var(--rpx, .5px));overflow:hidden;background:#182461}
#piano-app .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#piano-app .hero-gradient{position:absolute;inset:0;background:linear-gradient(90deg,#203c9c 0%,#15295ec9 36%,#08122205 80%)}
#piano-app .hero-copy{position:relative;padding:calc(38 * var(--rpx, .5px)) calc(28 * var(--rpx, .5px))}
#piano-app .hero-copy>.h2{font-size:calc(34 * var(--rpx, .5px))}
#piano-app .hero-copy>span:not(.h2){display:block;color:#e6ebff;margin-top:calc(3 * var(--rpx, .5px));font-size:calc(25 * var(--rpx, .5px))}
#piano-app .hero-copy .btn{margin-top:calc(20 * var(--rpx, .5px))}
#piano-app .quick-actions{display:flex;justify-content:space-between;margin:calc(32 * var(--rpx, .5px)) 0 calc(20 * var(--rpx, .5px))}
#piano-app .quick-actions>button{display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--rpx, .5px));font-size:calc(23 * var(--rpx, .5px));width:25%}
#piano-app .quick-icon{display:flex;width:calc(90 * var(--rpx, .5px));height:calc(90 * var(--rpx, .5px));border-radius:calc(22 * var(--rpx, .5px));align-items:center;justify-content:center}
#piano-app .quick-icon>img{width:calc(50 * var(--rpx, .5px));height:calc(50 * var(--rpx, .5px))}
#piano-app .blue{background:linear-gradient(145deg,#3d74ff,#2832c8)}
#piano-app .coral{background:linear-gradient(145deg,#ff92a5,#a8365c)}
#piano-app .green{background:linear-gradient(145deg,#30d89e,#147251)}
#piano-app .sky{background:linear-gradient(145deg,#20d3fa,#2855df)}
#piano-app .recommend-list{background:linear-gradient(125deg,#14283b,#0a1725);border-radius:calc(22 * var(--rpx, .5px));padding:0 calc(18 * var(--rpx, .5px))}
#piano-app .song-row{display:flex;align-items:center;gap:calc(18 * var(--rpx, .5px));min-height:calc(122 * var(--rpx, .5px));padding:calc(16 * var(--rpx, .5px)) 0;border-bottom:calc(1 * var(--rpx, .5px)) solid #1c2e42}
#piano-app .song-row:last-child{border-bottom:0}
#piano-app .song-main{display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));flex:1;min-width:0}
#piano-app .song-cover{width:calc(142 * var(--rpx, .5px));height:calc(92 * var(--rpx, .5px));border-radius:calc(12 * var(--rpx, .5px));object-fit:cover}
#piano-app .song-copy{flex:1;min-width:0}
#piano-app .song-title{display:block;font-size:calc(27 * var(--rpx, .5px));font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#piano-app .song-public .song-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45}
#piano-app .song-uncached .song-title{color:#afbed3}
#piano-app .song-uncached .song-cover,#piano-app .cover-uncached{filter:grayscale(1);opacity:.55}
#piano-app .song-storage{display:block;font-size:calc(23 * var(--rpx, .5px));margin-top:calc(4 * var(--rpx, .5px))}
#piano-app .cache-summary{display:flex;flex-direction:column;gap:calc(10 * var(--rpx, .5px));padding:calc(20 * var(--rpx, .5px)) 0;color:#e2eaf6}
#piano-app .song-cache-actions{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--rpx, .5px));font-size:calc(24 * var(--rpx, .5px));margin:calc(12 * var(--rpx, .5px)) 0}
#piano-app .song-row-actions{display:flex;flex-direction:column;flex-shrink:0;align-items:flex-end}
#piano-app .song-row-actions .text-button{min-height:calc(72 * var(--rpx, .5px));padding:calc(10 * var(--rpx, .5px)) calc(8 * var(--rpx, .5px));font-size:calc(23 * var(--rpx, .5px))}
#piano-app .song-row-actions .text-button.danger{color:#ff8e9f}
#piano-app .song-copy>.muted{display:block;margin-top:calc(7 * var(--rpx, .5px))}
#piano-app .song-meta{display:flex;align-items:center;flex-wrap:wrap;gap:calc(10 * var(--rpx, .5px));color:#adbed3;font-size:calc(22 * var(--rpx, .5px));margin-top:calc(8 * var(--rpx, .5px))}
#piano-app .stars{color:#ffd34e;letter-spacing:calc(2 * var(--rpx, .5px));font-size:calc(23 * var(--rpx, .5px));white-space:nowrap}
#piano-app .recommend-list .song-cover{width:calc(134 * var(--rpx, .5px));height:calc(90 * var(--rpx, .5px))}
#piano-app .heart{font-size:calc(40 * var(--rpx, .5px));width:calc(64 * var(--rpx, .5px))}
#piano-app .heart.loved{color:#ff806f}
#piano-app .daily-note{display:flex;gap:calc(12 * var(--rpx, .5px));align-items:center;justify-content:center;font-size:calc(22 * var(--rpx, .5px));color:#9aadc5;margin:calc(32 * var(--rpx, .5px)) 0}
/* Device and library */
#piano-app .connect-art{position:relative;height:calc(280 * var(--rpx, .5px));border-radius:calc(22 * var(--rpx, .5px));overflow:hidden}
#piano-app .connect-art>img{width:100%;height:100%;object-fit:cover}
#piano-app .scan-status{display:flex;align-items:center;justify-content:center;gap:calc(16 * var(--rpx, .5px));margin:calc(28 * var(--rpx, .5px)) 0;font-size:calc(26 * var(--rpx, .5px))}
#piano-app .device-list{border-radius:calc(24 * var(--rpx, .5px));background:#102033;padding:calc(20 * var(--rpx, .5px))}
#piano-app .discovered-device{width:100%;display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px));background:#183045;border:calc(1 * var(--rpx, .5px)) solid #2c5270;border-radius:calc(18 * var(--rpx, .5px));margin-bottom:calc(16 * var(--rpx, .5px))}
#piano-app .signal{color:#38e7a7;font-size:calc(28 * var(--rpx, .5px))}
#piano-app .connection-heading{display:flex;align-items:center;gap:calc(22 * var(--rpx, .5px));margin:calc(18 * var(--rpx, .5px)) 0 calc(40 * var(--rpx, .5px))}
#piano-app .connected-check{display:flex;align-items:center;justify-content:center;width:calc(76 * var(--rpx, .5px));height:calc(76 * var(--rpx, .5px));border-radius:50%;color:white;background:#22dc8e;font-size:calc(50 * var(--rpx, .5px))}
#piano-app .battery{color:#50ecb2;font-size:calc(22 * var(--rpx, .5px))}
#piano-app .key-detection{padding:calc(24 * var(--rpx, .5px))}
#piano-app .key-detection .section-heading{margin:0 0 calc(20 * var(--rpx, .5px));min-height:calc(50 * var(--rpx, .5px))}
#piano-app .key-detection .green-text{font-size:calc(22 * var(--rpx, .5px))}
#piano-app .key-detection>.small{display:block;margin-top:calc(18 * var(--rpx, .5px))}
#piano-app .mini-piano{height:calc(120 * var(--rpx, .5px));position:relative;display:flex;gap:calc(3 * var(--rpx, .5px))}
#piano-app .mini-white{flex:1;background:linear-gradient(#f9fafc,#d4dbe6);border-radius:0 0 calc(5 * var(--rpx, .5px)) calc(5 * var(--rpx, .5px))}
#piano-app .mini-black-row{position:absolute;inset:0}
#piano-app .mini-black{position:absolute;top:0;height:calc(72 * var(--rpx, .5px));background:linear-gradient(90deg,#02040a,#27303d,#03070e);border-radius:0 0 calc(4 * var(--rpx, .5px)) calc(4 * var(--rpx, .5px))}
#piano-app .device-controls{display:flex;gap:calc(14 * var(--rpx, .5px));margin:calc(24 * var(--rpx, .5px)) 0}
#piano-app .control-card{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;gap:calc(12 * var(--rpx, .5px));padding:calc(24 * var(--rpx, .5px)) calc(10 * var(--rpx, .5px));background:linear-gradient(130deg,#1b3046,#102031);border-radius:calc(20 * var(--rpx, .5px));text-align:center;font-size:calc(24 * var(--rpx, .5px))}
#piano-app .control-card slider{width:100%;margin:calc(4 * var(--rpx, .5px)) 0}
#piano-app .control-card .big-icon{margin-bottom:calc(8 * var(--rpx, .5px))}
#piano-app .empty-device{padding:calc(28 * var(--rpx, .5px)) 0 calc(36 * var(--rpx, .5px))}
#piano-app .empty-device .muted{display:block;margin:calc(14 * var(--rpx, .5px)) 0 calc(32 * var(--rpx, .5px));font-size:calc(25 * var(--rpx, .5px));line-height:1.9}
#piano-app .empty-icon{width:calc(90 * var(--rpx, .5px));height:calc(90 * var(--rpx, .5px));margin:0 auto calc(24 * var(--rpx, .5px));background:#15354b;border-radius:50%;display:flex;align-items:center;justify-content:center}
#piano-app .empty-icon>img{width:calc(46 * var(--rpx, .5px));height:calc(46 * var(--rpx, .5px))}
#piano-app .search-box{display:flex;align-items:center;gap:calc(15 * var(--rpx, .5px));background:#172639;border-radius:calc(20 * var(--rpx, .5px));height:calc(78 * var(--rpx, .5px));padding:0 calc(20 * var(--rpx, .5px))}
#piano-app .search-box input{flex:1;min-width:0;font-size:calc(25 * var(--rpx, .5px));height:calc(70 * var(--rpx, .5px))}
#piano-app .search-box .icon-btn{width:calc(48 * var(--rpx, .5px));height:calc(60 * var(--rpx, .5px))}
#piano-app .category-scroll{width:100%;white-space:nowrap;margin:calc(22 * var(--rpx, .5px)) 0 calc(8 * var(--rpx, .5px))}
#piano-app .chips{display:flex;align-items:center;gap:calc(6 * var(--rpx, .5px));min-width:max-content;padding-bottom:calc(8 * var(--rpx, .5px))}
#piano-app .chip{padding:calc(12 * var(--rpx, .5px)) calc(18 * var(--rpx, .5px));min-height:calc(64 * var(--rpx, .5px));border-radius:calc(14 * var(--rpx, .5px));font-size:calc(24 * var(--rpx, .5px));color:#c3cfe1;flex-shrink:0}
#piano-app .chip.active{background:linear-gradient(140deg,#5e63f5,#3839b7);color:white}
#piano-app .import-link{display:flex;align-items:center;gap:calc(16 * var(--rpx, .5px));width:100%;margin-top:calc(24 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px));background:#101f2f;border-radius:calc(18 * var(--rpx, .5px));color:#72d7e8;font-size:calc(26 * var(--rpx, .5px))}
/* Song and practice */
#piano-app.song-detail{padding-bottom:calc(100px + var(--safe-bottom, 0px))}
#piano-app .song-detail-heading{display:flex;align-items:center;justify-content:space-between}
#piano-app .song-detail-heading>div{width:calc(64 * var(--rpx, .5px))}
#piano-app .song-detail-heading>.h1{font-size:calc(36 * var(--rpx, .5px));text-align:center}
#piano-app .song-tags{display:flex;gap:calc(12 * var(--rpx, .5px));justify-content:center;margin:calc(8 * var(--rpx, .5px)) 0 calc(24 * var(--rpx, .5px))}
#piano-app .song-tags>span{font-size:calc(21 * var(--rpx, .5px));padding:calc(3 * var(--rpx, .5px)) calc(12 * var(--rpx, .5px));border-radius:calc(8 * var(--rpx, .5px));background:#1b2c48;color:#d5e1fa}
#piano-app .detail-cover{width:100%;height:calc(286 * var(--rpx, .5px));border-radius:calc(24 * var(--rpx, .5px));object-fit:cover}
#piano-app.song-detail .stars{margin-top:calc(12 * var(--rpx, .5px))}
#piano-app .description{display:block;color:#b8c8dd;line-height:1.8;font-size:calc(25 * var(--rpx, .5px));margin-top:calc(16 * var(--rpx, .5px))}
#piano-app .mode-option{width:100%;display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));background:linear-gradient(120deg,#192a3f,#102133);border:calc(1 * var(--rpx, .5px)) solid #293e57;border-radius:calc(20 * var(--rpx, .5px));padding:calc(18 * var(--rpx, .5px));margin-bottom:calc(14 * var(--rpx, .5px))}
#piano-app .mode-icon{width:calc(66 * var(--rpx, .5px));height:calc(66 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;background:#21354d;border-radius:calc(16 * var(--rpx, .5px))}
#piano-app .mode-icon img{width:calc(38 * var(--rpx, .5px));height:calc(38 * var(--rpx, .5px))}
#piano-app .mode-option .small{margin-top:calc(3 * var(--rpx, .5px))}
#piano-app .radio{color:#6bdff1;font-size:calc(28 * var(--rpx, .5px))}
#piano-app .copyright{display:block;margin-top:calc(24 * var(--rpx, .5px));text-align:center}
#piano-app .segment-fields{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--rpx, .5px));padding:calc(10 * var(--rpx, .5px)) 0 calc(24 * var(--rpx, .5px));font-size:calc(23 * var(--rpx, .5px))}
#piano-app .segment-fields input{width:calc(76 * var(--rpx, .5px));background:#183048;border-radius:calc(8 * var(--rpx, .5px));text-align:center;height:calc(66 * var(--rpx, .5px))}
#piano-app .segmented{display:flex;padding:calc(5 * var(--rpx, .5px));background:#101f30;border:calc(1 * var(--rpx, .5px)) solid #243a54;border-radius:calc(16 * var(--rpx, .5px))}
#piano-app .segmented>button{flex:1;text-align:center;padding:calc(10 * var(--rpx, .5px)) calc(4 * var(--rpx, .5px));min-height:calc(58 * var(--rpx, .5px));font-size:calc(24 * var(--rpx, .5px));color:#c6d3e7;border-radius:calc(11 * var(--rpx, .5px))}
#piano-app .segmented>button.active{background:linear-gradient(110deg,#3047a9,#223d79);color:#fff}
#piano-app .hand-picker{margin-top:calc(18 * var(--rpx, .5px))}
#piano-app.practice-page{display:flex;flex-direction:column;height:var(--page-height, 100vh);min-height:540px;padding:0 0 var(--safe-bottom, 0px);overflow:visible}
#piano-app.practice-page .nav-header{flex-shrink:0;margin-bottom:0;height:var(--nav-height, 44px)}
#piano-app .practice-workspace{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
#piano-app .practice-stage{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
#piano-app .practice-toolbar{flex-shrink:0}
#piano-app .practice-top{padding:0 calc(24 * var(--rpx, .5px));flex-shrink:0}
#piano-app .practice-progress{display:flex;align-items:center;gap:calc(18 * var(--rpx, .5px));font-size:calc(22 * var(--rpx, .5px));margin-top:calc(18 * var(--rpx, .5px))}
#piano-app .progress-track{height:calc(5 * var(--rpx, .5px));flex:1;background:#25374b;border-radius:calc(4 * var(--rpx, .5px));overflow:hidden}
#piano-app .progress-track>div{height:100%;background:#54e3f6}
#piano-app .hand-legend{display:flex;align-items:center;gap:calc(18 * var(--rpx, .5px));margin:calc(16 * var(--rpx, .5px)) 0;font-size:calc(20 * var(--rpx, .5px))}
#piano-app .hand-legend>.muted{margin-left:auto}
#piano-app .score-wrap{flex:1;position:relative;margin:0 calc(14 * var(--rpx, .5px));min-height:80px}
#piano-app .score-canvas{width:100%;height:100%;display:block}
#piano-app .paused-overlay{position:absolute;inset:0;background:#050e18a6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(20 * var(--rpx, .5px));color:#d3dff4;font-size:calc(27 * var(--rpx, .5px))}
#piano-app .play-orb{width:calc(108 * var(--rpx, .5px));height:calc(108 * var(--rpx, .5px));background:#113b53c9;border:calc(1 * var(--rpx, .5px)) solid #4dceec;color:#74e9f9;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:calc(6 * var(--rpx, .5px));font-size:calc(40 * var(--rpx, .5px))}
#piano-app .countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(120 * var(--rpx, .5px));font-weight:750;color:#67e6ee;background:#07142180}
#piano-app .piano-leds{display:flex;gap:calc(2 * var(--rpx, .5px));padding:calc(10 * var(--rpx, .5px)) calc(5 * var(--rpx, .5px));background:#080d16;border-top:calc(3 * var(--rpx, .5px)) solid #14405f;flex-shrink:0}
#piano-app .piano-leds>div{flex:1;height:calc(7 * var(--rpx, .5px));background:#23445b;border-radius:calc(3 * var(--rpx, .5px))}
#piano-app .piano-leds>.lit-blue{background:#56b4ff;box-shadow:0 0 calc(14 * var(--rpx, .5px)) #34a2ff}
#piano-app .piano-leds>.lit-green{background:#42ffc1;box-shadow:0 0 calc(14 * var(--rpx, .5px)) #24eba3}
#piano-app .piano{background:#000;position:relative;border:calc(5 * var(--rpx, .5px)) solid #111827;flex-shrink:0;touch-action:none;height:110px}
#piano-app .white-keys{display:flex;height:100%}
#piano-app .piano-white{height:100%;position:relative;background:linear-gradient(90deg,#aeb9c7 0,#f8fbff 14%,#eaf0f8 80%,#b4bfcb 100%);border-right:calc(2 * var(--rpx, .5px)) solid #07101b;border-radius:0 0 calc(5 * var(--rpx, .5px)) calc(5 * var(--rpx, .5px));color:#52627c;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(10 * var(--rpx, .5px))}
#piano-app .piano-white>span{font-size:calc(17 * var(--rpx, .5px))}
#piano-app .piano-black{position:absolute;top:0;height:60%;background:linear-gradient(90deg,#000 0,#252b38 28%,#08101b 80%,#03070d);border:calc(1 * var(--rpx, .5px)) solid #020509;border-bottom:calc(8 * var(--rpx, .5px)) solid #070a11;border-radius:0 0 calc(6 * var(--rpx, .5px)) calc(6 * var(--rpx, .5px));z-index:2}
#piano-app .piano .active-blue{background:linear-gradient(#136eff,#7ad2ff);box-shadow:0 0 calc(22 * var(--rpx, .5px)) #278bff}
#piano-app .piano .active-green{background:linear-gradient(#0eab6d,#8fffdf);box-shadow:0 0 calc(22 * var(--rpx, .5px)) #0fdb94}
#piano-app .practice-feedback{font-size:calc(23 * var(--rpx, .5px));color:#b9d0e4;text-align:center;flex-shrink:0;background:#0a1523;height:auto;min-height:28px;padding:6px 10px;line-height:1.4}
#piano-app .practice-controls{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:12px 10px 6px;gap:4px}
#piano-app .practice-controls>button{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b7c5da;flex:1;min-width:0;min-height:48px;gap:4px;font-size:11px}
#piano-app .practice-controls>.pause-circle{background:#20354a;border-radius:50%;color:#fff;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;font-size:21px}
#piano-app .practice-bottom{display:flex;justify-content:space-between;padding:0 calc(26 * var(--rpx, .5px));flex-shrink:0}
#piano-app .practice-bottom .text-button{min-height:44px;font-size:12px}
/* Results, learning, profile */
#piano-app.result-page{background:radial-gradient(ellipse at 50% 22%,#21183d,transparent 36%),#050d17}
#piano-app .result-celebration{position:relative;text-align:center;padding:calc(8 * var(--rpx, .5px)) 0 calc(32 * var(--rpx, .5px));display:flex;flex-direction:column;align-items:center}
#piano-app .trophy{width:calc(230 * var(--rpx, .5px));height:calc(210 * var(--rpx, .5px));mix-blend-mode:lighten}
#piano-app .result-celebration>.h1{font-size:calc(40 * var(--rpx, .5px));margin-top:calc(12 * var(--rpx, .5px))}
#piano-app .result-celebration>.muted{margin-top:calc(12 * var(--rpx, .5px))}
#piano-app .confetti{position:absolute;font-size:calc(40 * var(--rpx, .5px))}
#piano-app .c1{left:calc(32 * var(--rpx, .5px));top:calc(42 * var(--rpx, .5px));color:#fb55cc}
#piano-app .c2{right:calc(40 * var(--rpx, .5px));top:calc(132 * var(--rpx, .5px));color:#48d9f7}
#piano-app .c3{right:calc(100 * var(--rpx, .5px));top:calc(8 * var(--rpx, .5px));color:#fed25e}
#piano-app .results-grid{display:grid;grid-template-columns:1fr 1fr;background:#112034;border-radius:calc(24 * var(--rpx, .5px));padding:calc(10 * var(--rpx, .5px))}
#piano-app .results-grid>div{padding:calc(22 * var(--rpx, .5px)) calc(28 * var(--rpx, .5px));display:flex;flex-direction:column;gap:calc(8 * var(--rpx, .5px))}
#piano-app .results-grid>div:nth-child(-n+2){border-bottom:calc(1 * var(--rpx, .5px)) solid #28364b}
#piano-app .results-grid>div:nth-child(odd){border-right:calc(1 * var(--rpx, .5px)) solid #28364b}
#piano-app .metric{font-size:calc(44 * var(--rpx, .5px));font-weight:650}
#piano-app .metric.smaller{font-size:calc(35 * var(--rpx, .5px))}
#piano-app .result-analysis{display:flex;justify-content:space-between;margin:calc(20 * var(--rpx, .5px)) 0;color:#acbbcf;font-size:calc(22 * var(--rpx, .5px))}
#piano-app .result-actions{display:flex;flex-direction:column;gap:calc(16 * var(--rpx, .5px));margin:calc(32 * var(--rpx, .5px)) 0 calc(24 * var(--rpx, .5px))}
#piano-app .result-actions .btn{min-height:calc(76 * var(--rpx, .5px));padding:calc(16 * var(--rpx, .5px))}
#piano-app .course-intro{padding:calc(12 * var(--rpx, .5px)) 0 calc(14 * var(--rpx, .5px))}
#piano-app .course-intro>.h1{font-size:calc(38 * var(--rpx, .5px))}
#piano-app .course-intro>.muted{display:block;font-size:calc(24 * var(--rpx, .5px));margin-top:calc(8 * var(--rpx, .5px))}
#piano-app .lesson-row{display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));padding:calc(22 * var(--rpx, .5px)) 0;border-bottom:calc(1 * var(--rpx, .5px)) solid #233246;width:100%}
#piano-app .lesson-cover{width:calc(155 * var(--rpx, .5px));height:calc(108 * var(--rpx, .5px));border-radius:calc(14 * var(--rpx, .5px));object-fit:cover}
#piano-app .lesson-row .song-title{white-space:normal;font-size:calc(26 * var(--rpx, .5px));line-height:1.6}
#piano-app .lesson-row .small{margin-top:calc(8 * var(--rpx, .5px))}
#piano-app .play-small{width:calc(38 * var(--rpx, .5px));height:calc(38 * var(--rpx, .5px));border:calc(2 * var(--rpx, .5px)) solid #d8e4fa;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(17 * var(--rpx, .5px));flex-shrink:0;padding-left:calc(3 * var(--rpx, .5px))}
#piano-app .lesson-list{margin-bottom:calc(28 * var(--rpx, .5px))}
#piano-app .calendar{margin:calc(26 * var(--rpx, .5px)) 0}
#piano-app .calendar-week{display:flex;justify-content:space-between;margin-top:calc(14 * var(--rpx, .5px))}
#piano-app .calendar-week>button{display:flex;flex:1;flex-direction:column;align-items:center;gap:calc(8 * var(--rpx, .5px))}
#piano-app .day-number{width:calc(52 * var(--rpx, .5px));height:calc(52 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;font-size:calc(24 * var(--rpx, .5px));border-radius:50%}
#piano-app .calendar-week .selected .day-number{background:#66e1f1;color:#051d30}
#piano-app .calendar-dot{width:calc(7 * var(--rpx, .5px));height:calc(7 * var(--rpx, .5px));border-radius:50%;background:transparent}
#piano-app .calendar-dot.visible{background:#45e9ae}
#piano-app .stats-top{display:flex;gap:calc(16 * var(--rpx, .5px));align-items:stretch}
#piano-app .stat-primary{width:50%;padding:calc(24 * var(--rpx, .5px));background:#17273e;border-radius:calc(20 * var(--rpx, .5px));display:flex;flex-direction:column;gap:calc(6 * var(--rpx, .5px))}
#piano-app .stat-primary>.muted{font-size:calc(25 * var(--rpx, .5px))}
#piano-app .big-number{font-size:calc(56 * var(--rpx, .5px));font-weight:650;line-height:1.2}
#piano-app .chart{flex:1;display:flex;gap:calc(10 * var(--rpx, .5px));padding:calc(20 * var(--rpx, .5px)) calc(16 * var(--rpx, .5px)) calc(12 * var(--rpx, .5px));background:#111e31;border-radius:calc(20 * var(--rpx, .5px));min-height:calc(160 * var(--rpx, .5px))}
#piano-app .chart-column{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(9 * var(--rpx, .5px));font-size:calc(17 * var(--rpx, .5px));color:#a8bed7}
#piano-app .bar-track{height:calc(104 * var(--rpx, .5px));width:100%;display:flex;align-items:flex-end}
#piano-app .bar{width:100%;background:linear-gradient(#5df2b5,#0cae7f);border-radius:calc(4 * var(--rpx, .5px))}
#piano-app .stats-bottom{display:flex;gap:calc(16 * var(--rpx, .5px));margin-top:calc(16 * var(--rpx, .5px))}
#piano-app .stats-bottom>div{flex:1;padding:calc(22 * var(--rpx, .5px)) calc(24 * var(--rpx, .5px));background:#142236;border-radius:calc(18 * var(--rpx, .5px))}
#piano-app .stats-bottom .h1{margin-top:calc(8 * var(--rpx, .5px));font-size:calc(36 * var(--rpx, .5px))}
#piano-app .record-row{display:flex;align-items:center;gap:calc(14 * var(--rpx, .5px));padding:calc(20 * var(--rpx, .5px)) 0;border-bottom:calc(1 * var(--rpx, .5px)) solid #1b2c40}
#piano-app .record-cover{width:calc(66 * var(--rpx, .5px));height:calc(66 * var(--rpx, .5px));border-radius:calc(9 * var(--rpx, .5px));object-fit:cover}
#piano-app .record-row>.small{max-width:calc(106 * var(--rpx, .5px));text-align:right;font-size:calc(18 * var(--rpx, .5px))}
#piano-app .record-row>.green-text{font-size:calc(25 * var(--rpx, .5px))}
#piano-app .record-row .grow>span{font-size:calc(25 * var(--rpx, .5px))}
#piano-app .record-row .grow>.small{font-size:calc(20 * var(--rpx, .5px))}
#piano-app .compact-empty{padding:calc(30 * var(--rpx, .5px)) calc(10 * var(--rpx, .5px))}
#piano-app .compact-empty>.h3{font-size:calc(27 * var(--rpx, .5px))}
#piano-app .compact-empty>.muted{font-size:calc(24 * var(--rpx, .5px))}
#piano-app .profile-heading{display:flex;align-items:center;gap:calc(24 * var(--rpx, .5px));padding:16px 0 24px}
#piano-app .profile-heading .muted{font-size:calc(24 * var(--rpx, .5px));margin-top:calc(8 * var(--rpx, .5px))}
#piano-app .profile-stats{display:flex;margin:calc(8 * var(--rpx, .5px)) 0 calc(36 * var(--rpx, .5px))}
#piano-app .profile-stats>div{flex:1;text-align:center;border-right:calc(1 * var(--rpx, .5px)) solid #23374d}
#piano-app .profile-stats>div:last-child{border-right:none}
#piano-app .profile-stats .muted{font-size:calc(23 * var(--rpx, .5px))}
#piano-app .profile-stats .h2{font-size:calc(36 * var(--rpx, .5px));margin-bottom:calc(4 * var(--rpx, .5px))}
#piano-app .sync-banner{display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));background:#10273a;border-radius:calc(20 * var(--rpx, .5px));width:100%;padding:calc(24 * var(--rpx, .5px));margin-top:calc(34 * var(--rpx, .5px));font-size:calc(25 * var(--rpx, .5px))}
#piano-app .sync-banner .small{font-size:calc(22 * var(--rpx, .5px));margin-top:calc(5 * var(--rpx, .5px))}
#piano-app .brand-footer{display:block;text-align:center;color:#92a7c0;font-size:calc(21 * var(--rpx, .5px));margin-top:calc(42 * var(--rpx, .5px))}
#piano-app .upload-zone{width:100%;min-height:calc(400 * var(--rpx, .5px));padding:calc(56 * var(--rpx, .5px)) calc(20 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;flex-direction:column;gap:calc(16 * var(--rpx, .5px));border:calc(2 * var(--rpx, .5px)) dashed #3eaed1;border-radius:calc(24 * var(--rpx, .5px));background:radial-gradient(ellipse at 50% 20%,#0f3342,#091927 70%);margin:calc(20 * var(--rpx, .5px)) 0 calc(36 * var(--rpx, .5px))}
#piano-app .folder-icon{width:calc(128 * var(--rpx, .5px));height:calc(128 * var(--rpx, .5px));display:flex;align-items:center;justify-content:center;margin-bottom:calc(12 * var(--rpx, .5px))}
#piano-app .folder-icon>img{width:calc(106 * var(--rpx, .5px));height:calc(106 * var(--rpx, .5px));filter:drop-shadow(0 0 calc(14 * var(--rpx, .5px)) #1edc8b66)}
#piano-app .upload-zone>.muted{font-size:calc(25 * var(--rpx, .5px))}
#piano-app .import-instructions{padding:calc(30 * var(--rpx, .5px));display:flex;flex-direction:column;gap:calc(20 * var(--rpx, .5px));font-size:calc(24 * var(--rpx, .5px));color:#b3c4db}
#piano-app .import-instructions .h3{color:#f3f7ff;margin-bottom:calc(4 * var(--rpx, .5px))}
#piano-app .toggle{width:calc(76 * var(--rpx, .5px));height:calc(42 * var(--rpx, .5px));border-radius:calc(30 * var(--rpx, .5px));background:#34465c;padding:calc(5 * var(--rpx, .5px));margin-left:auto;transition:background .2s}
#piano-app .toggle>div{width:calc(32 * var(--rpx, .5px));height:calc(32 * var(--rpx, .5px));border-radius:50%;background:#e5edf9;transition:transform .2s}
#piano-app .toggle.on{background:#13b982}
#piano-app .toggle.on>div{transform:translateX(calc(34 * var(--rpx, .5px)))}
#piano-app .help-intro{padding:calc(10 * var(--rpx, .5px)) 0 calc(30 * var(--rpx, .5px))}
#piano-app .help-intro>.muted{display:block;margin-top:calc(16 * var(--rpx, .5px))}
#piano-app .prose>span, #piano-app .help-section>span{display:block;line-height:1.9}
#piano-app .help-section{padding:calc(22 * var(--rpx, .5px)) 0;border-bottom:calc(1 * var(--rpx, .5px)) solid #233349;color:#bfcee3}
#piano-app .help-section>.h2{margin-bottom:calc(18 * var(--rpx, .5px));color:#f0f6ff}
#piano-app .help-section>span+span{margin-top:calc(16 * var(--rpx, .5px))}
#piano-app .feedback-input{height:calc(240 * var(--rpx, .5px));margin-bottom:calc(24 * var(--rpx, .5px));line-height:1.8}
#piano-app .legal>.h2{margin-top:calc(36 * var(--rpx, .5px));margin-bottom:calc(12 * var(--rpx, .5px))}
#piano-app .legal>span:not(.h1):not(.h2){color:#b5c5dc;font-size:calc(27 * var(--rpx, .5px))}
#piano-app .lesson-hero{width:100%;height:calc(320 * var(--rpx, .5px));border-radius:calc(24 * var(--rpx, .5px));object-fit:cover}
#piano-app .lesson-progress{display:flex;justify-content:space-between;margin:calc(24 * var(--rpx, .5px)) 0;font-size:calc(24 * var(--rpx, .5px))}
#piano-app .lesson-title{font-size:calc(38 * var(--rpx, .5px))}
#piano-app .lesson-body{padding:calc(32 * var(--rpx, .5px)) 0 calc(40 * var(--rpx, .5px));min-height:calc(260 * var(--rpx, .5px))}
#piano-app .lesson-body>span{display:block}
#piano-app .lesson-body>.h2{margin-bottom:calc(18 * var(--rpx, .5px))}
#piano-app .lesson-body>span:last-child{color:#c3d0e2;line-height:2}
#piano-app .lesson-tip{display:flex;align-items:center;gap:calc(20 * var(--rpx, .5px));background:#132c3f;padding:calc(22 * var(--rpx, .5px));border-radius:calc(18 * var(--rpx, .5px));font-size:calc(25 * var(--rpx, .5px));color:#bee4ec}
#piano-app .lesson-dots{display:flex;gap:calc(12 * var(--rpx, .5px));justify-content:center;margin:calc(40 * var(--rpx, .5px)) 0}
#piano-app .lesson-dots>div{width:calc(12 * var(--rpx, .5px));height:calc(12 * var(--rpx, .5px));border-radius:50%;background:#30465f}
#piano-app .lesson-dots>div.active{background:#4ee0e8;width:calc(32 * var(--rpx, .5px))}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
#piano-app .pulse{animation:pulse 1.3s ease-in-out infinite}
#piano-app .scan-line{position:absolute;top:50%;height:calc(2 * var(--rpx, .5px));left:0;right:0;background:#5ae8f3;box-shadow:0 0 calc(18 * var(--rpx, .5px)) #4fe0ff}
@media(prefers-reduced-motion:reduce){
#piano-app .pulse{animation:none}
#piano-app .toggle, #piano-app .toggle>div{transition:none}}
#piano-app .score-canvas{position:absolute;inset:0}

/* Physical touch targets and hardware insets stay in px on narrow screens. */
#piano-app{box-sizing:border-box;min-width:0}
#piano-app .btn,#piano-app .text-button,#piano-app .icon-btn,
#piano-app .chip,#piano-app .segmented>button,#piano-app .calendar-week>button{min-height:44px}
#piano-app .btn{font-size:15px}
#piano-app .icon-btn{min-width:44px}
#piano-app .nav-header .icon-btn{width:44px;height:44px}
#piano-app .consent-toggle{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center}
#piano-app .consent-copy{min-width:0;line-height:1.8;text-align:left}
#piano-app .consent-copy .link{display:inline-block}
#piano-app .greeting>div{flex:1;min-width:0}
#piano-app .greeting .h1,#piano-app .profile-heading .h1{overflow-wrap:anywhere}
#piano-app .song-main{text-align:left}
#piano-app .mode-icon,#piano-app .plus-circle,#piano-app .connected-check{flex-shrink:0}
#piano-app .menu-row>span:nth-child(2){min-width:0}
#piano-app .practice-bottom{gap:16px}
#piano-app .practice-bottom .text-button{padding:8px 0}

/* Short screens surrender decorative space before controls or readable span. */
#piano-app.compact-screen .login-brand{padding-top:4px}
#piano-app.compact-screen .wave-mark{height:32px;margin-bottom:8px}
#piano-app.compact-screen .wave-mark>div{transform:scaleY(.8)}
#piano-app.compact-screen .brand-title{font-size:22px}
#piano-app.compact-screen .login-art{flex-basis:120px;min-height:110px}
#piano-app.compact-screen .display-title{font-size:24px}
#piano-app.compact-screen .login-message>.muted{margin-top:8px}
#piano-app.compact-screen .login-actions{padding-top:16px}
#piano-app.compact-screen .login-actions>.btn{padding:10px 16px}
#piano-app.compact-screen .consent{margin-top:8px}
#piano-app.compact-screen .piano{height:84px}
#piano-app.compact-screen .practice-progress{margin-top:6px}
#piano-app.compact-screen .hand-legend{margin:6px 0;font-size:10px;gap:10px}
#piano-app.compact-screen .practice-controls{padding:6px 10px}
#piano-app.compact-screen .practice-controls>button{min-height:44px}
#piano-app.compact-screen .practice-controls .icon{width:18px;height:18px}

/* Landscape uses a side toolbar so the score and keys keep their full height.
   Use physical pixels here: rpx otherwise grows with the phone's long edge. */
#piano-app.practice-page.landscape-screen{min-height:0;padding-left:var(--safe-left, 0px);padding-right:var(--safe-right, 0px);font-size:14px}
#piano-app.landscape-screen .nav-header .icon{width:20px;height:20px}
#piano-app.landscape-screen .practice-workspace{flex-direction:row}
#piano-app.landscape-screen .practice-stage{min-width:0}
#piano-app.landscape-screen .practice-top{display:flex;flex-wrap:wrap;align-items:center;padding:0 8px 4px;column-gap:12px;row-gap:2px}
#piano-app.landscape-screen .practice-top .segmented{flex:0 0 100%;padding:0;border-width:1px;border-radius:8px}
#piano-app.landscape-screen .segmented>button{padding:0 4px;min-height:44px;font-size:12px;border-radius:6px}
#piano-app.landscape-screen .practice-progress{flex:1;min-width:90px;gap:8px;font-size:11px;margin-top:0}
#piano-app.landscape-screen .progress-track{height:3px;border-radius:2px}
#piano-app.landscape-screen .hand-legend{margin:0;font-size:10px;gap:8px;line-height:16px}
#piano-app.landscape-screen .hand-legend>.muted{margin-left:0}
#piano-app.landscape-screen .score-wrap{margin:0 4px;min-height:80px}
#piano-app.landscape-screen .paused-overlay{gap:4px;font-size:12px}
#piano-app.landscape-screen .play-orb{width:44px;height:44px;padding-left:3px;border-width:1px;font-size:20px}
#piano-app.landscape-screen .countdown{font-size:48px}
#piano-app.landscape-screen .piano-leds{gap:1px;padding:2px;background:#080d16;border-top-width:1px}
#piano-app.landscape-screen .piano-leds>div{height:3px;border-radius:2px}
#piano-app.landscape-screen .piano{height:72px;border-width:2px}
#piano-app.landscape-screen .piano-white{padding-bottom:4px;border-right-width:1px;border-radius:0 0 3px 3px}
#piano-app.landscape-screen .piano-white>span{font-size:10px}
#piano-app.landscape-screen .piano-black{border-width:1px;border-bottom-width:4px;border-radius:0 0 3px 3px}
#piano-app.landscape-screen .practice-feedback{font-size:11px;min-height:20px;padding:2px 6px;line-height:16px}
#piano-app.landscape-screen .practice-toolbar{width:112px;display:flex;flex-direction:column;justify-content:space-between;padding:0 4px 4px;border-left:1px solid #253b54}
#piano-app.landscape-screen .practice-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:0 0 4px}
#piano-app.landscape-screen .practice-controls>button{flex:0 0 calc(50% - 2px);height:44px;min-height:44px;gap:2px;font-size:11px}
#piano-app.landscape-screen .practice-controls .icon{width:18px;height:18px}
#piano-app.landscape-screen .practice-controls>.pause-circle{flex-basis:44px;margin:0 calc(50% - 22px)}
#piano-app.landscape-screen .practice-bottom{flex-direction:column;padding:0;gap:0}
#piano-app.landscape-screen .practice-bottom .text-button{width:100%;padding:4px 0;font-size:12px;min-height:44px}



:root{--background:oklch(.13 .025 250);--surface:oklch(.21 .037 254);--ink:oklch(.97 .01 258);--muted:oklch(.78 .04 255);--accent:oklch(.84 .12 184)}
*{box-sizing:border-box}
body{margin:0;background:#07101d;color:#f4f7ff;font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(ellipse at 70% 40%,#103247 0,transparent 48%),radial-gradient(ellipse at 5% 90%,#16213d,transparent 50%)}
button,input,textarea{font-family:inherit}
button{cursor:pointer;border:0}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #5ee7ef;outline-offset:3px}
button:hover:not(:disabled){filter:brightness(1.12)}
button:disabled{cursor:wait}
a{color:inherit;text-decoration:none}
.preview-sidebar{width:380px;margin:40px 64px 40px 20px;align-self:center}
.preview-brand{display:grid;grid-template-columns:32px 1fr;align-items:center;column-gap:12px;font-weight:650;font-size:22px}
.preview-brand img{width:32px;height:32px;grid-row:span 2}
.preview-brand>span{font-weight:500;color:#7c96b2;font-size:9px;letter-spacing:2px;margin-top:6px}
.preview-sidebar h1{font-size:42px;line-height:1.5;font-weight:600;letter-spacing:1px;margin:40px 0 16px}
.preview-sidebar>p{font-size:14px;color:#acbdd2;line-height:1.9;margin:0 0 28px}
.preview-sidebar nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.preview-sidebar nav a{font-size:13px;color:#a0b4cd;display:flex;align-items:center;gap:12px;min-height:38px;padding:7px 10px;border-radius:6px}
.preview-sidebar nav a>span{font-size:10px;color:#57728e;width:18px;font-variant-numeric:tabular-nums}
.preview-sidebar nav a.active{background:#163247;color:#73e5ee}
.preview-sidebar nav a:hover{background:#112638}
.preview-note{display:flex;align-items:center;gap:9px;margin-top:28px;font-size:12px;color:#adc2d8}
.preview-dot{width:6px;height:6px;border-radius:50%;background:#3cebb2}
.preview-hint{font-size:11px;line-height:1.9;color:#829bb7;margin-top:12px}
.preview-stage{margin:32px 0;display:flex;flex-direction:column;align-items:center}
.phone-shell{border-radius:34px;padding:8px;background:#213145;box-shadow:0 25px 65px #0006;position:relative}
.phone-screen{width:390px;height:844px;overflow-y:auto;overflow-x:hidden;border-radius:27px;position:relative;background:#050d17;scrollbar-width:none;transform:translateZ(0);font-size:14px;line-height:1.5;overflow:hidden}
.phone-screen::-webkit-scrollbar{display:none}
.preview-caption{font-size:9px;color:#708da8;letter-spacing:2px;margin-top:22px}
.preview-caption>span{margin:0 12px;color:#2ec9bf}
#toast{display:none;position:fixed;z-index:100;bottom:50px;left:50%;transform:translateX(-50%);max-width:90vw;min-width:180px;border-radius:12px;padding:14px 22px;background:#e4f3f8;color:#0e2836;text-align:center;font-size:14px;box-shadow:0 5px 20px #0005}
dialog{color:#eef5ff;background:#15273b;border:1px solid #3b5876;max-width:400px;width:calc(100% - 40px);border-radius:16px;padding:28px}
dialog::backdrop{background:#0009}
dialog h2{font-size:20px;margin:0 0 16px}
dialog p{font-size:14px;line-height:1.9;color:#bdcde0;white-space:pre-line}
dialog>div{display:flex;gap:12px;margin-top:24px}
dialog button{background:#223d57;color:white;border-radius:8px;flex:1;padding:12px;font-size:14px}
#dialog-confirm{background:#2bdd9e;color:#062c21}
@media(max-width:900px){
.preview-sidebar{width:295px;margin-right:30px}
.preview-sidebar h1{font-size:34px}}
/* A rotated phone can be wider than the desktop preview's normal breakpoint. */
@media(max-width:760px),(max-width:960px) and (max-height:540px) and (orientation:landscape){
body{display:block;background:#050d17}
.preview-sidebar{display:none}
.preview-stage{margin:0;display:block}
.phone-shell{background:transparent;box-shadow:none;border-radius:0;padding:0}
.phone-screen{width:100%;height:100dvh;border-radius:0;overflow:hidden}
.preview-caption{display:none}
#toast{bottom:90px}}

/* The preview uses native page sizing; only HTML element normalization lives here. */
#app{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
#app::-webkit-scrollbar{display:none}
.phone-screen img{object-fit:contain}
.phone-screen input,.phone-screen textarea{border:0;background:transparent;min-width:0}
.phone-screen input[type=range]{width:100%;accent-color:#58e3f4}
.phone-screen .category-scroll{overflow-x:auto;scrollbar-width:none}