*{box-sizing:border-box}:root{--bg:#121615;--panel:#171d1cc7;--panel-soft:#2aa9a90f;--panel-strong:#2aa9a91c;--line:#2aa9a940;--line-muted:#cee8e01f;--text:#e5f5ef;--muted:#93aaa2;--accent:#2aa9a9;--accent-warm:#f26d6d;--accent-soft:#2aa9a92e;--accent-warm-soft:#f26d6d24;--shadow:0 24px 80px #00000061}body{background:radial-gradient(circle at 18% 18%, #2aa9a929, transparent 34%), radial-gradient(circle at 86% 74%, #f26d6d1c, transparent 30%), var(--bg);min-height:100vh;color:var(--text);margin:0;padding:32px;font-family:Courier New,Courier,monospace;overflow:hidden}#rain-canvas{z-index:-1;pointer-events:none;opacity:.6;width:100%;height:100%;position:fixed;top:0;left:0}button,select,input{font-family:inherit}label,h3,.section-label{letter-spacing:.13em;text-transform:uppercase}label{color:var(--muted);font-size:.76rem}h3{color:var(--muted);margin:0;font-size:.78rem}.section-label{color:var(--accent);font-size:.72rem}.app-shell{grid-template-columns:minmax(460px,680px) minmax(300px,380px);justify-content:center;gap:24px;width:min(1200px,100%);height:calc(100vh - 64px);margin:0 auto;display:grid}.control-panel,.output-panel{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:24px}.right-stack{flex-direction:column;gap:12px;min-height:0;display:flex}.control-panel{flex-direction:column;flex:1;min-height:0;padding:18px;display:flex}.output-panel{flex-direction:column;gap:22px;min-height:0;padding:28px;display:flex}.panel-header{border-bottom:1px solid var(--line-muted);padding-bottom:22px}.panel-header h1{color:var(--text);margin:0;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95}.panel-header p{max-width:60ch;color:var(--muted);margin:0;line-height:1.6}.brand-lockup{align-items:center;gap:16px;margin-bottom:8px;display:flex}.brand-logo{flex:none;width:clamp(48px,7vw,76px);height:clamp(48px,7vw,76px)}.tab-list{border:1px solid var(--line-muted);background:#0000002e;border-radius:999px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:auto 0 20px;padding:4px;display:grid}.tab-button,#start-btn{border:1px solid var(--line);color:var(--accent);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}.tab-button{text-align:center;background:0 0;border-color:#0000;border-radius:999px;min-width:0;padding:10px 8px;font-size:.78rem}.tab-button:hover,.tab-button.active{border-color:var(--line);background:var(--accent-soft);color:var(--text)}.tab-panels{flex:1;min-height:0}.tab-panel{gap:18px;display:grid}.tab-panel[hidden]{display:none}.control-section{border:1px solid var(--line-muted);background:linear-gradient(180deg, var(--panel-soft), #00000024);border-radius:18px;gap:12px;padding:16px;display:grid}.preset-card{border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#2aa9a91a,#0003);border-radius:20px;gap:14px;padding:16px;display:grid}.mobile-config-toggle,.mobile-panel-header{display:none}.section-heading{border-bottom:1px solid var(--line-muted);gap:6px;padding-bottom:12px;display:grid}.section-heading p{color:var(--muted);margin:0;font-size:.8rem;line-height:1.5}.control-group,.ambience-stack{background:0 0;border:0;border-radius:0;flex-direction:column;gap:9px;padding:0;display:flex}.inline-control{flex-direction:row;justify-content:space-between;align-items:center}select,input{border:1px solid var(--line);width:100%;max-width:100%;color:var(--accent);background:#101514;border-radius:10px;padding:10px}input[type=checkbox]{width:auto;accent-color:var(--accent)}input[type=range]{accent-color:var(--accent);padding:0}.switch{flex:none;width:46px;height:24px;display:inline-block;position:relative}.switch input{z-index:1;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.switch input:checked+.slider{border-color:var(--accent);background:var(--accent);box-shadow:0 0 18px #2aa9a92e}.switch input:checked+.slider:before{background:#071111;transform:translate(22px)}.slider{cursor:pointer;border:1px solid var(--line);background:#00000038;transition:background .2s,border-color .2s,box-shadow .2s;position:absolute;inset:0}.slider:before{content:"";background:#e5f5efc7;width:16px;height:16px;transition:transform .2s,background .2s;position:absolute;bottom:3px;left:3px}.slider.round,.slider.round:before{border-radius:999px}.fill-control.is-queued label,.fill-control.is-active label{color:var(--text)}.fill-control.is-queued .slider{background:var(--accent)}.fill-control.is-active .slider{border-color:var(--accent-warm);background:var(--accent-warm);box-shadow:0 0 20px #f26d6d3d}.ambience-stack{gap:14px}.range-row{grid-template-columns:86px minmax(0,1fr);align-items:center;gap:14px;display:grid}.range-row label{white-space:nowrap}.range-control{grid-template-columns:16px minmax(0,1fr) 16px;align-items:center;gap:6px;display:grid}.range-control input[type=range]{grid-column:2}.range-control span{color:var(--accent);letter-spacing:.08em;text-align:center;font-size:.86rem}.preset-row{flex-direction:row;align-items:center;gap:12px}.preset-row label{margin:0}.preset-row select{flex:1;min-width:0}.dice-btn{--dice-size:17px;--dice-half:8.5px;border:1px solid var(--line-muted);width:32px;height:32px;color:var(--muted);cursor:pointer;perspective:180px;perspective-origin:50%;background:#00000038;border-radius:8px;flex:none;place-items:center;padding:0;font-size:1.05rem;line-height:1;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;display:grid;position:relative;overflow:visible}.dice-btn:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(120deg,#0000 18%,#9adbd23d 44%,#0000 68%);position:absolute;inset:-1px;transform:translate(-130%)}.dice-btn:after{content:"";filter:blur(4px);opacity:.5;pointer-events:none;background:#2aa9a952;border-radius:999px;width:18px;height:4px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)scaleX(.74)}.dice-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px);box-shadow:0 7px 18px #2aa9a929,inset 0 0 16px #2aa9a914}.dice-btn.is-rolling{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 8px 20px #2aa9a933,inset 0 0 16px #2aa9a914}.dice-btn.is-rolling:after{animation:.32s ease-out both dice-shadow}.dice-btn.is-rolling .dice-cube{animation:.32s cubic-bezier(.18,.78,.2,1) both dice-cube-roll}.dice-btn:active{transform:translateY(0)scale(.94)}.dice-scene{z-index:1;width:var(--dice-size);height:var(--dice-size);pointer-events:none;transform-style:preserve-3d;display:block;position:relative;transform:translateY(-1px)scale(.8)}.dice-cube{z-index:1;width:100%;height:100%;transform:rotateX(var(--dice-start-x,-24deg)) rotateY(var(--dice-start-y,34deg)) rotateZ(-8deg);transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.dice-current-1{--dice-start-x:-24deg;--dice-start-y:34deg;--dice-end-x:336deg;--dice-end-y:394deg}.dice-current-2{--dice-start-x:-24deg;--dice-start-y:214deg;--dice-end-x:336deg;--dice-end-y:574deg}.dice-current-3{--dice-start-x:-24deg;--dice-start-y:-56deg;--dice-end-x:336deg;--dice-end-y:304deg}.dice-current-4{--dice-start-x:-24deg;--dice-start-y:124deg;--dice-end-x:336deg;--dice-end-y:484deg}.dice-current-5{--dice-start-x:-114deg;--dice-start-y:34deg;--dice-end-x:246deg;--dice-end-y:394deg}.dice-current-6{--dice-start-x:66deg;--dice-start-y:34deg;--dice-end-x:426deg;--dice-end-y:394deg}.dice-face{backface-visibility:visible;background-color:#9adbd2;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:4px;width:100%;height:100%;display:block;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0711115c,inset 0 6px 9px #ffffff2e,inset 0 -7px 10px #07111138}.dice-face-1{transform:translateZ(var(--dice-half))}.dice-face-2{transform:rotateY(180deg) translateZ(var(--dice-half))}.dice-face-3{transform:rotateY(90deg) translateZ(var(--dice-half))}.dice-face-4{transform:rotateY(-90deg) translateZ(var(--dice-half))}.dice-face-5{transform:rotateX(90deg) translateZ(var(--dice-half))}.dice-face-6{transform:rotateX(-90deg) translateZ(var(--dice-half))}@keyframes dice-cube-roll{0%{transform:rotateX(var(--dice-start-x,-24deg)) rotateY(var(--dice-start-y,34deg)) rotateZ(-8deg)}26%{transform:rotateX(calc(var(--dice-start-x,-24deg) + 112deg)) rotateY(calc(var(--dice-start-y,34deg) + 88deg)) rotateZ(3deg) scale(1.025)}55%{transform:rotateX(calc(var(--dice-start-x,-24deg) + 236deg)) rotateY(calc(var(--dice-start-y,34deg) + 218deg)) rotateZ(-2deg) scale(1.018)}82%{transform:rotateX(calc(var(--dice-end-x,336deg) - 26deg)) rotateY(calc(var(--dice-end-y,394deg) - 22deg)) rotateZ(-6deg) scale(1.006)}to{transform:rotateX(var(--dice-end-x,336deg)) rotateY(var(--dice-end-y,394deg)) rotateZ(-8deg)}}@keyframes dice-shadow{0%,to{opacity:0;transform:translate(-50%)scaleX(.7)}36%,72%{opacity:1;transform:translate(-50%)scaleX(1.35)}}@media (prefers-reduced-motion:reduce){.dice-btn.is-rolling .dice-cube,.dice-btn.is-rolling:after{animation:none}}.session-actions{margin-top:auto;display:block}#start-btn{border:1px solid var(--line);background:var(--accent);color:#071111;border-radius:999px;width:100%;min-height:54px;padding:14px 18px;font-size:1rem;font-weight:700;box-shadow:0 10px 28px #2aa9a92e}#start-btn:hover{color:#071111;background:#35bcbc;border-color:#f26d6d66;transform:translateY(-1px);box-shadow:0 14px 34px #2aa9a93d,0 0 18px #f26d6d1f}.display-area{opacity:.34;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;transition:opacity .8s;display:grid}.chord-box{border:1px solid var(--line-muted);background:linear-gradient(145deg, var(--panel-strong), transparent), #0000002e;border-radius:22px;flex-direction:column;min-width:0;min-height:clamp(150px,24vh,220px);padding:24px;display:flex}.chord-box h1{color:var(--accent);text-overflow:ellipsis;white-space:nowrap;margin:18px 0 10px;font-size:clamp(2.25rem,5vw,4.8rem);line-height:.9;overflow:hidden}#chord-detail{overflow-wrap:anywhere;color:var(--muted);line-height:1.5}.melody-trail{border:1px solid var(--line-muted);background:#00000024;border-radius:20px;gap:12px;padding:16px;display:grid}.trail-stage{height:clamp(96px,16vh,148px);padding:10px 6px;position:relative;overflow:hidden}.trail-stage:before{content:"";z-index:0;background:repeating-linear-gradient(#e5f5ef29 0 1px,#0000 1px 10px);width:100%;height:44%;position:absolute;top:16%;left:0}.trail-stage:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#0000 0%,#2aa9a914 18%,#0000 62%);position:absolute;inset:0}.drum-mark{left:0;top:calc(58% + var(--drum-y) * 30%);z-index:2;width:calc(5px + var(--drum-size) * 9px);height:calc(5px + var(--drum-size) * 9px);opacity:0;pointer-events:none;filter:none;animation:flow-drum var(--flow-duration) linear var(--flow-delay) forwards;position:absolute;transform:translate(-50%,-50%)}.drum-mark-current{z-index:1;opacity:.88;filter:none;animation:.42s ease-out both drum-mark-current}.drum-mark-current.drum-kick{background:#f26d6d33;border-color:#f26d6dd1;box-shadow:0 0 14px #f26d6d6b,0 0 36px #f26d6d2e}.drum-mark-current.drum-snare{background:#e5f5ef2e;border-color:#e5f5efb8;box-shadow:0 0 14px #e5f5ef57,0 0 30px #2aa9a91f}.drum-mark-current.drum-hihat{background:#2aa9a9d1;box-shadow:0 0 12px #2aa9a961,0 0 26px #2aa9a929}.drum-mark-current.drum-tom-low,.drum-mark-current.drum-tom-mid,.drum-mark-current.drum-tom-high{background:#f26d6d29;border-color:#f26d6dc2;box-shadow:0 0 16px #f26d6d57,0 0 34px #2aa9a91a}.drum-mark-current.drum-crash{background:#f26d6dc7;box-shadow:0 0 18px #f26d6d6b,0 0 44px #f26d6d33}.drum-fill{z-index:1;filter:none}.drum-fill:after{content:"";border-radius:inherit;border:1px solid #f26d6d85;position:absolute;inset:-2px;box-shadow:0 0 12px #f26d6d57}.drum-kick{background:#f26d6d2e;border:1px solid #f26d6dad;border-radius:50%;box-shadow:0 0 14px #f26d6d38}.drum-snare{background:#e5f5ef24;border:1px solid #e5f5ef94;border-radius:3px;box-shadow:0 0 12px #e5f5ef2e}.drum-hihat{background:#2aa9a9b8;border-radius:999px;height:2px;box-shadow:0 0 10px #2aa9a933}.drum-tom-low,.drum-tom-mid,.drum-tom-high{background:#f26d6d29;border:1px solid #f26d6d94;border-radius:36% 64% 44% 56%;box-shadow:0 0 12px #f26d6d33}.drum-tom-mid{border-radius:42% 58% 58% 42%}.drum-tom-high{border-radius:58% 42% 48% 52%}.drum-crash{background:#f26d6dc2;border-radius:999px;height:3px;box-shadow:0 0 12px #f26d6d42}.trail-note{z-index:2;width:calc(26px + var(--note-size) * 48px);opacity:0;min-width:26px;height:26px;animation:flow-note var(--flow-duration) linear var(--flow-delay) forwards;flex:none;align-items:center;display:inline-flex;position:absolute;top:38%;left:0}.trail-note:last-child .note-head{background:#f26d6d38;border-color:#f26d6db8;box-shadow:0 0 18px #f26d6d47,0 0 34px #2aa9a91f}.note-head{background:#2aa9a93d;border:1px solid #2aa9a9e6;border-radius:50%;flex:none;width:12px;height:9px;transform:rotate(-16deg);box-shadow:0 0 12px #2aa9a933}.note-tail{background:linear-gradient(90deg,#2aa9a9b8,#f26d6d33,#2aa9a900);flex:auto;min-width:8px;height:1px;margin-left:2px}#log{border:1px solid var(--line-muted);min-height:clamp(96px,15vh,150px);color:var(--muted);background:#00000024;border-radius:18px;flex:auto;align-content:start;gap:2px;padding:14px;font-size:.82rem;display:grid;overflow:hidden auto}.note-event{border-bottom:1px solid #ffffff0b;grid-template-columns:42px 34px minmax(64px,auto) minmax(48px,1fr);align-items:center;gap:9px;min-width:0;padding:5px 2px;animation:.25s linear both event-enter;display:grid}.note-event:first-child{color:var(--text)}.event-note{color:var(--accent);font-size:.92rem}.event-duration{background:#ffffff12;border-radius:999px;grid-area:1/4;height:2px;position:relative;overflow:hidden}.event-duration span{width:calc(var(--duration-size) * 100%);border-radius:inherit;background:#2aa9a9c2;height:100%;display:block}.event-beats{color:var(--muted);text-align:left;grid-area:1/2;font-size:.7rem}.event-chord{color:#e5f5efc2;text-overflow:ellipsis;white-space:nowrap;grid-area:1/3;font-size:.74rem;overflow:hidden}@keyframes drum-mark-current{0%{opacity:.95;filter:brightness(1.8);transform:translate(-50%,-50%)scale(1.42)}35%{opacity:.38;filter:brightness(.9);transform:translate(-50%,-50%)scale(.92)}62%{opacity:.88;filter:brightness(1.55);transform:translate(-50%,-50%)scale(1.18)}to{opacity:.3;filter:brightness();transform:translate(-50%,-50%)scale(1)}}@keyframes flow-note{0%{opacity:1;transform:translate(-50%, calc(-50% + (.5 - var(--pitch-y)) * 36px)) scale(1.08);filter:brightness(1.25);left:100%}22%{opacity:.96;filter:brightness()}86%{opacity:.78}96%{opacity:.7}to{opacity:0;transform:translate(-50%, calc(-50% + (.5 - var(--pitch-y)) * 36px)) scale(.72);left:-24%}}@keyframes flow-drum{0%{opacity:1;filter:brightness(1.3);left:100%;transform:translate(-50%,-50%)scale(1.28)}24%{opacity:.94;filter:brightness()}86%{opacity:.76}96%{opacity:.68}to{opacity:0;left:-24%;transform:translate(-50%,-50%)scale(.64)}}@keyframes event-enter{0%{opacity:.72}to{opacity:1}}@media (width<=860px){html,body{height:100%;overflow:hidden}body{padding:12px}.app-shell{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;gap:10px;height:calc(100dvh - 24px);min-height:0;overflow:hidden}.output-panel{gap:10px;padding:14px;overflow:hidden}.panel-header{border-bottom:0;flex:none;padding-bottom:0}.panel-header h1{font-size:clamp(1.35rem,7vw,2rem)}.panel-header p{display:none}.brand-lockup{gap:10px;margin-bottom:0}.brand-logo{width:34px;height:34px}.display-area{flex:none;order:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chord-box{border-radius:14px;min-height:58px;padding:10px 12px}.chord-box h3{font-size:.58rem}.chord-box h1{margin:7px 0 0;font-size:clamp(1.18rem,7vw,2rem)}#chord-detail{display:none}.melody-trail{flex:0 168px;order:2;min-height:0;padding:8px}.trail-stage{height:100%;min-height:124px}.trail-note{width:calc(20px + var(--note-size) * 32px);min-width:20px;height:20px}.note-head{width:10px;height:7px}.drum-mark{width:calc(4px + var(--drum-size) * 7px);height:calc(4px + var(--drum-size) * 7px)}.right-stack{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-height:auto;display:grid;overflow:visible}.preset-card{border-radius:16px;gap:8px;padding:10px}.preset-card .section-heading{display:none}.preset-row{gap:8px}.preset-row label{flex:none;font-size:.62rem}.dice-btn{width:30px;height:30px}.mobile-config-toggle{border:1px solid var(--line);width:46px;min-height:46px;color:var(--accent);cursor:pointer;background:#00000038;border-radius:14px;place-items:center;padding:0;display:grid}.mobile-config-toggle span{background:currentColor;width:19px;height:19px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.49.42L9.13 5.07c-.6.23-1.17.56-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.49.42L9.13 5.07c-.6.23-1.17.56-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.control-panel{z-index:20;opacity:0;pointer-events:none;border-radius:20px;height:min(68dvh,560px);min-height:320px;max-height:calc(100dvh - 24px);padding:12px;transition:transform .22s,opacity .22s;position:fixed;inset:auto 12px 12px;overflow:hidden;transform:translateY(calc(100% + 24px));box-shadow:0 24px 70px #0000008f}.control-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.mobile-panel-header{border-bottom:1px solid var(--line-muted);color:var(--text);letter-spacing:.12em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:10px;font-size:.78rem;font-weight:700;display:flex}.mobile-panel-header button{border:1px solid var(--line-muted);width:32px;height:32px;color:var(--accent);cursor:pointer;background:#00000038;border-radius:999px;place-items:center;padding:0;font-size:1.15rem;line-height:1;display:grid}.tab-list{flex:none;margin:0 0 10px}.tab-button{padding:8px 6px;font-size:.68rem}.tab-panels{min-height:0;padding-right:2px;overflow:auto}.tab-panel{gap:8px}.control-section{border-radius:14px;gap:8px;padding:10px}.section-heading{gap:0;padding-bottom:7px}.section-heading p{display:none}.section-label{font-size:.62rem}.control-group,.ambience-stack{gap:6px}label{font-size:.66rem}select,input{padding:8px}.range-row{grid-template-columns:72px minmax(0,1fr);gap:8px}.session-actions{flex:none;grid-column:1/-1;margin-top:0}#start-btn{min-height:46px;padding:11px 16px}#log{border-radius:14px;flex:0 96px;order:4;gap:1px;min-height:72px;padding:8px;font-size:.72rem}.note-event{grid-template-columns:34px 28px minmax(44px,1fr) minmax(36px,.72fr);gap:6px;padding:3px 1px}.event-note{font-size:.8rem}.event-beats{font-size:.62rem}.event-chord{font-size:.66rem}}@media (width<=600px){.control-panel,.output-panel{border-radius:18px;padding:10px}.chord-box{min-height:54px;padding:9px 10px}.range-row{grid-template-columns:64px minmax(0,1fr);gap:6px}.trail-stage{min-height:108px}#log{flex-basis:86px;min-height:66px}.control-section{padding:8px}.tab-button{padding:7px 5px}}