@font-face{font-family:'Abel';src:url('font/Abel-Regular.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}:root{--background-color:#2a2a2a;--element-bg-color:var(--background-color);--container-background-fallback:#1c1d20;--shadow-color-light:#3c3c3c;--shadow-color-dark:#181818;--inset-shadow-color-light:rgba(60,60,60,.5);--inset-shadow-color-dark:rgba(24,24,24,.8);--primary-accent-color:#f5d62bff;--secondary-accent-color:#e6c929ff;--text-color:#F5F5F5;--secondary-text-color:#94a3b8;--border-color-subtle:#4a5568;--error-color:#f56565;--success-color:#48bb78;--info-color:#4299e1;--step-off-color:var(--element-bg-color);--step-active-color:#FFFFFF;--step-current-border:var(--primary-accent-color);--velocity-pattern-overlay-med:rgba(0,0,0,.15);--velocity-pattern-overlay-low:rgba(0,0,0,.3);--rating-star-color:#f5d62bff;--rating-star-inactive-color:#5a5a5a;--track-highlight:var(--primary-accent-color);--font-family:'Abel','Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;--border-radius-standard:10px;--spacing-unit:8px;--step-probability-opacity:1.0;--neumorphism-shadow-outset:5px 5px 10px var(--shadow-color-dark),-5px -5px 10px var(--shadow-color-light);--neumorphism-shadow-inset:inset 5px 5px 10px var(--inset-shadow-color-dark),inset -5px -5px 10px var(--inset-shadow-color-light);--track0-color:#f5d62b;--track1-color:#f5da47;--track2-color:#f5de64;--track3-color:#f5e382;--track4-color:#f5e79d;}body{background-color:var(--background-color);color:var(--text-color);font-family:var(--font-family);margin:0;padding:calc(var(--spacing-unit) * 3);display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;min-height:100vh;box-sizing:border-box;}body.performance-mode-active{background-color:#333333!important;background-image:none!important}button{font-family:var(--font-family);}.sequencer-controls a.manual-button-styled{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-unit) calc(var(--spacing-unit) * 2);border-radius:var(--border-radius-standard);cursor:pointer;font-weight:600;font-size:.95em;text-decoration:none;line-height:1.2;background-color:var(--element-bg-color);color:var(--secondary-text-color);box-shadow:var(--neumorphism-shadow-outset);transition:all .2s ease;border:none;}.sequencer-controls a.manual-button-styled:hover{color:var(--text-color);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);}.sequencer-controls a.manual-button-styled:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98);color:var(--primary-accent-color);}#background-pattern{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background-color:var(--background-color);overflow:hidden;filter:grayscale(100%);-webkit-filter:grayscale(100%)}h1{color:var(--primary-accent-color);text-shadow:none;margin-bottom:calc(var(--spacing-unit) * 4);font-weight:600;position:relative;z-index:2;}.slogan{margin-right:1em;}.fantasy-name-title{font-size:1.5em;width:30%;}.sequencer-controls img{height:10em;margin-right:1em;}.sequencer-controls h1{display:none}.sequencer-controls p{display:block;margin:0;}.sequencer-controls{background-color:var(--element-bg-color);padding:calc(var(--spacing-unit) * 2.5);margin-bottom:calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius-standard);border:none;box-shadow:var(--neumorphism-shadow-outset);display:flex;gap:calc(var(--spacing-unit) * 2);align-items:center;flex-wrap:wrap;width:95%;max-width:1300px;box-sizing:border-box;position:relative;z-index:2;transition:box-shadow .2s ease}.sequencer-controls h2{margin:0;font-size:1.2em;font-weight:500;color:var(--text-color)}.sequencer-controls label{color:var(--secondary-text-color);font-size:.9em}.sequencer-controls input[type="number"]{width:60px;background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 4px);padding:var(--spacing-unit);text-align:center;box-shadow:var(--neumorphism-shadow-inset)}.sequencer-controls input[type="range"]{cursor:pointer;vertical-align:middle;accent-color:var(--primary-accent-color);min-width:100px}.sequencer-controls button,.modal-content button{padding:var(--spacing-unit) calc(var(--spacing-unit) * 2);border-radius:var(--border-radius-standard);cursor:pointer;font-weight:600;font-size:.95em;transition:all .2s ease;border:none;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--spacing-unit) / 2);background-color:var(--element-bg-color);color:var(--secondary-text-color);box-shadow:var(--neumorphism-shadow-outset);text-align:center;}.sequencer-controls button:hover,.modal-content button:hover:not(.close-modal-button){color:var(--text-color);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);}.sequencer-controls button:active,.modal-content button:active:not(.close-modal-button){box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98);color:var(--primary-accent-color)}.sequencer-controls button#play-pause-button{color:var(--success-color)}.sequencer-controls button#randomize-all-button{color:var(--secondary-accent-color)}#save-preset-server-button,#reset-to-init-button,.sequencer-controls button#open-preset-manager-button{color:var(--info-color)}.sequencer-controls button i{font-size:1.1em;line-height:1}#sequencer-container{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 2);width:95%;max-width:1300px;position:relative;z-index:2;padding-bottom:1em}.track{background-color:var(--element-bg-color);border:none;border-radius:var(--border-radius-standard);padding:calc(var(--spacing-unit) * 2);display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1.5);box-shadow:var(--neumorphism-shadow-outset);transition:box-shadow .3s ease,border-left-color .3s ease;}#track-0{border-left:4px solid var(--track0-color);--track-highlight:var(--track0-color)}#track-1{border-left:4px solid var(--track1-color);--track-highlight:var(--track1-color)}#track-2{border-left:4px solid var(--track2-color);--track-highlight:var(--track2-color)}#track-3{border-left:4px solid var(--track3-color);--track-highlight:var(--track3-color)}#track-4{border-left:4px solid var(--track4-color);--track-highlight:var(--track4-color)}.track-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:calc(var(--spacing-unit) * 1.5);border-bottom:1px solid var(--border-color-subtle);padding-bottom:calc(var(--spacing-unit) * 1.5)}.track-name{font-weight:600;font-size:1.2em;color:var(--track-highlight);min-width:100px}.track-controls{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 1.5);flex-wrap:wrap}.track-controls label{font-size:.85em;color:var(--secondary-text-color);display:flex;align-items:center;gap:calc(var(--spacing-unit) / 2)}.track-controls input[type="range"]{width:80px;cursor:pointer;vertical-align:middle;accent-color:var(--track-highlight);transition:accent-color .3s ease}.track-controls input[type="number"]{width:50px;background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 4px);padding:calc(var(--spacing-unit) / 2);font-size:.9em;box-shadow:var(--neumorphism-shadow-inset)}.track-controls select{background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 2px);padding:calc(var(--spacing-unit) / 2) var(--spacing-unit);font-size:.85em;box-shadow:var(--neumorphism-shadow-inset);-webkit-appearance:none;appearance:none}.track-controls button{background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;padding:calc(var(--spacing-unit) / 2) var(--spacing-unit);border-radius:calc(var(--border-radius-standard) - 2px);cursor:pointer;font-size:.85em;transition:all .2s ease;box-shadow:var(--neumorphism-shadow-outset)}.track-controls button:hover{color:var(--track-highlight);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light)}.track-controls button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}.track-controls span[class$="-display"],.step-submenu span[class$="-display"]{display:inline-block;min-width:40px;padding:calc(var(--spacing-unit) / 3) calc(var(--spacing-unit) / 2);background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;border-radius:calc(var(--border-radius-standard) - 4px);font-size:.8em;text-align:center;font-family:monospace;box-shadow:var(--neumorphism-shadow-inset)}.track-actions{display:flex;gap:var(--spacing-unit);padding:var(--spacing-unit) 0;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}.button-groups-container{display:flex;flex-direction:column;gap:var(--spacing-unit)}.button-group{display:flex;align-items:center;gap:var(--spacing-unit);flex-wrap:wrap}.button-group-label{color:var(--secondary-text-color);font-size:.85em;opacity:.9;width:6em;text-align:right;flex-shrink:0}.buttons-row{display:flex;gap:calc(var(--spacing-unit) * 1);flex-wrap:wrap;align-items:center}.random-buttons button,.reset-buttons button{background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;padding:calc(var(--spacing-unit) / 2) var(--spacing-unit);border-radius:calc(var(--border-radius-standard) - 2px);cursor:pointer;font-size:1em;white-space:nowrap;transition:all .2s ease;box-shadow:var(--neumorphism-shadow-outset)}.random-buttons button:hover,.reset-buttons button:hover{color:var(--track-highlight);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light)}.random-buttons button:active,.reset-buttons button:active{transform:scale(.95);box-shadow:var(--neumorphism-shadow-inset)}.random-all-button,.reset-all-button{color:var(--track-highlight)!important;font-weight:bold;min-width:4em;text-align:center}.clear-track-button{background-color:var(--element-bg-color);color:var(--error-color);border:none;padding:calc(var(--spacing-unit) * .8) calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius-standard);cursor:pointer;font-size:.9em;display:flex;align-items:center;gap:var(--spacing-unit);transition:all .2s ease;margin-left:auto;box-shadow:var(--neumorphism-shadow-outset)}.clear-track-button:hover{box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);transform:scale(1.03)}.clear-track-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}.trash-icon{font-size:1.2em}.steps-container{display:grid;gap:6px;width:100%;padding:var(--spacing-unit) 0;box-sizing:border-box}.step{position:relative;background-color:var(--element-bg-color);border:none;border-radius:calc(var(--border-radius-standard) - 2px);height:50px;cursor:pointer;display:flex;overflow:hidden;opacity:var(--step-probability-opacity,1.0);box-shadow:var(--neumorphism-shadow-outset);transition:background .1s ease,box-shadow .2s ease,opacity .2s ease;background-size:auto;background-repeat:repeat;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.step.active{background:var(--track-highlight,var(--primary-accent-color));opacity:var(--step-probability-opacity,1.0);box-shadow:var(--neumorphism-shadow-inset)}.step.active.velocity-med{background:repeating-linear-gradient(45deg,transparent,transparent .4em,var(--velocity-pattern-overlay-med) .41em,var(--velocity-pattern-overlay-med) .8em),var(--track-highlight,var(--primary-accent-color));opacity:var(--step-probability-opacity,1.0);box-shadow:var(--neumorphism-shadow-inset)}.step.active.velocity-low{background:repeating-linear-gradient(45deg,transparent,transparent .3em,var(--velocity-pattern-overlay-low) .31em,var(--velocity-pattern-overlay-low) .7em),var(--track-highlight,var(--primary-accent-color));opacity:var(--step-probability-opacity,1.0);box-shadow:var(--neumorphism-shadow-inset)}.step:not(.active) .step-left-bar>div,.step:not(.active) .step-divider-indicator,.step:not(.active) .step-sample-box,.step:not(.active) .step-decay-bar,.step:not(.active) .step-decay-text{visibility:hidden;opacity:0;transition:visibility 0s linear .1s,opacity .1s ease}.step.active .step-left-bar>div,.step.active .step-divider-indicator,.step.active .step-sample-box,.step.active .step-decay-bar,.step.active .step-decay-text{visibility:visible;opacity:1;transition:opacity .1s ease}.step-left-bar{position:relative;width:6px;flex-shrink:0;background-color:rgba(0,0,0,.1);border-right:none;overflow:hidden;border-radius:3px 0 0 3px}.step-pitch-top{position:absolute;left:0;width:100%;height:0;bottom:50%;background-color:var(--primary-accent-color)}.step-pitch-bottom{position:absolute;left:0;width:100%;height:0;top:50%;background-color:var(--secondary-accent-color)}.step-right-section{flex-grow:1;display:flex;flex-direction:column;position:relative}.step-main-content{flex-grow:1;position:relative;display:flex;justify-content:center;align-items:center;min-height:20px}.step-divider-indicator{font-size:1.8em;font-weight:bold;position:absolute;left:38%;top:33%;transform:translate(-50%,-50%);color:rgba(0,0,0,.4);text-shadow:none;pointer-events:none}.step-sample-box{position:absolute;top:2px;right:2px;min-width:18px;height:14px;background-color:rgba(0,0,0,.2);border:none;border-radius:2px;display:flex;justify-content:center;align-items:center}.step-sample-text{font-size:.7em;font-weight:bold;color:var(--text-color);opacity:.8}.step-decay-bar{position:absolute;bottom:3px;left:8px;height:3px;width:0;background-color:var(--background-color);border-radius:2px;transition:width .1s ease;opacity:.7}.step-decay-text{position:absolute;bottom:6px;left:9px;font-size:.6em;color:var(--background-color);opacity:.7;text-transform:uppercase;white-space:nowrap;pointer-events:none}.step.current{box-shadow:var(--neumorphism-shadow-inset),0 0 15px var(--step-current-border)!important;border:1px solid var(--step-current-border)!important;z-index:2;opacity:1.0!important}.step-hidden{opacity:.2!important;pointer-events:none;background-color:color-mix(in srgb,var(--step-off-color) 50%,var(--background-color))!important;border-color:transparent!important;box-shadow:none!important}.step-hidden .step-left-bar>div,.step-hidden .step-divider-indicator,.step-hidden .step-sample-box,.step-hidden .step-decay-text,.step-hidden .step-decay-bar{visibility:hidden}.step-hidden.current{opacity:.4!important;border:1px dashed var(--secondary-text-color)!important;background-color:var(--step-off-color)!important;box-shadow:var(--neumorphism-shadow-inset)!important}.step-submenu{background-color:var(--element-bg-color);border:none;padding:calc(var(--spacing-unit) * 2.5);border-radius:var(--border-radius-standard);box-shadow:var(--neumorphism-shadow-outset);z-index:100;min-width:320px;color:var(--text-color)}.step-submenu h4{margin-top:0;margin-bottom:calc(var(--spacing-unit) * 2);color:var(--primary-accent-color);text-align:center;font-weight:500}.step-submenu hr{border:none;height:2px;background-image:linear-gradient(to right,var(--inset-shadow-color-dark),var(--inset-shadow-color-light));margin:var(--spacing-unit) 0}.step-submenu label{display:inline-block;width:90px;font-size:.9em;color:var(--secondary-text-color);margin-bottom:var(--spacing-unit);vertical-align:middle}.step-submenu input[type="range"]{width:130px;vertical-align:middle;cursor:pointer;accent-color:var(--primary-accent-color)}.step-submenu select{background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 2px);padding:calc(var(--spacing-unit) / 2) var(--spacing-unit);margin-left:var(--spacing-unit);vertical-align:middle;box-shadow:var(--neumorphism-shadow-inset);-webkit-appearance:none;appearance:none}.step-submenu button.reset-pitch{background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;border-radius:50%;padding:2px 6px;margin-left:var(--spacing-unit);font-size:.8em;line-height:1;cursor:pointer;vertical-align:middle;box-shadow:var(--neumorphism-shadow-outset)}.step-submenu button.reset-pitch:hover{box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);color:var(--text-color)}.step-submenu button.reset-pitch:active{box-shadow:var(--neumorphism-shadow-inset)}.waveform-canvas{border:none;background-color:var(--background-color);border-radius:calc(var(--border-radius-standard) - 4px);display:block;margin-bottom:var(--spacing-unit);box-shadow:var(--neumorphism-shadow-inset)}.waveform-labels{font-size:.75em;color:var(--secondary-text-color);opacity:.8;display:flex;justify-content:space-between}.submenu-actions{margin-top:calc(var(--spacing-unit) * 2);text-align:right}.submenu-actions button{background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:var(--border-radius-standard);padding:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);margin-left:var(--spacing-unit);cursor:pointer;transition:all .2s ease;font-weight:500;box-shadow:var(--neumorphism-shadow-outset)}.submenu-actions button:hover{box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light)}.submenu-actions button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}.submenu-actions button.close-submenu{background-color:var(--primary-accent-color);color:var(--background-color);font-weight:600}.submenu-actions button.close-submenu:hover{background-color:color-mix(in srgb,var(--primary-accent-color) 90%,#fff)}.modal{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(42,42,42,.8);z-index:1000;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;padding:var(--spacing-unit);box-sizing:border-box}.modal:not(.hidden){opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s}.modal.hidden{display:none}.modal-content{background-color:var(--element-bg-color);padding:calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 5);border-radius:var(--border-radius-standard);border:none;box-shadow:var(--neumorphism-shadow-outset);max-width:600px;width:90%;position:relative;transform:scale(.95);transition:transform .3s ease,box-shadow .3s ease;max-height:90vh;display:flex;flex-direction:column}.modal:not(.hidden) .modal-content{transform:scale(1.0)}.modal-content h2{color:var(--primary-accent-color);margin-top:0;margin-bottom:calc(var(--spacing-unit) * 3);text-align:center;font-weight:600;flex-shrink:0}.modal-body{color:var(--text-color);line-height:1.6;overflow-y:auto;padding-right:var(--spacing-unit);flex-grow:1}.modal-body ol,.modal-body ul{margin:var(--spacing-unit) 0;padding-left:calc(var(--spacing-unit) * 3)}.modal-body li{margin:var(--spacing-unit) 0}#start-sequencer{display:flex;margin-bottom:1em;}.preset-label{font-size:.6em}.preset-author,.preset-rating{font-size:.8em}.primary-button{background-color:var(--primary-accent-color);color:var(--background-color);border:none;padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);border-radius:var(--border-radius-standard);font-size:1.1em;font-weight:600;cursor:pointer;display:block;margin:calc(var(--spacing-unit) * 3) auto 0;transition:all .2s ease;box-shadow:var(--neumorphism-shadow-outset);flex-shrink:0}.primary-button:hover{color:var(--element-bg-color)!important;background-color:color-mix(in srgb,var(--primary-accent-color) 90%,#fff);transform:translateY(-2px);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);}.primary-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}.secondary-button{background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;padding:calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2.5);border-radius:var(--border-radius-standard);font-size:1.0;font-weight:500;cursor:pointer;display:block;margin:calc(var(--spacing-unit) * 2) auto 0;transition:all .2s ease;box-shadow:var(--neumorphism-shadow-outset);width:fit-content;flex-shrink:0;}.secondary-button:hover{color:var(--text-color);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);}.secondary-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98);}.close-modal-button{position:absolute;top:calc(var(--spacing-unit) * 1.5);right:calc(var(--spacing-unit) * 2);background:none;border:none;font-size:2em;color:var(--secondary-text-color);cursor:pointer;opacity:.7;transition:opacity .2s ease,transform .2s ease;line-height:1;padding:0;box-shadow:none}.close-modal-button:hover{opacity:1;transform:scale(1.1);color:var(--text-color);box-shadow:none}.close-modal-button:active{transform:scale(1.0);box-shadow:none}#notification-modal{position:fixed;left:50%;top:calc(var(--spacing-unit) * 4);transform:translateX(-50%);min-width:300px;max-width:90%;background-color:var(--element-bg-color);color:var(--text-color);padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);border-radius:var(--border-radius-standard);border:none;box-shadow:var(--neumorphism-shadow-outset);text-align:center;z-index:1050;opacity:0;visibility:hidden;transform:translate(-50%,-20px);transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-unit)}#notification-modal.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .4s ease,visibility 0s linear 0s,transform .4s ease}#notification-modal .icon{font-size:1.3em}#notification-modal span:first-child[class="icon"]{color:var(--info-color)}#notification-modal.success .icon{color:var(--success-color)}#notification-modal.error .icon{color:var(--error-color)}#notification-modal:not(.show){display:none}.share-modal-content{text-align:left}.share-link-container{display:flex;margin:calc(var(--spacing-unit) * 2.5) 0}.share-url-input{flex-grow:1;padding:var(--spacing-unit);background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:var(--border-radius-standard) 0 0 var(--border-radius-standard);font-size:.95em;overflow-x:hidden;box-shadow:var(--neumorphism-shadow-inset)}.copy-link-button{padding:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);background-color:var(--primary-accent-color);color:var(--background-color);border:none;border-radius:0 var(--border-radius-standard) var(--border-radius-standard) 0;cursor:pointer;font-size:1em;transition:all .2s ease;display:flex;align-items:center;gap:calc(var(--spacing-unit) / 2);box-shadow:var(--neumorphism-shadow-outset)}.copy-link-button i{font-size:1.2em}.copy-link-button:hover{background-color:color-mix(in srgb,var(--primary-accent-color) 90%,#fff);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light)}.copy-link-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}#copy-status{font-size:.8em;color:var(--success-color);margin-left:var(--spacing-unit);font-weight:bold}.share-info{font-size:.85em;color:var(--secondary-text-color);margin-bottom:calc(var(--spacing-unit) * 2.5)}.social-share-buttons{display:flex;justify-content:center;gap:calc(var(--spacing-unit) * 1.2);flex-wrap:wrap;margin-bottom:var(--spacing-unit) * 2}.social-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-unit);padding:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius-standard);color:white!important;text-decoration:none;font-weight:500;font-size:.9em;text-align:center;min-width:110px;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;border:none;box-shadow:var(--neumorphism-shadow-outset)}.social-button i{font-size:1.1em;line-height:1}.social-button:hover{transform:translateY(-2px);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);filter:brightness(1.1)}.social-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98);filter:brightness(.95)}.social-button.twitter{background-color:#000000}.social-button.facebook{background-color:#1877F2}.social-button.whatsapp{background-color:#25D366}.social-button.telegram{background-color:#0088cc}.social-button.email{background-color:#7f8c8d}.social-button.reddit{background-color:#FF4500}.social-button.linkedin{background-color:#0A66C2}.social-button.discord{background-color:#5865F2}.social-button.instagram{background:#d6249f;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}.social-button.youtube{background-color:#FF0000}.social-button.pinterest{background-color:#E60023}.screenshot-info{font-size:.8em;text-align:center;color:var(--secondary-text-color);margin-top:var(--spacing-unit) * 2}#preset-manager-modal .modal-content{max-width:750px;width:95%;}.preset-manager-content{display:flex;flex-direction:column;height:100%}.preset-manager-toolbar{display:flex;gap:var(--spacing-unit);margin-bottom:calc(var(--spacing-unit) * 2);padding-bottom:var(--spacing-unit);border-bottom:1px solid var(--border-color-subtle);align-items:center;flex-wrap:wrap;flex-shrink:0}.preset-manager-toolbar label{color:var(--secondary-text-color);font-size:.9em;margin-right:calc(var(--spacing-unit) / 2);}.preset-manager-toolbar select,.preset-manager-toolbar input[type="text"]{padding:calc(var(--spacing-unit) * .75) var(--spacing-unit);background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 4px);font-size:.9em;box-shadow:var(--neumorphism-shadow-inset);flex-grow:1;min-width:150px}.preset-manager-toolbar select{flex-grow:0;min-width:120px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.414l-4.707-4.707a1 1 0 011.414-1.414L8 8.586l3.293-3.293a1 1 0 111.414 1.414L8 11.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-unit) center;background-size:1em;padding-right:calc(var(--spacing-unit) * 3)}.preset-manager-toolbar input[type="text"]{max-width:300px}#preset-manager-list-container{flex-grow:1;overflow-y:auto;margin-top:0;border:none;padding:0;background-color:transparent;scrollbar-width:thin;scrollbar-color:var(--secondary-text-color) var(--background-color);}#preset-manager-list-container::-webkit-scrollbar{width:8px}#preset-manager-list-container::-webkit-scrollbar-track{background:var(--background-color);border-radius:4px}#preset-manager-list-container::-webkit-scrollbar-thumb{background-color:var(--secondary-text-color);border-radius:4px;border:2px solid var(--background-color)}#preset-manager-list{list-style:none;padding:0;margin:0;}#preset-manager-list li{padding:calc(var(--spacing-unit) * 1.2) var(--spacing-unit);border-bottom:1px solid var(--border-color-subtle);cursor:pointer;transition:background-color .2s ease;color:var(--text-color);font-size:.95em;display:flex;align-items:center;gap:calc(var(--spacing-unit) * 1.5);flex-wrap:nowrap}#preset-manager-list li:last-child{border-bottom:none;}#preset-manager-list li:hover{background-color:var(--border-color-subtle)}.preset-rating-container{display:flex;gap:2px;flex-shrink:0;align-items:center;margin-right:var(--spacing-unit)}.rating-star{font-size:1.2em;cursor:pointer;color:var(--rating-star-inactive-color);transition:color .1s ease,transform .1s ease;line-height:1;}.rating-star:hover{transform:scale(1.2);color:var(--rating-star-color)}.rating-star.filled{color:var(--rating-star-color);}.preset-name-author{display:flex;flex-direction:column;flex-grow:1;min-width:0;text-align:left;gap:2px;}.preset-entry-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.preset-entry-author{color:var(--secondary-text-color);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.preset-info-container{display:flex;gap:var(--spacing-unit);flex-shrink:0;align-items:center;text-align:right;margin-left:auto}.preset-entry-info{color:var(--secondary-text-color);font-size:.8em;white-space:nowrap;opacity:.8;}.preset-entry-info.rating-count{}.preset-entry-info.load-count{}#preset-manager-list li.loading,#preset-manager-list-container p{color:var(--secondary-text-color);font-style:italic;text-align:center;padding:calc(var(--spacing-unit) * 2);border-bottom:none;cursor:default;}#preset-manager-list li.loading:hover,#preset-manager-list-container p:hover{background-color:transparent}.error-message{color:var(--error-color);margin:var(--spacing-unit);padding:var(--spacing-unit);border:1px solid var(--error-color);border-radius:var(--border-radius-standard);background-color:color-mix(in srgb,var(--error-color) 10%,transparent);text-align:center;font-size:.9em;flex-shrink:0}#save-server-preset-modal .modal-content{max-width:450px}#save-server-preset-modal .form-group{margin-bottom:calc(var(--spacing-unit) * 2);}#save-server-preset-modal label{display:block;margin-bottom:calc(var(--spacing-unit) / 2);color:var(--secondary-text-color);font-size:.9em;font-weight:500;}#save-server-preset-modal input[type="text"]{width:100%;padding:var(--spacing-unit);background-color:var(--element-bg-color);color:var(--text-color);border:none;border-radius:calc(var(--border-radius-standard) - 2px);box-sizing:border-box;font-size:1em;box-shadow:var(--neumorphism-shadow-inset)}#save-server-preset-modal input[type="text"]:focus{outline:none;box-shadow:var(--neumorphism-shadow-inset),0 0 0 2px color-mix(in srgb,var(--primary-accent-color) 30%,transparent);}#save-server-preset-modal small{display:block;margin-top:calc(var(--spacing-unit) / 2);font-size:.8em;color:var(--secondary-text-color);opacity:.8;}#save-server-preset-modal .primary-button{margin-top:calc(var(--spacing-unit) * 2);width:100%}.manual h1{font-size:2.5em;}.manual h2{font-size:2em;}.manual p,.manual li{font-size:1.2em;line-height:1.6;}.site-footer{background-color:var(--background-color);color:var(--secondary-text-color);padding:calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);text-align:center;margin-top:calc(var(--spacing-unit) * 4);width:100%;box-sizing:border-box;border-top:1px solid var(--shadow-color-dark);position:relative;z-index:2}.footer-links{margin-bottom:calc(var(--spacing-unit) * 2);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-unit)}.footer-button{padding:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius-standard);text-decoration:none;color:var(--secondary-text-color);background-color:var(--element-bg-color);box-shadow:var(--neumorphism-shadow-outset);transition:all .2s ease;font-size:.9em;}.footer-button:hover{color:var(--text-color);background-color:var(--element-bg-color);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);transform:translateY(-1px);}.footer-button:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98);}.footer-copyright{font-size:.85em;margin-top:var(--spacing-unit);}.home-link{display:inline-flex;align-items:center;gap:calc(var(--spacing-unit) / 1.5);margin-bottom:calc(var(--spacing-unit) * 3);padding:var(--spacing-unit) calc(var(--spacing-unit) * 2);background-color:var(--element-bg-color);color:var(--primary-accent-color);text-decoration:none;border-radius:var(--border-radius-standard);box-shadow:var(--neumorphism-shadow-outset);transition:all .2s ease;font-weight:600;font-size:1em}.home-link i{font-size:1em;color:inherit}.home-link:hover{box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);transform:translateY(-2px);color:var(--text-color);background-color:color-mix(in srgb,var(--element-bg-color) 95%,var(--shadow-color-light))}.home-link:active{box-shadow:var(--neumorphism-shadow-inset);transform:scale(.98)}body>div.container{width:90%;max-width:950px;margin:calc(var(--spacing-unit) * 2) auto;padding:calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3.5);background-color:var(--element-bg-color);box-shadow:var(--neumorphism-shadow-outset);border-radius:var(--border-radius-standard);line-height:1.7;}div.container h1{color:var(--primary-accent-color);text-align:center;margin-bottom:calc(var(--spacing-unit) * 3);}div.container h2{color:var(--text-color);border-bottom:1px solid var(--border-color-subtle);padding-bottom:var(--spacing-unit);margin-top:calc(var(--spacing-unit) * 3);margin-bottom:calc(var(--spacing-unit) * 2);}.track-header .track-controls .mute-track-button{background-color:var(--element-bg-color);color:var(--secondary-text-color);border:none;padding:calc(var(--spacing-unit) / 1.5) calc(var(--spacing-unit));border-radius:var(--border-radius-standard);cursor:pointer;font-size:1em;transition:all .2s ease;box-shadow:var(--neumorphism-shadow-outset);margin-right:calc(var(--spacing-unit));line-height:1}.track-header .track-controls .mute-track-button:hover{color:var(--text-color);box-shadow:7px 7px 14px var(--shadow-color-dark),-7px -7px 14px var(--shadow-color-light);}.track-header .track-controls .mute-track-button:active,.track-header .track-controls .mute-track-button.muted{box-shadow:var(--neumorphism-shadow-inset);color:var(--error-color);transform:scale(.98);}.track-header .track-controls .mute-track-button.muted i::before{content:"\f6a9"}#clear-all-patterns-button{}#reset-to-init-button,.sequencer-controls button#open-preset-manager-button{@media (max-width:768px){.footer-links{flex-direction:column;align-items:center}.footer-button{width:80%;max-width:250px;margin-bottom:var(--spacing-unit)}}@media (max-width:768px){body{padding:var(--spacing-unit)}h1{font-size:1.8em;margin-bottom:calc(var(--spacing-unit) * 2)}.sequencer-controls{gap:var(--spacing-unit);padding:var(--spacing-unit) * 1.5}#sequencer-container{gap:var(--spacing-unit)}.track{padding:var(--spacing-unit)}.track-header,.track-controls{gap:var(--spacing-unit)}.steps-container{gap:4px}.step{height:45px}.modal-content{padding:calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2);max-height:95vh}#preset-manager-modal .modal-content{max-width:95%}.preset-manager-toolbar{gap:calc(var(--spacing-unit) * .75)}.preset-manager-toolbar select,.preset-manager-toolbar input[type="text"]{min-width:100px}#preset-manager-list li{flex-wrap:wrap;gap:var(--spacing-unit);padding:var(--spacing-unit)}.preset-rating-container{order:1;width:100%;justify-content:center;margin-bottom:calc(var(--spacing-unit)/2);margin-right:0}.preset-name-author{order:2;width:100%;text-align:center}.preset-info-container{order:3;width:100%;justify-content:center;margin-left:0;gap:var(--spacing-unit) * 2}.step-submenu{min-width:280px;width:90%;left:5%!important}.step-submenu input[type="range"]{width:calc(100% - 130px)}}@media (max-width:480px){body{padding:calc(var(--spacing-unit) / 2)}.sequencer-controls{flex-direction:column;align-items:stretch}.sequencer-controls img{height:6em;margin:0 auto var(--spacing-unit)}.slogan{margin:0 0 var(--spacing-unit);text-align:center}.fantasy-name-title{width:100%;text-align:center;font-size:1.2em;margin-bottom:var(--spacing-unit)}.steps-container{gap:3px}.step{height:40px;border-radius:calc(var(--border-radius-standard) - 4px)}.track-actions{flex-direction:column;align-items:stretch}.button-groups-container{width:100%}.button-group{justify-content:center}.clear-track-button{margin-left:0;width:100%;justify-content:center}.preset-manager-toolbar{justify-content:center}.preset-manager-toolbar select,.preset-manager-toolbar input[type="text"]{width:100%;max-width:none}}