:root{color-scheme:dark;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#eef5ef;background:#243d3e}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#243d3e url('rain-painting.png') center/cover fixed no-repeat}body:before{content:"";position:fixed;inset:0;background:linear-gradient(#102e344f,#15333724 45%,#112f354f);pointer-events:none}canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}main{position:relative;max-width:920px;min-height:100svh;padding:45px 28px 40px;margin:auto;display:flex;flex-direction:column;justify-content:space-between}header{text-align:center}h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:26px;font-weight:400;letter-spacing:.17em;margin:0;text-shadow:0 2px 14px #1b383b}.instrument{width:100%;max-width:570px;margin:26px auto}.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px}.pad{aspect-ratio:1;position:relative;border:0;background:none;border-radius:50%;isolation:isolate;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pad:before{content:"";position:absolute;inset:14%;z-index:-1;background:radial-gradient(ellipse at 32% 20%,#ffffff3a,transparent 35%),radial-gradient(ellipse at 66% 85%,#dcf4e42e,transparent 65%),#c2e5dc08;border:1px solid #e6ffef60;border-top-color:#f3fffab0;border-radius:48% 52% 50% 47% / 54% 45% 55% 46%;box-shadow:inset 2px 4px 10px #ffffff20,inset -3px -5px 12px #0a252c30,0 7px 16px #061f291c;backdrop-filter:blur(5px);transition:transform .35s,background .4s,box-shadow .4s}.pad:nth-child(2n):before{border-radius:53% 47% 45% 55% / 46% 52% 48% 54%}.pad:nth-child(3n+2){transform:translateY(14px)}.pad:nth-child(3n){transform:translateY(-8px)}.pad:hover:before{transform:scale(1.055);border-color:#fff9}.pad.active:before{transform:scale(1.09);background:#e1fff33a;box-shadow:inset 2px 4px 14px #ffffff40,0 0 30px #e0ffed30}.orbit{position:absolute;inset:8%;border:1px solid #e2fff035;border-radius:50%;opacity:0;transition:opacity .7s}.alive .orbit{opacity:1}.playback{display:flex;align-items:center;justify-content:center;gap:28px}.transport{display:grid;place-items:center;width:55px;height:55px;border:1px solid #e4f3ea60;border-radius:50%;background:#1d41445c;color:#ecf5ee;backdrop-filter:blur(12px);cursor:pointer;touch-action:manipulation}.transport svg{width:22px;height:22px}.transport:disabled{opacity:.4;cursor:wait}.master-volume{display:flex;gap:14px;align-items:center;width:190px;color:#e8f1e9}.master-volume svg{width:22px;height:22px;flex-shrink:0}input[type=range]{width:100%;min-width:0;accent-color:#dcebdd;cursor:pointer;height:36px}button:focus-visible,input:focus-visible{outline:2px solid #f0f5cb;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only.error{position:static;width:auto;height:auto;clip:auto;white-space:normal;text-align:center;font-size:14px;margin:12px 0 0;color:#fff}@media(max-width:650px){main{padding:32px 22px 34px}h1{font-size:23px}.pads{gap:8px 0}.pad:before{inset:11%}.instrument{margin:25px auto;max-width:420px}.playback{gap:24px}.master-volume{width:155px}.pad:nth-child(3n+2){transform:translateY(8px)}}@media(prefers-reduced-motion:reduce){.pad:before,.orbit{transition:none}}
.pad .key{position:absolute;inset:0;display:grid;place-items:center;color:#effff5b8;font:500 clamp(15px,3vw,22px)/1 system-ui,sans-serif;letter-spacing:.12em;text-shadow:0 1px 8px #102a2dcc;transition:opacity .5s,transform .8s}.pad.shifting .key{opacity:.18;transform:scale(.75) rotate(-8deg)}.pad.shifting:before{box-shadow:inset 2px 4px 14px #ffffff35,0 0 34px #e0ffed24}.pad:active .key{transform:scale(.92)}
body{position:relative;isolation:isolate;background:#172325;overflow-x:hidden}body:after{content:"";position:fixed;z-index:-2;inset:-2.5%;background:url('puddle.webp') 48% 50%/cover no-repeat;filter:saturate(.82) brightness(.78);animation:background-drift 42s ease-in-out infinite alternate;will-change:transform}body:before{z-index:-1;background:linear-gradient(180deg,#08171970 0%,#17303325 48%,#07151782 100%)}canvas{z-index:0}main{z-index:1;display:grid;grid-template-rows:auto 1fr;justify-content:initial}header{display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left}.instrument{align-self:center}.playback{flex:0 1 280px;justify-content:flex-end;gap:16px}.transport{width:46px;height:46px;flex:0 0 46px}.transport svg{width:19px;height:19px}.master-volume{width:min(180px,22vw);gap:10px}.master-volume svg{width:19px}@keyframes background-drift{0%{transform:scale(1.015) translate3d(-.3%,0,0)}50%{transform:scale(1.035) translate3d(.5%,-.4%,0)}100%{transform:scale(1.02) translate3d(0,.35%,0)}}
@media(max-width:650px){body:after{inset:-1%;background-position:48% 52%;background-size:auto 100%;animation-duration:52s}main{padding:24px 16px 22px}header{gap:12px}h1{font-size:19px;letter-spacing:.1em;white-space:nowrap}.playback{flex:1;gap:8px}.transport{width:40px;height:40px;flex-basis:40px}.transport svg{width:17px;height:17px}.master-volume{width:min(128px,35vw);gap:6px}.master-volume svg{width:17px}.instrument{margin:14px auto;max-width:410px}}

main{grid-template-rows:auto 1fr auto}footer{display:flex;justify-content:center;padding-top:8px}.home-link{display:grid;place-items:center;width:38px;height:38px;color:#e8f2ebc7;border:1px solid #e6f5ec45;border-radius:50%;background:#19383b38;backdrop-filter:blur(3px);transition:color .25s,border-color .25s,background .25s,transform .25s}.home-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.home-link:hover{color:#fff;border-color:#fff8;background:#29494c66;transform:translateY(-2px)}.home-link:focus-visible{outline:2px solid #f0f5cb;outline-offset:5px}@media(max-width:650px){footer{padding-top:3px}.home-link{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){body:after{animation:none}}
.pad:before{background:radial-gradient(ellipse at 31% 21%,#ffffff50 0 4%,#ffffff18 15%,transparent 36%),radial-gradient(ellipse at 66% 83%,#d9f6ea14,transparent 64%),#c8e5dc08;border-color:#effff080;border-top-color:#ffffffc7;border-left-color:#ffffff91;backdrop-filter:blur(1.2px) saturate(1.12) brightness(1.04);-webkit-backdrop-filter:blur(1.2px) saturate(1.12) brightness(1.04);box-shadow:inset 2px 3px 8px #ffffff28,inset -4px -6px 10px #07191e22,0 9px 20px #05171c35,0 1px 0 #ffffff2b}.pad .key{color:#f5fff4d4;text-shadow:0 1px 4px #102426,0 0 11px #102426b8}.pad.active:before{background:radial-gradient(ellipse at 31% 21%,#ffffff70 0 5%,#ffffff22 18%,transparent 38%),#dffcf019;box-shadow:inset 2px 3px 10px #ffffff42,inset -4px -6px 12px #07191e18,0 0 28px #e0ffed2e,0 10px 20px #05171c35}