*{box-sizing:border-box;margin:0;padding:0}body{background:#000;overflow:hidden}body.piano-page{overflow:hidden}#canvas-container{z-index:0;width:65%;height:100%;position:fixed;top:0;left:0}#overlay{z-index:1;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:65%;height:100%;display:flex;position:fixed;top:0;left:0}.title{color:#fff;letter-spacing:.05em;text-align:center;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:clamp(2rem,6.5vw,6rem);font-weight:700}.subtitle{color:#30e741;letter-spacing:.2em;text-transform:uppercase;margin-top:.5rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:clamp(1rem,3vw,2rem);font-weight:300}#welcome-line{color:#ffffff59;letter-spacing:.18em;min-height:1.2em;margin-top:1.4rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:clamp(.6rem,1.2vw,.8rem);font-weight:300}#welcome-cursor{color:#30e741;animation:.75s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.project-nav{pointer-events:all;grid-template-columns:repeat(3,1fr);gap:1.2rem 1.5rem;width:420px;margin-top:3rem;padding-top:3rem;display:grid}.project-btn{box-sizing:border-box;color:#ffffffbf;letter-spacing:.2em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);cursor:pointer;text-align:center;background:#000000a6;border:1px solid #ffffff8c;justify-content:center;align-items:center;padding:.6rem 1.4rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9rem;font-weight:400;text-decoration:none;transition:color .3s,background .3s,border-color .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 12px #0006}.project-btn:hover,.project-btn:focus{color:#30e741;background:#000000d9;border-color:#ffffffd9}.back-btn{color:#fff6;letter-spacing:.15em;text-transform:uppercase;z-index:10;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.85rem;text-decoration:none;transition:color .2s;position:fixed;top:1.5rem;left:1.5rem}.back-btn:hover{color:#fff}#piano-canvas{width:65%;height:100%;position:fixed;top:0;left:0}#explode-controls{z-index:10;opacity:0;flex-direction:row;align-items:center;gap:2rem;transition:opacity .6s;display:flex;position:fixed;bottom:2rem;left:32.5%;transform:translate(-50%)}.ctrl-group{flex-direction:column;align-items:center;gap:.5rem;display:flex}#explode-controls.visible{opacity:1}#explode-controls label{letter-spacing:.25em;color:#ffffff59;text-transform:lowercase;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.7rem;font-weight:300}#explode-slider,#volume-slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:#fff3;outline:none;width:180px;height:1px}#explode-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px}#explode-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:10px;height:10px}#volume-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:10px;height:10px}#writeup-panel{z-index:5;background:#000;border-left:1px solid #ffffff12;width:35%;height:100%;position:fixed;top:0;right:0;overflow-y:auto}.wu-inner{flex-direction:column;gap:2.5rem;padding:3.5rem 1.8rem 4rem;display:flex}.wu-section{flex-direction:column;gap:.9rem;display:flex}.wu-heading{letter-spacing:.35em;text-transform:uppercase;color:#30e741;border-bottom:1px solid #ffffff14;padding-bottom:.6rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:1rem;font-weight:400}.wu-subheading{letter-spacing:.2em;text-transform:uppercase;color:#30e741;margin-top:.4rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.82rem;font-weight:400}.wu-body{color:#ffffff8c;letter-spacing:.02em;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.82rem;font-weight:300;line-height:1.75}.wu-table{border-collapse:collapse;color:#ffffff8c;width:100%;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.78rem;font-weight:300}.wu-table td{vertical-align:top;padding:.18rem .3rem}.wu-table td.qty{color:#ffffff38;white-space:nowrap;width:2.8rem}.wu-table .note{color:#ffffff40;font-size:.7rem}.wu-pdf-link{letter-spacing:.2em;text-transform:uppercase;color:#ffffff4d;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.68rem;text-decoration:none;transition:color .2s}.wu-pdf-link:hover{color:#fff}.wu-code-details{margin-top:.6rem}.wu-code-details summary{letter-spacing:.2em;text-transform:uppercase;color:#ffffffbf;cursor:pointer;-webkit-user-select:none;user-select:none;background:#0006;border:1px solid #fff6;align-items:center;gap:.5rem;padding:.45rem 1rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.72rem;font-weight:400;list-style:none;transition:color .2s,border-color .2s;display:inline-flex}.wu-code-details summary:hover{color:#fff;border-color:#ffffffd9}.wu-code-details summary::-webkit-details-marker{display:none}.wu-code-details summary:before{content:"+";color:#30e741;font-size:.9rem;line-height:1}.wu-code-details[open] summary:before{content:"−";color:#30e741}.wu-code{color:#ffffff80;white-space:pre;background:#ffffff0a;border:1px solid #ffffff14;border-radius:2px;margin-top:.6rem;padding:1rem;font-family:monospace;font-size:.72rem;line-height:1.6;overflow-x:auto}#chord-display{letter-spacing:.35em;text-transform:uppercase;color:#30e741;pointer-events:none;z-index:5;text-align:center;min-height:1.8rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.82rem;font-weight:400;position:fixed;top:2rem;left:32.5vw;transform:translate(-50%)}.wu-sw-gallery{flex-direction:column;gap:.5rem;margin-top:.6rem;display:flex}.wu-sw-img{border:1px solid #ffffff14;width:100%;display:block}.wu-video{border:1px solid #ffffff14;width:100%;margin-top:.4rem;display:block}.wu-schematic{background:#ffffff05;border:1px solid #ffffff14;width:100%;height:420px;margin-top:.4rem}#play-hint{letter-spacing:.3em;text-transform:lowercase;color:#ffffff2e;pointer-events:none;z-index:5;opacity:0;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.6rem;font-weight:300;transition:opacity .8s;position:fixed;bottom:4.8rem;left:32.5%;transform:translate(-50%)}#play-hint.visible{opacity:1}#key-hint-popup{z-index:20;-webkit-backdrop-filter:blur(10px);text-align:center;opacity:0;pointer-events:none;background:#000000d1;border:1px solid #ffffff8c;flex-direction:column;align-items:center;gap:1rem;padding:1.6rem 2rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;transition:opacity .4s;display:flex;position:fixed;top:50%;left:32.5%;transform:translate(-50%,-50%);box-shadow:0 0 12px #0006}#key-hint-popup.visible{opacity:1;pointer-events:all}#key-hint-text{letter-spacing:.15em;text-transform:uppercase;color:#ffffffb3;margin:0;font-size:.72rem;line-height:1.7}#key-hint-keys{letter-spacing:.3em;color:#30e741;margin:0;font-size:.85rem}#key-hint-close{letter-spacing:.2em;text-transform:uppercase;color:#ffffffbf;cursor:pointer;background:#000000a6;border:1px solid #ffffff8c;margin-top:.4rem;padding:.45rem 1.2rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.72rem;transition:color .2s,border-color .2s}#key-hint-close:hover{color:#fff;border-color:#ffffffe6}#mobile-piano{touch-action:none;-webkit-user-select:none;user-select:none;background:#000;border-top:1px solid #ffffff14;width:100%;display:none}.mk-keys{width:100%;height:88px;position:relative}.mk-white{box-sizing:border-box;cursor:pointer;background:#e4e4e4eb;border:1px solid #0003;border-top:none;border-radius:0 0 4px 4px;width:14.2857%;height:100%;transition:background 60ms;position:absolute}.mk-white[data-note=C]{left:0%}.mk-white[data-note=D]{left:14.2857%}.mk-white[data-note=E]{left:28.5714%}.mk-white[data-note=F]{left:42.8571%}.mk-white[data-note=G]{left:57.1429%}.mk-white[data-note=A]{left:71.4286%}.mk-white[data-note=B]{left:85.7143%}.mk-white.mk-active{background:#30e741}.mk-label{letter-spacing:.08em;color:#00000047;pointer-events:none;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.48rem;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.mk-black{box-sizing:border-box;cursor:pointer;z-index:2;background:#181818;border:1px solid #ffffff0f;border-top:none;border-radius:0 0 3px 3px;width:8.57143%;height:56%;transition:background 60ms;position:absolute;top:0}.mk-black[data-note=C\#]{left:10%}.mk-black[data-note=D\#]{left:24.2857%}.mk-black[data-note=F\#]{left:52.8571%}.mk-black[data-note=G\#]{left:67.1429%}.mk-black[data-note=A\#]{left:81.4286%}.mk-black.mk-active{background:#20a030}.ap-logo-wrap{border-bottom:1px solid #ffffff0d;justify-content:center;padding-bottom:1rem;display:flex}.ap-logo{opacity:.7;width:auto;height:44px;transition:opacity .25s}.ap-logo:hover{opacity:.85}#about-panel{z-index:5;background:#000;border-left:1px solid #ffffff12;width:35%;height:100%;position:fixed;top:0;right:0;overflow-y:auto}.ap-mt{margin-top:.8rem}.ap-row-gap{height:.6rem}.ap-links{flex-direction:column;gap:.5rem;display:flex}@media (max-width:768px){body,body.piano-page{height:auto;overflow:hidden auto}body.home-page #canvas-container{width:100%;height:55vh;position:relative}body.home-page #overlay{width:100%;height:55vh;position:absolute}.project-nav{grid-template-columns:1fr 1fr;width:90vw;margin-top:1.2rem;margin-left:auto;margin-right:auto;padding-top:0}.project-btn{letter-spacing:.1em;padding:.5rem .6rem;font-size:.72rem}#about-panel{border-top:1px solid #ffffff12;border-left:none;width:100%;height:auto;position:relative;top:auto;right:auto}body.home-page .wu-inner{padding-top:1.2rem}#piano-canvas{width:100%;height:55vh;position:relative}#writeup-panel{border-top:1px solid #ffffff12;border-left:none;width:100%;height:auto;position:relative;top:auto;right:auto}#explode-controls{opacity:1;border-bottom:1px solid #ffffff0f;justify-content:center;padding:1rem 0;position:relative;top:auto;bottom:auto;left:auto;transform:none}#chord-display{font-size:1.5rem;left:50%;transform:translate(-50%)}#mobile-piano{display:block}#play-hint{display:none}}#loader{z-index:10;background:#ffffff1a;width:100%;height:3px;transition:opacity .5s;position:fixed;top:0;left:0}#loader-bar{background:#fff;width:0%;height:100%;transition:width .2s}#loader-label{letter-spacing:.25em;color:#ffffff59;z-index:10;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.75rem;font-weight:300;transition:opacity .5s;position:fixed;top:1.2rem;left:50%;transform:translate(-50%)}