:root{--bg-main:#0b1220;--bg-panel:#121f35;--bg-panel-soft:#1a2b46;--bg-elevated:#203553;--text-main:#f6f8ff;--text-muted:#aab8d0;--text-subtle:#7f94b4;--accent-primary:#59b7ff;--accent-primary-strong:#328fd6;--accent-secondary:#ffd45c;--border:#2c4668;--border-strong:#4f78a8;--grid-line:#28405d;--grid-beat:#3b5e87;--grid-bar:#6095c9;--grid-strong:#6095c9;--grid-cell:#101d31;--grid-cell-alt:#13233a;--grid-scale:#142a40;--grid-playhead:#1c4469;--danger:#f07b91;--danger-bg:#3a2030;--success:#79d6b6;--focus:#ffd45c;--shadow:0 14px 36px #02081480;--font-ui:Nunito,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text-main);font-family:var(--font-ui);background:radial-gradient(circle at 8% 0,#17365b 0,transparent 27%),radial-gradient(circle at 94% 8%,#132a4b 0,transparent 23%),var(--bg-main)}.app-shell{width:min(1200px,calc(100% - 28px));margin:auto;padding:22px 0 20px}.hero{display:flex;align-items:center;gap:11px;margin:0 4px 14px}.logo-orb{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,var(--accent-secondary),#e8a844);color:#18243a;font-size:23px;box-shadow:0 8px 20px #0008}.eyebrow{margin:0 0 2px;color:var(--text-subtle);font-size:10px;font-weight:800;letter-spacing:1.5px}h1,h2,p{margin-top:0}h1{margin:0;font:700 clamp(28px,4vw,40px)/.95 Fredoka,sans-serif;letter-spacing:-1.2px}h1 span{color:var(--accent-primary)}.subtitle{margin:4px 0 0;color:var(--text-muted);font-size:13px;font-weight:700}.hero-sparkles{margin-left:auto;color:var(--accent-secondary);font-size:18px;word-spacing:8px;transform:rotate(-8deg)}.card{background:linear-gradient(145deg,var(--bg-panel),#101d30);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.controls{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:11px 13px;align-items:stretch}.playback-strip{display:flex;align-items:center;gap:9px;width:100%;min-width:0}.primary-controls,.magic-controls{display:flex;gap:6px}.button{border:1px solid transparent;border-radius:11px;padding:9px 11px;background:var(--bg-elevated);color:var(--text-main);font:800 13px var(--font-ui);cursor:pointer;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}.button:hover{transform:translateY(-2px);background:#294664;border-color:var(--border-strong);box-shadow:0 7px 16px #0005}.button:active{transform:translateY(1px)}.button:focus-visible,.loop-button:focus-visible,.mix-toggle:focus-visible,.text-button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.button:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}.play{background:linear-gradient(135deg,#368fd2,#2775b5);border-color:#67bdff;color:#fff;box-shadow:0 6px 14px #164f7c99}.play:hover{background:linear-gradient(135deg,#4ca8eb,#328acb);border-color:#9bd4ff}.play span{font-size:11px}.soft{background:var(--bg-elevated);border-color:var(--border)}.ghost{background:transparent;color:var(--text-muted)}.clear-button{background:var(--danger-bg);border-color:#754052;color:#ffb4c1;box-shadow:0 3px 8px #0004}.clear-button:hover{background:#51273a;color:#ffe0e5}#pauseBtn{background:#263b59;border-color:#496b91;color:#d9eaff;box-shadow:0 3px 8px #0004}#pauseBtn:hover{background:#304b6e;color:#fff}#pauseBtn.play{background:#275d8b;color:#fff;border-color:#66b8ef;box-shadow:0 5px 10px #123f6799}#pauseBtn.play:hover{background:#3074a9}.tempo-control{min-width:150px;flex:1;margin:0}.tempo-control label{display:flex;justify-content:space-between;color:var(--text-muted);font-size:12px;font-weight:800}.tempo-control strong{color:var(--accent-primary)}input[type=range]{width:100%;accent-color:var(--accent-primary);cursor:pointer}.loop-button{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:11px;padding:7px 9px;background:var(--bg-panel-soft);color:var(--text-muted);font:800 11px var(--font-ui);letter-spacing:.3px;cursor:pointer;transition:.18s}.loop-button:hover{background:#294664;border-color:var(--border-strong);color:#fff}.loop-button.active{background:#183d60;color:#cbeaff;border-color:#4d94cc}.loop-button span{font-size:16px}.audio-status{display:block;min-width:110px;height:14px;overflow:hidden;color:var(--text-subtle);font-size:10px;font-weight:900;line-height:14px;white-space:nowrap;opacity:0;transition:opacity .16s}.audio-status.is-visible{opacity:1}.surprise{background:#3d3420;border-color:#806a31;color:#ffe19a}.surprise:hover{background:#534629;border-color:#b69a4a}.melody{background:#1e405e;border-color:#4389ba;color:#ccecff}.melody:hover{background:#285578}
.transport-range,.song-settings{display:flex;align-items:end;gap:6px;flex-wrap:wrap;width:100%;padding:7px 9px;background:#0e1a2d;border:1px solid #213b5b;border-radius:12px}.transport-range label,.song-settings label,.bar-copy-controls label{display:grid;gap:2px;color:var(--text-muted);font-size:10px;font-weight:800}.song-settings select,.song-settings input,.transport-range select,.bar-copy-controls select{border:1px solid var(--border);border-radius:8px;background:#16263d;color:var(--text-main);padding:5px 6px;font:800 12px ui-rounded,"Trebuchet MS",sans-serif;cursor:pointer}.song-settings select:hover,.song-settings input:hover,.transport-range select:hover,.bar-copy-controls select:hover{border-color:var(--border-strong);background:#1b304b}.song-settings input[type=number]{width:72px}.transport-range .button{padding:7px 9px;font-size:12px}.howto{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);font-size:12px;font-weight:700;padding:9px 12px}.howto b{display:inline-grid;place-items:center;width:19px;height:19px;margin-right:5px;border-radius:50%;background:#1d3d5e;color:var(--accent-primary)}.howto i{color:var(--text-subtle)}
.monster-section{margin:4px 0 15px}.section-heading,.composer-top{display:flex;align-items:end;justify-content:space-between;margin:0 2px 8px}.section-heading h2,.composer-top h2{margin:0;font:700 22px Fredoka}.selected-hint{margin:0;color:var(--text-muted);font-size:11px;font-weight:700;white-space:nowrap}.monster-tools{display:flex;align-items:center;gap:8px}.transpose-controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;padding:5px 6px;border:1px solid #254566;border-radius:10px;background:#142842}.transpose-controls strong{margin-right:2px;color:#a7d7ff;font-size:11px}.transpose-controls button{min-width:30px;border:1px solid var(--border);border-radius:7px;background:#1d304b;color:var(--text-main);padding:5px 6px;font:900 11px ui-rounded,"Trebuchet MS",sans-serif;cursor:pointer}.transpose-controls button:hover{background:#294b6d;color:#fff;border-color:var(--accent-primary)}.monster-band{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.monster-card{position:relative;overflow:hidden;min-height:132px;border:1px solid var(--border);border-radius:16px;padding:10px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;background:linear-gradient(145deg,color-mix(in srgb,var(--color) 17%,var(--bg-panel-soft)),var(--bg-panel))}.monster-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color) 70%,var(--border))}.monster-card.selected{border-color:var(--color);box-shadow:0 0 0 2px var(--color),0 8px 18px color-mix(in srgb,var(--color) 20%,transparent);transform:translateY(-3px)}.monster-card.selected:after{display:none}.monster-name,.monster-desc{position:relative;z-index:2;max-width:100%;padding-right:51px}.monster-name{margin:0;font:700 17px Fredoka}.monster-desc{display:block;margin:2px 0;color:#c4d1e5;font-size:10px;line-height:1.1;font-weight:700}.monster{position:absolute;right:8px;bottom:60px;width:61px;height:60px;background:var(--color);border-radius:45% 50% 42% 46%;box-shadow:inset -9px -10px #06111b38;transition:.16s}.monster:before,.monster:after{content:'';position:absolute;width:17px;height:17px;border:3px solid var(--color);background:#f7fbff;border-radius:50%;top:13px}.monster:before{left:12px}.monster:after{right:9px}.eye,.mouth{background:#172238}.eye{position:absolute;width:5px;height:7px;border-radius:50%;top:20px;z-index:2}.eye.left{left:19px}.eye.right{right:15px}.mouth{position:absolute;left:24px;bottom:12px;width:17px;height:8px;border-radius:0 0 20px 20px}.horn{position:absolute;width:12px;height:18px;background:var(--accent);top:-7px;border-radius:20px 20px 4px 4px}.horn.one{left:14px;transform:rotate(-22deg)}.horn.two{right:14px;transform:rotate(22deg)}.monster.zappy{border-radius:35% 56% 38% 52%;transform:rotate(4deg)}.monster.boomo{width:64px;height:64px}.monster.boomo .mouth{width:21px;height:14px;left:21px;bottom:11px;border-radius:50%}.monster.humko{border-radius:42% 42% 54% 54%;background:linear-gradient(145deg,var(--color),#3b78b9)}.monster.cink{border-radius:50% 50% 35% 35%;transform:rotate(5deg)}.monster.brnk{border-radius:58% 38% 58% 38%;transform:rotate(-4deg)}.monster.dunko{border-radius:48% 48% 42% 42%;background:linear-gradient(145deg,var(--color),#d96c52)}.monster-card.is-playing .monster{animation:monsterDance .24s ease-out}.monster-card.is-playing .mouth{height:18px}.monster-mix{position:absolute;left:9px;bottom:34px;z-index:4;display:flex;gap:3px}.mix-toggle{width:24px;height:24px;border:1px solid #ffffff55;border-radius:7px;background:#172942;color:#dceaff;font:900 11px ui-rounded,"Trebuchet MS",sans-serif;cursor:pointer;box-shadow:0 3px 7px #0005}.mix-toggle:hover{background:#294664}.mix-toggle.active.muted{background:#512d3c;color:#ffe2e7;border-color:#a2596e}.mix-toggle.active.solo{background:#514326;color:#ffe7a2;border-color:#ad8d3d}.monster-volume{position:absolute;z-index:5;left:9px;right:8px;bottom:7px;display:flex;align-items:center;gap:4px;color:#d4e1f3;font:900 9px ui-rounded,"Trebuchet MS",sans-serif;cursor:pointer}.monster-volume input{min-width:0;flex:1;height:15px;margin:0;accent-color:var(--color);cursor:pointer}.monster-volume output{min-width:27px;text-align:right}.monster-card.mix-muted .monster{filter:saturate(.45) opacity(.58)}
.composer{padding:14px}.composer-top{margin:0 1px 8px}.current-bar{margin:0 0 3px;text-align:right;color:var(--accent-primary);font-size:12px;font-weight:900}.legend{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:11px;font-weight:700}.legend-dot{width:10px;height:10px;border-radius:4px;background:var(--accent-primary)}.bar-key{height:16px;margin-left:9px;border-left:2px solid var(--grid-bar)}.bar-copy-controls{display:flex;align-items:end;gap:5px;flex-wrap:wrap;margin:0 0 8px;padding:7px 9px;border:1px solid #213b5b;border-radius:12px;background:#0e1a2d}.bar-copy-controls p{width:100%;margin:0;color:var(--text-subtle);font-size:10px;font-weight:900;letter-spacing:.5px}.bar-copy-controls .button{padding:6px 8px;font-size:11px}#copyStatus,#drumCopyStatus{align-self:center;color:var(--text-muted);font-size:10px;font-weight:800}#drumCopyStatus{font:700 12px var(--font-ui);white-space:normal}.grid-scroll{position:relative;overflow-x:auto;padding-bottom:3px;overscroll-behavior-x:contain}.sequencer{--label-width:42px;--cell-size:34px;display:grid;width:max-content;min-width:0;grid-template-columns:var(--label-width) repeat(var(--step-count),var(--cell-size));grid-template-rows:22px repeat(var(--pitch-count),var(--cell-size));position:relative;user-select:none}.step-label{display:grid;place-items:center;color:var(--text-subtle);font-size:10px;font-weight:900;border-bottom:1px solid var(--grid-line)}.step-label.has-bar{grid-template-rows:10px 10px;line-height:1}.bar-number{color:#9cd4ff;font-size:10px}.pitch-label{display:flex;align-items:center;padding-left:4px;color:#b6c8df;font-size:11px;font-weight:900;border-right:1px solid var(--grid-line)}.sequencer>.pitch-label{position:sticky;left:0;z-index:4;background:#13243a;box-shadow:2px 0 0 var(--grid-line)}.sequencer>.pitch-label.in-scale{background:#173647;color:#a8e3d0}.sequencer>.corner-label{position:sticky;left:0;z-index:6;background:#13243a;box-shadow:2px 0 0 var(--grid-line)}.cell{position:relative;border:0;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);background:var(--grid-cell);cursor:pointer;padding:0}.cell:nth-child(4n){background:var(--grid-cell-alt)}.cell.in-scale:not(.playing-col){background:var(--grid-scale)}.step-label.beat-divider,.cell.beat-divider{border-right:2px solid var(--grid-beat)!important}.step-label.bar-end,.cell.bar-end{border-right:3px solid var(--grid-bar)!important}.cell:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;z-index:5}.step-label.playing-col,.cell.playing-col{background:var(--grid-playhead)!important;box-shadow:inset 2px 0 var(--accent-primary),inset -2px 0 var(--accent-primary)}.step-label.playing-col{color:#e5f4ff;box-shadow:inset 2px 0 var(--accent-primary),inset -2px 0 var(--accent-primary),inset 0 2px var(--accent-primary)}.cell.playing-col:last-child{box-shadow:inset 2px 0 var(--accent-primary),inset -2px 0 var(--accent-primary),inset 0 -2px var(--accent-primary)}.note{position:absolute;inset:4px 2px;border:0;border-radius:7px;background:var(--note);box-shadow:0 3px 8px color-mix(in srgb,var(--note) 45%,transparent);z-index:2;cursor:pointer;animation:pop .18s ease-out}.note:after{content:'';position:absolute;right:4px;top:50%;width:3px;height:3px;border-radius:50%;background:#fff9;transform:translateY(-50%)}.note.sounding{filter:brightness(1.18);box-shadow:0 0 0 2px #fff,0 0 17px var(--note);animation:pulse .28s ease-out}#sequencer .cell .note-layer{inset:auto 2px;top:5px;height:8px;border-radius:4px;z-index:3;pointer-events:auto}#sequencer .cell .note.layered{inset:auto 2px;top:calc(4px + var(--layer-index)*7px);height:6px;border-radius:3px;z-index:calc(3 + var(--layer-index));box-shadow:0 2px 4px color-mix(in srgb,var(--note) 45%,transparent)}#sequencer .cell .note-layer:after{right:4px;width:3px;height:3px}.cell .note.hidden-layer{display:none}.layer-count{position:absolute;right:3px;bottom:3px;z-index:8;display:grid;min-width:13px;height:13px;place-items:center;border-radius:7px;background:#07111f;color:#fff;font:900 8px/1 var(--font-ui);pointer-events:none}.grid-tip{margin:8px 0 0;text-align:center;color:var(--text-muted);font-size:11px;font-weight:700}.drum-composer{margin-top:16px}
.secondary-controls{display:flex;justify-content:center;gap:5px;margin:10px 0}.text-button{border:0;background:none;color:#a9ccec;font:800 12px var(--font-ui);cursor:pointer;padding:6px 8px;text-decoration:underline;text-underline-offset:3px}.text-button:hover{color:#fff}.note-menu{position:fixed;z-index:10;background:var(--bg-elevated);padding:12px;border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 15px 35px #020814bb}.note-menu p{margin:0 0 8px;color:var(--text-muted);font-size:11px;font-weight:900}.note-menu div{display:flex;gap:4px}.note-menu button{border:1px solid var(--border);border-radius:8px;background:#182b45;color:var(--text-main);font:800 11px var(--font-ui);padding:7px;cursor:pointer}.note-menu button:hover{background:#294664}.note-menu button:disabled{opacity:.42;cursor:not-allowed}.note-menu .delete-note{width:100%;margin-top:7px;border-color:#754052;background:var(--danger-bg);color:#ffb4c1}.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#020814b8;padding:20px}.modal-box{max-width:360px;padding:27px;border:1px solid var(--border-strong);border-radius:25px;background:var(--bg-panel);text-align:center;box-shadow:0 20px 60px #000c}.modal-icon{display:grid;place-items:center;width:47px;height:47px;margin:auto;border-radius:16px;background:#40371f;color:var(--accent-secondary);font:700 27px Fredoka}.modal h2{margin:12px 0 5px;font:700 24px Fredoka}.modal p{color:var(--text-muted);font-size:14px;font-weight:700}.modal-box>div:last-child{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast{position:fixed;left:50%;bottom:22px;z-index:30;transform:translate(-50%,100px);opacity:0;transition:.25s;border:1px solid #3f739b;border-radius:14px;background:#163652;color:#ecf8ff;padding:11px 17px;font:800 13px var(--font-ui);box-shadow:0 9px 23px #0009}.toast.show{transform:translate(-50%,0);opacity:1}[hidden]{display:none!important}
@keyframes pop{0%{transform:scale(.65)}100%{transform:scale(1)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes monsterDance{50%{transform:translateY(-13px) rotate(-4deg) scale(1.05)}}
@media(max-width:1100px){.app-shell{width:min(100% - 24px,1200px)}.controls{align-items:stretch}.playback-strip{min-width:100%;order:0}.song-settings{order:1;flex:1}.magic-controls{order:2}.transport-range{order:1}.monster-band{display:flex;overflow-x:auto;grid-template-columns:none;padding:2px 1px 7px}.monster-card{flex:0 0 128px;min-width:128px;min-height:132px}.sequencer{--cell-size:42px}.composer{padding:13px}}
@media(min-width:768px) and (max-width:1366px){.app-shell{width:calc(100% - 24px);max-width:none}}
@media(max-width:640px){.app-shell{width:min(100% - 20px,1200px);padding-top:12px}.hero{margin-bottom:8px}.logo-orb{width:36px;height:36px;border-radius:13px;font-size:19px}.hero h1{font-size:27px}.subtitle,.hero-sparkles,.howto{display:none}.controls{gap:8px;padding:8px;border-radius:16px}.playback-strip{position:sticky;top:6px;z-index:8;display:grid;grid-template-columns:1fr auto;gap:6px;width:100%;min-width:0;padding:7px;border:1px solid var(--border);border-radius:13px;background:var(--bg-panel);box-shadow:0 6px 14px #0006}.primary-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px}.primary-controls .button{padding:8px 7px;font-size:12px}.primary-controls #newBtn,.primary-controls #clearBtn{display:inline-block}.tempo-control{grid-column:1/-1;min-width:0;order:3}.tempo-control label{font-size:11px}.loop-button{grid-column:2;grid-row:1;align-self:stretch;justify-content:center;padding:5px 7px}.loop-button b{display:none}.song-settings{gap:5px}.song-settings label{font-size:9px}.song-settings select,.song-settings input{max-width:100px;padding:5px;font-size:11px}.magic-controls{width:100%}.magic-controls .button{flex:1;padding:8px 6px;font-size:11px}.transport-range{gap:5px;padding:7px}.transport-range .button{padding:7px;font-size:11px}.monster-section{margin:10px 0 11px}.section-heading{align-items:flex-start;margin-bottom:6px}.section-heading h2{font-size:18px}.selected-hint{display:none}.monster-tools{margin-left:auto}.transpose-controls strong{display:none}.transpose-controls button{min-width:28px;padding:5px}.monster-band{gap:7px;padding-bottom:6px}.monster-card{flex-basis:112px;min-width:112px;min-height:128px;padding:8px}.monster-name{font-size:15px;padding-right:46px}.monster-desc{font-size:0}.monster-desc:after{content:attr(data-short);font-size:9px}.monster{width:54px;height:53px;right:7px;bottom:60px}.monster.boomo{width:56px;height:56px}.monster-mix{left:7px;bottom:34px}.mix-toggle{width:25px;height:25px}.monster-volume{left:7px;right:7px;bottom:7px;font-size:9px}.composer{padding:11px;border-radius:17px}.composer-top{margin-bottom:6px}.composer-top h2{font-size:19px}.legend{display:none}.bar-copy-controls{margin-bottom:7px;padding:7px}.bar-copy-controls p{display:none}#copyStatus{width:100%;font-size:9px}.grid-tip{font-size:10px}.sequencer{--label-width:38px;--cell-size:clamp(28px,calc((100vw - 84px)/8),44px);grid-template-rows:21px repeat(var(--pitch-count),var(--cell-size))}.pitch-label{font-size:10px}.step-label{font-size:9px}.secondary-controls{margin:7px 0}}
.step-label.group-divider,.cell.group-divider{border-right:2px solid var(--grid-beat)!important}