:root{--bg:#16100c;--bg-2:#1e1610;--panel:#ffecd60a;--panel-2:#ffecd613;--line:#ffe2c41f;--line-2:#ffe2c438;--ink:#f6ede3;--ink-dim:#c5b09b;--ink-faint:#9b8775;--accent:#ff8a4c;--accent-2:#ffb07f;--accent-ink:#2a1105;--guide:#7fdcae;--guide-2:#b8f0d2;--guide-ink:#06261a;--wood-1:#d9a066;--wood-2:#b97a3f;--wood-3:#8a5426;--page-bg:radial-gradient(90% 60% at 25% -10%, #ff8a4c21, transparent 60%), radial-gradient(70% 60% at 100% 100%, #7fdcae0d, transparent 60%), #16100c}h1.title{background:repeating-linear-gradient(94deg, #3c1e0a2e 0 2px, transparent 2px 7px), linear-gradient(180deg, #f1c38f, var(--wood-1) 45%, var(--wood-3));color:#0000;-webkit-background-clip:text;background-clip:text}.kalimba-wrap{aspect-ratio:1.12;width:min(100%,680px);margin:0 auto;position:relative}.board{background:radial-gradient(70% 55% at 50% 30%, #ffe6be59, transparent 70%), repeating-linear-gradient(91deg, #5a2d0f21 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(88deg, #ffdcaa12 0 3px, transparent 3px 17px), linear-gradient(180deg, var(--wood-1), var(--wood-2) 55%, var(--wood-3));border-radius:34px 34px 46% 46%/34px 34px 26% 26%;position:absolute;inset:0;box-shadow:inset 0 2px #ffebc873,inset 0 -18px 40px #3c190573,0 30px 60px -20px #000000bf}.hole{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#1b0f07,#0b0603 70%);border-radius:50%;width:15%;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 4px 10px #000c,0 1px #ffe1b459}.bridge{z-index:2;background:linear-gradient(#f5dfa5,#b98c3a 55%,#7c5a1e);border-radius:6px;height:3.2%;position:absolute;top:13%;left:7%;right:7%;box-shadow:0 3px 6px #280f008c,inset 0 1px #fff5d2b3}.saddle{background:#46230c8c;border-radius:4px;height:4%;position:absolute;top:9%;left:9%;right:9%}.tines{touch-action:none;position:absolute;inset:8% 7% 0}.tine{--w:calc(100% / 17);top:0;bottom:0;left:calc(var(--slot) * var(--w));width:var(--w);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;background:0 0;border:0;margin:0;padding:0;position:absolute}.tine:focus-visible{outline:none}.tine:focus-visible .bar{outline:2px solid var(--guide);outline-offset:2px}.bar{width:68%;height:calc(var(--len) * 62%);transform-origin:top;background:linear-gradient(90deg,#8e979c,#f4f7f8 38%,#c9d0d3 55%,#6f777b);border-radius:3px 3px 40% 40%/3px 3px 12% 12%;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;transition:filter .15s,box-shadow .15s;display:flex;position:absolute;top:0;left:16%;box-shadow:0 6px 8px -3px #2812048c,inset 0 -2px #00000026}.tine:hover .bar{filter:brightness(1.08)}.bar .num,.bar .letter,.bar .key{font-family:var(--font-mono);color:#2b2a28;pointer-events:none;text-shadow:0 1px #fff9;font-size:clamp(11px,1.7vw,14px);font-weight:500;line-height:1}.bar .num{position:relative}.bar .num:before{content:attr(data-dots);letter-spacing:-.15em;font-size:.8em;line-height:.9;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.bar .letter{font-size:clamp(10px,1.4vw,12px);display:none}body[data-notation=letters] .bar .num{display:none}body[data-notation=letters] .bar .letter{display:block}.bar .key{color:#4a3b2c;margin-top:4px;font-size:10px;display:none}body.show-keys .bar .key{display:block}.tine.ring .bar{box-shadow:0 6px 8px -3px #2812048c, 0 10px 22px -4px color-mix(in srgb, var(--accent) 85%, transparent);filter:brightness(1.15);animation:.9s ease-out wobble}@keyframes wobble{0%{transform:rotate(0)}8%{transform:rotate(1.4deg)}18%{transform:rotate(-1.1deg)}30%{transform:rotate(.8deg)}44%{transform:rotate(-.5deg)}60%{transform:rotate(.25deg)}to{transform:rotate(0)}}.tine.target .bar{box-shadow:0 0 0 2px var(--guide), 0 12px 24px -4px color-mix(in srgb, var(--guide) 75%, transparent);background:linear-gradient(90deg,#6a9c84,#e7fff3 38%,#bfe9d3 55%,#4d7d66);animation:1.1s ease-in-out infinite beckon}@keyframes beckon{50%{box-shadow:0 0 0 3px var(--guide-2), 0 14px 30px -2px color-mix(in srgb, var(--guide) 90%, transparent)}}.tine.wrong .bar{animation:.3s shake}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.thumb-hint{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#3c1e0a8c;font-size:11px;position:absolute;bottom:3%}.thumb-hint.l{left:12%}.thumb-hint.r{right:12%}.board,.saddle,.bridge,.hole,.thumb-hint{pointer-events:none}@media (width<=600px){.thumb-hint{display:none}}