@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:Manrope,'Noto Sans JP',sans-serif;color:#e9edeb;background:#151a1b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#26313266,transparent 65%);min-height:100dvh}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c3d8be;outline-offset:4px}button{border:0}#app{max-width:1600px;margin:auto;padding:0 4.5vw}header{height:100px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:#f1eee4;font-size:27px;font-weight:700;letter-spacing:6px;display:flex;align-items:center;gap:12px}.brand-icon{letter-spacing:-5px;font-size:34px;transform:rotate(180deg);color:#b5c6aa}.brand-sub{font-size:10px;letter-spacing:2px;color:#a2aaa7;margin-left:12px}.header-right{display:flex;align-items:center;gap:30px}.instrument{font-size:10px;letter-spacing:2px;color:#8b9692}.icon{border:1px solid #ffffff30;border-radius:50%;background:transparent;width:27px;height:27px;color:#bec6c1}.intro{display:flex;justify-content:space-between;align-items:end;padding:55px 2px 39px}.eyebrow{font-size:10px;letter-spacing:3px;color:#b4c4a9}h1{font-size:36px;font-weight:500;letter-spacing:4px;margin:16px 0 12px}.intro p{font-size:13px;color:#8f9a97;letter-spacing:1px;margin:0}.sound-status{text-align:right;font-size:12px;color:#c3d1ba}.sound-status small{display:block;color:#75827d;font-size:10px;margin-top:7px;letter-spacing:1px}.piano{background:#242a2b;border:1px solid #42494a;border-radius:15px;box-shadow:0 35px 70px #0006,0 2px 0 #ffffff09 inset;overflow:hidden}.toolbar{min-height:91px;padding:20px 28px;display:flex;gap:30px;align-items:center;border-bottom:1px solid #ffffff08}.control{display:flex;align-items:center;gap:14px}.control-label,.volume label{font-size:12px;color:#a1aaa6;white-space:nowrap}.segments{display:flex;background:#171d1e;padding:4px;border:1px solid #ffffff05;border-radius:7px;gap:3px}.segments button{font-size:12px;border-radius:4px;padding:9px 16px;background:transparent;color:#8d9894;white-space:nowrap}.segments .selected{background:#bac9b0;color:#222c23;box-shadow:0 2px 5px #0004}.volume{margin-left:auto;display:flex;align-items:center;gap:14px}.volume input{width:90px;accent-color:#b9c9ad;height:3px}.expand{background:transparent;font-size:12px;color:#bdc6c1;white-space:nowrap}.expand span{font-size:24px;vertical-align:middle;margin-right:7px}.navigation{display:flex;align-items:center;gap:15px;padding:22px 28px}.navigation>button{background:#303738;border:1px solid #ffffff0d;border-radius:5px;font-size:24px;width:29px;height:38px;line-height:1}.overview-wrap{position:relative;width:360px;height:35px}.overview{height:100%;display:flex;position:relative;border:1px solid #77827c;border-radius:3px;overflow:hidden}.mini{flex:1;background:#7b8680;border-right:1px solid #303b35;position:relative}.mini.black{background:#171e1b;position:absolute;height:61%;z-index:1}.mini-window{position:absolute;top:0;height:100%;background:#d5e2c54a;border:2px solid #c0d2b1;z-index:2;pointer-events:none}.overview-wrap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.range-readout{font-size:11px;letter-spacing:1px;color:#a4afa7;margin-left:auto}.key-bed{padding:0 15px 10px;background:#111718;box-shadow:0 8px 15px #0008 inset}.felt{height:7px;background:#70504b;border-top:3px solid #161818;box-shadow:0 2px 3px #0009}#keys{position:relative;height:300px;touch-action:none;user-select:none;-webkit-user-select:none}.key{position:absolute;top:0;touch-action:none;border-radius:0 0 5px 5px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding:0 0 25px;transition:background .06s}.white{height:100%;background:linear-gradient(90deg,#d4d2c9 0%,#f8f7ef 8%,#efeee5 86%,#cccac2 100%);border:1px solid #777d76;box-shadow:inset 0 -7px 0 #b7b8ad,inset 0 -9px 1px #fff9,0 4px 3px #0005;color:#626b65}.black{height:63%;z-index:2;background:linear-gradient(90deg,#080d0e,#333b3c 15%,#202728 65%,#060a0b);border:1px solid #080b0b;border-top:0;box-shadow:inset 0 -9px 0 #0a0f10,inset 0 -11px 1px #4b5352,3px 7px 6px #0007;color:#9ea8a2;padding-bottom:22px}.key span{font-size:11px;pointer-events:none;white-space:nowrap}.key .octave{font-size:9px;margin-top:4px;opacity:.6}.white.active{background:linear-gradient(90deg,#a9b89b,#d7e4c8 20%,#c2d2b2 90%,#96a88b);box-shadow:inset 0 -3px 0 #8e9e81;transform:translateY(3px);height:calc(100% - 3px)}.black.active{background:linear-gradient(90deg,#28352c,#657b5d,#2d3f30);transform:translateY(3px)}.piano-footer{height:47px;display:flex;justify-content:space-between;align-items:center;padding:0 27px;color:#7f8b85;font-size:9px;letter-spacing:1.5px}.piano-footer b{font-weight:400;margin-left:8px}.center-note{letter-spacing:4px;color:#a6b0a7;font-size:13px}.center-note i{font-family:Georgia,serif;letter-spacing:0;font-size:16px;margin-left:7px;color:#7d8c80}.page-footer{display:flex;justify-content:space-between;gap:20px;margin:25px 2px;color:#73817a;font-size:11px}.rotate{font-size:19px;margin-left:8px}dialog{background:#232c29;color:#e9eee5;border:1px solid #63725f;border-radius:16px;padding:38px;max-width:520px;width:90%;line-height:1.9}dialog::backdrop{background:#0009;backdrop-filter:blur(7px)}dialog p{font-size:14px;color:#b6c0b8}dialog a{color:#cee1bb}dialog h2{font-size:22px}dialog h3{font-size:15px}#close{position:absolute;top:12px;right:17px;font-size:25px;background:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;background:#d7e5cc;color:#1c291b;border-radius:8px;padding:12px 20px;font-size:13px;max-width:90%;display:none}.focus header,.focus .intro,.focus .page-footer{display:none}.focus #app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);max-width:none}.focus .piano{height:100dvh;border-radius:0;display:flex;flex-direction:column}.focus .key-bed{flex:1;min-height:0}.focus #keys{height:calc(100% - 7px)}
@media(min-width:1500px){#keys{height:360px}.intro{padding-top:75px}}
@media(max-width:1000px){.toolbar{gap:18px;padding:16px}.control{gap:8px}.segments button{padding:8px 12px}.brand-sub{display:none}.volume input{width:65px}.intro{padding-top:38px}h1{font-size:30px}.desktop-tip{display:none}}
@media(max-width:600px) and (orientation:portrait){#app{padding:0 18px}header{height:76px}.instrument{display:none}.intro{padding:32px 0}.intro h1{font-size:26px;letter-spacing:2px}.sound-status{display:none}.eyebrow{font-size:9px}.toolbar{flex-wrap:wrap;gap:15px;justify-content:space-between}.control-label{display:none}.volume{margin-left:0}.navigation{padding:15px 12px;gap:8px}.overview-wrap{flex:1}.range-readout{display:none}.key-bed{padding:0 5px 7px}#keys{height:310px}.key span{font-size:8px;writing-mode:vertical-rl}.key .octave{font-size:8px}.black span{display:none}.piano-footer{padding:0 12px;font-size:8px}.center-note{display:none}.page-footer{flex-direction:column;gap:6px;font-size:11px}}
@media(max-height:600px) and (orientation:landscape){#app{padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}header,.intro,.page-footer{display:none}.piano{height:100dvh;border-radius:0;display:flex;flex-direction:column}.toolbar{min-height:57px;padding:7px 16px;gap:20px}.segments button{padding:6px 13px}.navigation{padding:9px 16px;gap:12px}.overview-wrap{height:26px;width:310px}.navigation>button{height:28px}.key-bed{flex:1;min-height:0}#keys{height:calc(100% - 7px)}.piano-footer{height:27px;flex-shrink:0}.key{padding-bottom:17px}.black{padding-bottom:17px}.key span{font-size:10px}.key .octave{font-size:8px;margin-top:2px}}
.white span:first-child{border-radius:5px;background:#91a7c126;color:#65778a;padding:7px 4px;min-width:70%;text-align:center;font-weight:600;font-size:14px}.white[data-note="60"] span:first-child,.white[data-note="62"] span:first-child,.white[data-note="64"] span:first-child,.white[data-note="65"] span:first-child,.white[data-note="67"] span:first-child,.white[data-note="69"] span:first-child,.white[data-note="71"] span:first-child{background:#aaa0d12a;color:#8678a8}.white[data-note="72"] span:first-child,.white[data-note="74"] span:first-child,.white[data-note="76"] span:first-child,.white[data-note="77"] span:first-child,.white[data-note="79"] span:first-child,.white[data-note="81"] span:first-child,.white[data-note="83"] span:first-child{background:#83bcb328;color:#537e77}.black{background:linear-gradient(90deg,#070a0b 0%,#181e1e 8%,#414848 24%,#1d2424 65%,#070b0b 93%)}@media(max-height:600px) and (orientation:landscape){.white span:first-child{font-size:14px;padding:7px 2px}.key .octave{font-size:10px}}@media(max-width:600px) and (orientation:portrait){.white span:first-child{font-size:9px;padding:5px 0;min-width:0;background:transparent!important}}

.audio-status{min-height:54px;display:flex;align-items:center;justify-content:flex-end;color:#aab9a0;font-size:12px;padding:8px 2px}.focus .audio-status{display:none}@media(max-height:600px) and (orientation:landscape){.audio-status{display:none}}

.brand{letter-spacing:1.5px}.center-note{letter-spacing:1px}@media(max-width:600px){.brand{font-size:24px;gap:10px}}
html{touch-action:manipulation}.key{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}