/* Yuri's own seven-and-five scheme: seven long keys, five nearer sharps. */
.sf-section{padding-block:80px;border-top:1px solid var(--line,#ffffff20);scroll-margin-top:90px}
.sf-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:end;margin-bottom:38px}
.sf-heading h2{font-size:clamp(36px,4.3vw,64px);font-weight:350;letter-spacing:-.045em;line-height:1.1;margin:18px 0 0}
.sf-heading h2 em{font-family:Georgia,serif;color:var(--gold,#ddc493);font-weight:400}
.sf-heading>p{font-size:15px;line-height:1.9;color:var(--muted,#a2adb0);max-width:450px;margin:0 0 4px}
.sf-instrument{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:40px;padding:28px;border:1px solid #b7aa892b;border-radius:3px;background:radial-gradient(ellipse at 22% 38%,#ffffff04,transparent 65%),linear-gradient(125deg,#13191d,#0b1014);box-shadow:0 28px 80px #0003}
.sf-stage{min-width:0;align-self:center}
.sf-stage-top{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#b6bfbd;font-size:9px;letter-spacing:.12em;line-height:1.7}
.sf-stage-top [data-sf-number]{color:var(--gold,#ddc493);font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-keyboard-perspective{perspective:1100px;perspective-origin:50% 10%;padding:31px 9px 27px}
.sf-keyboard{position:relative;height:clamp(220px,26vw,300px);transform:rotateX(17deg);transform-origin:center center;transform-style:preserve-3d;border:1px solid #798184;background:#252b2e;box-shadow:0 1px 0 #d5d9d566,0 12px 0 #080b0d,0 13px 0 #657077,0 24px 27px #0008;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.sf-keyboard::before{content:'';position:absolute;inset:-5px -5px -6px;border:1px solid #9aa6ad77;border-radius:3px;box-shadow:inset 0 0 0 2px #0a0e12;pointer-events:none;transform:translateZ(-2px)}
.sf-key{appearance:none;position:absolute;bottom:0;margin:0;padding:0;border:1px solid #0b0e1238;border-top:1px solid #ffffff40;border-radius:2px 2px 3px 3px;font-family:inherit;cursor:pointer;transform-style:preserve-3d;transform:translateZ(var(--key-height));transform-origin:center top;transition:transform .12s ease,box-shadow .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--key-ink);box-shadow:inset 1px 0 #ffffff26,inset -1px 0 #0005}
.sf-key::after{content:'';position:absolute;left:-1px;right:-1px;height:8px;bottom:-8px;border:1px solid #29303699;border-top:0;border-radius:0 0 3px 3px;background:linear-gradient(#454c4f,#1b2125);transform-origin:top center;transform:rotateX(-55deg);pointer-events:none}
.sf-key::before{content:'';position:absolute;inset:2px;border:1px solid transparent;border-radius:2px;pointer-events:none;transition:border-color .2s,box-shadow .2s}
.sf-key--natural{--key-height:2px;left:calc(var(--sf-slot)*100%/7);width:calc(100%/7);height:100%;background:linear-gradient(90deg,var(--key-start),var(--key-end));z-index:1}
.sf-key--natural .sf-key-note{position:absolute;left:0;right:0;top:23%;font-size:clamp(13px,1.45vw,21px);font-weight:600;line-height:1.3;text-align:center;text-shadow:0 1px #0002}
.sf-key--natural .sf-key-name{position:absolute;left:0;right:0;top:calc(23% + 31px);text-align:center;font-size:9px;letter-spacing:.04em;opacity:.6}
.sf-key--color{--key-height:16px;left:calc(var(--sf-edge)*100%/7 - 4.5%);width:9%;height:58%;z-index:3;background:linear-gradient(100deg,#ffffff25,transparent 18%,#00000016 85%,#ffffff16),var(--key-color);border:2px solid #0c1015;box-shadow:inset 0 1px #ffffff8c,inset 1px 0 #ffffff38,2px 4px 7px #0008}
.sf-key--color::after{background:linear-gradient(color-mix(in srgb,var(--key-color) 64%,#171b21),color-mix(in srgb,var(--key-color) 33%,#10151b));border-color:#080c10}
.sf-key--color .sf-key-note{position:absolute;left:0;right:0;bottom:31px;text-align:center;font-size:clamp(10px,1.1vw,16px);font-weight:650;white-space:nowrap}
.sf-key--color .sf-key-name{position:absolute;left:1px;right:1px;bottom:14px;text-align:center;font-size:clamp(7px,.65vw,9px);font-weight:650;letter-spacing:0}
.sf-key:hover::before{border-color:#ffffff7a}
.sf-key.is-selected::before{border-color:var(--key-ink);box-shadow:inset 0 0 12px #ffffff14}
.sf-key.is-down,.sf-key:active{transform:translateZ(calc(var(--key-height) - 6px)) rotateX(-1deg);box-shadow:inset 0 0 18px #0003}
.sf-key:focus-visible{outline:3px solid #ddc493;outline-offset:4px;z-index:5}
.sf-stage.is-top .sf-keyboard{transform:rotateX(0deg)}
.sf-stage.is-top .sf-keyboard-perspective{perspective-origin:50% 50%}
.sf-keyboard-caption{text-align:center;color:#c8bb9d;font-size:9px;letter-spacing:.12em;line-height:1.8;margin:8px 0 20px}
.sf-toolbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.sf-toolbar[hidden],.sf-sound[hidden]{display:none}
.sf-toolbar button,.sf-sound-button{font-family:inherit;font-size:11px;line-height:1.5;cursor:pointer;border:1px solid #ffffff28;color:#bfc9c8;background:#141c21;min-height:36px;padding:7px 13px;border-radius:4px}
.sf-views{display:flex;gap:3px;border:1px solid #ffffff17;border-radius:6px;padding:3px}
.sf-views button{border-color:transparent;min-height:30px;padding:4px 13px;background:transparent}
.sf-views button[aria-pressed=true]{color:#e5d3af;background:#2c302e;border-color:#ddc49350}
.sf-toolbar button:hover,.sf-sound-button:hover{border-color:#ddc49380;color:#e9d9ba}
.sf-toolbar button:focus-visible,.sf-sound-button:focus-visible,.sf-relation-list button:focus-visible{outline:2px solid #ddc493;outline-offset:3px}
.sf-keyboard-hint{text-align:center;color:#98a9ad;font-size:11px;line-height:1.7;max-width:450px;margin:17px auto 0}
.sf-sound{margin:22px auto 0;text-align:center;max-width:420px}
.sf-sound-button{font-size:12px;min-height:42px;padding-inline:16px}
.sf-sound-button[aria-pressed=true]{border-color:#ddc49399;color:#e9d9ba}
.sf-sound-button[disabled]{opacity:.6;cursor:default}
.sf-sound p{color:#94a4ab;font-size:11px;line-height:1.65;margin:10px 0 0}
.sf-reading{border-left:1px solid #ffffff16;padding:8px 0 8px 28px;min-width:0;align-self:center}
.sf-kind{font-size:9px;letter-spacing:.13em;color:#9dafb3;margin:0 0 16px;line-height:1.6}
.sf-reading h3{font-size:clamp(29px,3vw,41px);font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:0;display:flex;align-items:center;gap:13px}
.sf-color-chip{width:13px;height:13px;display:inline-block;background:var(--sf-color);border:1px solid #a9b7bc88;border-radius:50%;box-shadow:0 0 18px color-mix(in srgb,var(--sf-glow) 25%,transparent);flex:none}
.sf-russian{font-family:Georgia,serif;font-size:24px;font-style:italic;color:var(--gold,#ddc493);margin:7px 0 17px}
.sf-description{font-size:13px;line-height:1.85;color:#c4cfd1;margin:0 0 15px;min-height:94px}
.sf-note-pitch{font-size:10px;line-height:1.7;color:#a0afb4;margin:0 0 18px;font-variant-numeric:tabular-nums}
.sf-meaning{border-top:1px solid #ffffff16;padding-top:15px}
.sf-meaning>span{font-size:8px;color:#9cabb0;letter-spacing:.1em}
.sf-meaning p{font-size:11px;line-height:1.8;color:#a9babf;margin:6px 0 0;min-height:60px}
.sf-relations{margin-top:20px;padding-top:15px;border-top:1px solid #ffffff16}
.sf-relations-heading{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#c5cdc9;line-height:1.6}
.sf-relations-heading>span:last-child{font-family:Georgia,serif;color:#ddc493}
.sf-relation-map{width:100%;height:126px;display:block;margin:12px auto 10px;overflow:visible}
.sf-relation-map text{fill:#b6c4c6;font:8px 'Segoe UI',sans-serif;letter-spacing:.03em}
.sf-map-ring{stroke:#758789;stroke-opacity:.2;stroke-width:1}
.sf-map-lines{stroke:#9cabad;stroke-opacity:.12;stroke-width:1}
.sf-map-lines path.is-active{stroke:var(--sf-color);stroke-opacity:.7;stroke-width:1.5}
.sf-relation-map [data-sf-map-node] circle{stroke:#ffffff30;stroke-width:1;transition:r .2s,stroke-width .2s}
.sf-relation-map [data-sf-map-node].is-selected circle{r:9px;stroke:#fff;stroke-width:1.5}
.sf-relation-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.sf-relation-list button{font-family:inherit;min-width:0;padding:9px 2px;min-height:56px;background:#10181d;border:1px solid #ffffff17;border-radius:3px;color:#b8c6c9;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.sf-relation-list button.is-selected{border-color:var(--pole-color);background:color-mix(in srgb,var(--pole-color) 9%,#10181d)}
.sf-relation-list i{display:block;width:5px;height:5px;background:var(--pole-color);border-radius:50%}
.sf-relation-list span{font-size:7px;letter-spacing:0;font-weight:600}
.sf-relation-list b{font-size:10px;font-weight:400;font-variant-numeric:tabular-nums}
.sf-relation-note{font-size:10px;line-height:1.7;color:#90a4ab;margin:12px 0 0}
.sf-manual-link{font-size:11px;color:var(--gold,#ddc493);display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid #ffffff16}
.sf-manual-link:focus-visible,.sf-reference summary:focus-visible{outline:2px solid var(--gold,#ddc493);outline-offset:6px}
.sf-map-note{font-size:12px;line-height:1.9;color:#9cafb5;max-width:980px;margin:27px 0 0}
.sf-reference{border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;margin-top:26px;padding:18px 0}
.sf-reference summary{list-style:none;color:#c6c9be;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;gap:15px}
.sf-reference summary::-webkit-details-marker{display:none}
.sf-reference summary>span{color:#ddc493;font-size:17px}
.sf-reference[open] summary>span{transform:rotate(45deg)}
.sf-reference>p{font-size:12px;line-height:1.9;color:#a0b1b6;max-width:900px;margin:22px 0}
.sf-reference dl{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin:25px 0 0}
.sf-reference dl div{min-width:0}
.sf-reference dt{color:#d0d6d3;font-size:12px;font-weight:600}
.sf-reference dd{font-size:12px;line-height:1.8;color:#a0b1b6;margin:5px 0 0}
.sf-nojs{font-size:12px;line-height:1.8;color:#a7b4b8}
@media(max-width:1100px){.sf-instrument{grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);gap:25px;padding:23px}.sf-reading{padding-left:23px}.sf-heading{gap:35px}.sf-keyboard-perspective{padding-inline:5px}.sf-key--color .sf-key-name{font-size:6px}.sf-description{font-size:12px}}
@media(max-width:850px){.sf-section{padding-block:55px}.sf-heading{display:block;margin-bottom:28px}.sf-heading>p{margin-top:22px;max-width:550px;font-size:14px}.sf-instrument{display:block;padding:24px}.sf-stage{max-width:640px;margin:auto}.sf-keyboard{height:clamp(210px,45vw,300px)}.sf-key--natural .sf-key-note{font-size:20px}.sf-key--color .sf-key-note{font-size:15px}.sf-key--color .sf-key-name{font-size:8px}.sf-reading{border-left:0;border-top:1px solid #ffffff1a;margin-top:28px;padding:28px 0 0}.sf-description,.sf-meaning p{min-height:0}.sf-description{font-size:14px}.sf-reading h3{font-size:36px}.sf-relations{max-width:440px}.sf-relation-map{height:145px}.sf-relation-list span{font-size:9px}.sf-relation-list b{font-size:12px}.sf-meaning p{font-size:12px}.sf-note-pitch{font-size:11px}}
@media(max-width:450px){.sf-instrument{padding:19px 12px}.sf-heading h2{font-size:clamp(34px,9vw,42px)}.sf-stage-top{font-size:8px;letter-spacing:.04em;gap:7px}.sf-keyboard-perspective{padding:25px 3px 24px;perspective:700px}.sf-keyboard{height:200px}.sf-key--natural .sf-key-note{font-size:14px}.sf-key--natural .sf-key-name{font-size:8px;top:calc(23% + 25px)}.sf-key--color .sf-key-note{font-size:9px;bottom:20px}.sf-key--color .sf-key-name{display:none}.sf-keyboard-caption{font-size:8px;letter-spacing:.07em}.sf-keyboard-hint{font-size:10px}.sf-toolbar button{font-size:10px}.sf-reading h3{font-size:32px}.sf-description{font-size:13px}.sf-reference dl{grid-template-columns:1fr}.sf-relation-list span{font-size:8px}.sf-relation-list b{font-size:11px}.sf-map-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sf-keyboard,.sf-key,.sf-key::before,.sf-relation-map [data-sf-map-node] circle{transition:none}}