:root{--base:#0c0a06;--dark:#12100a;--gold:#c9a84c;--gold-light:#e8cf7a;--red:#8b1a1a;--red-light:#c0392b;--smoke:#1a1208;--chorus:#f0e6d0}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--base);color:#ddd;min-height:100vh;font-family:Barlow Condensed,sans-serif;font-size:17px;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:900;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");position:fixed;inset:0}#canvas-bg{z-index:-1;position:fixed;inset:0}#intro-layer,#karaoke-layer{z-index:10;position:relative}#vignette{pointer-events:none;z-index:5;position:fixed;inset:0;box-shadow:inset 0 0 150px #00000080}#bottom-haze{pointer-events:none;z-index:4;background:linear-gradient(#0000,#12100a99);height:120px;position:fixed;bottom:0;left:0;right:0}[data-state=intro] #karaoke-layer,[data-state=intro] .portrait-layer,[data-state=playing] #intro-layer{display:none}[data-state=playing] #karaoke-layer{opacity:1}[data-state=ended] #intro-layer{display:none}[data-state=ended] #karaoke-layer{opacity:0;pointer-events:none;transition:opacity 2s ease-out}.intro-screen{z-index:500;background:radial-gradient(at 50% 40%,#281e0c99 0%,#140f06cc 30%,#0c0a06 65% 100%);flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:fixed;inset:0}.intro-screen.fading{opacity:0;pointer-events:none}.intro-ember{opacity:0;z-index:2;background:#c9a84c;border-radius:50%;width:6px;height:6px;transition:opacity .5s,transform .5s,box-shadow .5s;position:absolute;box-shadow:0 0 20px #c9a84c,0 0 40px #c9a84c80}.intro-ember.visible{opacity:1}.intro-ember.flare{transform:scale(2);box-shadow:0 0 40px #c9a84c,0 0 80px #c9a84c99,0 0 120px #d278324d}.intro-art-wrap{opacity:0;max-width:min(90vw,900px);max-height:80vh;transition:opacity 1.2s ease-out,transform 1.2s ease-out;position:relative;transform:scale(.95)}@media (width>=1200px){.intro-art-wrap{max-width:min(85vw,1100px);max-height:82vh}}@media (width>=1600px){.intro-art-wrap{max-width:min(80vw,1300px);max-height:85vh}}.intro-art-wrap.visible{opacity:1;transform:scale(1)}.intro-art-wrap:before{content:"";z-index:-1;filter:blur(30px);background:radial-gradient(#c9a84c26 0%,#a0782014 40%,#0000 70%);border-radius:50%;position:absolute;inset:-60px}.intro-art{border-radius:8px;width:100%;height:auto;display:block;box-shadow:0 0 80px #c9a84c1f,0 0 160px #a078200f,0 20px 60px #0009}.intro-art-vignette{pointer-events:none;border-radius:8px;position:absolute;inset:0;box-shadow:inset 0 0 120px #0c0a06cc}.intro-enter-btn{letter-spacing:.3em;color:var(--gold);border:1px solid var(--gold);cursor:pointer;opacity:0;background:0 0;margin-top:32px;padding:16px 48px;font-family:Bebas Neue,sans-serif;font-size:1.2rem;transition:opacity .6s,background .2s,transform .2s}.intro-enter-btn.visible{opacity:1}.intro-enter-btn:hover{background:#c9a84c1f;transform:scale(1.03)}@keyframes pulse-border{0%,to{border-color:var(--gold)}50%{border-color:#c9a84c4d}}.intro-enter-btn.visible{animation:2s ease-in-out infinite pulse-border}.karaoke-container{text-align:center;z-index:10;opacity:0;max-width:780px;margin:0 auto;padding:40vh 20px 60vh;transition:opacity 1s ease-in;position:relative}.karaoke-container.visible{opacity:1}.lyric-line{color:#ffffff14;cursor:pointer;margin:4px 0;padding:10px 0;font-size:1.2rem;line-height:1.6;transition:color .3s,text-shadow .3s,transform .3s,margin .3s;display:block}.lyric-line:hover{color:#fff3}.lyric-line.past{color:#ffffff0f}.lyric-line.active+.lyric-line{color:#ffffff2e}.lyric-line.active+.lyric-line+.lyric-line{color:#ffffff1f}.lyric-line.active{color:#fff;text-shadow:0 0 20px #c9a84c99,0 0 40px #c9a84c33;margin:14px 0;font-size:1.45rem;transform:scale(1.04)}.lyric-line.active.speaker-mia{color:var(--gold-light);text-shadow:0 0 20px #c9a84ccc,0 0 50px #c9a84c4d}.lyric-line.active.speaker-kratos{color:var(--red-light);text-shadow:0 0 20px #c0392bcc,0 0 50px #c0392b4d}.lyric-line.active.speaker-both{color:#fff;text-shadow:0 0 20px #ffffff80,0 0 50px #c9a84c33}.word{transition:color .1s,text-shadow .1s}.lyric-line.active .word{color:#ffffff73;text-shadow:none}.word.word-active{text-shadow:0 0 18px #c9a84c,0 0 40px #c9a84c80;color:#fff!important}.lyric-line.active.speaker-mia .word.word-active{text-shadow:0 0 18px #c9a84c,0 0 45px #c9a84c99;color:var(--gold-light)!important}.lyric-line.active.speaker-kratos .word.word-active{text-shadow:0 0 18px #c0392b,0 0 45px #c0392b99;color:var(--red-light)!important}.lyric-line.active.speaker-both .word.word-active{text-shadow:0 0 18px #ffffffe6,0 0 40px #c9a84c66;color:#fff!important}.word.word-past{color:#ffffffa6}.speaker-label{letter-spacing:.35em;text-transform:uppercase;color:#333;margin:24px 0 8px;font-family:Bebas Neue,sans-serif;font-size:.8rem;transition:color .3s}.speaker-label.active{color:var(--gold)}.speaker-label.active.label-kratos{color:var(--red-light)}.speaker-label.active.label-both{color:#888}.site-header{z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0c0a06f2;border-bottom:1px solid #1a1a1a;padding:10px 20px;position:sticky;top:0}.header-inner{flex-direction:column;gap:8px;max-width:780px;margin:0 auto;display:flex}.logo-row{justify-content:center;align-items:center;gap:16px;display:flex}.dog-avatar{background:var(--dark);border:2px solid #222;border-radius:50%;flex-shrink:0;width:42px;height:42px;transition:border-color .3s,box-shadow .3s;overflow:hidden}.avatar-img{object-fit:cover;object-position:center 15%;width:100%;height:100%;transition:opacity .3s;display:block}.dog-avatar.mia-avatar{border-color:#c9a84c4d}.dog-avatar.kratos-avatar{border-color:#8b1a1a4d}.dog-avatar.glow-mia{border-color:var(--gold);box-shadow:0 0 12px #c9a84c80}.dog-avatar.glow-kratos{border-color:var(--red);box-shadow:0 0 12px #8b1a1a80}.dog-avatar.glow-both{border-color:#888;box-shadow:0 0 8px #fff3}.logo-text{text-align:center}.logo-title{background:linear-gradient(160deg, #fff 20%, var(--gold) 60%, #a07820 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Bebas Neue,sans-serif;font-size:1.6rem;line-height:1}.logo-subtitle{color:var(--gold);letter-spacing:.3em;font-family:Bebas Neue,sans-serif;font-size:.65rem}.controls-row{align-items:center;gap:12px;display:flex}.play-btn{background:var(--gold);cursor:pointer;color:#000;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;transition:background .2s,transform .1s;display:flex}.play-btn:hover{background:var(--gold-light);transform:scale(1.05)}.progress-wrap{flex-direction:column;flex:1;gap:3px;display:flex}.progress-bar{appearance:none;cursor:pointer;background:#222;border-radius:10px;outline:none;width:100%;height:4px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--gold);cursor:pointer;border-radius:50%;width:12px;height:12px}.time-display{color:#555;letter-spacing:.1em;justify-content:space-between;font-size:.65rem;display:flex}.volume-wrap{flex-shrink:0;align-items:center;gap:6px;display:flex}.vol-icon{color:#555;cursor:pointer;font-size:.8rem}.volume-bar{appearance:none;cursor:pointer;background:#222;border-radius:10px;outline:none;width:70px;height:3px}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--gold);cursor:pointer;border-radius:50%;width:10px;height:10px}.portrait-layer{z-index:1;pointer-events:none;background:#000;position:fixed;inset:0;overflow:hidden}.portrait-mia{left:0;-webkit-mask-image:linear-gradient(90deg,#000 0% 60%,#0000 95%);mask-image:linear-gradient(90deg,#000 0% 60%,#0000 95%)}.portrait-kratos{right:0;-webkit-mask-image:linear-gradient(270deg,#000 0% 60%,#0000 95%);mask-image:linear-gradient(270deg,#000 0% 60%,#0000 95%)}.portrait-side{will-change:filter;filter:brightness(.3)saturate(.6);width:55%;transition:filter 1.4s ease-in-out;position:absolute;top:0;bottom:0}.portrait-side.speaker-active{filter:brightness(.75)saturate(.85)}.portrait-side.speaker-inactive{filter:brightness(.12)saturate(.3)}.portrait-side.speaker-both{filter:brightness(.4)saturate(.7)}.portrait-img{object-fit:cover;object-position:center 20%;opacity:0;width:100%;height:100%;transition:opacity 1s ease-in-out;position:absolute;inset:0}.portrait-img.active{opacity:1}@media (width>=1200px){.portrait-side{width:48%}}@media (width>=1600px){.portrait-side{width:42%}}.portrait-side:before{content:"";z-index:3;background:linear-gradient(#000c 0%,#0003 15%,#0000 30% 65%,#00000080 85%,#000000e6 100%);position:absolute;inset:0}.portrait-mia .portrait-tint,.portrait-kratos .portrait-tint{display:none}@keyframes portrait-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.012)}}.portrait-side.speaker-active .portrait-img.active{animation:8s ease-in-out infinite portrait-breathe}.portrait-side.finale{filter:brightness(.85)saturate(.9);transition:filter 2.5s ease-in-out}.portrait-side.finale:before{opacity:.5;transition:opacity 2.5s ease-in-out}.finale-bg{z-index:5;opacity:0;pointer-events:none;transition:opacity 3s ease-in-out;position:absolute;inset:0}.finale-bg.visible{opacity:1}.finale-bg-img{object-fit:cover;object-position:center 30%;filter:brightness(.9)saturate(.9);width:100%;height:100%}