.classic-album{--paper:#f1e2c5;--paper-edge:#ddbf8c;--ink:#4a2c19;max-width:1140px;scroll-margin-top:1rem}
.classic-album[data-paper=honey]{--paper:#efd4a1;--paper-edge:#d8ae71}
.classic-album[data-paper=stone]{--paper:#e8e2d7;--paper-edge:#beb4a4;--ink:#392f2a}
.classic-album [hidden]{display:none!important}
.classic-album>.title,.classic-album>.eyebrow,.classic-album>[data-library-status]{text-align:center}
.classic-cover{display:grid;justify-items:center;gap:1rem;margin-inline:auto;max-width:950px}
.classic-cover img{display:block;width:100%;height:auto;border-radius:10px}
.classic-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.classic-controls label{display:grid;gap:.2rem}
.classic-controls select{font:inherit;max-width:100%;padding:.35rem;color:#f3dfb8;background:#18283b;border:1px solid #ad8857;border-radius:.45rem}
.classic-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:9px;border:1px solid #b0864f;border-radius:15px;background:linear-gradient(110deg,#3f1d12,#814827 47%,#3f1d12 50%,#814827 53%,#492315);box-shadow:0 12px 28px #0007;perspective:1200px}
.classic-paper{position:relative;min-width:0;border:1px solid #a57748;border-radius:7px;padding:clamp(.8rem,2.5vw,1.8rem);color:var(--ink);background:radial-gradient(ellipse at 55% 38%,var(--paper) 55%,var(--paper-edge));box-shadow:inset 0 0 0 4px #7d522623;font-family:Georgia,serif}
.classic-paper h2,.classic-paper h3,.classic-paper p{color:inherit}
.classic-profile{display:grid;min-height:280px;justify-items:center;align-content:center;text-align:center;gap:.55rem}
.classic-avatar{width:min(140px,70%);aspect-ratio:1;border:3px solid #9e6e35;border-radius:50%;object-fit:cover;color:#98734e;background:#e4c79c}
.classic-profile h2,.classic-index h2,.classic-page-title h2{margin:.25rem 0 .45rem;font-size:clamp(1.35rem,4vw,2.25rem);overflow-wrap:anywhere}
.classic-profile a{color:var(--ink);text-decoration:underline}
.classic-index input{display:block;width:100%;margin:.35rem 0 .7rem;padding:.55rem;background:#fff8ea;color:var(--ink);border:1px solid #a77b53;border-radius:6px;font:inherit}
.classic-index ul{display:grid;gap:.35rem;list-style:none;margin:0;padding:0 .25rem 0 0;max-height:21rem;overflow-y:auto}
.classic-index button{display:flex;justify-content:space-between;gap:.45rem;align-items:center;text-align:left;width:100%;min-height:44px;padding:.4rem .55rem;border:1px solid #a77b53;border-radius:6px;background:#fff5e34a;color:var(--ink);font:inherit;cursor:pointer}
.classic-index button span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.classic-page-title{position:relative;text-align:center;margin-bottom:.65rem}
.classic-page-title img{display:block;width:35px;height:35px;object-fit:contain;margin:auto;border-radius:50%}
.classic-page-title p{margin:0;font-style:italic}
.classic-contour{position:absolute;top:.7rem;right:.6rem;width:clamp(62px,22%,125px);height:auto;opacity:.15;fill:none;stroke:currentColor;stroke-width:1.8;pointer-events:none}
.classic-slots{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.classic-slot{min-width:0;text-align:center;border:1px solid #a77b5370;border-radius:7px;padding:.38rem;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.classic-slot h3,.classic-slot p{margin:0;overflow-wrap:anywhere}
.classic-slot h3{font-size:1rem}
.classic-slot p,.classic-folio{font-size:.8rem}
.classic-card-open,.classic-placeholder{display:grid;place-items:center;width:100%;max-width:145px;aspect-ratio:3/4;border:1px dashed #90663d;border-radius:6px;background:#fff3d32a;color:#8c6237}
.classic-placeholder{font-size:2.4rem}
.classic-card-open{border:0;background:none;padding:0;cursor:zoom-in}
.classic-card-open img{display:block;width:100%;height:100%;object-fit:contain;border-radius:5px}
.classic-add{padding:.3rem .4rem;min-height:40px;font:inherit;font-size:.85rem;background:#53351f;color:#fff1d3;border:1px solid #805535;border-radius:6px;cursor:pointer}
.classic-folio{text-align:center;margin:.7rem 0 0}
.classic-pagination{justify-content:center}
.classic-pagination button:disabled{opacity:.45}
.classic-spread.turn-next{animation:classic-next .32s ease-out}
.classic-spread.turn-prev{animation:classic-prev .32s ease-out}
@keyframes classic-next{from{transform:rotateY(-8deg);opacity:.65}}
@keyframes classic-prev{from{transform:rotateY(8deg);opacity:.65}}
@media(max-width:680px){.classic-spread{grid-template-columns:minmax(0,1fr);padding:5px}.classic-profile{min-height:155px}.classic-avatar{width:78px}.classic-controls{justify-content:center}}
@media(prefers-reduced-motion:reduce){.classic-spread.turn-next,.classic-spread.turn-prev{animation:none}}

.classic-landscape .classic-placeholder,.classic-landscape .classic-card-open{aspect-ratio:3/2;max-width:100%}

/* SVG elements have no reflected hidden property. Match the attribute itself. */
#classicAvatarFallback[hidden],#classicBack[hidden],#cardImage[hidden],#classicBack .kids-back-qr [hidden]{display:none!important}
#classicBack .kids-back-qr img{display:block;width:100%;height:100%;object-fit:contain}
#classicBack .classic-back-landscape{
 position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;
 width:min(100%,520px);aspect-ratio:3/2;padding:clamp(8px,2.5vw,18px);
 border:5px ridge var(--frame-metal,#c9d0d9);border-radius:12px;
 background:var(--frame-parchment,#f5dfb6);
 box-shadow:inset 0 0 0 3px var(--frame-accent,#23466b),inset 0 0 0 7px var(--frame-metal,#c9d0d9);
}
#classicBack .classic-back-landscape .kids-back-logo{
 display:block;width:100%;text-align:center;color:#f8e8c2;background:var(--frame-accent,#23466b);
 border-radius:5px;font-weight:800;letter-spacing:.07em;
}
#classicBack .classic-back-landscape .kids-back-cardname{
 align-self:center;padding:0 .4rem;color:#20180f;background:#fff8e4aa;border-radius:4px;
 text-align:center;font-weight:700;
}
#classicBack .classic-back-landscape .kids-back-scene{display:block;aspect-ratio:auto;background:none}
#classicBack .classic-back-landscape .kids-back-qr{
 position:static;width:clamp(48px,14vw,84px);height:auto;aspect-ratio:1;padding:3px;border-radius:3px;
}