@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color:#1d2740;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#1d2740;--muted:#7a8196;--muted-strong:#4e566c;--accent:#3152bd;--font-display:"Space Grotesk", sans-serif;--font-mono:"IBM Plex Mono", monospace;background:radial-gradient(circle at 0 0,#ffc99a57,#0000 24%),radial-gradient(circle at 85% 12%,#6587ff2e,#0000 18%),linear-gradient(#fffaf3,#f7f2ea 46%,#f5efe6);font-family:Space Grotesk,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}#root{max-width:1440px;margin:0 auto;padding:1.2rem 1.2rem 2rem}::selection{background:#3152bd2e}@media (width<=720px){#root{padding:.8rem .8rem 1.4rem}}.app-shell{flex-direction:column;gap:2rem;display:flex}.hero-panel{border-bottom:1px solid #19223714;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:2rem;padding:2rem 0 .5rem;display:grid}.hero-copy{flex-direction:column;gap:1rem;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.24em;color:var(--muted);margin:0;font-size:.75rem}.hero-panel h1{font-family:var(--font-display);letter-spacing:-.08em;color:var(--ink);margin:0;font-size:clamp(3.4rem,9vw,6.5rem);line-height:.94}.hero-text{max-width:36rem;color:var(--muted-strong);margin:0;font-size:1.04rem;line-height:1.8}.hero-stats{flex-wrap:wrap;gap:1rem;margin-top:.6rem;display:flex}.hero-stats div{border-top:1px solid #1922371f;min-width:7.5rem;padding-top:.8rem}.hero-stats span,.status-block span,.lane-meta span,.bar-number,.section-head span,.footer-note p:last-child{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.76rem}.hero-stats strong,.status-block strong{color:var(--ink);margin-top:.35rem;font-size:1.12rem;display:block}.hero-signal{background:radial-gradient(circle at 50% 48%,#ffa55e6b,#0000 24%),radial-gradient(circle at 42% 58%,#3b66ff42,#0000 26%),linear-gradient(160deg,#0b101dfa,#192237f5);border:1px solid #ffffff0f;border-radius:2rem;min-height:18rem;position:relative;overflow:hidden}.signal-core,.signal-ring{border-radius:999px;position:absolute}.signal-core{filter:blur(.4px);background:radial-gradient(circle at 32% 28%,#ffffffdb,#0000 34%),radial-gradient(circle,#ff9a53e6,#4f85ff33 70%,#0000 75%);width:8.8rem;height:8.8rem;margin:auto;animation:5.2s ease-in-out infinite breathe;inset:calc(50% - 4.4rem)}.signal-ring{border:1px solid #ffffff24;width:13.6rem;height:13.6rem;margin:auto;inset:calc(50% - 6.8rem)}.signal-ring-a{animation:11s linear infinite rotate-ring}.signal-ring-b{border-color:#ffffff14;width:17rem;height:17rem;animation:15s linear infinite reverse rotate-ring;inset:calc(50% - 8.5rem)}.signal-steps{grid-template-columns:repeat(18,1fr);align-items:end;gap:.45rem;display:grid;position:absolute;inset:auto 1.5rem 1.25rem}.signal-steps span{height:var(--height);opacity:.86;animation:1.8s ease-in-out infinite equalizer;animation-delay:var(--offset);background:linear-gradient(#ffaa67eb,#5784ff38);border-radius:999px 999px 0 0;display:block}.workspace{grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:1.8rem;display:grid}.control-rail,.stage-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffaf4d1;border:1px solid #19223714;border-radius:1.8rem}.control-rail{flex-direction:column;display:flex;overflow:hidden}.rail-section{border-bottom:1px solid #19223714;padding:1.4rem 1.35rem}.rail-section:last-child{border-bottom:0}.section-head{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem;display:flex}.section-label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.8rem}.template-list,.layer-grid,.suggestion-list{flex-wrap:wrap;gap:.65rem;display:flex}.genre-filter-list{flex-wrap:wrap;gap:.55rem;margin-bottom:.85rem;display:flex}.genre-filter{color:var(--muted-strong);background:#ffffff80;border:1px solid #19223714;border-radius:999px;padding:.52rem .82rem;transition:transform .16s,border-color .16s,background .16s}.genre-filter.active{color:var(--ink);background:linear-gradient(135deg,#2f4eb61f,#ffa3541f);border-color:#2f4eb638}.genre-card-grid{gap:.7rem;display:grid}.genre-card{text-align:left;background:linear-gradient(#ffffffc7,#f7f1e9e6),linear-gradient(135deg,#2f4eb60f,#ffa3540f);border:1px solid #19223714;border-radius:1.15rem;gap:.36rem;padding:.95rem;transition:transform .16s,border-color .16s,box-shadow .16s,background .16s;display:grid}.genre-card.active,.genre-card:hover{border-color:#2f4eb638;transform:translateY(-1px);box-shadow:0 14px 28px #222f5814}.genre-card-tag{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.72rem}.genre-card strong{color:var(--ink);font-size:.98rem}.genre-card p,.genre-card small{margin:0}.genre-card p{color:var(--muted-strong);line-height:1.55}.genre-card small{color:var(--muted)}.genre-card-meta{flex-wrap:wrap;gap:.8rem;margin-top:.2rem;display:flex}.genre-card-meta span,.current-rack,.helper-text{color:var(--muted)}.genre-card-meta span{letter-spacing:.08em;text-transform:uppercase;font-size:.76rem}.ghost-chip,.layer-chip{color:var(--ink);background:#ffffffa3;border:1px solid #19223714;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}.ghost-chip{border-radius:999px;padding:.7rem .95rem;font-size:.9rem}.hum-section{background:radial-gradient(circle at 12% 20%,#ffa45429,#0000 32%),radial-gradient(circle at 88% 20%,#2f4eb61f,#0000 30%),#fffaf46b}.hum-control-row{grid-template-columns:1fr 1fr;gap:.7rem;display:grid}.hum-record-button,.hum-clear-button{font:inherit;cursor:pointer;border-radius:999px;padding:.75rem .9rem;transition:transform .16s,border-color .16s,box-shadow .16s,background .16s}.hum-record-button{color:#fffef8;background:linear-gradient(135deg,#203f9d,#f06445);border:0}.hum-record-button.active{background:linear-gradient(135deg,#c8332d,#ff9d57);box-shadow:0 0 0 5px #c8332d1a}.hum-clear-button{color:var(--ink);background:#ffffffb3;border:1px solid #1922371a}.hum-clear-button:disabled{cursor:not-allowed;opacity:.45}.hum-readout{background:#ffffff9e;border:1px solid #19223714;border-radius:1rem;align-items:center;gap:.65rem;margin-top:.85rem;padding:.7rem .8rem;display:flex}.hum-readout strong{color:var(--ink);line-height:1.4}.hum-dot{background:#7a819673;border-radius:50%;width:.72rem;height:.72rem}.hum-dot.active{background:#eb4b3f;animation:1s ease-out infinite humPulse;box-shadow:0 0 #eb4b3f57}.ghost-chip:hover,.layer-chip:hover,.primary-action:hover,.secondary-action:hover,.hum-record-button:hover,.hum-clear-button:not(:disabled):hover{border-color:#3352b347;transform:translateY(-1px);box-shadow:0 12px 22px #24305314}.control-rail textarea,.control-rail input,.control-rail select{box-sizing:border-box;width:100%;font:inherit;color:var(--ink);background:#ffffffbd;border:1px solid #1922371a;border-radius:1rem}.control-rail textarea{resize:vertical;min-height:6.8rem;padding:1rem 1.05rem;line-height:1.7}.field-grid{gap:.9rem;display:grid}.instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mood-card-grid{gap:.6rem;max-height:24rem;padding-right:.25rem;display:grid;overflow:auto}.mood-card{text-align:left;background:linear-gradient(#ffffffc2,#f8f2e8e6),linear-gradient(135deg,#2f4eb60d,#ffa35414);border:1px solid #19223714;border-radius:1rem;gap:.28rem;padding:.85rem .95rem;transition:transform .16s,border-color .16s,box-shadow .16s;display:grid}.mood-card:hover,.mood-card.active{border-color:#2f4eb63d;transform:translateY(-1px);box-shadow:0 12px 24px #222f5814}.mood-card strong{color:var(--ink)}.mood-card span{color:var(--muted-strong);line-height:1.45}.mood-reroll{width:100%;color:var(--ink);background:#ffffffb8;border:1px solid #1922371a;border-radius:999px;margin-top:.75rem;padding:.78rem .95rem}.manual-instrument-panel{margin-top:.2rem}.field-grid label{gap:.5rem;display:grid}.field-grid label span{color:var(--muted-strong);font-size:.84rem}.control-rail select,.control-rail input[type=number]{padding:.8rem .95rem}.control-rail input[type=range]{accent-color:var(--accent);padding:0}.helper-text{margin:.9rem 0 0;line-height:1.6}.instrument-note{color:var(--muted);line-height:1.45}.soundfont-loader{gap:.55rem;display:grid}.soundfont-preset-list{gap:.65rem;margin-bottom:.85rem;display:grid}.soundfont-preset{text-align:left;background:linear-gradient(#ffffffc7,#f8f2e8e6),linear-gradient(135deg,#2f4eb60d,#ffa35414);border:1px solid #19223714;border-radius:1rem;gap:.25rem;padding:.95rem;transition:transform .16s,border-color .16s,box-shadow .16s;display:grid}.soundfont-preset:hover,.soundfont-preset.active{border-color:#2f4eb638;transform:translateY(-1px);box-shadow:0 12px 24px #222f5814}.soundfont-preset:disabled{opacity:.7;cursor:wait}.soundfont-preset strong{color:var(--ink)}.soundfont-preset span,.soundfont-preset small{color:var(--muted)}.soundfont-loader input[type=file]{background:#fff9;border:1px dashed #19223724;border-radius:.9rem;padding:.7rem .85rem}.layer-grid{gap:.65rem;display:grid}.layer-chip{text-align:left;border-radius:1rem;gap:.25rem;padding:.85rem .95rem;display:grid}.layer-chip strong{font-size:.96rem}.layer-chip span{color:var(--muted-strong);font-size:.82rem}.layer-chip.active{background:linear-gradient(135deg,#2f4eb61a,#ffa35424);border-color:#2f4eb633}.action-strip{grid-template-columns:repeat(3,1fr);gap:.85rem;display:grid}.primary-action,.secondary-action{font:inherit;cursor:pointer;border-radius:999px;padding:.95rem 1rem}.primary-action{color:#fffef8;background:linear-gradient(135deg,#3152bd,#ff9d57);border:0}.secondary-action{color:var(--ink);background:#ffffffb8;border:1px solid #1922371a}.stage-panel{flex-direction:column;gap:1.4rem;padding:1.45rem;display:flex}.stage-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.stage-header h2{font-family:var(--font-display);color:var(--ink);margin:.3rem 0 0;font-size:clamp(2rem,4vw,2.8rem);line-height:.96}.current-rack{margin:.5rem 0 0;font-size:.9rem;line-height:1.5}.status-block{text-align:right}.bar-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;display:grid}.bar-tile{background:linear-gradient(#ffffffc2,#f8f2e8db),linear-gradient(135deg,#4162cb0f,#ffa75d14);border:1px solid #19223714;border-radius:1.25rem;gap:.35rem;min-height:9rem;padding:1rem;display:grid}.bar-tile strong{color:var(--ink);font-size:1.1rem}.bar-tile p,.bar-tile small{margin:0}.bar-tile p{color:var(--muted-strong)}.bar-tile small{color:var(--muted);font-size:.86rem}.lane-stack{gap:.85rem;display:grid}.lane-row{border-top:1px solid #19223714;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:1rem;padding:.95rem 0;display:grid}.lane-row:first-child{border-top:0}.lane-meta{gap:.3rem;display:grid}.lane-meta strong{color:var(--ink)}.lane-grid{gap:.55rem;display:grid}.lane-bar{grid-template-columns:repeat(16,minmax(0,1fr));gap:.28rem;display:grid}.lane-step{aspect-ratio:1;background:#19223714;border-radius:999px;display:block}.lane-step.hit{background:linear-gradient(135deg,#ffa354f2,#3152bdf2)}.lane-step.hold{background:#3152bd47}.footer-note{border-top:1px solid #19223714;gap:.4rem;padding-top:.35rem;display:grid}.footer-note p{color:var(--muted-strong);margin:0}.error-text{color:#a3412b;margin:.8rem 0 0}@keyframes breathe{0%,to{opacity:.88;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes rotate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes equalizer{0%,to{opacity:.5;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}@keyframes humPulse{0%{box-shadow:0 0 #eb4b3f57}to{box-shadow:0 0 0 12px #eb4b3f00}}@media (width<=1080px){.workspace,.hero-panel,.lane-row{grid-template-columns:1fr}.stage-header{flex-direction:column}.status-block{text-align:left}}@media (width<=720px){.app-shell{gap:1.25rem}.hero-panel{padding-top:.5rem}.action-strip{grid-template-columns:1fr}.stage-panel,.rail-section{padding-left:1rem;padding-right:1rem}.bar-strip{grid-template-columns:1fr}.signal-steps{gap:.24rem}.instrument-grid{grid-template-columns:1fr}}