@import "https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..500;1,6..96,400&family=Instrument+Sans:wght@400;500&family=Italianno&display=swap";:root{--paper:#f4e0e4;--ivory:#faf2e9;--ivory-dim:#efe3d6;--case:#ecc3ce;--case-deep:#dda9b9;--rose:#d59aab;--rose-deep:#c0819a;--plum:#7d5464;--brass:#cfae74;--brass-deep:#a98b57;--red:#b8323f;--ink:#6b3a49;--ink-70:#6b3a49b3;--ink-45:#6b3a4973;--ink-25:#6b3a4940;--ink-12:#6b3a491f;--script:"Italianno", "Segoe Script", cursive;--display:"Bodoni Moda", "Didot", Georgia, serif;--sans:"Instrument Sans", system-ui, "Segoe UI", sans-serif;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");font:400 17px/1.55 var(--sans);color:var(--ink);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{background-color:var(--paper);background-image:radial-gradient(#6b3a491a .8px,#0000 .9px),radial-gradient(2.5rem 1.6rem at 18% 24%,#cfae741f,#0000 70%),radial-gradient(1.8rem 2.2rem at 76% 68%,#cfae741a,#0000 70%),radial-gradient(1.2rem 1.2rem at 62% 15%,#cfae7417,#0000 70%),radial-gradient(95% 75% at 50% -5%,#fffaf6b8,#0000 62%),radial-gradient(120% 90% at 50% 118%,#c0819a2e,#0000 65%);background-size:5px 5px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-attachment:fixed;min-height:100svh;margin:0}body:after{content:"";z-index:90;pointer-events:none;background-image:var(--grain);mix-blend-mode:multiply;opacity:.16;background-size:180px 180px;position:fixed;inset:0}h1,h2{margin:0;font-weight:400}p{margin:0}::selection{background:var(--rose);color:var(--ivory)}:focus-visible{outline:2px solid var(--ink-70);outline-offset:3px}.parlour{place-items:center;min-height:100svh;padding:clamp(1.5rem,5vw,3rem) 1.25rem;display:grid;position:relative;overflow:hidden}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.motes{pointer-events:none;position:absolute;inset:0}.mote{scale:var(--s);mix-blend-mode:multiply;animation:adrift calc(var(--d) * 1.35) var(--delay) ease-in-out infinite;position:absolute}.mote--heart{width:2.6rem;height:2.6rem;fill:var(--rose);opacity:.14;filter:blur(.4px)}.mote--red{fill:var(--red);opacity:.42;filter:none}.mote--ring{border:1px solid var(--rose);opacity:.3;border-radius:50%;width:5.5rem;height:5.5rem}.mote--disc{background:var(--rose);opacity:.16;border-radius:50%;width:1.4rem;height:1.4rem}.halo{aspect-ratio:1;mix-blend-mode:multiply;border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.halo--outer{border:1px dashed var(--rose);opacity:.32;width:min(46rem,92vw);animation:120s linear infinite turnslow}.halo--inner{border:1px solid var(--rose);opacity:.2;width:min(38rem,78vw)}@keyframes turnslow{to{rotate:360deg}}@keyframes adrift{0%,to{translate:0;rotate:-5deg}50%{translate:0 -2.4rem;rotate:5deg}}.piano{z-index:1;border:1px solid var(--ink-25);width:min(37rem,100%);color:var(--ink);background-color:var(--case);background-image:repeating-linear-gradient(92deg,#6b3a490b 0 1px,#0000 1px 7px),radial-gradient(120% 85% at 50% -8%,#fffcf9bf,#0000 62%),radial-gradient(100% 70% at 50% 112%,#c0819a47,#0000 68%);border-radius:16px 16px 10px 10px;padding:1.6rem 1.6rem 1.4rem;animation:1.1s cubic-bezier(.22,1,.36,1) both settle;position:relative;rotate:-.3deg;box-shadow:inset 0 1px #fffcf9cc,inset 0 -2px 10px #c0819a40,0 26px 44px -30px #6b3a4973}@keyframes settle{0%{opacity:0;rotate:-1deg;scale:.985}}.screw{background:radial-gradient(circle at 35% 30%, #e6cd9a, var(--brass) 72%);border-radius:50%;width:8px;height:8px;position:absolute;box-shadow:inset 0 0 0 1px #6b3a494d}.screw:before{content:"";background:#6b3a4966;height:1px;position:absolute;inset:45% 18% auto;rotate:-28deg}.screw--tl{top:9px;left:9px}.screw--tr{top:9px;right:9px}.screw--bl{bottom:9px;left:9px}.screw--br{bottom:9px;right:9px}.foot{background:linear-gradient(#e0c48c, var(--brass-deep));clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);opacity:.85;width:3.4rem;height:1.05rem;position:absolute;bottom:-1rem}.foot--left{left:14%}.foot--right{right:14%}.lid{text-align:center;border-bottom:1px solid var(--ink-12);padding:.35rem 2.5rem 1.15rem}.maker{font-family:var(--script);color:var(--plum);text-shadow:0 1px #fffcf9cc;font-size:clamp(2.7rem,9vw,3.8rem);line-height:.9}.plate{font-family:var(--display);color:var(--ink);margin-top:.5rem;font-size:clamp(1rem,3.2vw,1.3rem);font-style:italic;line-height:1.2}.plate__sub{letter-spacing:.3em;text-transform:uppercase;color:var(--ink-70);margin-top:.6rem;font-size:.6rem;font-style:normal;display:block}.note{text-align:center;font-family:var(--display);color:var(--ink);padding:1.05rem .25rem 1.15rem;font-size:clamp(.95rem,2.6vw,1.1rem);font-style:italic;line-height:1.4;animation:.8s both fade}@keyframes fade{0%{opacity:0;translate:0 -.3rem}}.note__mark{border-left:1px solid var(--ink-25);color:var(--rose-deep);margin-left:.7rem;padding-left:.7rem;animation:.5s both fade;display:inline-block}.keyboard{background:linear-gradient(#c0819a6b,#c0819a3d);border-radius:8px;padding:.6rem .6rem .75rem;position:relative;box-shadow:inset 0 2px 5px #6b3a4933}.keyboard__whites{gap:2px;display:flex}.key{border:1px solid var(--ink-25);cursor:pointer;font:400 .55rem/1 var(--sans);padding:0;transition:translate 90ms,filter .16s}.key__letter{text-transform:uppercase;opacity:.3;font-size:.5rem;display:block}.key--white{height:clamp(6.5rem,22vw,8.5rem);color:var(--ink-70);background:linear-gradient(var(--ivory) 68%, var(--ivory-dim) 100%);border-radius:2px 2px 6px 6px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:.6rem;display:flex;box-shadow:inset 0 -5px 6px -5px #6b3a4940,0 2px #6b3a4929}.key--black{width:calc(100% / var(--whites,15) * .62);color:#faf2e9d9;background:linear-gradient(#9a7180 55%, var(--plum) 100%);border-color:#0000;border-radius:2px 2px 6px 6px;justify-content:center;align-items:flex-end;height:clamp(4rem,13.5vw,5.2rem);padding-bottom:.45rem;display:flex;position:absolute;top:.6rem;translate:-50%;box-shadow:0 2px #6b3a494d}.key:hover{filter:brightness(1.03)}.key--white.is-struck,.key--white:active{background:linear-gradient(#fffaf4 60%, var(--ivory-dim) 100%);translate:0 2px;box-shadow:inset 0 -3px 5px -3px #6b3a4947}.key--black.is-struck,.key--black:active{box-shadow:none;background:linear-gradient(#ab8391 55%,#8b6070 100%);translate:-50% 2px}.controls{align-items:center;gap:.6rem;margin-top:1.2rem;display:flex}.crank,.hush{border:1px solid var(--ink-25);font:400 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:6px;transition:background-color .2s,translate .11s}.crank{color:var(--ink);background:linear-gradient(#f0dcae, var(--brass));align-items:center;gap:.6rem;padding:.75rem 1.1rem;display:flex;box-shadow:0 1px #6b3a4933}.crank:active{box-shadow:none;translate:0 2px}.crank__arm{border:1.5px solid var(--ink-70);border-radius:50%;width:.95rem;height:.95rem;position:relative}.crank__arm:after{content:"";background:var(--ink-70);transform-origin:top;width:1px;height:.55rem;position:absolute;top:50%;left:50%;translate:-50%}.crank.is-winding .crank__arm{animation:2.4s linear infinite turn}@keyframes turn{to{rotate:360deg}}.hush{color:var(--ink-70);background:#faf2e98c;margin-left:auto;padding:.75rem .9rem}.hush[aria-pressed=true]{color:var(--ink-45);text-decoration:line-through}.hush:hover,.crank:hover{filter:brightness(1.04)}.fineprint{text-align:center;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-70);margin-top:1.05rem;font-size:.58rem}@media (width<=430px){.piano{padding:1.15rem 1rem 1.1rem}.lid{padding-inline:1rem}.controls{flex-wrap:wrap}.hush{margin-left:0}.key__letter{display:none}}@media (prefers-reduced-motion:reduce){.mote,.halo--outer,.piano,.note,.crank.is-winding .crank__arm{animation:none}.key{transition:none}}