@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Italiana&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#243830;font-synthesis:none;background:#e8eee9;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 65% 20%,#f8faf6 0,#0000 34%),linear-gradient(145deg,#edf1ec 0%,#dbe5dd 55%,#e8e7de 100%);min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}button{color:inherit}main{min-height:100vh;padding:0 22px;position:relative;overflow:hidden}.mist{pointer-events:none;filter:blur(4px);opacity:.55;border-radius:50%;position:fixed}.mist-one{background:radial-gradient(circle,#b8d4c8 0,#0000 68%);width:42vw;height:42vw;top:30vh;left:-18vw}.mist-two{background:radial-gradient(circle,#ddd4bf 0,#0000 70%);width:36vw;height:36vw;bottom:-12vw;right:-13vw}nav{z-index:2;border-bottom:1px solid #364e431f;grid-template-columns:1fr auto 1fr;align-items:center;height:84px;display:grid;position:relative}.brand{color:#263c32;letter-spacing:.18em;align-items:center;gap:11px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.brand em{color:#718378;font-style:normal;font-weight:400}.brand-mark{border:1px solid #37544552;border-radius:50% 50% 50% 7px;place-items:center;width:34px;height:34px;display:grid;transform:rotate(-8deg)}.brand-mark svg{transform:rotate(8deg)}.nav-center{text-transform:uppercase;letter-spacing:.14em;color:#76877e;align-items:center;gap:9px;font-size:11px;display:flex}.status-dot{background:#9baaa1;border-radius:50%;width:6px;height:6px}.status-dot.active{background:#719b83;animation:2s infinite pulse;box-shadow:0 0 0 5px #719b831f}.icon-button{cursor:default;background:#ffffff52;border:1px solid #3754452e;border-radius:50%;justify-self:end;place-items:center;width:38px;height:38px;display:grid}.studio-shell{z-index:2;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#f7f9f5b8;border:1px solid #425b4e24;border-radius:4px;grid-template-columns:360px minmax(0,1fr);width:100%;min-height:calc(100vh - 153px);margin:22px auto 46px;display:grid;position:relative;overflow:hidden;box-shadow:0 28px 80px #33493d1f}.controls-panel{background:#eff4ef94;border-right:1px solid #425b4e1f;padding:24px}.panel-heading{justify-content:space-between;align-items:baseline;margin-bottom:18px;display:flex}.panel-heading span{font-family:Italiana,serif;font-size:20px}.panel-heading small{color:#8a988f;text-transform:uppercase;letter-spacing:.12em;font-size:9px}.select-grid{grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px;display:grid}.select-control>span{color:#7f8e85;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;font-size:9px;display:block}.select-control>div{position:relative}.select-control select{appearance:none;color:#3c5247;background:#ffffff80;border:1px solid #43584c26;outline:none;width:100%;padding:10px 25px 10px 10px;font-size:11px}.select-control svg{pointer-events:none;color:#718277;position:absolute;top:10px;right:8px}.range-control{margin:0 0 16px;display:block}.range-control>span{color:#64776c;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:10px;display:flex}.range-control output{color:#8b9991;font-size:9px}.range-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.range-pair .range-control{min-width:0;margin-bottom:14px}.range-pair .range-control>span{flex-direction:column;align-items:flex-start;gap:4px}.control-section-title{color:#829188;text-transform:uppercase;letter-spacing:.15em;border-top:1px solid #43584c1a;margin:18px 0 12px;padding-top:15px;font-size:9px;font-weight:500}.track-section-title{justify-content:space-between;align-items:center;display:flex}.track-section-title em{color:#63816f;letter-spacing:.13em;background:#688b771a;border-radius:99px;padding:4px 7px;font-size:7px;font-style:normal}.track-mixer{background:#ffffff47;border:1px solid #43584c21}.track-tabs{border-bottom:1px solid #43584c1f;grid-template-columns:repeat(5,1fr);display:grid}.track-tabs button{color:#8a9990;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:0;border-right:1px solid #43584c17;padding:10px 3px;font-size:8px;transition:background .25s,color .2s,box-shadow .25s}.track-tabs button:last-child{border-right:0}.track-tabs button:first-child{color:#8d6161;background:#da97971c}.track-tabs button:nth-child(2){color:#5b7c65;background:#8bbe9e1c}.track-tabs button:nth-child(3){color:#58728a;background:#8bafd11c}.track-tabs button:nth-child(4){color:#81703d;background:#dac17021}.track-tabs button:nth-child(5){color:#8c6342;background:#e5a1691f}.track-tabs button:first-child:hover,.track-tabs button:first-child.active{color:#754b4b;background:#da97974d;box-shadow:inset 0 -2px #c57878}.track-tabs button:nth-child(2):hover,.track-tabs button:nth-child(2).active{color:#43644d;background:#8bbe9e4d;box-shadow:inset 0 -2px #69a67e}.track-tabs button:nth-child(3):hover,.track-tabs button:nth-child(3).active{color:#405f7a;background:#8bafd14d;box-shadow:inset 0 -2px #6994be}.track-tabs button:nth-child(4):hover,.track-tabs button:nth-child(4).active{color:#6f5c27;background:#dac17057;box-shadow:inset 0 -2px #c4a649}.track-tabs button:nth-child(5):hover,.track-tabs button:nth-child(5).active{color:#754b2c;background:#e5a16952;box-shadow:inset 0 -2px #cf8449}.track-editor{padding:13px 15px 11px;transition:background .3s}.track-mixer.track-pad .track-editor{background:#da979712}.track-mixer.track-wind .track-editor{background:#8bbe9e12}.track-mixer.track-bell .track-editor{background:#8bafd112}.track-mixer.track-pluck .track-editor{background:#dac17014}.track-mixer.track-color .track-editor{background:#e5a16913}.track-editor-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:13px;display:flex}.track-editor-heading strong{color:#486052;font-family:Italiana,serif;font-size:15px;font-weight:400}.track-editor-heading span{color:#92a097;text-overflow:ellipsis;white-space:nowrap;font-size:8px;overflow:hidden}.track-editor .range-control{margin-bottom:13px}.track-hint{color:#94a198;margin:2px 0 0;font-size:8px;line-height:1.55}.eq-controls{background:#ffffff47;border:1px solid #43584c21;grid-template-columns:repeat(3,1fr);gap:12px;padding:13px 14px 3px;display:grid}.eq-controls .range-control{min-width:0;margin-bottom:13px}.eq-controls .range-control>span{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:9px}.eq-controls .range-control output{font-size:8px}input[type=range]{appearance:none;background:linear-gradient(90deg, #748f7f var(--value), #d0d9d2 var(--value));border-radius:2px;width:100%;height:2px;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#f5f7f3;border:2px solid #6c8978;border-radius:50%;width:11px;height:11px;box-shadow:0 1px 4px #2c413633}.sound-note{color:#789084;border-top:1px solid #43584c1a;gap:10px;margin-top:16px;padding-top:16px;display:flex}.sound-note p{gap:5px;margin:0;display:grid}.sound-note strong{text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:500}.sound-note span{color:#8a9890;font-size:9px;line-height:1.5}.player-panel{background:radial-gradient(circle at 50% 31%,#fffc,#0000 46%);grid-template-rows:minmax(490px,1fr) auto;min-width:0;display:grid}.visualizer-stage{min-height:490px;position:relative;overflow:hidden}.flow-visualizer{width:100%;height:100%;min-height:0;display:block;position:absolute;inset:0}.now-playing{background:#ffffff38;border-top:1px solid #425b4e1a;padding:23px 31px 25px}.session-meta{justify-content:space-between;align-items:end;display:flex}.session-meta>div:first-child{gap:4px;display:grid}.session-meta small{color:#929f97;text-transform:uppercase;letter-spacing:.14em;font-size:8px}.session-meta strong{color:#3d5348;font-family:Italiana,serif;font-size:17px;font-weight:400}.variation-label{color:#94a198;text-transform:uppercase;letter-spacing:.12em;font-size:8px;font-style:normal}.tonality{color:#72867a;align-items:center;gap:8px;display:flex}.tonality small{color:#526b5e;font-size:13px}.tonality span{text-transform:uppercase;letter-spacing:.12em;font-size:9px}.timeline{background:#dce3dd;height:2px;margin:18px 0 14px;overflow:hidden}.timeline span{background:#7c9988;height:100%;transition:width .35s linear;display:block}.phrase-strip{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.phrase-strip span{color:#9aa69f;text-align:center;white-space:nowrap;text-overflow:ellipsis;font-size:8px;transition:color .2s;overflow:hidden}.phrase-strip span.current{color:#456152;font-weight:600}.lower-row{justify-content:space-between;align-items:center;margin-top:18px;display:flex}.voicing{color:#8a988f;align-items:center;gap:7px;font-size:9px;display:flex}.variation-actions{align-items:center;gap:10px;display:flex}.bottom-transport{color:#557264;cursor:pointer;background:#f7faf7cc;border:1px solid #395c493d;border-radius:50%;flex:0 0 48px;place-items:center;width:48px;height:48px;padding:0 0 0 2px;transition:transform .2s,background .2s,color .2s,box-shadow .2s;display:grid;box-shadow:0 7px 20px #3954451f}.bottom-transport:hover{background:#fff;transform:translateY(-1px)scale(1.03);box-shadow:0 10px 24px #3954452b}.bottom-transport.playing{color:#fff;background:#7b9787;padding-left:0}.reseed{color:#557264;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;background:#f7faf7c2;border:1px solid #395c493d;border-radius:3px;justify-content:center;align-items:center;gap:9px;min-width:142px;min-height:48px;padding:13px 17px;font-size:10px;font-weight:500;transition:transform .2s,background .2s,box-shadow .2s;display:flex}.reseed:hover{background:#fff;transform:translateY(-1px);box-shadow:0 9px 22px #39544521}.reseed:hover svg{transform:rotate(12deg)scale(1.05)}.reseed svg{transition:transform .25s}.regenerate{color:#f7faf7;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;background:#698776;border:1px solid #395c492e;border-radius:3px;justify-content:center;align-items:center;gap:10px;min-width:190px;min-height:48px;padding:13px 20px;font-size:11px;font-weight:500;transition:transform .2s,background .2s,box-shadow .2s;display:flex;box-shadow:0 8px 22px #39544529}.regenerate:hover{background:#587666;transform:translateY(-1px);box-shadow:0 11px 27px #39544538}.regenerate:hover svg{transform:rotate(90deg)}.regenerate svg{transition:transform .3s}footer{color:#89968f;letter-spacing:.13em;z-index:1;border-top:1px solid #364e431f;grid-template-columns:1fr auto 1fr;align-items:center;min-height:73px;font-size:8px;display:grid;position:relative}footer p{letter-spacing:0;font-size:10px;font-weight:300}footer span:last-child{text-align:right}@keyframes pulse{50%{opacity:.45}}@media (width>=801px) and (height<=1100px){nav{height:68px}.studio-shell{min-height:calc(100vh - 180px);margin:12px auto}footer{min-height:56px}}@media (width<=800px){main{padding:0 12px}nav{grid-template-columns:1fr auto}.nav-center{display:none}.studio-shell{grid-template-columns:1fr;margin-top:12px}.controls-panel{border-bottom:1px solid #425b4e1f;border-right:0}.player-panel{min-height:520px}footer{grid-template-columns:1fr 1fr}footer p{display:none}}@media (width<=470px){.controls-panel{padding:25px 21px}.visualizer-stage{min-height:390px}.now-playing{padding:21px}.phrase-strip{grid-template-columns:repeat(4,1fr);row-gap:8px}.lower-row{align-items:stretch}.voicing{display:none}.variation-actions{width:100%}.regenerate,.reseed{flex:1;min-width:0;padding-left:9px;padding-right:9px}}