@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{--lime:#a8ff36;--ink:#f1f3ef;--muted:#929b95;--night:#050706;--line:rgba(255,255,255,.12);--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{background:var(--night);touch-action:manipulation}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 72% 48%,rgba(90,140,100,.13),transparent 32%),#050706;font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden;touch-action:manipulation}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(circle,#dffff0 0 1px,transparent 1.3px);background-size:109px 97px;background-position:18px 33px}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;padding:12px 16px;background:#fff;color:#111;transform:translateY(-160%);transition:transform .2s}.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,.vinyl:focus-visible{outline:3px solid var(--lime);outline-offset:5px}
.scratch-header{height:78px;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.scratch-header img{width:76px;display:block}.scratch-header nav{display:flex;gap:30px}.scratch-header nav a{font-size:11px;color:#9da59f}
.scratch-shell{min-height:calc(100vh - 78px);padding:clamp(55px,7vw,110px) clamp(22px,7vw,110px);display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;align-items:center;position:relative;z-index:1}
.lab-name{margin:0 0 25px;color:var(--lime);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.scratch-copy h1{margin:0;font:500 clamp(55px,6.8vw,105px)/.91 'Space Grotesk','DM Sans',Arial,sans-serif;letter-spacing:-.065em}.scratch-copy h1 em{font-family:var(--serif);font-weight:400;color:#d8ffae}
.scratch-copy>p:not(.lab-name,.audio-status){max-width:520px;margin:30px 0;color:var(--muted);font-size:16px;line-height:1.75}
.transport{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:34px}
.start-button{min-width:178px;height:56px;padding:0 22px;border:0;background:var(--lime);color:#14200d;display:flex;align-items:center;justify-content:center;gap:14px;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;cursor:pointer}.start-button.is-playing{background:#e8ece6}.play-symbol{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}.is-playing .play-symbol{width:9px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.volume-control{display:grid;gap:8px}.volume-control label{color:#69716c;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.volume-control input{width:150px;accent-color:var(--lime)}
.track-library{max-width:520px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:end;gap:16px;flex-wrap:wrap}
.upload-button{height:46px;padding:0 17px;border:1px solid #465048;display:inline-flex;align-items:center;gap:10px;color:#c7cec9;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}.upload-button:hover{border-color:var(--lime);color:var(--lime)}.upload-button span{color:var(--lime);font-size:18px;line-height:1}.upload-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.track-select-wrap{display:grid;gap:7px;min-width:210px;flex:1}.track-select-wrap label{color:#69716c;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.track-select-wrap select{width:100%;height:46px;padding:0 34px 0 13px;border:1px solid #384039;border-radius:0;background:#090c0a;color:#dbe0dc;color-scheme:dark;font:11px 'DM Sans',Arial,sans-serif}.track-select-wrap select option{background:#0a0e0b;color:#e4e9e5}.track-select-wrap select option:checked{background:#26321f;color:var(--lime)}
.privacy-note{margin:10px 0 0!important;color:#555e58!important;font-size:9px!important;line-height:1.5!important}
.audio-status{min-height:20px;margin-top:18px;color:#666f69;font-size:11px;white-space:pre-line}
.turntable{display:grid;place-items:center;position:relative;min-width:0;touch-action:manipulation}
.deck-surface{width:min(52vw,720px);aspect-ratio:1.34;position:relative;border:1px solid #414943;border-radius:18px;background:linear-gradient(145deg,#272d29 0,#0a0d0b 58%,#161b18 100%);box-shadow:-35px 45px 90px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.16);transform:perspective(1100px) rotateX(7deg)}
.platter{position:absolute;width:66%;aspect-ratio:1;left:7%;top:8%;border-radius:50%;padding:2.5%;background:repeating-radial-gradient(circle,#151916 0 4px,#303632 5px 6px);box-shadow:0 0 0 4px #0b0d0c,0 0 0 6px #4b534e,0 20px 45px #000}
.vinyl{width:100%;height:100%;position:relative;border-radius:50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;will-change:transform;filter:brightness(1.35);box-shadow:0 12px 30px #000}.vinyl:focus-visible{outline:2px solid rgba(168,255,54,.7);outline-offset:-7px}.vinyl.is-scratching{cursor:grabbing;filter:brightness(1.55) drop-shadow(0 0 12px rgba(168,255,54,.12))}.vinyl img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.touch-ring{position:absolute;inset:8%;border-radius:50%;border:1px solid transparent;transition:border-color .2s,box-shadow .2s}.vinyl.is-scratching .touch-ring{border-color:rgba(168,255,54,.38);box-shadow:inset 0 0 30px rgba(168,255,54,.08)}
.tonearm{position:absolute;right:10%;top:12%;width:19%;height:60%;transform:rotate(-9deg);transform-origin:80% 10%;transition:transform 1.05s cubic-bezier(.22,.75,.2,1)}.audio-is-playing .tonearm{transform:rotate(13deg);transition-delay:.12s}.tonearm::before{content:'';position:absolute;right:0;top:0;width:48px;height:48px;border-radius:50%;background:#262c28;border:2px solid #626a65;box-shadow:0 8px 18px #000}.tonearm span{position:absolute;right:30px;top:32px;width:8px;height:74%;border-radius:5px;background:linear-gradient(90deg,#202420,#aab0ac,#343a36);transform:rotate(7deg);transform-origin:top}.tonearm span::after{content:'';position:absolute;left:-7px;bottom:-12px;width:22px;height:30px;background:#171b18;border:1px solid #545b56;border-radius:3px}
.deck-play-button{position:absolute;z-index:5;left:5%;bottom:7%;width:58px;height:58px;padding:0;border:1px solid rgba(255,205,54,.75);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 42% 34%,#303733,#0a0d0b 68%);color:#ffd044;box-shadow:0 7px 16px #000,0 0 10px rgba(255,205,54,.2),inset 0 0 10px rgba(255,205,54,.08);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:deck-pulse-pause 1.8s ease-in-out infinite}.deck-play-button::after{content:'';position:absolute;inset:-5px;border:1px solid #323a35;border-radius:50%}.deck-play-icon{width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}.deck-play-button span:last-child{position:absolute;top:calc(100% + 8px);color:#c3a541;font:600 7px 'Space Grotesk';letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.deck-play-button.is-playing{color:var(--lime);border-color:rgba(168,255,54,.78);box-shadow:0 7px 16px #000,0 0 15px rgba(168,255,54,.3),inset 0 0 13px rgba(168,255,54,.1);animation-name:deck-pulse-play}.deck-play-button.is-playing span:last-child{color:var(--lime)}.deck-play-button.is-playing .deck-play-icon{width:11px;height:13px;margin:0;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}@keyframes deck-pulse-pause{50%{border-color:rgba(255,205,54,.38);box-shadow:0 7px 16px #000,0 0 23px rgba(255,205,54,.36),inset 0 0 15px rgba(255,205,54,.13)}}@keyframes deck-pulse-play{50%{border-color:rgba(168,255,54,.42);box-shadow:0 7px 16px #000,0 0 25px rgba(168,255,54,.4),inset 0 0 16px rgba(168,255,54,.15)}}
.deck-controls{position:absolute;right:7%;bottom:8%;width:22%;display:grid;gap:18px}.speed-meter{padding:12px;border:1px solid #39403b;background:#090c0a;display:flex;justify-content:space-between;align-items:center}.speed-meter span{color:#636b66;font-size:8px;text-transform:uppercase;letter-spacing:.12em}.speed-meter output{color:var(--lime);font:600 12px 'Space Grotesk'}
.level-meter{height:58px;display:flex;align-items:flex-end;gap:4px;padding:8px;border:1px solid #333a35;background:#080a09}.level-meter i{flex:1;height:10%;background:#38403a;transition:height .06s,background .06s}.level-meter i.is-on{background:var(--lime);box-shadow:0 0 7px rgba(168,255,54,.5)}
.gesture-hint{margin:25px 0 0;color:#707873;font-size:10px;text-transform:uppercase;letter-spacing:.16em}.gesture-hint span{color:var(--lime);margin-right:10px}
.scratch-footer{padding:28px clamp(22px,5vw,72px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#5f6762;font-size:10px;position:relative;z-index:1}.scratch-footer a{color:#9da59f}
@media(max-width:900px){.scratch-shell{grid-template-columns:1fr;padding-top:75px}.scratch-copy{max-width:650px}.deck-surface{width:min(88vw,680px)}}
@media(max-width:600px){.scratch-header{height:68px;padding:0 20px}.scratch-header nav{gap:16px}.scratch-header nav a{font-size:9px}.scratch-shell{padding:65px 20px}.scratch-copy h1{font-size:58px}.deck-surface{width:94vw;border-radius:11px}.transport{align-items:flex-start;flex-direction:column}.track-library{align-items:stretch;flex-direction:column}.upload-button{justify-content:center}.platter{width:69%;left:5%}.tonearm{right:7%}.scratch-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.tonearm{transition:none}}