*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color-scheme:light dark;--paper: #fef6e4;--card: #ffffff;--ink: #2b2733;--ink-soft: #6d6780;--edge: rgba(43, 39, 51, .14)}@media(prefers-color-scheme:dark){:root{--paper: #1b1a21;--card: #26242e;--ink: #f4f1fb;--ink-soft: #a49fb4;--edge: rgba(0, 0, 0, .4)}}body{min-height:100dvh;background-color:var(--paper);color:var(--ink)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.kb{max-width:34rem;margin-inline:auto;padding:1.25rem 1rem 2.5rem;display:flex;flex-direction:column;gap:1rem}.guide,.now,.how,.tip{background:var(--card);border-radius:16px;box-shadow:0 4px 0 var(--edge)}.how{padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.6rem}.how__title{font-size:1rem;font-weight:800;letter-spacing:-.01em}.how__intro{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}.how__intro strong{color:var(--ink)}.how__list{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}.how__list strong{color:var(--ink)}.guide{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.75rem}.guide__row{display:flex;flex-direction:column;gap:.4rem}.guide__label{font-size:.8rem;font-weight:700;color:var(--ink-soft)}.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{border:none;border-radius:999px;padding:.35rem .7rem;font-size:.9rem;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--note-color, #ccc) 22%,var(--card));cursor:pointer;transition:transform .05s ease}.chip--scale{background:color-mix(in srgb,var(--ink) 8%,var(--card))}.chip--active{background:var(--note-color, var(--ink));color:#201d28;box-shadow:0 0 0 3px color-mix(in srgb,var(--note-color, var(--ink)) 40%,transparent)}.chip--scale.chip--active{background:var(--ink);color:var(--paper);box-shadow:none}.chip:active{transform:translateY(1px)}.guide__blurb,.guide__notes{font-size:.9rem;line-height:1.4}.guide__notes{color:var(--ink-soft)}.guide__notes strong{color:var(--ink);letter-spacing:.04em}.now{min-height:5.5rem;padding:.75rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;text-align:center}.now__hint{color:var(--ink-soft);font-size:1.05rem}.now__note{font-size:2.6rem;font-weight:800;line-height:1;color:var(--note-color, var(--ink))}.now__oct{font-size:1rem;font-weight:700;vertical-align:sub;color:var(--ink-soft)}.now__status{font-size:.85rem;font-weight:700;color:var(--ink-soft)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}.key{position:relative;border:none;border-radius:14px;aspect-ratio:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;cursor:pointer;color:#201d28;box-shadow:0 4px 0 var(--edge);transition:transform .05s ease,box-shadow .05s ease}.key--in{background:var(--note-color)}.key--off{background:color-mix(in srgb,var(--note-color) 16%,var(--card));color:var(--ink-soft)}.key--root{box-shadow:0 4px 0 var(--edge),inset 0 0 0 3px #201d28}.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}.key--root:active{box-shadow:0 1px 0 var(--edge),inset 0 0 0 3px #201d28}.key__name{font-size:1.5rem;font-weight:800;line-height:1}.key__oct{font-size:.75rem;font-weight:700;opacity:.7}.key__star{position:absolute;top:.3rem;right:.35rem;font-size:.8rem}.tip{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}.tip__legend{font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;flex-wrap:wrap}.tip__swatch{display:inline-block;width:.85rem;height:.85rem;border-radius:4px;margin-right:.3rem;vertical-align:-.1rem}.tip__swatch--in{background:#4b7bec}.tip__swatch--off{background:color-mix(in srgb,#4b7bec 16%,var(--card));box-shadow:inset 0 0 0 1px var(--edge)}.tip__text{font-size:1rem;line-height:1.45}.tip__next{align-self:flex-end;border:none;border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:700;color:var(--paper);background:var(--ink);cursor:pointer}.tip__next:active{transform:translateY(1px)}