.gdianziqin-touchtip{background:var(--bg-soft);width:min(100%,620px);color:var(--text-2);text-align:center;border-radius:8px;margin:0 auto 10px;padding:6px 10px;font-size:13px}.gdianziqin-panel{background:linear-gradient(#3b342d,#2a2521);border:1px solid #3a332c;border-radius:14px;width:min(100%,760px);margin:0 auto 12px;padding:12px 12px 4px;box-shadow:0 6px 14px #2a25212e}.gdianziqin-row{justify-content:center;margin-bottom:10px}.gdianziqin-panel .g-btn,.gdianziqin-panel .g-select{font-size:14px}.gdianziqin-lcd{color:#1f2a12;text-align:center;font-variant-numeric:tabular-nums;background:#c9d6a3;border-radius:8px;width:min(100%,440px);margin:0 auto 12px;padding:8px 12px 10px;box-shadow:inset 0 2px 6px #00000047}.gdianziqin-lcd-top{opacity:.85;font-size:13px;font-weight:600}.gdianziqin-lcd-chord{letter-spacing:1px;font-size:max(30px,min(8vw,42px));font-weight:800;line-height:1.15}.gdianziqin-lcd-sub{opacity:.85;min-height:1.4em;font-size:12px}.gdianziqin-beats{justify-content:center;gap:8px;margin-top:6px;display:flex}.gdianziqin-beat{background:#1f2a122e;border:1px solid #1f2a1259;border-radius:50%;width:12px;height:12px}.gdianziqin-beat.is-on{background:#1f2a12}.gdianziqin-beat.is-first{background:#b3261e;border-color:#7d1a15}.gdianziqin-bpmrange{width:150px;accent-color:var(--brand);cursor:pointer}.gdianziqin-bpmtag{color:#f4efe6;font-variant-numeric:tabular-nums;justify-content:center;align-items:center;min-width:5.5em;font-size:14px;font-weight:700;display:inline-flex}.gdianziqin-step{min-width:44px}.gdianziqin-vol{color:#d8d0c4;align-items:center;gap:6px;font-size:13px;display:inline-flex}.gdianziqin-volrange{width:120px;accent-color:var(--brand);cursor:pointer}.gdianziqin-start.is-on{color:#fff;background:#b3261e;border-color:#7d1a15}.gdianziqin-cap{color:var(--text-3);text-align:center;margin:0 0 6px;font-size:12px}.gdianziqin-wheel{flex-wrap:wrap;justify-content:center;gap:6px;width:min(100%,760px);margin:0 auto 12px;display:flex}.gdianziqin-tone{border:1px solid var(--line);background:var(--bg-card);color:var(--text);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.gdianziqin-tone:hover{border-color:var(--brand)}.gdianziqin-tone-key{background:var(--bg-soft);width:20px;height:20px;color:var(--text-2);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:inline-flex}.gdianziqin-tone.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);font-weight:700}.gdianziqin-tone.is-on .gdianziqin-tone-key{background:var(--brand);color:var(--brand-ink)}.gdianziqin-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;width:100%;margin:0 auto 10px;padding:6px 0 10px;overflow:auto hidden}.gdianziqin-board{touch-action:pan-x;-webkit-user-select:none;user-select:none;background:#2a2521;border-radius:0 0 10px 10px;height:180px;margin:0 auto;position:relative;box-shadow:0 6px 14px #2a252138}.gdianziqin-key{box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-x;-webkit-user-select:none;user-select:none;justify-content:center;align-items:flex-end;display:flex;position:absolute;top:0}.gdianziqin-white{width:var(--gd-kw,36px);background:linear-gradient(#fffdf9,#f1ebe1);border:1px solid #b3a494;border-top:none;border-radius:0 0 6px 6px;height:100%;padding-bottom:8px}.gdianziqin-black{width:var(--gd-bw,22px);z-index:2;background:linear-gradient(#4a423a,#221d19);border:1px solid #16120f;border-top:none;border-radius:0 0 5px 5px;height:62%;padding-bottom:6px}.gdianziqin-white.is-acc{background:linear-gradient(#eef5dc,#dbe8bd);border-color:#9fb07a}.gdianziqin-kcap{text-align:center;white-space:nowrap;font-size:10px;font-weight:600;line-height:1.1}.gdianziqin-white .gdianziqin-kcap{color:#8a8378}.gdianziqin-black .gdianziqin-kcap{color:#d8d0c4;font-size:9px}.gdianziqin-white.is-down{background:linear-gradient(#ffe6a8,#f5c95c);border-color:#b38a2a}.gdianziqin-black.is-down{background:linear-gradient(#c9962e,#8a6414);border-color:#6b4d0f}.gdianziqin-white.is-acc.is-down{background:linear-gradient(#cfe39a,#a9c763);border-color:#6f8a3a}.gdianziqin-tip{color:#c62828;text-align:center;background:#fbe0e0;border-radius:8px;width:min(100%,560px);margin:0 auto 10px;padding:8px 10px;font-size:13px}.gdianziqin-shifttag{min-width:6em;color:var(--text-2);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:inline-flex}.gdianziqin-map{border:1px solid var(--line);background:var(--bg-soft);border-radius:10px;width:min(100%,720px);margin:4px auto 0;padding:8px 10px}.gdianziqin-maprow{flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin-bottom:5px;display:flex}.gdianziqin-mapcell{border:1px solid var(--line);background:var(--bg-card);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-width:40px;padding:3px 5px;display:inline-flex}.gdianziqin-mapcell.is-acc{background:#eef5dc;border-color:#9fb07a}.gdianziqin-mapcell.is-black{background:#3a332c;border-color:#241f1a}.gdianziqin-mapcap{color:var(--text);font-size:13px;font-weight:700}.gdianziqin-mapnote{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:11px}.gdianziqin-mapcell.is-black .gdianziqin-mapnote{color:#c3b9ab}@media (max-width:720px){.gdianziqin-panel{padding:10px 8px 2px}.gdianziqin-panel .g-btn,.gdianziqin-panel .g-select{padding:6px 9px;font-size:13px}.gdianziqin-row{gap:6px;margin-bottom:8px}.gdianziqin-bpmrange{width:110px}.gdianziqin-volrange{width:90px}.gdianziqin-step{min-width:38px}.gdianziqin-lcd{width:min(100%,340px)}.gdianziqin-tone{padding:5px 8px;font-size:12px}.gdianziqin-board{height:150px}.gdianziqin-white{padding-bottom:6px}.gdianziqin-mapcell{min-width:32px;padding:2px 3px}.gdianziqin-mapcap{font-size:12px}.gdianziqin-mapnote{font-size:10px}}.gdianziqin-panel{position:relative;box-shadow:inset 0 1px #ffffff1a,0 2px #1a1613,0 12px 24px -12px #2a252180}.gdianziqin-panel:before{content:"";background:linear-gradient(90deg, transparent, var(--brand), transparent);opacity:.75;border-radius:0 0 3px 3px;height:3px;position:absolute;top:0;left:22%;right:22%}.gdianziqin-lcd{background:linear-gradient(170deg,#d4e0ae 0%,#c9d6a3 45%,#bccb93 100%);box-shadow:inset 0 2px 6px #00000047,0 0 0 3px #1b1714,0 1px 0 3px #ffffff14}.gdianziqin-lcd-chord{text-shadow:1px 1px #1f2a121f}.gdianziqin-beat{box-shadow:inset 0 1px 1px #0000001f}.gdianziqin-beat.is-first{box-shadow:0 0 6px #b3261e8c}.gdianziqin-tone{border-color:var(--t-edge);background:var(--t-face);color:var(--t-ink);box-shadow:0 2px 0 var(--t-drop);font-weight:600;transition:transform 80ms,box-shadow 80ms,background-color .12s}.gdianziqin-tone:hover{background:var(--t-hover);border-color:#bea77f}.gdianziqin-tone:active{box-shadow:0 0 0 var(--t-drop);transform:translateY(2px)}.gdianziqin-tone.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);transform:translateY(1px);box-shadow:inset 0 2px #8a641429}.gdianziqin-tone-key{box-shadow:inset 0 -1px #00000014}.gdianziqin-board{box-shadow:0 2px #1a1613,0 12px 22px -10px #2a252173}.gdianziqin-board:before{content:"";z-index:3;pointer-events:none;background:linear-gradient(#9b3326,#6e2018);height:4px;position:absolute;top:0;left:0;right:0;box-shadow:0 1px 2px #00000059}.gdianziqin-key{transition:transform 60ms,box-shadow 60ms,background 60ms}.gdianziqin-white{background:linear-gradient(#f3ede2 0%,#fffefb 12%,#fcf8f0 78%,#f1e9dc 100%);box-shadow:inset 0 -5px #e2d7c4,inset 0 -6px #fffc,inset 1px 0 #ffffffb3,0 2px #cfc2ad}.gdianziqin-black{background:linear-gradient(#221d19 0%,#3e3630 55%,#2a241f 88%,#4a413a 100%);box-shadow:inset 1px 0 #ffffff1a,inset -1px 0 #ffffff0f,inset 0 -5px #0f0c0a,inset 0 -6px #ffffff24,0 3px 4px #0006}.gdianziqin-white.is-acc{background:linear-gradient(#e2ebc9 0%,#f1f7e1 12%,#e6efcc 78%,#d6e3b4 100%);box-shadow:inset 0 -5px #c3d39a,inset 0 -6px #ffffffb3,inset 1px 0 #fff9,0 2px #aebd8a}.gdianziqin-black.is-acc{box-shadow:inset 1px 0 #ffffff1a,inset -1px 0 #ffffff0f,inset 0 -5px #7f9a4a,inset 0 -6px #ffffff2e,0 3px 4px #0006}.gdianziqin-white.is-down{background:linear-gradient(#ecd28f 0%,#ffe6a8 14%,#f5c95c 100%);transform:translateY(1px);box-shadow:inset 0 -2px #c49a36,inset 0 5px 7px -3px #6e500a40,0 1px #cfc2ad}.gdianziqin-black.is-down{background:linear-gradient(#6e5010 0%,#c9962e 50%,#8a6414 100%);transform:translateY(1px);box-shadow:inset 0 -2px #5a400c,inset 0 4px 6px -3px #0006,0 1px 2px #00000059}.gdianziqin-white.is-acc.is-down{background:linear-gradient(#b9d07e 0%,#cfe39a 14%,#a9c763 100%);box-shadow:inset 0 -2px #7f9a4a,inset 0 5px 7px -3px #3c501440,0 1px #aebd8a}.gdianziqin-map{border:1.5px solid var(--t-well-edge);background:var(--t-well-bg);border-radius:14px}.gdianziqin-mapcell{border-color:var(--t-edge);background:var(--t-face);box-shadow:inset 0 1px 0 #ffffffb3, 0 2px 0 var(--t-drop)}.gdianziqin-mapcell.is-acc{background:#eef5dc;border-color:#9fb07a;box-shadow:inset 0 1px #ffffffb3,0 2px #c3d39a}.gdianziqin-mapcell.is-black{background:linear-gradient(#4a423a,#2f2924);border-color:#241f1a;box-shadow:inset 0 1px #ffffff24,0 2px #16120f}.gdianziqin-mapcell.is-black.is-acc{border-color:#7f9a4a;box-shadow:inset 0 -3px #7f9a4a,inset 0 1px #ffffff24,0 2px #16120f}.gdianziqin-mapcap{color:var(--t-ink)}.gdianziqin-mapcell.is-black .gdianziqin-mapcap{color:#f4efe6}.gdianziqin-touchtip{border:1.5px solid var(--t-well-edge);background:var(--t-well-bg);border-radius:12px}.gdianziqin-tip{border:1.5px solid #e59a8f;border-radius:12px}@media (prefers-reduced-motion:reduce){.gdianziqin-key,.gdianziqin-tone{transition:none}.gdianziqin-white.is-down,.gdianziqin-black.is-down,.gdianziqin-tone.is-on,.gdianziqin-tone:active{transform:none}}.gdianziqin-bpm{flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px;display:inline-flex}.gdianziqin-wrap+.gdianziqin-tip,.gdianziqin-wrap+.gdianziqin-cap{margin-top:2px}@media (max-width:720px){.gdianziqin-bpm{flex:100%}}@media (max-height:500px) and (orientation:landscape){.gdianziqin-touchtip{margin-bottom:6px;padding:4px 10px;font-size:12px}.gdianziqin-panel{margin-bottom:8px;padding:8px 10px 0}.gdianziqin-lcd{margin-bottom:8px;padding:4px 10px 6px}.gdianziqin-lcd-chord{font-size:26px;line-height:1.1}.gdianziqin-lcd-sub{font-size:11px}.gdianziqin-beats{margin-top:3px}.gdianziqin-row{margin-bottom:6px}.gdianziqin-board{height:160px}}