:root{--color-yellow: #ffc000;--color-orange: #ff7a00;--color-red-light: #ff4200;--color-red-dark: #ff0600;--color-blue: #008bc6;--color-black: #0a0a0a;--color-white: #efefef;--border-thick: 3px solid var(--color-black);--border-thin: 1px solid var(--color-black);--shadow-hard: 4px 4px 0px var(--color-black);--font-main: "Helvetica Neue", Helvetica, Arial, sans-serif}body{background-color:var(--color-white);color:var(--color-black);font-family:var(--font-main);margin:0;padding:0;-webkit-font-smoothing:antialiased}.app-container{max-width:1200px;margin:0 auto;padding:2rem 1rem;background-color:var(--color-white);min-height:100vh;overflow-x:hidden}*{box-sizing:border-box}.tape-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;width:100%;margin:0 auto;justify-content:center;justify-items:center}.tape-card{background-color:var(--color-white);border:var(--border-thick);box-shadow:var(--shadow-hard);transition:transform .1s ease,box-shadow .1s ease;padding:10px;display:flex;flex-direction:column;gap:10px;width:100%;max-width:350px}@media(max-width:480px){.app-container{padding:1rem}.tape-grid{grid-template-columns:1fr;gap:2rem}.tape-card:hover{transform:none;box-shadow:var(--shadow-hard)}}.tape-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--color-black)}.tape-image-container{border:var(--border-thin);background:var(--color-white);aspect-ratio:1 / 1;overflow:hidden}.tape-image{width:100%;height:100%;object-fit:cover}.tape-controls{display:flex;justify-content:space-between;align-items:stretch;gap:10px;height:40px}.tape-pill{flex-grow:1;background-color:var(--color-yellow);color:var(--color-black);border:var(--border-thick);font-weight:900;font-size:1.2rem;display:flex;align-items:center;justify-content:center;letter-spacing:-1px}.play-btn{width:50px;background-color:var(--color-red-light);border:var(--border-thick);color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background .2s}.play-btn:hover{background-color:var(--color-red-dark)}.play-btn:disabled{background-color:#ccc;border-color:#999;cursor:not-allowed;box-shadow:none}.recorder-container{position:relative;width:100%;max-width:444px;margin:0 auto;aspect-ratio:444 / 818}.recorder-svg-body{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}.spotify-window{position:absolute;top:47.4%;left:6.4%;width:87.2%;height:27.6%;z-index:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.spotify-window iframe{width:100%;height:100%;border:none}.recorder-controls{position:absolute;top:76.5%;left:10%;width:80%;display:flex;justify-content:space-between;z-index:3}.mechanical-btn:active{transform:translateY(4px)}.recording-glow{filter:drop-shadow(0 0 8px rgba(236,28,36,.8));animation:pulse-red 1.5s infinite alternate}@keyframes pulse-red{0%{opacity:.8}to{opacity:1;filter:drop-shadow(0 0 12px rgba(236,28,36,1))}}.recorder-wrapper{position:relative;width:100%;max-width:444px;margin:2rem auto;aspect-ratio:444 / 818}.cassette-window-overlay{position:absolute;inset:47.66% 7% 25.55%;z-index:25;background:transparent;display:block;overflow:hidden;border-radius:5px}.cassette-window-overlay:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;box-shadow:inset 0 0 15px #000c;z-index:2}.cassette-window-overlay iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;object-fit:cover}.recorder-frame{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}.btn-layer{position:absolute;top:76.8%;left:10.3%;z-index:3}.tape-deck-footer{margin-top:2rem;text-align:center}.pulse-red{animation:red-blink 1s infinite alternate}@keyframes red-blink{0%{fill:#8b0000}to{fill:#ec1c24;filter:drop-shadow(0 0 5px red)}}.pin-input{width:70px;border:none;border-bottom:3px solid var(--color-black);background:transparent;font-family:var(--font-main);font-weight:900;text-align:center;outline:none}.status-text{font-weight:900;color:var(--color-blue);letter-spacing:2px;margin-top:1rem}.error-text{background:var(--color-red-dark);color:#fff;display:inline-block;padding:5px 15px;margin-top:1rem;font-weight:900}.btn-layer{position:absolute;top:86.8%;left:5.5%;width:89%;display:flex;justify-content:flex-start;align-items:center;gap:1.5%;z-index:10}.btn-layer{position:absolute;top:87%;left:10%;width:80%;height:10.5%;display:flex;justify-content:space-between;align-items:center;z-index:10}.mechanical-btn{background:none;border:none;padding:0;cursor:pointer;width:15%;transition:transform .1s ease,filter .2s ease}.mechanical-btn:hover{filter:brightness(1.1)}.mechanical-btn:active{transform:translateY(3px) scale(.98);filter:brightness(.9)}.recording-pulse{animation:pulse-glow 1s infinite alternate}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 2px red);opacity:.8}to{filter:drop-shadow(0 0 8px red);opacity:1}}.mechanical-btn.is-playing svg{transform:translateY(2px);filter:brightness(.8)}.hero-nav{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:1.5rem;margin-bottom:4rem}.sticky-nav{position:sticky;top:0;width:100%;background-color:#fdfd35;border-bottom:var(--border-thick);z-index:1000;padding:.75rem 0}.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{height:30px}.hero-section{background-image:url(/hf-header.png);background-size:cover;background-position:center;background-color:#fdfd35;color:var(--color-black);padding:4rem;border-bottom:var(--border-thick)}.header-logo{height:40px;width:auto}.hero-content{display:flex;justify-content:space-between;align-items:flex-end;margin-top:2rem}.recorder-img{width:100%;max-width:450px;height:auto;display:block}.title-massive{font-size:clamp(4rem,12vw,10rem);line-height:.8;margin:0;letter-spacing:-.05em;text-transform:lowercase}@media(max-width:768px){.hero-content{flex-direction:column;align-items:center;text-align:center}.recorder-img{margin-top:2rem;max-width:300px}}.title-massive{font-size:clamp(4rem,10vw,9rem);line-height:.85;margin:0;letter-spacing:-4px;text-transform:lowercase}.subtitle-bold{font-size:1.5rem;font-weight:900;margin-top:2rem;margin-bottom:.5rem}.subtitle-desc{font-size:1.2rem;font-weight:400;max-width:500px;line-height:1.4}.hero-content{display:flex;justify-content:space-between;align-items:flex-end}.recorder-img{width:100%;max-width:400px;min-height:500px;object-fit:contain}@media(max-width:768px){.hero-content{flex-direction:column}.hero-section{padding:2rem 1rem}.title-massive{font-size:5rem}}