@import"https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&family=Special+Elite&display=swap";@import"https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&family=Special+Elite&family=Gloria+Hallelujah&display=swap";:root{font-family:Special Elite,monospace;line-height:1.5;font-weight:400;color-scheme:dark;color:#eee;background-color:#111;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{font-family:Special Elite,monospace;line-height:1.5;font-weight:400;color-scheme:dark;color:#eee;background-color:#111}body{margin:0;display:block;min-width:320px;min-height:100vh;background-color:#000}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#111}::-webkit-scrollbar-thumb{background:#f05;border:2px solid #000}.app-container{min-height:100vh;background-color:#000;color:#fff;font-family:Special Elite,monospace;overflow-x:hidden;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23222' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")}.login-container{height:100vh;display:flex;align-items:center;justify-content:center;background:#000;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23111' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")}.login-box{background:#111;padding:3rem;border:10px solid #fff;border-bottom:30px solid #fff;text-align:center;max-width:400px;width:90%;transform:rotate(-2deg);box-shadow:10px 20px #f05}.pin-input{width:100%;font-size:2rem;text-align:center;letter-spacing:10px;margin-top:2rem;padding:.5rem;font-family:Permanent Marker,cursive;background:#222;color:#fe0;border:4px solid #fff}.pin-input:focus{outline:none;border-color:#f05;box-shadow:0 0 15px #ff005580}.hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;background-image:url(./punk-bg.png);background-size:cover;background-position:center;border-bottom:5px solid #ff0055;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,#0003,#000c);z-index:1}.hero-content{position:relative;z-index:2;text-align:center;transform:rotate(-3deg);padding:3rem;background:#000c;border:5px solid #fff;box-shadow:15px 15px #f05;max-width:90%}.title{font-family:Permanent Marker,cursive;font-size:6rem;margin:0;color:#fff;text-transform:uppercase;text-shadow:5px 5px 0 #ff0055,-2px -2px 0 #000;line-height:.85}.subtitle{font-family:Rock Salt,cursive;font-size:2.2rem;color:#fe0;margin-top:1.5rem;text-shadow:3px 3px 0 #000;background:#000;display:inline-block;padding:.8rem 1.5rem;transform:rotate(4deg);border:2px solid #fff}.hero-text{margin-top:2rem;font-size:1.4rem;color:#fff;background:#f05;display:inline-block;padding:.3rem 1.2rem;font-weight:700;transform:rotate(-2deg);box-shadow:3px 3px #000}.main-content{max-width:1000px;margin:0 auto;padding:5rem 1rem}.section{margin-bottom:8rem}.section h3{font-family:Permanent Marker,cursive;font-size:3.5rem;color:#111;background:#fe0;display:table;margin:0 auto 3rem;padding:.5rem 2.5rem;transform:rotate(-2deg);border:3px solid #000;box-shadow:8px 8px #fff;text-transform:uppercase;position:relative}.section h3:before,.section h3:after{content:"";position:absolute;top:50%;width:12px;height:12px;background:#f05;border-radius:50%;border:2px solid #000}.section h3:before{left:10px}.section h3:after{right:10px}.paper-note{max-width:700px;margin:0 auto;background:#f1f1f1;color:#222;padding:3rem;transform:rotate(1deg);box-shadow:0 10px 30px #00000080;font-family:Gloria Hallelujah,cursive;position:relative;background-image:linear-gradient(#ccc 1px,transparent 1px);background-size:100% 2rem;line-height:2rem}.paper-note:before{content:"";position:absolute;top:-20px;left:50%;transform:translate(-50%);width:150px;height:40px;background:#fff6;border-left:1px dotted rgba(255,255,255,.8);border-right:1px dotted rgba(255,255,255,.8);box-shadow:0 2px 5px #0003;transform:translate(-50%) rotate(1deg)}.paper-note h2{font-family:Permanent Marker,cursive;font-size:2.5rem;margin-top:0;transform:rotate(-2deg);color:#f05}.paper-note p{font-size:1.4rem;margin-bottom:1.5rem}.paper-note .signature{text-align:right;margin-top:2rem;font-weight:700;font-family:Rock Salt,cursive;font-size:1.2rem}.slideshow-frame{max-width:700px;margin:0 auto;position:relative;background:#111;border:15px solid #fff;border-bottom:50px solid #fff;box-shadow:10px 20px 40px #0009;transform:rotate(-2deg);transition:transform .3s}.slideshow-frame:hover{transform:rotate(0) scale(1.02);z-index:10}.slideshow-frame:before{content:"";position:absolute;top:-25px;left:50%;transform:translate(-50%);width:120px;height:40px;background:#fff6;backdrop-filter:blur(2px);border:1px dashed rgba(255,255,255,.8);z-index:10;box-shadow:0 2px 5px #0000004d}.slideshow-container{position:relative;width:100%;padding-bottom:100%;overflow:hidden;background:#000}.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}.slide.active{opacity:1}.polaroid-overlay{position:absolute;bottom:-45px;left:0;width:100%;text-align:center}.polaroid-overlay span{font-family:Permanent Marker,cursive;color:#222;font-size:1.5rem}.no-photos{padding:4rem;text-align:center;color:#555;font-family:Special Elite,monospace}.cassette-container{max-width:500px;margin:0 auto;perspective:1000px}.cassette-tape{background:#333;background:linear-gradient(#333,#111);border-radius:20px;padding:20px;position:relative;border:4px solid #555;box-shadow:0 10px 20px #000000b3,inset 0 0 20px #000c;cursor:pointer;transition:transform .3s,box-shadow .3s;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.cassette-tape:hover{transform:scale(1.02) rotate(1deg);box-shadow:0 15px 30px #f056,inset 0 0 20px #000c;border-color:#f05}.cassette-label{background:#f4d03f;width:90%;height:140px;border-radius:10px;position:relative;text-align:center;display:flex;flex-direction:column;justify-content:center;box-shadow:0 2px 5px #00000080;margin-bottom:20px;border:2px dashed #333}.tape-title{font-family:Permanent Marker,cursive;font-size:1.8rem;color:#000;transform:rotate(-2deg)}.tape-band{font-family:Special Elite,monospace;font-weight:700;color:#333;margin-top:5px}.tape-wheels{display:flex;gap:80px;position:absolute;top:90px;left:50%;transform:translate(-50%);pointer-events:none}.wheel{width:40px;height:40px;background:#fff;border-radius:50%;border:4px solid #000;position:relative}.wheel:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:#000;border-radius:50%}.cassette-tape:hover .wheel{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.click-hint{color:#f05;font-family:Permanent Marker,cursive;font-size:1.4rem;margin-top:1rem;animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.6}to{opacity:1;text-shadow:0 0 10px #ff0055}}.video-player-wrapper{background:#000;border:8px solid #ff0055;border-radius:10px;overflow:hidden;height:300px;box-shadow:0 0 20px #f059;position:relative;animation:flashBorder 2s infinite}@keyframes flashBorder{0%{border-color:#f05}50%{border-color:#fe0}to{border-color:#f05}}.close-player{position:absolute;top:10px;right:10px;background:red;color:#fff;border:none;font-weight:700;cursor:pointer;padding:5px 10px;font-family:sans-serif;z-index:100;opacity:.7}.close-player:hover{opacity:1}.submit-btn{width:100%;padding:1rem;border:none;border-radius:8px;background:linear-gradient(135deg,#d97706,#fbbf24);color:#0f172a;font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:Permanent Marker,cursive;letter-spacing:2px}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fbbf244d}.hint{text-align:center;color:#666;font-family:Special Elite,monospace;margin-top:3rem;font-style:italic}.footer{text-align:center;padding:4rem;background:#050505;color:#333;border-top:5px solid #222;font-family:Permanent Marker,cursive;font-size:1.5rem}@media(max-width:768px){.title{font-size:3.5rem}.section h3{font-size:2.5rem}.paper-note{padding:1.5rem}.cassette-tape{height:250px}}