@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;700&display=swap";.visualizer-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 17px 16px;font-family:DM Mono,monospace;font-size:9px;letter-spacing:.1em;color:var(--muted)}.visualizer-options>span{margin-right:6px}.visualizer-options button{border:1px solid #48554f;background:transparent;color:var(--muted);padding:6px 9px;font:inherit;font-size:9px;letter-spacing:.08em;transition:background .2s,color .2s,border-color .2s}.visualizer-options button:hover,.visualizer-options button.is-active{border-color:var(--accent);background:var(--accent);color:#17201d}@media(max-width:560px){.visualizer-options{padding-left:14px}}.player .visualizer-options{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}.visualizer-options__label{margin:0}.visualizer-options__buttons{display:grid;grid-template-columns:repeat(6,max-content);gap:8px}.visualizer-stage{position:relative;overflow:hidden}.drop-logo-2d{position:absolute;top:50%;left:50%;width:min(43%,290px);height:auto;overflow:visible;filter:drop-shadow(11px 11px 0 rgb(16 24 23 / 38%));transform:translate(-50%,-50%) rotate(var(--drop-logo-rotation, 0deg)) scale(var(--drop-logo-scale, .92));transform-origin:center;pointer-events:none}.drop-logo-2d__background{fill:#ffe100}.drop-logo-2d__frame{fill:none;stroke:#ff4330;stroke-width:.65;opacity:.42}.drop-logo-2d__tile{fill:#ff4330;transform-box:fill-box;transform-origin:center;will-change:transform}.drop-logo-2d__tile--d{transform:translate(var(--drop-d-x, 0),var(--drop-d-y, 0)) scale(var(--drop-d-scale, 1)) rotate(var(--drop-d-rotate, 0deg))}.drop-logo-2d__tile--r{transform:translate(var(--drop-r-x, 0),var(--drop-r-y, 0)) scale(var(--drop-r-scale, 1)) rotate(var(--drop-r-rotate, 0deg))}.drop-logo-2d__tile--o{transform:translate(var(--drop-o-x, 0),var(--drop-o-y, 0)) scale(var(--drop-o-scale, 1)) rotate(var(--drop-o-rotate, 0deg))}.drop-logo-2d__tile--p{transform:translate(var(--drop-p-x, 0),var(--drop-p-y, 0)) scale(var(--drop-p-scale, 1)) rotate(var(--drop-p-rotate, 0deg))}.drop-logo-3d{width:min(39%,265px);filter:drop-shadow(4px 5px 0 #b52e22) drop-shadow(8px 10px 0 #7d291f) drop-shadow(14px 17px 0 rgb(0 0 0 / 38%));transform:translate(-50%,-50%) perspective(720px) rotateX(var(--drop-3d-pitch, -10deg)) rotateY(var(--drop-3d-yaw, 0deg)) rotate(var(--drop-3d-roll, 0deg)) scale(var(--drop-3d-scale, .86))}.drop-logo-rain{width:min(48%,320px);opacity:var(--drop-rain-opacity, .1);filter:grayscale(.15) drop-shadow(0 0 24px rgb(255 225 0 / 18%));transform:translate(-50%,-50%) scale(var(--drop-rain-scale, .82))}.drop-logo-bounce{top:var(--drop-bounce-y, 34%);left:var(--drop-bounce-x, 28%);width:min(28%,190px);filter:drop-shadow(7px 8px 0 rgb(0 0 0 / 34%));transform:translate(-50%,-50%) rotate(var(--drop-bounce-rotate, 0deg)) scale(var(--drop-bounce-scale, .9))}.drop-logo-bounce .drop-logo-2d__background{fill:var(--drop-bounce-bg, #ffe100)}.drop-logo-bounce .drop-logo-2d__frame{stroke:var(--drop-bounce-fg, #ff4330)}.drop-logo-bounce .drop-logo-2d__tile{fill:var(--drop-bounce-fg, #ff4330)}.drop-logo-rain .drop-logo-2d__tile,.drop-logo-bounce .drop-logo-2d__tile{transform:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.file-input{display:none}button.drop-zone{width:100%;margin:0;background:transparent;text-align:left}.drop-copy{display:flex;flex-direction:column}.drop-hint{margin-top:5px;color:var(--muted);font-family:DM Mono,monospace;font-size:10px}@media(max-width:760px){.player .visualizer-options{grid-template-columns:1fr;gap:8px}.visualizer-options__buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.visualizer-options button{min-height:44px}.drop-logo-2d{width:min(52%,235px)}.drop-logo-3d{width:min(47%,215px)}.drop-logo-rain{width:min(58%,250px)}.drop-logo-bounce{width:min(28%,150px)}}@media(max-width:560px){.app-shell footer{display:flex;flex-direction:column;gap:6px}}.effect-controls{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));align-items:end;gap:18px;padding:17px 20px 20px;border-top:1px solid var(--line);color:var(--muted);font-family:DM Mono,monospace;font-size:9px;letter-spacing:.08em}.effect-controls__title{grid-column:1 / -1;align-self:center;color:var(--accent)}.effect-control{display:grid;grid-template-columns:1fr auto;gap:8px;min-width:0}.effect-control output{color:var(--ink)}.effect-control__description{grid-column:1 / -1;min-height:32px;color:var(--muted);font-family:Manrope,sans-serif;font-size:11px;line-height:1.45;letter-spacing:0}.effect-control input{grid-column:1 / -1;width:100%}.effect-controls__reset{min-height:32px;border:1px solid #48554f;background:transparent;color:var(--muted);padding:6px 10px;font:inherit;letter-spacing:inherit}.effect-controls__reset:hover{border-color:var(--accent);color:var(--accent)}.audio-sources{margin:72px 0 100px}.audio-sources__heading{display:flex;justify-content:space-between;margin-bottom:12px;color:var(--muted);font-family:DM Mono,monospace;font-size:9px;letter-spacing:.1em}.audio-sources__heading span:first-child{color:var(--accent)}.audio-sources__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.live-input{display:flex;align-items:center;gap:18px;min-width:0;padding:22px 24px;border:1px dashed #52615b;background:transparent;color:var(--ink);text-align:left;transition:border-color .2s,background .2s}.live-input:hover,.live-input.is-active{border-color:var(--accent);background:#17231f}.live-input:disabled{cursor:wait;opacity:.65}.live-input__mark,.live-input__status{color:var(--accent);font-family:DM Mono,monospace}.live-input__mark{font-size:22px}.live-input__status{margin-left:auto;font-size:9px;letter-spacing:.1em}@media(max-width:900px){.effect-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.effect-controls__title,.effect-controls__reset{grid-column:1 / -1;justify-self:start}.effect-controls__reset{min-height:44px}}@media(max-width:700px){.audio-sources__options{grid-template-columns:1fr}.audio-sources{margin:52px 0 72px}}:root{font-family:Manrope,sans-serif;color:#e9ece5;background:#101817;font-synthesis:none;--bg:#101817;--ink:#e9ece5;--muted:#89948c;--line:#33413d;--accent:#e1ad55;--hot:#ef5f4b}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:0 clamp(22px,6vw,94px);background:radial-gradient(circle at 78% 18%,#20312b 0,#101817 32rem)}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-family:DM Mono,monospace}.brand{color:var(--ink);font-size:17px;letter-spacing:.08em;text-decoration:none}.brand span{margin:0 8px;color:var(--accent)}.topbar-note,.eyebrow,.visualizer-label,.track-index,.volume,.drop-zone p,footer{font-family:DM Mono,monospace}.topbar-note{color:var(--muted);font-size:10px;letter-spacing:.14em}.intro{max-width:760px;padding:clamp(70px,10vw,132px) 0 78px}.eyebrow{margin:0 0 22px;color:var(--accent);font-size:11px;letter-spacing:.12em}.intro h1{margin:0;font-size:clamp(56px,9vw,124px);font-weight:500;line-height:.91;letter-spacing:-.06em}.intro h1 em{color:var(--hot);font-style:normal}.lede{max-width:410px;margin:36px 0 0;color:#aab4ac;font-size:17px;line-height:1.6}.player{position:relative;border:1px solid var(--line);background:#15211e;box-shadow:18px 18px #0c1211}.visualizer-wrap{padding:14px 14px 0}.visualizer{width:100%;height:min(52vw,470px);overflow:hidden}.visualizer canvas{display:block;width:100%!important;height:100%!important}.visualizer-label{display:flex;justify-content:space-between;padding:13px 3px;color:var(--muted);font-size:9px;letter-spacing:.1em}.visualizer-label span:last-child{color:var(--accent)}.controls{display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(260px,1.7fr) 100px;gap:24px;align-items:center;padding:27px 28px;border-top:1px solid var(--line)}.track-info{display:flex;align-items:center;gap:15px;min-width:0}.track-index{color:var(--accent);font-size:12px}.track-info strong,.track-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info strong{font-size:14px;font-weight:500}.track-info small{margin-top:5px;color:var(--muted);font-size:10px}.play-button{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent);border-radius:50%;background:var(--accent);color:#17201d;font-size:17px}.play-button:disabled{cursor:not-allowed;opacity:.35}.timeline{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:DM Mono,monospace;font-size:10px}.timeline input{width:100%}.volume{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:9px;letter-spacing:.1em}.volume input{width:66px}.player audio{display:none}input[type=range]{height:4px;accent-color:var(--accent);cursor:pointer}.drop-zone{display:flex;align-items:center;gap:18px;margin:72px 0 100px;padding:22px 24px;border:1px dashed #52615b;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}.drop-zone:hover{border-color:var(--accent);background:#17231f}.drop-zone input{display:none}.drop-mark{font-size:25px;color:var(--accent)}.drop-zone strong{font-size:14px;font-weight:500}.drop-zone p{margin:5px 0 0;color:var(--muted);font-size:10px}.drop-arrow{margin-left:auto;color:var(--accent);font-size:20px}.error{margin:-76px 0 70px;color:#ff978a;font-size:12px}footer{display:flex;justify-content:space-between;padding:22px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.1em}@media(max-width:900px){.controls{grid-template-columns:1fr auto;gap:20px}.timeline{grid-column:1/-1;grid-row:2}.volume{grid-column:1/-1}.volume input{flex:1}}@media(max-width:560px){.topbar{height:68px}.topbar-note{font-size:8px}.intro{padding:72px 0 58px}.lede{font-size:15px}.player{box-shadow:9px 9px #0c1211}.controls{padding:22px 18px}.drop-zone{margin-top:52px;margin-bottom:72px;padding:19px}.drop-zone strong{font-size:12px}footer{display:block;line-height:2}.visualizer{height:55vw;min-height:250px}}