:root{font-family:system-ui,sans-serif;color:#e8edf6;background:#101722;color-scheme:dark}body{margin:0}main{max-width:760px;margin:auto;padding:16px}h1{margin:0;font-size:26px}small{font-size:16px;color:#a9c1d6}.controls{display:flex;flex-wrap:wrap;gap:8px}button{padding:12px 16px;border:1px solid #6586aa;border-radius:8px;background:#23496e;color:white;font-size:16px;cursor:pointer}button:disabled{opacity:.4}canvas{display:block;width:100%;background:#05080b;border-radius:10px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}dl{display:grid;grid-template-columns:1fr 1fr;gap:9px}dd{margin:0;font-weight:600}section,details{padding:12px;margin-top:12px;background:#1b2839;border-radius:10px}#message{white-space:pre-line;color:#ffd68d}#history{overflow-wrap:anywhere}.success{color:#83ffa8;font-size:26px}a{color:#8dcbff}textarea{box-sizing:border-box;width:100%;margin:8px 0;font:inherit}.markers{display:flex;flex-wrap:wrap;gap:16px}.markers figure{margin:0}.markers img{width:260px;max-width:100%}.credit{font-size:12px;color:#8fa6bd;margin-top:18px}.tune h2{font-size:18px;margin:4px 0}.tune h3{font-size:14px;color:#a9c1d6;margin:14px 0 4px}
.tune-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.tune-row button{padding:8px 10px;font-size:14px}
.tune-name{min-width:7em;color:#a9c1d6;font-size:13px}
.tune-item{display:block;margin:6px 0;font-size:13px}.tune-item span{display:block;color:#cfe0f0}.tune-item input[type=range]{width:100%}
.tune-note{white-space:pre-wrap;word-break:break-all;background:#101722;padding:8px;border-radius:6px;font-size:12px;min-height:1em}
.app .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:52px;box-sizing:border-box;padding:6px 10px}.app h1{font-size:20px;letter-spacing:.02em}.app .bar .controls{flex-wrap:nowrap;gap:6px}.app .bar button{padding:7px 10px;font-size:14px;white-space:nowrap}
.app .stage{position:relative;height:calc(100vh - 52px);height:calc(100dvh - 52px);display:flex;align-items:center;justify-content:center;background:#05080b;overflow:hidden}.app .stage canvas{width:auto;border-radius:0}
.app #message{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:8px 10px;text-align:center;background:rgba(0,0,0,.6);border-radius:8px}.app #message:empty{display:none}