:root{--paper:#f7f0e2;--paper-deep:#e9dcc4;--ink:#33251a;--ink-soft:#7c6552;--walnut:#6b432a;--walnut-dark:#3f2416;--walnut-light:#8d5c3a;--wood-lo:#bd7838;--wood-hi:#e0aa5c;--crimson:#a8392c;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}body{min-height:100dvh;font-family:var(--sans);color:var(--ink);background-color:var(--paper);background-image:radial-gradient(ellipse 80% 50% at 50% 0%, #ffffffb3, transparent 70%), radial-gradient(ellipse 60% 45% at 50% 62%, #c69a5c29, transparent 70%), linear-gradient(180deg, var(--paper), var(--paper-deep));background-attachment:fixed;margin:0;padding:2rem 1.25rem;line-height:1.6;display:flex}main{text-align:center;width:100%;max-width:64rem;margin:auto}a{color:#8a4a22}.skip-link{z-index:2;color:var(--paper);background:var(--walnut-dark);border-radius:0 0 .5rem .5rem;padding:.5rem 1rem;transition:top .12s ease-out;position:absolute;top:-3rem;left:1rem}.skip-link:focus{top:0}.masthead{margin-bottom:clamp(1.5rem,4vw,2.5rem)}h1{font-family:var(--serif);letter-spacing:-.015em;color:var(--ink);margin:0 0 .9rem;font-size:clamp(2.4rem,7vw,3.75rem);font-weight:400;line-height:1.05}.tagline{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0;font-size:clamp(.7rem,2vw,.78rem);font-weight:600}.stage{justify-content:center;display:flex}.xylophone{background-color:var(--walnut);background-image:linear-gradient(180deg, var(--walnut-light), var(--walnut) 22%, var(--walnut-dark));touch-action:none;user-select:none;cursor:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"><line x1=\"22\" y1=\"22\" x2=\"52\" y2=\"52\" stroke=\"%234a3418\" stroke-width=\"7.4\" stroke-linecap=\"round\"/><line x1=\"22\" y1=\"22\" x2=\"52\" y2=\"52\" stroke=\"%23ecd7ae\" stroke-width=\"4.4\" stroke-linecap=\"round\"/><circle cx=\"15\" cy=\"15\" r=\"11.5\" fill=\"%23222831\"/><circle cx=\"11.4\" cy=\"11.2\" r=\"3\" fill=\"%23fff\" opacity=\".45\"/></svg>") 15 15,pointer;border-radius:1.25rem;width:100%;max-width:48rem;margin-inline:auto;padding:1.6rem 1.4rem 1.8rem;position:relative;box-shadow:inset 0 1px #fff3,inset 0 -3px #00000052,0 22px 45px -14px #3a210e8c,0 3px 8px -2px #3a210e59}.xylophone:before{content:"";border-radius:inherit;pointer-events:none;background-image:repeating-linear-gradient(92deg,#0000000f 0 2px,#ffffff08 2px 5px,#0000 5px 12px);position:absolute;inset:0}.bars{--zone:clamp(9rem, 22vw, 16rem);align-items:flex-start;gap:.9rem;display:flex;position:relative}.slot{flex-direction:column;flex:1 1 0;align-items:center;min-width:0;display:flex}.bar-zone{width:100%;height:var(--zone);align-items:center;display:flex}.bar{width:100%;height:calc(var(--zone) * (1 - var(--t) * .42));font:inherit;color:inherit;background-color:var(--wood-lo);background-color:color-mix(in oklab, var(--wood-lo), var(--wood-hi) calc(var(--t) * 100%));cursor:inherit;background-image:linear-gradient(#ffffff42,#fff0 20%,#00000014 68%,#0003),repeating-linear-gradient(88deg,#5a2d0a12 0 1px,#0000 1px 6px);border:none;border-radius:.3rem;justify-content:center;align-items:flex-end;padding:0 0 .72rem;transition:transform 80ms ease-out,filter 80ms ease-out,box-shadow 80ms ease-out;display:flex;position:relative;box-shadow:inset 0 1px #ffffff59,inset 0 -1px #00000038,0 6px 12px -6px #281405b3}.bar:before,.bar:after{content:"";background:#2e160885;border-radius:50%;width:.4rem;height:.4rem;position:absolute;left:50%;translate:-50%;box-shadow:0 1px #ffffff38}.bar:before{top:14%}.bar:after{bottom:30%}.bar:hover{filter:brightness(1.07)}.bar:focus-visible{outline-offset:3px;outline:3px solid #ffe8a8}.bar.struck{filter:brightness(1.22)saturate(1.08);transform:translateY(3px)scaleY(.985);box-shadow:inset 0 1px #ffffff73,0 0 22px #ffd68c8c,0 3px 7px -5px #281405b3}.bar-key{font-family:var(--sans);letter-spacing:.05em;color:#2e1402;text-shadow:0 1px #ffffff38;pointer-events:none;font-size:clamp(.95rem,1.9vw,1.2rem);font-weight:700}.tube{width:46%;height:calc(2.2rem + (1 - var(--t)) * 6rem);margin-top:calc(.35rem - var(--zone) * var(--t) * .21);background:linear-gradient(90deg,#4f3b15 0%,#856828 11%,#c8ab5e 30%,#f6e8b6 45%,#e0c375 54%,#a5822f 74%,#6a5220 89%,#443212 100%);border-radius:.12rem .12rem .55rem .55rem;box-shadow:0 -1px 2px #00000073,0 10px 14px -9px #000c,inset 0 -.7rem .7rem -.6rem #0000008c}.hint{max-width:58rem;color:var(--ink-soft);margin:1.4rem auto 0;font-size:clamp(1rem,1.4vw,1.12rem)}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem;margin-top:1.1rem;display:flex}.control{font-family:var(--sans);color:var(--ink);cursor:pointer;background:linear-gradient(#fffaef,#eddfc4);border:1px solid #5c3a224d;border-radius:999px;align-items:center;gap:.55rem;padding:.65rem 1.3rem;font-size:.92rem;font-weight:600;transition:transform 90ms ease-out,box-shadow 90ms ease-out,background .14s ease-out;display:inline-flex;box-shadow:inset 0 1px #ffffffe6,0 3px 7px -3px #4e301666}.control:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px #ffffffe6,0 5px 11px -4px #4e301673}.control:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px #ffffffb3}.control:focus-visible{outline:3px solid var(--walnut-light);outline-offset:2px}.control:disabled{color:#7c655299;box-shadow:none;cursor:not-allowed;background:linear-gradient(#f4ecdd,#e6dac6)}.control-dot{background:var(--crimson);border-radius:50%;width:.62rem;height:.62rem}.control:disabled .control-dot{background:#7c655273}.control-tri{border-top:.36rem solid #0000;border-bottom:.36rem solid #0000;border-left:.6rem solid;width:0;height:0}.control-record.recording{color:#fff8f0;background:linear-gradient(#c04a3a,#9a3126);border-color:#86281e;animation:1.4s ease-in-out infinite pulse}.control-record.recording .control-dot{background:#fff2ea}@keyframes pulse{0%,to{box-shadow:inset 0 1px #ffffff40,0 0 #a8392c73}50%{box-shadow:inset 0 1px #ffffff40,0 0 0 .5rem #a8392c00}}.status{font-variant-numeric:tabular-nums;color:var(--ink-soft);margin:0;font-size:.86rem}@media (width<=44rem){.tagline{letter-spacing:.11em}.xylophone{padding:1.1rem 1.1rem 1.2rem}.bars{flex-direction:column;gap:.3rem}.slot{flex-direction:row;align-items:center;gap:.6rem;width:100%}.bar-zone{flex:0 0 calc((100% - 5rem) * (1 - var(--t) * .42));height:auto}.bar{align-items:center;width:100%;height:2.75rem;padding:0}.bar:before,.bar:after{top:50%;translate:-50% -50%}.bar:before{top:50%;left:15%}.bar:after{inset:50% 15% auto auto;translate:50% -50%}.tube{width:calc(1.2rem + (1 - var(--t)) * 3.4rem);background:linear-gradient(#4f3b15 0%,#856828 11%,#c8ab5e 30%,#f6e8b6 45%,#e0c375 54%,#a5822f 74%,#6a5220 89%,#443212 100%);border-radius:.12rem .55rem .55rem .12rem;flex:none;height:.72rem;margin-top:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}