@tailwind base;@tailwind components;@tailwind utilities;body{font-family:Arial,Helvetica,sans-serif}@layer utilities{.text-balance{text-wrap:balance}}@layer base{:root{--background: 0 0% 100%;--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary: 0 0% 9%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 0 0% 89.8%;--input: 0 0% 89.8%;--ring: 0 0% 3.9%;--chart-1: 12 76% 61%;--chart-2: 173 58% 39%;--chart-3: 197 37% 24%;--chart-4: 43 74% 66%;--chart-5: 27 87% 67%;--radius: .5rem;--sidebar-background: 0 0% 98%;--sidebar-foreground: 240 5.3% 26.1%;--sidebar-primary: 240 5.9% 10%;--sidebar-primary-foreground: 0 0% 98%;--sidebar-accent: 240 4.8% 95.9%;--sidebar-accent-foreground: 240 5.9% 10%;--sidebar-border: 220 13% 91%;--sidebar-ring: 217.2 91.2% 59.8%}.dark{--background: 0 0% 3.9%;--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 0 0% 9%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%;--chart-1: 220 70% 50%;--chart-2: 160 60% 45%;--chart-3: 30 80% 55%;--chart-4: 280 65% 60%;--chart-5: 340 75% 55%;--sidebar-background: 240 5.9% 10%;--sidebar-foreground: 240 4.8% 95.9%;--sidebar-primary: 224.3 76.3% 48%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 240 3.7% 15.9%;--sidebar-accent-foreground: 240 4.8% 95.9%;--sidebar-border: 240 3.7% 15.9%;--sidebar-ring: 217.2 91.2% 59.8%}}@layer base{*{@apply border-border;}body{@apply bg-background text-foreground;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}}.node{cursor:pointer}.node:hover{stroke:#000;stroke-width:1.5px}.node--leaf{fill:#fff}.label{font:11px Helvetica Neue,Helvetica,Arial,sans-serif;text-anchor:middle;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff}.label,.node--root,.node--leaf{pointer-events:none}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Azeret Mono,monospace;background-color:#0a0a0a;color:#fff;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column;background-color:transparent;position:relative}.header{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:20px 40px;background:transparent;z-index:10;pointer-events:none}.header-section{display:flex;align-items:center;pointer-events:auto;flex-direction:column}.playlist-title{font-size:20px;font-weight:400;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.app-title{font-size:20px;font-weight:400;color:#1db954;text-align:left;text-shadow:0 2px 4px rgba(0,0,0,.5)}.main-content{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0a0a0a;z-index:1}.controls-section{display:flex;justify-content:center;align-items:center;flex:1;max-width:1000px;margin:0 20px}*/ .valence-control,.danceability-control{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin:10px 0}.slider-container{position:relative;width:100%;height:24px;margin:8px 0}.slider-track{position:absolute;width:100%;height:8px;border-radius:4px;top:50%;transform:translateY(-50%);box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #0003;background:#ffffff1a}.valence-control .slider-track{background:linear-gradient(to right,#84cc16,#06b6d4,#a855f7)}.danceability-control .slider-track{background:linear-gradient(to right,#64748b,#f43f5e)}.slider-progress{position:absolute;height:100%;background:#ffffff4d;border-radius:4px;pointer-events:none;box-shadow:inset 0 1px 2px #ffffff1a}.slider-progressB{position:absolute;height:100%;background:#fff;border-radius:4px;pointer-events:none;box-shadow:inset 0 1px 2px #ffffff1a}.slider-thumb{position:absolute;width:18px;height:18px;border-radius:50%;top:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 2px 8px #00000080,0 0 0 2px #fff3;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;z-index:2}.slider-thumb:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 3px 10px #0009,0 0 0 3px #ffffff4d}.danceability-emoji{position:absolute;left:var(--thumb-position);top:-30px;font-size:24px;transform:translate(-50%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:transform .3s ease;pointer-events:none}.valence-labels,.danceability-labels{display:flex;justify-content:space-between;width:100%;margin-top:8px}.valence-label,.danceability-label{font-size:13px;font-family:Azeret Mono,monospace;color:#b3b3b3;text-transform:uppercase;letter-spacing:.5px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.danceability-control .slider-thumb{background:#f43f5e}.metrics-section{display:flex;width:200px;gap:16px;align-items:flex-end;flex-shrink:0}.metric{display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.circle{width:40px;height:40px;border-radius:50%;background-color:#ff6b6b;display:flex;justify-content:center;align-items:center;position:relative}.metric-value{font-size:15px;color:#fff;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:0}.metric-label{font-size:15px;color:#b3b3b3;margin-top:2px}.rect{width:40px;height:40px;background-color:#02ffea;display:flex;justify-content:center;align-items:center;position:relative}.circle:hover,.rect:hover{transform:scale(1.1);transition:transform .3s ease}@media (max-width: 1024px){.header{padding:16px 20px}.bottom-controls{flex-direction:column;gap:20px;align-items:center;padding:20px}.track-info-section{justify-content:center;order:1}.controls-section{order:2;margin:0;max-width:none}.metrics-section{flex-direction:row;justify-content:center;gap:40px;width:auto;order:3}.slider-container{width:400px}}@media (max-width: 768px){.header{padding:16px 20px;flex-direction:column;gap:8px}.app-title,.playlist-title{font-size:18px;text-align:center}.bottom-controls{padding:16px 20px}.slider-container{width:300px}.track-info-section{gap:20px}.rank-number{font-size:36px}.slider-thumb{width:16px;height:16px}.valence-label,.danceability-label{font-size:11px}.danceability-emoji{font-size:20px;top:-25px}}@media (max-width: 480px){.slider-container{width:250px}.controls-section{width:100%}.valence-control,.danceability-control{gap:8px}.slider-thumb{width:14px;height:14px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.controls-overlay{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);background-color:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.5rem;padding:1rem;color:#fff;font-family:Courier New,Courier,monospace;font-size:.875rem;z-index:1001;pointer-events:auto;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;max-width:95vw;box-sizing:border-box}.controls-overlay.fade-in{opacity:0;animation:fadeIn .5s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.controls-overlay.fade-out{opacity:0;pointer-events:none}.close-button{position:absolute;top:4px;right:4px;width:18px;height:18px;background:#ff4757;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:0;z-index:1002;transition:transform .2s ease}.close-button:hover{transform:scale(1.1)}.controls-container{width:100%}.control-group{display:flex;flex-direction:row;gap:1.5rem;align-items:center}.control-item{display:flex;align-items:center;gap:.75rem;min-width:120px}.mouse-icon{position:relative;display:flex;align-items:center;justify-content:center}.mouse-svg{width:2rem;height:2rem;color:#fff}.left-click-dot{position:absolute;top:.25rem;left:.5rem;width:.5rem;height:.5rem;background-color:#fff;border-radius:50%;opacity:.8}.right-click-dot{position:absolute;top:.25rem;right:.5rem;width:.5rem;height:.5rem;background-color:#fff;border-radius:50%;opacity:.8}.control-text{display:flex;flex-direction:column;line-height:1.2}.instruction-line{color:#d1d5db;font-size:.875rem}.action-text{color:#fff;font-weight:600;font-size:.875rem}.divider{width:1px;background-color:#6b7280;height:100%;align-self:stretch}@media (max-width: 768px){.controls-overlay{top:90px;bottom:auto;left:.5rem;right:.5rem;transform:none;width:calc(100% - 1rem);padding:.75rem;font-size:.75rem}.control-group{flex-direction:column;gap:.75rem;width:100%}.control-item{width:100%;justify-content:flex-start;gap:.75rem;min-width:auto}.divider{display:none}.divider.mobile-only{display:block;width:100%;height:1px;margin:.25rem 0;background-color:#fff3}.mouse-svg{width:1.75rem;height:1.75rem}.close-button{top:4px;right:4px;width:16px;height:16px;font-size:10px}}@media (max-width: 480px){.controls-overlay{top:400px;padding:.5rem}.control-text{font-size:.7rem}.mouse-svg{width:1.5rem;height:1.5rem}}.app-title-absolute,.app-title-relative,.playlist-title-absolute,.playlist-title-relative{margin:0;font-weight:400;text-shadow:0 2px 4px rgba(0,0,0,.5);font-family:inherit;line-height:normal;padding:0;display:block}.header-absolute{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem 2rem;background:transparent;z-index:10;pointer-events:none}.header-section-absolute{display:flex;align-items:flex-end;pointer-events:auto;flex-direction:column;gap:.5rem}.app-title-absolute{font-size:clamp(1.5rem,5vw,2rem);color:#1db954;text-align:left}.playlist-title-absolute{font-size:clamp(1rem,3vw,1.25rem);color:#fff;text-align:right}.header-container-relative{width:100%;position:fixed;top:0;left:0;z-index:1000}.header-relative{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:transparent;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.header-section-relative{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.app-title-relative{font-size:clamp(1.5rem,5vw,2rem);color:#1db954;text-align:left}.playlist-title-relative{font-size:clamp(1rem,3vw,1.25rem);color:#fff;text-align:right}@media (max-width: 768px){.header-absolute,.header-relative{padding:.75rem 1rem;flex-direction:column;align-items:center;gap:.5rem}.header-section-absolute,.header-section-relative{align-items:center;width:100%}.app-title-absolute,.app-title-relative{text-align:center;width:100%}.playlist-title-absolute,.playlist-title-relative{text-align:center}.header-section-absolute,.header-section-relative{flex-direction:row;justify-content:space-between}}@media (max-width: 480px){.header-absolute,.header-relative{padding:.5rem}.header-section-absolute,.header-section-relative{flex-direction:column;gap:.25rem}}:root{background-color:#0c0b09}*,input,textarea,select,button{font-family:Azeret Mono,monospace!important}html,body,#root{height:100%;width:100%;margin:0;padding:0;overflow-x:hidden}