.ss-root{--ss-bg: #1a1a1a;--ss-surface: #232323;--ss-surface-hover: #2d2d2d;--ss-border: #3a3a3a;--ss-text: #f2f2f2;--ss-muted: #a8a8a8;--ss-accent: #ff8c00;--ss-accent-ink: #2b1600;--ss-accent-soft: #3a2610;--ss-accent-text: #ffb35c;--ss-good: #4ade80;--ss-good-ink: #0b2e13;--ss-bad: #ff7a70;--ss-bad-ink: #3d0a05;--ss-board: #201a16;--ss-wire: #8d8d8d;--ss-nut: #e8e1d3;--ss-string: #c9c1b2;--ss-inlay: #3d342d;--ss-radius: 10px;--ss-font: inherit;container:ss-root / inline-size;font-family:var(--ss-font);color:var(--ss-text);background:var(--ss-bg);padding:16px;line-height:1.4;text-align:left}.ss-root,.ss-root *,.ss-root *:before,.ss-root *:after{box-sizing:border-box}.ss-root :where(h1,h2,h3,h4,h5,h6,p){margin:0}.ss-root :where(button,input,select){font:inherit;margin:0;color:inherit}.ss-layout{display:flex;flex-direction:column;gap:16px}.ss-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}.ss-title{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.15}.ss-summary{color:var(--ss-muted);font-size:15px}.ss-main{display:grid;gap:16px;min-width:0}.ss-side{display:grid;gap:16px;align-content:start;min-width:0}.ss-layout[data-orientation=horizontal] .ss-board{order:-1}.ss-layout[data-orientation=horizontal] .ss-side{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}@container ss-root (max-width: 639px){.ss-layout[data-orientation=vertical] .ss-side{display:contents}.ss-layout[data-orientation=vertical] .ss-practice{order:2}.ss-layout[data-orientation=vertical] .ss-board{order:1}}@container ss-root (min-width: 640px){.ss-layout[data-orientation=vertical] .ss-main{grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:start}.ss-layout[data-orientation=vertical] .ss-side{position:sticky;top:16px}}.ss-panel{container-type:inline-size;display:grid;gap:16px;padding:16px;background:var(--ss-surface);border:1px solid var(--ss-border);border-radius:14px;min-width:0}.ss-field{display:grid;gap:8px;min-width:0}.ss-label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-muted)}.ss-hint{font-size:13px;color:var(--ss-muted)}.ss-row{display:grid;gap:16px}@container (min-width: 520px){.ss-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}.ss-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}@container (min-width: 640px){.ss-keys{grid-template-columns:repeat(12,minmax(0,1fr))}}.ss-segmented{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px}.ss-positions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.3fr);gap:6px}.ss-chip,.ss-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:44px;min-width:44px;border:1px solid var(--ss-border);border-radius:var(--ss-radius);background:var(--ss-bg);color:var(--ss-text);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ss-chip{padding:0 6px}.ss-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px}.ss-chip[aria-pressed=true]{background:var(--ss-accent);border-color:var(--ss-accent);color:var(--ss-accent-ink)}.ss-button[aria-pressed=true]{background:var(--ss-accent-soft);border-color:var(--ss-accent);color:var(--ss-accent-text)}.ss-button--primary,.ss-button--primary[aria-pressed=true]{background:var(--ss-accent);border-color:var(--ss-accent);color:var(--ss-accent-ink)}.ss-button--quiet{background:transparent;border-color:transparent;color:var(--ss-muted);justify-self:start;padding:0 8px;text-decoration:underline;text-underline-offset:3px}@media (hover: hover){.ss-chip:not([aria-pressed=true]):not(:disabled):hover,.ss-button:not(.ss-button--primary):not([aria-pressed=true]):not(:disabled):hover{background:var(--ss-surface-hover);border-color:#555}.ss-button--quiet:hover{color:var(--ss-text)}}.ss-chip:focus-visible,.ss-button:focus-visible,.ss-select select:focus-visible,.ss-stepper input:focus-visible{outline:2px solid var(--ss-accent);outline-offset:2px}.ss-chip:disabled,.ss-button:disabled{opacity:.4;cursor:not-allowed}.ss-practice__row{display:flex;flex-wrap:wrap;gap:8px}.ss-practice__row>.ss-button{flex:1 1 auto;white-space:nowrap}.ss-icon{display:inline-block;flex:none}.ss-icon--play{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}.ss-icon--stop{width:11px;height:11px;background:currentColor;border-radius:2px}.ss-icon--tick{width:10px;height:10px;border-radius:50%;border:2px solid currentColor}.ss-select{position:relative}.ss-select:after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--ss-muted);border-bottom:2px solid var(--ss-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}.ss-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;min-height:44px;padding:0 36px 0 12px;border:1px solid var(--ss-border);border-radius:var(--ss-radius);background:var(--ss-bg);color:var(--ss-text);font-size:16px;cursor:pointer}.ss-select option,.ss-select optgroup{background:#1f1f1f;color:#f2f2f2}.ss-stepper{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}.ss-stepper input{min-height:44px;width:100%;border:1px solid var(--ss-border);border-radius:var(--ss-radius);background:var(--ss-bg);color:var(--ss-text);font-size:16px;font-weight:600;text-align:center;-moz-appearance:textfield}.ss-stepper input::-webkit-outer-spin-button,.ss-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ss-quiz__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;font-weight:600;color:var(--ss-muted)}.ss-quiz__prompt{font-size:20px;font-weight:600}.ss-quiz__prompt strong{font-size:40px;line-height:1.1;color:var(--ss-accent);margin-left:6px}.ss-quiz__sub{display:block;font-size:14px;font-weight:400;color:var(--ss-muted)}.ss-quiz__feedback{min-height:1.4em;font-weight:600;color:var(--ss-muted)}.ss-quiz__feedback.is-correct{color:var(--ss-good)}.ss-quiz__feedback.is-wrong{color:var(--ss-bad)}.ss-quiz__result{font-size:18px}.ss-board{min-width:0;background:var(--ss-board);border:1px solid var(--ss-border);border-radius:14px;padding:8px}.ss-board__svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ss-board[data-orientation=horizontal]{overflow-x:auto;overscroll-behavior-x:contain}.ss-board[data-orientation=horizontal] .ss-board__svg{min-width:760px}.ss-board[data-orientation=vertical] .ss-board__svg{max-width:440px;margin:0 auto}.ss-board__wires line{stroke:var(--ss-wire);stroke-width:2}.ss-board__wires .ss-board__nut{stroke:var(--ss-nut);stroke-width:6;stroke-linecap:round}.ss-board__strings line{stroke:var(--ss-string);opacity:.85}.ss-board__inlays circle{fill:var(--ss-inlay)}.ss-board__labels text{fill:var(--ss-muted);font-weight:600}.ss-board__labels .is-marked,.ss-board__labels .is-string{fill:var(--ss-text);font-weight:700}.ss-board__target{fill:transparent;cursor:pointer}@media (hover: hover){.ss-board__target:hover{fill:#ffffff1a}}.ss-note{cursor:pointer}.ss-note__hit{fill:transparent}.ss-note__dot{stroke:#00000073;stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .12s ease}.ss-note__ring{fill:none;stroke:var(--ss-text);stroke-width:2.5}.ss-note__text{font-weight:700;pointer-events:none}.ss-note.is-dim{opacity:.3}.ss-note.is-active .ss-note__dot{stroke:#fff;stroke-width:4;transform:scale(1.18)}@media (hover: hover){.ss-note:hover .ss-note__dot{transform:scale(1.1)}}.ss-feedback circle{stroke:#00000073;stroke-width:2}.ss-feedback text{font-weight:700}.ss-feedback.is-correct circle{fill:var(--ss-good)}.ss-feedback.is-correct text{fill:var(--ss-good-ink)}.ss-feedback.is-wrong circle{fill:var(--ss-bad)}.ss-feedback.is-wrong text{fill:var(--ss-bad-ink)}@media (prefers-reduced-motion: reduce){.ss-root *,.ss-root *:before,.ss-root *:after{transition:none!important;animation:none!important}}:root{color-scheme:dark;background:#141414;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:#141414}.site{max-width:1440px;margin:0 auto;padding:16px}@media (min-width: 900px){.site{padding:32px 24px}}.site .ss-root{border-radius:16px}