:root{--bg:#100d0b;--text:#f0e7dd;--dim:#a8988a;--rim:#6d5a49}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0;font-family:system-ui,sans-serif;line-height:1.5}.skip-link{z-index:1;background:var(--text);min-width:44px;min-height:44px;color:var(--bg);padding-inline:.75rem;position:absolute;left:-100vw}.skip-link:focus{top:.5rem;left:.5rem}main{max-width:80rem;margin:0 auto;padding:1.25rem 1rem 2rem}h1{letter-spacing:-.02em;margin:0 0 .25rem;font-size:clamp(1.6rem,4vw,2.4rem)}.lede{max-width:48ch;color:var(--dim);margin:0 0 1rem}#harp{justify-items:center;gap:.6rem;display:grid}@media (width>=62rem){#harp{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) minmax(17rem,21rem);place-items:start stretch;column-gap:2rem}#harp canvas{grid-area:1/1}#harp .hint{text-align:center;grid-area:2/1}#harp .demos{grid-area:1/2/span 2;align-content:start;margin-top:0}}canvas[data-testid=harp]{width:100%;touch-action:none;cursor:pointer;block-size:clamp(19rem,100svh - 17rem,38rem);max-inline-size:52rem;display:block}canvas[data-testid=harp]:focus-visible{outline:3px solid var(--text);outline-offset:4px}.hint{color:var(--dim);margin:0;font-size:.85rem}.demos{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem;margin-top:1.4rem;display:grid}.demos-heading{color:var(--dim);grid-column:1/-1;margin:0;font-size:.95rem}.demos button{text-align:left;color:inherit;font:inherit;cursor:pointer;background:#fff5dc0d;border:1px solid #fff5dc29;border-radius:.5rem;gap:.25rem;padding:.7rem .9rem;display:grid}.demos button:hover{background:#fff5dc17}.demos button[aria-pressed=true]{background:#d6a05c38;border-color:#d6a05c99}.demos button strong{font-weight:600}.demos button span{color:var(--dim);font-size:.85rem;line-height:1.4}.demos button:focus-visible{outline:2px solid var(--accent,#d6a05c);outline-offset:2px}