:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f7fb;font-synthesis:none;--cyan:#35d9ff;--violet:#8f52ff;--amber:#ff8a3d;--line:#ffffff24;--muted:#e8f0ff94;background:#030407;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit}body{background:radial-gradient(circle,#1b253933,#0000 52%),#030407}#app{isolation:isolate;position:relative}#app:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(90deg,#030407c2 0%,#0304077a 48%,#0000 78%);transition:opacity .7s;position:absolute;top:0;bottom:0;left:0;right:0}#app.is-playing:before{opacity:0}#visual-stage{z-index:-3;background:#030407;position:absolute;top:0;bottom:0;left:0;right:0}#visual-stage canvas{width:100%;height:100%;display:block}.grain{z-index:-2;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:.18s steps(2,end) infinite grain;position:absolute;top:-50%;bottom:-50%;left:-50%;right:-50%}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-3%)}50%{transform:translate(-3%,2%)}75%{transform:translate(3%,4%)}to{transform:translate(-2%,-1%)}}.topbar{z-index:10;padding:max(26px, env(safe-area-inset-top)) clamp(24px, 4vw, 68px) 24px;justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.brand{color:#fff;letter-spacing:.19em;align-items:center;gap:11px;font-size:12px;font-weight:760;text-decoration:none;display:inline-flex}.brand>span:last-child span{color:var(--cyan)}.brand-mark{border:1px solid #ffffff94;border-radius:50%;width:20px;height:20px;position:relative}.brand-mark:before,.brand-mark:after{content:"";background:var(--cyan);width:6px;height:6px;box-shadow:0 0 10px var(--cyan);border-radius:50%;margin-top:-3px;position:absolute;top:50%}.brand-mark:before{left:-3px}.brand-mark:after{background:var(--violet);box-shadow:0 0 10px var(--violet);right:-3px}.top-actions{align-items:center;gap:26px;display:flex}.text-button,.sound-toggle,.replace-button{cursor:pointer;background:0 0;border:0}.text-button,.replace-button{color:#ffffffad;letter-spacing:.16em;text-transform:uppercase;padding:8px 0;font-size:10px;font-weight:650;transition:color .18s}.text-button:hover,.replace-button:hover{color:#fff}.text-button:focus-visible{color:#fff}.replace-button:focus-visible{color:#fff}.sound-toggle{width:32px;height:32px;padding:6px}.sound-bars{justify-content:center;align-items:center;gap:2px;height:18px;display:flex}.sound-bars i{background:#fff;width:2px;height:35%;animation:.9s ease-in-out infinite alternate soundbars}.sound-bars i:nth-child(2){height:80%;animation-delay:-.45s}.sound-bars i:nth-child(3){height:55%;animation-delay:-.18s}.sound-bars i:nth-child(4){height:95%;animation-delay:-.62s}.sound-toggle.muted .sound-bars{opacity:.35}.sound-toggle.muted .sound-bars i{height:3px;animation-play-state:paused}@keyframes soundbars{to{height:100%}}.intro{z-index:3;width:min(680px,100vw - 48px);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1),visibility .7s;position:absolute;top:50%;left:clamp(24px,8.4vw,130px);transform:translateY(-46%)}.is-playing .intro{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-42%)}.eyebrow{color:#e1ecff8f;letter-spacing:.18em;text-transform:uppercase;align-items:center;gap:10px;margin:0 0 24px;font-size:10px;font-weight:650;display:flex}.eyebrow span{background:var(--cyan);width:25px;height:1px;box-shadow:0 0 8px var(--cyan)}h1{color:#fff;letter-spacing:-.072em;text-wrap:balance;margin:0;font-size:clamp(54px,7.6vw,124px);font-weight:720;line-height:.84}h1 em{color:#0000;-webkit-text-stroke:1px #c0d7ff99;text-shadow:0 0 42px #3fb7ff14;font-style:normal}.intro-copy{max-width:510px;color:var(--muted);margin:32px 0 34px;font-size:clamp(14px,1.2vw,17px);font-weight:390;line-height:1.65}.intro-actions{flex-wrap:wrap;align-items:center;gap:13px;display:flex}.primary-button,.secondary-button{cursor:pointer;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;min-height:54px;font-size:11px;font-weight:720;transition:transform .18s,background .18s,border-color .18s}.primary-button{isolation:isolate;color:#020407;background:#f3f7ff;border:0;justify-content:space-between;align-items:center;gap:32px;min-width:214px;padding:0 18px 0 25px;display:flex;position:relative}.primary-button>span{z-index:1;position:relative}.primary-button>span:first-child{color:#020407}.button-arrow{color:#fff;background:#0d1118;border-radius:50%;flex:0 0 32px;place-items:center;width:32px;height:32px;font-size:15px;display:grid}.secondary-button{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06090e6b;border:1px solid #ffffff2e;align-items:center;gap:11px;padding:0 24px;display:inline-flex}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.secondary-button:hover{background:#ffffff12;border-color:#ffffff6b}.play-triangle{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:8px solid var(--cyan);width:0;height:0}.format-note{color:#ebf1ff47;letter-spacing:.18em;margin:17px 0 0 3px;font-size:8px;font-weight:620}.player{z-index:8;-webkit-backdrop-filter:blur(24px)saturate(1.15);backdrop-filter:blur(24px)saturate(1.15);background:#04060a8f;border:1px solid #ffffff1a;border-radius:18px;grid-template-columns:minmax(170px,1.3fr) auto minmax(260px,3fr) minmax(150px,1fr) auto;align-items:center;gap:clamp(18px,2.2vw,38px);min-height:88px;padding:18px 23px;animation:.65s cubic-bezier(.2,.8,.2,1) both player-in;display:grid;position:absolute;bottom:clamp(18px,3vw,42px);left:clamp(18px,3vw,48px);right:clamp(18px,3vw,48px);box-shadow:0 20px 70px #0000005c}.player[hidden]{display:none}@keyframes player-in{0%{opacity:0;transform:translateY(25px)}}.track-meta,.pattern-meta{flex-direction:column;gap:6px;min-width:0;display:flex}.track-meta span,.pattern-meta span{color:#ffffff61;letter-spacing:.17em;text-transform:uppercase;font-size:8px;font-weight:650}.track-meta strong,.pattern-meta strong{letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:610;overflow:hidden}.pattern-meta{border-left:1px solid var(--line);padding-left:24px}.pattern-meta strong{color:var(--cyan);text-transform:uppercase}.transport{cursor:pointer;background:#ffffff12;border:1px solid #ffffff45;border-radius:50%;place-items:center;width:48px;height:48px;padding:0;display:grid}.pause-icon{border-left:3px solid #fff;border-right:3px solid #fff;width:10px;height:13px}.transport.paused .pause-icon{border:7px solid #0000;border-left:11px solid #fff;border-right:0;width:0;height:0;margin-left:3px}.timeline-wrap{gap:9px;display:grid}.timeline{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg, var(--cyan) var(--progress,0%), #ffffff29 var(--progress,0%));cursor:pointer;border-radius:2px;width:100%;height:2px;margin:0}.timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #020307;border-radius:50%;width:10px;height:10px;box-shadow:0 0 10px #35d9ffcc}.timeline::-moz-range-thumb{background:#fff;border:2px solid #020307;border-radius:50%;width:8px;height:8px}.timecodes{color:#ffffff57;letter-spacing:.1em;justify-content:space-between;font-size:8px;display:flex}.drop-overlay{z-index:30;opacity:0;visibility:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#020509de;border:1px solid #35d9ff99;border-radius:24px;place-items:center;transition:opacity .18s,visibility .18s;display:grid;position:absolute;top:12px;bottom:12px;left:12px;right:12px}.dragging .drop-overlay{opacity:1;visibility:visible}.drop-overlay>div{flex-direction:column;align-items:center;gap:10px;display:flex}.drop-overlay span{border:1px solid #ffffff4d;border-radius:50%;place-items:center;width:60px;height:60px;margin-bottom:10px;font-size:26px;font-weight:200;display:grid}.drop-overlay strong{letter-spacing:-.04em;font-size:clamp(25px,4vw,54px)}.drop-overlay small{color:var(--muted)}.status{z-index:40;color:#ffcfb5;opacity:0;pointer-events:none;background:#190b07c7;border:1px solid #ff8a3d4d;border-radius:99px;max-width:min(460px,100vw - 32px);padding:11px 16px;font-size:11px;transition:opacity .2s,transform .2s;position:absolute;top:86px;left:50%;transform:translate(-50%,-10px)}.status.visible{opacity:1;transform:translate(-50%)}.sample-modal{color:#fff;background:#07090d;border:1px solid #ffffff26;border-radius:20px;width:min(1060px,100vw - 32px);padding:0;box-shadow:0 35px 110px #000000bf}.sample-modal::backdrop{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#000000c7}.sample-modal[open]{animation:.26s both modal-in}@keyframes modal-in{0%{opacity:0;transform:scale(.97)translateY(10px)}}.modal-header{justify-content:space-between;align-items:center;padding:18px 21px;display:flex}.modal-header>div{flex-direction:column;gap:5px;display:flex}.modal-header span{color:var(--cyan);letter-spacing:.17em;text-transform:uppercase;font-size:8px;font-weight:700}.modal-header strong{font-size:12px;font-weight:590}.modal-header button{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;width:34px;height:34px;font-size:22px;font-weight:200}.modal-actions{flex-direction:row;align-items:center;gap:12px;display:flex}.modal-download{border:1px solid var(--line);height:34px;color:var(--text);letter-spacing:.05em;text-transform:uppercase;background:0 0;border-radius:17px;align-items:center;gap:7px;padding:0 15px;font-size:11px;font-weight:640;text-decoration:none;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.modal-download:hover{border-color:var(--cyan);color:var(--cyan);background:#3cd2ff12}.modal-download svg{flex-shrink:0}.sample-modal video{background:#000;border-radius:0 0 19px 19px;width:100%;max-height:75vh;display:block}:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}@media (max-width:820px){.intro{transform:translateY(-43%)}.intro-copy{max-width:470px}.player{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;min-height:auto;padding:14px}.track-meta{border-bottom:1px solid var(--line);grid-column:1/-1;padding:0 3px 9px}.transport{width:42px;height:42px}.timeline-wrap{grid-column:2}.pattern-meta{grid-column:3;padding-left:14px}.replace-button{display:none}}@media (max-width:560px){#app:before{background:linear-gradient(#03040714 10%,#030407a3 34%,#030407d1 72%,#03040733 92%)}.topbar{padding-inline-start:20px;padding-inline-end:20px}.top-actions{gap:16px}.intro{width:calc(100vw - 44px);left:22px}h1{font-size:clamp(49px,16vw,74px)}.intro-copy{margin-block-start:25px;margin-block-end:27px;font-size:13px}.intro-actions{flex-direction:column;align-items:stretch}.primary-button,.secondary-button{justify-content:center;width:100%}.primary-button{justify-content:space-between}.format-note{text-align:center}.player{bottom:12px;left:12px;right:12px}.pattern-meta{max-width:116px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}