:root{--bg:#f1f5fb;--bg-soft:#ffffff94;--panel:#ffffffb8;--panel-strong:#ffffffd6;--line:#3e5f8a1f;--line-strong:#3e5f8a33;--text:#17314f;--text-soft:#5f7591;--accent:#ff7a59;--accent-strong:#ff5f59;--accent-blue:#61bfff;--accent-indigo:#8e99ff;--accent-mint:#7cd8c5;--success:#1e9d84;--shadow-lg:0 28px 80px #26486d24;--shadow-md:0 16px 40px #26486d1a;--shadow-sm:0 10px 24px #26486d14;--radius-xl:34px;--radius-lg:28px;--radius-md:20px;--vh:100dvh}html,body{width:100%;max-width:100vw;height:100%;overflow:hidden}body{color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 18% 12%,#ffa59061,#0000 24%),radial-gradient(circle at 82% 15%,#79ccff5c,#0000 28%),radial-gradient(circle at 84% 86%,#6de4ca4d,#0000 22%),linear-gradient(#f7f9fd 0%,#edf3fb 100%);font-family:ui-rounded,SF Pro Rounded,SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}input,textarea,select,[contenteditable=true]{-webkit-user-select:text;user-select:text}button{color:inherit;background:0 0;border:0}main{height:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#607d9f38;border-radius:999px}.app-page{height:var(--vh);isolation:isolate;padding:16px;animation:.26s page-slide;position:relative;overflow:hidden}.app-page[data-viewport=tablet] .studio-top-controls{flex-direction:column;align-items:flex-start}.app-page[data-viewport=tablet] .studio-focus-shell{grid-template-rows:minmax(0,1fr) auto}.app-page[data-viewport=tablet] .studio-focus-shell>.grid-surface{min-height:0}.app-page[data-viewport=tablet] .studio-top-controls__meta,.app-page[data-viewport=tablet] .studio-top-controls__actions{width:100%}.app-page[data-viewport=tablet] .studio-top-controls__actions{justify-content:flex-end}.app-page[data-viewport=tablet] .studio-fab{min-width:0;padding:0 14px}.app-page[data-compact-height=true] .studio-focus-shell{padding:10px}.app-page[data-compact-height=true] .studio-top-controls{gap:10px}.app-page[data-compact-height=true] .studio-popover__chrome{padding:14px 16px 10px}.app-page[data-compact-height=true] .studio-popover__body{gap:12px;padding:12px 16px 16px}.app-page[data-compact-height=true] .studio-popover--top-left,.app-page[data-compact-height=true] .studio-popover--top-right{top:72px}.app-page[data-compact-height=true] .studio-popover--left{top:120px;bottom:16px}.app-page[data-compact-height=true] .studio-popover--bottom{top:72px;bottom:68px}.app-backdrop{pointer-events:none;position:absolute;inset:0;overflow:hidden}.app-backdrop__orb{filter:blur(28px);opacity:.78;border-radius:999px;position:absolute}.app-backdrop__orb--pink{background:radial-gradient(circle,#ff909657,#0000 70%);width:36vw;height:36vw;top:-4%;left:-6%}.app-backdrop__orb--blue{background:radial-gradient(circle,#67bcff52,#0000 72%);width:42vw;height:42vw;top:2%;right:-10%}.app-backdrop__orb--gold{background:radial-gradient(circle,#ffcd7633,#0000 72%);width:32vw;height:32vw;bottom:-16%;left:34%}.page-shell{z-index:1;grid-template-rows:auto minmax(0,1fr);gap:14px;height:100%;min-height:0;display:grid;position:relative}.page-shell>:not(.topbar){min-height:0}.topbar{min-height:82px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(28px)saturate(160%);backdrop-filter:blur(28px)saturate(160%);background:linear-gradient(#fffc,#f4f8fdb8);border:1px solid #ffffff94;border-radius:30px;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.topbar__leading{align-items:center;gap:14px;min-width:0;display:flex}.topbar__home{background:#ffffffbd;border:1px solid #ffffff94;border-radius:999px;align-items:center;gap:10px;min-height:48px;padding:0 18px;font-size:.98rem;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #ffffffc7}.topbar__home-dot{background:linear-gradient(135deg,var(--accent),var(--accent-blue));border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 4px #ff7a591f}.topbar__titleblock{gap:2px;min-width:0;display:grid}.topbar__badge{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:700}.topbar__title{letter-spacing:-.03em;font-size:clamp(1.65rem,2.1vw,2.2rem);font-weight:780;line-height:1.04}.topbar__actions{background:#ffffff85;border:1px solid #ffffff80;border-radius:999px;justify-content:flex-end;align-items:center;gap:10px;min-width:0;padding:8px;display:flex}.language-switch{background:#f5f8ffdb;border:1px solid #ffffffc7;border-radius:999px;align-items:center;gap:4px;padding:4px;display:inline-flex}.language-switch__button{min-width:56px;min-height:38px;color:var(--text-soft);border-radius:999px;padding:0 14px;font-size:.88rem;font-weight:760}.language-switch__button--active{color:var(--text);background:linear-gradient(#fffffffa,#f6faffeb);box-shadow:0 10px 18px #5070941f}.surface{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(22px)saturate(155%);backdrop-filter:blur(22px)saturate(155%);background:linear-gradient(#ffffffd1,#f8fbffad);border:1px solid #ffffff9e;position:relative;overflow:hidden}.surface:before{content:"";pointer-events:none;background:linear-gradient(#ffffff42,#0000 32%);position:absolute;inset:0}.dashboard-grid,.studio-grid-frame{gap:14px;min-height:0;display:grid}.dashboard-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}.dashboard-column{min-height:0;display:grid}.dashboard-column--main{grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr);gap:14px}.hero-card{grid-template-rows:auto auto auto 1fr auto;gap:18px;min-height:0;padding:26px;display:grid}.hero-card--highlight{background:linear-gradient(120deg,#ffffffeb,#f9fcffd1),radial-gradient(circle at 100% 0,#65bbff1f,#0000 28%),radial-gradient(circle at 0 100%,#ff9d8a24,#0000 24%)}.eyebrow{min-height:34px;color:var(--success);background:#7cd8c529;border-radius:999px;align-items:center;padding:0 14px;font-size:.86rem;font-weight:700;display:inline-flex}.display-title{letter-spacing:-.05em;max-width:12ch;font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:820;line-height:.95}.lead{max-width:34ch;color:var(--text-soft);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.45}.hero-metrics{flex-wrap:wrap;gap:12px;display:flex}.hero-metric{background:#fff9;border:1px solid #fff9;border-radius:22px;gap:4px;min-width:132px;padding:14px 16px;display:grid;box-shadow:inset 0 1px #ffffffc7}.hero-metric strong{font-size:1.28rem;font-weight:800}.hero-metric span{color:var(--text-soft);font-size:.88rem}.hero-orbits{min-height:190px;position:relative}.hero-orbits__ring,.hero-orbits__planet,.hero-orbits__cloud{border-radius:999px;position:absolute}.hero-orbits__ring{border:12px solid #70c7ff5c;width:164px;height:164px;bottom:18px;left:8px}.hero-orbits__planet{background:linear-gradient(#ff8f73,#ffc45e);width:132px;height:132px;bottom:48px;right:18%;box-shadow:0 24px 40px #ff7e5c33}.hero-orbits__cloud{background:#ffffffc2;width:152px;height:66px;bottom:8px;left:36%;box-shadow:0 10px 28px #5c76921f}.hero-orbits__cloud:before,.hero-orbits__cloud:after{content:"";border-radius:inherit;background:inherit;position:absolute}.hero-orbits__cloud:before{width:74px;height:74px;top:-28px;left:24px}.hero-orbits__cloud:after{width:58px;height:58px;top:-18px;right:20px}.button-row,.tiny-actions{flex-wrap:wrap;gap:10px;display:flex}.pill-button,.nav-link,.icon-button,.tiny-button,.family-button{border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:0 16px;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;display:inline-flex}.pill-button:hover,.nav-link:hover,.icon-button:hover,.tiny-button:hover,.family-button:hover{transform:translateY(-1px)}.pill-button--primary{color:#fff;background:linear-gradient(#ff8d73,#ff6d59);box-shadow:0 14px 24px #ff6f5c3d}.nav-link,.icon-button,.tiny-button,.family-button{background:#ffffffa8;border:1px solid #ffffff94;box-shadow:inset 0 1px #ffffffb3}.pill-button--secondary{color:#fff;background:linear-gradient(#79bfff,#5f8eff);box-shadow:0 14px 24px #5f8eff38}.nav-link{min-height:48px;padding:0 18px;font-weight:700}.panel{grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0;padding:22px;display:grid}.panel--stretch{height:100%}.panel__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.panel__title{letter-spacing:-.03em;font-size:1.75rem;font-weight:760}.panel__sub{color:var(--text-soft);margin-top:4px;font-size:.98rem;line-height:1.42}.card-list,.sidebar-list,.grid-gallery{align-content:start;min-height:0;padding-right:4px;overflow:auto}.card-list{gap:12px;display:grid}.mini-card{background:#ffffff9e;border:1px solid #ffffff9e;border-radius:24px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px;display:grid;box-shadow:inset 0 1px #ffffffc2}.mini-card__badge{background:linear-gradient(#ffe0b080,#bbe3ff75);border-radius:18px;width:52px;height:52px}.mini-card__title{font-size:1.12rem;font-weight:760}.mini-card__meta{color:var(--text-soft);margin-top:2px;font-size:.98rem;line-height:1.35}.grid-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.theme-card{background:#ffffffa3;border:1px solid #ffffffa3;border-radius:28px;align-content:start;gap:14px;padding:18px;display:grid}.theme-card__art{background:radial-gradient(circle at 24% 24%,#ffffffe0,transparent 28%),linear-gradient(135deg,var(--theme-a),var(--theme-b));border-radius:24px;min-height:160px;box-shadow:inset 0 -20px 42px #ffffff2e}.theme-card__title{letter-spacing:-.03em;font-size:1.45rem;font-weight:780}.tag-row{flex-wrap:wrap;gap:8px;display:flex}.tag,.status-pill,.tray-label{min-height:32px;color:var(--success);background:#7ad8c529;border-radius:999px;justify-content:center;align-items:center;padding:0 12px;font-size:.84rem;font-weight:700;display:inline-flex}.helper-text{color:var(--text-soft);line-height:1.45}.empty-state{text-align:center;min-height:0;color:var(--text-soft);place-items:center;padding:28px;display:grid}.studio-shell{grid-template-rows:auto auto minmax(0,1fr) minmax(0,184px);gap:14px;height:100%;min-height:0;display:grid}.studio-shell--focus{grid-template-rows:minmax(0,1fr);gap:0}.studio-focus-shell{border-radius:34px;grid-template-rows:auto minmax(0,1fr);gap:12px;height:100%;min-height:0;padding:12px;display:grid;position:relative;overflow:hidden}.studio-focus-shell>.grid-surface{height:auto;box-shadow:none;background:0 0;border:0;padding:0}.studio-bar,.studio-toolbar,.tray-panel,.sketchpad-sidebar,.grid-surface{min-height:0;box-shadow:var(--shadow-sm);background:linear-gradient(#fffc,#f7faffb3);border:1px solid #ffffffa3;border-radius:28px;overflow:hidden}.studio-bar,.studio-toolbar,.tray-panel{gap:12px;padding:14px 16px;display:grid}.studio-bar{grid-template-columns:minmax(0,1.3fr) auto minmax(230px,.7fr);align-items:center}.studio-bar__group{min-width:0}.studio-bar__group--title{align-items:center;gap:12px;display:flex}.studio-label{color:var(--text-soft);margin-bottom:6px;font-size:.84rem;font-weight:700;display:inline-flex}.studio-meta{min-width:0}.song-title-input{letter-spacing:-.03em;width:min(100%,460px);min-height:54px;color:var(--text);background:#ffffffad;border:1px solid #ffffffad;border-radius:18px;padding:0 18px;font-size:1.3rem;font-weight:760;box-shadow:inset 0 1px #ffffffc7}.tempo-stack{background:#ffffff85;border-radius:20px;gap:6px;padding:10px 14px;display:grid}.tempo-stack label{font-weight:700}.tempo-stack input{accent-color:var(--accent)}.studio-toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:center}.control-cluster{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.control-cluster--status{justify-content:flex-end}.studio-grid-frame{grid-template-columns:minmax(250px,290px) minmax(0,1fr)}.sketchpad-sidebar{grid-template-rows:auto minmax(0,1fr);gap:12px;padding:18px;display:grid}.sketchpad-sidebar__header{justify-content:space-between;align-items:center;gap:12px;display:flex}.sketchpad-sidebar__add{flex:none;min-height:40px;padding:0 14px}.sidebar-list{gap:12px;display:grid}.sketchpad-tab{cursor:pointer;background:#ffffff94;border:1px solid #0000;border-radius:22px;gap:10px;padding:14px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:grid}.sketchpad-tab--compact{gap:8px;padding:16px 18px}.sketchpad-tab:hover{transform:translateY(-1px)}.sketchpad-tab:focus-visible{outline-offset:3px;outline:3px solid #61bfff57}.sketchpad-tab--active{background:linear-gradient(#fff7f4f0,#ffffffbd);border-color:#ff7a5952;box-shadow:0 12px 24px #ff7a591a}.sketchpad-tab__title{font-size:1.12rem;font-weight:760}.sketchpad-tab__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.sketchpad-tab__instrument{align-items:center;gap:8px;display:inline-flex}.sketchpad-tab__meta{color:var(--text-soft);font-size:.92rem}.sketchpad-tab__mix{background:#ffffff94;border:1px solid #ffffffad;border-radius:18px;gap:8px;padding:12px 14px;display:grid}.sketchpad-tab__mix-label{color:var(--text-soft);font-size:.86rem;font-weight:700}.sketchpad-tab__mix input[type=range]{width:100%;accent-color:var(--accent)}.tiny-button{min-height:38px;padding:0 14px;font-size:.92rem;font-weight:700}.tiny-button--active{color:var(--accent);background:#ff7a592e;border-color:#ff7a591f}.grid-surface{height:100%;min-height:0;padding:0;position:relative}.grid-stage{background:linear-gradient(#ffffffd6,#f5f9ffd1),linear-gradient(90deg,#ffd0a42e,#94dcff1f);border:1px solid #ffffffb3;border-radius:24px;height:100%;min-height:0;position:relative;overflow:hidden}.grid-stage:before{content:"";pointer-events:none;background:linear-gradient(90deg,#fff6,#0000 16% 84%,#ffffff42),linear-gradient(#ffffff4d,#0000 22%);position:absolute;inset:0}.grid-stage svg{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.studio-top-controls{justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:2px 2px 0;display:flex}.studio-top-controls__meta,.studio-top-controls__actions{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.studio-top-controls__meta{flex:auto}.studio-top-controls__meta .status-pill{-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%)}.studio-top-controls__actions{justify-content:flex-end}.studio-fab{-webkit-backdrop-filter:blur(24px)saturate(150%);backdrop-filter:blur(24px)saturate(150%);min-width:64px;min-height:44px;color:var(--text);background:#ffffffbd;border:1px solid #ffffffb8;border-radius:999px;padding:0 16px;font-size:.94rem;font-weight:760;box-shadow:0 18px 30px #4564851f}.studio-fab--active{color:var(--accent);background:#ffffffeb;border-color:#ff7a593d}.studio-fab--primary{color:#fff;background:linear-gradient(135deg,#ff8c72fa,#ff7a59eb);border-color:#fff6}.studio-popover{z-index:6;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(26px)saturate(160%);backdrop-filter:blur(26px)saturate(160%);background:linear-gradient(#ffffffe6,#f5f9ffdb);border:1px solid #ffffffc7;border-radius:28px;grid-template-rows:auto minmax(0,1fr);display:grid;position:absolute;overflow:hidden}.studio-popover--top-left{width:min(360px,100% - 144px);top:88px;left:24px}.studio-popover--top-right{width:min(360px,100% - 48px);top:88px;right:24px}.studio-popover--left{width:min(440px,100% - 48px);min-height:0;padding:0;top:144px;bottom:24px;left:24px;overflow:hidden}.studio-popover--bottom{height:auto;min-height:0;padding:0;inset:88px 24px 92px;overflow:hidden}.studio-popover--piano{height:auto;min-height:0;padding:0;inset:12px 24px;overflow:hidden}.studio-popover__stack{gap:8px;display:grid}.studio-popover__chrome{background:#ffffff6b;border-bottom:1px solid #3e5f8a14;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 12px;display:flex}.studio-popover__grab{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;align-items:center;gap:12px;min-width:0;display:inline-flex}.studio-popover__grab:active{cursor:grabbing}.studio-popover__grab-pill{background:linear-gradient(90deg,#ff7a59b8,#61bfffb8);border-radius:999px;width:38px;height:6px}.studio-popover__close{background:#ffffffc7;border:1px solid #ffffffb8;border-radius:999px;min-width:36px;min-height:36px;font-size:1.2rem;line-height:1;box-shadow:inset 0 1px #fffc}.studio-popover__body{overscroll-behavior:contain;gap:14px;min-height:0;padding:14px 18px 18px;display:grid;overflow-y:auto}.studio-popover__label{color:var(--text-soft);font-size:.9rem;font-weight:700}.output-card{background:#ffffff94;border:1px solid #ffffffb8;border-radius:22px;gap:12px;padding:14px;display:grid;box-shadow:inset 0 1px #fffc}.output-card__row{justify-content:space-between;align-items:center;gap:12px;display:flex}.output-card__value{color:var(--accent);font-size:1.2rem;font-weight:780}.studio-popover input[type=range]{width:100%;accent-color:var(--accent)}.studio-popover .sketchpad-sidebar,.studio-popover .tray-panel{height:100%;box-shadow:none;background:0 0;border:0;border-radius:28px}.studio-popover .sketchpad-sidebar{padding:0}.studio-popover .tray-panel{overscroll-behavior:contain;padding:0;overflow-y:auto}.studio-popover--piano .studio-popover__body{padding:8px 10px 10px;overflow:hidden}.studio-popover--piano .studio-popover__chrome{padding:10px 14px 8px}.tray-panel{align-items:stretch;height:100%;display:grid}.tray-panel--all{grid-template-rows:auto auto minmax(0,1fr);gap:16px}.tray-panel__header{gap:6px;display:grid}.family-list{grid-auto-rows:min-content;gap:10px;display:grid}.family-button{text-transform:capitalize;justify-content:flex-start;min-height:44px;padding:0 16px;font-weight:700}.family-button--active{color:var(--accent);background:#ff7a5929;border-color:#ff7a592e}.preset-groups{gap:18px;min-height:0;padding-bottom:18px;padding-right:4px;display:grid;overflow:visible}.preset-group{gap:12px;display:grid}.preset-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.preset-strip{gap:12px;min-width:0;padding-bottom:4px;display:flex;overflow-x:auto}.preset-card{background:#ffffff94;border:1px solid #0000;border-radius:22px;align-content:start;gap:12px;min-width:220px;min-height:164px;padding:18px;display:grid}.preset-card--active{background:linear-gradient(#f4fafff2,#ffffffbd);border-color:#61bfff42;box-shadow:0 12px 24px #61bfff1f}.preset-card__swatch{background:var(--swatch);border-radius:18px;width:54px;height:54px;box-shadow:inset 0 1px #fff6}.preset-card__swatch--small{border-radius:10px;width:24px;height:24px}.preset-card__title{font-size:1.08rem;font-weight:760;line-height:1.2}.preset-card__meta{color:var(--text-soft);font-size:.96rem;line-height:1.3}.studio-empty{place-items:center;height:100%;display:grid}@keyframes page-slide{0%{opacity:0;transform:translateY(16px)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-status{align-items:center;gap:8px;display:inline-flex}.auth-shell{place-items:center;min-height:100%;display:grid}.auth-card{width:min(640px,100%);padding:28px}.auth-form{gap:14px;margin-top:20px;display:grid}.auth-form__field{color:var(--text-soft);gap:8px;font-weight:600;display:grid}.auth-form__field input,.auth-form__field select,.auth-form__field textarea,.dashboard-cloud__form-card input{border:1px solid var(--line-strong);width:100%;min-height:48px;color:var(--text);background:#ffffffd6;border-radius:16px;padding:12px 14px}.auth-form__field textarea{resize:vertical;min-height:120px}.auth-form__submit{justify-content:center}.segmented-control{background:#f6f9ffeb;border-radius:999px;gap:6px;width:fit-content;padding:6px;display:inline-flex}.segmented-control__button{min-height:42px;color:var(--text-soft);border-radius:999px;padding:0 18px;font-weight:700}.segmented-control__button--active{color:var(--text);box-shadow:var(--shadow-sm);background:linear-gradient(#fff,#f4f8ffeb)}.dashboard-cloud{gap:14px;min-height:0;padding-right:2px;display:grid;overflow:auto}.dashboard-grid--cloud{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.dashboard-cloud__forms{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.dashboard-cloud__form-card{background:#f8faffd9;border:1px solid #ffffffb8;border-radius:20px;gap:10px;padding:18px;display:grid}.mini-card--static{cursor:default}.mini-card--stack{grid-template-columns:1fr;align-items:stretch}.button-row--compact{flex-wrap:wrap;justify-content:flex-start}.helper-text--danger{color:#b44a4a}.sound-controls-card{background:#f4f8ffeb;border:1px solid #ffffffc7;border-radius:22px;gap:10px;margin-bottom:18px;padding:18px;display:grid}.virtual-piano{touch-action:none;background:0 0;border:0;gap:10px;height:100%;min-height:0;padding:0;display:grid}.virtual-piano__stack{grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0;display:grid}.virtual-piano__row{background:#f4f8ffe6;border:1px solid #ffffffc7;border-radius:22px;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;padding:8px 10px 10px;display:grid}.virtual-piano__row-header,.virtual-piano__octave{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.virtual-piano__row-header{justify-content:space-between}.virtual-piano__keyboard{touch-action:none;background:linear-gradient(#fffc,#eff5fdf0);border:1px solid #ffffffd1;border-radius:24px;height:100%;min-height:0;padding:4px 4px 6px;position:relative;box-shadow:inset 0 1px #ffffffe0}.virtual-piano__white-bed{height:100%;min-height:0;position:relative}.virtual-piano__key{touch-action:none;justify-content:center;align-items:flex-end;transition:transform .14s,box-shadow .14s,background .14s;display:inline-flex;position:absolute}.virtual-piano__key:hover{transform:translateY(-1px)}.virtual-piano__key--white{background:linear-gradient(#fffffffa,#f2f7fdf5);border:1px solid #dce5f1eb;border-radius:16px;padding:0 4px 10px;top:0;bottom:0;box-shadow:0 10px 20px #50709414}.virtual-piano__key--black{z-index:2;background:linear-gradient(#243043fa,#111827eb);border-radius:0 0 12px 12px;min-height:58%;padding:0 4px 10px;top:0;box-shadow:0 12px 18px #0f172a2e}.virtual-piano__key--active.virtual-piano__key--white{background:linear-gradient(#aae3fffa,#72c8effa)}.virtual-piano__key--active.virtual-piano__key--black{background:linear-gradient(#589cfffa,#3a7adbf0)}.virtual-piano__note{color:#17314fc7;font-size:.74rem;font-weight:700;line-height:1}.virtual-piano__note--dual{text-align:center;gap:3px;line-height:1.02;display:grid}.virtual-piano__key--black .virtual-piano__note{color:#ffffffe0;font-size:.7rem}@media (max-width:1180px){.dashboard-grid,.dashboard-grid--cloud,.grid-gallery,.studio-grid-frame,.tray-panel,.studio-bar,.studio-toolbar{grid-template-columns:1fr}.dashboard-column--main{grid-template-rows:minmax(0,1fr) minmax(0,.78fr)}.studio-shell{grid-template-rows:auto auto minmax(0,1fr) minmax(0,196px)}.studio-shell--focus{grid-template-rows:minmax(0,1fr)}.control-cluster--status{justify-content:flex-start}.studio-popover--bottom{height:auto;top:96px;bottom:86px;left:24px}.studio-popover--piano{height:auto;top:12px;bottom:12px;left:18px}}@media (max-width:780px){.app-page{padding:10px}.topbar{flex-direction:column;align-items:flex-start;min-height:auto;padding:14px}.topbar__actions{justify-content:flex-start;width:100%;overflow:auto}.display-title{font-size:clamp(2rem,7vw,2.9rem)}.hero-card,.panel,.grid-surface,.sketchpad-sidebar,.auth-card{padding:16px}.dashboard-cloud__forms{grid-template-columns:1fr}.song-title-input{width:100%}.studio-focus-shell{padding:10px}.studio-top-controls{flex-direction:column;align-items:flex-start;padding:0}.studio-popover--top-left,.studio-popover--top-right,.studio-popover--left,.studio-popover--bottom,.studio-popover--piano{width:auto;left:12px;right:12px}.studio-popover--top-left,.studio-popover--top-right{top:124px}.studio-popover--left{top:124px;bottom:92px}.studio-popover--bottom{height:auto;top:124px;bottom:72px}.studio-popover--piano{height:auto;top:10px;bottom:10px}.virtual-piano__row-header{justify-content:space-between}}