*{box-sizing:border-box}html,body{margin:0;background:#040407;color:#f6f1ea;font-family:Segoe UI,Arial,sans-serif;min-height:100%;overflow:hidden}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffc56e;outline-offset:4px}#app{height:100dvh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 62% 30%,#24202a,#050508 68%)}#scenery{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.85);transition:opacity 2s,filter 2s;pointer-events:none}.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent 68%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 40%);pointer-events:none}header{position:absolute;z-index:70;top:0;left:0;right:0;height:78px;display:flex;align-items:center;gap:25px;justify-content:space-between;padding:14px 4vw;border-bottom:1px solid #ffffff15;background:#0005}a{color:#e6c790}.brand{color:white;letter-spacing:.3em;font-size:.9rem;text-decoration:none;font-weight:800}.brand small{display:block;font-weight:300;letter-spacing:.19em;font-size:.55rem;color:#aaa;margin-top:6px}#phaseTag{color:#b8aaa5;letter-spacing:.24em;font-size:.63rem}.small,.text-btn{background:none;border:0;color:#c9b7ac;font-size:.72rem;letter-spacing:.1em}.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:10;padding:95px 5vw 100px}.screen.active{display:flex}#cover{justify-content:flex-start;padding-left:10vw}.cover-panel{z-index:2}.kicker{font-size:.69rem;letter-spacing:.27em;color:#e1b780;font-weight:600}h1{font-size:clamp(3.7rem,9vw,9rem);letter-spacing:-.065em;line-height:.85;margin:30px 0 20px;font-weight:850}h1 em{font-weight:300;font-style:normal;letter-spacing:-.07em;color:#e3c7b7}.cover-panel>p{letter-spacing:.25em;font-size:.88rem}.accent{width:90px;height:2px;background:linear-gradient(90deg,#fe645d,#f4c96a,#61a0de);margin:32px 0}.intro{color:#aaa;letter-spacing:0!important;font-family:Georgia,serif;font-style:italic;font-size:1.2rem!important}button:not(.small):not(.text-btn):not(.track-toggle){border:1px solid #d2ad79;padding:15px 25px;background:#d2ad79;color:#100b0b;font-weight:800;font-size:.72rem;letter-spacing:.14em;margin-top:10px}button.outline{background:#0b0b0e!important;color:#eee!important;border-color:#ffffff55!important}.text-btn{display:block;margin:18px 0 0}.cover-orbit{position:absolute;right:11vw;font-size:27vw;color:#eee2;animation:pulse 6s ease-in-out infinite;text-shadow:0 0 100px #fc6a6266}@keyframes pulse{50%{transform:scale(1.07) rotate(20deg);color:#fdbbff22}}.panel{text-align:center;max-width:650px;background:#0a080ac9;border:1px solid #ffffff30;padding:45px;backdrop-filter:blur(14px)}.panel h2{font-size:clamp(2rem,4vw,4rem);margin:20px 0}.panel p{color:#e5d9d5;line-height:1.8;font-family:Georgia,serif;font-size:1.2rem}.buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}#breakScreen p{z-index:30;font:italic 1.3rem Georgia,serif;color:#fff9;letter-spacing:.1em;text-align:center}#impact{position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 14deg at 50% 49%,transparent 0deg 13deg,#ffffff2b 13.3deg 13.7deg,transparent 14deg 25deg);opacity:0}#impact.shatter{animation:crack .8s ease-out forwards}@keyframes crack{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:.6;transform:scale(1.9)}}#shards{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}.shard{position:absolute;width:30vw;height:40vh;clip-path:polygon(10% 4%,95% 0,75% 100%,0 85%);border:1px solid #ffffff99;background:#fff2;filter:drop-shadow(0 0 8px #ebdbe844);opacity:0;overflow:hidden;transform:translate(0,0) rotate(0) scale(.4)}.shard video{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}.shard.fly{animation:fly 3.8s ease-out forwards}@keyframes fly{10%{opacity:1}35%{opacity:.95}100%{opacity:.53;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--size))}}.letter-panel{z-index:30;width:min(780px,94vw);height:min(78vh,850px);display:flex;flex-direction:column;background:linear-gradient(155deg,#161215ee,#09090bee);border:1px solid #d4ac754d;padding:25px clamp(20px,4vw,50px);box-shadow:0 30px 120px #000;backdrop-filter:blur(22px)}.letter-panel h2{letter-spacing:.12em;font-family:Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3vw,2.6rem);margin:15px 0 3px}.letter-sub{font:italic .95rem Georgia,serif;color:#d4bda8;line-height:1.6}#letterBody{overflow:auto;flex:1;scrollbar-color:#9a734c #1a1617;padding-right:12px}#letterBody p{font:1.05rem/1.85 Georgia,serif;color:#e4ddd8;margin:0 0 20px}.letter-actions{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid #ffffff25;padding-top:10px}.stage-copy{max-width:900px;text-align:center;margin-top:-6vh;text-shadow:0 4px 24px #000}#stageTitle{font-size:clamp(2.3rem,6vw,5rem);letter-spacing:.14em;font-weight:400;margin:20px 0;font-family:Georgia,serif}#stageQuote{font:italic clamp(1.25rem,2.5vw,2.15rem)/1.7 Georgia,serif;color:#ffebdf;opacity:0;transition:opacity 2s}#stageQuote.visible{opacity:1}.track-toggle{position:absolute;right:4vw;top:105px;background:#060507bb;color:#eee;border:1px solid #ddd5;padding:12px 18px;letter-spacing:.14em}.drawer{position:absolute;right:0;top:85px;bottom:85px;width:min(430px,100vw);background:#08080cf5;z-index:40;border-left:1px solid #b89b7544;padding:20px;overflow:auto;box-shadow:-15px 0 60px #000}.drawer-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;letter-spacing:.1em}.track-item{width:100%;text-align:left;background:transparent!important;color:#ddd!important;border:0!important;border-bottom:1px solid #ffffff21!important;padding:17px 7px!important;margin:0!important;font-weight:400!important;letter-spacing:0!important}.track-item.selected{color:#f1ba78!important}.note{color:#999;font-size:.8rem}#player{position:absolute;bottom:0;left:0;right:0;height:86px;z-index:80;display:flex;align-items:center;gap:13px;padding:10px 3vw;background:#030406e8;border-top:1px solid #ffffff25}#player[hidden],.drawer[hidden]{display:none!important}#player button{background:none!important;border:0!important;padding:10px!important;color:#fff!important;font-size:1.1rem!important;margin:0!important}.playing{width:220px;display:flex;flex-direction:column;gap:5px}.playing strong{font-size:.78rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.playing span{color:#be9a69;font-size:.7rem}.time{display:flex;align-items:center;gap:9px;flex:1;font-size:.7rem;color:#aaa}.time input{width:100%;accent-color:#d9aa78}.volume{font-size:.65rem;display:flex;align-items:center;gap:8px}.volume input{width:70px;accent-color:#d9aa78}#toast{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);background:#18151b;color:#ffcb97;padding:8px 15px;opacity:0;transition:.3s;z-index:200;pointer-events:none;font-size:.78rem}.no-motion *{animation:none!important;transition:none!important}@media(max-width:700px){header{height:65px}#phaseTag{display:none}.screen{padding:75px 20px 100px}#cover{padding-left:8vw}h1{font-size:18vw}.panel{padding:28px 20px}.letter-panel{height:78vh;padding:20px}.letter-actions button{font-size:.62rem!important;padding:10px!important}#player{gap:5px;padding:5px 10px}.playing{width:100px}.playing strong{font-size:.62rem}.time{gap:3px}.time span{display:none}.volume{display:none}.track-toggle{top:75px}.shard{width:48vw;height:27vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* Painel flutuante de letras: acima do cenário, abaixo do player */
#lyricsOverlay{position:absolute;inset:70px 0 85px;z-index:65;display:flex;justify-content:center;align-items:center;padding:12px;background:rgba(0,0,0,.68);backdrop-filter:blur(9px)}
#lyricsOverlay[hidden]{display:none!important}
.lyrics-panel{background:linear-gradient(155deg,#171219f7,#070709fa);border:1px solid #d2ad7970;box-shadow:0 24px 80px #000;max-width:760px;width:100%;max-height:100%;display:flex;flex-direction:column;padding:22px 28px;color:#eee}
.lyrics-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid #ffffff20;padding-bottom:14px}
.lyrics-top h2{font:normal clamp(1.2rem,3vw,2rem) Georgia,serif;margin:10px 0 0;color:#f1e5da}
#lyricsContent{white-space:pre-wrap;overflow-y:auto;min-height:60px;padding:18px 6px 20px 0;font:1.04rem/1.8 Georgia,serif;scrollbar-color:#bd9870 #171219}
.lyrics-note{margin:4px 0 0;color:#bea68f;font-size:.72rem}
#player #lyricsButton{font-size:.72rem!important;white-space:nowrap;color:#eec392!important}
@media(max-width:700px){#lyricsOverlay{top:62px;bottom:85px;padding:5px}.lyrics-panel{padding:14px;max-height:100%}#lyricsContent{font-size:.92rem;line-height:1.65}#player #lyricsButton{font-size:.62rem!important;padding:6px!important}}

/* V1.2: encarte integrado ao lado esquerdo do palco, sem cobrir a imagem */
#stage { justify-content: flex-end; }
#lyricsSidebar {
  position: absolute; z-index: 32;
  left: clamp(22px, 2.5vw, 52px); top: 110px; bottom: 108px;
  width: clamp(290px, 28vw, 480px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 23px;
  border: 1px solid rgba(226,185,127,.31);
  border-left: 2px solid rgba(236,180,112,.65);
  background: linear-gradient(100deg,rgba(8,7,11,.85),rgba(8,7,11,.49));
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 55px rgba(0,0,0,.28);
}
#lyricsSidebar[hidden] { display: none !important; }
.lyrics-side-top { display:flex;align-items:center;justify-content:space-between;gap:12px; }
#lyricsSidebar .kicker{font-size:.58rem;letter-spacing:.20em}
#lyricsSidebar #hideSideLyrics{font-size:1.3rem!important;color:#dfb989;line-height:1}
#sideLyricsTitle{margin:0;padding-bottom:11px;border-bottom:1px solid #ffffff20;font:normal 1.3rem Georgia,serif;letter-spacing:.05em}
#sideLyricsContent{
  overflow-y:auto; flex:1; min-height:0; padding-right:9px;
  white-space:pre-wrap; color:rgba(255,247,240,.93);
  font:1rem/1.75 Georgia,serif;
  scrollbar-width:thin;scrollbar-color:#c18f63 #151015;
}
#stage .stage-copy{margin-left:clamp(315px,32vw,535px);margin-right:1vw;max-width:calc(100vw - clamp(375px,36vw,600px));}
#stage #stageTitle{font-size:clamp(2.1rem,4.7vw,5rem)}
#player #lyricsButton{color:#eec392!important;font-size:.73rem!important}
@media(max-width:850px){
  #lyricsSidebar{left:12px;top:78px;bottom:100px;width:min(370px,calc(100vw - 24px));}
  #stage .stage-copy{margin-left:0;max-width:95vw;margin-right:0;}
  #stage #stageTitle{font-size:clamp(2.2rem,7vw,4rem)}
  #lyricsSidebar:not(.mobile-open){display:none;}
}

/* V1.3 · efeito de vidro realista, com triangulação, borda SVG e perspectiva */
#shards{perspective:1000px;isolation:isolate;z-index:15;transition:opacity 1.8s ease}
.glass-piece{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 50%;opacity:0;
 background:linear-gradient(128deg,rgba(234,243,255,.18),rgba(180,204,234,.035) 31%,rgba(255,255,255,.07) 64%,rgba(190,221,255,.2));
 box-shadow:inset 0 0 32px rgba(255,255,255,.19),0 0 22px rgba(180,211,250,.16);
 will-change:transform,opacity;backface-visibility:visible;
}
.glass-piece svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 2px rgba(240,250,255,.94))}
#shards.breaking .glass-piece{animation:realGlassFall 2.75s cubic-bezier(.13,.52,.21,1) var(--delay) forwards}
@keyframes realGlassFall{
  0%{opacity:.96;transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1)}
  14%{opacity:1;transform:translate3d(0,0,10px) rotateX(0) rotateY(0) rotateZ(0) scale(1)}
  60%{opacity:.88}
  100%{opacity:0;transform:translate3d(var(--tx),var(--ty),-145px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(.72)}
}
.memory-shard{position:absolute;z-index:3;overflow:hidden;opacity:0;
 filter:drop-shadow(0 5px 19px rgba(0,0,0,.85));
 transform:translate3d(0,60px,-100px) rotate(var(--angle)) scale(.35);
 box-shadow:inset 0 0 35px #fff5;will-change:transform,opacity;
}
.memory-shard:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#e1f6ff4d,transparent 26%,transparent 68%,#f1cbff34);pointer-events:none}
.memory-shard video{width:100%;height:100%;object-fit:cover;filter:saturate(.83) contrast(1.15)}
#shards.breaking .memory-shard{animation:memoryArrive 2.2s cubic-bezier(.2,.65,.24,1) var(--lag) forwards}
@keyframes memoryArrive{0%{opacity:0;transform:translate3d(0,60px,-100px) rotate(var(--angle)) scale(.35)}100%{opacity:.80;transform:translate3d(0,0,0) rotate(var(--angle)) scale(1)}}
#shards.settled .memory-shard{filter:brightness(.62) drop-shadow(0 6px 20px #000a)}
#impact{background:radial-gradient(circle at 50% 49%,#f2fcffbd 0 2px,#e5f9ff70 3px,transparent 18px),repeating-conic-gradient(from 9deg at 50% 49%,transparent 0 11deg,#e8f5ff6c 11.15deg 11.32deg,transparent 11.55deg 23deg)}
@media(max-width:700px){.memory-shard{max-width:42vw;height:22vh!important}#shards{perspective:500px}}
@media(prefers-reduced-motion:reduce){.glass-piece{display:none!important}.memory-shard{opacity:.55!important;transform:none!important}}


/* V1.4 · carta dentro de um grande fragmento e acima dos cacos */
#letter{z-index:34;justify-content:center;align-items:center;padding:95px 4vw 100px;}
#letter .letter-shard{position:relative;z-index:2;width:min(980px,96vw);height:min(82vh,920px);padding:18px;
 clip-path:polygon(4% 6%, 83% 1%, 98% 14%, 95% 96%, 10% 100%, 1% 86%, 0 21%);
 background:linear-gradient(135deg,rgba(237,246,255,.20),rgba(197,218,244,.06) 28%,rgba(255,255,255,.10) 58%,rgba(189,214,242,.18));
 border:1px solid rgba(243,248,255,.42); box-shadow:0 24px 90px rgba(0,0,0,.58), inset 0 0 38px rgba(255,255,255,.18);
 backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); overflow:hidden; }
#letter .letter-shard:before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(125deg,rgba(255,255,255,.28),transparent 18%,transparent 58%,rgba(255,255,255,.16) 84%),
 radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 22%),
 radial-gradient(circle at 88% 19%, rgba(255,255,255,.12), transparent 20%);
 mix-blend-mode:screen;opacity:.9;}
#letter .letter-shard:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
 background:repeating-linear-gradient(116deg,transparent 0 78px,rgba(255,255,255,.05) 79px 80px,transparent 81px 155px),
 repeating-linear-gradient(34deg,transparent 0 120px,rgba(255,255,255,.04) 121px 122px,transparent 123px 230px);}
#letter .letter-panel{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;
 background:linear-gradient(155deg,rgba(18,14,18,.84),rgba(7,7,10,.92)); border:1px solid rgba(212,172,117,.24);
 padding:25px clamp(20px,4vw,50px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); backdrop-filter:blur(14px);}
#letterBody{scrollbar-width:thin;}
#letterBody::-webkit-scrollbar{width:8px}
#letterBody::-webkit-scrollbar-thumb{background:#9a734c;border-radius:6px}
#letterBody::-webkit-scrollbar-track{background:#171316}
#letter .kicker,#letter h2,#letter .letter-sub,#letterBody p{position:relative;z-index:1}
/* quando a carta abre, os cacos permanecem ao fundo e não sobre a leitura */
#shards.under-letter{opacity:.12 !important; filter:blur(.2px);}
@media(max-width:700px){#letter{padding:72px 12px 95px}#letter .letter-shard{height:80vh;padding:12px;clip-path:polygon(4% 6%,87% 2%,98% 13%,94% 97%,8% 100%,1% 86%,0 18%)}#letter .letter-panel{padding:18px}}

/* V1.5 · fragmento irregular de cristal que protege a carta */
#letter{z-index:45;isolation:isolate}
#letter:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#0a0c15d8 0%,#08070ac9 46%,#03030677 100%);pointer-events:none}
#letter .letter-shard{width:min(1030px,95vw);height:min(84vh,930px);padding:clamp(10px,1.5vw,18px);position:relative;z-index:2;overflow:visible;isolation:isolate;clip-path:none;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 14px 22px #030407dd) drop-shadow(0 0 25px #b0ccec2c);}
#letter .letter-shard:before{content:"";position:absolute;inset:0;z-index:-2;opacity:1;mix-blend-mode:normal;pointer-events:none;clip-path:polygon(3% 13%,9% 7%,24% 5%,44% 2%,63% 4%,83% 1%,91% 6%,98% 18%,97% 35%,99% 64%,95% 85%,88% 96%,69% 98%,49% 96%,26% 100%,8% 96%,1% 86%,3% 65%,0 43%);background:linear-gradient(127deg,#f5fdffbb 0%,#e6f7ff2a 7%,#a8d9f513 19%,#fff7e533 31%,#bddef916 49%,#d6ecfa30 68%,#ffffffa6 99%);box-shadow:none;}
#letter .letter-shard:after{content:"";position:absolute;inset:5px;z-index:-1;opacity:1;pointer-events:none;clip-path:polygon(3% 13%,9% 7%,24% 5%,44% 2%,63% 4%,83% 1%,91% 6%,98% 18%,97% 35%,99% 64%,95% 85%,88% 96%,69% 98%,49% 96%,26% 100%,8% 96%,1% 86%,3% 65%,0 43%);background:linear-gradient(132deg,#ffffff79,transparent 12%,transparent 42%,#abcdeb32 59%,transparent 79%,#fff4d855),radial-gradient(ellipse at 12% 8%,#ffffff73,transparent 34%),linear-gradient(30deg,transparent 5%,#d6e9ff32 7%,transparent 10%,transparent 87%,#fff8e968 98%);}
#letter .letter-panel{height:100%;width:100%;position:relative;z-index:1;overflow:hidden;padding:clamp(18px,3vw,38px) clamp(29px,6vw,78px);background:linear-gradient(138deg,#191923ed,#090b12ec 45%,#0a0b10ed);clip-path:polygon(3% 13%,9% 7%,24% 5%,44% 2%,63% 4%,83% 1%,91% 6%,98% 18%,97% 35%,99% 64%,95% 85%,88% 96%,69% 98%,49% 96%,26% 100%,8% 96%,1% 86%,3% 65%,0 43%);border:0;box-shadow:none;backdrop-filter:blur(10px)}
/* brilho especular preservado nas pontas, sem fendas sobre a escrita */
#letter .letter-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 3% 15%,#e5f7ff45,transparent 17%),radial-gradient(ellipse at 95% 84%,#c7eaff45,transparent 15%),linear-gradient(114deg,transparent 6%,#e8faff1c 9%,transparent 12%,transparent 89%,#fffbe92f 96%);}
#letter .letter-panel:after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:.43;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,8% 10%,23% 12%,33% 6%,100% 14%,92% 90%,70% 96%,14% 89%,8% 10%);background:transparent; border:1px solid #e2f2ff45;}
#letter .letter-panel>*{position:relative;z-index:1}
#letter .letter-panel .letter-sub{margin:9px 0 12px}
#letterBody{min-height:0;overscroll-behavior:contain}
.letter-listening{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #ffffff1c}
#letter .listen-btn{border:1px solid #c5af91;padding:9px 12px;background:#d2ad79;color:#101014;font-weight:700;font-size:.68rem;letter-spacing:.06em;margin:0}
#letter .listen-btn.outline{background:#17151c!important;color:#e9dfd2!important}
#letter .listen-btn[hidden]{display:none!important}
#speechStatus{font-size:.72rem;color:#baafa7}
#shards.under-letter{opacity:.09!important;filter:blur(1.5px)}
@media(max-width:700px){#letter .letter-shard{width:100vw;height:83dvh;padding:5px}#letter .letter-panel{padding:38px 25px 22px}#letter .letter-panel h2{font-size:1.5rem}#letter .letter-panel .letter-sub{font-size:.8rem}#letterBody p{font-size:.91rem;line-height:1.65}#letter .listen-btn{font-size:.62rem;padding:8px}#speechStatus{width:100%}}