:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:clamp(14px,2.5vw,16px);scroll-behavior:smooth}html,body{width:100%;overflow-x:hidden}body{font-family:Black Ops One,cursive;background:#f5f5f5;color:#1a1a1a;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:url(/specbg.png);background-image:image-set(url(/specbg.webp) type("image/webp"),url(/specbg.png) type("image/png"));background-repeat:repeat;background-size:632px;opacity:.5;z-index:-1;pointer-events:none}#root{width:100%;display:flex;justify-content:center}h1{font-family:Special Elite,Courier New,monospace;font-weight:400;letter-spacing:clamp(2px,.5vw,4px);font-size:clamp(1.75rem,6vw,4.5rem);margin-bottom:clamp(.5rem,1vw,.75rem);text-align:center;text-transform:uppercase;color:#000;background:#ffffffbf;padding:clamp(.5rem,2vw,1rem);text-shadow:3px 3px 0 rgba(255,0,0,.5),6px 6px 0 rgba(0,0,0,.3);line-height:1.2}h2{font-family:Big Shoulders Stencil Display,cursive;letter-spacing:clamp(.5px,.2vw,1px);font-size:clamp(1.25rem,4vw,2rem);text-align:center;color:#dc2626;background:#ffffffbf;padding:clamp(.5rem,2vw,1rem);text-shadow:2px 2px 0 rgba(0,0,0,.2);margin-bottom:clamp(1rem,3vw,2rem);line-height:1.2}h3{font-family:Black Ops One,cursive;letter-spacing:clamp(.5px,.15vw,1px);font-size:clamp(1.125rem,2.5vw,1.5rem);margin-bottom:clamp(.75rem,2vw,1rem);line-height:1.3}.app-container{width:100%;display:flex;justify-content:center;padding:clamp(.75rem,3vw,2rem);min-height:100vh}.content-wrapper{width:100%;max-width:64rem;display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,2rem);margin:0 auto}.neo-brutalist{border:4px solid #000;box-shadow:-8px 8px red;transition:all .2s ease;border-radius:4px}.neo-brutalist:hover{box-shadow:-6px 6px red;transform:translate(-2px,2px)}.card{background:#ffffffe8;padding:clamp(1rem,4vw,2rem);word-wrap:break-word;overflow-wrap:break-word}.grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem}.album-section{text-align:center}.album-art-container{aspect-ratio:1;width:100%;max-width:24rem;margin:0 auto 1rem}.album-art{width:100%;height:100%;object-fit:cover}.audio-player{width:100%;margin-top:1rem}.tracklist{background:#ffffffe8;padding:1rem}.track-item{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border-bottom:2px solid #000}.track-item:last-child{border-bottom:none}.track-title{font-weight:700;font-size:.875rem}button{border:4px solid #000;box-shadow:-4px 4px red;transition:all .2s ease;border-radius:4px;cursor:pointer;font-family:inherit;font-weight:700}button:hover:not(:disabled){box-shadow:-2px 2px red;transform:translate(-2px,2px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}button:focus-visible{outline:2px solid #dc2626;outline-offset:2px}.lyrics-btn,.submit-btn,.modal-close{background:#fbbf24;color:#000}.lyrics-btn:hover:not(:disabled),.submit-btn:hover:not(:disabled),.modal-close:hover:not(:disabled){background:#f59e0b}.lyrics-btn{padding:.25rem .75rem;font-size:.75rem;white-space:nowrap;align-self:flex-start}.spectrum-banner{display:flex;gap:5px;margin:.5rem 0 1rem;justify-content:center;flex-wrap:nowrap;width:100%}.spectrum-item{width:calc(100% / 7 - 5px);height:auto;border:2px solid #000;object-fit:contain;flex-shrink:0}.band-grid{display:grid;grid-template-columns:1fr;gap:.5rem}.band-member{font-size:1.25rem;text-shadow:2px 2px 0 rgba(0,0,0,.2);letter-spacing:.5px}.guestbook-form{margin-bottom:clamp(1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:clamp(.5rem,1.5vw,.75rem)}.form-input{width:100%;padding:clamp(.5rem,2vw,.75rem);font-size:clamp(.8rem,2vw,.875rem);border-radius:4px;border:2px solid #ddd;font-family:inherit;word-wrap:break-word}.form-input:focus{outline:2px solid #dc2626;outline-offset:2px}.form-textarea{width:100%;padding:clamp(.5rem,2vw,.75rem);font-size:clamp(.8rem,2vw,.875rem);resize:vertical;min-height:clamp(80px,15vw,120px);border-radius:4px;border:2px solid #ddd;font-family:inherit;line-height:1.5;word-wrap:break-word}.form-textarea:focus{outline:2px solid #dc2626;outline-offset:2px}.submit-btn{padding:clamp(.75rem,2vw,1rem) clamp(1rem,3vw,1.5rem);font-size:clamp(.8rem,2vw,.875rem);width:100%}.guestbook-entries{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.guestbook-entry{background:#f3f4f6;padding:1rem}.entry-name{font-weight:700;font-size:.875rem}.entry-message{font-size:.875rem;margin-top:.25rem}.entry-date{font-size:.75rem;color:#6b7280;margin-top:.5rem}.band-credits{display:flex;flex-direction:row;justify-content:space-between;gap:2rem}.band-section h3,.credits-section h3{margin-bottom:1rem;font-size:1.25rem}.credits{text-align:left;font-size:.875rem;display:flex;flex-direction:column;gap:.25rem}.credits-section{text-align:left}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:10000}.modal-content{background:#ffffffe8;padding:2rem;max-width:32rem;width:100%;margin:1rem;max-height:90vh;overflow-y:auto}.modal-title{font-size:1.5rem;margin-bottom:1rem;font-weight:700}.modal-body{font-size:1rem;margin-bottom:1.5rem;line-height:1.6}.modal-close{font-size:1rem;padding:.75rem 1.5rem}@media (min-width: 768px){.title-with-banner{flex-direction:row;justify-content:center;align-items:center;gap:clamp(1rem,3vw,3rem)}.grid-2{grid-template-columns:1fr 1fr}.track-item{flex-direction:row;justify-content:space-between;align-items:center}.track-title{font-size:1rem}.lyrics-btn{font-size:.875rem;padding:.5rem .75rem}.modal-close{padding:1rem 2rem}.band-grid{grid-template-columns:1fr 1fr;gap:1rem}.form-input,.form-textarea{font-size:1rem;padding:1rem}.submit-btn{width:auto;font-size:1rem;padding:1rem 2rem}.reply-btn{padding:1rem 2rem}.entry-name,.entry-message{font-size:1rem}.entry-date{font-size:.875rem}.credits{font-size:1rem}.credits-section,.credits{text-align:center}}@media (min-width: 1024px){.card{padding:3rem}}.spinner{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:clamp(.75rem,2vw,1rem);border-radius:6px;font-size:clamp(.8rem,2vw,.875rem);display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.error-close{background:none;border:none;box-shadow:none;color:#dc2626;font-size:1.25rem;padding:0;margin-left:1rem;line-height:1;font-weight:400}.error-close:hover{color:#b91c1c;box-shadow:none;transform:none}.textarea-container{position:relative}.char-count{position:absolute;bottom:8px;right:12px;font-size:.75rem;color:#666;background:#ffffffe6;padding:2px 6px;border-radius:3px;pointer-events:none}.empty-state{text-align:center;padding:clamp(2rem,5vw,3rem);color:#666;font-style:italic}.empty-state p{font-size:clamp(.9rem,2.2vw,1rem);line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}input:focus-visible,textarea:focus-visible{outline:2px solid #dc2626;outline-offset:2px}.discussion-entry,.reply-form,.replies{transition:all .3s ease}.reply-form{animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.discussion-entry{margin-bottom:clamp(1rem,3vw,1.5rem);padding:clamp(1rem,3vw,1.5rem);background:#ffffffe8;border-radius:8px;box-shadow:0 2px 4px #0000001a;word-wrap:break-word;overflow-wrap:break-word;transition:box-shadow .2s ease}.discussion-entry:focus-within{box-shadow:0 4px 8px #00000026}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.entry-author{font-weight:700;font-size:1.1rem;color:#dc2626}.entry-datetime{font-size:.85rem;color:#666;font-weight:400}.entry-message{margin-bottom:clamp(.75rem,2vw,1rem);line-height:1.6;font-size:clamp(.9rem,2.2vw,1rem);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.entry-actions{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}.show-replies-btn,.reply-toggle{background:none;border:none;box-shadow:none;font-size:.9rem;padding:0}.show-replies-btn:hover,.reply-toggle:hover{box-shadow:none;transform:none}.show-replies-btn{color:#dc2626;font-weight:700}.show-replies-btn:hover{text-decoration:underline}.reply-toggle{color:#666}.reply-toggle:hover{color:#dc2626}.reply-section{margin-top:1rem;padding-left:1.5rem;border-left:4px solid #dc2626}.reply-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:1rem;background:#f9f9f9;border-radius:6px}.reply-message-container{position:relative;width:100%}.reply-char-count{position:absolute;bottom:8px;right:12px;font-size:.7rem;color:#666;background:#ffffffe6;padding:2px 4px;border-radius:3px;pointer-events:none}.reply-input{padding:clamp(.5rem,1.5vw,.75rem);border:2px solid #ddd;border-radius:4px;font-size:clamp(.8rem,2vw,.9rem);font-family:inherit;word-wrap:break-word;min-height:44px}.reply-input:focus{outline:2px solid #dc2626;outline-offset:2px;border-color:#dc2626}.reply-message{width:100%}.reply-btn{width:100%;padding:.75rem 1.5rem;background:#dc2626;color:#fff;font-size:.9rem}.reply-btn:hover:not(:disabled){background:#b91c1c}.replies{margin-top:1rem}.reply{padding:clamp(.75rem,2vw,1rem);margin:clamp(.5rem,1.5vw,.75rem) 0;background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;font-size:clamp(.85rem,2vw,.95rem);word-wrap:break-word;overflow-wrap:break-word}.reply-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.reply-author{font-weight:700;color:#dc2626}.reply-datetime{font-size:.8rem;color:#6c757d}.reply-message{line-height:1.5;color:#495057;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}@media (max-width: 768px){.reply-form{grid-template-columns:1fr}.reply-section{padding-left:1rem}.discussion-entry{padding:1rem}}
