.karaoke-intro{padding-bottom:30px}.karaoke-intro h1{font-size:clamp(3rem,7vw,6rem)}.karaoke-stage{background:radial-gradient(ellipse at top,#44302255,transparent 70%),#171412;border:1px solid #765337;max-width:1200px;margin:0 auto 90px;padding:34px}.karaoke-top{display:flex;gap:28px;align-items:center}.karaoke-top img{width:120px;height:120px;object-fit:cover;box-shadow:0 10px 35px #0008}.karaoke-top>div{min-width:0;flex:1}.karaoke-top h2{font-size:clamp(2rem,4vw,3rem);margin:12px 0;overflow-wrap:anywhere}.karaoke-select{font:inherit;color:var(--cream);background:#161310;border:1px solid #846044;padding:12px;max-width:100%;width:100%;min-width:0}.karaoke-toolbar{display:flex;gap:12px 22px;align-items:center;flex-wrap:wrap;margin:25px 0}.karaoke-toolbar label{font-size:.8rem;color:var(--muted)}.karaoke-toolbar input[type=number]{width:66px;background:#111;color:var(--cream);border:1px solid #806048;padding:8px;font:inherit}.karaoke-toolbar button{min-height:40px}.karaoke-lines{position:relative;height:460px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#a87e58 #201a15;padding:50px 12px;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}.karaoke-lines p,.karaoke-line{display:block;font:400 clamp(1.45rem,3vw,2.3rem)/1.45 var(--serif);text-align:center;width:100%;margin:0;border:0;background:none;padding:13px 12px;color:#aa9c8e;transition:color .18s,background .18s;text-wrap:balance}.karaoke-line:hover{color:#f6e5d3;background:#fff6}.karaoke-line.is-active{color:#ffe2ac;background:#9e693326;border-radius:6px;text-shadow:0 0 24px #ecb4744a;font-weight:600}.karaoke-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:25px}.karaoke-stage:is(:fullscreen,.is-expanded){max-width:none;width:100%;height:100%;margin:0;padding:30px;overflow:auto}.karaoke-stage:is(:fullscreen,.is-expanded) .karaoke-lines{height:calc(100vh - 330px)}.karaoke-stage:is(:fullscreen,.is-expanded) .karaoke-top img{width:70px;height:70px}.karaoke-stage:is(:fullscreen,.is-expanded) .karaoke-top h2{font-size:2rem}.karaoke-empty{color:var(--muted)}@media(max-width:760px){.karaoke-stage{margin:0 14px 45px;padding:20px 14px}.karaoke-top{align-items:flex-start;gap:14px}.karaoke-top img{width:70px;height:70px}.karaoke-top h2{font-size:2rem}.karaoke-lines{height:380px;padding-inline:0}.karaoke-line{font-size:1.7rem}.karaoke-toolbar{gap:10px 14px}.karaoke-stage:is(:fullscreen,.is-expanded){padding:15px}.karaoke-stage:is(:fullscreen,.is-expanded) .karaoke-lines{height:calc(100dvh - 360px)}}
.karaoke-toolbar button:not(.button):not(.text-link){font:inherit;font-size:.8rem;border:1px solid #846044;background:#241b15;color:#efdcc8;padding:8px 12px;cursor:pointer}.karaoke-toolbar button:focus-visible,.karaoke-line:focus-visible{outline:2px solid #edbb84;outline-offset:3px}
.karaoke-stage.is-expanded{position:fixed;inset:0;z-index:120}.karaoke-expanded{overflow:hidden}