@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";.opacityWrapper{animation-name:opacitychange;animation-duration:3s;-webkit-animation-name:opacitychange;-webkit-animation-duration:3s;-webkit-animation-timing-duration:linear}@keyframes opacitychange{0%{filter:opacity(0%)}to{filter:opacity(100%)}}#bodyWrapper{display:none}html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{letter-spacing:.5px;color:#fff;background:#000;height:100%;width:100%;overflow-x:hidden!important}canvas{width:100vw;min-height:100vh}body::-webkit-scrollbar{width:13px;background-color:gray}h1{font-size:26px;text-align:center;margin-bottom:40px}#content{color:#fff;padding:55px 0 100px;min-height:100%}.carousel-container{padding-bottom:20px}.header_film{color:#fff;font-size:24px;font-weight:300;text-align:left;margin:10px 0 0 35px}.header_film a{color:#fff}.header_film a:hover{color:#cba903;text-decoration:none;font-size:24px;text-align:center;margin:20px 0 30px}.header_film a i{position:relative;top:2px}.header_film a:hover i{margin-left:10px;transition:all .5s}.header_page{color:#fff;font-size:24px;font-weight:500;text-align:center;margin-bottom:30px}.subscription p{color:gray;font-size:14px;padding:0;margin:0}.subscription div{background:green;height:3px;margin-top:5px}.fa-star{color:orange}.profile{color:#fff;padding:20px 0}.changeAva{margin:40px auto 0;max-width:500px}.changeAva img{width:200px;height:200px}.account{margin-left:20px;display:flex;flex-direction:column;justify-content:center}.avatar,.account img{height:45px;width:45px}.account .dropdown-menu{width:200px!important;min-height:335px!important;padding:5px;left:-55px!important}.account ul{padding:0}.account a{font-size:14px}#content h1{margin-top:10px}#content span{color:#9a9a9a;font-weight:700}#content span .lds-css{height:300px}.subscribe{color:#fff}.rate{background:#000;padding:20px;border:1px solid white;border-radius:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:200px}.rate:hover{background:#fff;color:#000}.rate:hover .rate-btn{background:#ffca28;color:#000}.rate:hover .rate-ratio{color:gray}.rate-month{font-size:24px;margin-bottom:15px;font-weight:400}.rate-days{font-size:14px;line-height:1;color:#717171;margin-bottom:28px}.rate-info{color:#fff;background-color:#24b2d8;margin-bottom:14px;padding:5px;border-radius:5px;font-size:14px}.rate-price{font-size:48px;font-weight:500;margin-bottom:30px}.rate-ratio{font-size:16px;line-height:1;color:#fff;margin-bottom:28px}.rate-btn{font-size:18px;font-weight:400;line-height:1;padding:14px 22px 13px;color:#fff;border:1px solid gray}.rate-btn:hover{color:#171717;background-color:#daa500!important}button:active,button:focus{outline:none!important}.btn-outline-secondary{border-color:#fff}.btn-outline-secondary:hover{background:#fff;color:#000;border-color:#fff}.films-link{border:1px solid #333;padding:5px;width:50px;background-color:#ffffff26;float:right;position:relative;right:120px;top:-33px;clear:both;border-radius:5px;color:#fff;font-size:16px;text-align:center}.films-link:hover{color:#fff;background:#848586;text-decoration:none}footer{color:#fff;padding:25px 0 15px;background:#000000f2}.footer-block{display:flex;flex-direction:column;justify-content:center;align-items:center}.footer-text{color:#fff;font-size:14px;text-align:center;margin-bottom:10px}.genre{position:relative;width:100%;margin:15px 0}.genre img{display:block;margin:0 auto;width:100%;height:100px;border-radius:5px}.genre .genre-after{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;display:block;background:#00000080}.genre .genre-after a{display:block;height:200px;color:#fff;font-size:20px;text-align:center;line-height:100px}.genre .genre-after a:hover{text-decoration:none}.form-check-input{margin-top:6px}.registration h3{text-align:center;font-size:24px;margin:10px 0 20px}.registration a{color:#fff}.text-ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.slick-slide{padding:0 10px}.slick-track{position:relative;top:0;left:0;display:block;margin-left:0!important;margin-right:0!important}.slick-dots{display:none!important}.carousel .slick-arrow{border:none;padding:0 7px;width:40px;height:300px;background-color:#00000080;position:absolute;z-index:999}.carousel .slick-arrow:hover{opacity:.8!important}.carousel .slick-list{padding-top:20px;clear:both;height:380px;position:relative}.carousel .slick-arrow.slick-prev{opacity:.6;clear:both;top:34px!important;left:0!important;display:inline-block!important;color:#fff;border-radius:0 7px 7px 0}.carousel .slick-arrow.slick-next{opacity:.6;clear:both;right:0!important;top:34px!important;display:inline-block!important;color:#fff;border-radius:7px 0 0 7px}.private h3{text-align:center;font-size:20px}.react-tabs__tab-list{list-style-type:none;display:block;width:500px;margin:0 auto;position:relative;top:12px;color:#888}.react-tabs__tab-list li{display:inline-block;padding-bottom:5px;margin-left:15px}.react-tabs__tab-list li:hover{cursor:pointer;color:#c7c7c7}.react-tabs__tab--selected{border-bottom:1px solid red;cursor:pointer;color:#fff}#seasons .react-tabs__tab-list{list-style-type:none!important;float:left;width:500px;position:relative;top:0;padding-left:0!important;clear:both}#seasons .react-tabs__tab-list li{display:inline-block;padding-bottom:10px;margin-left:15px}#seasons .react-tabs__tab-list li:hover,#seasons .react-tabs__tab--selected{border-bottom:1px solid yellow!important;cursor:pointer}.carousel-screen button{display:none!important;visibility:hidden}.container{position:relative;overflow:hidden}.videoContainer{position:absolute;inset:0;width:100%;height:100%;z-index:0}.overlay{position:absolute;inset:0;z-index:5}.videoIframe{position:relative;inset:0;width:100%;height:100%;z-index:0}@media (min-width: 993px){.genre{display:none}.dropdown-menu{padding-top:35px;width:700px;height:140px}.responsive_link,.mobile-link{display:none}.personal-header{font-size:20px;margin-top:15px}}@media (max-width: 992px){.genre-sliders{display:none}h1{margin-bottom:0;font-size:22px}#wrapper,#content{padding:0 0 15px}.rate{background:#fff;color:#000}.rate .rate-btn{background:#ffca28;color:#000}.rate .rate-ratio{color:gray}.player{padding:0;height:600px}.pc-link{display:none}.rate{margin:30px auto 0}}@media (max-width: 530px){.carousel-header{font-size:22px}.carousel-screen .slick-arrow.slick-next{bottom:277px}.slick-arrow.slick-prev{right:50px;top:40%}.slick-arrow.slick-next{right:11px;bottom:422px;top:40%}.recFilms .slick-arrow.slick-next{bottom:357px}.recFilms .slick-list{height:300px}.films-link{display:none}.header_film a:hover i{margin-left:0}.smallfilm-name,.bigfilm-name{font-size:12px}}@media (max-width: 486px){.header_film{font-size:18px;display:block;margin-left:10px}.header_film a:hover{font-size:18px}.films-link{display:none}}.personal{background:#00000080}.personal-list{margin-top:30px}.personal-list li{border-top:1px solid gray;padding:10px 0}.personal-list li:last-child{border-bottom:1px solid gray}.personal-list li a{color:#f5f5f5;padding:10px 0;display:block;font-size:16px;font-weight:300}.personal-list li a:hover{text-decoration:none}.personal img{height:40px;width:40px;float:left;position:relative;top:10px}.personal .username{position:relative;top:20px;left:30px;font-size:20px;color:#fff}.personal .useremail{clear:both;position:relative;top:20px;font-size:20px;color:#fff}@font-face{font-family:Proba Pro Regular;src:url(/assets/ProbaPro-Regular-DU1OqWBK.eot);src:url(/assets/ProbaPro-Regular-DU1OqWBK.eot?#iefix) format("embedded-opentype"),url(/assets/ProbaPro-Regular-Dy7jbxMS.woff) format("woff"),url(/assets/ProbaPro-Regular-DU4ZC26A.ttf) format("truetype");font-weight:400;font-style:normal}body,html{margin:0;padding:0;height:100%;width:100%}body canvas{min-height:100vh!important}.artist_name{display:flex;justify-content:center;font-family:Proba Pro Regular;text-shadow:0 0 1em blue,0 0 .2em blue;letter-spacing:1.1em;color:#fff;position:absolute;width:100%;height:115px;top:0;text-align:center;z-index:1;font-style:normal;font-weight:200;font-size:40px;line-height:120px;align-items:center}@media (max-width: 770px){.artist_name{top:25px}}@media (max-width: 500px){.artist_name{top:25px;font-size:30px}}.link{display:flex;justify-content:center;color:#fff;text-decoration:none;margin-left:30px}.link:hover{color:#00f}.buttonBack{position:absolute;top:15vh;left:5vw;z-index:10;font-size:30px;cursor:pointer}.site_link{font-family:Proba Pro Regular;letter-spacing:1.1em;color:#fff;position:absolute;width:100%;top:60px;text-align:center;z-index:1;font-weight:200;font-size:30px;line-height:120px}@media (max-width: 770px){.site_link{top:100px}}@media (max-width: 500px){.site_link{top:100px;font-size:20px}}body::-webkit-scrollbar{width:0px;background-color:gray;opacity:0}body::-webkit-scrollbar-thumb{background:#000;-webkit-border-radius:0;border-radius:0}.App{text-align:center}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}#background-video{height:100%;width:100%;float:left;top:0;padding:none;position:fixed;z-index:0}.player-wrapper{position:relative;padding-top:56.25%}.react-player{position:absolute;top:0;left:0}.container{top:50%!important;-ms-transform:translateY(-50%);transform:translateY(-50%)}.main-container{width:100vw;min-height:100vh;position:relative;overflow-x:hidden}.soundcloud-container{width:100vw;top:30vh;margin:auto;position:absolute;display:flex;justify-content:center;justify-items:center}@media (max-width: 500px){.soundcloud-container{top:23vh}}.buttons_row{display:flex;flex-direction:row;justify-content:space-around;margin-top:6vh}.buttons_row button{background-color:Transparent;color:#fff;border:none;font-weight:700;cursor:pointer}.footer{position:absolute;bottom:25px;left:30px;margin:0 auto 15px;z-index:1;font-family:Proba Pro Regular;text-shadow:0 0 1em blue,0 0 .2em blue;font-weight:200;font-size:20px}.container{position:absolute;width:100%;height:70vh;margin-left:auto;margin-right:auto}.container img{height:70vh;margin-left:auto;margin-right:auto}.artwork_title{padding-left:6vw}.artwork_title h4{margin-bottom:0!important;margin-top:2px}h3{color:#fff;font-size:36px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center}.variable-width .slick-slide p{height:100px;color:#fff;margin:5px;line-height:100px;text-align:center}.center .slick-center h3{color:#e67e22;opacity:1;transform:scale(1.08)}.center h3{opacity:.8;transition:all .3s ease}.content{padding:20px;margin:auto;width:100%}.slick-slide .image{padding:10px}.slick-slide img{display:block;margin:auto;box-shadow:#fff}.slick-slide img.slick-loading{border:0}.slick-slide{padding:0}.slick-slider{margin:30px auto 50px}@media (max-width: 500px){.slick-slider{margin:20px auto 50px}}.slick-dots{margin-left:0}.slick-thumb{bottom:-45px}.slick-thumb li{width:60px;height:45px}.slick-thumb li img{filter:grayscale(100%)}.slick-thumb li.slick-active img{filter:grayscale(0%)}@media (max-width: 768px){h3{font-size:24px}.center{margin-left:-40px;margin-right:-40px}.center .slick-center h3{color:#e67e22;opacity:1;transform:scale(1)}.center h3{opacity:.8;transform:scale(.95);transition:all .3s ease}.artwork_title{top:75vh}}.slick-vertical .slick-slide{height:180px}.slick-arrow{height:40px;-webkit-filter:drop-shadow(3px 3px 2px blue);filter:drop-shadow(3px 3px 2px blue)}.slick-prev{z-index:100;left:20px!important;top:40%}.slick-next{z-index:100;right:20px!important;top:40%}.base-audio{position:absolute;bottom:60px;left:80px;color:#fff;background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20viewBox='0%200%20500%20500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%20188.101%20125.914%20L%20121.5%20192.5%20L%2045.101%20192.5%20C%2035.175%20192.5%2027.135%20200.539%2027.135%20210.465%20L%2027.135%20318.26%20C%2027.135%20328.179%2035.175%20336.226%2045.101%20336.226%20L%20121.5%20336.226%20L%20188.101%20402.812%20C%20199.352%20414.063%20218.77%20406.158%20218.77%20390.109%20L%20218.77%20138.617%20C%20218.77%20122.553%20199.337%20114.678%20188.101%20125.914%20Z%20M%20362.759%2087.677%20C%20354.397%2082.19%20343.161%2084.503%20337.674%2092.879%20C%20332.179%20101.241%20334.515%20112.477%20342.877%20117.964%20C%20392.485%20150.52%20422.091%20205.248%20422.091%20264.37%20C%20422.091%20323.493%20392.485%20378.221%20342.877%20410.777%20C%20334.515%20416.256%20332.179%20427.5%20337.674%20435.854%20C%20342.944%20443.871%20354.09%20446.753%20362.759%20441.057%20C%20422.585%20401.786%20458.314%20335.725%20458.314%20264.363%20C%20458.314%20193.001%20422.585%20126.947%20362.759%2087.677%20Z%20M%20386.451%20264.363%20C%20386.451%20216.806%20362.452%20173.082%20322.246%20147.405%20C%20313.869%20142.061%20302.76%20144.546%20297.453%20152.99%20C%20292.146%20161.434%20294.623%20172.61%20303%20177.962%20C%20332.756%20196.969%20350.519%20229.262%20350.519%20264.363%20C%20350.519%20299.464%20332.756%20331.757%20303%20350.763%20C%20294.623%20356.108%20292.146%20367.284%20297.453%20375.736%20C%20302.326%20383.491%20313.263%20387.069%20322.246%20381.32%20C%20362.452%20355.644%20386.451%20311.927%20386.451%20264.363%20Z%20M%20280.326%20206.82%20C%20271.657%20202.081%20260.72%20205.203%20255.915%20213.894%20C%20251.131%20222.585%20254.298%20233.507%20262.989%20238.305%20C%20272.653%20243.612%20278.656%20253.606%20278.656%20264.363%20C%20278.656%20275.127%20272.653%20285.113%20262.996%20290.421%20C%20254.305%20295.219%20251.139%20306.141%20255.922%20314.832%20C%20260.735%20323.56%20271.68%20326.659%20280.333%20321.906%20C%20301.465%20310.265%20314.595%20288.22%20314.595%20264.355%20C%20314.595%20240.491%20301.465%20218.453%20280.326%20206.82%20Z'%20style='fill:%20rgba(255,%20255,%20255,%200.8);'/%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:contain}.audio-controls{position:absolute;bottom:25px;right:35px;margin:0 auto 15px;z-index:1}.audio-controls .play svg,.audio-controls .pause svg{height:35px;width:35px;-webkit-filter:drop-shadow(3px 3px 2px blue);filter:drop-shadow(3px 3px 2px blue)}.audio-controls path{fill:#fff}button{background-color:transparent;border:none;cursor:pointer;padding:0}.lofi-canvas-container{position:relative;width:100%;height:calc(100vh - 85px);background-color:#1a1a1a;overflow:hidden}.lofi-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.lofi-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:10}.control-panel-container{position:fixed;top:100px;left:20px;right:20px;max-height:calc(100vh - 120px);overflow-y:auto;overflow-x:hidden;z-index:100;display:flex;flex-wrap:wrap;gap:15px;align-items:flex-start;padding-top:20px}.control-panel-container::-webkit-scrollbar{width:8px}.control-panel-container::-webkit-scrollbar-track{background:#00000080;border-radius:4px}.control-panel-container::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.control-panel-container::-webkit-scrollbar-thumb:hover{background:#888}.panel{background-color:#000000d9;border:2px solid #444;border-radius:8px;padding:10px;color:#fff;flex:0 0 auto;min-width:200px;max-width:280px}.panel h3{margin:0 0 10px;font-size:10px;color:#0f0;text-shadow:0 0 8px #00ff00;text-transform:uppercase;font-family:"Press Start 2P",monospace}.panel-description{font-size:9px;color:#ccc;margin-bottom:10px;line-height:1.4}.panel-controls{display:flex;flex-direction:column;gap:8px}.control-group{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-group label{font-size:8px;color:#ccc;min-width:60px;text-transform:uppercase}.control-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#333;outline:none;opacity:.7;transition:opacity .2s;border-radius:3px}.control-slider:hover{opacity:1}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#0f0;cursor:pointer;border-radius:50%;box-shadow:0 0 6px #00ff0080}.control-slider::-moz-range-thumb{width:12px;height:12px;background:#0f0;cursor:pointer;border-radius:50%;box-shadow:0 0 6px #00ff0080}.value-display{font-size:9px;color:#0f0;min-width:30px;text-align:center}.control-checkbox{width:20px;height:20px;cursor:pointer}select{background-color:#222;color:#fff;border:1px solid #444;padding:4px 8px;font-size:10px;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace}select:hover{border-color:#666}.play-button{width:40px;height:40px;font-size:16px;background-color:#333;color:#fff;border:2px solid #666;border-radius:50%;cursor:pointer;transition:all .3s ease;font-family:"Press Start 2P",monospace}.play-button:hover{background-color:#444;border-color:#888;transform:scale(1.05)}.play-button.playing{background-color:#f33;border-color:#f66;box-shadow:0 0 15px #ff333380}.interpolation-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.interpolation-controls select{flex:0 0 auto;width:70px;font-size:8px;padding:2px 4px}.interpolation-slider{flex:1;min-width:60px}#melody-visualization{width:100%;height:60px;background-color:#111;border:1px solid #333;border-radius:4px;margin-top:10px}.master-panel{background-color:#320000e6}.interpolation-panel{background-color:#001e32e6}.chord-progression-panel{background-color:#1e0028e6}.melody-panel{background-color:#1e0032e6}.chords-panel{background-color:#00321ee6}.bass-panel{background-color:#321e00e6}.drums-panel{background-color:#282800e6}.background-panel{background-color:#002828e6}.info-panel{background-color:#141414e6}.info-panel p{font-size:9px;line-height:1.5;color:#ccc;margin:10px 0}.info-panel a{color:#0f0;text-decoration:none}.info-panel a:hover{text-decoration:underline}.credits{text-align:center;border-top:1px solid #444;padding-top:10px;margin-top:10px}.ai-button{padding:8px 16px;background-color:#6b46c1;color:#fff;border:2px solid #7C3AED;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:9px;transition:all .3s ease}.ai-button:hover{background-color:#7c3aed;border-color:#9333ea;transform:translateY(-1px);box-shadow:0 2px 8px #7c3aed80}.ai-button:active{transform:translateY(0)}@media (max-width: 768px){.control-panel-container{top:90px;left:10px;right:10px;max-height:calc(100vh - 100px);padding-top:10px}.panel{padding:8px;min-width:150px;max-width:200px}.panel h3{font-size:9px}.control-group label{font-size:7px;min-width:50px}}.lofi-player{position:relative;width:100%;min-height:calc(100vh - 85px);margin-top:85px;background-color:#1a1a1a;font-family:"Press Start 2P",monospace}.toggle-controls-button{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:60px;height:30px;background-color:#000c;color:#fff;border:2px solid #444;border-radius:5px 5px 0 0;border-bottom:none;cursor:pointer;font-size:14px;transition:all .3s ease;z-index:101;font-family:"Press Start 2P",monospace}.toggle-controls-button:hover{background-color:#000000e6;border-color:#666}@media (max-width: 768px){.lofi-player-controls{top:10px;right:10px}.control-panel{padding:15px;min-width:200px}.control-panel h3{font-size:12px}.play-button{width:50px;height:50px;font-size:20px}}.lofi-controls{position:fixed;bottom:60px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:10}.lofi-controls button{padding:10px 20px;background-color:#000000b3;color:#fff;border:2px solid #555;border-radius:5px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:12px;transition:all .3s ease}.lofi-controls button:hover{background-color:#000000e6;border-color:#888;transform:translateY(-2px)}.lofi-controls button:active{transform:translateY(0)}.magenta-tools-container{min-height:100vh;background-color:#0a0a0a;color:#fff;padding:40px 20px;font-family:Proba Pro Regular,sans-serif}.magenta-header{text-align:center;margin-bottom:60px}.magenta-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#ffe66d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,107,107,.5)}.magenta-header p{font-size:20px;color:#999;letter-spacing:2px}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto}.tool-card{text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;display:block}.tool-card:hover{transform:translateY(-5px)}.tool-card-inner{padding:40px 30px;border-radius:15px;position:relative;overflow:hidden;height:200px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 30px #0000004d;transition:box-shadow .3s ease}.tool-card:hover .tool-card-inner{box-shadow:0 15px 40px #00000080}.tool-card h2{font-size:28px;margin:0 0 15px;color:#000}.tool-card p{font-size:16px;color:#000c;line-height:1.5;margin:0}.tool-arrow{position:absolute;bottom:20px;right:20px;font-size:24px;color:#00000080;transition:transform .3s ease,color .3s ease}.tool-card:hover .tool-arrow{transform:translate(5px);color:#000c}@media (max-width: 768px){.magenta-header h1{font-size:36px}.tools-grid{grid-template-columns:1fr;gap:20px}.tool-card-inner{height:180px;padding:30px 25px}.tool-card h2{font-size:24px}.tool-card p{font-size:14px}}.piano-genie-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#0f0f1e);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.piano-genie-header{text-align:center;margin-bottom:40px}.piano-genie-header h1{font-size:48px;margin-top:70px;margin-bottom:20px;background:linear-gradient(45deg,#ff6b6b,#ee5a24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.piano-genie-header p{font-size:18px;color:#999;max-width:600px;margin:0 auto}.instrument-selector{margin-bottom:40px;display:flex;align-items:center;gap:15px;font-size:16px}.instrument-selector label{color:#ccc}.instrument-selector select{background-color:#2a2a3e;color:#fff;border:2px solid #3a3a4e;padding:10px 20px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s ease}.instrument-selector select:hover{border-color:#ff6b6b}.genie-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;max-width:600px;width:100%}.genie-button{aspect-ratio:1;min-height:120px;background:linear-gradient(145deg,#2a2a3e,#1f1f2e);border:3px solid #3a3a4e;border-radius:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:all .1s ease;position:relative;overflow:hidden}.genie-button:hover{transform:translateY(-2px);border-color:#ff6b6b;box-shadow:0 10px 30px #ff6b6b4d}.genie-button.active{background:linear-gradient(145deg,#ff6b6b,#ee5a24);border-color:#ff6b6b;transform:scale(.95);box-shadow:0 0 40px #ff6b6b99,inset 0 0 20px #fff3}.genie-button.active:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);animation:pulse .5s ease-out}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}.button-number{font-size:36px;font-weight:700;color:#fff}.button-key{font-size:18px;color:#ccc;text-transform:uppercase;letter-spacing:2px}.genie-button.active .button-number,.genie-button.active .button-key{color:#fff}.status-indicator{font-size:20px;color:#ff6b6b;margin-bottom:40px;height:30px;display:flex;align-items:center;justify-content:center}.instructions li:before{content:"♪";position:absolute;left:0;color:#ff6b6b;font-size:18px}.fm-controls{background:#ffffff0d;padding:30px;border-radius:15px;border:1px solid rgba(255,255,255,.1);margin-bottom:40px;width:100%;max-width:600px}.fm-parameter{display:flex;align-items:center;margin-bottom:20px;gap:15px}.fm-parameter:last-child{margin-bottom:0}.fm-parameter label{min-width:180px;color:#ccc}.fm-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#3a3a4e;border-radius:2px;outline:none}.fm-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#ff6b6b;border-radius:50%;cursor:pointer;transition:all .2s ease}.fm-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #ff6b6b66}.fm-value{min-width:60px;text-align:right;color:#ff6b6b}.controls-container{background:#ffffff0d;padding:25px;border-radius:15px;border:1px solid rgba(255,255,255,.1);margin-bottom:30px;width:100%;max-width:800px}.control-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;align-items:center}.control-row:last-child{margin-bottom:0}.control-group{display:flex;align-items:center;gap:10px}.control-group label{color:#ccc;white-space:nowrap}.control-group select,.control-group input[type=number]{background-color:#2a2a3e;color:#fff;border:2px solid #3a3a4e;padding:8px 15px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s ease}.control-group select:hover,.control-group input[type=number]:hover{border-color:#ff6b6b}.control-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.button-note{font-size:12px;color:#999;margin-top:5px}.genie-button.active .button-note{color:#fff}.sequence-grid{background:#ffffff0d;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.1);margin-bottom:40px;overflow-x:auto}.grid-header{display:flex;margin-bottom:10px;margin-left:100px;gap:5px}.grid-step-header{width:30px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666}.grid-step-header.active{color:#ff6b6b;font-weight:700}.grid-row{display:flex;gap:5px;margin-bottom:5px;align-items:center}.grid-row-header{width:100px;display:flex;flex-direction:column;align-items:flex-start;padding-right:10px;color:#ccc}.grid-row-header .note-name{font-size:12px;color:#999}.grid-cell{width:30px;height:30px;background:#2a2a3e;border:2px solid #3a3a4e;border-radius:5px;cursor:pointer;transition:all .1s ease;padding:0}.grid-cell:hover{border-color:#ff6b6b;transform:scale(1.1)}.grid-cell.active{background:#ff6b6b;border-color:#ff6b6b}.grid-cell.current{box-shadow:0 0 10px #ff6b6bcc;transform:scale(1.1)}.sequencer-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;transition:all .3s ease}.sequencer-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #ff6b6b66}@media (max-width: 768px){.piano-genie-header h1{font-size:36px}.genie-buttons{grid-template-columns:repeat(2,1fr);gap:15px}.genie-button{min-height:100px}.button-number{font-size:28px}.button-key{font-size:14px}.fm-controls{padding:20px}.fm-parameter{flex-direction:column;align-items:stretch;gap:10px}.fm-parameter label{min-width:auto}.fm-value{text-align:left}.controls-container{padding:15px}.control-row,.control-group{flex-direction:column;align-items:stretch}.sequence-grid{padding:10px}.grid-row-header{width:60px;font-size:12px}.grid-cell{width:25px;height:25px}}.ai-duet-container{min-height:100vh;background:linear-gradient(135deg,#0f0f1e,#1a1a2e);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.ai-duet-header{text-align:center;margin-bottom:40px}.ai-duet-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#4ecdc4,#44a3aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ai-duet-header p{font-size:18px;color:#999;max-width:600px;margin:0 auto}.visualization-canvas{width:100%;max-width:800px;height:100px;background:#000;border:2px solid #2a2a3e;border-radius:10px;margin-bottom:30px}.controls{display:flex;gap:30px;align-items:center;margin-bottom:40px;flex-wrap:wrap;justify-content:center}.octave-selector{display:flex;align-items:center;gap:15px;background:#ffffff0d;padding:15px 25px;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.octave-selector label{color:#ccc;font-size:16px}.octave-selector input[type=range]{width:100px}.octave-selector span{color:#4ecdc4;font-size:20px;font-weight:700;min-width:20px;text-align:center}.ai-respond-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:15px 30px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.ai-respond-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #ff6b6b4d}.ai-respond-button:disabled{opacity:.5;cursor:not-allowed}.ai-respond-button.responding{background:linear-gradient(135deg,#4ecdc4,#44a3aa);animation:pulse 1s ease-in-out infinite}.piano-container{width:100%;max-width:1000px;overflow-x:auto;margin-bottom:40px;padding:20px;background:#0000004d;border-radius:15px}.piano{display:flex;justify-content:center;position:relative;min-width:600px}.octave{display:flex;position:relative}.piano-key{position:relative;cursor:pointer;user-select:none;transition:all .1s ease}.piano-key.white{width:40px;height:150px;background:#fff;border:1px solid #ccc;border-radius:0 0 5px 5px;margin:0 1px}.piano-key.white:hover{background:#f0f0f0}.piano-key.white.active{background:#4ecdc4;transform:translateY(2px)}.piano-key.black{width:30px;height:100px;background:#222;border-radius:0 0 3px 3px;position:absolute;z-index:2}.piano-key.black:nth-child(2){left:30px}.piano-key.black:nth-child(4){left:75px}.piano-key.black:nth-child(7){left:165px}.piano-key.black:nth-child(9){left:210px}.piano-key.black:nth-child(11){left:255px}.piano-key.black:hover{background:#333}.piano-key.black.active{background:#ff6b6b;transform:translateY(2px)}.key-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:12px;color:#666;pointer-events:none}.keyboard-guide{background:#ffffff0d;padding:20px;border-radius:10px;border:1px solid rgba(255,255,255,.1);margin-bottom:30px;text-align:center}.keyboard-guide h3{margin:0 0 15px;color:#4ecdc4;font-size:18px}.key-mapping{display:flex;flex-direction:column;gap:10px;font-size:14px;color:#ccc}.status{font-size:20px;color:#4ecdc4;text-align:center;margin-top:20px}@media (max-width: 768px){.ai-duet-header h1{font-size:36px}.piano-key.white{width:35px;height:120px}.piano-key.black{width:25px;height:80px}.controls{flex-direction:column}}.drumbot-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.drumbot-header{text-align:center;margin-bottom:40px}.drumbot-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#ffe66d,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.drumbot-header p{font-size:18px;color:#999}.controls{display:flex;gap:20px;align-items:center;margin-bottom:40px;flex-wrap:wrap;justify-content:center;background:#0000004d;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.play-button,.record-button{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#2a2a3e,#1f1f2e);border:3px solid #FFE66D;color:#ffe66d;font-size:24px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.play-button:hover{transform:scale(1.1);box-shadow:0 0 20px #ffe66d80}.play-button.playing{background:linear-gradient(135deg,#ffe66d,#ff6b6b);color:#1a1a2e;animation:pulse 2s ease-in-out infinite}.record-button:hover{transform:scale(1.1);box-shadow:0 0 20px #ff6b6b80}.record-button.recording{background:linear-gradient(135deg,#f44,#c00);color:#fff;animation:pulse 1s ease-in-out infinite}.control-group{display:flex;align-items:center;gap:10px;background:#ffffff0d;padding:10px 20px;border-radius:10px}.control-group label{color:#ccc;font-size:14px;min-width:80px}.control-group input[type=range]{width:100px}.control-group span{color:#ffe66d;font-weight:700;min-width:30px}.control-group select{background:#2a2a3e;color:#fff;border:1px solid #3a3a4e;padding:5px 10px;border-radius:5px;cursor:pointer}.generate-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:12px 24px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.generate-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ff6b6b4d}.drum-grid{display:flex;gap:10px;background:#00000080;padding:20px;border-radius:15px;margin-bottom:40px;overflow-x:auto;max-width:90vw}.drum-labels{display:flex;flex-direction:column;gap:5px;margin-right:10px}.drum-label{height:30px;display:flex;align-items:center;font-size:12px;color:#ccc;text-transform:uppercase;min-width:100px;padding-right:10px}.grid-container{display:flex;flex-direction:column;gap:5px}.drum-step{width:25px;height:30px;background:#2a2a3e;border:1px solid #3a3a4e;cursor:pointer;transition:all .1s ease;position:relative}.drum-step.beat{border-color:#4a4a5e}.drum-step:hover{background:#3a3a4e;transform:scale(1.1)}.drum-step.active{background:#ffe66d;border-color:#ffe66d;box-shadow:0 0 10px #ffe66d80}.drum-step.active.playing{background:#ff6b6b;animation:flash .2s ease}.drum-step.playing:not(.active){border-color:#ff6b6b;box-shadow:inset 0 0 10px #ff6b6b80}@keyframes flash{0%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.info{background:#ffffff0d;padding:30px;border-radius:15px;border:1px solid rgba(255,255,255,.1);max-width:600px}.info h3{margin:0 0 20px;color:#ffe66d;font-size:20px}.info li{margin-bottom:10px;padding-left:25px;position:relative;color:#ccc;line-height:1.6}.info li:before{content:"🥁";position:absolute;left:0}.export-controls{background:#0000004d;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.1);margin-bottom:40px;text-align:center}.export-controls h3{margin:0 0 15px;color:#ffe66d;font-size:20px}.export-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:15px}.export-button{background:linear-gradient(135deg,#2a2a3e,#1f1f2e);color:#ffe66d;border:2px solid #FFE66D;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.export-button:hover:not(:disabled){background:linear-gradient(135deg,#ffe66d,#ff6b6b);color:#1a1a2e;transform:translateY(-2px);box-shadow:0 5px 20px #ffe66d4d}.export-button:disabled{opacity:.5;cursor:not-allowed}.recording-indicator{color:#f44;font-weight:700;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.drumbot-header h1{font-size:36px}.controls{flex-direction:column}.drum-step{width:20px;height:25px}.drum-label{font-size:10px;min-width:80px}}.performance-rnn-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#0f0f1e);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.performance-header{text-align:center;margin-bottom:40px}.performance-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#b794f6,#e9d8fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.performance-header p{font-size:18px;color:#999}.performance-visualizer{width:100%;max-width:800px;height:200px;background:#000000b3;border:1px solid rgba(183,148,246,.3);border-radius:15px;margin-bottom:30px;box-shadow:0 10px 30px #00000080}.controls{width:100%;max-width:800px;background:#0000004d;padding:30px;border-radius:15px;border:1px solid rgba(255,255,255,.1);margin-bottom:40px}.control-row{display:flex;gap:30px;align-items:flex-end;margin-bottom:25px;flex-wrap:wrap;justify-content:center}.control-group{display:flex;flex-direction:column;gap:10px;min-width:150px}.control-group label{color:#ccc;font-size:14px;text-transform:uppercase;letter-spacing:1px}.control-group input[type=range]{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#b794f6;border-radius:50%;cursor:pointer;transition:all .2s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 15px #b794f699}.control-group span{color:#b794f6;font-weight:700;font-size:14px}.control-group select{background:#2a2a3e;color:#fff;border:1px solid #3a3a4e;padding:8px 15px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s ease}.control-group select:hover{border-color:#b794f6;background:#323244}.button-row{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.generate-button{background:linear-gradient(135deg,#b794f6,#9f7aea);color:#fff;border:none;padding:15px 30px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 5px 20px #b794f64d}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #b794f680}.generate-button.generating{background:linear-gradient(135deg,#6b6b6b,#4a4a4a);cursor:not-allowed;animation:pulse 2s ease-in-out infinite}.play-button,.stop-button,.export-button{background:#ffffff1a;color:#fff;border:2px solid #b794f6;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.play-button:hover,.stop-button:hover,.export-button:hover{background:#b794f633;transform:translateY(-2px);box-shadow:0 5px 20px #b794f64d}.stop-button{border-color:#ff6b6b;color:#ff6b6b}.stop-button:hover{background:#ff6b6b33;box-shadow:0 5px 20px #ff6b6b4d}.export-button{border-color:#4ecdc4;color:#4ecdc4}.export-button:hover{background:#4ecdc433;box-shadow:0 5px 20px #4ecdc44d}.info-section{background:#ffffff0d;padding:40px;border-radius:15px;border:1px solid rgba(255,255,255,.1);max-width:800px;width:100%}.info-section h3{margin:0 0 25px;color:#b794f6;font-size:24px}.info-section p{color:#ccc;line-height:1.8;margin-bottom:20px}.info-section li{margin-bottom:15px;padding-left:30px;position:relative;color:#ccc;line-height:1.8}.info-section li:before{content:"🎹";position:absolute;left:0}.info-section strong{color:#b794f6}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 768px){.performance-header h1{font-size:36px}.control-row{flex-direction:column;align-items:stretch}.control-group{width:100%}.button-row{flex-direction:column}.generate-button,.play-button,.stop-button,.export-button{width:100%}.performance-visualizer{height:150px}}.fm-synthesizer{min-height:100vh;background:linear-gradient(135deg,#1a0033,#306);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.fm-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;font-size:24px;color:#666}.fm-header{text-align:center;margin-bottom:40px}.fm-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#ff6ec7,#c873f4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.fm-header p{font-size:18px;color:#999}.fm-controls{background:#0000004d;padding:40px;border-radius:20px;border:1px solid rgba(255,255,255,.1);margin-bottom:40px;max-width:600px;width:100%}.fm-play-button{width:120px;height:50px;background:linear-gradient(135deg,#ff6ec7,#c873f4);border:none;color:#fff;font-size:18px;font-weight:700;border-radius:25px;cursor:pointer;transition:all .3s ease;margin-bottom:30px;text-transform:uppercase}.fm-play-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ff6ec766}.fm-play-button.playing{background:linear-gradient(135deg,#f44,#c00)}.fm-parameters{display:flex;flex-direction:column;gap:25px}.fm-parameter{display:flex;flex-direction:column;gap:10px}.fm-parameter label{font-size:14px;color:#ccc;text-transform:uppercase;letter-spacing:1px}.fm-slider{height:8px;background:#ffffff1a;border-radius:4px;position:relative}.fm-track{background:linear-gradient(to right,#ff6ec7,#c873f4);height:8px;border-radius:4px}.fm-thumb{width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 10px #0000004d;transition:all .2s ease}.fm-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #ff6ec799}.fm-value{color:#ff6ec7;font-weight:700;font-size:14px;min-width:60px;text-align:right}.fm-info{background:#ffffff0d;padding:30px;border-radius:15px;border:1px solid rgba(255,255,255,.1);max-width:600px;width:100%}.fm-info h3{margin:0 0 20px;color:#ff6ec7;font-size:24px}.fm-info p{color:#ccc;line-height:1.8;margin-bottom:20px}.fm-info ul{list-style:none;padding:0}.fm-info li{margin-bottom:15px;padding-left:25px;position:relative;color:#ccc;line-height:1.6}.fm-info li:before{content:"🎛️";position:absolute;left:0}.fm-info strong{color:#ff6ec7}.fm-oscilloscope{width:100%;margin-bottom:30px;background:#00000080;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center}.fm-oscilloscope-canvas{width:100%;max-width:600px;height:200px;min-height:200px;background:#0a0a0a;border-radius:10px;border:1px solid #333;display:block}@media (max-width: 768px){.fm-header h1{font-size:36px}.fm-controls{padding:20px}.fm-play-button{width:100%}}.neural-drum-machine{max-width:1200px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:20px;box-shadow:0 20px 60px #00000080}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#ff6b6b,#ff8787);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header p{color:#999;font-size:1.2rem}.controls{display:flex;gap:2rem;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#0000004d;border-radius:15px;flex-wrap:wrap}.play-button{width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,#ff6b6b,#ff8787);color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b6b4d}.play-button.playing{background:linear-gradient(135deg,#ffd93d,#ffed4b);animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 4px 15px #ffd93d4d}50%{box-shadow:0 4px 25px #ffd93d80}to{box-shadow:0 4px 15px #ffd93d4d}}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#ff6b6b;border-radius:50%;cursor:pointer}.control-group span{color:#ff6b6b;font-weight:700}.control-group select{background:#333;border:1px solid #444;color:#fff;padding:.5rem;border-radius:5px;font-size:1rem;cursor:pointer}.generate-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#4ecdc4,#44a3aa);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.generate-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ecdc466}.drum-selector{margin-bottom:2rem;text-align:center}.drum-selector h3{color:#999;margin-bottom:1rem}.drum-buttons{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.drum-select-button{padding:.5rem 1rem;background:#333;border:2px solid #444;border-radius:20px;color:#666;font-size:.9rem;cursor:pointer;transition:all .3s ease}.drum-select-button.selected{background:#ff6b6b;border-color:#ff6b6b;color:#fff}.drum-select-button:hover{border-color:#ff6b6b;color:#ff6b6b}.drum-grid{display:flex;gap:1rem;margin-bottom:2rem;background:#0003;padding:1rem;border-radius:10px;overflow-x:auto}.drum-labels{display:flex;flex-direction:column;gap:4px;min-width:100px}.drum-label{height:30px;display:flex;align-items:center;padding:0 .5rem;font-size:.8rem;color:#666;background:#ffffff0d;border-radius:5px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.drum-label.selected{color:#ff6b6b;background:#ff6b6b1a;font-weight:700}.drum-label:hover{background:#ff6b6b1a}.grid-container{display:flex;flex-direction:column;gap:4px;flex:1}.drum-row{display:flex;gap:2px}.drum-step{width:25px;height:30px;background:#ffffff0d;border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative}.drum-step.beat{background:#ffffff14}.drum-step.active{background:#ff6b6b;box-shadow:0 2px 10px #ff6b6b66}.drum-step.playing{background:#ffd93d!important;animation:stepPulse .2s ease}.drum-step.disabled{opacity:.3;cursor:not-allowed}@keyframes stepPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.info h3{color:#ff6b6b;margin-bottom:1rem}.info li:before{content:"▸";position:absolute;left:0;color:#ff6b6b}.nsynth-container{max-width:1200px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:20px;box-shadow:0 20px 60px #00000080}.nsynth-header{text-align:center;margin-bottom:3rem}.nsynth-header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#c7ceea,#b794f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nsynth-header p{color:#999;font-size:1.2rem}.instrument-selectors{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-bottom:2rem}.instrument-selector{display:flex;flex-direction:column;gap:.5rem}.instrument-selector label{font-size:.9rem;color:#999;text-transform:uppercase;letter-spacing:1px}.instrument-selector select{background:#333;border:1px solid #444;color:#fff;padding:.75rem;border-radius:8px;font-size:1rem;cursor:pointer}.instrument-selector select:hover{border-color:#666}.morph-control{display:flex;flex-direction:column;gap:.5rem;align-items:center}.morph-control label{font-size:.9rem;color:#999;text-transform:uppercase;letter-spacing:1px}.morph-control input[type=range]{width:200px;height:8px;background:#333;border-radius:4px;outline:none;-webkit-appearance:none}.morph-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#b794f6;border-radius:50%;cursor:pointer;box-shadow:0 2px 10px #b794f666}.morph-control span{color:#b794f6;font-weight:700;font-size:1.1rem}.morph-visualizer{margin-bottom:2rem}.morph-gradient{height:60px;border-radius:30px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #0000004d}.morph-indicator{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:#fff;border-radius:50%;box-shadow:0 4px 15px #00000080;transition:left .1s ease}.morph-labels{display:flex;justify-content:space-between;margin-top:.5rem;color:#999;font-size:.9rem}.note-controls{display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#c7ceea;border-radius:50%;cursor:pointer}.control-group span{color:#c7ceea;font-weight:700}.play-button{padding:.75rem 2rem;background:linear-gradient(135deg,#b794f6,#c7ceea);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #b794f64d}.play-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #b794f666}.play-button:active{transform:translateY(0)}.keyboard{position:relative;height:150px;margin:2rem auto;background:#0003;border-radius:10px;padding:1rem;overflow-x:auto}.white-keys{display:flex;gap:2px;height:100%}.black-keys{position:absolute;top:1rem;left:1rem;height:60%}.key{border:none;cursor:pointer;transition:all .1s ease}.white-key{width:40px;background:#fff;border-radius:0 0 4px 4px;box-shadow:0 2px 5px #0000004d;color:#333;font-size:.8rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem}.white-key:hover{background:#f0f0f0}.white-key.active{background:#c7ceea;transform:translateY(2px);box-shadow:0 1px 3px #0000004d}.black-key{position:absolute;width:25px;background:#222;border-radius:0 0 3px 3px;box-shadow:0 2px 5px #00000080}.black-key:hover{background:#333}.black-key.active{background:#b794f6;transform:translateY(2px);box-shadow:0 1px 3px #00000080}.info h3{color:#c7ceea;margin-bottom:1rem}.info li:before{content:"▸";position:absolute;left:0;color:#c7ceea}@media (max-width: 768px){.instrument-selectors{grid-template-columns:1fr;gap:1rem}.morph-control input[type=range]{width:100%}.keyboard{overflow-x:scroll}}.melody-mixer-container{max-width:1400px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:20px;box-shadow:0 20px 60px #00000080}.melody-mixer-header{text-align:center;margin-bottom:3rem}.melody-mixer-header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#ffdab9,#ffb6c1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.melody-mixer-header p{color:#999;font-size:1.2rem}.loading{text-align:center;padding:3rem;font-size:1.2rem;color:#666}.controls{display:flex;gap:2rem;align-items:center;justify-content:center;margin-bottom:3rem;padding:2rem;background:#0000004d;border-radius:15px;flex-wrap:wrap}.mix-control{display:flex;flex-direction:column;gap:1rem;align-items:center}.mix-control label{font-size:1.1rem;color:#999;text-transform:uppercase;letter-spacing:1px}.mix-slider-container{display:flex;align-items:center;gap:1rem}.mix-slider-container span{color:#666;font-size:.9rem}.mix-slider-container input[type=range]{width:200px;height:8px;background:#333;border-radius:4px;outline:none;-webkit-appearance:none}.mix-slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);border-radius:50%;cursor:pointer;box-shadow:0 2px 10px #00000080}.mix-value{font-size:1.5rem;font-weight:700;background:linear-gradient(45deg,#ffdab9,#ffb6c1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.control-group{display:flex;flex-direction:column;gap:.5rem;align-items:center}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#ffdab9;border-radius:50%;cursor:pointer}.control-group span{color:#ffdab9;font-weight:700}.melodies-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}.melody-section{background:#0003;padding:1.5rem;border-radius:10px}.melody-section.interpolated{background:#b794f61a;border:2px solid rgba(183,148,246,.3)}.piano-roll{margin-bottom:1rem}.piano-roll h3{margin-bottom:1rem;text-align:center}.roll-container{display:flex;gap:.5rem;margin-bottom:1rem;background:#0000004d;padding:.5rem;border-radius:8px;overflow-x:auto}.pitch-labels{display:flex;flex-direction:column;gap:2px}.pitch-label{height:20px;font-size:.7rem;color:#666;display:flex;align-items:center;padding-right:.5rem;min-width:40px}.notes-grid{display:flex;flex-direction:column;gap:2px;flex:1}.note-row{display:flex;gap:1px}.note-cell{width:15px;height:20px;background:#ffffff0d;border-radius:2px;transition:all .2s ease}.note-cell.active{box-shadow:0 0 10px #ffffff4d}.note-cell.playing{background:#ffd93d!important;animation:notePulse .2s ease}@keyframes notePulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.play-melody-button{width:100%;padding:.75rem;border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}.play-melody-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.play-melody-button:disabled{opacity:.5;cursor:not-allowed}.melody-controls{display:flex;gap:.5rem;margin-top:1rem}.melody-controls select,.melody-controls button{flex:1;padding:.5rem;background:#333;border:1px solid #444;color:#fff;border-radius:5px;cursor:pointer;transition:all .3s ease}.melody-controls select:hover,.melody-controls button:hover{border-color:#666}.melody-controls button:disabled{opacity:.5;cursor:not-allowed}.generating{text-align:center;padding:1rem;color:#b794f6;font-style:italic;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.info h3{color:#ffdab9;margin-bottom:1rem}.info li:before{content:"▸";position:absolute;left:0;color:#ffdab9}@media (max-width: 1200px){.melodies-container{grid-template-columns:1fr;gap:1rem}.melody-section.interpolated{order:-1}}@media (max-width: 768px){.controls{flex-direction:column;gap:1rem}.mix-slider-container input[type=range]{width:150px}}.color-theremin-container{max-width:1200px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:20px;box-shadow:0 20px 60px #00000080}.color-theremin-header{text-align:center;margin-bottom:3rem}.color-theremin-header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#ffe66d,#b794f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:colorShift 5s ease-in-out infinite}@keyframes colorShift{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(180deg)}}.color-theremin-header p{color:#999;font-size:1.2rem}.controls{display:flex;gap:2rem;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#0000004d;border-radius:15px;flex-wrap:wrap;justify-content:center}.play-button{width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b6b4d}.play-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff6b6b66}.play-button.playing{background:linear-gradient(135deg,#4ecdc4,#b794f6);animation:pulse 1s infinite}.mode-selector{display:flex;flex-direction:column;gap:.5rem}.mode-selector label{font-size:.9rem;color:#999;text-transform:uppercase;letter-spacing:1px}.mode-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.mode-button{padding:.5rem 1rem;background:transparent;border:2px solid;border-radius:20px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .3s ease}.mode-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.mode-button.active{color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.control-group input[type=range]{width:120px;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);border-radius:50%;cursor:pointer}.control-group span{color:#4ecdc4;font-weight:700}.canvas-container{width:100%;height:400px;border-radius:15px;overflow:hidden;box-shadow:0 10px 40px #00000080;margin-bottom:2rem;cursor:crosshair;position:relative}.color-display{display:flex;align-items:center;gap:2rem;justify-content:center;margin-bottom:2rem;padding:1rem;background:#0000004d;border-radius:10px}.color-preview{width:80px;height:80px;border-radius:50%;box-shadow:0 4px 20px #00000080;transition:background-color .1s ease}.color-values{display:flex;gap:2rem}.color-values span{font-family:monospace;font-size:1.1rem;padding:.5rem 1rem;background:#00000080;border-radius:5px}.color-r{color:#ff6b6b}.color-g{color:#4ecdc4}.color-b{color:#ffe66d}.mode-info{text-align:center;margin-bottom:2rem;padding:1rem;background:#0003;border-radius:10px}.mode-info h3{color:#4ecdc4;margin-bottom:.5rem}.mode-info p{color:#999}.info{background:#0000004d;padding:1.5rem;border-radius:10px;margin-top:2rem}.info h3{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}.info li:before{content:"▸";position:absolute;left:0;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (max-width: 768px){.controls{flex-direction:column;gap:1rem}.mode-buttons{justify-content:center}.canvas-container{height:300px}.color-display{flex-direction:column;gap:1rem}.color-values{gap:1rem}}.midi-bouncing-ball-container{max-width:1200px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:20px;box-shadow:0 20px 60px #00000080}.midi-bouncing-ball-header{text-align:center;margin-bottom:2rem}.midi-bouncing-ball-header h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#b794f6,#9f7aea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.midi-bouncing-ball-header p{color:#999;font-size:1.2rem}.canvas-container{width:100%;height:400px;border-radius:15px;overflow:hidden;box-shadow:0 10px 40px #00000080;margin-bottom:2rem;position:relative}.canvas-container canvas{display:block}.controls{background:#0000004d;padding:2rem;border-radius:15px;margin-bottom:2rem}.transport-controls{display:flex;gap:2rem;align-items:center;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.play-button{width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,#b794f6,#9f7aea);color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #b794f64d}.play-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #b794f666}.play-button.playing{background:linear-gradient(135deg,#4ecdc4,#44a3aa);animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 4px 15px #4ecdc44d}50%{box-shadow:0 4px 25px #4ecdc480}to{box-shadow:0 4px 15px #4ecdc44d}}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-size:.9rem;color:#999;text-transform:uppercase;letter-spacing:1px}.control-group input[type=range]{width:150px;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#b794f6;border-radius:50%;cursor:pointer}.control-group span{color:#b794f6;font-weight:700}.sequencer-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.melody-controls,.rhythm-controls{background:#0003;padding:1.5rem;border-radius:10px}.melody-controls h3,.rhythm-controls h3{color:#b794f6;margin-bottom:1rem;text-align:center}.step-sliders{display:flex;gap:1rem;justify-content:center;align-items:flex-end;height:200px;margin-bottom:1rem}.step-control{display:flex;flex-direction:column;align-items:center;gap:.5rem}.vertical-slider{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:30px;height:150px;background:transparent;outline:none}.step-label{color:#666;font-size:.9rem}.rhythm-buttons{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}.rhythm-button{width:50px;height:50px;border:2px solid #444;background:transparent;color:#666;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:700}.rhythm-button:hover{border-color:#b794f6;color:#b794f6}.rhythm-button.active{background:#b794f6;border-color:#b794f6;color:#fff}.rhythm-button.playing{animation:rhythmPulse .2s ease}@keyframes rhythmPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.section-controls{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-top:1rem}.section-controls button{padding:.5rem 1rem;background:#333;border:1px solid #444;color:#fff;border-radius:5px;cursor:pointer;transition:all .3s ease}.section-controls button:hover{background:#444;border-color:#b794f6}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-control label{font-size:.8rem;color:#999}.volume-control input[type=range]{width:100px;height:4px;background:#333;border-radius:2px;outline:none;-webkit-appearance:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#b794f6;border-radius:50%;cursor:pointer}.info{background:#0000004d;padding:1.5rem;border-radius:10px}.info h3{color:#b794f6;margin-bottom:1rem}.info ul{list-style:none;padding:0}.info li{color:#999;margin-bottom:.5rem;padding-left:1.5rem;position:relative}.info li:before{content:"▸";position:absolute;left:0;color:#b794f6}@media (max-width: 768px){.sequencer-section{grid-template-columns:1fr;gap:1rem}.transport-controls{flex-direction:column;gap:1rem}}.about-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:#000;position:relative;overflow:hidden}.about-content{max-width:800px;text-align:center;position:relative;z-index:1}.about-content h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(45deg,#0ff,#f0f,#ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:colorShift 8s ease-in-out infinite;line-height:1.2}@keyframes colorShift{0%,to{filter:hue-rotate(0deg)}33%{filter:hue-rotate(120deg)}66%{filter:hue-rotate(240deg)}}.about-content h2{font-size:1.5rem;color:#999;margin-bottom:3rem;font-weight:300;letter-spacing:2px}.labels{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:4rem;font-size:1.1rem}.labels span{color:#666;transition:color .3s ease}.labels span:hover:not(:nth-child(2n)){color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.5)}.labels span:nth-child(2n){color:#444}.philosophy{text-align:left;line-height:1.8;color:#ccc;margin-bottom:3rem}.philosophy p{margin-bottom:2rem;font-size:1.1rem;position:relative;padding-left:2rem}.philosophy p:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(to bottom,#00ffff,transparent);opacity:.5}.visual-element{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;align-items:center;justify-content:center}.loading-3d{width:100%;height:400px;display:flex;align-items:center;justify-content:center;position:relative}.floating-orb{display:none}@media (max-width: 768px){.about-content h1{font-size:2rem}.about-content h2{font-size:1.2rem}.labels{font-size:.9rem;gap:.5rem}.philosophy p{font-size:1rem;padding-left:1.5rem}}.runn-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#0f0f1e);color:#fff;padding:40px 20px;display:flex;flex-direction:column;align-items:center;font-family:Proba Pro Regular,sans-serif}.runn-header{text-align:center;margin-bottom:40px}.runn-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#ff6b6b,#ee5a24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.runn-header p{font-size:18px;color:#999;max-width:600px;margin:0 auto}.loading{font-size:24px;color:#666;margin-top:100px}.game-stats{display:flex;gap:40px;margin-bottom:20px;font-size:24px}.score{color:#ff6b6b}.high-score{color:#ffd93d}canvas{background:#ffffff0d;cursor:pointer}.game-controls{margin-bottom:40px}.start-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);border:none;border-radius:8px;color:#fff;font-size:18px;padding:12px 30px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.start-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ff6b6b4d}.start-button:active{transform:translateY(0)}.instructions{max-width:600px;background:#ffffff0d;padding:30px;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.instructions h3{font-size:24px;margin-bottom:20px;color:#ff6b6b}.instructions ul{list-style:none;padding:0}.instructions li{margin-bottom:15px;padding-left:25px;position:relative;line-height:1.6;color:#ccc}.instructions li:before{content:"→";position:absolute;left:0;color:#ff6b6b}@media (max-width: 768px){.runn-header h1{font-size:36px}.game-stats{font-size:20px;gap:20px}canvas{width:100%;height:auto}.instructions{padding:20px}}.techno-generator-wrapper{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#00ff41;min-height:100vh;padding:20px 0 50px;font-family:Courier New,monospace;overflow-y:auto}.techno-generator-wrapper *{margin:0;padding:0;box-sizing:border-box}.techno-generator-wrapper .container{width:90%;max-width:800px;margin:70px auto 0;padding:20px;min-height:auto;height:auto;position:relative!important;top:auto!important;transform:none!important;-ms-transform:none!important}.techno-generator-wrapper h1{text-align:center;font-size:2.5em;margin-bottom:30px;text-shadow:0 0 20px #00ff41;letter-spacing:.1em}.techno-generator-wrapper h2{font-size:1.2em;margin-bottom:15px;color:#00ff41}.techno-generator-wrapper .controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .tempo-control{display:flex;align-items:center;gap:15px}.techno-generator-wrapper .transport{display:flex;gap:10px}.techno-generator-wrapper .btn{padding:10px 20px;background:transparent;border:1px solid #00ff41;color:#00ff41;cursor:pointer;font-family:Courier New,monospace;text-transform:uppercase;transition:all .3s}.techno-generator-wrapper .btn:hover{background:#00ff41;color:#0a0a0a;box-shadow:0 0 10px #00ff41}.techno-generator-wrapper .btn.active{background:#00ff41;color:#0a0a0a}.techno-generator-wrapper .btn:disabled{opacity:.5;cursor:not-allowed}.techno-generator-wrapper .btn:disabled:hover{background:transparent;color:#00ff41;box-shadow:none}.techno-generator-wrapper .btn.record.recording{background:red;border-color:red;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.techno-generator-wrapper .sequencer{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .sequencer-tracks{width:100%}.techno-generator-wrapper .track{display:flex;align-items:center;margin-bottom:10px}.techno-generator-wrapper .track-label{width:80px;font-size:.9em}.techno-generator-wrapper .steps{display:flex;gap:5px;flex:1}.techno-generator-wrapper .step{width:30px;height:30px;background:#00ff411a;border:1px solid #00ff41;cursor:pointer;transition:all .2s}.techno-generator-wrapper .step:hover{background:#00ff414d}.techno-generator-wrapper .step.active{background:#00ff41;box-shadow:0 0 10px #00ff41}.techno-generator-wrapper .step.current{border:2px solid #ffff00}.techno-generator-wrapper .lead-controls{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .synth-params,.techno-generator-wrapper .lead-effects{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:20px}.techno-generator-wrapper .synth-params>div,.techno-generator-wrapper .lead-effects>div,.techno-generator-wrapper .effects>div{display:flex;flex-direction:column;gap:10px}.techno-generator-wrapper label{font-size:.9em;text-transform:uppercase}.techno-generator-wrapper input[type=range]{width:100%;height:5px;background:#00ff4133;outline:none;-webkit-appearance:none}.techno-generator-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;background:#00ff41;cursor:pointer;border-radius:50%}.techno-generator-wrapper input[type=range]::-moz-range-thumb{width:15px;height:15px;background:#00ff41;cursor:pointer;border-radius:50%;border:none}.techno-generator-wrapper .effects{display:flex;gap:20px;margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .effects>div{flex:1}.techno-generator-wrapper .export-controls{padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .export-buttons{display:flex;gap:10px;margin-bottom:15px}.techno-generator-wrapper .export-btn{flex:1}.techno-generator-wrapper .recording-status{text-align:center;color:#ff0;font-size:.9em;min-height:20px}.techno-generator-wrapper .visualizer{margin:20px auto;width:100%;max-width:800px;background:#000c;border:1px solid #00ff41;border-radius:4px;padding:10px;box-shadow:0 0 20px #00ff414d}.techno-generator-wrapper .visualizer canvas{width:100%;height:100px;display:block}.techno-generator-wrapper .preset-controls{display:flex;gap:10px;align-items:center;margin:20px 0}.techno-generator-wrapper .preset-selector{background:#222;color:#00ff41;border:1px solid #00ff41;padding:8px 15px;border-radius:4px;font-family:Courier New,monospace;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis}.techno-generator-wrapper .preset-selector:hover{background:#333}.techno-generator-wrapper .swing-control{display:flex;align-items:center;gap:10px;margin:10px 0}.techno-generator-wrapper .swing-control label{color:#00ff41;font-size:12px;font-weight:700;min-width:50px}.techno-generator-wrapper .swing-control input[type=range]{width:150px}.techno-generator-wrapper .swing-control span{color:#00ff41;font-size:14px;min-width:40px}.techno-generator-wrapper .key-control,.techno-generator-wrapper .scale-control{display:flex;align-items:center;gap:10px}.techno-generator-wrapper .key-control label,.techno-generator-wrapper .scale-control label{color:#00ff41;font-size:12px;font-weight:700;min-width:50px}.techno-generator-wrapper .btn-small{background:#222;color:#00ff41;border:1px solid #00ff41;padding:4px 8px;margin-left:5px;font-size:10px;cursor:pointer;transition:all .2s}.techno-generator-wrapper .btn-small:hover{background:#00ff41;color:#000}.techno-generator-wrapper .track{display:flex;align-items:center;gap:10px}.techno-generator-wrapper .synth-params span,.techno-generator-wrapper .lead-effects span,.techno-generator-wrapper .effects span{color:#00ff41;font-size:12px;min-width:30px;display:inline-block;text-align:right}.techno-generator-wrapper .controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41;gap:15px}.techno-generator-wrapper .container{background:#0009;border:1px solid rgba(0,255,65,.3);border-radius:8px;box-shadow:0 4px 30px #00ff4133}.techno-generator-wrapper .step{position:relative;overflow:hidden}.techno-generator-wrapper .step.active:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:radial-gradient(circle,rgba(0,255,65,.8) 0%,transparent 70%);animation:ripple .3s ease-out}@keyframes ripple{0%{width:0;height:0;opacity:1}to{width:100%;height:100%;opacity:0}}.techno-generator-wrapper .rnbo-controls{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .rnbo-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:20px}.techno-generator-wrapper .rnbo-params>div{display:flex;flex-direction:column;gap:10px}.techno-generator-wrapper .rnbo-preset-controls,.techno-generator-wrapper .rnbo-mode-controls{grid-column:span 2}.techno-generator-wrapper .preset-buttons,.techno-generator-wrapper .mode-buttons{display:flex;gap:10px}.techno-generator-wrapper .btn-small.active{background:#00ff41;color:#000}.techno-generator-wrapper .rnbo-automation{grid-column:span 2}.techno-generator-wrapper .rnbo-automation label{display:flex;align-items:center;gap:10px;cursor:pointer}.techno-generator-wrapper .rnbo-automation input[type=checkbox]{width:auto;height:auto;margin:0}.techno-generator-wrapper .arp-settings{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:15px;background:#00ff411a;border:1px solid rgba(0,255,65,.3);border-radius:4px;margin-top:10px}.techno-generator-wrapper .arp-settings select{width:100%;background:#222;color:#00ff41;border:1px solid #00ff41;padding:5px;font-family:Courier New,monospace;cursor:pointer}.techno-generator-wrapper .arp-settings select:hover{background:#333}.techno-generator-wrapper .voice-controls{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .voice-input-section{display:flex;align-items:center;gap:10px;margin-bottom:15px}.techno-generator-wrapper .voice-input-section input{flex:1;padding:8px;background:#000;border:1px solid #00ff41;color:#00ff41;font-family:Courier New,monospace}.techno-generator-wrapper .voice-input-section input:disabled{opacity:.5}.techno-generator-wrapper .voice-words-display{display:flex;flex-wrap:wrap;gap:10px}.techno-generator-wrapper .voice-word{padding:5px 10px;background:#00ff411a;border:1px solid #00ff41;border-radius:3px;font-size:.9em;cursor:pointer;transition:all .2s}.techno-generator-wrapper .voice-word:hover{background:#00ff4133;box-shadow:0 0 5px #00ff4180}.techno-generator-wrapper .step.has-word{background:#00ff414d;border-color:#00ff41;box-shadow:0 0 5px #00ff4180}.techno-generator-wrapper .step.selected{border:2px solid #ffff00;box-shadow:0 0 10px #ff0c}.techno-generator-wrapper .pattern-bank{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .pattern-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:15px}.techno-generator-wrapper .pattern-slot{display:flex;flex-direction:column;align-items:center;gap:5px}.techno-generator-wrapper .pattern-button{width:60px;height:60px;background:#00ff411a;border:2px solid #00ff41;color:#00ff41;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s}.techno-generator-wrapper .pattern-button:hover{background:#00ff414d}.techno-generator-wrapper .pattern-button.has-pattern{background:#00ff4180;box-shadow:0 0 10px #00ff4180}.techno-generator-wrapper .pattern-button.selected{border-color:#ff0;color:#ff0;box-shadow:0 0 15px #ff0c}.techno-generator-wrapper .pattern-actions{display:flex;gap:5px}.techno-generator-wrapper .timeline-section{margin-bottom:30px;padding:20px;background:#00ff410d;border:1px solid #00ff41}.techno-generator-wrapper .timeline-controls{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}.techno-generator-wrapper .pattern-selector-container{background:#00ff411a;padding:10px;border-radius:4px;border:1px solid rgba(0,255,65,.3)}.techno-generator-wrapper .timeline-player-controls{display:flex;justify-content:center;margin:20px 0}.techno-generator-wrapper .timeline-container{background:#00000080;border:1px solid #00ff41;border-radius:4px;margin-bottom:20px;overflow-x:auto;position:relative}.techno-generator-wrapper .timeline-grid{display:grid;grid-template-columns:repeat(32,60px);grid-template-rows:80px;gap:2px;padding:10px;min-width:fit-content;position:relative}.techno-generator-wrapper .timeline-block{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:4px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.techno-generator-wrapper .timeline-block:hover{opacity:.8;transform:translateY(-2px)}.techno-generator-wrapper .timeline-block span{font-size:12px;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.techno-generator-wrapper .timeline-remove{background:#ff000080;color:#fff;border:none;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;padding:0}.techno-generator-wrapper .timeline-position{position:absolute;width:2px;height:100%;background:#ff0;box-shadow:0 0 10px #ff0;pointer-events:none;animation:pulse 1s infinite}.techno-generator-wrapper .timeline-numbers{display:grid;grid-template-columns:repeat(32,60px);padding:0 10px 10px}.techno-generator-wrapper .timeline-number{text-align:center;font-size:10px;color:#00ff41;opacity:.6}.techno-generator-wrapper .timeline-items{display:flex;flex-direction:column;gap:10px}.techno-generator-wrapper .timeline-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#00ff411a;border:1px solid #00ff41;border-radius:4px}@media (max-width: 768px){.techno-generator-wrapper .container{width:100%;padding:10px;margin-top:50px}.techno-generator-wrapper h1{font-size:1.8em}.techno-generator-wrapper .controls{flex-direction:column;gap:20px}.techno-generator-wrapper .transport{flex-direction:column;gap:15px;width:100%}.techno-generator-wrapper .transport-buttons{display:flex;gap:10px;width:100%;justify-content:center}.techno-generator-wrapper .transport .btn{flex:1;min-width:80px}.techno-generator-wrapper .tempo-control{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}.techno-generator-wrapper .tempo-control input[type=range]{width:100%;max-width:300px}.techno-generator-wrapper .sequencer{padding:15px}.techno-generator-wrapper .sequencer-tracks{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px;padding-bottom:10px}.techno-generator-wrapper .track{display:flex;align-items:center;gap:10px;padding-right:20px;min-width:fit-content}.techno-generator-wrapper .track-label{min-width:70px;padding-right:10px;flex-shrink:0}.techno-generator-wrapper .steps{display:flex;gap:5px;flex-shrink:0}.techno-generator-wrapper .step{min-width:30px;width:30px;height:30px;flex-shrink:0}.techno-generator-wrapper .btn-small{min-width:40px;padding:2px 5px;font-size:.8em;flex-shrink:0}.techno-generator-wrapper .export-buttons{flex-direction:column}.techno-generator-wrapper .voice-controls{padding:15px}.techno-generator-wrapper .voice-input-section{flex-wrap:wrap}.techno-generator-wrapper .voice-input-section label{width:100%;margin-bottom:10px}.techno-generator-wrapper .voice-input-section input{min-width:0;width:calc(100% - 70px)}.techno-generator-wrapper .voice-input-section button{width:60px;flex-shrink:0}.techno-generator-wrapper .voice-mode-selector{width:100%;margin-bottom:15px}.techno-generator-wrapper .voice-mode-selector select{width:100%;max-width:100%}.techno-generator-wrapper .voice-selector{width:100%}.techno-generator-wrapper .voice-selector select{width:100%;max-width:100%;margin-top:5px}.techno-generator-wrapper .voice-words-display{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:5px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.techno-generator-wrapper .voice-step-selector .step-buttons{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.techno-generator-wrapper .pattern-slots{grid-template-columns:repeat(4,1fr);gap:10px}.techno-generator-wrapper .pattern-button{width:50px;height:50px;font-size:14px}.techno-generator-wrapper .pattern-actions{flex-direction:column;width:100%}.techno-generator-wrapper .pattern-actions .btn-small{width:100%;min-width:auto}.techno-generator-wrapper .timeline-controls{flex-direction:column;width:100%;gap:15px}.techno-generator-wrapper .timeline-controls .btn{width:100%}.techno-generator-wrapper .pattern-selector-container{width:100%;flex-direction:column;gap:10px}.techno-generator-wrapper .pattern-selector-container select{width:100%}}.paintings-container{min-height:100vh;background:#0a0a0a;padding-top:100px;padding-bottom:50px;color:#fff;font-family:Proba Pro Regular,sans-serif}.paintings-header{text-align:center;margin-bottom:60px;padding:0 20px}.paintings-header h1{font-size:48px;margin-bottom:20px;background:linear-gradient(45deg,#00ff41,#00a0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,255,65,.3)}.paintings-header p{font-size:18px;color:#999;max-width:600px;margin:0 auto}.carousel-wrapper{max-width:1200px;margin:0 auto;padding:0 40px}.painting-slide{outline:none;padding:20px}.painting-image-container{display:flex;justify-content:center;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:30px;max-height:70vh}.painting-image-container img{width:100%;height:auto;max-height:70vh;object-fit:contain;transition:transform .3s ease}.painting-image-container:hover img{transform:scale(1.02)}.artwork_title{text-align:center;padding:20px;border-radius:10px;margin:0 auto;max-width:400px}.artwork_title h4{font-size:24px;margin-bottom:15px;color:#00ff41;text-transform:capitalize;text-shadow:0 0 10px rgba(0,255,65,.5)}.artwork-details{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:16px;color:#ccc}.artwork-details div{position:relative;padding:5px 15px}.artwork-details div:not(:last-child):after{content:"•";position:absolute;right:-17px;color:#666}.carousel-wrapper .slick-slider{position:relative}.carousel-wrapper .slick-dots{bottom:-40px}.carousel-wrapper .slick-dots li button:before{color:#666;font-size:12px}.carousel-wrapper .slick-dots li.slick-active button:before{color:#00ff41}.carousel-wrapper .slick-prev,.carousel-wrapper .slick-next{z-index:1;width:50px;height:50px}.carousel-wrapper .slick-prev:before,.carousel-wrapper .slick-next:before{font-size:40px;color:#00ff41;opacity:.7}.carousel-wrapper .slick-prev:hover:before,.carousel-wrapper .slick-next:hover:before{opacity:1}.carousel-wrapper .slick-prev{left:-60px}.carousel-wrapper .slick-next{right:-60px}.paintings-info{max-width:800px;margin:80px auto 0;padding:40px;text-align:center;background:#ffffff0d;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.paintings-info h3{font-size:28px;margin-bottom:20px;color:#00ff41}.paintings-info p{font-size:16px;line-height:1.8;color:#ccc}@media (max-width: 992px){.carousel-wrapper{padding:0 20px}.carousel-wrapper .slick-prev{left:10px}.carousel-wrapper .slick-next{right:10px}.carousel-wrapper .slick-prev:before,.carousel-wrapper .slick-next:before{font-size:30px}}@media (max-width: 768px){.paintings-header h1{font-size:36px}.paintings-header p{font-size:16px}.artwork_title h4{font-size:20px}.artwork-details{font-size:14px;gap:15px}.painting-image-container,.painting-image-container img{max-height:50vh}.paintings-info{padding:30px 20px}.paintings-info h3{font-size:24px}}@media (max-width: 480px){.artwork-details{flex-direction:column;gap:10px}.artwork-details div:not(:last-child):after{display:none}}.lyria-container{min-height:100vh;background:linear-gradient(135deg,#1a0033,#4a0080);color:#fff;padding:40px 20px;font-family:Proba Pro Regular,-apple-system,BlinkMacSystemFont,sans-serif}.lyria-header{text-align:center;margin-bottom:50px}.lyria-header h1{font-size:56px;margin-bottom:20px;background:linear-gradient(45deg,#ff6ec7,#c873f4,#7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.lyria-header p{font-size:20px;color:#ccc;letter-spacing:1px}.lyria-main{max-width:1200px;margin:0 auto}.audio-visualizer{background:#0006;border-radius:20px;padding:30px;margin-bottom:40px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.waveform-canvas{width:100%;height:200px;background:#0a0a0a;border-radius:15px;border:1px solid #333}.control-panel{background:#ffffff0d;border-radius:20px;padding:40px;margin-bottom:40px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.style-selector{margin-bottom:40px}.style-selector h3{font-size:24px;margin-bottom:20px;color:#ff6ec7}.style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px}.style-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:15px;padding:20px;cursor:pointer;transition:all .3s ease;text-align:center}.style-card:hover{background:#ffffff1a;transform:translateY(-5px);box-shadow:0 10px 30px #ff6ec74d}.style-card.active{background:linear-gradient(135deg,#ff6ec7,#c873f4);border-color:transparent;transform:scale(1.05)}.style-card h4{font-size:18px;margin-bottom:8px;font-weight:600}.style-card p{font-size:14px;color:#ccc;margin:0}.style-card.active p{color:#fff}.tempo-control{margin-bottom:40px}.tempo-control h3{font-size:24px;margin-bottom:20px;color:#ff6ec7}.tempo-slider{width:100%;height:8px;background:#ffffff1a;border-radius:4px;outline:none;-webkit-appearance:none;appearance:none}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:linear-gradient(135deg,#ff6ec7,#c873f4);border-radius:50%;cursor:pointer;box-shadow:0 4px 15px #ff6ec780;transition:all .2s ease}.tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 6px 20px #ff6ec7b3}.record-controls{display:flex;justify-content:center;margin-bottom:30px}.record-button,.stop-button{display:flex;align-items:center;gap:15px;padding:20px 40px;font-size:20px;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.record-button{background:linear-gradient(135deg,#ff6ec7,#c873f4);color:#fff}.record-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 15px 35px #ff6ec766}.record-button:disabled{opacity:.5;cursor:not-allowed}.stop-button{background:linear-gradient(135deg,#f44,#c00);color:#fff}.stop-button:hover{transform:translateY(-3px);box-shadow:0 15px 35px #f446}.record-icon,.stop-icon{width:20px;height:20px;border-radius:50%;display:inline-block}.record-icon{background:#fff;box-shadow:0 0 10px #ffffff80}.stop-icon{background:#fff;border-radius:4px}.generating-indicator{text-align:center;padding:30px}.spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid rgba(255,255,255,.1);border-top-color:#ff6ec7;border-radius:50%;animation:spin 1s ease-in-out infinite}.generating-indicator p{font-size:18px;color:#ff6ec7;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error-message{background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:10px;padding:20px;text-align:center;margin-top:20px}.error-message p{color:#ff6868;margin:0}.info-section{background:#ffffff0d;border-radius:20px;padding:40px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.info-section h3{font-size:28px;margin-bottom:20px;color:#ff6ec7}.info-section p{font-size:18px;line-height:1.8;color:#ccc;margin-bottom:20px}.info-section ul{list-style:none;padding:0}.info-section li{font-size:16px;margin-bottom:15px;padding-left:30px;position:relative;color:#ccc}.info-section li:before{content:"🎵";position:absolute;left:0}@media (max-width: 768px){.lyria-header h1{font-size:40px}.style-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}.control-panel{padding:20px}.record-button,.stop-button{padding:15px 30px;font-size:16px}}.promptdj-container{min-height:100vh;background:#111;color:#fff;font-family:Google Sans,-apple-system,BlinkMacSystemFont,sans-serif;position:relative;overflow-y:auto;padding-top:80px}.promptdj-wrapper{width:100%;min-height:100vh;position:relative}.api-key-setup{max-width:600px;margin:0 auto;padding:60px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh}.api-key-setup h1{font-size:48px;margin-bottom:30px;background:linear-gradient(45deg,#90f,#ff25f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.api-key-setup p{font-size:18px;color:#ccc;margin-bottom:20px;line-height:1.6}.api-key-setup a{color:#90f;text-decoration:none}.api-key-setup a:hover{text-decoration:underline}.api-key-setup form{margin:40px 0}.api-key-input{width:100%;padding:15px 20px;font-size:16px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;margin-bottom:20px;transition:all .3s ease}.api-key-input:focus{outline:none;border-color:#90f;background:#ffffff26}.api-key-input::placeholder{color:#ffffff80}.api-key-submit{padding:15px 40px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#90f,#ff25f6);border:none;border-radius:50px;color:#fff;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.api-key-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px #90f6}.info{margin-top:60px;padding:30px;background:#ffffff0d;border-radius:15px;text-align:left}.info h3{font-size:24px;margin-bottom:15px;color:#ff25f6}.info p{font-size:16px;line-height:1.8}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#90f;border-radius:50%;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{font-size:18px;color:#ccc}.error{max-width:500px;margin:100px auto;padding:40px;background:#ff00001a;border:2px solid rgba(255,0,0,.3);border-radius:15px;text-align:center}.error h2{font-size:32px;margin-bottom:20px;color:#f44}.error p{font-size:16px;margin-bottom:30px;line-height:1.6}.error button{padding:12px 30px;font-size:16px;background:#f44;border:none;border-radius:25px;color:#fff;cursor:pointer;transition:all .3s ease}.error button:hover{background:#c00;transform:translateY(-2px)}.reset-api-key-btn{position:fixed;bottom:20px;right:20px;padding:10px 20px;font-size:14px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#ccc;cursor:pointer;transition:all .3s ease;z-index:1000}.reset-api-key-btn:hover{background:#fff3;color:#fff}.promptdj-wrapper prompt-dj{width:100%;height:100%}