: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;width:100%;-webkit-font-smoothing:antialiased}#root{max-width:100%;margin:0;padding:0;text-align:left}.app-container{max-width:100%;margin:10px 10px 50px;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)}.manifesto-block{text-align:center;font-weight:900;font-size:1.2rem;margin:2rem 0 3rem;text-transform:uppercase;border-bottom:4px solid var(--ink-black);padding-bottom:2rem}.manifesto-block p{margin:.2rem 0}.tape-card.is-blank .tape-image{filter:grayscale(100%) opacity(.5);transition:filter .3s ease}.tape-card.is-blank:hover .tape-image{filter:grayscale(50%) opacity(.8)}.status-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-black)}.status-dot.empty{background-color:transparent}.status-dot.recorded{background-color:var(--color-red-dark)}.artwork-relative-wrapper{position:relative;display:inline-block;width:100%}.hero-sharpie-overlay{position:absolute;top:30%;left:0;width:100%;text-align:center;font-family:Permanent Marker,cursive;font-size:1rem;color:var(--ink-black);transform:rotate(-1deg);pointer-events:none}.tape-image-container{position:relative;width:100%}.grid-sharpie-overlay{position:absolute;top:31%;left:0;width:100%;text-align:center;font-family:Permanent Marker,cursive;font-size:1rem;color:var(--ink-black);transform:rotate(-1deg);pointer-events:none}.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}}.tape-deck-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:600px;margin:0 auto;padding:.5rem 1rem}.artwork-container{width:100%;margin-bottom:2rem;text-align:center}.tape-artwork{width:100%;height:auto;border:6px solid var(--ink-black);box-shadow:8px 8px 0 var(--ink-black);background-color:#e0e0e0}.tape-title{font-size:2rem;font-weight:900;text-transform:uppercase;margin-top:1.5rem;letter-spacing:2px}.interface-container{width:100%}.brutalist-form{display:flex;flex-direction:column;gap:2rem}.form-group label{display:block;font-weight:700;font-size:1.2rem;margin-bottom:.5rem}.pin-pad{display:flex;gap:1rem;justify-content:space-between}.pin-box{width:20%;aspect-ratio:1/1;text-align:center;font-size:2rem;font-weight:700;border:4px solid var(--ink-black);box-shadow:4px 4px 0 var(--ink-black);outline:none}.pin-box:focus{background-color:var(--lino-yellow)}.url-box{width:100%;padding:1rem;font-size:1rem;border:4px solid var(--ink-black);box-shadow:4px 4px 0 var(--ink-black);box-sizing:border-box;outline:none}.url-box:focus{background-color:var(--lino-yellow)}.action-button{width:100%;padding:1.5rem;font-size:1.5rem;font-weight:900;text-transform:uppercase;color:var(--paper-white);background-color:var(--ink-black);border:4px solid var(--ink-black);box-shadow:6px 6px #0000004d;cursor:pointer;transition:all .1s ease}.action-button:active{transform:translate(4px,4px);box-shadow:2px 2px #0000004d}.record-button{background-color:var(--ink-black);color:var(--paper-white)}.eject-button{background-color:var(--paper-white);color:var(--ink-black);margin-top:2rem}.placeholder-spotify{width:100%;height:352px;background-color:#222;color:#1ed760;display:flex;align-items:center;justify-content:center;border:4px solid var(--ink-black);box-shadow:6px 6px 0 var(--ink-black)}.faq-wrapper{max-width:800px;margin:0 auto;padding:2rem 1rem}.faq-header{border-bottom:6px solid var(--ink-black);margin-bottom:3rem;padding-bottom:1rem}.faq-grid{display:flex;flex-direction:column;gap:2.5rem}.faq-block{background-color:var(--paper-white);border:4px solid var(--ink-black);box-shadow:6px 6px 0 var(--ink-black);padding:2rem}.faq-question{font-family:Permanent Marker,cursive;font-size:2rem;margin-top:0;margin-bottom:1rem;line-height:1.1;color:var(--ink-black)}.faq-answer{font-size:1.1rem;line-height:1.6;font-weight:500}.faq-answer p{margin-bottom:1rem}.faq-answer ol{padding-left:1.5rem;font-weight:700}.faq-answer li{margin-bottom:.5rem}