:root{--bg: #f4f6f8;--surface: #ffffff;--surface-2: #e8eef5;--text: #12202f;--text-muted: #47617a;--border: #c7d4e2}:root[data-theme=dark]{--bg: #0d141d;--surface: #162230;--surface-2: #223448;--text: #e7f0fa;--text-muted: #9fb5cb;--border: #2d4257}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:radial-gradient(circle at top right,rgba(42,72,94,.1333333333),transparent 40%),var(--bg);color:var(--text)}.editor-page .preview-keys-panel{border:1px solid var(--border);border-radius:.6rem;margin:0 .35rem .55rem;background:color-mix(in oklab,var(--surface),#0b1626 8%);--wk: 44px}.editor-page .preview-keys-wrap{overflow-x:auto;border-top:1px solid color-mix(in oklab,var(--border),transparent 20%);border-radius:0 0 .55rem .55rem}.editor-page .piano-layout{position:relative;min-height:178px;margin:.5rem}.editor-page .white-key,.editor-page .black-key{position:absolute;border:1px solid #3e526c;border-radius:0 0 5px 5px;padding:0}.editor-page .white-key{bottom:0;width:var(--wk);height:170px;background:linear-gradient(180deg,#f8fbff,#d8e0ea 78%,#c5cfdb);color:#16253a}.editor-page .white-key span,.editor-page .black-key span{position:absolute;bottom:6px;left:0;right:0;font-size:.65rem;text-align:center;pointer-events:none}.editor-page .black-key{top:0;width:28px;height:104px;background:linear-gradient(180deg,#414852,#24292f 82%,#1a1f26);border-color:#20252e;color:#d8e4f2;z-index:2}.editor-page .white-key.active,.editor-page .black-key.active{color:#fff}.editor-page .white-key.active{background:linear-gradient(180deg,#6ec8ff,#2ea6f7 75%,#1f8ed7);border-color:#1f8ed7}.editor-page .black-key.active{background:linear-gradient(180deg,#76d0ff,#34a8f7 85%,#238bd4);border-color:#238bd4}