/* Vocalis — luminous creative workspace */
/* Keep readable contrasts and provide room for narrow screens. */
:root{--bg:#eef3fb;--panel:#fff;--panel2:#f4f7fd}body{overflow:auto}.center{min-width:0}.toolbar,.overview-copy{min-width:0}.voice .tag{display:none}.right .mix:has(.master){display:none}.studio-tools button.on{background:#ffe3ed;color:#a62d61}.pkey.pressed,.pkey.black.pressed{background:#36b4dc;color:#fff}.character-card:focus-visible{outline:3px solid #a58ae8;outline-offset:3px}
:root{--line:#dde5f2;--muted:#7987a3;--text:#263556;--cyan:#27a9dc;--violet:#8b69ed}body{background:radial-gradient(ellipse at 10% 0,#eee4ff,transparent 50%),radial-gradient(ellipse at 90% 40%,#dcefff,transparent 55%),#eef3fb;color:var(--text)}button,input,select,textarea{font-family:inherit}button{transition:transform .16s,box-shadow .16s,background .16s}button:hover{transform:translateY(-1px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #9e8ef788;outline-offset:2px}.app{height:auto;min-height:100vh;grid-template-rows:76px 1fr 38px;padding:0 18px 14px;max-width:1920px;margin:auto}.topbar{background:transparent;border:0;gap:22px;padding:0 6px}.brand{font-size:20px;letter-spacing:-.9px}.brand i{width:12px;height:25px;border-radius:7px;box-shadow:6px -4px 0 #986bec66,-6px 4px 0 #36b2dc66;background:linear-gradient(#9d7bef,#4eaddf);margin-right:16px}.brand span{color:#8b6ed4;font-size:12px;letter-spacing:2px;margin-left:5px}.project{border-left-color:#cbd5e7;color:#34466b;max-width:210px}.project b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport{background:#ffffffc9;box-shadow:0 6px 20px #9aafd31a;padding:7px 12px;border:1px solid #fff;border-radius:17px}.transport .iconbtn{background:transparent;border:0;color:#7685a0}.transport .play{width:40px;height:40px;background:linear-gradient(135deg,#a17af7,#6487ed);color:#fff;box-shadow:0 4px 12px #876ee34a}.tempo{font-size:11px;white-space:nowrap;margin-left:10px}.status{font-size:10px;color:#8390aa;max-width:150px}.avatar{box-shadow:0 4px 14px #777ac433}.main{gap:16px;grid-template-columns:236px minmax(0,1fr)282px}.left,.right{border:1px solid #ffffff;background:#ffffffae;border-radius:20px;box-shadow:0 8px 32px #8a9bc71c;overflow:visible}.sidehead{font-size:9px;letter-spacing:1.8px;color:#8a96ad;padding:0 18px}.left>.sidehead:first-child{display:none}.library{padding:16px 13px 0}.library .section{display:none}#current-song{margin:0;border:0;background:transparent;padding:2px 4px 12px}#current-song b{font-size:14px}#current-song p{font-size:11px;margin:6px 0 10px}#current-song button{background:#eef3ff;border-radius:8px;position:relative;padding:9px 12px;border-left:3px solid #a588ed}.voice{background:#fff;border:1px solid #e2e8f4;padding:0;margin:0 13px 12px;box-shadow:0 8px 22px #8d8baa16;overflow:hidden;border-radius:16px}.character-card .voice-top{display:flex;flex-wrap:wrap;position:relative;padding:0 14px 14px;gap:8px}.character-card .voice-art{width:calc(100% + 28px);height:215px;margin:0 -14px 5px;border-radius:0;background:radial-gradient(circle at 50% 30%,#fff6,transparent 55%),linear-gradient(145deg,#d8e8ff,#d2c2f8 58%,#b4dcef);position:relative;color:#fff;font-weight:700;font-size:64px;letter-spacing:-5px}.character-card .voice-art:before{content:'';position:absolute;width:150px;height:150px;border:1px solid #ffffff88;border-radius:50%;box-shadow:0 0 0 18px #ffffff18,0 0 0 36px #ffffff12;pointer-events:none}.character-card .voice-art img{object-fit:cover;z-index:1}.character-card .voice-top>div:nth-child(2){flex:1}.character-card b{font-size:18px;letter-spacing:-.3px}.character-card small{font-size:9px;color:#92a0b5}.tag{font-size:8px;border:0;background:#e5f8f1;color:#36a77c;padding:4px 7px;border-radius:20px}.voice .meter{margin:0 14px 14px;background:#e5ebf8}.profile-hint{font-size:10px;line-height:1.7;text-align:center;padding:0 14px 18px;color:#93a0b5}.center{background:transparent;border-radius:18px;grid-template-rows:100px auto 132px minmax(440px,1fr)165px;gap:12px;min-height:940px}.studio-overview{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(115deg,#fdfdff,#ebe8ff 55%,#dbecfc);border:1px solid #ffffff;box-shadow:0 6px 25px #a1a2cd15}.overview-copy{z-index:1}.overview-copy>span{font-size:9px;letter-spacing:2px;color:#9a84ca}.overview-copy h1{font-size:22px;letter-spacing:-.7px;margin:6px 0;color:#425075}.overview-copy p{font-size:10px;margin:0;color:#8e9bb5}.overview-art{display:flex;align-items:center;gap:4px;height:65px;margin:0 20px;opacity:.65;transform:rotate(-7deg)}.overview-art i{width:5px;background:linear-gradient(#a587e9,#6aaee5);border-radius:10px;box-shadow:0 2px 10px #8a7cdb22}.overview-facts{display:flex;gap:20px;z-index:1}.overview-facts b{display:block;font-size:18px;color:#656c9c;font-weight:500;font-family:'DM Mono',monospace}.overview-facts span{font-size:8px;letter-spacing:1px;color:#9a9ab5}.toolbar{border:1px solid #fff;background:#ffffffb5;border-radius:13px;padding:8px 12px;min-height:50px;gap:8px;box-shadow:0 3px 15px #a0b1d410}.mode{background:#edf1fb;border:0;border-radius:9px}.mode button{font-size:9px;letter-spacing:.6px;padding:7px 9px;border-radius:7px}.mode button.active{box-shadow:0 3px 8px #9badcc22;color:#8b71d8}.toolbar .pill{font-size:9px;border:0;background:#eff4fc;color:#768aa9;height:30px}.ai-btn{font-size:10px;box-shadow:0 4px 12px #8672d82a;white-space:nowrap;border-radius:8px;background:linear-gradient(110deg,#9272e7,#6888ea);padding:10px 12px}.timeline{border:1px solid #fff;border-radius:13px;overflow:hidden;box-shadow:0 4px 16px #9cabce12;height:132px;grid-template-columns:130px 1fr;background:#fff}.tracks{background:#ffffffbd;border-right:1px solid #e4e9f5}.track{height:72px;border:0;padding:12px}.track-name b{font-size:10px}.track-name span{font-size:8px}.track-header{height:30px;font-size:8px;padding:11px;border-bottom-color:#e8ecf5}.track-color{height:32px}.solo{border-color:#e4e9f5}.roll{background:repeating-linear-gradient(90deg,transparent 0 63px,#e8edf7 63px 64px),#fafcff}.ruler{height:30px;background:#f6f8fe;border-color:#e7edf7;font-size:8px;padding-top:11px}.timeline .clip{display:none}.timeline .playline{display:none}.arrangement-blocks{display:flex;height:57px;margin:14px 10px 0;gap:4px}.arrangement-block{position:relative;overflow:hidden;min-width:20px;border:1px solid #ffffffa8;border-radius:7px;background:linear-gradient(130deg,#d2c3fb,#e9defc);padding:7px 8px;cursor:pointer;color:#7f60bd;text-align:left}.arrangement-block:nth-child(3n+2){background:linear-gradient(130deg,#bde8f5,#daeff9);color:#4193af}.arrangement-block:nth-child(3n){background:linear-gradient(130deg,#f8d0e1,#ffe7ef);color:#c87e9f}.arrangement-block strong{display:block;font-size:9px;white-space:nowrap}.arrangement-block small{font-size:7px;opacity:.8}.block-notes{display:flex;position:absolute;bottom:5px;left:8px;right:8px;gap:3px;height:8px;align-items:center}.block-notes i{flex:1;height:2px;border-radius:3px;background:currentColor;opacity:.45}.block-notes i:nth-child(3n){transform:translateY(-3px)}.block-notes i:nth-child(4n){transform:translateY(2px)}.editor{border:1px solid #fff;border-radius:14px;background:#ffffffd9;box-shadow:0 5px 20px #9eabca12;max-height:520px;position:relative;scrollbar-width:thin;scrollbar-color:#cbd5eb transparent}.studio-tools{z-index:7;top:0;background:#fdfdffeF;border-bottom:1px solid #e7ecf6;border-radius:14px 14px 0 0;gap:5px;padding:11px}.studio-tools button,.studio-tools select,.studio-tools input,.studio-tools label{font-size:9px;border-color:#e3e8f4;border-radius:7px;padding:7px;color:#7384a1;background:#f7f9ff}.studio-tools label{background:transparent;border:0;display:flex;align-items:center;gap:5px}.studio-tools input[type=checkbox]{accent-color:#9b7beb}.studio-tools input[type=number]{width:50px!important}.studio-tools button svg{width:12px;height:12px;vertical-align:-2px;margin-right:4px}.tool-export{font-size:9px;color:#7f91ac;position:relative}.tool-export summary{padding:7px 10px;background:#e9effa;border-radius:7px;cursor:pointer;list-style:none}.export-popover{position:absolute;right:0;top:34px;z-index:10;background:#fff;padding:8px;border:1px solid #dce5f4;border-radius:11px;box-shadow:0 12px 28px #8393ba33;width:150px;display:flex;flex-direction:column;gap:5px}.beat-ruler{background:#f3f6ff;color:#9aa7bd;position:relative}.beat-ruler span{font-size:8px;border-color:#dfe7f3}.pkey{background:linear-gradient(90deg,#fff,#edf1f9);border-color:#dce4f2;color:#7b8ca8;box-shadow:inset 0 -2px 0 #d9e3f022;font-size:8px}.pkey.black{background:linear-gradient(90deg,#4b5571,#2e3a54);box-shadow:inset 0 -3px 0 #1c2a42;position:relative;z-index:1;width:44px;height:22px;border-color:#25354f}.keyboard{background:#f0f4fc;box-shadow:3px 0 10px #899cc422}.note-grid{background:repeating-linear-gradient(90deg,transparent 0 15px,#edf1f8 15px 16px),repeating-linear-gradient(90deg,transparent 0 63px,#d4dff0 63px 64px),repeating-linear-gradient(0deg,#fbfcff 0 21px,#e5eaf4 21px 22px)}.editable-note{background:linear-gradient(100deg,#9580e7,#afa2f0);border-color:#ab91ed;box-shadow:0 3px 6px #9f80dc20;border-radius:5px;font-size:9px;color:#fff}.editable-note.harmony{background:linear-gradient(100deg,#67bfd5,#8bdace);border-color:#8cd6d5}.editable-note.selected{outline-color:#c7a6fa;box-shadow:0 0 0 4px #e6d7fc}.editable-note.sounding{filter:brightness(1.1);box-shadow:0 0 10px #997beb88}.note-detail{border-top:1px solid #e3eaf5;background:#f8faff;font-size:9px}.note-detail input{font-size:10px;background:#fff;border-color:#dae3f2}.studio-help{font-size:8px;color:#94a3b9;line-height:1.6}.bottom{border:0;gap:12px;grid-template-columns:1.1fr 1fr}.curve,.ai-pane{border:1px solid #fff;border-radius:13px;background:#ffffffbb;box-shadow:0 4px 18px #8e9fc012}.curve{padding:15px;border-right:1px solid #fff}.curve svg{height:88px}.ai-pane{padding:15px;background:linear-gradient(135deg,#f9fbff,#f2edff)}.label{font-size:8px;color:#8b99b2;letter-spacing:1.2px}.prompt{border:0;background:#ffffffba;border-radius:8px;padding:8px;margin-top:7px;font-size:10px}.generate{border-radius:7px;background:#9b7ce2;padding:7px 12px;margin-top:6px;font-size:9px}.right{padding:7px 0;align-self:start;min-height:640px}.right>.sidehead{color:#9c91b4}.right .control,.right .mix{margin:0 12px 12px;border:1px solid #e9edf5;border-radius:12px;padding:14px;background:#ffffffbd}.right .control h3{font-size:11px;color:#667997}.right .control p{font-size:9px;color:#9ca8bc;margin-top:7px}.form-row .select{font-size:9px;background:#f5f8fd;border:0;color:#8593af}.action{font-size:9px;border-radius:6px;color:#8c74cb;background:#eee8fa}.mixgrid{gap:4px;margin-top:19px}.knob{width:68px;height:68px;background-size:204px 68px;filter:drop-shadow(0 6px 6px #8392b733)}.channel:nth-child(2) .knob{background-position:-68px 0}.channel:nth-child(3) .knob{background-position:-136px 0}.channel{font-size:8px;color:#9ba7ba}.channel input{accent-color:#a98ee8;height:3px;margin-top:14px}.channel output{font-family:'DM Mono';color:#919fc0;font-size:10px}.live-meter{margin:4px 14px 18px;background:linear-gradient(135deg,#f5f7ff,#eef5fc);border:1px solid #e8edf7;border-radius:12px;padding:14px}.live-meter-header{display:flex;justify-content:space-between;color:#8694b0;font-size:8px;letter-spacing:1px}.meter-bars{display:flex;height:55px;gap:3px;align-items:flex-end;padding:8px 0}.meter-bars i{flex:1;height:3px;border-radius:3px;background:linear-gradient(#ad89ed,#69bfdd);transition:height .08s}.meter-value{display:flex;justify-content:space-between;font:9px 'DM Mono';color:#91a2bd}.footer{background:transparent;border:0;color:#9aa8bc;font-size:8px;padding:12px 6px 0}.toast{z-index:40;background:#fff;border-color:#dacff5;border-radius:12px;box-shadow:0 8px 28px #9391b42a;color:#7f75a2}.song-dialog{background:linear-gradient(145deg,#fff,#f6f1ff);border:3px solid #fff;box-shadow:0 20px 100px #7484aa66;border-radius:24px}.song-heading h2{color:#687299;font-size:23px}.song-dialog::backdrop{background:#8394b055;backdrop-filter:blur(7px)}.character-portrait{border-radius:18px}.character-dialog label{color:#71809c}.song-dialog input,.song-dialog select,.song-dialog textarea{border-color:#e0e5f0;border-radius:11px}.song-dialog #char-generate{border-radius:10px}.song-dialog #char-save{background:#eaf6f1;color:#63a18d;border-color:#d7eee5}button[hidden],div[hidden]{display:none!important}@media(min-width:1600px){.main{grid-template-columns:260px 1fr 310px}.character-card .voice-art{height:250px}.studio-overview h1{font-size:25px}}@media(max-width:1250px){.main{grid-template-columns:206px minmax(0,1fr)240px}.knob{width:58px;height:58px;background-size:174px 58px}.channel:nth-child(2) .knob{background-position:-58px 0}.channel:nth-child(3) .knob{background-position:-116px 0}.overview-art{display:none}.overview-facts{gap:12px}.character-card .voice-art{height:180px}.toolbar{gap:4px}.toolbar .pill{padding:0 7px}}@media(max-width:1100px){.right{display:block}.main{grid-template-columns:190px minmax(0,1fr)}.right{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:14px 0}.right>.sidehead,.right>.control:first-of-type{display:none}.right .control,.right .mix{margin-bottom:0}.live-meter{grid-column:3;grid-row:1;margin-bottom:0}.topbar .status{display:none}.overview-facts b{font-size:15px}.center{min-height:940px}}@media(max-width:760px){.app{padding:0 8px 10px;grid-template-rows:auto 1fr 34px}.topbar{min-height:74px;gap:8px}.brand{font-size:17px}.transport{padding:5px;border-radius:12px;gap:2px}.transport .iconbtn{padding:0 6px;min-width:22px}.tempo{font-size:9px;margin-left:2px}.main{display:flex;flex-direction:column;gap:12px}.left{display:block;order:0;display:flex;padding:10px;align-items:center;gap:10px}.left>.sidehead,.profile-hint{display:none}.library{flex:1;padding:0;order:2}.voice{margin:0;flex:1;max-width:240px}.character-card .voice-top{display:grid;grid-template-columns:62px 1fr;padding:8px;gap:8px}.character-card .voice-art{width:62px;height:62px;margin:0;border-radius:12px;font-size:30px}.character-card .voice-art:before{display:none}.character-card b{font-size:14px}.character-card .tag,.voice .meter{display:none}#current-song{padding:4px}#current-song button{display:none}.center{order:1;grid-template-rows:92px auto 120px minmax(400px,1fr)145px;min-height:900px}.studio-overview{padding:15px}.overview-copy h1{font-size:19px}.overview-facts{gap:10px}.overview-facts span{font-size:7px}.overview-facts b{font-size:13px}.toolbar .mode button{font-size:8px;padding:6px}.toolbar>.pill{display:inline-block!important}.toolbar .ai-btn{padding:9px;font-size:9px}.right{order:2;display:flex;flex-wrap:wrap;gap:0}.right .mix,.right .control,.live-meter{flex:1;min-width:180px;margin:8px}.bottom{grid-template-columns:1fr 1fr}.bottom .curve{display:block}.editor{max-height:480px}.timeline{height:120px}.project{display:none}.character-layout{grid-template-columns:1fr}.footer{font-size:7px}.brand span{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}