*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--teal: #00ACC1;--yellow: #FFD700;--orange: #FF6B35;--red: #FF4500;--pink: #FF69B4;--cyan: #00E5FF;--black: #000;--white: #fff;--ink: #1a1a1a}html{scroll-behavior:smooth}body{background-color:var(--teal);background-image:radial-gradient(circle,rgba(0,0,0,.2) 1.5px,transparent 1.5px);background-size:18px 18px;background-attachment:fixed;min-height:100vh;font-family:Comic Neue,cursive;color:var(--black);overflow-x:hidden}.floating-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.float-word{position:absolute;font-family:Bangers,cursive;letter-spacing:3px;-webkit-text-stroke:2px black;text-shadow:3px 3px 0 black;opacity:.55;-webkit-user-select:none;user-select:none;line-height:1}.page-content{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:24px 16px 40px}.site-header{text-align:center;margin-bottom:40px;padding-top:20px}.logo{font-family:Bangers,cursive;font-size:clamp(5rem,15vw,9.5rem);color:var(--yellow);-webkit-text-stroke:4px black;text-shadow:6px 6px 0 black;letter-spacing:6px;line-height:.88;transform:rotate(-2deg);display:inline-block;margin-bottom:20px}.speech-bubble{background:#fff;border:3px solid black;border-radius:20px;padding:8px 28px;font-family:Bangers,cursive;font-size:clamp(1rem,3vw,1.4rem);letter-spacing:3px;color:#000;position:relative;display:inline-block;box-shadow:4px 4px #000}.speech-bubble-tail-outer{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:15px solid black}.speech-bubble-tail-inner{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid white;margin-top:-2px;z-index:1}.speech-bubble .accent{color:var(--red);-webkit-text-stroke:1px black}.comic-panel{border:4px solid black;box-shadow:6px 6px #000}.upload-zone{background:#fff;border:5px dashed black;box-shadow:8px 8px #000;padding:24px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;transform:rotate(-.5deg);min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.upload-zone:hover{background:#fffde7}.upload-zone.dragging{background:#fffde7;border-color:var(--red);box-shadow:0 0 0 4px var(--red),8px 8px #000}.upload-zone.loading{cursor:default;opacity:.7}.upload-placeholder{text-align:center}.upload-icon{font-size:4.5rem;margin-bottom:12px;display:block}.upload-label{font-family:Bangers,cursive;font-size:2.2rem;letter-spacing:4px;color:#000;margin-bottom:8px}.upload-hint{font-family:Comic Neue,cursive;font-weight:700;color:#555;font-size:.9rem}.preview-wrapper{position:relative;width:100%;text-align:center}.preview-img{max-height:420px;max-width:100%;object-fit:contain;border:3px solid black;box-shadow:4px 4px #000}.preview-hover{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;opacity:0;transition:opacity .2s}.preview-wrapper:hover .preview-hover{opacity:1}.preview-hover-label{background:var(--yellow);border:3px solid black;padding:8px 24px;font-family:Bangers,cursive;font-size:1.3rem;letter-spacing:2px}.examples-section{margin-top:16px}.examples-label{font-family:Bangers,cursive;font-size:.95rem;letter-spacing:3px;color:#000;-webkit-text-stroke:.5px black;text-shadow:1px 1px 0 rgba(0,0,0,.3);margin-bottom:8px}.examples-row{display:flex;flex-wrap:wrap;gap:8px}.example-btn{background:#fff;border:3px solid black;box-shadow:3px 3px #000;padding:6px 14px;font-family:Comic Neue,cursive;font-weight:700;font-size:.85rem;cursor:pointer;transition:transform .08s,box-shadow .08s;color:#000}.example-btn:hover:not(:disabled){background:#fffde7}.example-btn:active:not(:disabled){transform:translate(3px,3px)!important;box-shadow:0 0 #000!important}.example-btn:disabled{opacity:.4;cursor:not-allowed}.generate-section{display:flex;justify-content:center;margin:32px 0}.generate-btn{background:var(--yellow);color:#000;border:5px solid black;box-shadow:9px 9px #000;padding:16px 52px;font-family:Bangers,cursive;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:4px;cursor:pointer;transform:rotate(-1.5deg);transition:transform .08s,box-shadow .08s;display:flex;align-items:center;gap:10px}.generate-btn:hover{background:#ffe333}.generate-btn:active{transform:rotate(-1.5deg) translate(9px,9px)!important;box-shadow:0 0 #000!important}.loading-panel{background:var(--yellow);border:5px solid black;box-shadow:8px 8px #000;padding:32px;text-align:center;transform:rotate(1deg);margin:24px 0}.loading-emoji{font-size:4rem;display:block;margin-bottom:12px;animation:wobble .5s ease-in-out infinite alternate}.loading-title{font-family:Bangers,cursive;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:4px;color:#000;-webkit-text-stroke:1px black;margin-bottom:6px}.loading-sub{font-family:Comic Neue,cursive;font-weight:700;color:#333;font-size:.95rem}.loading-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}.loading-dot{width:14px;height:14px;background:#000;border-radius:50%;animation:bounce .5s ease-in-out infinite alternate}.error-panel{background:var(--red);border:5px solid black;box-shadow:8px 8px #000;padding:28px;transform:rotate(-1deg);margin:24px 0}.error-boom{font-family:Bangers,cursive;font-size:clamp(3rem,8vw,5rem);color:var(--yellow);-webkit-text-stroke:2px black;text-shadow:4px 4px 0 black;letter-spacing:4px;line-height:1;margin-bottom:6px}.error-headline{font-family:Bangers,cursive;font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:2px;color:#fff;-webkit-text-stroke:1px black;margin-bottom:12px}.error-message{background:#fff;border:3px solid black;padding:10px 16px;font-family:Comic Neue,cursive;font-weight:700;font-size:.9rem;color:#000;margin-bottom:16px;word-break:break-word}.dismiss-btn{background:#000;color:#fff;border:3px solid black;box-shadow:4px 4px #300;padding:8px 24px;font-family:Bangers,cursive;font-size:1.2rem;letter-spacing:2px;cursor:pointer;transition:transform .08s,box-shadow .08s}.dismiss-btn:active{transform:translate(4px,4px);box-shadow:0 0 #300}.results-section{margin-bottom:40px}.analysis-card{background:#e8f5e9;border:4px solid black;box-shadow:6px 6px #000;padding:20px 24px;margin-bottom:28px;transform:rotate(.5deg)}.analysis-label{font-family:Bangers,cursive;font-size:1rem;letter-spacing:3px;color:#444;margin-bottom:10px}.analysis-caption{font-family:Comic Neue,cursive;font-weight:700;font-size:1.1rem;color:#000;margin-bottom:14px;line-height:1.4}.vibe-badge{background:var(--pink);border:3px solid black;padding:4px 14px;display:inline-block;font-family:Bangers,cursive;font-size:1.1rem;letter-spacing:2px;color:#000;box-shadow:3px 3px #000}.sfx-grid-label{font-family:Bangers,cursive;font-size:1.5rem;letter-spacing:4px;color:#000;-webkit-text-stroke:.5px black;text-shadow:2px 2px 0 rgba(0,0,0,.25);margin-bottom:16px}.sfx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}.sound-card{border:4px solid black;padding:18px;display:flex;flex-direction:column;gap:14px}.sound-card-tag{background:#fff;border:3px solid black;padding:4px 12px;font-family:Bangers,cursive;font-size:1rem;letter-spacing:2px;color:#000;display:inline-block;transform:rotate(-1deg);box-shadow:2px 2px #000}.sound-card-bubble{background:#fff;border:3px solid black;border-radius:12px;padding:10px 14px;font-family:Comic Neue,cursive;font-weight:700;font-size:.85rem;color:#000;line-height:1.4;position:relative;flex:1}.sound-card-bubble:after{content:"";position:absolute;bottom:-13px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:13px solid black}.sound-card-bubble:before{content:"";position:absolute;bottom:-9px;left:23px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid white;z-index:1}.sound-card-audio{margin-top:6px}.sound-card-audio audio{width:100%;height:42px;border:2px solid black;border-radius:0;box-shadow:2px 2px #000}.download-btn{background:#000;color:#fff;border:3px solid black;box-shadow:4px 4px #0006;padding:8px 16px;font-family:Bangers,cursive;font-size:1rem;letter-spacing:2px;cursor:pointer;transition:transform .08s,box-shadow .08s;width:100%;text-align:center}.download-btn:hover{background:#222}.download-btn:active{transform:translate(4px,4px);box-shadow:0 0 #0006}.bottom-btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin-top:36px}.dramatic-btn{background:var(--red);color:#fff;border:5px solid black;box-shadow:7px 7px #000;padding:14px 36px;font-family:Bangers,cursive;font-size:clamp(1.3rem,3.5vw,1.8rem);letter-spacing:3px;cursor:pointer;-webkit-text-stroke:1px black;transition:transform .08s,box-shadow .08s}.dramatic-btn:hover{background:#e63900}.dramatic-btn:active{transform:translate(7px,7px);box-shadow:0 0 #000}.try-another-btn{background:transparent;color:#000;border:none;cursor:pointer;font-family:Comic Neue,cursive;font-weight:700;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;padding:4px}.try-another-btn:hover{color:#333}.site-footer{background:#000;color:#fff;text-align:center;padding:16px 24px;font-family:Bangers,cursive;font-size:1.2rem;letter-spacing:3px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1;margin-top:auto}.footer-el{color:var(--cyan)}.footer-gem{color:var(--pink)}@keyframes wobble{0%{transform:rotate(-5deg) scale(.95)}to{transform:rotate(5deg) scale(1.05)}}@keyframes bounce{0%{transform:translateY(0);opacity:.6}to{transform:translateY(-14px);opacity:1}}audio{filter:none;border-radius:0}@media(max-width:600px){.logo{-webkit-text-stroke:3px black;text-shadow:4px 4px 0 black}.sfx-grid{grid-template-columns:1fr}.float-word{display:none}}