@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-cyrillic-ext-400-normal-BQZuk6qB.woff2)format("woff2"),url(./inter-cyrillic-ext-400-normal-DQukG94-.woff)format("woff");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-cyrillic-400-normal-obahsSVq.woff2)format("woff2"),url(./inter-cyrillic-400-normal-HOLc17fK.woff)format("woff");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-greek-ext-400-normal-DGGRlc-M.woff2)format("woff2"),url(./inter-greek-ext-400-normal-KugGGMne.woff)format("woff");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-greek-400-normal-B4URO6DV.woff2)format("woff2"),url(./inter-greek-400-normal-q2sYcFCs.woff)format("woff");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-vietnamese-400-normal-DMkecbls.woff2)format("woff2"),url(./inter-vietnamese-400-normal-Bbgyi5SW.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-latin-ext-400-normal-C1nco2VV.woff2)format("woff2"),url(./inter-latin-ext-400-normal-77YHD8bZ.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(./inter-latin-400-normal-C38fXH4l.woff2)format("woff2"),url(./inter-latin-400-normal-CyCys3Eg.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-cyrillic-ext-500-normal-B0yAr1jD.woff2)format("woff2"),url(./inter-cyrillic-ext-500-normal-BmqWE9Dz.woff)format("woff");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-cyrillic-500-normal-BasfLYem.woff2)format("woff2"),url(./inter-cyrillic-500-normal-CxZf_p3X.woff)format("woff");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-greek-ext-500-normal-C4iEst2y.woff2)format("woff2"),url(./inter-greek-ext-500-normal-2j5mBUwD.woff)format("woff");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-greek-500-normal-BIZE56-Y.woff2)format("woff2"),url(./inter-greek-500-normal-Xzm54t5V.woff)format("woff");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-vietnamese-500-normal-DOriooB6.woff2)format("woff2"),url(./inter-vietnamese-500-normal-mJboJaSs.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-latin-ext-500-normal-CV4jyFjo.woff2)format("woff2"),url(./inter-latin-ext-500-normal-BxGbmqWO.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(./inter-latin-500-normal-Cerq10X2.woff2)format("woff2"),url(./inter-latin-500-normal-BL9OpVg8.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-cyrillic-ext-600-normal-Dfes3d0z.woff2)format("woff2"),url(./inter-cyrillic-ext-600-normal-Bcila6Z-.woff)format("woff");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-cyrillic-600-normal-CWCymEST.woff2)format("woff2"),url(./inter-cyrillic-600-normal-4D_pXhcN.woff)format("woff");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-greek-ext-600-normal-DRtmH8MT.woff2)format("woff2"),url(./inter-greek-ext-600-normal-B8X0CLgF.woff)format("woff");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-greek-600-normal-plRanbMR.woff2)format("woff2"),url(./inter-greek-600-normal-BZpKdvQh.woff)format("woff");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-vietnamese-600-normal-Cc8MFFhd.woff2)format("woff2"),url(./inter-vietnamese-600-normal-BuLX-rYi.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-latin-ext-600-normal-D2bJ5OIk.woff2)format("woff2"),url(./inter-latin-ext-600-normal-CIVaiw4L.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(./inter-latin-600-normal-LgqL8muc.woff2)format("woff2"),url(./inter-latin-600-normal-CiBQ2DWP.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-cyrillic-ext-700-normal-BjwYoWNd.woff2)format("woff2"),url(./inter-cyrillic-ext-700-normal-LO58E6JB.woff)format("woff");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-cyrillic-700-normal-CjBOestx.woff2)format("woff2"),url(./inter-cyrillic-700-normal-DrXBdSj3.woff)format("woff");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-greek-ext-700-normal-qfdV9bQt.woff2)format("woff2"),url(./inter-greek-ext-700-normal-BoQ6DsYi.woff)format("woff");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-greek-700-normal-C3JjAnD8.woff2)format("woff2"),url(./inter-greek-700-normal-BUv2fZ6O.woff)format("woff");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-vietnamese-700-normal-DlLaEgI2.woff2)format("woff2"),url(./inter-vietnamese-700-normal-BZaoP0fm.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-latin-ext-700-normal-Ca8adRJv.woff2)format("woff2"),url(./inter-latin-ext-700-normal-TidjK2hL.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(./inter-latin-700-normal-Yt3aPRUw.woff2)format("woff2"),url(./inter-latin-700-normal-BLAVimhd.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:500;src:url(./fraunces-vietnamese-500-normal-GOH_-EGq.woff2)format("woff2"),url(./fraunces-vietnamese-500-normal-B-KbxExq.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:500;src:url(./fraunces-latin-ext-500-normal-Z5DV8IzT.woff2)format("woff2"),url(./fraunces-latin-ext-500-normal-BMcFk1Xs.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:500;src:url(./fraunces-latin-500-normal-DnGCNyPD.woff2)format("woff2"),url(./fraunces-latin-500-normal-BTR4KCeb.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:600;src:url(./fraunces-vietnamese-600-normal-BjlAJixd.woff2)format("woff2"),url(./fraunces-vietnamese-600-normal-DlAl5EAR.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:600;src:url(./fraunces-latin-ext-600-normal-BtzmzP0X.woff2)format("woff2"),url(./fraunces-latin-ext-600-normal-B0Dy4lqi.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:600;src:url(./fraunces-latin-600-normal-BFCDtZfi.woff2)format("woff2"),url(./fraunces-latin-600-normal-DL5QCzvS.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:700;src:url(./fraunces-vietnamese-700-normal-DH94m5DZ.woff2)format("woff2"),url(./fraunces-vietnamese-700-normal-DxawQjq2.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:700;src:url(./fraunces-latin-ext-700-normal-CanUGppC.woff2)format("woff2"),url(./fraunces-latin-ext-700-normal-DuBstVeD.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:700;src:url(./fraunces-latin-700-normal-CEOla-zY.woff2)format("woff2"),url(./fraunces-latin-700-normal-DTjk5d1Q.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fraunces;font-style:italic;font-display:swap;font-weight:600;src:url(./fraunces-vietnamese-600-italic-DkyY-g7b.woff2)format("woff2"),url(./fraunces-vietnamese-600-italic-BV4E0YjK.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces;font-style:italic;font-display:swap;font-weight:600;src:url(./fraunces-latin-ext-600-italic-BwNYOmL7.woff2)format("woff2"),url(./fraunces-latin-ext-600-italic-CZUOs6oU.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces;font-style:italic;font-display:swap;font-weight:600;src:url(./fraunces-latin-600-italic-O70d2LGK.woff2)format("woff2"),url(./fraunces-latin-600-italic-BlP2rMdV.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.page.ch-page{--display:"Fraunces", system-ui, -apple-system, "Segoe UI", sans-serif;max-width:1600px}.page-head.ch-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title tabs""lede lede";align-items:end;column-gap:24px;margin-bottom:26px;display:grid}.ch-head h1{grid-area:title}.ch-head .lede{grid-area:lede;max-width:900px;margin-top:8px}.ch-head .ch-tabs{grid-area:tabs;margin:0}.ch-head .ch-tabs a{padding:9px 16px}.ch-stack{flex-direction:column;gap:30px;min-width:0;display:flex}.ch-cols{align-items:start;gap:26px;display:grid}.ch-col{flex-direction:column;gap:30px;min-width:0;display:flex}.ch-sticky{z-index:2;position:sticky;top:16px}aside.ch-sticky{align-self:start}.ch-note-cols{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch}.ch-key-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}.ch-dict-cols{grid-template-columns:minmax(330px,.62fr) minmax(0,1.6fr)}.ch-prog-cols{grid-template-columns:minmax(280px,.5fr) minmax(0,1.6fr)}.ch-section{flex-direction:column;gap:12px;min-width:0;display:flex}.ch-section>p,.ch-sub>p{margin:0}.ch-title{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.ch-title h2{font-size:1.45rem}.ch-sub{flex-direction:column;gap:10px;display:flex}.ch-label{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;font-weight:700;display:block}.ch-big{font-size:2.4rem}.ch-hint{margin:0}.ch-control{flex-direction:column;gap:8px;display:flex}.ch-textbtn{color:var(--link);cursor:pointer;background:0 0;border:0;align-self:flex-start;padding:0;font-weight:600}.ch-textbtn:hover{text-decoration:underline}.ch-explore{align-self:flex-start}.ch-seg button{align-items:center;gap:6px;display:inline-flex}.ch-intro{flex-direction:column;gap:16px;display:flex}.ch-intro .lede{margin:0;font-size:1rem}.ch-notepicker{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.ch-notepicker.wide,.ch-note-cols .ch-notepicker{grid-template-columns:repeat(12,minmax(0,1fr))}.ch-note{cursor:pointer;min-height:46px;-webkit-backdrop-filter:var(--glass-blur);transition:transform .3s var(--spring), box-shadow .25s, background .2s;border:1px solid #ffffff59;border-radius:14px;padding:0 2px;font-size:1.05rem;font-weight:700}.ch-note.white{color:var(--key-ink);background:linear-gradient(170deg,#ffffffeb,#ece4fac7);box-shadow:inset 0 1px #fff,0 8px 20px -12px #000000b3}.ch-note.black{color:#fff;background:linear-gradient(170deg,#242e78eb,#101542e6);border-color:#ffffff29;box-shadow:inset 0 1px #ffffff2e,0 8px 20px -12px #000c}.ch-note:hover{transform:translateY(-2px)}.ch-note:active{transform:scale(.95)}.ch-note.on{background:var(--vivid);color:#fff;border-color:#fff6;box-shadow:inset 0 1px #ffffff73,0 0 0 3px #f0569d40,0 10px 26px -6px #f0569dd9}.ch-chips{flex-wrap:wrap;gap:6px;display:flex}.ch-chip{cursor:pointer;background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink);-webkit-backdrop-filter:var(--glass-blur);transition:background .2s, transform .3s var(--spring), border-color .2s;border-radius:999px;align-items:center;padding:7px 13px;font-size:.88rem;font-weight:600;display:inline-flex}.ch-chip:hover{background:var(--glass-strong);border-color:#ffffff4d;text-decoration:none;transform:translateY(-1px)}.ch-chip:active{transform:scale(.95)}.ch-chip.on{background:var(--selection-sheen);color:#fff;border-color:#ffffff4d;box-shadow:0 6px 16px -6px #8f5cf2e6}a.ch-chip{font-weight:500}.ch-switch{color:var(--ink);cursor:pointer;background:0 0;border:0;align-self:flex-start;align-items:center;gap:10px;padding:0;font-size:.92rem;font-weight:600;display:inline-flex}.ch-switch-track{border:1px solid var(--glass-edge);background:#ffffff29;border-radius:999px;width:44px;height:26px;transition:background .25s;position:relative}.ch-switch-thumb{width:20px;height:20px;transition:transform .3s var(--spring);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 2px 6px #0006}.ch-switch.on .ch-switch-track{background:var(--selection)}.ch-switch.on .ch-switch-thumb{transform:translate(18px)}.ch-playstop{cursor:pointer;background:var(--selection-sheen);color:#fff;transition:transform .3s var(--spring), box-shadow .25s;border:1px solid #ffffff47;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #ffffff59,0 10px 24px -10px #8f5cf2f2}.ch-playstop:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff59,0 14px 30px -10px #8f5cf2,0 0 0 4px #8f5cf238}.ch-playstop:active{transform:scale(.95)}.ch-playstop.round{width:42px;height:42px;padding:0}.ch-playstop.big{padding:12px 26px;font-size:1.05rem}.ch-playstop.playing{background:var(--vivid);box-shadow:inset 0 1px #ffffff59,0 0 0 4px #f0569d40,0 10px 28px -8px #f0569de6}.ch-legend{color:var(--ink-soft);flex-wrap:wrap;gap:6px 16px;font-size:.8rem;display:flex}.ch-legend-item{align-items:center;gap:6px;display:inline-flex}.ch-legend-item strong{color:var(--ink)}.small-legend{gap:6px 12px;font-size:.75rem;font-weight:600}.ch-dot{border-radius:50%;flex:none;width:9px;height:9px}.ch-dot.glow{width:11px;height:11px;box-shadow:0 0 6px var(--rose)}.ch-swatch{border-radius:3px;flex:none;width:11px;height:11px}.mk{flex:none;width:100%;display:block;position:relative}.mk-keys{display:flex;position:absolute;bottom:0;left:0;right:0}.mk-w{background:#f1ecfb;border-radius:3px;flex:1;margin:0 .6px;transition:background .2s,box-shadow .2s}.mk-b{z-index:2;background:#1b2160;border-radius:2px;height:60%;transition:background .2s,box-shadow .2s;position:absolute;top:0}.mk-rub{width:100%;position:absolute;top:0;left:0;overflow:visible}.mk-rub path{fill:none;stroke:var(--bad);stroke-width:2px;stroke-linecap:round}.mk-rub-dot{background:var(--bad);border-radius:50%;width:5px;height:5px;margin-left:-2.5px;position:absolute}.ch-diatonic{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.ch-note-cols .ch-diatonic{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.ch-note-cols .ch-diatonic.sevenths{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ch-note-cols .ch-diatonic:not(.sevenths) .ch-dia{padding:15px 4px 10px}.ch-note-cols .ch-diatonic:not(.sevenths) .ch-dia:before{left:10px;right:10px}.ch-note-cols .ch-diatonic:not(.sevenths) .ch-dia-role{font-size:.68rem}.ch-diatonic.seven{grid-template-columns:repeat(7,minmax(0,1fr))}.ch-dia{cursor:pointer;min-width:0;color:var(--ink);background:linear-gradient(var(--fc-bg), var(--fc-bg)), var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, opacity .2s;border-radius:18px;flex-direction:column;align-items:center;gap:3px;padding:16px 8px 11px;display:flex;position:relative}.ch-dia:before{content:"";background:var(--fc);border-radius:4px;height:4px;position:absolute;top:6px;left:16px;right:16px}.ch-dia:hover{box-shadow:var(--lift-hi);transform:translateY(-3px)}.ch-dia:active{transform:scale(.96)}.ch-dia.on{box-shadow:inset 0 0 0 2px var(--fc), 0 12px 30px -10px var(--fc)}.ch-dia.nofit{opacity:.55}.ch-dia-roman{font:700 1.3rem/1.1 var(--display);color:var(--fc)}.ch-dia-name{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:1.05rem;font-weight:700;overflow:hidden}.ch-dia .mk{width:calc(100% - 8px);margin:2px 0}.ch-dia-role{white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:2px;font-size:.72rem;font-weight:600;overflow:hidden}.ch-dia.nofit .ch-dia-role{color:var(--ink-soft)}.ch-notelist{color:var(--ink-soft);flex-wrap:wrap;justify-content:center;gap:4px;font-size:.7rem;font-weight:500;display:inline-flex}.ch-notelist .hl{color:var(--rose);font-weight:800}.card.ch-picker-card{padding:20px}.ch-hero{flex-direction:column;gap:14px;display:flex}.ch-hero-top{align-items:center;gap:18px;display:flex}.ch-hero-top h2{font-size:1.65rem}.ch-hero-note,.cst-centre{cursor:pointer;color:#fff;font-family:var(--display);background:radial-gradient(circle at 35% 30%, #ffffff73, transparent 45%), var(--vivid);transition:transform .35s var(--spring), box-shadow .25s;border:1px solid #fff6;border-radius:50%;flex:none;place-items:center;font-weight:700;display:grid;box-shadow:inset 0 1px #ffffff80,0 0 0 5px #f0569d29,0 12px 30px -6px #f0569db3}.ch-hero-note{width:78px;height:78px;font-size:2.1rem}.ch-hero-note:hover{transform:scale(1.06)}.ch-hero-note:active{transform:scale(.94)}.ch-summary{margin:0}.ch-keypick{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.ch-keynote{margin:0}.card.ch-map{flex-direction:column;align-items:center;gap:10px;padding:14px;display:flex}.cst{width:100%;position:relative}.cst-lines{position:absolute;inset:0;overflow:visible}.cst-lines path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:cst-draw .8s var(--ease-out) forwards;transition:stroke-width .25s,stroke-opacity .25s}@keyframes cst-draw{to{stroke-dashoffset:0}}.cst-label{white-space:nowrap;pointer-events:none;letter-spacing:.06em;text-transform:uppercase;background:#120a35d9;border-radius:999px;padding:3px 7px;font-size:9.5px;font-weight:800;animation:.5s .45s both fade-in;position:absolute;translate:-50% -50%}.cst-centre{z-index:2;width:70px;height:70px;font-size:1.75rem;position:absolute;translate:-50% -50%}.cst-centre:hover{scale:1.06}.cst-centre:active{scale:.94}.cst-node{z-index:3;cursor:pointer;color:var(--ink);white-space:nowrap;background:var(--glass-strong);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);animation:cst-pop .5s var(--spring) both;transition:scale .3s var(--spring), background .2s, box-shadow .2s;border-radius:999px;justify-content:center;align-items:center;gap:5px;padding:0 6px;font-size:.95rem;font-weight:700;display:inline-flex;position:absolute;translate:-50% -50%}.cst-node i{border-radius:50%;flex:none;width:6px;height:6px}.cst-node:hover{border-color:#ffffff52;scale:1.08}.cst-node.on{color:#fff;background:var(--role-bg);box-shadow:0 0 18px -2px var(--role);border-color:#ffffff73;scale:1.1}@keyframes cst-pop{0%{opacity:0;scale:.4}}.ch-table-wrap{flex-direction:column;gap:10px;display:flex}.ch-triad-grid{grid-template-columns:88px repeat(3,minmax(0,1fr));align-items:stretch;gap:7px;display:grid}.ch-grid-head{text-align:center;color:var(--ink-soft);align-self:end;font-size:.8rem}.ch-grid-head strong{color:var(--ink)}.ch-grid-label{flex-direction:column;justify-content:center;line-height:1.25;display:flex}.ch-grid-label strong{font-size:.9rem}.ch-grid-label small{color:var(--ink-soft);font-size:.72rem}.ch-cell{cursor:pointer;min-width:0;min-height:78px;color:var(--ink);background:linear-gradient(var(--q-bg), var(--q-bg)), var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px 10px 10px 16px;display:flex;position:relative}.ch-cell:before{content:"";background:var(--q);border-radius:4px;width:4px;position:absolute;top:12px;bottom:12px;left:5px}.ch-cell:hover{transform:translateY(-2px)}.ch-cell.on{box-shadow:inset 0 0 0 2px var(--q), 0 10px 26px -10px var(--q)}.ch-cell-name{font-size:1.15rem;font-weight:600}.ch-cell .mk{width:calc(100% - 12px)}.ch-sevens{flex-direction:column;gap:14px;display:flex}.ch-sevens-row{flex-direction:column;gap:6px;display:flex}.ch-sevens-role{font-size:.8rem;font-weight:700}.ch-sevens-tiles{flex-wrap:wrap;gap:6px;display:flex}.ch-seventh{cursor:pointer;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);transition:transform .3s var(--spring), background .2s;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:7px 9px;display:flex}.ch-seventh b{font-size:.95rem}.ch-seventh .mk{width:64px}.ch-seventh:hover{background:var(--glass-strong);transform:translateY(-2px)}.ch-seventh.on{background:var(--selection-sheen);color:#fff;border-color:#ffffff4d;box-shadow:0 8px 20px -8px #8f5cf2e6}.card.fc{background:linear-gradient(150deg, #a77bff24, #a77bff0a), var(--glass);flex-direction:column;gap:12px;display:flex}.fc p{margin:0}.fc-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.fc-panel{cursor:pointer;text-align:left;color:var(--ink);border:1px solid var(--glass-edge);transition:transform .3s var(--spring), box-shadow .25s;border-radius:18px;flex-direction:column;gap:8px;padding:12px;display:flex}.fc-panel.ok{background:linear-gradient(#2fcf8a29, #2fcf8a29), var(--glass)}.fc-panel.bad{background:linear-gradient(#ff5c7729, #ff5c7729), var(--glass)}.fc-panel:hover{box-shadow:var(--lift-hi);transform:translateY(-2px)}.fc-panel:active{transform:scale(.97)}.fc-panel.ok.playing{box-shadow:0 0 0 2px var(--good), 0 0 26px -6px var(--good)}.fc-panel.bad.playing{box-shadow:0 0 0 2px var(--bad), 0 0 26px -6px var(--bad)}.fc-head{align-items:center;gap:6px;display:flex}.fc-ok{color:var(--good)}.fc-bad{color:var(--bad)}.fc-play{color:var(--ink-soft);margin-left:auto}.fc-title{font-size:.95rem}.fc-cap{color:var(--ink-soft);font-size:.78rem}.card.ch-viewer{animation:rise-in .45s var(--ease-out) both;background:linear-gradient(150deg, #ff6aae21, #ff6aae08), var(--glass);flex-direction:column;gap:12px;display:flex}.ch-viewer-head{align-items:baseline;gap:10px;display:flex}.ch-viewer-name{font:700 2rem/1.1 var(--display)}.ch-viewer-why,.ch-viewer-hint{margin:0}.ch-viewer-piano{margin-top:24px}.ch-viewer-piano .piano-keys{height:118px}.ch-viewer .sounds{margin:2px 0 0}.an{flex-direction:column;gap:10px;display:flex}.an-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.an-stack{flex-direction:column;display:flex}.an-row{background:linear-gradient(var(--role-bg), var(--role-bg)), var(--glass);border:1px solid var(--glass-edge);transition:transform .3s var(--spring), box-shadow .3s, background .3s;border-radius:22px;align-items:center;gap:8px;padding:5px 8px;display:flex}.an-row.on{box-shadow:0 0 22px -6px var(--role);transform:scale(1.02)}.an-note{text-align:left;min-width:0;color:var(--ink);cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:12px;padding:0;display:flex}.an-pill{color:#fff;width:52px;height:38px;font:700 1.2rem var(--display);background:color-mix(in srgb, var(--role) 78%, transparent);transition:background .2s, box-shadow .25s, transform .3s var(--spring);border-radius:999px;flex:none;place-items:center;display:grid}.an-note:hover .an-pill{transform:scale(1.06)}.an-row.on .an-pill,.an-row.picked .an-pill{background:var(--role)}.an-row.on .an-pill{box-shadow:0 0 14px var(--role)}.an-row.picked .an-pill{box-shadow:0 0 0 2.5px var(--rose), 0 0 12px #ff6aae99}.an-text{flex-direction:column;min-width:0;line-height:1.25;display:flex}.an-text strong{font-size:.95rem}.an-text small{color:var(--ink-soft);font-size:.78rem}.an-speaker{color:#c3b9e699;flex:none;margin-left:auto;transition:color .2s}.an-row.on .an-speaker{color:var(--role);animation:.6s ease-in-out infinite alternate an-pulse}@keyframes an-pulse{to{opacity:.4}}.an-link{color:var(--ink);background:#ffffff1a;border:1px solid #ffffff2e;border-radius:999px;flex:none;align-items:center;gap:3px;padding:6px 10px;font-size:.78rem;font-weight:600;transition:background .2s;display:inline-flex}.an-link:hover{background:#ffffff2e;text-decoration:none}.an-gap{align-items:center;gap:10px;height:26px;font-size:.76rem;display:flex}.an-bar{border-radius:3px;flex:none;width:3px;height:26px;margin-left:33px}.an-gap strong{color:var(--ink);font-weight:600}.an-gap span:last-child{color:var(--ink-soft)}.ch-wheel{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.ch-wheel>p{max-width:360px;margin:0}.cof{aspect-ratio:1;width:100%;max-width:560px;position:relative;container-type:inline-size}.cof-disc{background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift), 0 0 60px -20px #a77bff99;border-radius:50%;position:absolute}.cof-wedge{cursor:pointer;border:0;margin:0;padding:0;transition:background .3s,box-shadow .2s;position:absolute;inset:0}.cof-wedge:hover{box-shadow:inset 0 0 0 999px #ffffff24}.cof-wedge:focus-visible{outline:none;box-shadow:inset 0 0 0 999px #a679ff73}.cof-wedge.sel{box-shadow:inset 0 0 40px #ffffff40}.cof-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cof-lines circle,.cof-lines line{fill:none;stroke:#ffffff38;stroke-width:1.5px}.cof-text text{text-anchor:middle;dominant-baseline:central;font-family:var(--font);font-weight:600;transition:fill .2s}.cof-text .cof-roman{font-weight:700}.cof-rim{cursor:pointer;white-space:nowrap;transition:background .25s, scale .3s var(--spring);background:0 0;border:0;border-radius:2cqw;flex-direction:column;align-items:center;margin:0;padding:.6cqw 1.2cqw;line-height:1.18;display:flex;position:absolute;translate:-50% -50%}.cof-rim strong{color:var(--accent);font-size:2.7cqw;font-weight:800}.cof-rim span{color:var(--ink-soft);font-size:2.4cqw;font-weight:600}.cof-rim:hover{background:#ffffff17;scale:1.06}.cof-rim.on{background:var(--accent-bg)}.cof-rim.on strong{color:#fff}.cof-rim.on span{color:#ffffffeb}.cof-centre{cursor:pointer;color:var(--ink);border:1px solid var(--glass-edge);transition:background .2s, scale .3s var(--spring);background:#ffffff1a;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:.2cqw;display:flex;position:absolute}.cof-centre:hover{background:#ffffff2b;scale:1.04}.cof-centre:active{scale:.96}.cof-centre strong{font:700 6.5cqw/1 var(--display)}.cof-centre span{color:var(--ink-soft);font-size:2.6cqw;font-weight:500}.cof-centre svg{width:2.8cqw;height:2.8cqw;color:var(--ink-soft)}.ch-facts{flex-direction:column;gap:16px;display:flex}.ch-facts-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.ch-facts-head .eyebrow{margin-bottom:2px}.ch-fact{flex-direction:column;gap:6px;min-width:0;display:flex}.ch-fact-title{color:var(--ink-soft);font-size:.8rem;font-weight:600}.ch-fact-text{font-size:.95rem}.ch-fact-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.ch-keylink{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.kss{width:100%;max-width:280px;display:block;overflow:visible}.ch-key-cols .kss{max-width:340px}.kss line{stroke:#f5f0ff80;stroke-width:1px}.kss text{fill:var(--ink);text-anchor:middle;dominant-baseline:central}.kss-clef{font-family:Apple Symbols,Noto Music,Segoe UI Symbol,Bravura,serif}.kss-acc{font-family:var(--font);transform-box:fill-box;transform-origin:50%;animation:kss-pop .45s var(--spring) both;font-weight:500}@keyframes kss-pop{0%{opacity:0;transform:scale(.2)}}.kss-none rect{fill:#120a35cc}.kss-none text{fill:var(--ink-soft);font-size:11px;font-weight:600}.ssm{flex-direction:column;gap:10px;display:flex}.ssm-ruler{width:100%;max-width:520px;position:relative}.ch-key-cols .ssm-ruler{max-width:640px}.ssm-ruler svg{position:absolute;inset:0;overflow:visible}.ssm-tick{fill:#ffffff40}.ssm-ruler g path{fill:none;stroke-linecap:round;stroke-linejoin:round}.ssm-ruler g.whole path{stroke:#c3b9e699;stroke-width:1.2px}.ssm-ruler g.half path{stroke:var(--rose);stroke-width:2px}.ssm-ruler text{text-anchor:middle;dominant-baseline:central;fill:var(--ink-soft);font-size:10px;font-weight:800}.ssm-ruler g.half text{fill:var(--rose)}.ssm-note{cursor:pointer;color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:scale .25s var(--spring), background .2s;border-radius:50%;place-items:center;padding:0;font-weight:700;display:grid;position:absolute;translate:-50% -50%}.ssm-note.home{color:#fff;background:#ff6aae8c}.ssm-note:hover{scale:1.1}.ssm-note.on{background:var(--selection-sheen);color:#fff;scale:1.15;box-shadow:0 0 16px #8f5cf2e6}.ssm-foot{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.ssm-pattern{color:var(--ink-soft);font:600 .78rem ui-monospace,SF Mono,Menlo,monospace}.card.ch-keypiano{flex-direction:column;gap:4px;padding:16px 18px 18px;display:flex}.ch-shown{flex-wrap:wrap;align-items:center;gap:6px;min-height:34px;display:flex}.ch-shown strong{font-size:1.05rem}.ch-shown-more{margin-left:auto}.ch-piano-scroll{padding-top:30px;overflow-x:auto}.ch-piano-scroll>.piano{min-width:620px}.ch-piano-scroll.wide>.piano{min-width:820px}.ch-prog-cols .ch-piano-scroll.wide>.piano{min-width:640px}.callout.ch-callout{max-width:none;margin:4px 0 0}.ch-callout p{margin:0}.ch-callout .sounds{margin:12px 0 0}.ch-progs{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;display:grid}.card.ch-prog{flex-direction:column;gap:12px;padding:16px;transition:border-color .3s,box-shadow .3s;display:flex}.card.ch-prog.playing{box-shadow:var(--lift), 0 0 30px -10px #f0569db3;border-color:#f0569d99}.ch-prog-head{align-items:flex-start;gap:12px;display:flex}.ch-prog-title{flex-direction:column;flex:1;min-width:0;line-height:1.35;display:flex}.ch-prog-head .icon-btn{flex:none}.ch-prog-chords{flex-wrap:wrap;gap:6px;display:flex}.ch-pchord{cursor:pointer;min-width:52px;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);transition:transform .25s var(--spring), background .2s;border-radius:12px;flex-direction:column;align-items:center;padding:5px 9px;display:flex}.ch-pchord small{color:var(--ink-soft);font-size:.68rem;font-weight:600}.ch-pchord b{font-size:.92rem}.ch-pchord:hover{background:var(--glass-strong);transform:translateY(-1px)}.ch-pchord.on{background:var(--vivid);color:#fff;transform:scale(1.08);box-shadow:0 8px 20px -6px #f0569dd9}.ch-pchord.on small{color:#ffffffd9}.ch-dict-pickers{flex-direction:column;gap:20px;display:flex}.ch-typegroup{flex-direction:column;gap:6px;margin-top:4px;display:flex}.ch-dict-detail{flex-direction:column;gap:22px;min-width:0;display:flex}.ch-dict-top{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:26px;display:grid}.ch-dict-title{flex-direction:column;gap:4px;display:flex}.ch-dict-title .ch-big{font-size:3.2rem}.ch-dict-full{font-size:1.1rem}.ch-dict-title .sounds{margin:12px 0 10px}.ch-invs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.ch-inv{cursor:pointer;text-align:left;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:transform .3s var(--spring), background .2s;border-radius:16px;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;display:flex}.ch-inv:hover{background:var(--glass-strong);transform:translateY(-2px)}.ch-inv.on{background:linear-gradient(#8f5cf273, #8f5cf24d), var(--glass);border-color:#a679ffb3}.ch-inv-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-size:.66rem;font-weight:700}.ch-inv-name{font-size:1.25rem}.ch-inv-notes{color:var(--ink-soft);font-size:.78rem}.ch-inv .mk{margin-top:6px}.ch-proglist{flex-direction:column;gap:16px;min-width:0;display:flex}.ch-proglist-group{flex-direction:column;gap:8px;display:flex}.ch-proglist-items{gap:8px;padding:4px 2px 8px;display:flex;overflow-x:auto}.ch-proglist.wide .ch-proglist-items{flex-direction:column;padding:0;overflow:visible}.ch-progitem{cursor:pointer;text-align:left;color:var(--ink);white-space:nowrap;background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);transition:transform .3s var(--spring), background .2s;border-radius:16px;flex-direction:column;flex:none;gap:1px;padding:10px 14px;display:flex}.ch-progitem b{font-size:.92rem}.ch-progitem span{color:var(--ink-soft);font-size:.78rem}.ch-progitem:hover{background:var(--glass-strong);transform:translateY(-2px)}.ch-progitem.on{background:var(--selection-sheen);color:#fff;border-color:#ffffff4d;box-shadow:0 10px 24px -10px #8f5cf2f2}.ch-progitem.on span{color:#ffffffd9}.ch-proglist.wide .ch-progitem{white-space:normal}.ch-player{flex-direction:column;gap:20px;min-width:0;transition:border-color .3s,box-shadow .3s;display:flex}.card.ch-player.playing{box-shadow:var(--lift), 0 0 40px -14px #f0569db3;border-color:#f0569d8c}.ch-player-head{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.ch-player-head h2{margin-bottom:4px;font-size:1.85rem}.ch-bars{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.ch-bar{cursor:pointer;min-width:0;min-height:92px;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:transform .25s var(--spring), background .2s, box-shadow .2s;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:12px 8px 10px;display:flex;position:relative}.ch-bar:hover{background:var(--glass-strong);transform:translateY(-2px)}.ch-bar.on{color:#fff;background:radial-gradient(circle at 30% 20%, #ffffff4d, transparent 50%), var(--vivid);transform:scale(1.06);box-shadow:0 12px 30px -8px #f0569de6}.ch-bar-num{color:var(--ink-soft);opacity:.75;font-size:.6rem;font-weight:600;position:absolute;top:6px;left:9px}.ch-bar-name{white-space:nowrap;font-size:1.3rem}.ch-bar-roman{color:var(--ink-soft);font-size:.78rem;font-weight:600}.ch-bar.on .ch-bar-num,.ch-bar.on .ch-bar-roman{color:#ffffffd9}.ch-bar .mk{width:calc(100% - 16px);margin-top:4px}.ch-tension{flex-direction:column;gap:6px;display:flex}.ch-tension p{margin:0}.tc{width:100%;position:relative}.tc svg{position:absolute;inset:0;overflow:visible}.tc-guide{stroke:#ffffff1f;stroke-dasharray:3 4}.tc-level{dominant-baseline:central;font-size:10.5px;font-weight:600}.tc-base{fill:none;stroke:#ffffff26;stroke-width:3px;stroke-linecap:round}.tc-line{fill:none;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;transition:stroke-dashoffset .45s ease-in-out}.tc.playing .tc-line{filter:drop-shadow(0 0 6px #a77bff99)}.tc-dot{cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:30px;height:30px;padding:0;display:grid;position:absolute;translate:-50% -50%}.tc-dot span{background:var(--f);width:11px;height:11px;transition:width .3s var(--spring), height .3s var(--spring), box-shadow .3s;border:1px solid #ffffff80;border-radius:50%}.tc-dot:hover span{width:15px;height:15px}.tc-dot.on span{width:18px;height:18px;box-shadow:0 0 10px var(--f);border:2px solid #ffffffe6}.tc-num{color:var(--ink-soft);white-space:nowrap;pointer-events:none;font-size:10px;font-weight:600;position:absolute;translate:-50% -50%}.tc-num.on{color:var(--ink)}.ch-tempo{flex-direction:column;gap:8px;display:flex}.ch-tempo-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.ch-tempo-head>div{flex-direction:column;line-height:1.35;display:flex}.ch-tempo-bpm{font-weight:600}.ch-tempo input[type=range]{width:100%;accent-color:var(--selection)}.ch-about p{margin:0 0 8px}@media (width>=1700px){.ch-note-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.ch-progs{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=860px){.page-head.ch-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title""lede""tabs";margin-bottom:20px}.ch-head .lede{font-size:.98rem}.ch-head .ch-tabs{border-radius:22px;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin-top:16px;display:grid}.ch-head .ch-tabs a{border-radius:17px;flex-direction:column;justify-content:center;gap:3px;padding:8px 2px;font-size:.72rem}.ch-big{font-size:2rem}.ch-dict-title .ch-big{font-size:2.6rem}.ch-hero-top h2{font-size:1.35rem}.ch-hero-note{width:68px;height:68px;font-size:1.8rem}.ch-diatonic,.ch-diatonic.seven{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.ch-triad-grid{grid-template-columns:70px repeat(3,minmax(0,1fr));gap:6px}.ch-cell{padding-left:12px}.ch-cell-name{font-size:1rem}.ch-fact-pair,.ch-progs{grid-template-columns:minmax(0,1fr)}.ch-bars{gap:6px}.ch-bar{min-height:80px;padding:12px 4px 8px}.ch-bar-name{font-size:1.05rem}.ch-player-head h2{font-size:1.45rem}.ch-viewer-name{font-size:1.7rem}.an-link{padding:5px 8px;font-size:.72rem}}.home-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:22px;display:grid}.hero-photo{isolation:isolate;min-height:520px;animation:rise-in .7s var(--ease-out) both;border:1px solid #fff3;border-radius:30px;position:relative;overflow:hidden;box-shadow:0 30px 70px -28px #000000e6,0 0 60px -20px #b35ce680}.hero-photo img{object-fit:cover;z-index:-2;width:100%;height:100%;animation:22s ease-in-out infinite alternate hero-drift;position:absolute;inset:0}@keyframes hero-drift{to{transform:scale(1.1)translate(-1.5%,-1%)}}.hero-shade{z-index:-1;background:linear-gradient(#0c0a2a00 20%,#0c0a2a59 50%,#0c0a2aeb 100%);position:absolute;inset:0}.hero-photo{flex-direction:column;justify-content:flex-end;display:flex}.hero-copy{padding:34px;position:relative}.hero-copy .eyebrow{color:#ffb8dc}.hero-copy h1{letter-spacing:-.02em;color:#fff;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1.02}.hero-copy h1 em{padding-right:.06em;font-style:italic}.hero-copy p{color:#ffffffd9;max-width:560px;margin:14px 0 0;font-size:1.08rem}.hero-cta{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.home-right{flex-direction:column;gap:18px;min-width:0;display:flex}.hero-card{animation:rise-in .8s .1s var(--ease-out) both;border-radius:28px;flex-direction:column;flex:1;padding:20px 20px 22px;display:flex}.hero-card-head{color:var(--ink-soft);align-items:center;gap:8px;min-height:28px;font-size:.9rem;font-weight:600;display:flex}.hero-now{animation:pop .45s var(--spring);margin-left:auto}.live-dot{background:#f0569d;border-radius:50%;width:9px;height:9px;animation:1.8s ease-out infinite live}@keyframes live{0%{box-shadow:0 0 #f0569db3}70%{box-shadow:0 0 0 10px #f0569d00}to{box-shadow:0 0 #f0569d00}}.hero-card .hero-piano{margin-top:auto;padding-top:52px}.hero-piano .piano-keys{height:170px}.hero-chords{grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 auto;display:grid}.chord-pill{cursor:pointer;color:var(--ink);border:1px solid var(--line-2);transition:transform .3s var(--spring), box-shadow .2s, background .2s;background:#ffffff12;border-radius:16px;flex-direction:column;align-items:center;padding:10px 4px 9px;display:flex}.chord-pill strong{font:600 1.2rem var(--display);line-height:1.2}.chord-pill small{color:var(--ink-soft);font-size:.74rem;font-weight:600}.chord-pill:hover{background:#ffffff21;transform:translateY(-2px)}.chord-pill:active{transition-duration:80ms;transform:scale(.94)}.chord-pill.on{background:var(--vivid);color:#fff;border-color:#0000;box-shadow:0 10px 24px -8px #b35ce6e6,inset 0 1px #ffffff59}.chord-pill.on small{color:#ffffffd9}.stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat{color:var(--ink);text-align:left;border-radius:20px;align-items:center;gap:12px;padding:14px 16px;display:flex}.stat>span{flex-direction:column;line-height:1.2;display:flex}.stat strong{font:700 1.5rem var(--display)}.stat small{color:var(--ink-soft);font-size:.82rem}.pillars{grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0;display:grid}.pillar{--tint:#f0569d59;color:var(--ink);border-radius:26px;flex-direction:column;gap:6px;padding:24px;font-weight:400;display:flex;overflow:hidden}.pillar:before{content:"";background:radial-gradient(circle, var(--tint), transparent 65%);pointer-events:none;width:260px;height:260px;transition:transform .6s var(--ease-out);border-radius:50%;position:absolute;top:-130px;right:-110px}.pillar:hover:before{transform:scale(1.3)}.pillar>*{position:relative}.pillar.tint-rose{--tint:#f0569d66}.pillar.tint-peach{--tint:#ff8c8c61}.pillar.tint-violet{--tint:#7c4fe473}.pillar h2{margin-top:12px;font-size:1.5rem}.pillar p{color:var(--ink-soft);flex:1;margin:0;font-size:.96rem;line-height:1.5}.pillar-foot{color:var(--rose);align-items:center;gap:4px;margin-top:12px;font-size:.88rem;font-weight:600;display:inline-flex}.home-bottom{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:22px;display:grid}.note-finder{border-radius:26px}.note-finder h2{font-size:1.45rem}.note-finder p{margin:4px 0 16px}.note-buttons{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.note-btn{height:60px;font:700 1.1rem var(--display);color:var(--key-ink);transition:transform .3s var(--spring), box-shadow .2s, background .2s, color .2s;background:linear-gradient(#fff,#efe8fa);border:1px solid #fffc;border-radius:14px;place-items:center;display:grid;box-shadow:inset 0 -4px #ddd3ee,0 6px 14px -8px #0009}.note-btn.black{color:#fff;background:linear-gradient(#2c3884,#131a4d);border-color:#ffffff1f;box-shadow:inset 0 -4px #0a0f35,0 6px 14px -8px #000000b3}.note-btn:hover{background:var(--vivid);color:#fff;border-color:#0000;text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 24px -8px #b35ce6e6}.note-btn:active{transform:scale(.94)}.suggest h2{margin-bottom:14px;font-size:1.45rem}.suggest-list{gap:10px;display:grid}.suggest-row{color:var(--ink);border-radius:20px;align-items:center;gap:14px;padding:14px 16px;font-weight:400;display:flex}.suggest-text{flex-direction:column;flex:1;display:flex}.suggest-row .arrow{color:var(--selection-2);transition:transform .3s var(--spring)}.suggest-row:hover .arrow{transform:translate(4px)}@media (width<=1180px){.home-top{grid-template-columns:1fr}.hero-photo{min-height:460px}}@media (width<=860px){.hero-photo{border-radius:26px;min-height:420px}.hero-copy{padding:140px 22px 22px}.pillars,.home-bottom,.stats{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.stat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.hero-piano .piano-keys{height:140px}}.u1-namer,.u1-find,.u1-walker,.u1-ear,.u1-tune,.u1-degrees{--display:"Fraunces", system-ui, -apple-system, "Segoe UI", sans-serif;flex-direction:column;gap:12px;display:flex}.u1-piano{margin-top:0}.u1-row{flex-wrap:wrap;align-items:center;gap:10px 12px;display:flex}.u1-small-label{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-size:.72rem;font-weight:700}.u1-big{font:700 2.7rem/1 var(--display);color:var(--ink);letter-spacing:-.01em;animation:u1-pop .45s var(--spring) both;align-items:center;display:inline-flex}.u1-dim{color:var(--ink-faint);animation:none}.u1-good-text{color:var(--good);text-shadow:0 0 22px #2fcf8a8c}@keyframes u1-pop{0%{opacity:0;transform:scale(.6)}}.u1-msg{border:1px solid var(--line);min-height:3.1em;color:var(--ink);background:#ffffff0d;border-radius:14px;margin:0;padding:10px 14px;font-size:.95rem;line-height:1.45;transition:background .25s,border-color .25s}.u1-msg.good{background:#2fcf8a1f;border-color:#2fcf8a73}.u1-msg.bad{background:#ff5c771a;border-color:#ff5c7766}.u1-msg.hl{background:#ff6aae1f;border-color:#ff6aae80}.u1-actions{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.u1-actions:empty{display:none}.u1-strip{pointer-events:none;margin:0 9px -6px;position:relative}.u1-groups{height:24px}.u1-group{--g:#a77bff;border:2px solid var(--g);opacity:.55;height:9px;transition:opacity .3s, box-shadow .3s, transform .4s var(--spring);border-bottom:0;border-radius:7px 7px 0 0;position:absolute;bottom:2px}.u1-group-3{--g:#ff6aae}.u1-group i{min-width:18px;height:18px;font:700 .7rem/1 var(--font);color:#fff;background:var(--g);box-shadow:0 3px 10px -3px var(--g);border-radius:9px;place-items:center;padding:0 5px;font-style:normal;display:grid;position:absolute;top:-14px;left:50%;transform:translate(-50%)}.u1-group.on{opacity:1;box-shadow:0 -6px 16px -8px var(--g);transform:translateY(-2px)}.u1-group.on i{animation:u1-pop .45s var(--spring)}.u1-pin-strip{height:36px}.u1-pin{left:var(--x);transition:left .5s var(--spring);position:absolute;bottom:6px;transform:translate(-50%)}.u1-pin b{font:700 .9rem/1.1 var(--font);color:#fff;white-space:nowrap;background:var(--vivid);border-radius:999px;padding:4px 10px;display:block;box-shadow:0 6px 18px -6px #f0569de6,inset 0 1px #ffffff59}.u1-pin:after{content:"";z-index:-1;background:#c75bd8;border-radius:0 0 3px;width:10px;height:10px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}.u1-namecard{border:1px solid var(--line);background:#ffffff0d;border-radius:18px;align-items:center;min-height:132px;padding:14px 16px;display:grid}.u1-namecard.shown{background:linear-gradient(140deg,#f0569d24,#7c5cf01f);border-color:#ffffff29}.u1-namecard-empty{color:var(--ink-soft);align-items:center;gap:16px;display:flex}.u1-namecard-main{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.u1-namecard-text{color:var(--ink-soft);margin:0;font-size:.95rem}.u1-namecard-text strong{color:var(--ink)}.u1-two-names{grid-template-columns:auto auto auto;align-items:center;gap:4px 18px;display:grid}.u1-name-col{flex-direction:column;gap:4px;min-width:0;display:flex}.u1-or{color:var(--ink-faint);font-weight:600}.u1-name-why{color:var(--ink-soft);align-items:center;gap:4px;font-size:.8rem;font-weight:600;display:inline-flex}.u1-name-why svg{color:var(--rose)}.u1-name-why.u1-down svg{color:var(--violet);transform:rotate(180deg)}.u1-find-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.u1-find-target{align-items:baseline;gap:12px;display:inline-flex}.u1-find-word{font:600 1.15rem var(--display);color:var(--ink-soft)}.u1-dots{gap:6px;display:inline-flex}.u1-dots i{width:10px;height:10px;transition:background .3s, transform .3s var(--spring);background:#ffffff24;border-radius:50%}.u1-dots i.now{background:#a77bff99;transform:scale(1.15)}.u1-dots i.on{background:var(--good);box-shadow:0 0 10px #2fcf8ab3}.u1-walk-status{align-items:stretch;gap:10px;min-height:96px;display:flex}.u1-walk-now,.u1-walk-count{border:1px solid var(--line);background:#ffffff0d;border-radius:16px;flex-direction:column;justify-content:center;gap:4px;padding:10px 16px;display:flex}.u1-walk-now{flex:none;width:150px}.u1-walk-now .u1-big{height:2.5rem;font-size:2.3rem}.u1-alt{color:var(--ink-soft);white-space:nowrap;font-size:.8rem;font-weight:600}.u1-hide{visibility:hidden}.u1-walk-count{flex-direction:row;flex:1;align-items:center;gap:12px;min-width:200px}.u1-count-num{font:700 2.3rem/1 var(--display);text-align:center;background:var(--vivid);color:#0000;min-width:1.2em;animation:u1-pop .4s var(--spring);-webkit-background-clip:text;background-clip:text}.u1-count-text{color:var(--ink);flex-direction:column;font-size:.92rem;line-height:1.35;display:flex}.u1-step-btns{gap:8px;display:grid}.u1-step-btns.four{grid-template-columns:repeat(4,1fr)}.u1-step-btns.two{grid-template-columns:repeat(2,minmax(0,220px));justify-content:center}.u1-step-btn{white-space:nowrap;padding:11px 10px}.u1-step-btn.up svg{color:var(--rose)}.u1-step-btn.down svg{color:var(--violet)}.u1-walk-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.u1-path{flex-wrap:wrap;align-items:center;gap:5px;min-height:28px;display:flex}.u1-path-move{animation:u1-pop .35s var(--spring);align-items:center;gap:5px;display:inline-flex}.u1-path-note{font-size:.95rem;font-weight:700}.u1-path-more{color:var(--ink-faint)}.u1-path-step{color:#fff;background:#ff6aaebf;border-radius:6px;place-items:center;min-width:20px;height:20px;padding:0 5px;font-size:.7rem;font-weight:800;display:inline-grid}.u1-path-step.down{background:#a77bffbf}.u1-legend{color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 0;font-size:.8rem;display:flex}.u1-legend .u1-path-step{margin-left:4px}.u1-ear-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.u1-score{gap:6px;display:inline-flex}.u1-choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.u1-choice{justify-content:center;align-items:center;gap:6px;font-size:1.02rem;display:inline-flex}.u1-play{margin-left:auto}.u1-tune-notes{flex-direction:column;gap:6px;display:flex}.u1-tune-line{flex-wrap:wrap;gap:5px;display:flex}.u1-tune-note{text-align:center;border:1px solid var(--line);min-width:34px;color:var(--ink);transition:background .15s, transform .25s var(--spring), box-shadow .2s;animation:u1-pop .4s var(--spring) both;background:#ffffff0f;border-radius:10px;padding:5px 8px;font-size:.95rem;font-weight:700}.u1-tune-note.long{min-width:52px}.u1-tune-note.now{background:var(--vivid);color:#fff;border-color:#0000;transform:translateY(-3px)scale(1.08);box-shadow:0 8px 20px -8px #f0569de6}.u1-keyrow{align-items:flex-start}.u1-keyrow .u1-small-label{padding-top:10px}.u1-keychips{flex-wrap:wrap;flex:1;gap:6px;display:flex}.u1-keychip{cursor:pointer;border:1px solid var(--line);color:var(--ink-soft);transition:background .2s, color .2s, transform .3s var(--spring), box-shadow .25s;background:#ffffff0f;border-radius:14px;flex-direction:column;align-items:center;gap:1px;padding:6px 12px;display:inline-flex}.u1-keychip:hover{color:var(--ink);background:#ffffff1a}.u1-keychip:active{transform:scale(.95)}.u1-keychip.on{background:var(--selection-sheen);color:#fff;border-color:#0000;box-shadow:inset 0 1px #ffffff4d,0 6px 16px -6px #8f5cf2e6}.u1-keychip-name{white-space:nowrap;font-size:.88rem;font-weight:700}.u1-keychip-sub{opacity:.85;white-space:nowrap;font-size:.74rem;font-weight:600}.u1-playing{box-shadow:0 0 0 4px #f0569d4d,0 12px 30px -10px #f0569de6!important}.u1-degree-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.u1-degree{cursor:pointer;background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:var(--lift);transition:background .2s, transform .3s var(--spring), box-shadow .25s, border-color .2s;border-radius:16px;flex-direction:column;align-items:center;gap:1px;padding:9px 2px 8px;display:flex;position:relative}.u1-degree:hover{background:var(--glass-strong);transform:translateY(-2px)}.u1-degree:active{transition-duration:80ms;transform:scale(.94)}.u1-degree.home{border-color:#ff6aae8c}.u1-degree.on{background:var(--vivid);color:#fff;border-color:#0000;box-shadow:0 10px 26px -10px #f0569df2}.u1-degree-num{font:700 1.45rem/1.1 var(--display)}.u1-degree-sol{color:var(--ink-soft);font-size:.78rem;font-weight:700}.u1-degree-note{color:var(--ink-faint);animation:u1-pop .4s var(--spring);font-size:.72rem;font-weight:600}.u1-degree.on .u1-degree-sol,.u1-degree.on .u1-degree-note{color:#ffffffeb}.u1-feel{border:1px solid var(--line);background:#ffffff0d;border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 14px;min-height:64px;padding:10px 14px;font-size:.95rem;display:flex}.u1-feel.shown{background:linear-gradient(140deg,#f0569d21,#7c5cf01f)}.u1-feel-text{min-width:200px;animation:u1-fade .35s var(--ease-out);flex:1}@keyframes u1-fade{0%{opacity:0;transform:translateY(4px)}}@media (width<=860px){.u1-big{font-size:2.3rem}.u1-namecard{min-height:120px;padding:12px 14px}.u1-two-names{gap:4px 12px}.u1-name-why{align-items:flex-start;font-size:.74rem}.u1-name-why svg{flex:none;margin-top:1px}.u1-step-btns.four{grid-template-columns:1fr 1fr}.u1-step-btns.four .up.half{order:1}.u1-step-btns.four .up.whole{order:2}.u1-step-btns.four .down.half{order:3}.u1-step-btns.four .down.whole{order:4}.u1-step-btns.two{grid-template-columns:1fr 1fr}.u1-walk-now{width:118px;padding:10px 12px}.u1-walk-count{gap:10px;min-width:0;padding:10px 12px}.u1-count-text{font-size:.86rem}.u1-degree-grid{gap:4px}.u1-degree{border-radius:13px;padding:8px 0 7px}.u1-degree-num{font-size:1.2rem}.u1-degree-sol{font-size:.72rem}.u1-keyrow .u1-small-label{display:none}.u1-keychips{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:5px;display:grid}.u1-keychip{border-radius:12px;padding:5px 2px}.u1-keychip-name{font-size:.78rem;font-weight:600}.u1-keychip-name b{font-weight:800}.u1-keychip-sub{font-size:.7rem}.u1-tune-note{min-width:30px;padding:4px 6px;font-size:.88rem}.u1-tune-note.long{min-width:44px}}.u2{flex-direction:column;gap:16px;display:flex}.u2-label{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-size:.7rem;font-weight:700;display:block}.u2-field{flex-direction:column;gap:7px;min-width:0;display:flex}.u2-pickers{flex-wrap:wrap;align-items:flex-start;gap:14px 28px;display:flex}.u2-actions{flex-wrap:wrap;gap:8px;display:flex}.u2-fine{color:var(--ink-faint);font-size:.8rem;line-height:1.4;display:block}.u2-notes,.u2-ints{flex-wrap:wrap;gap:6px;display:flex}.u2-note,.u2-int{cursor:pointer;min-width:40px;height:36px;color:var(--key-ink);transition:transform .25s var(--spring), background .2s, box-shadow .2s;background:linear-gradient(#fdfbff,#e9e0f7);border:1px solid #ffffff80;border-radius:12px;padding:0 10px;font-size:.92rem;font-weight:700;box-shadow:inset 0 -3px #d6cae9,0 4px 12px -6px #0009}.u2-note.black{color:#fff;background:linear-gradient(#2a3683,#151d55);border-color:#ffffff29;box-shadow:inset 0 -3px #0a0f35,0 4px 12px -6px #0009}.u2-note:hover,.u2-int:hover{transform:translateY(-1px)}.u2-note:active,.u2-int:active{transform:scale(.94)}.u2-note.on,.u2-int.on{color:#fff;background:var(--selection-sheen);border-color:#ffffff59;box-shadow:inset 0 1px #ffffff59,0 8px 20px -8px #8f5cf2,0 0 0 3px #8f5cf240}.u2-int{color:var(--ink);border-color:var(--glass-edge);background:var(--glass);box-shadow:var(--lift);min-width:44px;font-size:.86rem}.u2-int.key3:not(.on){border-color:#ff6aae8c}.u2-seg{max-width:100%}.u2-kb{--kh:170px;width:100%;max-width:calc(var(--whites) * 72px);margin:0 auto}.u2-kb .u2-plate{padding:10px 8px 8px}.u2-kb .u2-plate .piano-keys{height:var(--kh)}.u2-arcs{height:46px;margin:0 9px 2px;position:relative}.u2-arcs svg{width:100%;height:44px;position:absolute;top:2px;left:0;overflow:visible}.u2-arc{fill:none;stroke-width:2.5px;stroke-linecap:round;opacity:.95;animation:u2-fade .45s var(--ease-out) both;filter:drop-shadow(0 0 4px)}.u2-arc.hop{stroke-width:2px;stroke-dasharray:3 4}.u2-arc-label{white-space:nowrap;color:#fff;background:color-mix(in srgb, var(--c) 45%, #1b1450);border:1px solid color-mix(in srgb, var(--c) 80%, #fff);box-shadow:0 4px 12px -4px color-mix(in srgb, var(--c) 80%, transparent);animation:u2-pop .45s var(--spring) both;border-radius:999px;padding:1px 8px;font-size:.72rem;font-weight:700;line-height:1.5;position:absolute;top:0;transform:translate(-50%)}.u2-arc-label.hop{text-align:center;background:var(--c);border-color:#ffffffd9;min-width:20px;padding:0 5px;top:14px}.u2-dots{pointer-events:none;z-index:4;position:absolute;inset:0}.u2-dot{top:calc(var(--kh) * .62 + 20px);width:0;height:0;transition:left .6s var(--spring), top .6s var(--spring);position:absolute}.u2-dot.on-black{top:calc(var(--kh) * .62 - 44px)}.u2-dot i{box-sizing:border-box;background:var(--c);color:#fff;min-width:24px;height:24px;font:700 .74rem/1 var(--font);box-shadow:0 0 0 2px #ffffffeb, 0 3px 10px color-mix(in srgb, var(--c) 70%, transparent);animation:u2-dot-in .45s var(--spring) var(--delay,0s) both;border-radius:999px;place-items:center;padding:0 5px;font-style:normal;transition:background .3s;display:grid;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.u2-dot.ghost{z-index:-1}.u2-dot.ghost i{border:2px dashed var(--c);box-shadow:none;background:0 0;animation-delay:.25s}@keyframes u2-dot-in{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}}@keyframes u2-pop{0%{opacity:0;transform:translate(-50%)scale(.4)}}@keyframes u2-fade{0%{opacity:0}}.u2-kb .key.white.u2-tint:not(.sounding){background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 30%, #fff) 0%, color-mix(in srgb, var(--tint) 16%, #fff) 62%, color-mix(in srgb, var(--tint) 34%, #fff) 100%)}.u2-kb .key.black.u2-tint:not(.sounding){background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 40%, #121848) 0%, color-mix(in srgb, var(--tint) 62%, #182064) 100%)}.u2-kb .key.white.u2-tint .key-name{color:var(--key-ink)}.u2-say{border:1px solid var(--line);animation:u2-rise .4s var(--ease-out) both;background:#ffffff0f;border-radius:16px;margin:0;padding:12px 15px;font-size:.98rem;line-height:1.55}.u2-say.yes{border-color:color-mix(in srgb, var(--good) 60%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent)}.u2-say.miss{border-color:color-mix(in srgb, var(--rose) 55%, transparent);background:color-mix(in srgb, var(--rose) 10%, transparent)}.u2-done{animation:u2-rise .5s var(--spring) both;background:linear-gradient(135deg,#f0569d38,#7c5cf038);border:1px solid #ffffff2e;border-radius:16px;margin:0;padding:12px 15px}.u2-feel{color:var(--ink-soft);align-items:baseline;gap:8px;margin:-6px 0 0;font-size:.92rem;display:flex}@keyframes u2-rise{0%{opacity:0;transform:translateY(6px)}}.u2-pattern{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:520px;margin:0;padding:0;list-style:none;display:grid}.u2-pattern li{border:1px solid var(--line);color:var(--ink-faint);background:#ffffff0a;border-radius:12px;flex-direction:column;align-items:center;padding:5px 0 4px;line-height:1.1;transition:all .3s;display:flex}.u2-pattern b{font-size:1rem}.u2-pattern small{opacity:.8;font-size:.66rem}.u2-pattern li.done{color:#fff;background:color-mix(in srgb, var(--whole) 55%, transparent);--whole:#a77bff;border-color:#0000}.u2-pattern li.half.done{background:#ff6aae99}.u2-pattern li.next{color:var(--ink);border-color:#ffffff8c;animation:1.6s ease-in-out infinite u2-breathe;box-shadow:0 0 0 3px #a77bff4d}@keyframes u2-breathe{50%{box-shadow:0 0 0 6px #a77bff1f}}.u2-letters{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.u2-letters li{border:1px dashed var(--line);color:var(--ink-faint);background:#ffffff0a;border-radius:12px;flex-direction:column;align-items:center;gap:1px;padding:6px 0;display:flex;position:relative}.u2-letters small{color:var(--ink-faint);font-size:.68rem;font-weight:700}.u2-letters b{font:600 1.1rem Fraunces,system-ui,-apple-system,Segoe UI,sans-serif}.u2-letters li.in{color:var(--ink);background:#ffffff14;border-style:solid}.u2-letters li.acc b{color:#ff9cc8}.u2-letters li.new{animation:u2-rise .5s var(--spring) .5s both;border-color:#ffffff73}.u2-letters li.low{background:#5aa9ff2e;border-color:#5aa9ff99}.u2-letters li.raised{background:#ff6aae29;border-color:#ff6aae99}.u2-letters em{text-transform:uppercase;letter-spacing:.06em;color:#9fd0ff;font-size:.62rem;font-style:normal;font-weight:700}.u2-letters li.raised em{color:#ffb0d3}.u2-counts{grid-template-columns:1fr 1fr;gap:12px;display:grid}.u2-count{border-radius:18px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.u2-count p{margin:0}.u2-walk{color:var(--ink-soft);font-size:.92rem}.u2-lchips{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.u2-lchips li{border:1px solid var(--glass-edge);background:#ffffff1a;border-radius:11px;flex-direction:column;align-items:center;min-width:38px;padding:4px 6px 3px;display:flex}.u2-lchips li b{font:600 1rem Fraunces,system-ui,-apple-system,Segoe UI,sans-serif}.u2-lchips li small{color:var(--rose);font-size:.66rem;font-weight:700}.u2-lchips li.run{animation:u2-letter .5s var(--spring) var(--delay) both}@keyframes u2-letter{0%{opacity:.2;transform:scale(.6)}60%{background:#ff6aae73}}.u2-result{animation:u2-rise .4s var(--ease-out) both;border-radius:18px;padding:14px 16px}.u2-result p{color:var(--ink-soft);margin:6px 0 0}.u2-result-name{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.u2-result-name strong{font:600 1.2rem Fraunces,system-ui,-apple-system,Segoe UI,sans-serif}.u2-badge{color:#fff;background:var(--vivid);border-radius:9px;place-items:center;min-width:34px;height:26px;padding:0 8px;font-size:.85rem;font-weight:800;display:inline-grid;box-shadow:0 4px 12px -4px #b35ce6cc}.u2-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.u2-card{text-align:left;cursor:pointer;color:var(--ink);background:linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, transparent), #ffffff0a);border:1px solid color-mix(in srgb, var(--c) 45%, transparent);box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, background .25s;border-radius:18px;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 12px 11px;display:flex;position:relative}.u2-card:hover{transform:translateY(-2px)}.u2-card:active{transform:scale(.97)}.u2-card.on{background:linear-gradient(160deg, color-mix(in srgb, var(--c) 48%, transparent), color-mix(in srgb, var(--c) 14%, transparent));box-shadow:0 0 0 2px var(--c), 0 14px 30px -12px var(--c)}.u2-card.right{box-shadow:0 0 0 3px var(--good), 0 14px 30px -12px var(--good)}.u2-card.wrong{box-shadow:0 0 0 3px var(--bad);opacity:.85}.u2-card-top{width:100%;color:var(--ink-soft);justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.u2-card strong{font:600 1.05rem Fraunces,system-ui,-apple-system,Segoe UI,sans-serif}.u2-card-notes{color:var(--ink-soft);font-size:.88rem}.u2-card-count{color:var(--ink-soft);font-size:.85rem}.u2-card-count b{color:var(--ink);font-size:1.15rem}@media (width<=860px){.u2-kb{--kh:150px}.u2-counts{grid-template-columns:1fr}.u2-letters{gap:4px}.u2-letters b{font-size:1rem}.u2-cards{gap:7px}.u2-card{border-radius:15px;padding:10px 9px}.u2-card strong{font-size:.92rem;line-height:1.15}.u2-card-notes,.u2-card-count{font-size:.78rem}.u2-pickers{gap:12px}.u2-note,.u2-int{min-width:38px;height:34px;padding:0 8px;font-size:.86rem}.u2-say{padding:11px 13px;font-size:.94rem}}.u3{flex-direction:column;gap:14px;display:flex}.u3-controls{flex-wrap:wrap;align-items:center;gap:12px 22px;display:flex}.u3-field{flex-wrap:wrap;align-items:center;gap:8px 10px;display:flex}.u3-label{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:.7rem;font-weight:700}.u3-chips{flex-wrap:wrap;gap:6px;display:flex}.u3-chip{cursor:pointer;border:1px solid var(--glass-edge);min-width:40px;height:38px;color:var(--ink);transition:background .2s, transform .3s var(--spring), box-shadow .25s, border-color .2s;background:#ffffff12;border-radius:12px;padding:0 11px;font-size:.95rem;font-weight:700;box-shadow:inset 0 1px #ffffff24}.u3-chip:hover{background:#ffffff24;transform:translateY(-1px)}.u3-chip:active{transition-duration:80ms;transform:scale(.94)}.u3-chip.on{background:var(--selection-sheen);color:#fff;border-color:#ffffff4d;box-shadow:inset 0 1px #ffffff59,0 8px 20px -8px #8f5cf2f2}.u3-chip small{opacity:.75;font-size:.68rem;font-weight:600;line-height:1.1;display:block}.u3-chip.tall{text-align:left;height:auto;padding:6px 12px;line-height:1.2}.u3-steps{grid-template-columns:repeat(var(--n,4), 1fr);gap:6px;display:grid}.u3-step{cursor:pointer;border:1px solid var(--line);color:var(--ink-soft);background:#ffffff0a;border-radius:12px;justify-content:center;align-items:center;gap:7px;padding:7px 6px;font-size:.85rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;display:flex}.u3-step:hover{color:var(--ink);background:#ffffff14}.u3-step .n{width:21px;height:21px;color:var(--ink);background:#ffffff1f;border-radius:50%;flex:none;place-items:center;font-size:.72rem;font-weight:800;display:grid}.u3-step.done .n{color:#fff;background:linear-gradient(145deg,#9ff0d8,#23a98f)}.u3-step.on{color:#fff;background:#8f5cf242;border-color:#a679ffb3;box-shadow:0 8px 20px -10px #8f5cf2e6}.u3-step.on .n{background:var(--vivid);color:#fff}.u3-step.u3-pos{flex-direction:column;gap:1px;padding:7px 4px;line-height:1.2}.u3-step.u3-pos b{font:700 1.15rem/1.15 var(--display);color:var(--ink)}.u3-step.u3-pos small{white-space:nowrap;font-size:.74rem;font-weight:600}.u3-say{border:1px solid var(--line);color:var(--ink);animation:rise-in .45s var(--ease-out) both;background:#ffffff0d;border-radius:16px;padding:12px 15px;font-size:1rem;line-height:1.6}.u3-say p{margin:0}.u3-say p+p{margin-top:6px}.u3-say .muted{color:var(--ink-soft)}.u3-note{color:var(--c);font-weight:800}.u3-count-word{white-space:nowrap}.u3-count-word .u3-num{background:var(--c);color:#fff;vertical-align:1px;border-radius:999px;place-items:center;min-width:18px;height:18px;margin-left:3px;padding:0 3px;font-size:.7rem;font-weight:800;display:inline-grid}.u3-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.u3-actions .grow{flex:1}.u3-actions .btn{padding:9px 16px}.u3-kb{touch-action:pan-y;padding-top:8px}.u3-kb .piano-keys{height:168px}.u3-rail{margin-bottom:6px;position:relative}.u3-key{gap:3px}.u3-kb .key .u3-name{font-weight:600}.u3-kb .key.white .u3-name{color:var(--key-ink-soft)}.u3-kb .key.white.u3-tone{background:linear-gradient(180deg, #f1ebfb 0%, color-mix(in srgb, var(--role) 20%, #fff) 38%, color-mix(in srgb, var(--role) 62%, #fff) 100%);box-shadow:inset 0 -6px 0 color-mix(in srgb, var(--role) 80%, #1d2150), 0 0 0 1px color-mix(in srgb, var(--role) 45%, transparent);z-index:1;animation:.7s ease-out u3-lit}.u3-kb .key.black.u3-tone{background:linear-gradient(180deg, color-mix(in srgb, var(--role) 50%, #121848) 0%, var(--role) 92%);box-shadow:inset 0 -5px 0 color-mix(in srgb, var(--role) 60%, #0a0f35), 0 3px 6px #00000080;z-index:3;animation:.7s ease-out u3-lit}.u3-kb .key.white.u3-tone .u3-name{color:var(--key-ink);font-weight:800}.u3-kb .key.black.u3-tone .u3-name{color:#fff;font-weight:800}.u3-kb .key.u3-tone.sounding{filter:brightness(1.12)saturate(1.2);box-shadow:0 0 28px var(--role), inset 0 -4px 0 color-mix(in srgb, var(--role) 70%, #1d2150)}@keyframes u3-lit{0%{filter:brightness(1.5)}}.u3-badge{background:var(--c);color:#fff;min-width:20px;height:20px;box-shadow:0 0 0 2px #ffffffd9, 0 4px 10px -3px var(--c);animation:u3-pop .42s var(--spring) both;border-radius:999px;place-items:center;margin-bottom:3px;padding:0 5px;font-size:.72rem;font-weight:800;line-height:1;display:grid}@keyframes u3-pop{0%{opacity:0;transform:scale(.2)}}.u3-ghost{border:2px dashed var(--c);pointer-events:none;background:color-mix(in srgb, var(--c) 10%, transparent);border-radius:2px 2px 7px 7px;animation:.5s both u3-fade;position:absolute;inset:3px 3px 5px}.key.black .u3-ghost{background:color-mix(in srgb, var(--c) 25%, transparent);border-radius:2px 2px 5px 5px;inset:2px}@keyframes u3-fade{0%{opacity:0}}.u3-span{pointer-events:none;height:12px;position:absolute}.u3-span-line{border:2px solid var(--c);transform-origin:0;height:11px;animation:u3-grow .5s var(--ease-out) both;animation-delay:inherit;filter:drop-shadow(0 0 4px color-mix(in srgb, var(--c) 60%, transparent));border-bottom:0;border-radius:7px 7px 0 0;position:absolute;bottom:0;left:0;right:0}.u3-span.dashed .u3-span-line{border-style:dashed}.u3-span-label{white-space:nowrap;color:#fff;background:color-mix(in srgb, var(--c) 34%, #1a1442);border:1px solid color-mix(in srgb, var(--c) 75%, transparent);animation:.4s .2s both u3-fade;animation-delay:inherit;border-radius:999px;padding:1px 8px;font-size:.74rem;font-weight:700;position:absolute;bottom:13px;left:50%;transform:translate(-50%)}.u3-span.align-start .u3-span-label{left:-4px;transform:none}.u3-span.align-end .u3-span-label{left:auto;right:-4px;transform:none}@keyframes u3-grow{0%{opacity:0;transform:scaleX(0)}}.u3-kb.narrow .piano-keys{height:150px}.u3-kb.narrow .key{padding-bottom:7px;font-size:.6rem}.u3-kb.narrow .key-caption{font-size:.55rem}.u3-kb.narrow .u3-badge{min-width:17px;height:17px;padding:0 3px;font-size:.64rem}.u3-kb.narrow .u3-span-label{padding:0 6px;font-size:.68rem}.u3-readout{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.u3-big{font:700 2rem/1 var(--display);letter-spacing:-.01em}.u3-tones{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.u3-tone-chip{background:color-mix(in srgb, var(--c) 18%, transparent);border:1px solid color-mix(in srgb, var(--c) 55%, transparent);border-radius:999px;align-items:center;gap:6px;padding:4px 10px 4px 5px;font-weight:700;display:inline-flex}.u3-tone-chip i{background:var(--c);color:#fff;border-radius:999px;place-items:center;min-width:22px;height:22px;padding:0 4px;font-size:.8rem;font-style:normal;display:grid}.u3-tone-chip small{color:var(--ink-soft);font-size:.72rem;font-weight:600}.u3-gap{color:var(--ink-faint);font-size:.85rem;font-weight:700}.u3-sum{border:1px solid var(--line);background:#ffffff12;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:.9rem;font-weight:700;display:inline-flex}.u3-answers{grid-template-columns:1fr 1fr;gap:10px;display:grid}.u3-answers .choice{padding:14px;font-size:1.05rem}.u3-answers .choice small{opacity:.8;margin-top:2px;font-size:.75rem;font-weight:500;display:block}.u3-score{color:var(--ink-soft);align-items:center;gap:8px;font-size:.9rem;font-weight:700;display:inline-flex}.u3-dots{gap:4px;display:inline-flex}.u3-dots i{background:var(--bad);border-radius:50%;width:8px;height:8px}.u3-dots i.ok{background:var(--good)}.u3-hidden{position:relative}.u3-hidden .u3-kb{opacity:.55;filter:saturate(.6)}.u3-hidden-tag{z-index:6;white-space:nowrap;color:#fff;border:1px solid var(--glass-edge);box-shadow:var(--lift);background:#1a1442db;border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:700;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.u3-verdict{font-weight:800}.u3-verdict.good{color:var(--good)}.u3-verdict.bad{color:var(--bad)}.u3-timeline{grid-template-columns:repeat(var(--n,4), 1fr);gap:6px;display:grid}.u3-tile{cursor:pointer;border:1px solid var(--line);color:var(--ink);transition:background .2s, border-color .2s, transform .3s var(--spring), box-shadow .25s;background:#ffffff0d;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 8px;display:flex;position:relative}.u3-tile:hover{background:#ffffff1a}.u3-tile strong{font:700 1.25rem/1.1 var(--display)}.u3-tile small{color:var(--ink-soft);font-size:.72rem;font-weight:600}.u3-tile.on{background:#8f5cf247;border-color:#a679ffcc;transform:translateY(-2px);box-shadow:0 10px 24px -12px #8f5cf2}.u3-meter{flex-direction:column;gap:8px;display:flex}.u3-meter-row{color:var(--ink-soft);grid-template-columns:minmax(0,150px) 1fr auto;align-items:center;gap:10px;font-size:.88rem;font-weight:600;display:grid}.u3-meter-row.on{color:var(--ink)}.u3-bar{background:#ffffff14;border-radius:999px;height:10px;overflow:hidden}.u3-bar i{border-radius:inherit;height:100%;transition:width .6s var(--ease-out);background:linear-gradient(90deg,#8f9cff,#3443b8);display:block}.u3-meter-row.on .u3-bar i{background:var(--vivid)}@media (width<=860px){.u3-say{padding:11px 12px;font-size:.95rem}.u3-chip{min-width:36px;height:36px;padding:0 9px}.u3-step{gap:5px;padding:6px 4px;font-size:.78rem}.u3-step .n{width:19px;height:19px}.u3-big{font-size:1.7rem}.u3-meter-row{grid-template-columns:minmax(0,110px) 1fr auto;font-size:.8rem}}.u4a-stacker,.u4a-numerals,.u4a-tension,.u4a-lead,.u4a-notechords,.u4a-tune{flex-direction:column;gap:14px;min-width:0;display:flex}.u4a-label{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:700}.u4a-keys{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.u4a-keys .seg button{padding:6px 13px}.u4a-msg{min-height:3.2em;margin:0;font-size:.98rem;line-height:1.55}.u4a-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.u4a-piano .piano-keys{height:132px}.u4a-piano-short .piano-keys{height:112px}.u4a-chip{cursor:pointer;transition:background .2s, transform .25s var(--spring);padding:5px 12px;font-size:.82rem}.u4a-chip:hover{background:#ffffff29;transform:translateY(-1px)}@keyframes u4a-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes u4a-swap{0%{opacity:0;transform:translateY(6px)}}@keyframes u4a-pulse{50%{opacity:.55}}@keyframes u4a-dash{to{stroke-dashoffset:-20px}}.u4a-st-tile,.u4a-nk-tile,.u4a-tn-tile,.u4a-tu-chordbtn{cursor:pointer;min-width:0;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, background .25s, border-color .2s;border-radius:15px;flex-direction:column;align-items:center;gap:2px;padding:14px 2px 9px;display:flex;position:relative}.u4a-st-tile:before,.u4a-nk-tile:before,.u4a-tn-tile:before,.u4a-tu-chordbtn:before{content:"";background:var(--stripe,#fff3);border-radius:4px;height:4px;transition:background .3s;position:absolute;top:6px;left:22%;right:22%}.u4a-st-tile:hover,.u4a-nk-tile:hover,.u4a-tn-tile:hover,.u4a-tu-chordbtn:hover{transform:translateY(-2px)}.u4a-st-tile:active,.u4a-nk-tile:active,.u4a-tn-tile:active,.u4a-tu-chordbtn:active{transform:scale(.95)}.u4a-st-main{grid-template-columns:minmax(0,1fr) minmax(170px,.7fr);gap:12px;display:grid}.u4a-st-stack{border:1px solid var(--line);background:#ffffff0d;border-radius:18px;flex-direction:column;padding:12px 14px;display:flex}.u4a-st-note{align-items:center;gap:10px;height:38px;display:flex}.u4a-st-pill{color:#fff;border:1.5px dashed #ffffff38;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;font-size:1rem;font-weight:800;transition:background .3s,border-color .3s,box-shadow .3s;display:grid}.u4a-st-note.r0{--rc:#8f5cf2}.u4a-st-note.r1{--rc:#5aa9ff}.u4a-st-note.r2{--rc:#3fd0b5}.u4a-st-note.on .u4a-st-pill{background:var(--rc);box-shadow:0 0 16px -2px var(--rc);animation:u4a-pop .45s var(--spring) both;border:1.5px solid #ffffffb3}.u4a-st-role{color:var(--ink-faint);font-size:.82rem;font-weight:700;transition:color .3s}.u4a-st-note.on .u4a-st-role{color:var(--rc)}.u4a-st-gap{align-items:center;gap:16px;height:44px;padding-left:17.5px;display:flex}.u4a-st-bar{background:#ffffff1f;border-radius:3px;flex:none;width:3px;height:100%;transition:background .3s}.u4a-st-gap.on .u4a-st-bar{background:linear-gradient(#ffffffbf,#ffffff59)}.u4a-st-gap.counting .u4a-st-bar{background:var(--rose);animation:.5s ease-in-out infinite u4a-pulse}.u4a-st-gaptext{color:var(--ink-soft);flex-direction:column;font-size:.86rem;line-height:1.3;display:flex}.u4a-st-gaptext strong{color:var(--ink)}.u4a-st-gap.on .u4a-st-gaptext{animation:u4a-swap .35s var(--ease-out) both}.u4a-st-gap.counting strong{color:var(--rose)}.u4a-st-gaptext small{color:var(--ink-soft);font-size:.8rem}.u4a-st-result{text-align:center;border:1px solid var(--line);background:#ffffff0d;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:12px 8px;transition:background .35s,border-color .35s,box-shadow .35s;display:flex}.u4a-st-result.on{background:color-mix(in srgb, var(--qc) 18%, transparent);border-color:var(--qc);box-shadow:0 14px 34px -16px var(--qc)}.u4a-st-roman{font:700 2.5rem/1 var(--display);color:var(--qc)}.u4a-st-result.on .u4a-st-roman{animation:u4a-pop .5s var(--spring) both}.u4a-st-name{font-size:1.3rem;font-weight:800}.u4a-st-q{color:var(--ink-soft);font-size:.86rem;font-weight:700}.u4a-st-result.on .u4a-st-q{color:var(--qc)}.u4a-st-sum{background:#ffffff1f;border-radius:999px;margin-top:2px;padding:2px 10px;font-size:.8rem;font-weight:700}.u4a-st-replay{margin-top:8px}.u4a-st-tiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.u4a-st-tile.done{--stripe:var(--qc)}.u4a-st-tile.active{box-shadow:inset 0 0 0 2px var(--selection-2), 0 12px 26px -12px var(--selection)}.u4a-st-tile.lit{background:color-mix(in srgb, var(--qc) 35%, transparent);transform:translateY(-3px)}.u4a-st-deg{color:var(--ink-soft);white-space:nowrap;font-size:.7rem;font-weight:700}.u4a-st-num{font:700 1.3rem/1.15 var(--display);color:var(--ink-faint)}.u4a-st-tile.done .u4a-st-num{color:var(--qc);animation:u4a-pop .45s var(--spring) both}.u4a-st-cname{white-space:nowrap;font-size:.82rem;font-weight:700}.u4a-st-tile:not(.done) .u4a-st-cname{color:var(--ink-faint);font-weight:600}.u4a-pattern{animation:u4a-swap .4s var(--ease-out) both;font-size:.84rem;font-weight:700}.u4a-nk-tiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.u4a-nk-tile{--stripe:var(--qc)}.u4a-nk-tile.lit{background:color-mix(in srgb, var(--qc) 38%, transparent);box-shadow:0 14px 30px -12px var(--qc);transform:translateY(-3px)}.u4a-nk-num{font:700 1.35rem/1.15 var(--display);color:var(--qc)}.u4a-nk-name{white-space:nowrap;animation:u4a-swap .4s var(--ease-out) both;font-size:1rem;font-weight:800}.u4a-nk-notes{color:var(--ink-soft);white-space:nowrap;animation:u4a-swap .5s var(--ease-out) both;font-size:.68rem}.u4a-nk-progs{flex-direction:column;gap:8px;display:flex}.u4a-nk-prog{border:1px solid var(--line);background:#ffffff0d;border-radius:18px;align-items:center;gap:12px;padding:8px 14px 8px 8px;transition:border-color .25s,background .25s;display:flex}.u4a-nk-prog.on{background:#8f5cf21f;border-color:#a679ff99}.u4a-nk-seq{flex-direction:column;min-width:0;display:flex}.u4a-nk-seq-nums{font:700 1.1rem var(--display);flex-wrap:wrap;gap:10px;display:flex}.u4a-nk-seq-nums b{transition:color .2s, transform .3s var(--spring)}.u4a-nk-seq-nums b.on{color:var(--rose);transform:scale(1.18)}.u4a-nk-seq-names{color:var(--ink-soft);font-size:.86rem}.u4a-meter-bar{border:1px solid var(--line);background:#ffffff0f;border-radius:999px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;display:grid;position:relative}.u4a-meter-zone{z-index:1;text-align:center;letter-spacing:.04em;color:var(--fc);background:color-mix(in srgb, var(--fc) 12%, transparent);border-radius:999px;padding:7px 0;font-size:.82rem;font-weight:800;transition:color .3s;position:relative}.u4a-meter-zone.on{color:#fff}.u4a-meter-puck{z-index:0;background:var(--fc);width:calc(33.3333% - 5.33333px);box-shadow:0 0 22px var(--fc);transition:left .55s var(--spring), background .3s, box-shadow .3s;border-radius:999px;position:absolute;top:4px;bottom:4px;transform:translate(-50%)}.u4a-meter-now{min-height:1.5em;margin:8px 2px 0;font-size:.9rem}.u4a-tn-tiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.u4a-tn-tile{--stripe:var(--fc)}.u4a-tn-tile.on{background:color-mix(in srgb, var(--fc) 28%, transparent);border-color:color-mix(in srgb, var(--fc) 60%, transparent)}.u4a-tn-num{font:700 1.3rem/1.15 var(--display);color:var(--fc)}.u4a-tn-name{font-size:.95rem;font-weight:800}.u4a-tn-fam{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-size:.64rem;font-weight:700}.u4a-tn-phrase{border:1px solid var(--line);background:#ffffff0d;border-radius:18px;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.u4a-tn-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.u4a-tn-actions{align-items:center;gap:8px;display:flex}.u4a-tn-empty{text-align:center;height:150px;color:var(--ink-faint);border:1px dashed var(--line-2);border-radius:14px;place-items:center;padding:0 20px;font-size:.9rem;display:grid}.u4a-lt-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.u4a-lt-stage{opacity:.6;background:color-mix(in srgb, var(--fc) 10%, transparent);border:1px solid color-mix(in srgb, var(--fc) 30%, transparent);transition:opacity .3s, background .3s, box-shadow .3s, transform .35s var(--spring);border-radius:14px;flex-direction:column;align-items:center;padding:8px 4px;display:flex;position:relative}.u4a-lt-stage:not(:last-child):after{content:"→";color:var(--ink-faint);font-size:.9rem;position:absolute;top:50%;right:-11px;translate:0 -50%}.u4a-lt-stage.on{opacity:1;background:color-mix(in srgb, var(--fc) 34%, transparent);box-shadow:0 0 24px -8px var(--fc);transform:scale(1.04)}.u4a-lt-stage.missing{opacity:.9;background:0 0;border-style:dashed}.u4a-lt-stage b{font:700 1.3rem/1.2 var(--display)}.u4a-lt-stage small{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-size:.7rem;font-weight:700}.u4a-lt-board{flex-direction:column;display:flex}.u4a-lt-arrows{height:46px;margin-bottom:2px;position:relative}.u4a-lt-arrows svg{position:absolute;inset:0;overflow:visible}.u4a-lt-arc{fill:none;stroke-width:2.5px;stroke-linecap:round}.u4a-lt-arrows.pull .u4a-lt-arc{stroke-dasharray:5 5;animation:.9s linear infinite u4a-dash}.u4a-lt-arrows.pull g{animation:1.2s ease-in-out infinite u4a-pulse}.u4a-lt-arrows.done g{animation:u4a-swap .35s var(--ease-out) both}.u4a-lt-label{fill:#fff;text-anchor:middle;font-size:11.5px;font-weight:800}.u4a-nc-notes{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.u4a-nc-note{cursor:pointer;color:var(--key-ink);transition:transform .3s var(--spring), box-shadow .25s, background .2s;background:linear-gradient(170deg,#ffffffeb,#ece4fac7);border:1px solid #ffffff59;border-radius:14px;flex-direction:column;align-items:center;padding:7px 0 5px;display:flex;box-shadow:inset 0 1px #fff,0 8px 20px -12px #000000b3}.u4a-nc-note b{font-size:1.08rem;font-weight:800;line-height:1.2}.u4a-nc-note small{color:var(--key-ink-soft);font-size:.66rem;font-weight:700}.u4a-nc-note:hover{transform:translateY(-2px)}.u4a-nc-note.on{background:var(--vivid);color:#fff;border-color:#0000;box-shadow:0 0 0 3px #ff6aae4d,0 10px 26px -8px #f0569de6}.u4a-nc-note.on small{color:#ffffffd9}.u4a-nc-head{min-height:0}.u4a-nc-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.u4a-nc-col{cursor:pointer;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);min-width:0;box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, background .25s;border-radius:18px;flex-direction:column;align-items:center;gap:7px;padding:16px 6px 10px;display:flex;position:relative}.u4a-nc-col:before{content:"";background:var(--rc);border-radius:4px;height:4px;position:absolute;top:6px;left:26%;right:26%}.u4a-nc-col:hover{transform:translateY(-2px)}.u4a-nc-col:active{transform:scale(.97)}.u4a-nc-col.on{background:color-mix(in srgb, var(--rc) 16%, transparent);box-shadow:inset 0 0 0 2px var(--rc), 0 14px 30px -14px var(--rc)}.u4a-nc-col.lit{box-shadow:inset 0 0 0 2px var(--rc), 0 0 28px -6px var(--rc);transform:translateY(-4px)}.u4a-nc-where{letter-spacing:.05em;text-transform:uppercase;color:var(--rc);text-align:center;font-size:.7rem;font-weight:800;line-height:1.25}.u4a-nc-chord{align-items:baseline;gap:6px;display:flex}.u4a-nc-chord b{font-size:1.25rem;font-weight:800}.u4a-nc-chord i{font:700 1rem var(--display);color:var(--qc);font-style:normal}.u4a-nc-stack{flex-direction:column;align-items:center;gap:4px;width:100%;display:flex}.u4a-nc-pill{border:1px solid var(--line);background:#ffffff14;border-radius:999px;justify-content:space-between;align-items:center;gap:6px;width:min(100%,104px);padding:3px 10px;font-size:.95rem;font-weight:800;display:flex}.u4a-nc-pill small{color:var(--ink-soft);font-size:.64rem;font-weight:600}.u4a-nc-pill.mine{background:var(--glow);color:#fff;box-shadow:0 0 16px -3px var(--glow);border-color:#0000}.u4a-nc-pill.mine small{color:#ffffffe6}.u4a-nc-role{color:var(--ink-soft);align-items:center;gap:5px;font-size:.76rem;font-weight:700;display:inline-flex}.u4a-nc-others{flex-wrap:wrap;align-items:center;gap:6px 8px;display:flex}.u4a-nc-other{cursor:pointer;color:var(--ink-soft);border:1px dashed var(--line-2);background:#ffffff0a;border-radius:999px;padding:5px 12px;font-size:.9rem;font-weight:700;transition:background .2s,border-color .2s,color .2s}.u4a-nc-other i{font:700 .85rem var(--display);opacity:.75;margin-left:4px;font-style:normal}.u4a-nc-other:hover{color:var(--ink);background:#ffffff14}.u4a-nc-other.on{color:#fff;border:1px solid var(--bad);background:#ff5c7733}.u4a-nc-result{border-radius:14px;align-items:flex-start;gap:10px;min-height:4.4em;padding:10px 14px;font-size:.93rem;line-height:1.5;display:flex}.u4a-nc-result svg{flex:none;margin-top:2px}.u4a-nc-result.ok{background:#2fcf8a1a;border:1px solid #2fcf8a59}.u4a-nc-result.ok svg{color:var(--good)}.u4a-nc-result.bad{background:#ff5c771a;border:1px solid #ff5c7766}.u4a-nc-result.bad svg{color:var(--bad)}.u4a-tu-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.u4a-tu-slot{cursor:pointer;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);min-width:0;box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, background .25s, border-color .25s;border-radius:16px;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 9px;display:flex;position:relative}.u4a-tu-slot:hover{transform:translateY(-2px)}.u4a-tu-slot.fit{background:#2fcf8a1a;border-color:#2fcf8aa6}.u4a-tu-slot.clash{background:#ff5c771f;border-color:#ff5c77b3}.u4a-tu-slot.sel{box-shadow:inset 0 0 0 2px var(--selection-2), 0 12px 26px -12px var(--selection)}.u4a-tu-slot.lit{box-shadow:0 0 0 2px var(--rose), 0 0 26px -6px var(--rose);transform:translateY(-4px)}.u4a-tu-words{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.76rem;font-style:italic;overflow:hidden}.u4a-tu-notes{letter-spacing:.04em;color:#ff8cc0;font-size:.95rem;font-weight:800}.u4a-tu-chord{border-top:3px solid var(--fc,#ffffff1f);background:#ffffff0f;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:calc(100% - 10px);min-height:44px;margin-top:2px;display:flex}.u4a-tu-chord b{font-size:1.05rem;font-weight:800;line-height:1.15}.u4a-tu-chord i{font:700 .78rem var(--display);color:var(--fc);font-style:normal}.u4a-tu-mark{color:#fff;border-radius:50%;place-items:center;width:20px;height:20px;display:none;position:absolute;top:-6px;right:-6px;box-shadow:0 4px 10px -3px #0009}.u4a-tu-slot.fit .u4a-tu-mark{background:var(--good);animation:u4a-pop .4s var(--spring) both;display:grid}.u4a-tu-slot.clash .u4a-tu-mark{background:var(--bad);animation:u4a-pop .4s var(--spring) both;display:grid}.u4a-tu-hint{min-height:3.2em}.u4a-tu-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.u4a-tu-chordbtn{--stripe:var(--fc);padding:15px 4px 10px}.u4a-tu-chordbtn b{font-size:1.35rem;font-weight:800;line-height:1.1}.u4a-tu-chordbtn i{font:700 .95rem var(--display);color:var(--fc);font-style:normal}.u4a-tu-chordbtn small{color:var(--ink-soft);font-size:.74rem}.u4a-tu-chordbtn.on{background:color-mix(in srgb, var(--fc) 26%, transparent);border-color:color-mix(in srgb, var(--fc) 60%, transparent)}.u4a-tu-done{min-height:0;color:var(--good);animation:u4a-swap .4s var(--ease-out) both;font-weight:700}@media (width<=600px){.u4a-msg{font-size:.93rem}.u4a-st-main{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.u4a-st-stack{padding:10px}.u4a-st-gap{gap:12px}.u4a-st-gaptext{font-size:.8rem}.u4a-st-gaptext small{font-size:.72rem}.u4a-st-roman{font-size:2rem}.u4a-st-name{font-size:1.1rem}.u4a-st-tiles,.u4a-nk-tiles{gap:4px}.u4a-st-tile,.u4a-nk-tile{border-radius:12px;padding:12px 0 7px}.u4a-st-tile:before,.u4a-nk-tile:before{left:18%;right:18%}.u4a-st-deg{font-size:.6rem}.u4a-st-num,.u4a-nk-num{font-size:1.02rem}.u4a-st-cname{font-size:.72rem}.u4a-nk-name{font-size:.8rem}.u4a-nk-notes{font-size:.56rem}.u4a-tn-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.u4a-piano .piano-keys{height:112px}.u4a-piano-short .piano-keys{height:96px}.u4a-nc-cols{gap:6px}.u4a-nc-col{padding:15px 3px 9px}.u4a-nc-where{font-size:.6rem}.u4a-nc-pill{padding:3px 7px;font-size:.88rem}.u4a-nc-chord b{font-size:1.1rem}.u4a-tu-slots{gap:6px}.u4a-tu-words{font-size:.68rem}.u4a-tu-notes{font-size:.85rem}}.u4b{flex-direction:column;gap:14px;min-width:0;display:flex}.u4b-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.u4b-between{justify-content:space-between}.u4b-wrap{flex-wrap:wrap}.u4b-label{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-size:.72rem;font-weight:700}.u4b-note{color:var(--ink-soft);margin:0;font-size:.9rem;line-height:1.45}.u4b-piano{margin-top:4px}.u4b-piano .piano-keys{height:128px}@keyframes u4b-pop{0%{opacity:0;transform:translateY(6px)scale(.92)}to{opacity:1;transform:none}}@keyframes u4b-glow{0%,to{box-shadow:0 0 #f0569d00}50%{box-shadow:0 0 22px 2px #f0569d8c}}.u4b-chips{flex-wrap:wrap;gap:8px;display:flex}.u4b-chip{cursor:pointer;border:1px solid var(--glass-edge);color:var(--ink);text-align:left;transition:background .2s, transform .3s var(--spring), box-shadow .25s, border-color .2s;background:#ffffff0f;border-radius:14px;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 14px;display:inline-flex}.u4b-chip:hover{background:#ffffff1f;transform:translateY(-1px)}.u4b-chip:active{transform:scale(.96)}.u4b-chip.on{background:var(--selection-sheen);color:#fff;border-color:#ffffff4d;box-shadow:inset 0 1px #ffffff4d,0 8px 20px -8px #8f5cf2e6}.u4b-chip-label{font-size:.92rem;font-weight:700;line-height:1.2}.u4b-chip-sub{color:var(--ink-soft);font-size:.74rem;line-height:1.2}.u4b-chip.on .u4b-chip-sub{color:#ffffffd9}.u4b-keychips .u4b-chip{align-items:center;min-width:42px;padding:7px 10px}.u4b-accg{font-family:-apple-system, system-ui, "Segoe UI Symbol", var(--font);margin-left:.03em;font-size:1em;font-weight:600}.u4b-whitechips .u4b-chip{flex:1 1 0;align-items:center;min-width:0;padding:8px 4px}.u4b-whitechips .u4b-chip-label{font:700 1.15rem var(--display)}.u4b-whitechips .u4b-chip-sub{font-size:.68rem}.u4b-play{padding:10px 18px}.u4b-play.playing{background:var(--vivid)}.u4b-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.u4b-card{--fc:#a77bff;cursor:pointer;min-width:0;color:var(--ink);background:linear-gradient(170deg, color-mix(in srgb, var(--fc) 18%, transparent), #ffffff0a);border:1px solid var(--glass-edge);box-shadow:var(--lift);transition:transform .3s var(--spring), box-shadow .25s, background .25s, border-color .2s;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:16px 4px 10px;display:flex;position:relative;overflow:hidden}.u4b-card:before{content:"";background:var(--fc);border-radius:4px;height:4px;position:absolute;top:6px;left:22%;right:22%}.u4b-card:hover{border-color:#ffffff47;transform:translateY(-2px)}.u4b-card:active{transform:scale(.96)}.u4b-card.on{background:linear-gradient(160deg, color-mix(in srgb, var(--fc) 70%, transparent), color-mix(in srgb, var(--fc) 30%, transparent));box-shadow:0 0 0 1px color-mix(in srgb, var(--fc) 70%, transparent), 0 14px 30px -10px var(--fc);border-color:#ffffff80;transform:translateY(-3px)scale(1.04)}.u4b-card.sel{box-shadow:0 0 0 2px #ffffffd9, var(--lift);border-color:#fff}.u4b-card-num{font:700 clamp(1.15rem, 4.6vw, 1.7rem)/1.1 var(--display);color:var(--fc);white-space:nowrap}.u4b-card.on .u4b-card-num{color:#fff}.u4b-card-name{white-space:nowrap;animation:u4b-pop .4s var(--spring) both;font-size:clamp(.88rem,3.4vw,1.05rem);font-weight:700}.u4b-card-job{letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);font-size:.66rem;font-weight:700}.u4b-card.on .u4b-card-job{color:#ffffffe6}.u4b-slot-n{color:var(--ink-faint);font-size:.66rem;font-weight:700;position:absolute;top:4px;left:8px}.u4b-status{color:var(--ink-soft);flex:220px;min-height:1.4em;font-size:.92rem}.u4b-status b{color:var(--ink)}.u4b-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.u4b-pal{--fc:#a77bff;cursor:pointer;color:var(--ink);border:1px solid var(--glass-edge);border-top:3px solid var(--fc);min-width:0;transition:transform .3s var(--spring), background .2s;background:#ffffff0f;border-radius:13px;flex-direction:column;align-items:center;padding:8px 2px;display:flex}.u4b-pal b{font:700 1.05rem var(--display);color:var(--fc)}.u4b-pal span{color:var(--ink-soft);font-size:.78rem}.u4b-pal:hover{background:#ffffff1f;transform:translateY(-1px)}.u4b-pal:active{transform:scale(.94)}.u4b-pal.on{background:color-mix(in srgb, var(--fc) 30%, transparent)}.u4b-verdict{border:1px solid var(--line);animation:u4b-pop .35s var(--ease-out) both;background:#ffffff0d;border-radius:14px;margin:0;padding:10px 14px;font-size:.95rem}.u4b-cw-top{grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:center;gap:20px;display:grid}.u4b-ring{aspect-ratio:1;width:100%;max-width:330px;margin:0 auto;position:relative;container-type:inline-size}.u4b-ring-lines{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.u4b-ring-lines circle{fill:none;stroke:#ffffff29;stroke-width:.8px}.u4b-ring-arc{fill:none;stroke-width:3.2px;stroke-linecap:round;filter:drop-shadow(0 0 2px);opacity:.9;transition:d .4s var(--ease-out)}.u4b-node{--tint:#fff;cursor:pointer;width:17cqw;height:17cqw;color:var(--ink);background:radial-gradient(circle at 35% 30%, #fff3, #ffffff0d), color-mix(in srgb, var(--tint) 16%, #140e3c99);border:1px solid color-mix(in srgb, var(--tint) 45%, #fff3);-webkit-backdrop-filter:blur(10px);transition:transform .35s var(--spring), background .25s, box-shadow .25s;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:0;line-height:1.05;display:flex;position:absolute;transform:translate(-50%,-50%)}.u4b-node b{font:700 5.6cqw var(--display)}.u4b-node span{color:color-mix(in srgb, var(--tint) 75%, #fff);font-size:3.3cqw;font-weight:700}.u4b-node:hover{transform:translate(-50%,-50%)scale(1.08)}.u4b-node.on{color:#fff;background:var(--vivid);border-color:#ffffffb3;transform:translate(-50%,-50%)scale(1.16);box-shadow:0 0 0 3px #ffffff26,0 10px 26px -6px #b35ce6f2}.u4b-node.on span{color:#ffffffeb}.u4b-ring-centre{text-align:center;border:1px solid var(--line);background:#ffffff0d;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:30%}.u4b-ring-centre strong{font:700 10cqw/1 var(--display);animation:u4b-pop .4s var(--spring) both}.u4b-ring-centre span{color:var(--ink-soft);font-size:3.6cqw}.u4b-ring-centre em{margin-top:2px;font-size:4cqw;font-style:normal;font-weight:800}.u4b-cw-side{flex-direction:column;gap:14px;min-width:0;display:flex}.u4b-steps{grid-template-columns:1fr 1fr;gap:8px;display:grid}.u4b-step{border-radius:16px;justify-content:flex-start;gap:10px;padding:10px 14px}.u4b-step.right{justify-content:flex-end}.u4b-step span{text-align:left;flex-direction:column;line-height:1.2;display:flex}.u4b-step.right span{text-align:right}.u4b-step b{font-size:.92rem}.u4b-step small{color:var(--ink-soft);white-space:nowrap;font-size:.75rem;font-weight:500}.u4b-cw-info{border:1px solid var(--line);background:#ffffff0d;border-radius:18px;min-height:170px;padding:14px 16px}.u4b-cw-info h4{font:600 1.08rem var(--display);margin:0 0 6px}.u4b-cw-info p{margin:0 0 6px;font-size:.93rem;line-height:1.45}.u4b-sig{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.u4b-sig-notes{flex-wrap:wrap;gap:5px;display:flex}.u4b-sig-none{color:var(--ink-faint);font-size:.85rem;font-style:italic}.u4b-acc{border:1px solid var(--line-2);animation:u4b-pop .35s var(--spring) both;background:#ffffff0f;border-radius:999px;padding:2px 9px;font-size:.88rem;font-weight:700}.u4b-acc.sharp{color:#ffb0d3}.u4b-acc.flat{color:#b7c3ff}.u4b-acc.new{color:#fff;background:var(--vivid);animation:u4b-pop .45s var(--spring) both, u4b-glow 1.6s ease-in-out .4s 2;border-color:#0000}.u4b-cc{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:center;gap:18px 22px;display:grid}.u4b-cc-wheel{place-items:center;display:grid}.u4b-cc-wheel .cof{max-width:360px}.u4b-cc-side{flex-direction:column;gap:12px;min-width:0;display:flex}.u4b-cc-head{color:var(--ink-soft);margin:0}.u4b-cc-head b{color:var(--ink)}.u4b-cc-piano,.u4b-cc>.u4b-note{grid-column:1/-1}.u4b-slice{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;display:grid}.u4b-slice-col{text-align:center;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);font-size:.66rem;font-weight:700}.u4b-slice-ring{color:var(--ink-faint);text-align:center;grid-column:1/-1;margin-top:2px;font-size:.72rem}.u4b-tile{--fc:#a77bff;cursor:pointer;color:var(--ink);background:color-mix(in srgb, var(--fc) 20%, #ffffff0a);border:1px solid color-mix(in srgb, var(--fc) 45%, transparent);transition:transform .3s var(--spring), background .2s, box-shadow .25s;border-radius:15px;flex-direction:column;align-items:center;padding:10px 4px;display:flex}.u4b-tile b{font:700 1.2rem var(--display);color:var(--fc)}.u4b-tile span{font-size:.95rem;font-weight:700}.u4b-tile:hover{transform:translateY(-2px)}.u4b-tile:active{transform:scale(.95)}.u4b-tile.home{box-shadow:inset 0 0 0 2px var(--fc)}.u4b-tile.on{background:var(--fc);box-shadow:0 10px 24px -8px var(--fc);transform:scale(1.05)}.u4b-tile.on b{color:#fff}.u4b-mh-title,.u4b-ms-info{flex-direction:column;gap:2px;display:flex}.u4b-mh-title strong,.u4b-ms-info strong{font:700 1.45rem var(--display);animation:u4b-pop .4s var(--spring) both}.u4b-mh-title span,.u4b-ms-like{color:var(--ink-soft)}.u4b-pattern{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;display:grid}.u4b-steprow{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:420px;display:grid}.u4b-stepcell{text-align:center;color:var(--ink-soft);animation:u4b-pop .35s var(--spring) both;background:#ffffff0f;border-radius:9px;padding:4px 0;font-size:.85rem;font-weight:800}.u4b-stepcell.half{color:#fff;background:linear-gradient(150deg,#f0569d,#c44bd0);box-shadow:0 6px 14px -6px #f0569de6}.u4b-steprow.faint .u4b-stepcell{opacity:.55;animation:none}.u4b-bright{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);align-items:center;gap:10px;font-size:.72rem;font-weight:700;display:flex}.u4b-bright i{background:linear-gradient(90deg,#ffe08a,#ff9cc8 30%,#a77bff 65%,#3443b8);border-radius:5px;flex:1;height:5px}.u4b-modechips .u4b-chip{flex:auto}.u4b-ms-notes{flex-wrap:wrap;gap:6px;margin:6px 0 4px;display:flex}.u4b-ms-notes>span{border:1px solid var(--line);background:#ffffff0f;border-radius:11px;flex-direction:column;align-items:center;min-width:40px;padding:4px 6px;display:flex}.u4b-ms-notes b{font-size:.98rem}.u4b-ms-notes small{color:var(--ink-soft);font-size:.7rem;font-weight:700}.u4b-ms-notes>span.changed{animation:u4b-pop .4s var(--spring) both;background:linear-gradient(150deg,#f0569d8c,#c44bd073);border-color:#ff9cc8b3}.u4b-ms-notes>span.changed small{color:#fff}@media (width<=860px){.u4b-cw-top,.u4b-cc{grid-template-columns:minmax(0,1fr)}.u4b-cw-info{min-height:0}.u4b-piano .piano-keys{height:118px}}@media (width<=480px){.u4b-whitechips{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.u4b-keyrow{gap:6px;display:grid}.u4b-keychips{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.u4b-keychips .u4b-chip{min-width:0;padding:7px 0}.u4b-chip{padding:7px 11px}.u4b-chip-label{font-size:.86rem}.u4b-step{padding:9px 10px}.u4b-step b{font-size:.84rem}.u4b-pattern{grid-template-columns:minmax(0,1fr)}.u4b-pal span{font-size:.72rem}}.demo{border-radius:26px;margin:26px 0;padding:20px 22px 22px;position:relative;overflow:clip}.demo:before{content:"";pointer-events:none;background:radial-gradient(circle,#b35ce659,#0000 65%);border-radius:50%;width:320px;height:320px;position:absolute;top:-170px;right:-140px}.demo>*{position:relative}.demo-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px;display:flex}.demo-tag{letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--vivid);border-radius:999px;align-items:center;gap:6px;padding:4px 11px;font-size:.72rem;font-weight:700;display:inline-flex;box-shadow:0 6px 16px -6px #b35ce6cc}.demo-title{font:600 1.3rem var(--display);margin:0}.demo-caption{color:var(--ink-soft);margin:14px 0 0;font-size:.95rem}@media (width<=860px){.demo{border-radius:22px;margin:20px -4px;padding:16px 14px 18px}}.learn-head{grid-template-columns:minmax(0,1fr) 340px;align-items:end;gap:28px;display:grid}.learn-progress{border-radius:22px;flex-direction:column;gap:6px;display:flex}.learn-progress strong{font:600 1.25rem var(--display)}.learn-progress .bar{background:#ffffff1a;border-radius:3px;height:6px;margin:4px 0 10px;display:block;overflow:hidden}.learn-progress .bar i{background:var(--vivid);border-radius:3px;height:100%;display:block;box-shadow:0 0 10px #f0569db3}.units{grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:22px;display:grid}.unit{border-radius:30px;flex-direction:column;gap:12px;padding:12px;display:flex}.unit-banner{color:#fff;isolation:isolate;border:1px solid #ffffff2e;border-radius:22px;height:200px;display:block;position:relative;overflow:hidden}.unit-banner.small{border-radius:18px;height:120px}.unit-banner img{object-fit:cover;z-index:-2;width:100%;height:100%;transition:transform .8s var(--ease-out);position:absolute;inset:0}.unit-banner:hover{text-decoration:none}.unit-banner:hover img{transform:scale(1.06)}.unit-shade{z-index:-1;background:linear-gradient(#0c0a2a00 25%,#0c0a2ae0 100%);position:absolute;inset:0}.unit-label{letter-spacing:.08em;text-transform:uppercase;border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:.72rem;font-weight:700;display:inline-flex;position:absolute;top:12px;left:12px}.unit-copy{flex-direction:column;gap:2px;display:flex;position:absolute;bottom:14px;left:18px;right:18px}.unit-copy strong{font:700 1.45rem var(--display)}.unit-banner.small .unit-copy strong{font-size:1.1rem}.unit-copy span{color:#ffffffd9;font-size:.9rem;font-weight:400}.lesson-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.lesson-row{color:var(--ink);transition:background .2s, transform .3s var(--spring);border-radius:16px;align-items:center;gap:14px;padding:12px 14px;font-weight:400;display:flex}.lesson-row:hover{background:#ffffff14;text-decoration:none;transform:translate(3px)}.lesson-num{--u1:#ff9cc8;--u2:#e2478f;color:#fff;background:linear-gradient(145deg, var(--u1), var(--u2));width:36px;height:36px;box-shadow:inset 0 1px 0 #ffffff80, 0 6px 14px -6px var(--u2);border-radius:12px;flex:none;place-items:center;font-weight:700;display:grid}.unit-2 .lesson-num{--u1:#ffd0a8;--u2:#ff7f9e}.unit-3 .lesson-num{--u1:#c7a4ff;--u2:#7c4fe4}.unit-4 .lesson-num{--u1:#8f9cff;--u2:#3443b8}.lesson-row.done .lesson-num{--u1:#7fe0b5;--u2:#12925e}.lesson-text{flex-direction:column;flex:1;min-width:0;display:flex}.lesson-title{font-weight:600}.lesson-summary{color:var(--ink-soft);font-size:.88rem;line-height:1.4}.lesson-min{color:var(--ink-faint);white-space:nowrap;font-size:.82rem}.lesson-row .arrow{color:var(--selection-2);opacity:0;transition:opacity .2s, transform .3s var(--spring);transform:translate(-6px)}.lesson-row:hover .arrow{opacity:1;transform:none}.page.lesson-page{max-width:1340px}.lesson-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:40px;display:grid}.lesson{min-width:0;max-width:900px}.lesson-aside{position:sticky;top:24px}.lesson-aside-card{border-radius:24px;flex-direction:column;gap:10px;padding:10px 10px 14px;display:flex}.lesson-aside-card>.btn,.lesson-aside-card>.done-badge{margin:0 6px}.aside-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.aside-row{color:var(--ink-soft);border-radius:12px;align-items:center;gap:10px;padding:8px 10px;font-size:.9rem;font-weight:500;display:flex}.aside-row:hover{color:var(--ink);background:#ffffff12;text-decoration:none}.aside-row.current{color:#fff;background:#8f5cf247}.aside-dot{background:#ffffff1a;border-radius:8px;flex:none;place-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:grid}.aside-row.done .aside-dot{color:#fff;background:linear-gradient(145deg,#7fe0b5,#12925e)}.lesson-foot{border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:18px;margin-top:44px;padding-top:24px;display:flex}.lesson-pager{flex-wrap:wrap;justify-content:space-between;align-self:stretch;gap:12px;display:flex}.done-badge{color:var(--good);animation:pop .5s var(--spring) both;align-items:center;gap:6px;font-weight:600;display:inline-flex}.practice-icon{background:linear-gradient(145deg,#ff9cc8,#e2478f)!important}@media (width<=1180px){.lesson-grid{grid-template-columns:1fr}.lesson-aside{display:none}}@media (width<=860px){.learn-head,.units{grid-template-columns:1fr}.unit-banner{height:170px}.lesson-min{display:none}}.ex-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;display:grid}.ex-guide .ex-tagline a{color:#c9b4ff;font-weight:600}.ex-card{--tint:#f0569d59;color:var(--ink);border-radius:24px;flex-direction:column;gap:6px;padding:22px;font-weight:400;display:flex;overflow:hidden}.ex-card:before{content:"";background:radial-gradient(circle, var(--tint), transparent 65%);pointer-events:none;width:240px;height:240px;transition:transform .6s var(--ease-out);border-radius:50%;position:absolute;top:-120px;right:-100px}.ex-card:hover:before{transform:scale(1.25)translate(-10px,10px)}.ex-card>*{position:relative}.tint-peach{--tint:#ff8c8c59}.tint-sky{--tint:#4c7dff59}.tint-violet{--tint:#7c4fe466}.tint-indigo{--tint:#505fdc61}.tint-mint{--tint:#23a98f52}.tint-navy{--tint:#7584ff4d}.ex-card-top{justify-content:space-between;align-items:flex-start;display:flex}.ex-title{font:600 1.3rem var(--display);margin-top:12px}.ex-tagline{color:var(--ink-soft);flex:1;font-size:.93rem;line-height:1.45}.ex-meta{margin-top:8px}.ex-progress{background:#ffffff1a;border-radius:3px;height:5px;margin-top:10px;display:block;overflow:hidden}.ex-progress i{background:var(--vivid);height:100%;transition:width .8s var(--ease-out);border-radius:3px;display:block;box-shadow:0 0 10px #f0569db3}.runner-grid{grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr);align-items:start;gap:28px;display:grid}.runner-main{min-width:0}.runner-side{flex-direction:column;gap:18px;display:flex;position:sticky;top:24px}.runner-head{align-items:center;gap:16px;margin-bottom:18px;display:flex}.runner-head h1{font-size:clamp(1.7rem,2.6vw,2.3rem)}.runner-head p{margin:2px 0 0}.levels{scrollbar-width:thin;gap:6px;padding:4px 2px 10px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000)}.level{cursor:pointer;border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;transition:background .2s, transform .3s var(--spring), box-shadow .2s, color .2s;background:#ffffff0f;border-radius:999px;flex:none;align-items:center;gap:8px;padding:6px 13px 6px 6px;font-size:.86rem;font-weight:600;display:flex}.level:hover{color:var(--ink);background:#ffffff1f;transform:translateY(-1px)}.level:active{transform:scale(.95)}.level-num{background:#ffffff1a;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.78rem;font-weight:700;display:grid}.level.passed .level-num{color:#fff;background:linear-gradient(145deg,#7fe0b5,#12925e)}.level.ahead{opacity:.6}.level.on{background:var(--selection-sheen);color:#fff;opacity:1;border-color:#ffffff4d;box-shadow:0 8px 22px -8px #8f5cf2e6}.level.on .level-num{color:#fff;background:#ffffff40}.level-info{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:6px 0 20px;font-size:.92rem;display:flex}.meter{flex-wrap:wrap;align-items:center;gap:10px;display:inline-flex}.meter-dots{gap:3px;display:inline-flex}.meter-dots i{background:#ffffff29;border-radius:50%;width:8px;height:8px}.meter-dots i.y{background:var(--good);animation:dot-in .4s var(--spring) both;box-shadow:0 0 6px #2fcf8ab3}.meter-dots i.n{background:var(--bad);animation:dot-in .4s var(--spring) both;box-shadow:0 0 6px #ff5c7799}@keyframes dot-in{0%{transform:scale(0)}}.passed-note{color:var(--good);align-items:center;gap:6px;font-size:.85rem;font-weight:600;display:inline-flex}.start-card p{margin-top:0;font-size:1.02rem}.start-row{flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px;display:flex}kbd{font:600 .75rem var(--font);border:1px solid var(--line-2);color:var(--ink);background:#ffffff1a;border-bottom-width:2px;border-radius:5px;padding:1px 6px}.stage{animation:rise-in .5s var(--ease-out) both;border-radius:28px;padding:22px;transition:box-shadow .35s,border-color .35s}.stage.is-good{box-shadow:var(--lift), 0 0 40px -6px #2fcf8a59;border-color:#2fcf8a99}.stage.is-bad{box-shadow:var(--lift), 0 0 40px -6px #ff5c774d;border-color:#ff5c778c}.stage-top{justify-content:space-between;align-items:center;min-height:26px;display:flex}.score{color:var(--ink-soft);font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-weight:700;display:inline-flex}.streak{color:var(--rose);animation:pop .5s var(--spring);align-items:center;gap:3px;display:inline-flex}.stage-play{flex-direction:column;align-items:center;gap:4px;display:flex}.play-orb{place-items:center;width:220px;height:176px;display:grid;position:relative}.sound-ring{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.play-orb:before{content:"";background:radial-gradient(circle,#f0569d61,#7c5cf04d 50%,#0000 70%);border-radius:50%;width:132px;height:132px;margin:-66px 0 0 -66px;animation:4s ease-in-out infinite breathe;position:absolute;top:50%;left:50%}.play-orb.playing:before{animation-duration:1.2s}@keyframes breathe{50%{opacity:.7;transform:scale(1.18)}}.big-play{cursor:pointer;color:#fff;width:92px;height:92px;transition:transform .35s var(--spring);background:radial-gradient(circle at 34% 28%,#c9a8ff 0%,#9a6bff 30%,#6a3ad8 70%,#3d1d96 100%);border:1px solid #ffffff59;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:inset 0 2px 1px #fff6,inset 0 -6px 14px #0000004d,0 18px 40px -10px #8f5cf2e6}.big-play:after{content:"";pointer-events:none;background:linear-gradient(#ffffff8c,#0000);border-radius:50%;width:46%;height:30%;position:absolute;top:9%;left:20%}.big-play:hover{transform:scale(1.05)}.big-play:active{transition-duration:80ms;transform:scale(.93)}.big-play svg path{transform:translate(1px)}.stage-replays{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.stage-prompt{text-align:center;margin:14px 0 16px;font-size:1.12rem}.answers{gap:10px;display:grid}.answers.compact{grid-template-columns:repeat(auto-fit,minmax(82px,1fr))}.answers.wide{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.answers.few{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.answers .choice{flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:64px;display:flex}.answers .choice.dim{opacity:.5}.choice-key{color:var(--ink-faint);font-size:.68rem;font-weight:600;position:absolute;top:6px;left:9px}.choice-label{font-size:1.08rem}.answers.compact .choice-label{font:700 1.35rem var(--display)}.choice-sub{color:var(--ink-soft);font-size:.78rem;font-weight:500}.choice.good .choice-sub,.choice.bad .choice-sub{color:inherit;opacity:.85}.feedback{animation:rise-in .35s var(--ease-out) both;border-radius:26px;padding:22px}.feedback.is-good{border-color:#2fcf8a80}.feedback.is-bad{border-color:#ff5c7773}.verdict{align-items:center;gap:10px;font-size:1.15rem;display:inline-flex}.verdict-icon{color:#fff;width:30px;height:30px;animation:pop .55s var(--spring) both;border-radius:50%;place-items:center;display:inline-grid}.is-good .verdict{color:var(--good)}.is-good .verdict-icon{background:linear-gradient(145deg,#3fd08f,#12925e);box-shadow:0 4px 14px -2px #2fcf8ab3}.is-bad .verdict{color:var(--bad)}.is-bad .verdict-icon{background:linear-gradient(145deg,#ff7a91,#d6334b);box-shadow:0 4px 14px -2px #ff5c7799}.feedback-text{margin:10px 0 0}.reveal-piano{margin-top:44px}.reveal-piano .piano-keys{height:120px}.feedback-actions{justify-content:space-between;align-items:center;gap:10px;margin-top:18px;display:flex}.side-help h3{margin-bottom:8px;font-size:1.2rem}.side-help p{margin:0 0 14px}.side-lesson{color:var(--ink);border-radius:16px;align-items:center;gap:12px;padding:12px 14px;display:flex}.side-lesson>span{flex-direction:column;flex:1;line-height:1.3;display:flex}.side-lesson .arrow{color:var(--selection-2)}.item-stats h3{margin-bottom:10px;font-size:1.1rem}.item-chips{flex-wrap:wrap;gap:6px;display:flex}.item-chip{border:1px solid var(--line);background:#ffffff12;border-radius:999px;align-items:center;gap:8px;padding:4px 11px;font-size:.85rem;display:inline-flex}.item-chip.weak strong{color:var(--bad)}.item-chip.strong strong{color:var(--good)}.item-stats p{margin:10px 0 0}@media (width<=1180px){.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=1100px){.runner-grid{grid-template-columns:1fr}.runner-side{position:static}}@media (width<=860px){.ex-grid{grid-template-columns:1fr}.stage{border-radius:22px;padding:16px 12px}.play-orb{width:200px;height:158px}.big-play{width:82px;height:82px}.answers.compact{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}.answers.wide{grid-template-columns:repeat(2,1fr)}}.runner-back{margin-bottom:18px}.runner-back .btn{gap:6px}.flip{transform:scaleX(-1)}:root{--bg:#0c0a2a;--bg-2:#ffffff0a;--ink:#f5f0ff;--ink-soft:#c3b9e6;--ink-faint:#8d84b8;--key-ink:#1d2150;--key-ink-soft:#4c5183;--navy:#151d55;--selection:#8f5cf2;--selection-2:#a679ff;--rose:#ff6aae;--pink:#ff6aae;--violet:#a77bff;--purple:#a77bff;--periwinkle:#7d94ff;--blue:#7d94ff;--good:#2fcf8a;--bad:#ff5c77;--tonic:#ff6aae;--subdominant:#a77bff;--dominant:#7d94ff;--vivid:linear-gradient(135deg, #f0569d 0%, #b35ce6 55%, #7c5cf0 100%);--selection-sheen:linear-gradient(180deg, #a679ff, #6a3ad8);--glass:linear-gradient(150deg, #ffffff21 0%, #ffffff0b 100%);--glass-strong:linear-gradient(150deg, #ffffff2e 0%, #ffffff12 100%);--glass-edge:#ffffff29;--glass-blur:blur(26px) saturate(170%);--lift:inset 0 1px 0 #ffffff38, inset 0 -1px 0 #ffffff0a, 0 18px 50px -22px #000000bf;--lift-hi:inset 0 1px 0 #ffffff47, 0 26px 60px -22px #000000d9, 0 0 0 1px #ffffff0f;--line:#ffffff1a;--line-2:#ffffff2e;--panel:#ffffff0f;--panel-2:#ffffff1a;--hover:#ffffff24;--text:var(--ink);--muted:var(--ink-soft);--faint:var(--ink-faint);--accent:var(--selection);--accent-ink:#fff;--link:#c4a7ff;--radius:18px;--shadow:0 30px 80px -24px #000000d9;--card-shadow:var(--lift);--spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.2, .8, .2, 1);--top:env(safe-area-inset-top);--bottom:env(safe-area-inset-bottom);--sidebar:252px;--font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--display:"Fraunces", system-ui, -apple-system, "Segoe UI Symbol", Georgia, serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg)}body{color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;touch-action:manipulation;margin:0}a{color:var(--link);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}a,button{-webkit-tap-highlight-color:transparent}h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;color:var(--ink);margin:0;font-weight:600;line-height:1.15}code{background:#ffffff14;border-radius:5px;padding:1px 6px;font:.9em ui-monospace,SF Mono,Menlo,monospace}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--selection-2);outline-offset:2px}.muted{color:var(--ink-soft)}.small{font-size:.85rem}.ombre-text{background:linear-gradient(90deg,#ffa3d1,#c9a8ff,#9fb2ff,#ffa3d1) 0 0/300% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:8s linear infinite shimmer}@keyframes shimmer{to{background-position:-300% 0}}.backdrop{z-index:-1;pointer-events:none;background:radial-gradient(70vmax 60vmax at 8% 4%,#ff4fa042,#0000 60%),radial-gradient(80vmax 70vmax at 96% 96%,#7a4dff4d,#0000 60%),radial-gradient(60vmax 50vmax at 60% 40%,#3a10608c,#0000 70%),linear-gradient(170deg,#1c0b40 0%,#120a36 40%,#0d0b2e 70%,#2a0f4d 100%);position:fixed;inset:0;overflow:hidden}.bokeh{mix-blend-mode:screen;will-change:transform, opacity;background:radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 45%, transparent 70%);animation:bokeh-drift var(--d) ease-in-out infinite alternate, bokeh-glow calc(var(--d) * .6) ease-in-out infinite alternate;border-radius:50%;position:absolute}@keyframes bokeh-drift{to{transform:translate(var(--dx), var(--dy))}}@keyframes bokeh-glow{0%{opacity:.35}to{opacity:.85}}.float-note{color:#ffd6ec;opacity:.18;animation:linear infinite float-up;position:absolute;bottom:-60px}@keyframes float-up{0%{opacity:0;transform:translate(0)rotate(-8deg)}10%{opacity:.2}50%{transform:translate(28px,-55vh)rotate(8deg)}90%{opacity:.2}to{opacity:0;transform:translate(-12px,-112vh)rotate(-6deg)}}.grain{opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:0}.glass,.card{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);position:relative}.card{padding:22px}.glass-i{transition:transform .35s var(--spring), box-shadow .3s, background .2s, border-color .2s;cursor:pointer}.glass-i:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), #ffffff29, transparent 60%);transition:opacity .25s;position:absolute;inset:0}.glass-i:hover{box-shadow:var(--lift-hi);background:var(--glass-strong);border-color:#ffffff42;text-decoration:none;transform:translateY(-3px)}.glass-i:hover:after{opacity:1}.glass-i:active{transition-duration:.1s;transform:translateY(0)scale(.985)}.pressable{transition:transform .35s var(--spring), box-shadow .3s}.pressable:hover{text-decoration:none;transform:translateY(-3px)}.pressable:active{transform:scale(.98)}.app{min-height:100vh}.sidebar{width:var(--sidebar);z-index:30;border-radius:26px;flex-direction:column;gap:6px;padding:18px 14px;display:flex;position:fixed;top:16px;bottom:16px;left:16px}.brand{color:var(--ink);font:700 1.5rem var(--display);align-items:center;gap:10px;padding:4px 8px 18px;display:flex}.brand img{border-radius:10px;width:38px;height:38px;box-shadow:0 6px 18px -6px #b35ce6cc}.brand:hover{text-decoration:none}.nav{flex-direction:column;gap:4px;display:flex}.nav-link{color:var(--ink-soft);transition:background .2s, color .2s, transform .25s var(--spring);border-radius:14px;align-items:center;gap:12px;padding:11px 14px;font-weight:600;display:flex;position:relative}.nav-link:hover{color:var(--ink);background:#ffffff12;text-decoration:none}.nav-link:active{transform:scale(.97)}.nav-link.active{color:#fff;background:linear-gradient(135deg,#f0569d59,#7c5cf066);box-shadow:inset 0 1px #ffffff40,0 8px 24px -10px #b35ce6e6}.sidebar-foot{flex-direction:column;gap:6px;margin-top:auto;display:flex}.side-btn{cursor:pointer;color:var(--ink-soft);text-align:left;background:#ffffff0d;border:0;border-radius:14px;align-items:center;gap:12px;padding:11px 14px;font-weight:600;transition:background .2s,color .2s;display:flex}.side-btn:hover{color:var(--ink);background:#ffffff1a}.side-btn.on{color:#fff;background:#8f5cf24d}.side-btn .kbd-hint{opacity:.6;margin-left:auto;font-size:.72rem}.mobile-top,.tabbar{display:none}main{margin-left:calc(var(--sidebar) + 16px);min-height:100vh;padding-bottom:40px}.app.with-drawer main{padding-bottom:300px}.page{max-width:1640px;animation:page-in .55s var(--ease-out) both;margin:0 auto;padding:44px 48px 48px}@keyframes page-in{0%{opacity:0;transform:translateY(14px)}}.page-head{margin-bottom:30px}.page-head h1{font-size:clamp(2rem,3.2vw,2.9rem)}.lede{color:var(--ink-soft);max-width:760px;margin:10px 0 0;font-size:1.08rem}.eyebrow{color:var(--rose);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-size:.78rem;font-weight:700;display:block}.crumbs{color:var(--ink-faint);margin-bottom:18px;font-size:.9rem}.crumbs a{color:var(--ink-soft)}.crumbs span{margin:0 4px}.stagger>*{animation:rise-in .6s var(--ease-out) both}.stagger>:nth-child(2){animation-delay:50ms}.stagger>:nth-child(3){animation-delay:.1s}.stagger>:nth-child(4){animation-delay:.15s}.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(6){animation-delay:.25s}.stagger>:nth-child(7){animation-delay:.3s}.stagger>:nth-child(n+8){animation-delay:.35s}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)scale(.98)}}.tile{--t1:#ff9cc8;--t2:#e2478f;color:#fff;background:linear-gradient(145deg, var(--t1), var(--t2));width:46px;height:46px;box-shadow:inset 0 1px 0 #ffffff8c, inset 0 -2px 6px #00000026, 0 10px 22px -8px color-mix(in srgb, var(--t2) 80%, transparent);border-radius:14px;flex:none;place-items:center;display:inline-grid;position:relative}.tile:after{content:"";pointer-events:none;background:linear-gradient(#fff6,#0000);border-radius:12px 12px 40% 40%;position:absolute;inset:2px 2px 50%}.tile-icon{z-index:1;filter:drop-shadow(0 1px 2px #00000040);position:relative}.tile-sm{border-radius:11px;width:36px;height:36px}.tile-lg{border-radius:19px;width:64px;height:64px}.tile-rose{--t1:#ff9cc8;--t2:#e2478f}.tile-violet{--t1:#c7a4ff;--t2:#7c4fe4}.tile-indigo{--t1:#8f9cff;--t2:#3443b8}.tile-peach{--t1:#ffd0a8;--t2:#ff7f9e}.tile-sky{--t1:#9fdcff;--t2:#4c7dff}.tile-mint{--t1:#9ff0d8;--t2:#23a98f}.tile-navy{--t1:#7584ff;--t2:#2c3296}.btn{cursor:pointer;background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);transition:background .2s, transform .3s var(--spring), box-shadow .25s, border-color .2s;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-weight:600;display:inline-flex;position:relative}.btn:hover{background:var(--glass-strong);border-color:#ffffff47;text-decoration:none;transform:translateY(-1px)}.btn:active{transition-duration:80ms;transform:scale(.96)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn.primary{color:#fff;background:linear-gradient(#a679fff2,#6a3ad8f2);border-color:#ffffff47;box-shadow:inset 0 1px #ffffff59,0 12px 30px -10px #8f5cf2e6}.btn.primary:hover{box-shadow:inset 0 1px #ffffff59,0 16px 36px -10px #8f5cf2,0 0 0 4px #8f5cf240}.btn.ghost{box-shadow:none;background:#ffffff0a}.btn.danger{color:var(--bad)}.btn.small{padding:6px 13px;font-size:.85rem}.btn.big{padding:14px 26px;font-size:1.08rem}.chip{border:1px solid var(--line-2);color:var(--ink);background:#ffffff14;border-radius:999px;align-items:center;gap:6px;padding:3px 11px;font-size:.8rem;font-weight:600;display:inline-flex}.chip.hl{background:var(--vivid);color:#fff;border-color:#0000;box-shadow:0 6px 16px -6px #b35ce6cc}button.chip{cursor:pointer}.seg{border:1px solid var(--line);background:#ffffff0f;border-radius:999px;flex-wrap:wrap;gap:3px;padding:4px;display:inline-flex}.seg button{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:7px 14px;font-size:.9rem;font-weight:600;transition:background .2s,color .2s}.seg button:hover{color:var(--ink)}.seg button.on{background:var(--selection-sheen);color:#fff;box-shadow:inset 0 1px #ffffff4d,0 6px 16px -6px #8f5cf2e6}.tabs{background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:999px;gap:4px;max-width:100%;margin-bottom:26px;padding:5px;display:inline-flex;overflow-x:auto}.tabs a,.tabs button{color:var(--ink-soft);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;align-items:center;gap:8px;padding:9px 18px;font-weight:600;display:inline-flex}.tabs a:hover,.tabs button:hover{color:var(--ink);background:#ffffff0f;text-decoration:none}.tabs .on{color:#fff;background:var(--selection-sheen);box-shadow:inset 0 1px #ffffff4d,0 8px 20px -8px #8f5cf2e6}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.piano{-webkit-user-select:none;user-select:none;touch-action:none;background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--lift);border-radius:18px;padding:10px 8px 8px}.piano-keys{height:150px;display:flex;position:relative}.piano-keys:before{content:"";z-index:3;background:var(--vivid);border-radius:4px;height:4px;position:absolute;top:-6px;left:2px;right:2px}.piano.disabled{opacity:.6;pointer-events:none}.key{cursor:pointer;border:0;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;margin:0;padding:0 0 9px;font-size:.72rem;font-weight:600;line-height:1;transition:background .18s,box-shadow .12s;display:flex}.key.white{height:100%;color:var(--key-ink-soft);background:linear-gradient(#e6dcf3 0%,#fff 7%,#fdfbff 72%,#ece4f7 100%);border:1px solid #c9bedf;border-top:0;border-radius:0 0 8px 8px;position:relative;box-shadow:inset 0 -6px #ded3ef,inset 0 -7px #cfc2e6}.key.white+.key.white{border-left:0}.key.black{z-index:2;color:#dadcf6;background:linear-gradient(#121848 0%,#2a3683 6%,#182064 70%,#2b3888 88%,#0e1440 100%);border-radius:0 0 6px 6px;height:62%;padding-bottom:7px;position:absolute;top:0;box-shadow:inset 0 -5px #0a0f35,0 3px 5px #00000080}.key:focus-visible{outline:2px solid var(--selection-2);outline-offset:-3px}.key.white.pressed{background:linear-gradient(#ddd0ef 0%,#f6f0fd 10%,#efe6fb 100%);box-shadow:inset 0 -2px #d6cae9}.key.black.pressed{background:linear-gradient(#121848,#33418f 20%,#26318a)}.key.white.sounding{color:var(--key-ink);z-index:1;background:linear-gradient(#ffd0e6 0%,#f0b8ee 55%,#c9a3f6 100%);box-shadow:inset 0 -2px #b98ae8,0 0 24px #f0569da6}.key.black.sounding{background:var(--vivid);color:#fff;box-shadow:0 0 20px #b35ce6e6}.key-spark{z-index:4;pointer-events:none;background:linear-gradient(to top, var(--c), transparent);width:12px;height:46px;box-shadow:0 0 14px var(--c);border-radius:8px;margin-left:-6px;animation:1.15s cubic-bezier(.2,.7,.3,1) forwards spark-rise;position:absolute;bottom:calc(100% + 2px)}.key-spark.from-black{width:9px;margin-left:-4.5px}@keyframes spark-rise{0%{opacity:0;transform:translateY(14px)scaleY(.3)}18%{opacity:1}to{opacity:0;transform:translateY(-84px)scaleY(1.3)}}.key[class*=mark-]:before{content:"";aspect-ratio:1;background:var(--mark);width:min(16px,55%);box-shadow:0 0 0 2px #ffffffe6, 0 2px 6px color-mix(in srgb, var(--mark) 60%, transparent);animation:mark-pop .45s var(--spring) both;border-radius:50%}@keyframes mark-pop{0%{transform:scale(0)}}.key.mark-root{--mark:#1d2775}.key.black.mark-root{--mark:#f7a8d2}.key.mark-tone{--mark:#8150ea}.key.mark-melody{--mark:#e8458f}.key.mark-good{--mark:#12925e}.key.mark-bad{--mark:#d6334b}.key.mark-scale{--mark:#b9acd8}.key.mark-third{--mark:#3d8fef}.key.mark-fifth{--mark:#1fb89c}.key.mark-seventh{--mark:#f29a3a}.role-colors .key.mark-root{--mark:#8f5cf2}.key.white.mark-scale:before{width:min(10px,40%)}.key.black.mark-scale{--mark:#b3b8e6}.key-caption{color:inherit;opacity:.95;white-space:nowrap;font-size:.66rem;font-weight:700}.key.white .key-caption{color:var(--key-ink)}.key-hotkey{opacity:.5;font-size:.62rem;font-weight:500}.play-btn{text-align:left;cursor:pointer;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--lift);transition:background .2s, transform .3s var(--spring), box-shadow .25s, border-color .2s;border-radius:16px;align-items:center;gap:10px;padding:8px 18px 8px 8px;display:inline-flex;position:relative}.play-btn:hover{background:var(--glass-strong);border-color:#ffffff47;transform:translateY(-2px)}.play-btn:active{transition-duration:80ms;transform:scale(.96)}.play-icon{background:var(--selection-sheen);color:#fff;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff59,0 4px 10px -3px #8f5cf2cc}.play-icon svg path{transform:translate(1px)}.play-btn.playing .play-icon{background:var(--vivid)}.play-btn.playing .play-icon:after{content:"";border:2px solid #f0569db3;border-radius:50%;animation:1.1s ease-out infinite ripple;position:absolute;inset:0}@keyframes ripple{to{opacity:0;transform:scale(2.1)}}.play-btn.playing{border-color:#f0569d99}.eq rect{transform-origin:bottom;transform-box:fill-box;animation:.8s ease-in-out infinite alternate eq}.eq rect:nth-child(2){animation-delay:-.3s}.eq rect:nth-child(3){animation-delay:-.55s}@keyframes eq{0%{transform:scaleY(.35)}to{transform:scaleY(1)}}.play-text{flex-direction:column;line-height:1.25;display:flex}.play-label{font-weight:600}.play-sub{color:var(--ink-soft);font-size:.8rem}.play-btn.small{border-radius:12px;gap:7px;padding:4px 12px 4px 5px;font-size:.9rem}.play-btn.small .play-icon{width:22px;height:22px}.play-btn.small .play-icon svg{width:10px;height:10px}.sounds{flex-wrap:wrap;gap:10px;margin:18px 0;display:flex}.lesson-body{font-size:1.06rem}.lesson-body>p{max-width:760px;color:var(--ink);margin:0 0 16px}.lesson-h{margin:42px 0 12px;font-size:1.5rem}.lesson-h:before{content:"";background:var(--vivid);border-radius:2px;width:36px;height:4px;margin-bottom:12px;display:block}.lesson-ul{max-width:740px;margin:0 0 18px;padding-left:22px}.lesson-ul li{margin-bottom:6px}.lesson-ul li::marker{color:var(--rose)}.lesson-piano{max-width:900px;margin:30px 0 24px}.lesson-piano figcaption{color:var(--ink-soft);margin-top:12px;font-size:.9rem}.callout{border-radius:18px;gap:14px;max-width:780px;margin:22px 0;padding:16px 20px;display:flex;overflow:hidden}.callout:before{content:"";background:linear-gradient(#c7a4ff,#7c4fe4);width:4px;position:absolute;top:0;bottom:0;left:0}.callout-key:before{background:linear-gradient(#ff9cc8,#e2478f)}.callout-ear:before{background:linear-gradient(#8f9cff,#3443b8)}.callout-icon{color:#fff;background:#ffffff1a;border-radius:10px;flex:none;place-items:center;width:32px;height:32px;display:grid}.callout-key .callout-icon{background:linear-gradient(145deg,#ff9cc8,#e2478f)}.callout-tip .callout-icon{background:linear-gradient(145deg,#c7a4ff,#7c4fe4)}.callout-ear .callout-icon{background:linear-gradient(145deg,#8f9cff,#3443b8)}.table-wrap{border-radius:18px;margin:18px 0 26px;overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:.95rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:10px 16px}.table th{color:var(--ink-soft);letter-spacing:.02em;background:#ffffff0d;font-size:.82rem;font-weight:600}.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#ffffff0a}.quiz{max-width:780px;margin:28px 0;padding:20px 22px}.quiz-q{margin-bottom:12px;font-weight:600}.quiz-tag{text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--vivid);border-radius:999px;margin-bottom:8px;padding:2px 10px;font-size:.7rem;display:inline-block}.quiz-sound{margin-bottom:12px}.quiz-options{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.quiz-explain{animation:rise-in .4s var(--ease-out) both;margin:14px 0 0;font-size:.95rem}.quiz-explain.good strong{color:var(--good)}.quiz-explain.bad strong{color:var(--bad)}.practice-link{max-width:780px;color:var(--ink);border-radius:18px;align-items:center;gap:14px;margin:30px 0;padding:16px 18px;font-weight:400;display:flex}.practice-link:hover{text-decoration:none}.practice-link .arrow{color:var(--selection-2);transition:transform .3s var(--spring);margin-left:auto}.practice-link:hover .arrow{transform:translate(4px)}.choice{cursor:pointer;color:var(--ink);text-align:center;background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--lift);transition:background .15s, border-color .15s, transform .3s var(--spring), box-shadow .25s, opacity .2s;border-radius:16px;padding:13px 14px;font-weight:600;position:relative}.choice:hover:not(:disabled):not(.good):not(.bad){background:var(--glass-strong);border-color:#ffffff4d;transform:translateY(-2px)}.choice:active:not(:disabled){transition-duration:80ms;transform:scale(.95)}.choice:disabled{opacity:.4;cursor:default}.choice.good{color:#fff;animation:pop .5s var(--spring);background:linear-gradient(150deg,#2fcf8a8c,#12925e8c);border-color:#2fcf8ae6;box-shadow:0 0 26px -6px #2fcf8acc}.choice.bad{color:#fff;background:linear-gradient(150deg,#ff5c7780,#d6334b80);border-color:#ff5c77e6;animation:.45s cubic-bezier(.36,.07,.19,.97) shake}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.drawer{left:calc(var(--sidebar) + 32px);z-index:40;animation:drawer-up .45s var(--ease-out) both;background:linear-gradient(150deg,#281e5ad9,#140f37e6);border-radius:24px;padding:14px 16px 16px;position:fixed;bottom:16px;right:16px}@keyframes drawer-up{0%{transform:translateY(110%)}}.drawer-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.drawer-info{align-items:center;gap:10px;min-height:30px;display:flex}.drawer-tools{align-items:center;gap:6px;display:flex}.drawer-piano .piano-keys{height:170px}.icon-btn{border:1px solid var(--glass-edge);width:36px;height:36px;color:var(--ink);cursor:pointer;transition:background .2s, transform .25s var(--spring);background:#ffffff0f;border-radius:50%;place-items:center;display:inline-grid}.icon-btn:hover{background:#ffffff24}.icon-btn:active{transform:scale(.92)}.modal-back{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0604188c;place-items:center;padding:16px;animation:.25s both fade-in;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.modal{width:min(540px,100%);max-height:90vh;animation:modal-in .45s var(--spring) both;background:linear-gradient(150deg,#2c2062eb,#140f37f2);border-radius:26px;padding:22px 24px;overflow:auto}@keyframes modal-in{0%{opacity:0;transform:translateY(20px)scale(.96)}}.modal-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-foot{border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;padding-top:16px;display:flex}.field{flex-direction:column;gap:8px;margin-bottom:18px;display:flex}.field>span:first-child{font-size:.9rem;font-weight:600}.field.check{flex-direction:row;align-items:center;gap:10px}.field.check>span{font-weight:400}.field input[type=range]{accent-color:var(--selection)}.field input[type=checkbox]{accent-color:var(--selection);width:18px;height:18px}.toast{left:50%;top:calc(24px + var(--top));z-index:60;background:var(--vivid);color:#fff;animation:toast-in .55s var(--spring);border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-weight:700;display:inline-flex;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px -10px #b35ce6e6,inset 0 1px #ffffff59}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-16px)scale(.85)}}.fx-layer{z-index:70;pointer-events:none;position:fixed;inset:0;overflow:hidden}.fx-spark,.fx-confetti{display:block;position:absolute;box-shadow:0 0 6px #fff9}.splash{z-index:100;background:#120a35;place-items:center;animation:.45s ease-in 1.35s forwards splash-out;display:grid;position:fixed;inset:0}.splash-mark{animation:splash-bloom 1.4s var(--ease-out) both;flex-direction:column;align-items:center;gap:18px;display:flex}.splash-mark img{border-radius:30px;width:128px;height:128px;box-shadow:0 0 60px #b35ce6b3}.splash-mark span{font:700 2.2rem var(--display);color:var(--ink);animation:rise-in .6s .25s var(--ease-out) both}@keyframes splash-bloom{0%{opacity:.6;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}@keyframes splash-out{to{opacity:0;visibility:hidden;transform:scale(1.04)}}@media (width<=860px){.sidebar{display:none}.mobile-top{z-index:30;padding:calc(10px + var(--top)) 16px 10px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#0c0a2abf;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.mobile-top .brand{padding:0;font-size:1.25rem}.mobile-top .brand img{width:30px;height:30px}.mobile-tools{gap:6px;display:flex}.tabbar{left:12px;right:12px;bottom:calc(10px + var(--bottom));z-index:35;border-radius:999px;justify-content:space-around;padding:6px;display:flex;position:fixed}.tabbar .nav-link{border-radius:999px;flex-direction:column;gap:2px;padding:6px 14px;font-size:.7rem}main{padding-bottom:calc(100px + var(--bottom));margin-left:0}.app.with-drawer main{padding-bottom:330px}.app.with-drawer .tabbar,.app.focus .tabbar{display:none}.app.focus main{padding-bottom:calc(24px + var(--bottom))}.drawer{left:8px;right:8px;bottom:calc(8px + var(--bottom))}.page{padding:22px 16px 32px}.hide-mobile{display:none}.piano-keys{height:120px}.drawer-piano .piano-keys{height:140px}.key{font-size:.62rem}.table th,.table td{padding:8px 9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.float-note,.bokeh{animation:none!important}}