.nf{--nf-pad: var(--gutter);--nf-ring: inset 0 0 0 3px var(--paper);--nf-ring-sm: inset 0 0 0 2px var(--paper)}.nf-pc-0{--nf-c: #d7263d;--nf-on: var(--paper)}.nf-pc-1{--nf-c: #e4572e;--nf-on: var(--ink)}.nf-pc-2{--nf-c: #f28c28;--nf-on: var(--ink)}.nf-pc-3{--nf-c: #f5a623;--nf-on: var(--ink)}.nf-pc-4{--nf-c: #f0b90b;--nf-on: var(--ink)}.nf-pc-5{--nf-c: #8cc63f;--nf-on: var(--ink)}.nf-pc-6{--nf-c: #2db38a;--nf-on: var(--ink)}.nf-pc-7{--nf-c: #2d9cdb;--nf-on: var(--ink)}.nf-pc-8{--nf-c: #3f63d9;--nf-on: var(--paper)}.nf-pc-9{--nf-c: #7b4fd6;--nf-on: var(--paper)}.nf-pc-10{--nf-c: #a64ac9;--nf-on: var(--paper)}.nf-pc-11{--nf-c: #e05a9c;--nf-on: var(--ink)}:is(.nf-mk,.nf-swatch).is-root{--nf-c: #d7263d;--nf-on: var(--paper)}:is(.nf-mk,.nf-swatch).is-third{--nf-c: #f28c28;--nf-on: var(--ink)}:is(.nf-mk,.nf-swatch).is-fifth{--nf-c: #2d9cdb;--nf-on: var(--ink)}:is(.nf-mk,.nf-swatch).is-seventh{--nf-c: #7b4fd6;--nf-on: var(--paper)}:is(.nf-mk,.nf-swatch).is-tension{--nf-c: #8cc63f;--nf-on: var(--ink)}@media(min-width:768px){.nf{--nf-pad: var(--space-6)}}@media(min-width:1280px){.nf{--nf-pad: var(--space-8)}}.nf-hero.fv{width:auto;margin-inline:0;margin-bottom:0}.nf-hero .fv__inner{max-width:none;padding:var(--space-8) var(--nf-pad)}.nf-hero .fv__title{font-size:var(--fs-2xl);margin-bottom:var(--space-3)}.nf-hero .fv__lead{max-width:48ch;margin-bottom:0}.nf-hero .fv__shape{width:min(30vw,320px)}.nf-layout{display:grid;grid-template-columns:minmax(0,1fr)}.nf-side{position:fixed;inset:0 auto 0 0;z-index:var(--z-modal);width:min(88vw,22rem);padding:var(--space-4);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-right:var(--bw-2) solid var(--ink);transform:translate(-105%);visibility:hidden;transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}.nf-side.is-open{transform:none;visibility:visible;box-shadow:var(--shadow-hard);transition:transform var(--dur-slow) var(--ease-out)}.nf-backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:color-mix(in srgb,var(--ink) 55%,transparent)}.nf-backdrop[hidden]{display:none}html.nf-lock{overflow:hidden}@media(prefers-reduced-motion:reduce){.nf-side{transition:none}}.nf-side__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.nf-side__head .nf-h{margin:0}.nf-side__close{width:var(--space-7);height:var(--space-7);padding:0;border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-lg);line-height:1;cursor:pointer}.nf-side__close:hover{background:var(--ink);color:var(--paper)}.nf-side__group+.nf-side__group{margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--bw-1) solid var(--line)}.nf-side__title{margin:0 0 var(--space-3);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}.nf-side__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.nf-side-open{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--space-8);padding:0 var(--space-4);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform var(--ease),box-shadow var(--ease)}.nf-side-open:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}.nf-side-open__label{font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}.nf-side-open__sum{min-width:0;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nf-burger{flex:none;width:var(--space-4);height:var(--space-3);border-block:var(--bw-2) solid currentColor;background:linear-gradient(currentColor,currentColor) center / 100% var(--bw-2) no-repeat}@media(min-width:768px){.nf-side-open{justify-self:start;width:auto;max-width:100%}}@media(min-width:1024px){.nf-side{width:60vw;padding:var(--space-6)}.nf-side__fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5)}}.nf-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding:var(--space-6) var(--nf-pad) 0}.nf-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}@media(min-width:1024px){.nf-split{grid-template-columns:repeat(2,minmax(0,1fr))}}.nf-panel{min-width:0;background:var(--paper);border:var(--bw-2) solid var(--ink);padding:var(--space-4)}@media(min-width:768px){.nf-panel{padding:var(--space-5)}}.nf-panel--board{box-shadow:var(--shadow-hard)}.nf-panel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5);margin-bottom:var(--space-4)}.nf-panel__head .nf-h{margin-bottom:0}.nf-h{margin:0 0 var(--space-4);font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--ls-heading)}.nf-h__en{display:block;font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}.nf-settings{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr))}.nf-settings{grid-auto-flow:dense}.nf-field--wide{grid-column:1 / -1}@media(min-width:768px){.nf-settings{grid-template-columns:repeat(3,minmax(0,1fr))}.nf-field--wide{grid-column:auto}}@media(min-width:1024px){.nf-settings{grid-template-columns:repeat(5,minmax(0,1fr))}}.nf-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.nf-field__label{font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--muted)}.nf-select{position:relative;display:block;min-width:0;transition:transform var(--ease)}.nf-select select{appearance:none;-webkit-appearance:none;width:100%;max-width:100%;text-overflow:ellipsis;min-height:var(--space-7);padding:0 var(--space-7) 0 var(--space-3);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-base);font-weight:var(--fw-medium);cursor:pointer;transition:box-shadow var(--ease)}.nf-select:after{content:"";position:absolute;right:var(--space-3);top:50%;width:var(--space-2);height:var(--space-2);border-right:var(--bw-2) solid var(--ink);border-bottom:var(--bw-2) solid var(--ink);transform:translateY(-75%) rotate(45deg);pointer-events:none}.nf-select:hover{transform:translate(-2px,-2px)}.nf-select:hover select{box-shadow:var(--shadow-hard-sm)}.nf-select select:disabled{cursor:not-allowed;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-border)}.nf-select:has(select:disabled){transform:none}.nf-select:has(select:disabled) select{box-shadow:none}.nf-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-2)}.nf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--space-7);padding:0 var(--space-4);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;cursor:pointer;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.nf-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}.nf-btn:active{transform:none;box-shadow:none}.nf-btn--primary{background:var(--brand);color:var(--on-brand)}.nf-btn--toggle[aria-pressed=true]{background:var(--ink);color:var(--paper)}.nf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.nf-seg{display:inline-flex;align-self:flex-start;min-height:var(--space-7);border:var(--bw-2) solid var(--ink)}.nf-seg button{padding:0 var(--space-4);border:0;background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:background var(--ease),color var(--ease)}.nf-seg button+button{border-left:var(--bw-2) solid var(--ink)}.nf-seg button:hover{background:var(--brand-soft)}.nf-seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.nf-sound{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3)}.nf-sound input[type=range]{width:100%;margin:0;accent-color:var(--ink)}.nf-notes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}@media(min-width:768px){.nf-notes{grid-template-columns:repeat(12,minmax(0,1fr))}}.nf-note{height:var(--space-8);padding:0;border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.nf-note:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}.nf-note[aria-pressed=true]{background:var(--nf-c);color:var(--nf-on)}.nf-note.is-root{box-shadow:var(--nf-ring)}.nf-note.is-root:hover{box-shadow:var(--nf-ring),var(--shadow-hard-sm)}.nf-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-4) var(--space-5);margin-top:var(--space-5)}.nf-row .nf-field{min-width:8rem}@media(min-width:1024px){.nf-notes-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-5)}.nf-notes-body .nf-row{flex-wrap:nowrap;margin-top:0}}.nf-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) auto;gap:var(--space-2)}.nf-tuning{margin:0;font-size:var(--fs-sm);color:var(--muted)}.nf-tuning b{color:var(--ink);letter-spacing:.08em}.nf-fb{--nf-row: var(--space-7);--nf-label: var(--space-6);user-select:none}.nf-fb__row{display:grid;grid-template-columns:var(--nf-label) var(--nf-cols)}.nf-fb__row--inlay{height:var(--space-4)}.nf-fb__row--num{height:var(--space-5);margin-bottom:var(--space-1)}.nf-fb__inlay,.nf-fb__num{display:flex;align-items:center;justify-content:center;gap:var(--space-1);min-width:0}.nf-fb__dot{width:var(--space-2);height:var(--space-2);background:var(--muted)}.nf-fb__num{font-size:var(--fs-xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;overflow:hidden}.nf-fb__num.is-dot{color:var(--ink);font-weight:var(--fw-bold)}.nf-fb__num .is-sp{display:none}.nf-fb__string{height:var(--nf-row);--nf-str: 1px}.nf-fb__string[data-str="2"]{--nf-str: 1.5px}.nf-fb__string[data-str="3"]{--nf-str: 2px}.nf-fb__string[data-str="4"]{--nf-str: 2.5px}.nf-fb__string[data-str="5"]{--nf-str: 3px}.nf-fb__string[data-str="6"]{--nf-str: 3.5px}.nf-fb__string[data-str="7"]{--nf-str: 4px}.nf-fb__label{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted)}.nf-fb__cell{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;border-right:var(--bw-1) solid var(--ink)}.nf-fb__cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--nf-str);transform:translateY(-50%);background:var(--muted)}.nf-fb__cell--open{background:var(--surface);border-right:var(--bw-bar) solid var(--ink)}.nf-fb__cell--first{border-left:var(--bw-1) solid var(--ink)}.nf-mk{position:relative;z-index:var(--z-base);display:flex;align-items:center;justify-content:center;width:var(--space-6);max-width:calc(100% - var(--space-1));height:var(--space-6);padding:0;border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;white-space:nowrap;overflow:hidden;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.nf-mk:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}.nf-mk:active{transform:none;box-shadow:none}.nf-mk.is-note{background:var(--nf-c);color:var(--nf-on)}.nf-mk.is-ring,.nf-mk.is-ring:active{box-shadow:var(--nf-ring-sm)}.nf-mk.is-ring:hover{box-shadow:var(--nf-ring-sm),var(--shadow-hard-sm)}.nf-mk:is(.is-root,.is-third,.is-fifth,.is-seventh,.is-tension){background:var(--nf-c);color:var(--nf-on)}.nf-mk.is-root,.nf-mk.is-root:active{box-shadow:var(--nf-ring-sm);font-weight:var(--fw-black)}.nf-mk.is-root:hover{box-shadow:var(--nf-ring-sm),var(--shadow-hard-sm)}@media(min-width:768px){.nf-mk.is-root{width:calc(var(--space-6) + var(--space-1));height:calc(var(--space-6) + var(--space-1))}}.nf-mk.is-scale{background:var(--paper);color:var(--ink)}@media(max-width:767px){.nf-fb{--nf-row: var(--space-6);--nf-label: var(--space-4)}.nf-fb__num{font-size:calc(var(--fs-xs) * .8)}.nf-fb__num .is-pc{display:none}.nf-fb__num .is-sp{display:inline}.nf-mk{position:absolute;inset:var(--space-1) 0;width:auto;max-width:none;height:auto;border-width:var(--bw-1);font-size:calc(var(--fs-xs) * .8)}.nf-mk:hover{transform:none;box-shadow:none}.nf-mk.is-ring:hover,.nf-mk.is-root:hover{box-shadow:var(--nf-ring-sm)}.nf-fb--real .nf-fb__num:not(.is-dot){visibility:hidden}.nf-fb--real .nf-mk:is(.is-ring,.is-root),.nf-fb--real .nf-mk:is(.is-ring,.is-root):hover{box-shadow:inset 0 0 0 1px var(--paper)}}.nf-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-5) 0 0;padding:var(--space-3) 0 0;border-top:var(--bw-1) solid var(--line);list-style:none;font-size:var(--fs-sm)}.nf-legend li{display:flex;align-items:center;gap:var(--space-2)}.nf-legend__note{color:var(--muted)}.nf-swatch{width:var(--space-4);height:var(--space-4);border:var(--bw-2) solid var(--ink);background:var(--ink)}.nf-swatch:is(.is-note,.is-root,.is-third,.is-fifth,.is-seventh,.is-tension){background:var(--nf-c)}.nf-swatch:is(.is-ring,.is-root){box-shadow:var(--nf-ring-sm)}.nf-swatch.is-scale{background:var(--paper)}.nf-results{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}@media(min-width:768px){.nf-results{grid-template-columns:repeat(2,minmax(0,1fr))}.nf-chord,.nf-sec--wide{grid-column:1 / -1}}@media(min-width:1280px){.nf-results{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}.nf-chord{grid-column:auto}}.nf-chord{min-width:0;padding:var(--space-5);background:var(--ink);color:var(--on-dark)}.nf-chord__label{margin:0 0 var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand-on-dark)}.nf-chord__name{margin:0;font-size:var(--fs-3xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--brand);overflow-wrap:anywhere}.nf-chord__q{margin-left:var(--space-2);color:var(--on-dark-muted)}.nf-chord__sub{margin:var(--space-2) 0 0;font-size:var(--fs-base);line-height:var(--lh-snug)}.nf-chord__notes{margin:var(--space-4) 0 0;padding-top:var(--space-3);border-top:var(--bw-1) solid var(--on-dark-line);font-size:var(--fs-sm);color:var(--on-dark-muted)}.nf-chord__notes b{margin-left:var(--space-2);color:var(--paper)}.nf-chord__notes b.is-root{color:var(--brand-on-dark)}.nf-sec__title{margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:var(--bw-2) solid var(--ink);font-size:var(--fs-base);font-weight:var(--fw-bold)}.nf-list{margin:0;padding:0;list-style:none}.nf-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-3);padding:var(--space-2);border-bottom:var(--bw-1) solid var(--line);line-height:var(--lh-snug)}.nf-list li.is-primary{background:var(--brand-soft)}.nf-list__main{font-weight:var(--fw-bold)}.nf-list__deg{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--brand-h)}.nf-list__desc{margin-left:auto;font-size:var(--fs-sm);color:var(--muted)}.nf-empty{margin:0;font-size:var(--fs-sm);color:var(--muted)}.nf-tags__label{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted)}.nf-tags__label:first-child{margin-top:0}.nf-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nf-tag{padding:var(--space-1) var(--space-2);border:var(--bw-1) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-sm);line-height:var(--lh-snug);cursor:pointer;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.nf-tag:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm);background:var(--brand-soft)}.nf-dia-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}@media(min-width:768px){.nf-dia-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(max-width:767px){.nf-dia-grid{gap:var(--space-2)}.nf-dia{padding:var(--space-2)}.nf-dia .nf-dia__name{font-size:var(--fs-base);overflow-wrap:normal}}.nf-dia{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0;padding:var(--space-3);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.nf-dia:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hard)}.nf-dia[aria-pressed=true]{background:var(--brand)}.nf-dia__deg,.nf-dia__sub{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted)}.nf-dia__name{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-tight);overflow-wrap:anywhere}.nf-dia[aria-pressed=true] .nf-dia__deg,.nf-dia[aria-pressed=true] .nf-dia__sub{color:var(--on-brand)}.nf-caption{margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--muted)}.nf-guide{width:100%;max-width:var(--maxw-chrome);margin-inline:auto;padding:var(--space-5) var(--gutter) 0}.nf-guide ol,.nf-guide ul{padding-left:var(--space-5)}.nf-guide li+li{margin-top:var(--space-2)}