@charset "UTF-8";
@font-face{font-family:"Space Grotesk";src:url("./fonts/space-grotesk-variable.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./fonts/ibm-plex-mono-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--bg:#171a18;--panel:#222623;--text:#f1f0e8;--muted:#a0a49b;--line:#373b35;--acid:#d8f783;--ink:#20241c;--sans:"Space Grotesk",Arial,sans-serif;--mono:"IBM Plex Mono",Consolas,monospace;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acid);outline-offset:5px}button:disabled{cursor:wait;opacity:.65}::selection{background:var(--acid);color:var(--ink)}.wrap{max-width:1360px;margin:0 auto;padding-left:56px;padding-right:56px}.header{height:111px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.wordmark{font-size:45px;font-weight:700;letter-spacing:-2.8px;line-height:1}.wordmark>span{display:inline-block;font-size:12px;letter-spacing:0;vertical-align:top;margin:6px 0 0 5px}.header nav{display:flex;gap:32px;font-size:13px}.header nav a{padding:10px 0}.header nav a:hover{color:var(--acid)}.header nav span{color:var(--muted);margin-left:4px}.header-note{font:10px var(--mono);color:var(--muted);display:flex;align-items:center;gap:9px}.header-note i,.machine-status i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid)}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding-top:69px;padding-bottom:65px}.eyebrow{font:10px var(--mono);letter-spacing:1.1px;margin:0 0 22px;display:flex;align-items:center;gap:10px}.tiny-cross{font-size:20px;line-height:1;color:var(--acid)}h1{font-size:clamp(55px,6.3vw,88px);font-weight:500;letter-spacing:-.055em;line-height:1.03;margin:36px 0 27px}h1 em{font-weight:500;font-style:normal;color:var(--acid);letter-spacing:inherit}.hero-description{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 29px}.hero-cta{display:inline-flex;align-items:center;gap:40px;background:var(--acid);color:var(--ink);padding:17px 22px;font-size:13px;font-weight:600;transition:background .2s,transform .2s}.hero-cta span{font-size:23px;line-height:.8}.hero-cta:hover{background:#e9ffb9;transform:translateY(-2px)}.hero-caption{display:flex;flex-wrap:wrap;gap:7px 15px;color:#7f857a;font:10px var(--mono);letter-spacing:.5px;margin-top:38px}
.record-scene{position:relative;min-height:431px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#222722;border:1px solid #3b4436;background-image:linear-gradient(#a6b59809 1px,transparent 1px),linear-gradient(90deg,#a6b59809 1px,transparent 1px);background-size:32px 32px}.scene-top,.scene-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;font:10px var(--mono);letter-spacing:.5px;z-index:2;color:#b0b8a5}.scene-top{top:20px}.scene-bottom{bottom:20px}.record-orbit{position:absolute;border:1px solid #59654870;border-radius:50%;width:380px;height:380px;transform:rotate(-28deg) scaleY(.8)}.orbit-two{transform:rotate(28deg) scaleY(.8);width:430px;height:430px}.vinyl{width:319px;height:319px;border-radius:50%;position:relative;background:repeating-radial-gradient(circle at center,#151815 0 2px,#2e332a 3px,#151815 4px,#151815 5px);box-shadow:14px 17px 26px #0007,inset 0 0 0 2px #414839;display:grid;place-items:center;transform:rotate(-19deg);animation:spin 12s linear infinite;animation-play-state:paused}.vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,transparent 10%,#ffffff0d 15%,transparent 24%,transparent 57%,#ffffff0a 65%,transparent 75%);pointer-events:none}.record-label{height:137px;width:137px;background:var(--acid);border-radius:50%;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.record-label span{font:6px var(--mono);letter-spacing:1px}.record-label strong{font-size:73px;letter-spacing:-9px;line-height:1;margin:4px 0 11px;padding-right:9px}.record-label i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid #a4bd62;top:64px;left:64px}.scene-star{position:absolute;color:var(--acid);z-index:2}.star-one{top:54px;right:29px;font-size:52px}.star-two{bottom:61px;left:33px;font:28px var(--mono)}body.playing .vinyl{animation-play-state:running}@keyframes spin{to{transform:rotate(341deg)}}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:17px 0;color:var(--muted)}.ticker>div{display:flex;gap:33px;align-items:center;justify-content:center;white-space:nowrap;font:11px var(--mono);letter-spacing:2px}.ticker span{color:var(--acid);font-size:22px;line-height:12px}.playground{padding-top:24px;scroll-margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:31px}.section-heading .eyebrow{color:var(--muted);margin-bottom:14px;font-size:10px}h2{font-size:36px;font-weight:400;letter-spacing:-1.3px;line-height:1.12;margin:0}.section-heading>p{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 2px}.machine{background:#d9dfcd;color:var(--ink);padding:25px 28px 20px;box-shadow:0 6px 0 #0c0e0b;border:1px solid #ebefdf;border-radius:3px}.machine-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:23px;border-bottom:1px solid #aeb6a1}.machine-brand{font-weight:700;font-size:25px;letter-spacing:-1px}.machine-brand>span{font:9px var(--mono);letter-spacing:1.4px;margin-left:11px;vertical-align:middle}.machine-status{font:10px var(--mono);display:flex;align-items:center;gap:8px;letter-spacing:.8px}.machine-status i{background:#7f8874}.machine-status.active i{background:#5b7a28;box-shadow:0 0 0 3px #a8bc89}.transport{display:grid;grid-template-columns:58px 155px 1fr 135px 135px;gap:24px;align-items:center;padding:26px 0}.play-button{border:1px solid #1d221a;border-bottom:4px solid #1d221a;border-radius:50%;height:55px;width:55px;background:var(--ink);color:var(--acid);display:grid;place-items:center;transition:transform .1s}.play-button:hover{background:#333c29}.play-button:active{transform:translateY(2px)}.play-button svg{height:23px;width:23px;fill:currentColor}.tempo-control label{font:10px var(--mono);display:flex;align-items:baseline;gap:8px}.tempo-control output{font:30px var(--mono);letter-spacing:-2px}.tempo-control label>span{font-size:8px;color:#66705c}.dial-control label{display:flex;justify-content:space-between;gap:10px;font:10px var(--mono);letter-spacing:.3px;margin-bottom:17px}.dial-control output{color:#626e55}.transport input{width:100%;height:15px;margin:8px 0 0;accent-color:var(--ink);cursor:pointer;background:transparent}.transport input:focus-visible{outline-color:#2b4221}.scope{height:67px;position:relative;background:#232a22;border:3px solid #bdc6ae;border-radius:2px;overflow:hidden}.scope canvas{display:block;width:100%;height:100%}.scope>span{position:absolute;right:8px;bottom:6px;font:6px var(--mono);color:#a9be8e;letter-spacing:1px}.sequencer-scroll{overflow-x:auto;padding:3px 2px 6px;margin:0 -2px}.sequencer{min-width:710px;display:grid;grid-template-columns:95px repeat(16,minmax(21px,1fr));gap:7px}.step-number{font:10px var(--mono);color:#78816d;display:grid;place-items:center;height:20px}.step-number.current{color:#1d2912;font-weight:700}.track-name{border:0;background:transparent;color:var(--ink);padding:0;display:flex;gap:9px;align-items:center;justify-content:flex-start;text-align:left;font:10px var(--mono);letter-spacing:.3px}.track-name:before{content:"";width:5px;height:5px;background:var(--ink);border-radius:50%}.track-name.muted{opacity:.4;text-decoration:line-through}.pad{height:36px;border:1px solid #aab49d;border-bottom:3px solid #9ca78d;border-radius:2px;background:#bec8b0;transition:background .08s;position:relative}.pad.beat-start{background:#c9d1be}.pad:hover{background:#aebd9c}.pad.on{background:#303b2a;border-color:#303b2a;border-bottom-color:#1d2618}.pad.on:after{content:"";position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--acid);border-radius:50%}.pad.current{box-shadow:inset 0 0 0 2px #596e3f;background:#a9be8f}.pad.current.on{background:#728e40}.pad:focus-visible,.track-name:focus-visible{outline-color:#263c1c;outline-offset:1px}.machine-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:21px;padding-top:16px;border-top:1px solid #b4bda8;font:10px var(--mono);letter-spacing:.4px}.machine-footer>span{display:flex;align-items:center;gap:9px}.live-dot{background:#4d6039;width:5px;height:5px}.machine-divider{color:#8f9a80;margin:0 4px}.machine-footer>div{display:flex;gap:20px}.machine-footer button{font:10px var(--mono);border:0;padding:7px 0;background:transparent;color:var(--ink)}.machine-footer button:hover{text-decoration:underline}.machine-footer button:focus-visible{outline-color:var(--ink)}.machine-footer button span{font-size:15px;margin-right:5px}.instrument-note{display:flex;align-items:baseline;gap:8px;font-size:11px;line-height:1.7;color:var(--muted);margin:20px 0 0}.instrument-note>span:first-child{color:var(--acid)}.keyboard-hint{font:10px var(--mono);letter-spacing:.3px;white-space:nowrap;margin-left:auto;color:#7e8776}.audio-error{font-size:13px;color:#ffd3b0;border-left:2px solid #d9a67b;padding:10px 14px;line-height:1.5}
.presets{padding-top:64px;padding-bottom:35px}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.preset-card{background:#222623;border:1px solid #3d4438;color:var(--text);padding:19px 20px 20px;text-align:left;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}.preset-card:hover{transform:translateY(-4px);border-color:#a0b280}.preset-card.selected{border-color:var(--acid)}.preset-top{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:.5px;color:var(--muted)}.preset-arrow{font:22px var(--sans);color:var(--acid)}.preset-art{height:114px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:16px 0 15px;position:relative}.night-art{gap:10px}.night-art i{height:91px;width:12px;background:var(--acid);transform:skewY(-22deg)}.night-art i:nth-child(2n){height:60px}.night-art i:nth-child(3n){height:34px}.night-art i:nth-child(4n){height:75px}.slow-art{gap:0}.slow-art i{width:75px;height:75px;border:1px solid #c4b8e6;border-radius:50%;margin:0 -19px;background:#c4b8e608}.slow-art i:nth-child(2){height:99px;width:99px}.slow-art i:nth-child(3){height:99px;width:99px}.pulse-art{gap:10px;transform:skewX(-17deg)}.pulse-art i{height:87px;width:18px;background:#e5a17d}.pulse-art i:nth-child(2){height:62px}.pulse-art i:nth-child(3){height:37px}.pulse-art i:nth-child(4){height:62px}.preset-name{font-size:23px;letter-spacing:-.5px;margin:0 0 11px}.preset-bottom{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);line-height:1.4}.preset-bottom>span:last-child{font:10px var(--mono);white-space:nowrap;padding-top:1px}.about{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:center;padding-top:53px;padding-bottom:63px;border-top:1px solid var(--line)}.about-symbol{font-size:140px;line-height:1;text-align:center;color:var(--acid)}.about .eyebrow{color:var(--muted);font-size:9px;margin-bottom:18px}.about h2{font-size:35px}.about p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);max-width:600px;margin:21px 0 0}.about p.about-fine{font-size:11px;color:#828b79;margin-top:16px}.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;padding-top:29px;padding-bottom:34px}.footer .wordmark{font-size:34px}.footer>span{font:10px var(--mono);letter-spacing:.5px;color:var(--muted)}.footer>a:last-child{font-size:11px}.footer>a:last-child span{margin-left:25px;color:var(--acid);font-size:20px}
@media(min-width:1600px){.hero{padding-top:85px;padding-bottom:85px}.record-scene{min-height:460px}}
@media(max-width:1100px){.wrap{padding-left:32px;padding-right:32px}.header-note{display:none}.hero{gap:30px;padding-top:50px;padding-bottom:50px}h1{font-size:clamp(48px,6.5vw,70px)}.record-scene{min-height:365px}.vinyl{width:270px;height:270px}.record-orbit{width:320px;height:320px}.orbit-two{width:360px;height:360px}.hero-caption{font-size:7px;gap:6px}.transport{grid-template-columns:52px 120px 1fr 110px;gap:18px}.volume-control{grid-column:4;grid-row:1;margin-top:64px}.dial-control:not(.volume-control){margin-bottom:40px}.transport{min-height:145px}.scope{height:77px}.preset-card{padding:16px}.preset-bottom{flex-wrap:wrap}.machine{padding-left:22px;padding-right:22px}.keyboard-hint{display:none}}
@media(max-width:760px){.wrap{padding-left:22px;padding-right:22px}.header{height:85px;gap:15px}.wordmark{font-size:38px}.header nav{gap:18px;font-size:11px}.header nav a:last-child{display:none}.hero{grid-template-columns:1fr;padding-top:39px;padding-bottom:31px;gap:33px}.hero .eyebrow{font-size:8px;letter-spacing:.8px}h1{font-size:clamp(46px,11.8vw,80px);letter-spacing:-.055em;margin:27px 0 23px}h1 em{letter-spacing:inherit}.hero-description{font-size:14px}.hero-cta{font-size:12px;padding:16px 19px;gap:35px}.hero-caption{margin-top:24px;font-size:7px;gap:10px}.record-scene{min-height:332px}.vinyl{height:255px;width:255px}.record-label{height:116px;width:116px}.record-label strong{font-size:60px}.record-label span{font-size:5px}.record-label i{left:54px;top:54px}.scene-top,.scene-bottom{font-size:7px;left:15px;right:15px}.star-one{top:43px;right:17px;font-size:44px}.star-two{bottom:45px;left:20px}.ticker{padding:14px 0}.ticker>div{font-size:9px;gap:24px}.playground{padding-top:24px}.section-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:24px}h2{font-size:30px}.section-heading>p{font-size:12px}.section-heading>p br{display:none}.section-heading .eyebrow{font-size:8px;margin-bottom:12px}.machine{padding:19px 15px 15px}.machine-heading{padding-bottom:17px}.machine-brand{font-size:22px}.machine-brand>span{font-size:7px;margin-left:6px}.machine-status{font-size:8px;letter-spacing:0;gap:5px}.transport{grid-template-columns:49px 1fr 1fr;gap:16px 18px;padding:21px 0;min-height:0}.play-button{height:47px;width:47px}.tempo-control{grid-column:2}.scope{grid-column:3;height:56px}.dial-control:not(.volume-control){grid-column:2;grid-row:2;margin:0}.volume-control{grid-column:3;grid-row:2;margin:0}.dial-control label{font-size:9px;margin-bottom:5px}.transport input{margin-top:4px}.tempo-control output{font-size:27px}.tempo-control label{gap:5px;font-size:7px}.scope>span{display:none}.sequencer{min-width:632px;gap:6px;grid-template-columns:80px repeat(16,minmax(21px,1fr))}.pad{height:34px}.track-name{font-size:9px;gap:6px}.machine-footer{font-size:8px;flex-wrap:wrap;gap:9px;padding-top:12px;margin-top:15px}.machine-footer>div{gap:20px}.machine-footer button{font-size:10px}.instrument-note{font-size:10px;align-items:flex-start;margin-top:17px}.presets{padding-top:44px;padding-bottom:24px}.preset-grid{grid-template-columns:1fr;gap:13px}.preset-card{position:relative;padding:19px 20px;min-height:173px}.preset-art{position:absolute;right:17px;top:41px;width:125px;height:80px;margin:0;opacity:.6;transform:scale(.8)}.preset-name{font-size:25px;margin-top:23px;z-index:1;max-width:63%}.preset-bottom{position:relative;z-index:1;justify-content:flex-start;gap:16px;font-size:10px;margin-top:7px}.preset-top{position:relative;z-index:1}.night-art{gap:7px}.night-art i{flex-shrink:0;width:9px}.slow-art i{flex-shrink:0}.pulse-art{transform:skewX(-17deg) scale(.8)}.about{grid-template-columns:1fr;gap:12px;padding-top:34px;padding-bottom:36px}.about-symbol{text-align:left;font-size:76px}.about h2{font-size:29px}.about p:not(.eyebrow){font-size:13px;margin-top:16px}.about p.about-fine{font-size:10px}.footer{padding-top:25px;padding-bottom:28px;flex-wrap:wrap;gap:20px}.footer>span{order:3;width:100%;font-size:7px}.footer>a:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}