:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background:#050505}.app-shell{color:#111;-webkit-user-select:none;user-select:none;touch-action:none;background:#070706;font-family:Arial,Helvetica,sans-serif;position:fixed;inset:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:default}.menu-screen,.instrument-screen,.page{background:#050505;position:absolute;inset:0}.menu-screen{grid-template-rows:34vh 32vh 34vh;display:grid}.menu-top,.menu-gallery,.menu-title{background-repeat:no-repeat;background-size:100% 100%}.menu-gallery{position:relative}.menu-icons{left:max(16vh, env(safe-area-inset-left));right:max(2.5vw, env(safe-area-inset-right));justify-content:space-between;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.menu-icon{opacity:.7;background:0 0;width:min(10.4vw,15vh);height:min(7.8vw,11.5vh);padding:0;transition:opacity .12s,transform .12s}.menu-icon.selected{opacity:1;transform:scale(1.08)}.menu-icon:active{transform:scale(.96)}.menu-icon img{object-fit:contain;width:100%;height:100%;display:block}.menu-title{color:#111;white-space:nowrap;place-items:center;padding:0 24px;font-size:clamp(26px,9vh,54px);display:grid}.top-bar{background-size:100% 100%;grid-template-columns:1fr 3fr 1fr 1fr 1fr;height:clamp(88px,11vh,128px);display:grid;overflow:hidden}.bar-button{color:#111;opacity:.9;background:0 0;align-items:center;gap:8px;min-width:0;padding:0 1vw;display:flex;transform:translateY(-18%)}.bar-button:disabled{opacity:.45}.bar-button:active{filter:brightness(1.2)contrast(1.12);transform:translateY(-18%)scale(.96)}.bar-button img{object-fit:contain;flex:none;width:min(3.2vw,54px);height:min(7vh,76px)}.bar-button span{text-align:left;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:clamp(14px,2.6vh,22px);overflow:hidden}.progress-panel{background-size:100% 100%;position:relative;transform:translateY(-18%)}.progress-track{object-fit:fill;opacity:.75;width:84%;height:min(55%,22px);position:absolute;top:50%;left:8%;transform:translateY(-50%)}.progress-thumb{width:min(4vh,24px);height:min(4vh,24px);position:absolute;top:50%;transform:translate(-50%,-50%)}.board{background:#10100d;position:absolute;inset:clamp(88px,11vh,128px) 0 0;overflow:hidden}.guzheng-board{grid-template-columns:repeat(var(--columns,6), 1fr);grid-auto-rows:1fr;display:grid}.guzheng-board:has(.tile:nth-child(25):last-child){--columns:5}.percussion-board{grid-template-rows:1fr 1fr;display:grid}.percussion-top,.percussion-bottom{min-height:0;display:grid}.percussion-top{grid-template-columns:repeat(7,1fr)}.percussion-bottom{grid-template-columns:repeat(4,1fr)}.tile{filter:brightness(.9)contrast(.94);opacity:.76;background-repeat:no-repeat;background-size:100% 100%;min-width:0;min-height:0}.tile.active{filter:brightness(1.18)contrast(1.24);opacity:1;box-shadow:inset 0 0 0 max(3px,.45vh) #ffffffe0}.touch-layer{z-index:2;touch-action:none;position:absolute;inset:0}.page{grid-template-rows:clamp(48px,11vh,64px) 1fr;display:grid}.page-header{padding-left:max(16px, calc(env(safe-area-inset-left) + 10px), 16vh);padding-right:max(16px, calc(env(safe-area-inset-right) + 10px));background-size:100% 100%;align-items:center;gap:14px;display:flex}.page-header button,.header-actions button,.recording-actions button,.dialog-actions button,.sheet-head button{color:#111;background:#ebe2c6;border:1px solid #00000038;border-radius:6px;min-height:34px;padding:7px 13px}.page-header button:active,.header-actions button:active,.recording-actions button:active,.dialog-actions button:active,.sheet-head button:active{filter:brightness(.92)}.page-header h1{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:clamp(18px,4.4vh,24px);overflow:hidden}.page-trailing{margin-left:auto}.page-body{background-image:url(/assets/images/menubg.jpg);background-size:100% 100%;overflow:auto}.header-actions{gap:10px;display:flex}.recording-list{padding:16px max(18px, env(safe-area-inset-right)) 16px max(18px, calc(env(safe-area-inset-left) + 10vw))}.empty{color:#37332a;font-size:18px}.recording-row{border-bottom:1px solid #0000001f;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 0;display:grid}.recording-main{color:#111;text-align:left;background:0 0;gap:3px;min-width:0;padding:0;display:grid}.recording-main span{color:#514b3d;font-size:13px}.recording-actions{gap:8px;display:flex}.recording-actions .danger{background:#d7afa2}.settings-form{max-width:720px;padding:28px max(28px, calc(env(safe-area-inset-left) + 10vw));gap:18px;font-size:18px;display:grid}.settings-form label{grid-template-columns:180px minmax(220px,420px);align-items:center;gap:14px;display:grid}.settings-form input[type=text],.settings-form input:not([type]){background:#fff8e8;border:1px solid #0000003d;border-radius:6px;min-height:38px;padding:6px 10px}.toggle-row input{width:44px;height:26px}.info-layout{grid-template-columns:270px 1fr;min-height:100%;display:grid}.info-nav{background:#ffffff38;overflow:auto}.info-nav button{color:#111;text-align:left;background:0 0;align-items:center;gap:10px;width:100%;padding:7px 10px;display:flex}.info-nav button.selected{background:#ffffff59}.info-nav img{object-fit:contain;width:34px;height:34px}.info-nav span{line-height:1.15}.info-detail{color:#111;padding:24px;overflow:auto}.info-detail header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.info-detail header img{object-fit:contain;width:54px;height:54px}.info-detail h2{margin:0;font-size:24px}.info-detail p,.text-page{white-space:pre-wrap;max-width:980px;font-size:18px;line-height:1.48}.youtube-link img{object-fit:contain;width:82px;height:54px}.text-page{padding:28px max(28px, calc(env(safe-area-inset-left) + 10vw))}.modal-layer{z-index:5;background:#00000057;place-items:center;display:grid;position:fixed;inset:0}.dialog,.sheet{color:#111;background:#f1ead8;border:1px solid #0000002e;border-radius:8px;width:min(460px,100vw - 32px);max-height:min(620px,100vh - 32px);box-shadow:0 18px 60px #0000005c}.dialog{gap:14px;padding:22px;display:grid}.dialog h2,.sheet h2{margin:0;font-size:22px}.dialog input{border:1px solid #0000003d;border-radius:6px;min-height:38px;padding:7px 10px}.dialog-actions{justify-content:flex-end;gap:12px;display:flex}.dialog-actions .primary{background:#a9c4d2}.sheet{grid-template-rows:auto 1fr;display:grid;overflow:hidden}.sheet-head{border-bottom:1px solid #0000001f;justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.sheet-list{overflow:auto}.list-row{color:#111;text-align:left;background:0 0;border-bottom:1px solid #00000017;gap:3px;width:100%;padding:12px 18px;display:grid}.list-row span{color:#5d5647;font-size:13px}.toast{z-index:6;color:#111;text-align:center;pointer-events:none;background-image:url(/assets/images/toast_long.png);background-size:100% 100%;min-width:210px;padding:12px 22px;font-size:16px;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.toast-top{top:26px;bottom:auto}@media (orientation:portrait){.menu-icons{left:max(16px, env(safe-area-inset-left))}.menu-icon{width:10vw;height:8vw}.bar-button{justify-content:center;padding:0 4px}.bar-button img{width:7vw}.bar-button span{display:none}.page-header{padding-left:max(12px, env(safe-area-inset-left))}.info-layout{grid-template-columns:180px 1fr}.recording-row{grid-template-columns:1fr}}