/* A compact spread becomes a single book in the same space. */
.recognition-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center;gap:clamp(30px,5vw,80px);height:auto;min-height:520px;max-width:1200px;margin:20px auto 55px;perspective:1400px;isolation:isolate}
.recognition-label{display:block;font:12px 'Space Mono',monospace;letter-spacing:.1em;margin-bottom:20px;color:#204958}
.library-source{min-width:0;max-width:410px}
.recognition-stage .contents-paper{width:100%;margin:0;padding:clamp(22px,2.5vw,36px);transform:none;box-shadow:0 28px 55px #075b6440;border-radius:1px}
.recognition-stage .paper-heading span{font:bold clamp(23px,2.2vw,32px)/1.05 Georgia,serif;letter-spacing:-.035em}
.recognition-stage .paper-heading small{font:12px 'Space Mono';letter-spacing:.14em;margin-top:18px;padding-bottom:17px}
.recognition-stage .contents-list{margin:10px 0 0}
.recognition-stage .contents-list li{position:relative;gap:12px;align-items:center;padding:20px 0;min-height:86px;border-bottom:1px solid #263b3d20;font:18px/1.1 Georgia,serif;isolation:isolate}
.recognition-stage .contents-list li:before{content:'';position:absolute;inset:10px -10px;background:#d2f554;opacity:var(--highlight,0);transform:rotate(-2deg);z-index:-1}
.recognition-stage .contents-list strong{font-weight:400;display:block}
.recognition-stage .contents-list small{font:12px 'Space Mono';display:block;margin-top:7px;color:#536064}
.recognition-stage .contents-page{font:12px 'Space Mono';opacity:.65;align-self:flex-start;margin-top:3px}
.recognition-stage .paper-foot{font:12px 'Space Mono';margin-top:23px;letter-spacing:.02em}
.music-reveal{position:relative;width:100%;min-width:0;aspect-ratio:1.15;align-self:center}
.music-reveal>.recognition-label{position:relative;z-index:7}
.extracted-column,.gig-result{position:absolute;inset:55px 0 0;min-width:0}
.extracted-page,.gig-page{background:#fff;box-shadow:0 18px 35px #07425135;will-change:transform,opacity;overflow:hidden;border:1px solid #1e46451a;transform-origin:50% 50%}
.extracted-page{position:absolute;width:44%;top:0;left:28%;z-index:2}
.extracted-page:nth-child(1){left:0;top:45px;transform:rotate(-9deg);z-index:1}
.extracted-page:nth-child(3){left:56%;top:62px;transform:rotate(9deg);z-index:3}
.score-caption{display:flex;gap:9px;align-items:center;padding:9px 10px;border-bottom:1px solid #ddd;color:#273d43;background:#f6f6ee;font:12px/1.25 'DM Sans',sans-serif;min-height:40px}
.score-caption>span{font:11px 'Space Mono';color:#366371;flex:none}
.score-caption strong{font-weight:500}
.extracted-page img,.gig-page img{display:block;width:100%;height:auto;aspect-ratio:1391/1800;object-fit:contain;background:#fff}
.gig-result{pointer-events:none;z-index:5}
.gig-stack{position:absolute;left:26%;top:24px;width:47%;aspect-ratio:1391/2000;perspective:1000px}
.gig-page{position:absolute;inset:0 auto auto 0;width:100%;opacity:0}
.gig-page:nth-child(1){z-index:3;transform:translate(0,20px) rotate(-3deg)}
.gig-page:nth-child(2){z-index:2;transform:translate(8px,10px) rotate(1deg)}
.gig-page:nth-child(3){z-index:1;transform:translate(16px,0) rotate(5deg)}
.song-lens{position:absolute;left:0;top:0;width:164px;height:164px;border:2px solid #f1ffffd9;border-radius:50%;z-index:6;pointer-events:none;opacity:0;box-shadow:0 0 0 9px #684cf320,0 18px 35px #133e6055,inset 0 0 25px #fff8;background:#f1efdc;transform-origin:center;will-change:transform}
.lens-viewport{position:absolute;inset:0;overflow:hidden;border-radius:inherit;display:flex;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 25% 15%,#ffffffaa,transparent 70%),#e7f898;padding:19px 12px;color:#162b33}
.lens-title{font:27px/1.08 Georgia,serif;letter-spacing:-.025em}
.lens-composer{font:12px 'Space Mono';margin-top:9px}
.song-lens .lens-caption{top:-32px;font-size:11px;padding:6px 9px}
body.motion-paused .song-lens{visibility:hidden}

@media(max-width:900px){.recognition-stage{gap:30px;min-height:480px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.recognition-stage .contents-paper{padding:24px 20px}.recognition-stage .contents-list li{font-size:17px;min-height:80px}.music-reveal{aspect-ratio:.85}.score-caption{padding:8px 7px;gap:6px}.song-lens{width:140px;height:140px}.lens-title{font-size:23px}}
@media(max-width:700px),(max-aspect-ratio:3/4){.recognition-stage{display:flex;flex-direction:column;gap:22px;min-height:0;margin:10px auto 35px;max-width:600px}.library-source{width:100%;max-width:none}.recognition-stage .contents-paper{padding:20px 24px}.recognition-stage .paper-heading{display:flex;align-items:baseline;gap:16px;justify-content:space-between}.recognition-stage .paper-heading span{font-size:25px}.recognition-stage .paper-heading small{font-size:12px;border:0;margin:0;padding:0}.recognition-stage .contents-list li{min-height:62px;padding:13px 0;font-size:17px}.recognition-stage .contents-list li>span:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px}.recognition-stage .contents-list small{margin:0}.recognition-stage .paper-foot{display:none}.recognition-label{margin-bottom:12px}.music-reveal{width:90%;max-width:420px;aspect-ratio:1.18}.extracted-column,.gig-result{inset:35px 0 0}.extracted-page:nth-child(1){top:23px}.extracted-page:nth-child(3){top:35px}.gig-stack{top:0}.song-lens{width:128px;height:128px}.lens-title{font-size:23px}.score-caption{min-height:43px;padding:7px;font-size:12px;gap:5px}.song-lens .lens-caption{font-size:11px}}
@media(max-width:380px){.recognition-stage .contents-paper{padding:17px}.recognition-stage .paper-heading span{font-size:22px}.recognition-stage .paper-heading small{font-size:11px}.recognition-stage .contents-list li{font-size:16px}.music-reveal{width:95%;aspect-ratio:1.05}.score-caption{padding:6px;gap:4px}.score-caption>span{display:none}}
@media(prefers-reduced-motion:reduce){.song-lens{display:none}}

/* Book typography: a printed index, with page leaders instead of list dividers. */
.recognition-stage .contents-paper{background:#f6f4e9;color:#25251f;border-radius:0;padding:38px 30px 22px}
.recognition-stage .paper-heading{display:block}
.recognition-stage .paper-heading span{font:21px/1.2 'Times New Roman',serif;letter-spacing:.13em;text-align:center}
.recognition-stage .paper-heading small{display:block;text-align:right;font:10px/1.2 'Times New Roman',serif;letter-spacing:.08em;border:0;margin:32px 0 0;padding:0}
.recognition-stage .contents-list{margin:0}
.recognition-stage .contents-list li{border:0;gap:9px;min-height:82px;padding:20px 0;align-items:baseline;font:18px/1.2 'Times New Roman',serif}
.recognition-stage .contents-list li>span:first-child{display:block;flex:0 1 auto;min-width:0}
.recognition-stage .contents-list strong{font-weight:400}
.recognition-stage .contents-list small{display:block;font:italic 14px/1.2 'Times New Roman',serif;color:inherit;margin:6px 0 0}
.recognition-stage .contents-dots{flex:1;min-width:18px;border-bottom:1px dotted #55534a;opacity:.7}
.recognition-stage .contents-page{font:16px/1.2 'Times New Roman',serif;opacity:1;align-self:baseline;margin:0}
.recognition-stage .paper-foot{display:block;font:14px/1.2 'Times New Roman',serif;text-align:center;margin:32px 0 0;letter-spacing:0}
.lens-composer{font:italic 15px/1.2 'Times New Roman',serif}
@media(max-width:700px),(max-aspect-ratio:3/4){.recognition-stage .contents-paper{padding:25px 27px 18px}.recognition-stage .paper-heading span{font-size:20px}.recognition-stage .paper-heading small{margin-top:20px}.recognition-stage .contents-list li{min-height:65px;padding:12px 0;font-size:18px}.recognition-stage .contents-list small{font-size:14px;margin-top:4px}.recognition-stage .paper-foot{margin-top:16px}}
