style.css

:root{--gradient: linear-gradient(135deg, #739df2 10%, #c772f2 100%);--arrow-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='svg-arrow' fill='%23000000' d='M12,14.071L8.179,10.25c-0.414-0.414-1.086-0.414-1.5,0l0,0c-0.414,0.414-0.414,1.086,0,1.5l4.614,4.614 c0.391,0.391,1.024,0.391,1.414,0l4.614-4.614c0.414-0.414,0.414-1.086,0-1.5v0c-0.414-0.414-1.086-0.414-1.5,0L12,14.071z'%3E%3C/path%3E%3C/svg%3E%0A")}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;font-family:"Montserrat",sans-serif}select,label,input,button{-webkit-app-region:no-drag}body{-webkit-app-region:drag;margin:0;width:100%;height:100vh;font-family:"Montserrat",sans-serif;background-color:#222831;display:flex;overflow:hidden}.container{border-radius:25px;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:0 0 70px -10px rgba(0,0,0,.2);color:#fff;height:100vh;width:100%;display:flex}.container .left{height:100vh;width:272px;flex-shrink:0;transition:200ms ease;display:flex;justify-content:space-around;flex-direction:column}.container .left.startup{background-image:var(--gradient)}.container .left.startup .welcome{user-select:none;display:flex}.container .left.startup .pad-container{display:none}.container .left.open{background-image:none}.container .left.used{background-image:var(--gradient)}.container .left .welcome{display:none;margin:1.5em;flex-direction:column;align-items:flex-start;height:100vh;justify-content:flex-end}.container .left .welcome a{text-decoration:none;color:inherit}.container .left .welcome h1{margin:0}.container .left .welcome p{font-size:15px}.container .left .drop-zone{cursor:pointer;font-weight:700;height:3em;display:flex;border:3px solid #fff;border-radius:10px;text-align:center;align-content:center;align-items:center;align-self:center;justify-content:center;justify-items:center;justify-self:center;width:100%;appearance:none;color:#fff;background-color:rgba(0,0,0,0);outline:none}.container .left .pad-container{margin:2em 0 1em;display:flex;flex-direction:column;height:100vh;justify-content:space-between}.container .left .pad-info{width:100%}.container .left .pad-info .bulk-help{margin:0 24px 16px;font-size:12px;line-height:1.5}.container .left .pad-info .volume-entry{display:none}.container .left .pad-info .row{display:flex;align-items:center;justify-content:space-between;margin:.5em 1.5em}.container .left .pad-info .row label{font-size:14px;font-weight:700;user-select:none;width:100px}.container .left .pad-info .row label span{font-size:10px;font-weight:700;text-transform:uppercase}.container .left .pad-info .row .volume-container{width:100%}.container .left .pad-info .row .original-file-container{width:100%}.container .left .pad-info .row .original-file-container input.original-file{width:100%;border-radius:2px;border:0;background:rgba(0,0,0,0);color:#fff}.container .left .pad-info button.remove-pad{outline:none;width:100%;box-sizing:border-box;border:none;border-radius:25px;padding:10px;font-family:"Montserrat",sans-serif;text-align:center;background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%);color:#fff;font-weight:700;box-shadow:0 0 30px -5px rgba(0,0,0,.25);cursor:pointer;transition:transform 200ms ease}.container .left .pad-info button.remove-pad:hover{transform:scale(0.95)}.container .left .pad-info button.remove-pad:active{transform:scale(1.05)}.container .left .pad-info button.write-card[disabled]{cursor:not-allowed}.container .left .current-pad{margin:0 1.5em 0 1.5em;display:flex;align-items:center;justify-content:space-between;user-select:none;max-height:78px}.container .left .current-pad #waveform{position:absolute;z-index:0}.container .left .current-pad .pad-label{z-index:1}.container .left .current-pad .meta-data{text-align:right;z-index:1}.container .left .current-pad .audio-preview{width:70px;display:flex;justify-content:space-evenly;z-index:1}.container .left .current-pad .audio-preview button{border:none;background:none;box-shadow:none;cursor:pointer;padding:0;margin:0;font-size:24px}.container .left .current-pad h1{margin:0;font-weight:700;font-size:4em;vertical-align:bottom}.container .left .current-pad h3{margin:0;font-size:1em;vertical-align:bottom}.container .left.bulk .single-pad-only,.container .left.bulk .current-pad .meta-data,.container .left.bulk .current-pad .audio-preview,.container .left.bulk .volume.range{display:none}.container .left.bulk .volume-entry{display:block;width:100%}.container .left.bulk .current-pad h1{font-size:2em}.container .right{display:flex;flex-direction:column;background-color:#222831;height:100%;flex:1;min-width:0}.container .right .top{margin:2em 24px 16px}.container .right .top .folder-selector{display:flex;justify-content:space-between;align-items:center;gap:24px}.container .right .top .card-heading{min-width:0}.container .right .top .card-heading h1{margin:0;font-size:22px}.container .right .top .card-heading .card-path{margin:6px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#aeb7c5}.container .right .top .matrix-help{margin:12px 0 0;font-size:12px;color:#aeb7c5;line-height:1.5}.container .right .middle{flex:1;min-height:0;overflow:auto;padding:4px 24px 12px;-webkit-app-region:no-drag}.container .right .middle p.errors{display:none;padding:12px;margin:0 0 16px;border:1px solid #f27373;border-radius:8px;cursor:pointer}.container .right .middle .matrix-empty{padding:40px;text-align:center;border:1px dashed #526070;border-radius:12px;color:#aeb7c5;margin:0 0 16px}.container .right .middle .bank-matrix{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px}.container .right .middle .bank-group{padding:12px;background:#29313d;border:1px solid #3b4555;border-radius:12px}.container .right .middle .bank-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.container .right .middle .bank-heading h2{margin:0;font-size:14px}.container .right .middle .bank-heading .bank-count{font-size:10px;color:#aeb7c5}.container .right .middle .pad-list,.container .right .middle .pattern-list{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px}.container .right .middle .pad-list .pad,.container .right .middle .pad-list .pattern-pad,.container .right .middle .pattern-list .pad,.container .right .middle .pattern-list .pattern-pad{user-select:none;-webkit-app-region:no-drag;cursor:pointer;transition:background-color 150ms ease,box-shadow 150ms ease;border:1px solid #526070;border-radius:6px;text-align:center;min-width:0;height:52px;padding:5px 2px;color:#d7deea;background:#222831;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.container .right .middle .pad-list .pad .pad-name,.container .right .middle .pad-list .pattern-pad .pad-name,.container .right .middle .pattern-list .pad .pad-name,.container .right .middle .pattern-list .pattern-pad .pad-name{font-size:13px;font-weight:700}.container .right .middle .pad-list .pad .pad-status,.container .right .middle .pad-list .pattern-pad .pad-status,.container .right .middle .pattern-list .pad .pad-status,.container .right .middle .pattern-list .pattern-pad .pad-status{font-size:8px}.container .right .middle .pad-list .pad:hover,.container .right .middle .pad-list .pad:focus-visible,.container .right .middle .pad-list .pattern-pad:hover,.container .right .middle .pad-list .pattern-pad:focus-visible,.container .right .middle .pattern-list .pad:hover,.container .right .middle .pattern-list .pad:focus-visible,.container .right .middle .pattern-list .pattern-pad:hover,.container .right .middle .pattern-list .pattern-pad:focus-visible{outline:2px solid #739df2;outline-offset:1px}.container .right .middle .pad-list .pad[draggable=true],.container .right .middle .pad-list .pattern-pad[draggable=true],.container .right .middle .pattern-list .pad[draggable=true],.container .right .middle .pattern-list .pattern-pad[draggable=true]{cursor:grab}.container .right .middle .pad-list .pad.dragging,.container .right .middle .pad-list .pattern-pad.dragging,.container .right .middle .pattern-list .pad.dragging,.container .right .middle .pattern-list .pattern-pad.dragging{opacity:.45;cursor:grabbing}.container .right .middle .pad-list .pad.drop-target,.container .right .middle .pad-list .pattern-pad.drop-target,.container .right .middle .pattern-list .pad.drop-target,.container .right .middle .pattern-list .pattern-pad.drop-target{outline:3px solid #73f279;outline-offset:2px;box-shadow:0 0 16px rgba(115,242,121,.45)}.container .right .middle .pad-list .pad.active-pad,.container .right .middle .pad-list .pattern-pad.active-pad,.container .right .middle .pattern-list .pad.active-pad,.container .right .middle .pattern-list .pattern-pad.active-pad{background-image:var(--gradient);color:#fff;border-color:rgba(0,0,0,0)}.container .right .middle .pad-list .pad.add-pad,.container .right .middle .pad-list .pattern-pad.add-pad,.container .right .middle .pattern-list .pad.add-pad,.container .right .middle .pattern-list .pattern-pad.add-pad{background-image:linear-gradient(135deg, #73f279 10%, #72f2ac 100%);color:#222831;border-color:rgba(0,0,0,0)}.container .right .middle .pad-list .pad.delete-pad,.container .right .middle .pad-list .pattern-pad.delete-pad,.container .right .middle .pattern-list .pad.delete-pad,.container .right .middle .pattern-list .pattern-pad.delete-pad{background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%);color:#fff;border-color:rgba(0,0,0,0)}.container .right .middle .pad-list .pad.selected,.container .right .middle .pad-list .pattern-pad.selected,.container .right .middle .pattern-list .pad.selected,.container .right .middle .pattern-list .pattern-pad.selected{color:#222831;background-image:linear-gradient(135deg, #ecd051 10%, #f2e572 100%);border-color:rgba(0,0,0,0);box-shadow:0 0 0 2px #ecd051}.container .right .bottom{margin:12px 24px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.container .right .bottom .matrix-legend{display:flex;flex-wrap:wrap;gap:16px;color:#aeb7c5;font-size:11px}.container .right .bottom .matrix-legend span{display:flex;align-items:center;gap:6px}.container .right .bottom .matrix-legend i{width:8px;height:8px;border-radius:50%}.container .right .bottom .matrix-legend .sample-dot{background-image:var(--gradient)}.container .right .bottom .matrix-legend .pending-dot{background:#73f279}.container .right .bottom .matrix-legend .remove-dot{background:#f27373}.container .right .bottom .matrix-legend .selected-dot{background:#ecd051}.container .right .bottom button.write-card{display:none;outline:none;width:220px;flex-shrink:0;border:none;border-radius:25px;padding:12px;background-image:var(--gradient);color:#fff;font-weight:700;cursor:pointer}.container .right .bottom button.write-card:hover{filter:brightness(1.1)}.container .right .bottom button.write-card[disabled]{cursor:not-allowed;opacity:.5}@media(max-width: 1300px){.container .right .middle .bank-matrix{grid-template-columns:repeat(4, minmax(0, 1fr))}}[hidden]{display:none !important}select.tempo-mode{cursor:pointer;-webkit-appearance:none;background-image:var(--arrow-black);background-size:24px;background-position:92% center;background-repeat:no-repeat;color:#222831;width:100px;height:36px;border-radius:2px;box-shadow:none;border:0;transition:all .3s ease-in-out;padding:0 10px;font-weight:700;font-size:16px;outline:none}button.choose-folder{cursor:pointer;-webkit-appearance:none;background-color:rgba(0,0,0,0);border-radius:2px;box-shadow:none;border:1px solid #739df2;color:#fff;transition:all .3s ease-in-out;padding:5px 10px 5px 10px;font-weight:700;font-size:16px;text-align:right;outline:none}button.choose-folder[disabled]{cursor:not-allowed}.range{display:block;border:0;outline:none;height:30px;width:100%}.input{border:0;outline:none;display:block;-webkit-appearance:none;background:#ebf7fc;color:#222831;padding:8px;width:100px;height:36px;font-size:14px;font-weight:700;font-family:"Montserrat",sans-serif;border-radius:2px;transition:border .3s ease}.button-cover{position:absolute;top:0;right:0;bottom:0;left:0}.knobs{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;background-color:#ebf7fc;transition:.3s ease all;z-index:1}.button{position:relative;width:120px;height:36px;overflow:hidden;border-radius:2px}.checkbox{position:relative;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;z-index:3}.checkbox:disabled{cursor:not-allowed}.slider.button{width:100px}.slider .knobs:before{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:.3s ease all;content:"";left:4px;background-image:var(--gradient)}.slider .knobs:after{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:.3s ease all;content:"LO-FI";right:0px;color:#222831}.slider .knobs span{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:.3s ease all;display:inline-block;left:4px;color:#fff;z-index:1}.slider .checkbox:checked+.knobs span{color:#222831}.slider .checkbox:checked+.knobs:before{width:34px;left:54px;background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%)}.slider .checkbox:checked+.knobs:after{color:#fff}.slider .checkbox:checked~.layer{background-color:#fcebeb}.slider.lofi .knobs:before{width:34px}.slider.lofi .knobs:after{width:34px;content:"✕"}.slider.lofi .checkbox:checked+.knobs:before{width:26px;left:62px}.slider.gate-loop .knobs:before{width:34px}.slider.gate-loop .knobs:after{width:34px;content:"✕"}.slider.gate-loop .checkbox:checked+.knobs:before{width:26px;left:62px}.slider.mono-stereo .knobs:after{content:"MONO"}.slider.mono-stereo .checkbox:checked+.knobs:before{width:34px;left:54px}.slider.reverse-off .knobs:before{width:48px}.slider.reverse-off .knobs:after{width:34px;content:"✕"}.slider.reverse-off .checkbox:checked+.knobs:before{width:26px;left:62px}.button.slider .checkbox:indeterminate+.knobs span,.button.slider .checkbox:indeterminate+.knobs::after{font-size:9px}.button.slider .checkbox:indeterminate+.knobs span{color:#fff}.button.slider .checkbox:indeterminate+.knobs::before{visibility:hidden}.button.slider .checkbox:indeterminate+.knobs::after{content:"MIXED";width:44px;right:0;color:#fff}.button.slider .checkbox:indeterminate~.layer{background-color:#4b5565}.pad-selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px}.pad-selection-toolbar button{color:#fff;background:#343d4b;border:1px solid #566174;border-radius:6px;padding:6px 10px;cursor:pointer}.gradient-background{--border-width: 10px;border-radius:var(--border-width);top:calc(-1*var(--border-width));left:calc(-1*var(--border-width));width:calc(100% + var(--border-width)*2);height:calc(100% + var(--border-width)*2);background:linear-gradient(60deg, hsl(224, 85%, 66%), hsl(269, 85%, 66%), hsl(314, 85%, 66%), hsl(359, 85%, 66%), hsl(44, 85%, 66%), hsl(89, 85%, 66%), hsl(134, 85%, 66%), hsl(179, 85%, 66%));background-size:300% 300%;background-position:0 50%;border-radius:calc(2*var(--border-width));animation:moveGradient 4s alternate infinite}@keyframes moveGradient{50%{background-position:100% 50%}}[tooltip]{position:relative}[tooltip]::before,[tooltip]::after{text-transform:none;font-size:.9em;line-height:1;user-select:none;pointer-events:none;position:absolute;display:none;opacity:0}[tooltip]::before{content:"";border:5px solid rgba(0,0,0,0);z-index:1001}[tooltip]::after{content:attr(tooltip);font-family:"Montserrat",sans-serif;text-align:center;min-width:3em;max-width:21em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1ch 1.5ch;border-radius:.3ch;box-shadow:0 1em 2em -0.5em rgba(0,0,0,.35);background:#333;color:#fff;z-index:1000}[tooltip]:hover::before,[tooltip]:hover::after{display:block}[tooltip=""]::before,[tooltip=""]::after{display:none !important}[tooltip]:not([flow])::before,[tooltip][flow^=up]::before{bottom:100%;border-bottom-width:0;border-top-color:#333}[tooltip]:not([flow])::after,[tooltip][flow^=up]::after{bottom:calc(100% + 5px)}[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^=up]::before,[tooltip][flow^=up]::after{left:50%;transform:translate(-50%, -0.5em)}[tooltip][flow^=down]::before{top:100%;border-top-width:0;border-bottom-color:#333}[tooltip][flow^=down]::after{top:calc(100% + 5px)}[tooltip][flow^=down]::before,[tooltip][flow^=down]::after{left:50%;transform:translate(-50%, 0.5em)}[tooltip][flow^=left]::before{top:50%;border-right-width:0;border-left-color:#333;left:calc(0em - 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^=left]::after{top:50%;right:calc(100% + 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^=right]::before{top:50%;border-left-width:0;border-right-color:#333;right:calc(0em - 5px);transform:translate(0.5em, -50%)}[tooltip][flow^=right]::after{top:50%;left:calc(100% + 5px);transform:translate(0.5em, -50%)}@keyframes tooltips-vert{to{opacity:.9;transform:translate(-50%, 0)}}@keyframes tooltips-horz{to{opacity:.9;transform:translate(0, -50%)}}[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^=up]:hover::before,[tooltip][flow^=up]:hover::after,[tooltip][flow^=down]:hover::before,[tooltip][flow^=down]:hover::after{animation:tooltips-vert 300ms ease-out forwards}[tooltip][flow^=left]:hover::before,[tooltip][flow^=left]:hover::after,[tooltip][flow^=right]:hover::before,[tooltip][flow^=right]:hover::after{animation:tooltips-horz 300ms ease-out forwards}.loading{display:none;z-index:99999}.loading h1{position:absolute;z-index:2;margin:0;font-size:13.333vw;left:50%;top:50%;transform:translate(-50%, -50%);color:blue;mix-blend-mode:color-burn;line-height:1;padding:.25em}.loading canvas{z-index:1;position:absolute;will-change:contents}@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;src:url("fonts/montserrat-regular-webfont.eot");src:url("fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/montserrat-regular-webfont.woff2") format("woff2"),url("fonts/montserrat-regular-webfont.woff") format("woff"),url("fonts/montserrat-regular-webfont.ttf") format("truetype");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;src:url("fonts/montserrat-bold-webfont.eot");src:url("fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/montserrat-bold-webfont.woff2") format("woff2"),url("fonts/montserrat-bold-webfont.woff") format("woff"),url("fonts/montserrat-bold-webfont.ttf") format("truetype");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}.workspace-tabs{display:flex;gap:4px;margin-top:16px;border-bottom:1px solid #3b4555;-webkit-app-region:no-drag}.workspace-tabs button{border:0;border-bottom:3px solid rgba(0,0,0,0);padding:10px 18px;background:rgba(0,0,0,0);color:#aeb7c5;font-size:14px;font-weight:700;cursor:pointer}.workspace-tabs button[aria-selected=true]{color:#fff;border-bottom-color:#a290f2}.workspace-tabs button:focus-visible{outline:2px solid #739df2;outline-offset:-2px}.pattern-preview button,.pattern-mapping button{border:1px solid #526070;border-radius:6px;color:#d7deea;background:#222831;padding:8px 12px;font-size:11px;font-weight:700;cursor:pointer}.pattern-preview button:hover,.pattern-mapping button:hover{border-color:#a290f2}.pattern-preview button:disabled,.pattern-mapping button:disabled{opacity:.45;cursor:not-allowed}.pattern-preview button:focus-visible,.pattern-mapping button:focus-visible{outline:2px solid #739df2;outline-offset:2px}.pattern-preview button.primary,.pattern-mapping button.primary{background-image:var(--gradient);border-color:rgba(0,0,0,0);color:#fff}.pattern-preview input,.pattern-preview select,.pattern-mapping input,.pattern-mapping select{color:#d7deea;background:#222831;border:1px solid #526070;border-radius:5px;padding:7px;font-size:12px}.eyebrow{color:#aeb7c5;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 0 6px}.pattern-preview{border:1px solid #3b4555;border-radius:12px;background:#29313d;padding:12px;margin-bottom:16px;flex-shrink:0}.pattern-preview .pattern-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.pattern-preview .pattern-heading>div:first-child{min-width:0;flex:1}.pattern-preview h2{font-size:18px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-preview .pattern-summary{font-size:11px;color:#aeb7c5;margin:8px 0 10px;line-height:1.5}.pattern-preview .pattern-slot-label{color:#ecd051;margin-left:8px}.pattern-preview .pattern-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex-shrink:0}.pattern-preview .pattern-timeline-wrap{position:relative;border:1px solid #3b4555;border-radius:6px;overflow:auto;max-height:280px}.pattern-preview .pattern-timeline{display:block;width:100%}.pattern-preview .pattern-timeline-empty{position:absolute;top:50%;width:100%;text-align:center;color:#aeb7c5;font-size:12px;margin:0;transform:translateY(-50%)}.pattern-preview .pattern-preview-footer{display:flex;gap:20px;align-items:center;justify-content:space-between;padding-top:10px;font-size:10px;color:#aeb7c5}.pattern-preview .pattern-used-pads{line-height:1.6;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-preview .pattern-preview-footer label{flex-shrink:0}.pattern-preview .pattern-bpm{width:70px;margin-left:6px}.pattern-matrix-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 12px;flex-shrink:0}.pattern-matrix-heading h2{font-size:14px;margin:0}.pattern-matrix-heading p{font-size:11px;margin:0;color:#aeb7c5}.container .right .middle.patterns-active{display:flex;flex-direction:column;overflow:hidden}.container .right .middle.patterns-active #patterns-panel{display:flex;flex:1;flex-direction:column;min-height:0}.container .right .middle.patterns-active .pattern-matrix{flex:1;min-height:0;overflow:auto;align-content:start;padding:3px}.container .right .middle.patterns-active .pattern-timeline-wrap{max-height:150px}.container .right .middle.patterns-active .pattern-pad{height:38px}.pattern-mapping{-webkit-app-region:no-drag;width:min(780px,100vw - 64px);max-height:calc(100vh - 64px);padding:24px;border:1px solid #526070;border-radius:16px;background:#29313d;color:#fff;box-shadow:0 24px 80px rgba(0,0,0,.5333333333)}.pattern-mapping::backdrop{background:rgba(16,21,29,.8)}.pattern-mapping .mapping-form{display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 112px)}.pattern-mapping .mapping-form>*{flex-shrink:0}.pattern-mapping .mapping-heading{display:flex;justify-content:space-between;align-items:center}.pattern-mapping h2{font-size:22px;margin:0}.pattern-mapping .close-mapping{border:0;font-size:24px;padding:0 8px;background:rgba(0,0,0,0)}.pattern-mapping .mapping-file{margin:0;color:#c0afff;font-size:13px;overflow-wrap:anywhere}.pattern-mapping .mapping-options{display:flex;align-items:flex-end;gap:10px}.pattern-mapping .mapping-options label{font-size:10px;color:#aeb7c5}.pattern-mapping .mapping-options select{display:block;margin-top:6px;width:100%;max-width:230px}.pattern-mapping .mapping-help,.pattern-mapping .mapping-save-help{font-size:11px;line-height:1.6;color:#aeb7c5;margin:0}.pattern-mapping .mapping-table-wrap{flex:1 1 auto;min-height:0;max-height:260px;overflow:auto;border:1px solid #3b4555;border-radius:6px}.pattern-mapping table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.pattern-mapping th{position:sticky;top:0;z-index:1;background:#222831;font-size:10px;color:#aeb7c5}.pattern-mapping th,.pattern-mapping td{padding:8px 12px;border-bottom:1px solid #3b4555}.pattern-mapping td select{width:250px}.pattern-mapping td input{width:100px}.pattern-mapping .mapping-source{font-weight:700;white-space:nowrap}.pattern-mapping .mapping-detail{color:#aeb7c5;font-size:10px;overflow-wrap:anywhere}.pattern-mapping .mapping-validation{color:#73f279;font-size:11px;margin:0;line-height:1.5}.pattern-mapping .mapping-validation.invalid{color:#f27373}.pattern-mapping .mapping-footer{display:flex;align-items:center;gap:12px}.pattern-mapping .mapping-save-help{flex:1}@media(max-width: 1300px),(max-height: 700px){.container .right .middle.patterns-active .pattern-timeline-wrap{max-height:110px}.pattern-preview .pattern-actions{max-width:310px}.pattern-preview .pattern-actions button{padding:6px 8px;font-size:10px}}