:root{font-family:"Avenir Next",Avenir,Arial,sans-serif;color:#261b40;background:#eeeafa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{padding:0 4.5vw;height:74px}header nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}a{color:#624599;text-underline-offset:3px}header a{font-size:13px;line-height:1.4;text-decoration:none}header a:hover{text-decoration:underline}main{position:relative;min-height:610px;height:calc(100svh - 165px);max-height:880px;overflow:hidden}.intro{position:absolute;left:4.5vw;top:22px;z-index:2;pointer-events:none;max-width:320px}h1{font-size:44px;letter-spacing:-.045em;line-height:1.12;margin:0;font-weight:600}.intro p{font-size:15px;line-height:1.55;margin:17px 0 0;color:#625576;max-width:290px}#stage{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.stage-caption{position:absolute;bottom:20px;left:4.5vw;right:4.5vw;font-size:11px;color:#706181;display:flex;justify-content:space-between;gap:20px;pointer-events:none}#notice{position:absolute;top:45%;left:38%;max-width:340px;background:#fff9;padding:16px;border-radius:12px;font-size:14px;line-height:1.5}#notice:empty{display:none}.controls{position:absolute;right:4.5vw;bottom:65px;width:310px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-radius:16px;padding:23px;box-shadow:0 12px 45px #4b337210}.controls>label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:12px}output{font-weight:400;color:#776789}input[type=range]{width:100%;accent-color:#7350cc;margin:0 0 25px;cursor:pointer}button{font:inherit;cursor:pointer;transition:background .15s}button:disabled{cursor:not-allowed;opacity:.5}.buttons{display:flex;gap:8px}.buttons button{border:0;background:#7350cc;border-radius:9px;color:#fff;padding:12px;font-size:12px;flex:1}.buttons .secondary{background:#e9e1f6;color:#3b2957;flex:0 0 74px}.options{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:18px;gap:8px}.options label{display:flex;align-items:center;gap:5px}.options input{accent-color:#7350cc}.text-button{border:0;padding:0;color:#624599;background:none;font-size:11px;text-decoration:underline;text-underline-offset:3px}#recording{font-size:13px;margin-top:18px}footer{padding:23px 4.5vw 32px;border-top:1px solid #d6cee3;color:#625576;font-size:13px;line-height:1.65}footer details{max-width:680px}footer details p{margin:14px 0 0}summary{cursor:pointer;color:#403051}:focus-visible{outline:3px solid #9674ce;outline-offset:4px}button:hover{filter:brightness(.96)}@media(max-width:700px){header{height:70px;padding:0 22px}header nav{gap:20px}header a{font-size:12px;max-width:155px}header a:last-child{text-align:right}main{height:780px;min-height:780px;max-height:none}.intro{left:22px;right:22px;top:14px;max-width:none}h1{font-size:34px}.intro p{font-size:14px;line-height:1.5;margin-top:12px;max-width:300px}.controls{right:22px;left:22px;bottom:65px;width:auto}.stage-caption{bottom:17px;left:22px;right:22px;font-size:10px;display:block}.stage-caption span{display:block}.stage-caption span+span{margin-top:6px}#notice{left:22px;right:22px;top:37%}footer{padding:22px;font-size:12px}}@media(prefers-reduced-motion:reduce){button{transition:none}}