/* ============================================================
   IDK-COLLECTION.CSS — Idakera Studio Compendium Engine
   Namespace: idk-
   Genre-grouped story compendium. Playful fantasy,
   stop-motion handcrafted styling. Zero dependencies.
   ============================================================ */

body.idk-compendium-body {
    background-color: var(--idk-bg);
    color: var(--idk-ink);
    font-family: var(--idk-font-serif);
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196, 184, 168, 0.35), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(196, 184, 168, 0.25), transparent 70%);
}

/* ========================
   HEADER
======================== */
.idk-comp-header {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 2rem 4rem; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(to bottom, rgba(240, 235, 227, 0.92) 40%, transparent);
    pointer-events: none;
}
.idk-comp-header > * { pointer-events: auto; }

.idk-comp-logo a { display: flex; flex-direction: column; line-height: 1.1; }
.idk-logo-main { font-family: var(--idk-font-serif); font-size: 1.5rem; font-weight: 700; color: var(--idk-ink); }
.idk-logo-sub  { font-family: var(--idk-font-serif); font-size: 0.85rem; font-weight: 300; color: var(--idk-ink-muted); letter-spacing: 0.05em; }

.idk-comp-header-right { display: flex; align-items: center; gap: 2rem; }

.idk-exit-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--idk-font-sans); font-size: 0.8rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--idk-ink);
}
.idk-exit-arrow {
    display: inline-block;
    transition: transform 0.4s var(--idk-ease-expo);
}
.idk-exit-link:hover .idk-exit-arrow { transform: translateX(-4px); }

/* Ink cursor trail canvas (matches homepage) */
#idk-trail-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9998;
}

/* Language switcher (mirrors homepage) */
.idk-lang-switcher { display: flex; align-items: center; gap: 0.4rem; }
.idk-lang-sep { font-family: var(--idk-font-sans); font-size: 0.75rem; color: var(--idk-ink-muted); }
.idk-btn-lang {
    position: relative;
    background: none; border: none; padding: 0.2rem 0.1rem;
    font-family: var(--idk-font-sans); font-size: 0.75rem;
    letter-spacing: 0.15em; font-weight: 400;
    color: var(--idk-ink-muted); transition: color 0.3s;
}
.idk-btn-lang::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 1px; background: var(--idk-ink);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.4s var(--idk-ease-expo);
}
.idk-btn-lang:hover { color: var(--idk-ink); }
.idk-btn-lang.idk-active { color: var(--idk-ink); font-weight: 600; }
.idk-btn-lang.idk-active::after { transform: scaleX(1); }

/* ========================
   COMPENDIUM LAYOUT
======================== */
.idk-compendium {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10rem 2.5rem 4rem;
    position: relative;
}

/* HERO */
.idk-comp-hero { text-align: center; padding: 2rem 0 5rem; }

.idk-comp-kicker {
    font-family: var(--idk-font-sans);
    font-size: 0.75rem; letter-spacing: 0.35em; text-transform: uppercase;
    color: var(--idk-ink-muted); margin-bottom: 1.2rem;
}

.idk-comp-title {
    font-family: var(--idk-font-display);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 400; line-height: 1.05;
    color: var(--idk-accent);
}

.idk-comp-tagline {
    font-family: var(--idk-font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--idk-ink-muted);
    max-width: 560px; margin: 1.4rem auto 0;
    line-height: 1.6;
}

.idk-comp-hero-ornament {
    width: 200px; margin: 2.5rem auto 0;
    color: rgba(160, 130, 60, 0.55);
}
.idk-comp-hero-ornament svg { width: 100%; height: auto; display: block; }

/* GENRE SECTIONS */
.idk-genre-section { padding: 3rem 0 4rem; position: relative; }

.idk-genre-heading {
    display: flex; flex-direction: column; align-items: flex-start;
    margin-bottom: 3rem; position: relative;
}

.idk-genre-index {
    font-family: var(--idk-font-display);
    font-size: 3.2rem; line-height: 1;
    color: rgba(160, 130, 60, 0.35);
    margin-bottom: 0.4rem;
}

.idk-genre-title {
    font-family: var(--idk-font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 400; color: var(--idk-ink);
    position: relative; padding-bottom: 0.7rem;
}
.idk-genre-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px;
    background-image: linear-gradient(to right, rgba(160, 130, 60, 0.7) 60%, transparent 0%);
    background-size: 9px 1px; background-repeat: repeat-x;
}

.idk-genre-sub {
    font-family: var(--idk-font-serif); font-style: italic;
    font-size: 1rem; color: var(--idk-ink-muted); margin-top: 0.7rem;
}

/* ========================
   STORY CARDS — handcrafted plates
======================== */
.idk-story-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    background: var(--idk-cream);
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(26, 26, 26, 0.08),
        0 12px 40px rgba(26, 26, 26, 0.14);
    transition: transform 0.5s var(--idk-ease-expo), box-shadow 0.5s var(--idk-ease-expo);
}
/* inner stitched border */
.idk-story-card::before {
    content: ''; position: absolute; inset: 10px;
    border: 1.5px dashed rgba(160, 130, 60, 0.4);
    border-radius: 3px; pointer-events: none; z-index: 3;
}

.idk-tilt-left  { transform: rotate(-0.6deg); }
.idk-tilt-right { transform: rotate(0.6deg); }

.idk-story-card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow:
        0 2px 4px rgba(26, 26, 26, 0.08),
        0 22px 60px rgba(26, 26, 26, 0.2);
}

/* Tape strips — like a scrapbook / behind-the-scenes photo wall */
.idk-card-tape {
    position: absolute; width: 110px; height: 32px;
    background: rgba(214, 196, 161, 0.5);
    border-left: 1px dashed rgba(255, 255, 255, 0.5);
    border-right: 1px dashed rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.12);
    z-index: 5; pointer-events: none;
    backdrop-filter: blur(1px);
}
.idk-tape-tl { top: -14px; left: 6%;  transform: rotate(-5deg); }
.idk-tape-br { bottom: -14px; right: 6%; transform: rotate(4deg); }
.idk-tape-tr { top: -14px; right: 6%; transform: rotate(5deg); }
.idk-tape-bl { bottom: -14px; left: 6%; transform: rotate(-4deg); }

/* COVER */
.idk-card-cover {
    position: relative; overflow: hidden;
    border-radius: 4px 0 0 4px;
    min-height: 420px;
    background: var(--idk-bg-dark);
}
.idk-card-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.2s var(--idk-ease-expo);
}
.idk-story-card:hover .idk-card-cover img {
    /* stop-motion nudge: stepped, not smooth — like frames of a puppet film */
    animation: idkStopMotionNudge 0.9s steps(3, end) infinite alternate;
}
@keyframes idkStopMotionNudge {
    from { transform: scale(1.04) translate(0, 0) rotate(0deg); }
    to   { transform: scale(1.06) translate(-4px, 2px) rotate(0.4deg); }
}

.idk-card-cover-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(14, 14, 14, 0.45), transparent 45%);
}

/* Status badges — wax-seal inspired */
.idk-card-badge {
    position: absolute; top: 1.2rem; left: 1.2rem; z-index: 4;
    font-family: var(--idk-font-sans); font-size: 0.68rem;
    letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
    padding: 0.45rem 0.9rem; border-radius: 2px;
    transform: rotate(-2deg);
}
.idk-badge-live {
    background: rgba(58, 90, 64, 0.92); color: var(--idk-cream);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.idk-badge-soon {
    background: rgba(160, 130, 60, 0.95); color: #fffdf5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Scrolls of Light — handcrafted "cover under construction" art */
.idk-cover-scrolls { background: radial-gradient(ellipse at 50% 30%, #2a2438 0%, #171226 55%, #0e0b18 100%); }
.idk-scrolls-art { position: absolute; inset: 0; overflow: hidden; }

.idk-scrolls-rays {
    position: absolute; inset: -40%;
    background: conic-gradient(from 0deg at 50% 38%,
        transparent 0deg,  rgba(212, 175, 55, 0.10) 12deg, transparent 24deg,
        transparent 60deg, rgba(212, 175, 55, 0.08) 74deg, transparent 88deg,
        transparent 130deg, rgba(212, 175, 55, 0.10) 144deg, transparent 158deg,
        transparent 200deg, rgba(212, 175, 55, 0.08) 214deg, transparent 228deg,
        transparent 270deg, rgba(212, 175, 55, 0.10) 284deg, transparent 298deg,
        transparent 360deg);
    animation: idkRaysTurn 40s linear infinite;
}
@keyframes idkRaysTurn { to { transform: rotate(360deg); } }

.idk-scrolls-stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 244, 200, 0.9), transparent 100%),
        radial-gradient(1px 1px at 72% 15%, rgba(255, 244, 200, 0.7), transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 45%, rgba(255, 244, 200, 0.6), transparent 100%),
        radial-gradient(1px 1px at 30% 65%, rgba(255, 244, 200, 0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 78%, rgba(255, 244, 200, 0.55), transparent 100%),
        radial-gradient(1px 1px at 10% 85%, rgba(255, 244, 200, 0.45), transparent 100%);
}

.idk-scrolls-icon {
    position: absolute; top: 50%; left: 50%;
    width: clamp(90px, 28%, 150px); height: auto;
    transform: translate(-50%, -55%);
    color: rgba(232, 205, 130, 0.9);
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.35));
}
.idk-story-card:hover .idk-scrolls-icon {
    animation: idkStopMotionFloat 1.2s steps(4, end) infinite alternate;
}
@keyframes idkStopMotionFloat {
    from { transform: translate(-50%, -55%) rotate(0deg); }
    to   { transform: translate(-50%, -59%) rotate(-1.2deg); }
}

/* CARD BODY */
.idk-card-body {
    padding: 3rem 3rem 2.5rem;
    display: flex; flex-direction: column;
    position: relative; z-index: 4;
}

.idk-card-genre {
    font-family: var(--idk-font-sans); font-size: 0.7rem;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(160, 130, 60, 0.9); margin-bottom: 0.9rem;
}

.idk-card-title {
    font-family: var(--idk-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400; line-height: 1.1;
    color: var(--idk-accent); margin-bottom: 0.4rem;
}

.idk-card-subtitle {
    font-family: var(--idk-font-serif); font-style: italic;
    font-size: 1.05rem; color: var(--idk-ink-muted);
    margin-bottom: 0.6rem;
}

.idk-card-meta {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--idk-font-sans); font-size: 0.82rem;
    letter-spacing: 0.08em; color: var(--idk-ink-muted);
    margin: 0.4rem 0 1.2rem;
}
.idk-icon-books { width: 24px; height: 16px; fill: rgba(160, 130, 60, 0.8); flex-shrink: 0; }

.idk-card-desc {
    font-family: var(--idk-font-serif);
    font-size: 1.08rem; line-height: 1.65;
    color: var(--idk-ink);
    margin-bottom: 2rem; max-width: 44ch;
}

/* Begin button — rising-fill, matches site primary */
.idk-btn-begin {
    display: inline-block; position: relative; overflow: hidden;
    padding: 0.95rem 2.4rem;
    background: var(--idk-ink); color: var(--idk-cream);
    font-family: var(--idk-font-sans); font-size: 0.75rem;
    letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400;
    border-radius: 2px; border: 1px solid var(--idk-ink);
    transition: color 0.4s var(--idk-ease-expo), transform 0.4s var(--idk-ease-expo);
    z-index: 0;
}
.idk-btn-begin::before {
    content: ''; position: absolute; inset: 0;
    background: var(--idk-cream);
    transform: scaleY(0); transform-origin: bottom center;
    transition: transform 0.45s var(--idk-ease-expo);
    z-index: -1;
}
.idk-btn-begin:hover::before { transform: scaleY(1); }
.idk-btn-begin:hover, .idk-book-content .idk-btn-begin:hover { color: #1a1a1a; transform: translateY(-2px); }

.idk-btn-disabled {
    background: transparent; color: var(--idk-ink-muted);
    border: 1px dashed rgba(107, 101, 96, 0.6);
    pointer-events: none;
}
.idk-btn-disabled::before { display: none; }

/* Chapter quick links */
.idk-card-chapters { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px dashed rgba(160, 130, 60, 0.35); }

.idk-chapters-label {
    font-family: var(--idk-font-sans); font-size: 0.68rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--idk-ink-muted); margin-bottom: 0.8rem;
}

.idk-chapter-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.idk-chapter-link {
    font-family: var(--idk-font-sans); font-size: 0.78rem;
    letter-spacing: 0.06em; color: var(--idk-accent);
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(61, 53, 48, 0.25); border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.3s var(--idk-ease-expo);
}
.idk-chapter-link:hover {
    background: var(--idk-ink); color: var(--idk-cream);
    border-color: var(--idk-ink);
    transform: translateY(-2px) rotate(-1deg);
}

.idk-card-studio-line {
    margin-top: 2rem;
    font-family: var(--idk-font-serif); font-style: italic;
    font-size: 0.9rem; color: rgba(160, 130, 60, 0.9);
}

/* Upcoming card: slightly hushed */
.idk-card-upcoming .idk-card-desc { color: var(--idk-ink); }

/* Gold thread between sections */
.idk-comp-thread {
    width: 100px; height: 200px; margin: 0 auto;
    color: rgba(160, 130, 60, 0.45);
}
.idk-comp-thread svg { width: 100%; height: 100%; display: block; }

/* FOOTER */
.idk-comp-footer {
    text-align: center; padding: 3rem 0 2rem;
    font-family: var(--idk-font-serif); font-style: italic;
    font-size: 1rem; color: var(--idk-ink-muted);
}
.idk-comp-footer .idk-comp-hero-ornament { margin-bottom: 1.6rem; }

/* ========================
   RESPONSIVE
======================== */
@media (max-width: 900px) {
    .idk-comp-header { padding: 1.4rem 1.5rem; }
    .idk-comp-header-right { gap: 1.2rem; }
    .idk-compendium { padding: 8rem 1.25rem 3rem; }

    .idk-story-card { grid-template-columns: 1fr; }
    .idk-card-cover { min-height: 260px; border-radius: 4px 4px 0 0; }
    .idk-card-body { padding: 2rem 1.6rem; }
    .idk-card-tape { width: 80px; height: 26px; }
    .idk-tilt-left, .idk-tilt-right { transform: none; }
}

/* ========================
   REDUCED MOTION
======================== */
@media (prefers-reduced-motion: reduce) {
    .idk-story-card:hover .idk-card-cover img,
    .idk-story-card:hover .idk-scrolls-icon { animation: none; }
    .idk-scrolls-rays { animation: none; }
    [data-idk-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   LIBRARY — progressive enhancement of the existing catalogue.
   Wood, permanent spines, props, covers and leaves are independent
   elements. These local tokens do not change the homepage theme.
   ============================================================ */
html.idk-library-document { overflow-x: clip; scroll-behavior: auto; }
body.idk-compendium-body.idk-library-enabled {
    --idk-bg: #110d0a;
    --idk-ink: #f0dfbd;
    --idk-ink-muted: #c3ad89;
    --idk-accent: #e0b877;
    --library-gold: #bd9656;
    --archive-spines: url('img/library/archive-spines-v2.webp');
    --archive-walnut: url('img/library/archive-walnut-v1.webp');
    --archive-paper: url('img/library/archive-paper-v2.webp');
    --archive-desktop: url('img/library/archive-desk-surface-v2.webp');
    --archive-cover-leather: url('img/library/archive-cover-leather-v2.webp');
    background: #110d0a;
    overflow-x: clip;
    overflow-y: visible;
}
.idk-library-enabled .idk-comp-header {
    background: linear-gradient(#130e0af2 35%, #130e0a00);
}
.idk-library-enabled .idk-compendium { max-width: none; padding: 0; }
.idk-library-enabled .idk-comp-hero {
    position: relative;
    padding: 10rem 2rem 4rem;
    min-height: calc(64 * var(--idk-vh));
    background:
        radial-gradient(ellipse at 50% 80%, #92622f24, transparent 65%),
        repeating-linear-gradient(0deg, #30201515 0 2px, transparent 2px 6px),
        linear-gradient(90deg, #24180f, #0f0c09 22% 78%, #24180f);
    border: 20px solid #302016;
    border-top: 0;
    border-bottom: 0;
    box-shadow: inset 0 0 90px #000;
}
.idk-library-enabled .idk-comp-title { font-size: clamp(2.7rem, 6.4vw, 5.5rem); }
.idk-library-enabled .idk-comp-tagline { color: #c7b99f; }
.idk-library-enabled .idk-comp-kicker { color: var(--library-gold); }
.idk-library-enter {
    display: inline-flex; align-items: center; gap: 1.3rem;
    margin-top: 1.8rem; padding: 0.65rem 0;
    color: #dec296; border-bottom: 1px solid #bd96565c;
    font: 0.65rem var(--idk-font-sans); letter-spacing: 0.2em; text-transform: uppercase;
}
.idk-library-runway { position: relative; height: calc(var(--shelf-count) * calc(500 * var(--idk-vh)) + calc(100 * var(--idk-vh))); }
.idk-library-viewport {
    position: sticky; top: 0; height: calc(100 * var(--idk-vh)); overflow: hidden; isolation: isolate;
    background: #130f0b;
}
.idk-library-camera { position: relative; height: 100%; }
.idk-library-bay {
    --shelf-line: 77%; --shelf-depth: 48px; --contact-inset: 7px;
    position: absolute; top: calc(var(--bay-index) * 100%); left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 50% 45%, #a27b381f, transparent 55%),
        linear-gradient(90deg, #020101ec, #090603a3 18% 78%, #020101eb),
        var(--archive-walnut);
    background-size: 100% 100%, 100% 100%, 700px 700px;
    border-left: 24px ridge #3d291b; border-right: 24px ridge #3d291b;
    box-shadow: inset 0 0 100px #000;
}
.idk-library-bay::before, .idk-library-bay::after {
    content: ''; position: absolute; width: 18px; height: 100%; top: 0;
    background: linear-gradient(90deg, #070503eb, #b8833633 30%, #08050399 70%), var(--archive-walnut);
    background-size: 100% 100%, 160px 600px;
    border-inline: 2px solid #9e723238;
    box-shadow: 8px 0 20px #000b, inset 3px 0 3px #bc8e4733;
}
.idk-library-bay::before { left: 10%; }
.idk-library-bay::after { right: 10%; }
.idk-library-bay-heading { position: absolute; top: 105px; left: 9%; right: 9%; z-index: 2; }
.idk-library-bay-heading .idk-genre-heading {
    flex-flow: row wrap; align-items: baseline; gap: 0.4rem 1.7rem; margin: 0;
    border-top: 1px solid #bd965638; border-bottom: 1px solid #bd965638; padding: 0.8rem 1rem;
}
.idk-library-bay-heading .idk-genre-index { margin: 0; font-size: 2rem; color: var(--library-gold); }
.idk-library-bay-heading .idk-genre-title { padding: 0; font-size: clamp(1rem, 2vw, 1.65rem); }
.idk-library-bay-heading .idk-genre-title::after { display: none; }
.idk-library-bay-heading .idk-genre-sub { margin: 0; font-size: 0.92rem; color: #bda887; }
.idk-library-shelf-fill {
    position: absolute; top: 28%; height: 49%; width: 38%;
    display: flex; align-items: end; justify-content: center; gap: 2px;
    opacity: calc(1 - var(--shelf-dim, 0) * 0.7);
}
.idk-fill-left { left: 2%; }
.idk-fill-right { right: 2%; }
.idk-library-spine {
    flex: var(--spine-weight) 1 0; max-width: 88px; min-width: 12px;
    height: var(--spine-height); transform: rotate(var(--spine-lean)); transform-origin: bottom;
    position: relative; display: block;
    border-radius: 5px 7px 2px 2px; border: 1px solid #b58c4338;
    color: #d6b575;
    background-color: var(--spine-leather);
    background-image: linear-gradient(90deg, #000b, transparent 18% 67%, #000b), var(--archive-spines);
    background-size: 100% 100%, 800% 100%;
    background-position: center, var(--binding-x) center;
    box-shadow: inset 2px 0 3px #d9a6521c, inset -3px 0 5px #000b, 4px 2px 8px #000c, 0 -2px 1px #e1b06421;
}
.idk-library-spine::before, .idk-library-spine::after {
    content: ''; position: absolute; pointer-events: none;
}
.idk-library-spine::before {
    inset: 3px 2px; border-inline: 1px solid #d2a85838; border-radius: 3px;
    background: radial-gradient(ellipse at 20% 2%, #e6b87118, transparent 28%), linear-gradient(#0002, transparent 30% 78%, #0004);
}
.idk-library-spine::after { bottom: 2px; top: 2px; right: -3px; width: 3px; background: #090705; box-shadow: 2px 0 5px #000; }
.idk-library-spine .idk-spine-title {
    position: absolute; left: 8%; right: 8%; top: 23%; height: 12%;
    writing-mode: horizontal-tb; display: grid; place-items: center; overflow: hidden;
    text-align: center; text-transform: uppercase;
    font: clamp(6px, 0.6vw, 8px)/1.45 var(--idk-font-display); letter-spacing: 0.06em;
    text-shadow: 0 1px 1px #000, 0 -1px #a3743540;
}
.idk-library-spine.idk-spine-long-title .idk-spine-title {
    writing-mode: vertical-rl; top: 20%; height: 17%; left: 14%; right: 14%; line-height: 1.25;
}
.idk-library-spine .idk-spine-band {
    position: absolute; height: 6px; left: 0; right: 0;
    background: linear-gradient(#0a0705, #98743a70 45%, #000b); border-block: 1px solid #ac834533;
    box-shadow: 0 2px 2px #0006;
}
.idk-band-upper { top: 17%; }
.idk-band-lower { bottom: 19%; }
.idk-spine-headcap { position: absolute; left: 4px; right: 4px; top: 0; height: 3px; border-radius: 50%; background: #ad864555; }
.idk-spine-folio { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font: 7px var(--idk-font-serif); color: #e0bc79a6; }
.idk-binding-1, .idk-binding-6 { border-color: #80805822; }
.idk-binding-4 { border-radius: 7px 3px 2px 2px; }
.idk-binding-5::before { border-inline-style: dashed; opacity: 0.8; }
.idk-library-beam {
    position: absolute; top: var(--shelf-line); left: 0; right: 0; height: 38px; z-index: 3;
    border-top: 3px solid #9d6f3c66; border-bottom: 4px solid #150d08;
    background:
        linear-gradient(#c28d4940, #0a06038c 28%, #080503bb 64%, #a5763840 93%, #090603),
        var(--archive-walnut);
    background-size: 100% 100%, 600px 170px;
    box-shadow: 0 17px 28px #000e, inset 0 4px 3px #d8a86b3d;
}
.idk-library-beam span { position: absolute; right: 8%; top: 3px; color: var(--library-gold); }
.idk-library-lower-shelf {
    position: absolute; top: 82%; bottom: -10%; left: 2%; right: 2%;
    display: flex; align-items: end; gap: 3px; opacity: 0.72;
}
.idk-library-stack {
    position: absolute; z-index: 4; left: 3%; top: calc(77% - 81px);
    width: min(14vw, 180px); transform: rotate(-1.5deg); pointer-events: none;
}
.idk-stack-volume {
    position: relative; display: block; height: 25px; margin-left: var(--stack-offset);
    margin-top: 2px; border: 1px solid #a77d4244; border-radius: 2px 5px 5px 2px;
    background: linear-gradient(#0004, transparent 35%, #000b), var(--archive-spines);
    background-size: 100% 100%, 800% 100%; background-position: center, var(--stack-x) center;
    box-shadow: 3px 3px 5px #000b, inset 0 1px #d7ac5759;
}
.idk-stack-volume > span { position: absolute; inset: 6px 11px; font: 7px var(--idk-font-display); text-transform: uppercase; text-align: center; color: #dbc086; letter-spacing: 0.1em; text-shadow: 0 1px #000; }
.idk-stack-volume i { position: absolute; inset: 3px 5px; border: 1px solid #c99b494d; }
.idk-library-scroll {
    position: absolute; z-index: 4; right: 9%; top: calc(77% - 32px); width: 130px; height: 29px;
    border-radius: 50% 20% 15% 30%; transform: rotate(2deg); pointer-events: none;
    background: repeating-linear-gradient(8deg, #51311615 0 1px, transparent 1px 4px), linear-gradient(#ba9965, #77603e 55%, #382517);
    box-shadow: 2px 5px 8px #000d, inset 0 3px 7px #e9c99533;
}
.idk-library-scroll::before { content: ''; position: absolute; left: 28%; width: 7px; top: -2px; bottom: -2px; border-inline: 1px solid #97744c; background: #48311d; transform: rotate(-7deg); }
.idk-library-scroll > i { position: absolute; top: -1px; bottom: -1px; width: 16px; border-radius: 50%; border: 3px solid #997844; background: #362413; box-shadow: inset 0 0 0 2px #b0945b, 1px 1px 4px #000; }
.idk-library-scroll > i:first-child { left: -4px; }
.idk-library-scroll > i:last-child { right: -3px; width: 8px; opacity: 0.7; }
.idk-library-archive-seal { position: absolute; right: 3%; top: 22%; width: 90px; color: #b18a4059; pointer-events: none; }
.idk-library-archive-seal svg { display: block; width: 100%; }
.idk-library-book-slot {
    --book-width: min(35vw, 400px, calc(39 * var(--idk-vh)));
    --book-height: calc(var(--book-width) * 1.39);
    position: absolute; left: 50%; top: 49%; z-index: 5;
    width: var(--book-width); height: var(--book-height);
    transform: translate(-50%, -43%); perspective: 1800px;
}
.idk-library-book {
    --book-depth: 52px;
    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
    transform: rotateY(20deg) rotateX(6deg) scale(0.80);
}
.idk-book-back, .idk-book-paper, .idk-book-cover, .idk-book-leaf {
    position: absolute; inset: 0; transform-style: preserve-3d;
    border-radius: 2px 6px 6px 2px;
}
.idk-book-back {
    inset: -3px; transform: translateZ(calc(var(--book-depth) / -2));
    background: var(--book-color); border: 4px solid #6b552f;
    box-shadow: 0 26px 40px #000b, 2px 3px 0 #24170c, inset 0 0 12px #0008;
}
.idk-book-spine {
    position: absolute; top: -2px; bottom: -2px; left: calc(var(--book-depth) * -1); width: var(--book-depth);
    transform-style: preserve-3d; color: #d5b67a;
}
.idk-binding-skin {
    position: absolute; top: 0; bottom: 0; left: calc(100% - var(--book-depth) * 0.095); width: calc(var(--book-depth) * 0.19);
    transform: translate3d(calc(var(--book-depth) / -2 * var(--binding-sin)), 0, calc(var(--book-depth) / 2 * var(--binding-cos))) rotateY(var(--binding-angle));
    border-block: 2px solid #936f374d;
    background: linear-gradient(#0003, #0003), var(--archive-spines), var(--book-color);
    background-size: 100% 100%, 7200% 100%; background-position: center, var(--binding-crop) center;
    box-shadow: inset 0 1px #c9a06045;
}
.idk-book-spine > span { position: absolute; left: calc(100% - 7px); width: 14px; top: 22%; bottom: 22%; transform: translateX(calc(var(--book-depth) / -2 - 1px)) rotateY(-90deg); writing-mode: vertical-rl; text-align: center; font: 0.65rem var(--idk-font-display); letter-spacing: 0.12em; }
.idk-book-spine > span, .idk-book-spine > b { opacity: calc(1 - var(--book-open, 0)); }
.idk-book-spine > b { position: absolute; left: calc(100% - 9px); width: 18px; height: 8px; top: 13%; transform: translateX(calc(var(--book-depth) / -2 - 1px)) rotateY(-90deg); border-block: 1px solid #c4974b80; background: linear-gradient(#000a, #ae803f60, #0009); box-shadow: 0 2px 3px #0008; }
.idk-book-spine > b:last-child { top: auto; bottom: 13%; }
.idk-book-page-block { position: absolute; inset: 7px; transform-style: preserve-3d; }
.idk-book-page-block > i {
    position: absolute; display: block; background: repeating-linear-gradient(90deg, #8c734b 0 0.7px, #ddc9a3 0.7px 2px, #bca47c 2px 2.7px);
    box-shadow: inset 0 0 8px #62472850;
}
.idk-block-fore { right: -32px; top: 0; bottom: 0; width: 32px; transform-origin: left; transform: translateZ(16px) rotateY(90deg); }
.idk-block-head, .idk-block-foot { left: 0; right: 0; height: 32px; transform-origin: top; transform: translateZ(16px) rotateX(-90deg); }
.idk-block-head { top: 0; }
.idk-block-foot { top: 100%; }
.idk-block-stack { position: absolute; inset: 0; transform: translateZ(0); background: #c5ad83; border: 1px solid #826740; box-shadow: 1px 2px #8e7853, 2px 4px #e2cca1, 3px 6px #9c8055, 4px 8px #d1b88c; }
.idk-book-left-stack { position: absolute; inset: 6px; transform-origin: -6px center; transform: translateZ(4px); transform-style: preserve-3d; }
.idk-stack-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #917346; background: #cdb58d; box-shadow: 1px 2px #806746, 2px 4px #dfc79f, 3px 6px #a48b63, 4px 8px #d8bf96; }
.idk-stack-back { transform: rotateY(180deg); }
.idk-book-left-stack > i { position: absolute; top: 100%; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(#dec8a2 0 1px, #89724d 1px 2px); transform-origin: top; transform: rotateX(-90deg); }
.idk-book-gutter {
    position: absolute; top: 7px; bottom: 7px; left: -4px; width: 9px;
    transform: translateZ(4px); opacity: var(--book-open, 0); pointer-events: none;
    background: linear-gradient(90deg, #35230d70, #20160cdb 45%, #906c3670 65%, transparent);
}
.idk-book-paper, .idk-leaf-face {
    background:
        linear-gradient(90deg, #76502724, transparent 14% 88%, #78532a1f),
        var(--archive-paper), #e5cca3;
    background-size: 100% 100%;
    color: #302319;
    box-shadow: inset 18px 0 22px #69462126, inset -2px 0 5px #52331b4d;
}
.idk-book-right { inset: 4px; transform: translateZ(2px); border: 3px solid #b79b6b; }
.idk-book-cover { transform-origin: left center; transform: translateZ(calc(var(--book-depth) / 2)); }
.idk-cover-face, .idk-leaf-face {
    position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden;
    border-radius: 2px 5px 5px 2px;
}
.idk-cover-front {
    display: flex; flex-direction: column; align-items: center;
    transform: translateZ(3px);
    color: #eed39c; background: linear-gradient(90deg, #0009, transparent 17% 90%, #0007), var(--archive-cover-leather), var(--book-color);
    background-size: 100% 100%, 200% 100%; background-position: center, 0% center;
    border: 3px solid #816037; border-radius: 3px 8px 5px 2px;
    box-shadow: inset 5px 0 8px #0009, 3px 5px 16px #0009;
}
.idk-cover-art { position: absolute; inset: 7% 6% 7% 13%; opacity: 0.85; border: 1px solid #c6a46080; box-shadow: 0 0 0 3px #0d140b70, 0 0 0 4px #c49a4838; }
.idk-cover-art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(#080b09f2, #090c095c 40%, transparent 64%, #070907e0);
}
.idk-library-book[data-cover-treatment="illuminated"] .idk-cover-art { opacity: 1; }
.idk-library-book[data-cover-treatment="illuminated"] .idk-cover-art::after {
    background: linear-gradient(#030d199c, #040d181f 35%, transparent 62%, #03091373);
}
.idk-library-book[data-cover-treatment="illuminated"] .idk-cover-title { color: #ffe1a7; text-shadow: 0 2px 5px #020609, 0 0 14px #020609; }
.idk-cover-noir img,
.idk-library-book[data-cover-treatment="noir"] :is(.idk-cover-art, .idk-book-artwork) img { object-position: 14% center; }
.idk-library-book[data-cover-treatment="noir"] .idk-cover-art { opacity: 1; }
.idk-library-book[data-cover-treatment="noir"] .idk-cover-front {
    background-position: center, 100% center;
    background-blend-mode: normal, luminosity;
}
.idk-library-book[data-cover-treatment="noir"] .idk-cover-art::after {
    background: linear-gradient(#07101680, transparent 35% 58%, #080c12eb);
}
.idk-library-book[data-cover-treatment="noir"] .idk-cover-title {
    position: absolute; bottom: 13%; left: 12%; right: 7%; margin: 0;
    color: #ffd49a; text-shadow: 0 2px 6px #000, 0 0 16px #080c12;
}
.idk-cover-art .idk-scrolls-art, .idk-book-artwork .idk-scrolls-art { background: #1c172b; }
.idk-cover-art .idk-scrolls-icon, .idk-book-artwork .idk-scrolls-icon { color: #d2b76a; }
.idk-cover-border { position: absolute; inset: 8px 9px 8px 18px; border: 1px solid; border-color: #bd955b8a #8c69385c #a37b4270 #71502e9c; border-radius: 1px 5px 3px 1px; box-shadow: inset 0 0 0 3px #080b0933, inset 0 0 0 4px #ba8c3a40; }
.idk-cover-front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 100% 0, #c9a27480, transparent 7%), radial-gradient(ellipse at 97% 100%, #c69b6680, transparent 6%), radial-gradient(ellipse at 3% 4%, #bca37c70, transparent 4%), radial-gradient(ellipse at 100% 61%, #d2b78542, transparent 2%);
    box-shadow: inset 0 2px 1px #d2ba8b52, inset -2px -3px 2px #b4965b40, inset 0 0 24px #140b0760;
}
.idk-library-book[data-cover-treatment="illuminated"] .idk-cover-front { background-position: center, 100% center; }
.idk-cover-front::before { content: ''; position: absolute; left: 6%; top: 1%; bottom: 1%; width: 3px; background: linear-gradient(90deg, #080704, #d2a85d45, #0009); box-shadow: 2px 0 4px #0008; }
.idk-cover-border::after { content: '✦'; position: absolute; top: -14px; left: calc(50% - 7px); }
.idk-cover-front > small { position: relative; margin-top: 10%; font: 0.55rem var(--idk-font-sans); letter-spacing: 0.24em; text-transform: uppercase; }
.idk-cover-title {
    position: relative; margin: 8% 10% 0; text-align: center;
    font: clamp(1.25rem, 2.7vw, 2.4rem)/1.25 var(--idk-font-display);
    text-shadow: 0 2px 6px #000;
}
.idk-cover-symbol { position: absolute; bottom: 5%; font-size: 1.8rem; }
.idk-cover-inside {
    transform: translateZ(-3px) rotateY(180deg); border: 5px solid var(--book-color);
    display: grid; place-items: center; color: #bba068;
    background: var(--archive-paper), var(--book-color);
    background-size: 100% 100%; background-blend-mode: multiply;
}
.idk-cover-inside span { font-size: 5rem; opacity: 0.4; }
.idk-cover-edge { position: absolute; display: block; background: linear-gradient(#ba92554d, var(--book-color) 35%, #080604); border: 1px solid #a07b3c55; }
.idk-cover-edge::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(13deg, transparent 0 11px, #b49b6052 11px 12px, transparent 12px 29px, #120b0770 29px 31px); }
.idk-cover-head, .idk-cover-foot { left: 0; right: 0; height: 6px; transform-origin: top; transform: translateZ(3px) rotateX(-90deg); }
.idk-cover-head { top: 0; }
.idk-cover-foot { top: 100%; }
.idk-cover-fore, .idk-cover-binding { top: 0; bottom: 0; width: 6px; transform-origin: left; transform: translateZ(3px) rotateY(90deg); }
.idk-cover-fore { left: 100%; }
.idk-cover-binding { left: 0; }
.idk-book-leaf { transform-origin: left center; transform: translateZ(var(--leaf-depth)); }
.idk-leaf-face { border: 1px solid #a68b5b; }
.idk-leaf-face::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #312015, transparent 70%);
    opacity: var(--turn-shadow, 0);
}
.idk-leaf-front {
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
    padding: 10%; text-align: center;
}
.idk-leaf-front small { font: 0.6rem var(--idk-font-sans); letter-spacing: 0.15em; text-transform: uppercase; }
.idk-leaf-front > span { font: 1.7rem var(--idk-font-display); }
.idk-leaf-front i { font-size: 2rem; font-style: normal; color: #84622f; }
.idk-leaf-back { transform: rotateY(180deg); display: grid; place-items: center; }
.idk-leaf-ornament { font-size: 5rem; color: #98754055; }
.idk-leaf-edge { position: absolute; top: 100%; left: 0; right: 0; height: 1px; background: #907449; transform: rotateX(-90deg); transform-origin: top; }
/* Introductory plates and short passages are printed on the turning leaves. */
.idk-leaf-front[data-intro-spread] { padding: 0; }
.idk-cover-inside[data-intro-spread] { background: var(--archive-paper), #e5cca3; background-size: 100% 100%; }
.idk-intro-illustration {
    position: absolute; inset: 7% 7% 9%; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.idk-intro-illustration img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; border: 1px solid #7959309c;
    box-shadow: 0 0 0 3px #e6cea559, 0 0 0 4px #87632f66, 0 3px 9px #55391d30;
}
.idk-intro-copy {
    --idk-scrollbar-track: #dac398;
    width: 100%; height: 100%; padding: 12% 10%; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    text-align: center; gap: clamp(14px, 2vw, 28px); overflow-y: auto;
}
.idk-intro-copy > * { flex-shrink: 0; }
.idk-intro-copy h4 {
    margin: 0; color: #49301b; font: normal clamp(1.25rem, 2.4vw, 2rem)/1.2 var(--idk-font-display);
}
.idk-intro-copy p {
    margin: 0; color: #463223; font: normal clamp(1rem, 1.55vw, 1.3rem)/1.6 var(--idk-font-serif);
}
.idk-intro-copy > .idk-intro-mark { font-size: 1.5rem; color: #987540; }
@media (max-width: 700px) {
    .idk-intro-copy { padding: 10% 9%; gap: 16px; }
    .idk-intro-copy h4 { font-size: clamp(1.05rem, 4.7vw, 1.5rem); }
    .idk-intro-copy p { font-size: clamp(0.9rem, 3.7vw, 1.15rem); line-height: 1.5; }
}
.idk-book-artwork { position: absolute; inset: 8px; overflow: hidden; }
.idk-book-artwork::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 28px #120d0b80; border: 1px solid #836438; }
.idk-artwork-caption {
    position: absolute; bottom: 7%; left: 10%; right: 10%; text-align: center;
    color: #f6e0b6; font: clamp(1rem, 2.3vw, 2rem) var(--idk-font-display); text-shadow: 0 2px 8px #000;
}
.idk-book-content.idk-card-body {
    position: absolute; inset: 0; padding: clamp(14px, 2.2vw, 30px);
    color: #302319; opacity: 0; overflow-y: auto;
    --idk-scrollbar-track: #dac398;
}
.idk-book-content .idk-card-genre { font-size: 0.57rem; letter-spacing: 0.15em; color: #7b552b; margin-bottom: 0.6rem; }
.idk-book-content .idk-card-title { font-size: clamp(1.45rem, 2.6vw, 2.25rem); color: #302319; line-height: 1.12; }
.idk-book-content .idk-card-meta { font-size: 0.64rem; margin: 0.8rem 0; color: #654e32; }
.idk-book-content .idk-icon-books { fill: #8b6937; }
.idk-book-content .idk-card-desc { font-size: clamp(0.94rem, 1.25vw, 1.08rem); line-height: 1.45; color: #302319; }
.idk-book-content .idk-card-desc { margin-bottom: 0; }
.idk-book-content .idk-card-subtitle { font-size: 0.88rem; color: #654e32; margin-top: 0.5rem; }
.idk-book-content .idk-card-action { margin-top: 1rem; }
.idk-book-content .idk-btn-begin { padding: 0.8rem 1rem; color: #f3e0b9; background: #2a241b; font-size: 0.6rem; letter-spacing: 0.12em; }
.idk-book-content .idk-btn-disabled { color: #6c5537; background: transparent; border-color: #7d623f; }
.idk-book-content .idk-card-chapters { margin-top: 1rem; padding-top: 0.8rem; border-color: #8e6a393b; }
.idk-book-content .idk-chapters-label { color: #765b37; font-size: 0.5rem; margin-bottom: 0.5rem; }
.idk-book-content .idk-chapter-links { gap: 0.3rem; }
.idk-book-content .idk-chapter-link { padding: 0.25rem 0.45rem; color: #48351f; font-size: 0.59rem; border-color: #8e6a3966; background: transparent; }
.idk-book-content .idk-card-studio-line { margin-top: 1rem; color: #785b31; }
.idk-library-light {
    position: absolute; inset: 0; z-index: 7; pointer-events: none;
    background: radial-gradient(ellipse at 93% 65%, #ffb94b1c, transparent 34%), radial-gradient(ellipse at 16% 35%, #dfae5510, transparent 28%), linear-gradient(#0005, transparent 28% 72%, #0009);
}
.idk-library-vine {
    position: absolute; z-index: 8; top: 4%; left: 1%; width: 100px;
    transform: rotate(-8deg); opacity: 0.75; pointer-events: none;
}
.idk-library-vine svg { display: block; width: 100%; }
.idk-library-lamp {
    position: absolute; z-index: 8; right: 4%; top: 56%; width: 40px; height: 115px;
    border: 3px solid #8c6936; border-radius: 45% 45% 24% 24%; pointer-events: none;
    background: linear-gradient(90deg, #38200880, transparent 35% 65%, #27140780), radial-gradient(ellipse at 50% 65%, #fff4bc, #ffa62d55 25%, #cd791c0d 60%);
    box-shadow: 0 0 32px #e2993345, 0 0 90px #b7752221, inset 0 0 13px #edb76d4d;
}
.idk-library-lamp::before { content: ''; position: absolute; top: -24px; left: 6px; width: 22px; height: 24px; border: 2px solid #8c6936; border-bottom: 0; border-radius: 50% 50% 0 0; }
.idk-library-lamp::after { content: ''; position: absolute; bottom: -6px; left: -7px; width: 48px; height: 9px; background: #8c6936; border-radius: 50%; }
.idk-library-lamp i { position: absolute; left: 14px; bottom: 14px; width: 7px; height: 28px; border-radius: 60% 40% 50% 50%; background: #fff5c9; box-shadow: 0 0 15px #ffb837; animation: idk-lamp-glow 5s ease-in-out infinite alternate; }
@keyframes idk-lamp-glow { to { opacity: 0.72; } }
.idk-library-dust { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.idk-library-dust i { position: absolute; left: 16%; top: 30%; width: 2px; height: 2px; background: #dcc294; border-radius: 50%; opacity: 0; animation: idk-dust-drift 19s linear infinite; }
.idk-library-dust i:nth-child(2) { left: 78%; top: 64%; animation-delay: -4s; }
.idk-library-dust i:nth-child(3) { left: 24%; top: 72%; animation-delay: -7s; }
.idk-library-dust i:nth-child(4) { left: 64%; top: 32%; animation-delay: -10s; }
.idk-library-dust i:nth-child(5) { left: 88%; top: 46%; animation-delay: -13s; }
.idk-library-dust i:nth-child(6) { left: 47%; top: 60%; animation-delay: -16s; }
.idk-library-dust i:nth-child(7) { left: 33%; top: 24%; animation-delay: -18s; }
.idk-library-dust i:nth-child(6), .idk-room-motes i:nth-child(3) { background: #f5d38c; box-shadow: 0 0 5px 1px #ffc06855; animation-name: idk-fairy-drift; animation-duration: 31s; }
@keyframes idk-fairy-drift { 0%, 35%, 75%, 100% { opacity: 0; } 48% { opacity: 0.48; } 62% { opacity: 0.16; } to { transform: translate3d(-18px, -42px, 0); } }
@keyframes idk-dust-drift { 10%, 70% { opacity: 0.25; } to { transform: translate3d(25px, -65px, 0); opacity: 0; } }
.idk-library-controls {
    position: absolute; z-index: 10; bottom: 0; left: 0; right: 0;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.8rem 2rem; padding: 1.1rem 1rem 1.5rem;
    background: linear-gradient(#100a06c4, #100a0699 44%, #060301ed), var(--archive-walnut);
    background-size: 100% 100%, 700px 180px; box-shadow: inset 0 1px #d2b07a29, 0 -9px 18px #0008;
}
.idk-library-index { display: flex; gap: 1.5rem; }
.idk-library-index a { color: #bca17c; font: 0.65rem var(--idk-font-sans); padding: 0.5rem 0; border-bottom: 1px solid transparent; }
.idk-library-index a[aria-current] { color: #f1d6ab; border-color: var(--library-gold); }
.idk-library-read { font: 0.62rem var(--idk-font-sans); letter-spacing: 0.1em; color: #e3c391; background: linear-gradient(110deg, #6d4d293d, #100b077a), var(--archive-walnut); background-size: 100% 100%, 220px 80px; border: 1px solid #836237; border-radius: 2px 4px 2px 3px; padding: 0.6rem 1rem; box-shadow: inset 0 1px #deb87933, 0 2px 4px #0009; }
.idk-library-hint { width: 100%; text-align: center; color: #bba889; font: 0.57rem var(--idk-font-sans); letter-spacing: 0.09em; }
.idk-library-progress { position: absolute; bottom: 0; height: 2px; left: 10%; right: 10%; background: #93714433; }
.idk-library-progress i { display: block; height: 100%; background: #c6a065; transform: scaleX(0); transform-origin: left; }
.idk-library-enabled .idk-comp-footer { position: relative; padding: 5rem 2rem; background: #17110c; border-top: 15px ridge #3d291b; }
.idk-library-enabled :focus-visible { outline: 2px solid #e6bc74; outline-offset: 5px; }
.idk-book-content:focus-visible { outline-offset: -6px; }
.idk-book-content a:focus-visible { outline-color: #735120; }

/* Tablet: fewer ambient elements; the same book geometry and timeline. */
@media (max-width: 1000px) {
    .idk-library-bay-heading .idk-genre-sub { display: none; }
    .idk-library-vine { display: none; }
    .idk-library-lamp { right: 2%; width: 30px; height: 90px; }
    .idk-library-shelf-fill { width: 40%; gap: 2px; }
    .idk-library-spine:nth-child(n+8) { display: none; }
    .idk-library-archive-seal { width: 55px; }
    .idk-library-stack { width: 140px; left: 2%; }
    .idk-library-scroll { width: 90px; right: 8%; }
}

/* Mobile: tall paper, smaller depth, real text and simplified surrounding shelf. */
@media (max-width: 700px) {
    .idk-library-enabled .idk-comp-header { padding: 1.1rem 1.25rem; }
    .idk-library-enabled .idk-comp-header-right { gap: 0.8rem; }
    .idk-library-enabled .idk-comp-hero { border-width: 8px; padding: 9rem 1.1rem 3rem; min-height: calc(70 * var(--idk-vh)); }
    .idk-library-bay { border-width: 8px; --shelf-line: 79%; --shelf-depth: 18px; --contact-inset: 3px; }
    .idk-library-bay::before, .idk-library-bay::after { display: none; }
    .idk-library-bay-heading { top: 76px; left: 4%; right: 4%; }
    .idk-library-bay-heading .idk-genre-heading { gap: 0.6rem; padding: 0.65rem 0.4rem; }
    .idk-library-bay-heading .idk-genre-index { font-size: 1.4rem; }
    .idk-library-bay-heading .idk-genre-title { font-size: clamp(0.73rem, 3vw, 1.15rem); }
    .idk-library-runway { height: calc(var(--shelf-count) * 240 * var(--idk-vh) + 100 * var(--idk-vh)); }
    .idk-library-book-slot {
        --book-width: min(calc((100vw - 24px) / 2), calc(36 * var(--idk-vh)));
        --book-height: calc(var(--book-width) * 1.5);
        /* Rest the bottom edge on the same surface as the permanent bindings.
           A bottom pivot keeps the closed, smaller book on that surface. */
        top: calc(var(--shelf-line) - var(--contact-inset));
        transform: translate(-50%, -100%); perspective: 1200px;
        perspective-origin: 50% 100%;
    }
    .idk-library-book { transform-origin: 50% 100%; }
    .idk-library-shelf-fill { top: 30%; height: 48%; width: 29%; }
    .idk-library-spine:nth-child(n+6) { display: none; }
    .idk-library-spine i { font-size: 0.8rem; }
    .idk-library-spine > span { font-size: 0.48rem; }
    .idk-library-spine .idk-spine-title { font-size: 6px; }
    .idk-spine-folio { font-size: 6px; }
    .idk-library-stack { width: 95px; top: calc(79% - 43px); }
    .idk-stack-volume { height: 12px; }
    .idk-stack-volume > span { display: none; }
    .idk-stack-volume i { inset: 2px 4px; }
    .idk-library-scroll, .idk-library-archive-seal { display: none; }
    .idk-library-lamp, .idk-library-dust { display: none; }
    .idk-book-content.idk-card-body { padding: 12px 10px; }
    .idk-book-content .idk-card-title { font-size: clamp(1.15rem, 5vw, 1.7rem); }
    .idk-book-content .idk-card-desc { font-size: 0.93rem; line-height: 1.35; }
    .idk-book-content .idk-card-genre { font-size: 0.47rem; }
    .idk-book-content .idk-card-meta { font-size: 0.56rem; gap: 0.35rem; }
    .idk-book-content .idk-btn-begin { padding: 0.7rem 0.5rem; font-size: 0.5rem; }
    .idk-cover-title { font-size: 1.4rem; margin-top: 18%; }
    .idk-cover-front > small { font-size: 0.4rem; }
    .idk-library-beam { height: 25px; }
    .idk-library-controls { gap: 0.6rem; padding: 0.8rem 0.5rem 1.1rem; }
    .idk-library-index { gap: 0.7rem; }
    .idk-library-index a { font-size: 0.6rem; }
    .idk-library-hint { font-size: 0.48rem; }
}

/* Short landscape viewports retain a readable scrollable paper surface. */
@media (max-height: 580px) and (min-width: 701px) {
    .idk-library-bay-heading { top: 74px; }
    .idk-library-book-slot { --book-width: min(35vw, 300px); --book-height: calc(58 * var(--idk-vh)); top: 51%; }
    .idk-library-bay-heading .idk-genre-heading { padding: 0.3rem 1rem; }
    .idk-library-controls { padding: 0.4rem 1rem 0.7rem; gap: 0.2rem 1rem; }
}

/* Static enhanced mode also activates immediately at a live preference change. */
.idk-library-static .idk-library-runway { height: auto; }
.idk-library-static .idk-library-viewport { position: relative; height: auto; overflow: visible; }
.idk-library-static .idk-library-camera { height: auto; transform: none; }
.idk-library-static .idk-library-bay { position: relative; top: auto; min-height: 780px; height: auto; padding: 12rem 2rem 5rem; }
.idk-library-static .idk-library-book-slot { position: relative; top: auto; left: 50%; transform: translateX(-50%); --book-width: min(39vw, 420px); --book-height: 600px; }
.idk-library-static .idk-library-book { transform: translateX(50%); }
.idk-library-static .idk-book-cover { transform: translateZ(calc(var(--book-depth) / -2)) rotateY(-180deg); }
.idk-library-static .idk-book-left-stack { transform: translateZ(-16px) rotateY(-180deg); }
.idk-library-static .idk-binding-skin { transform: translateZ(calc(var(--book-depth) / -2)) rotateY(-180deg); }
.idk-library-static .idk-book-leaf { transform: translateZ(calc(var(--leaf-depth) * -1)) rotateY(-180deg); }
.idk-library-static .idk-book-content { opacity: 1; }
.idk-library-static .idk-library-controls { position: relative; }
.idk-library-static .idk-library-read, .idk-library-static .idk-library-hint, .idk-library-static .idk-library-progress { display: none; }
.idk-library-static .idk-library-dust, .idk-library-static .idk-library-lamp, .idk-library-static .idk-library-vine { display: none; }
@media (max-width: 700px) {
    .idk-library-static .idk-library-bay { padding: 9rem 0 4rem; min-height: 750px; }
    .idk-library-static .idk-library-book-slot { --book-width: calc((100vw - 24px) / 2); --book-height: calc(var(--book-width) * 1.5); }
}

/* Scene visibility and reduced motion govern ambience on every device.
   Decorative layers ignore pointer input so native swiping stays available. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .idk-compendium-body *, .idk-compendium-body *::before, .idk-compendium-body *::after { animation: none !important; transition: none !important; }
    .idk-compendium-body [data-idk-reveal] { opacity: 1; transform: none; }
    .idk-compendium-body, .idk-compendium-body a, .idk-compendium-body button { cursor: auto; }
    .idk-compendium-body .idk-cursor-dot, .idk-compendium-body .idk-cursor-ring, .idk-compendium-body #idk-trail-canvas { display: none; }
}
html:not(.idk-comp-js) .idk-compendium-body [data-idk-reveal] { opacity: 1; transform: none; }
html:not(.idk-comp-js) .idk-compendium-body,
html:not(.idk-comp-js) .idk-compendium-body a,
html:not(.idk-comp-js) .idk-compendium-body button { cursor: auto; }

/* ============================================================
   ARCHIVE SET — shared architectural/prop layers, not a scene
   flattened into a background. Text and book mechanics stay HTML.
   ============================================================ */
.idk-library-enabled .idk-comp-hero {
    min-height: max(590px, calc(68 * var(--idk-vh))); padding: 11rem 21% 8.5rem;
    border: 0; background: #160d07; isolation: isolate;
    box-shadow: none;
}
.idk-comp-hero > .idk-comp-kicker,
.idk-comp-hero > .idk-comp-title,
.idk-comp-hero > .idk-comp-tagline,
.idk-comp-hero > .idk-comp-hero-ornament,
.idk-comp-hero > .idk-library-enter { position: relative; z-index: 6; }
.idk-library-enabled .idk-comp-title {
    font-size: clamp(2.6rem, 5.9vw, 5.2rem); color: #e6bc81;
    text-shadow: 0 2px 7px #080502, 0 0 30px #080502;
}
.idk-library-enabled .idk-comp-tagline { color: #e0cbaa; text-shadow: 0 2px 4px #080502; }
.idk-library-enabled .idk-comp-hero .idk-comp-hero-ornament { color: #d6a256; width: 220px; margin-top: 1.7rem; }
.idk-library-enabled .idk-library-enter { color: #e7c694; font-size: 0.62rem; margin-top: 1.1rem; }
.idk-library-enabled .idk-comp-header {
    background: linear-gradient(#090502b3, #09050266 60%, transparent);
}
.idk-archive-entrance-set, .idk-archive-footer-set {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.idk-archive-inset {
    position: absolute; inset: 55px 3.4% 68px;
    border: 4px ridge #4e301a; overflow: hidden;
    box-shadow: inset 0 0 50px #000, 0 0 0 8px #120b06, 0 0 0 11px #8c623532;
}
.idk-archive-inset img { object-fit: cover; object-position: 50% 48%; }
.idk-archive-inset::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 38%, #0905023d, transparent 57%), radial-gradient(ellipse at 85% 72%, #f5bb642b, transparent 43%), linear-gradient(90deg, #02010094, transparent 20% 80%, #02010094), linear-gradient(#0008, transparent 31% 68%, #0007);
    box-shadow: inset 0 0 45px 9px #0009;
}
.idk-archive-architecture {
    --arch-width: clamp(80px, 11vw, 166px);
    position: absolute; inset: 0; z-index: 12; pointer-events: none;
}
.idk-archive-pilaster {
    position: absolute; top: 0; bottom: 0; width: var(--arch-width); height: 100%;
    object-fit: fill;
}
.idk-pilaster-left { left: calc(var(--arch-width) * -0.18); }
.idk-pilaster-right { right: calc(var(--arch-width) * -0.18); transform: scaleX(-1); }
.idk-archive-cornice {
    position: absolute; top: 0; left: 0; right: 0; height: 54px;
    background: linear-gradient(#80582c44, #080402a6 30%, #09050399 55%, #ba86472e 82%, #080402), var(--archive-walnut);
    background-size: 100% 100%, 600px 160px;
    border-top: 4px solid #291608; border-bottom: 2px solid #bd925647;
    box-shadow: 0 11px 22px #000b, inset 0 3px 2px #d5a36840;
}
.idk-archive-cornice i { position: absolute; left: 0; right: 0; top: 7px; height: 5px; border-block: 1px solid #bb854332; background: #1109049c; box-shadow: 0 2px 2px #000; }
.idk-archive-cornice i:nth-child(2) { top: 22px; height: 11px; border-color: #674424; }
.idk-archive-cornice i:nth-child(3) { top: 43px; height: 3px; }
.idk-archive-sill {
    position: absolute; bottom: 0; left: 0; right: 0; height: 68px;
    background: linear-gradient(#f0c08026, #160b0599 13%, #3d241044 35%, #080402ad 75%, #b4834438 86%, #080402), var(--archive-walnut);
    background-size: 100% 100%, 700px 160px;
    border-top: 3px solid #ba854840; border-bottom: 5px solid #090502;
    box-shadow: 0 10px 15px #000b, inset 0 4px 2px #d8a76c26;
}
.idk-archive-sill i { position: absolute; left: 2%; right: 2%; top: 24px; height: 13px; border-block: 1px solid #cb94542e; box-shadow: inset 0 2px 3px #000; }
.idk-archive-hero-books {
    position: absolute; bottom: 70px; width: 29%; height: 26%;
    display: flex; align-items: end; gap: 2px; opacity: 0.75;
}
.idk-hero-books-left { left: 4%; }
.idk-hero-books-right { right: 4%; }
.idk-archive-hero-books .idk-library-spine { max-width: 54px; }
.idk-archive-hero-books .idk-spine-title, .idk-archive-hero-books .idk-spine-folio { opacity: 0.5; }
.idk-archive-globe, .idk-archive-lantern {
    position: absolute; bottom: 67px; z-index: 4;
    height: min(calc(51 * var(--idk-vh)), 370px); width: min(22vw, 280px);
}
.idk-archive-globe { left: 3.5%; }
.idk-archive-lantern { right: 3%; width: min(25vw, 310px); }
.idk-archive-globe img, .idk-archive-lantern img { object-fit: contain; object-position: center bottom; }
.idk-archive-lantern::before {
    content: ''; position: absolute; inset: 0 -25% -8%; z-index: -1;
    background: radial-gradient(ellipse at 68% 65%, #e7a23f20, transparent 62%);
}
.idk-archive-ivy {
    position: absolute; top: 9px; z-index: 15; width: min(22vw, 240px); height: 72%;
}
.idk-archive-ivy img { object-fit: contain; object-position: top left; }
.idk-ivy-left { left: 0; transform: rotate(7deg); transform-origin: top; }
.idk-ivy-right { right: -2%; top: 28%; width: min(10vw, 120px); height: 65%; transform: scaleX(-1); opacity: 0.85; }
.idk-archive-hero-light {
    position: absolute; inset: 0; z-index: 5;
    background: radial-gradient(ellipse at 12% 68%, #d399411a, transparent 26%), radial-gradient(ellipse at 88% 64%, #ffb74a17, transparent 36%);
}

/* The same substantial outer supports continue across the pinned shelf set. */
.idk-library-bay { border: 0; }
.idk-library-bay::before, .idk-library-bay::after { display: none; }
.idk-library-bay-heading { left: 4.5%; right: 4.5%; }
.idk-library-bay-heading .idk-genre-heading {
    padding: 0.95rem 5%; border: 0;
    background: linear-gradient(#b1844326, #0b0604aa 26%, #160b0670 65%, #ae7d3833), var(--archive-walnut);
    background-size: 100% 100%, 640px 150px;
    box-shadow: inset 0 2px 1px #d0a06540, inset 0 -3px 3px #0008, 0 13px 20px #0009;
}
.idk-library-beam {
    height: 46px; border-top-width: 4px;
    box-shadow: 0 22px 28px #000e, inset 0 5px 3px #d8a86b3d;
}
.idk-library-beam::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 4px; border-block: 1px solid #af814640; background: #100803; }
.idk-library-viewport > .idk-archive-architecture > .idk-archive-sill { height: 28px; }
.idk-library-viewport > .idk-archive-architecture > .idk-archive-sill i { display: none; }
.idk-library-bay > .idk-archive-architecture { display: none; }
.idk-library-controls { bottom: 28px; }
.idk-library-vine {
    top: 3%; left: -1%; z-index: 14; width: 190px; height: 45%; transform: rotate(5deg); opacity: 0.9;
}
.idk-library-vine img { object-fit: contain; object-position: top left; }
.idk-library-lamp {
    width: 130px; height: 225px; top: auto; bottom: 23%; right: 3%; z-index: 8;
    border: 0; border-radius: 0; background: none; box-shadow: none;
}
.idk-library-lamp img { object-fit: contain; object-position: center bottom; }
.idk-library-lamp::before {
    top: -20%; bottom: -10%; left: -40%; width: 180%; height: auto; border: 0; border-radius: 0;
    background: radial-gradient(ellipse at 60% 60%, #e7a23f1c, transparent 64%); z-index: -1;
}
.idk-library-lamp::after { display: none; }
.idk-library-light { background: radial-gradient(ellipse at 93% 65%, #ffb94b14, transparent 34%), linear-gradient(#0003, transparent 28% 72%, #0009); }
.idk-library-enabled .idk-comp-footer {
    min-height: 400px; padding: 11rem 24% 7rem; border: 0; isolation: isolate;
    background: linear-gradient(#080503b3, #10090570), var(--archive-walnut);
    background-size: 100% 100%, 700px 350px;
}
.idk-comp-footer > p, .idk-comp-footer > .idk-comp-hero-ornament { position: relative; z-index: 6; text-shadow: 0 2px 4px #000; }
.idk-archive-footer-books { position: absolute; inset: 55px 5% 125px; display: flex; align-items: end; gap: 2px; opacity: 0.46; }
.idk-archive-desk { position: absolute; bottom: 65px; left: 2%; right: 2%; height: 60px; background: linear-gradient(#9f754655, #130a0499), var(--archive-walnut); background-size: 100% 100%, 700px 120px; border-top: 3px solid #ba854840; box-shadow: 0 20px 30px #000c; }
.idk-archive-footer-globe { position: absolute; left: 3%; bottom: 68px; width: 150px; height: 240px; }
.idk-archive-footer-globe img { object-fit: contain; object-position: center bottom; }

@media (max-width: 1000px) {
    .idk-library-enabled .idk-comp-hero { padding-inline: 18%; }
    .idk-archive-globe, .idk-archive-lantern { height: 300px; }
    .idk-archive-globe { left: 2%; width: 22vw; }
    .idk-archive-lantern { right: 2%; width: 25vw; }
    .idk-archive-ivy { width: 170px; }
    .idk-ivy-right { width: 95px; }
    .idk-library-vine { display: block; width: 130px; height: 35%; }
    .idk-library-lamp { width: 95px; height: 180px; right: 2%; }
    .idk-library-bay-heading .idk-genre-heading { padding-inline: 4%; }
}
@media (max-width: 700px) {
    .idk-library-enabled .idk-comp-hero { min-height: 670px; padding: 9rem 1.8rem 15rem; }
    .idk-library-enabled .idk-comp-title { font-size: clamp(1.75rem, 8.6vw, 3.1rem); line-height: 1.12; }
    .idk-library-enabled .idk-comp-tagline { font-size: 1rem; max-width: min(100%, 290px); }
    .idk-library-enabled .idk-comp-kicker { font-size: 0.57rem; letter-spacing: 0.25em; }
    .idk-archive-architecture { --arch-width: 58px; }
    .idk-archive-cornice { height: 40px; }
    .idk-archive-cornice i:nth-child(3) { display: none; }
    .idk-archive-inset { inset: 40px 12px 47px; }
    .idk-archive-inset img { object-position: center; }
    .idk-archive-sill { height: 47px; }
    .idk-archive-sill i { top: 16px; height: 8px; }
    .idk-archive-globe, .idk-archive-lantern { bottom: 45px; height: 192px; }
    .idk-archive-globe { left: 3%; width: 125px; }
    .idk-archive-lantern { right: 2%; width: 145px; }
    .idk-archive-hero-books { height: 19%; width: 39%; bottom: 48px; }
    .idk-archive-hero-books .idk-library-spine:nth-child(n+6) { display: none; }
    .idk-archive-ivy { width: 106px; height: 38%; }
    .idk-ivy-right { top: 65%; width: 65px; height: 29%; }
    .idk-library-vine, .idk-library-lamp { display: none; }
    .idk-library-bay-heading .idk-genre-heading { padding: 0.7rem 0.6rem; }
    .idk-library-beam { height: 31px; }
    .idk-library-enabled .idk-comp-footer { min-height: 360px; padding: 7rem 19% 7rem; }
    .idk-archive-footer-books { inset: 44px 6% 90px; }
    .idk-archive-footer-globe { width: 86px; height: 140px; left: 2%; bottom: 48px; }
    .idk-archive-desk { bottom: 45px; height: 45px; }
}
@media (max-height: 580px) and (min-width: 701px) {
    .idk-library-bay-heading .idk-genre-heading { padding-block: 0.4rem; }
    .idk-library-lamp { width: 85px; height: 130px; }
    .idk-library-vine { height: 38%; }
}
.idk-library-static .idk-library-viewport > .idk-archive-architecture { display: none; }
.idk-library-static .idk-library-bay > .idk-archive-architecture { display: block; }
.idk-library-static .idk-library-controls { bottom: auto; }
@media (max-height: 580px) and (min-width: 701px) {
    .idk-library-viewport > .idk-archive-architecture > .idk-archive-sill { height: 12px; }
    .idk-library-controls { bottom: 12px; }
    .idk-library-static .idk-library-controls { bottom: auto; }
}

/* Curated shelf dressing. Only the cabinet frame/UI is viewport-pinned.
   Recesses, physical props, paper and their light travel inside each bay. */
.idk-hero-backdrop, .idk-hero-midground, .idk-hero-foreground, .idk-hero-greenery,
.idk-shelf-backdrop, .idk-shelf-collection, .idk-shelf-architecture, .idk-shelf-atmosphere,
.idk-desk-backdrop, .idk-desk-foreground {
    position: absolute; inset: 0; pointer-events: none;
}
.idk-hero-backdrop, .idk-shelf-backdrop, .idk-desk-backdrop { z-index: 0; }
.idk-hero-midground, .idk-shelf-collection { z-index: 1; }
.idk-shelf-collection { pointer-events: auto; }
.idk-hero-foreground, .idk-shelf-architecture, .idk-desk-foreground { z-index: 3; }
.idk-shelf-atmosphere { z-index: 7; }
.idk-hero-greenery { z-index: 15; }
.idk-archive-side { position: absolute; top: 0; bottom: 0; width: var(--arch-width); }
.idk-side-left { left: 0; }
.idk-side-right { right: 0; }
.idk-archive-side > i {
    position: absolute; top: 40px; bottom: 22px; width: 28%;
    background: linear-gradient(90deg, #b3884b3d, #160b05 18%, #080402b8 70%, transparent), var(--archive-walnut);
    box-shadow: 14px 0 28px #000d; border-left: 1px solid #be955545;
}
.idk-archive-architecture::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #01010094, transparent 6% 94%, #01010094);
}
.idk-side-left > i { left: 27%; }
.idk-side-right > i { right: 27%; transform: scaleX(-1); }
.idk-shelf-greenery { position: absolute; right: 2%; top: 18%; width: min(14vw, 170px); z-index: 13; pointer-events: none; filter: drop-shadow(-2px 3px 2px #000b); }
.idk-shelf-greenery img { display: block; width: 100%; height: auto; }
.idk-shelf-greenery::before { content: ''; position: absolute; right: 4%; top: -10px; height: 24px; width: 16px; border-right: 2px solid #554321; border-radius: 60%; }
.idk-shelf-recess {
    position: absolute; inset: 19% 4% 20%; z-index: 0; pointer-events: none;
    border: 5px ridge #392419; box-shadow: inset 0 0 95px 12px #000e, 0 0 0 7px #0d0805;
    background: linear-gradient(90deg, #000d, #07040380 32% 68%, #000d), var(--archive-walnut);
    background-size: 100% 100%, 900px 640px;
}
.idk-shelf-recess i { position: absolute; top: 0; bottom: 0; width: 1px; background: #b38b4533; box-shadow: 3px 0 8px #000; }
.idk-shelf-recess i:first-child { left: 27%; }
.idk-shelf-recess i:last-child { right: 32%; }
.idk-library-shelf-fill { z-index: 1; }
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-recess {
    background-image: linear-gradient(#090b16ce, #080603bd), var(--archive-walnut);
    background-position: center, 180px 50px;
}
.idk-shelf-details { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.idk-library-bay[data-shelf-scene="noir"] .idk-shelf-recess {
    background-image: linear-gradient(110deg, #09121be6, #0b0907ac 60%, #17100cce), var(--archive-walnut);
}
.idk-library-bay[data-shelf-scene="noir"] .idk-shelf-light {
    background: radial-gradient(ellipse at 72% 63%, #f2b65e29, transparent 36%), radial-gradient(ellipse at 25% 30%, #8baac916, transparent 40%), linear-gradient(90deg, #010103c2, transparent 27% 74%, #010103a8), linear-gradient(#01010391, transparent 35% 69%, #040201a6);
}
.idk-shelf-prop {
    position: absolute; bottom: calc(100% - var(--shelf-line) + var(--contact-inset)); width: 170px;
}
.idk-shelf-prop img { object-fit: contain; object-position: center bottom; }
.idk-prop-woodland { right: 3.5%; width: min(13vw, 170px); }
.idk-prop-instrument { left: 3.5%; width: min(13vw, 175px); }
.idk-prop-candle { right: 4%; width: min(8vw, 105px); }
.idk-prop-candle::before {
    content: ''; position: absolute; inset: -22% -65% -5%; z-index: -1;
    background: radial-gradient(ellipse at 44% 38%, #edab3b2e, transparent 63%);
    animation: idk-candle-breathe 6.7s ease-in-out infinite alternate;
}
@keyframes idk-candle-breathe { 0%, 100% { opacity: 0.78; } 38% { opacity: 0.94; } 64% { opacity: 0.82; } }
.idk-shelf-light { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.idk-library-bay[data-shelf-scene="woodland"] .idk-shelf-light {
    background: radial-gradient(ellipse at 52% 45%, #f3c7780a, transparent 35%), radial-gradient(ellipse at 88% 68%, #e4ae581c, transparent 24%), linear-gradient(90deg, #010100a6, transparent 29% 73%, #0101008c), linear-gradient(#01010075, transparent 32% 70%, #04020191);
}
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-light {
    background: radial-gradient(ellipse at 91% 66%, #ffb64d18, transparent 24%), radial-gradient(ellipse at 14% 70%, #ba854a12, transparent 22%);
}
.idk-library-light { background: linear-gradient(#0004, transparent 28% 72%, #000a); }
.idk-library-bay[data-shelf-scene="celestial"] .idk-library-dust { opacity: 0.7; transform: scaleX(-1); }
.idk-library-bay[data-shelf-scene="celestial"] .idk-library-dust i { animation-duration: 27s; }
.idk-library-bay[data-shelf-scene="woodland"] .idk-fill-left { width: 35%; }
.idk-library-bay[data-shelf-scene="celestial"] .idk-fill-left { width: 36%; }
.idk-library-bay[data-shelf-scene="celestial"] .idk-fill-right { width: 40%; }
.idk-library-bay[data-shelf-scene="celestial"] .idk-library-lower-shelf { gap: 5px; }
.idk-library-stack { z-index: 2; top: auto; bottom: calc(100% - var(--shelf-line) + var(--contact-inset)); }
.idk-shelf-paper {
    position: absolute; top: calc(var(--shelf-line) - 18px); width: 115px; height: 70px; z-index: 1;
    border: 1px solid #ad875a; border-radius: 2px 2px 6px 3px;
    background: repeating-linear-gradient(4deg, #513b1814 0 1px, transparent 1px 4px), linear-gradient(100deg, #a78a5b, #d7bc89 40%, #93764c);
    box-shadow: 2px 8px 10px #000a, inset 0 -4px 6px #70522a45;
    transform: rotate(5deg); color: #4a351d;
}
.idk-paper-specimen { left: 6%; width: 125px; transform: rotate(-8deg); }
.idk-paper-case { left: 6%; transform: rotate(-6deg); border-top: 4px solid #604730; }
.idk-paper-case i { left: 13px; width: 70%; transform: none; }
.idk-paper-case i:nth-child(2) { top: 32px; width: 61%; transform: none; }
.idk-paper-case i:nth-child(3) { left: 13px; top: 39px; width: 48%; }
.idk-paper-chart { right: calc(4% + 35px); width: 96px; top: calc(var(--shelf-line) - 15px); }
.idk-shelf-paper small { position: absolute; bottom: 8px; left: 10px; font: 5px var(--idk-font-sans); letter-spacing: 0.16em; }
.idk-shelf-paper::after { content: ''; position: absolute; right: 0; top: 0; width: 11px; height: 100%; background: linear-gradient(90deg, #4a351d26, #e4c99b70); border-left: 1px solid #7d5f3833; }
.idk-shelf-paper i { position: absolute; top: 25px; left: 22px; width: 61px; height: 1px; background: #60482159; transform: rotate(-14deg); }
.idk-shelf-paper i:nth-child(2) { top: 32px; width: 47px; transform: rotate(19deg); }
.idk-shelf-paper i:nth-child(3) { top: 40px; left: 35px; width: 33px; }
.idk-library-beam::before { content: ''; position: absolute; top: 14px; left: 14%; width: 3px; height: 3px; border-radius: 50%; background: #26180d; box-shadow: 1px 1px 0 #9f783c59, 47vw 0 0 #1b1109, 47vw 1px 0 #a47b3638; }
.idk-library-bay[data-shelf-scene="celestial"] .idk-library-beam::before { left: 21%; top: 21px; }
.idk-archive-desk-props {
    position: absolute; left: 3%; bottom: 72px; width: min(34vw, 440px); height: 250px; z-index: 3;
    transform: rotate(-5deg); filter: drop-shadow(4px 8px 4px #0009);
}
.idk-archive-desk-props img { object-fit: contain; object-position: left bottom; }
.idk-archive-desk {
    height: 195px; clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
    background: linear-gradient(#3a251980, #92693c55 50%, #130a04bb), var(--archive-walnut);
    background-size: 100% 100%, 700px 195px;
    border-bottom: 8px ridge #3e2816;
}
.idk-library-enabled .idk-comp-footer { padding-inline: 16%; }
.idk-comp-footer > p { color: #d2bc96; }
@media (max-width: 1000px) {
    .idk-prop-woodland { width: 130px; right: 3%; }
    .idk-prop-instrument { width: 135px; left: 3%; }
    .idk-prop-candle { width: 85px; right: 3%; }
    .idk-shelf-paper { width: 85px; height: 60px; }
    .idk-paper-chart { right: calc(3% + 25px); }
}
@media (max-width: 700px) {
    .idk-shelf-recess { inset: 18% 4% 19%; }
    .idk-shelf-details { z-index: 4; }
    .idk-prop-woodland { width: 58px; right: 5%; }
    .idk-prop-instrument { width: 63px; left: 5%; }
    .idk-prop-candle { width: 38px; right: 6%; }
    .idk-shelf-paper { top: calc(var(--shelf-line) - 8px); width: 48px; height: 33px; }
    .idk-paper-chart { right: calc(6% + 10px); }
    .idk-shelf-paper i { display: none; }
    .idk-shelf-paper small { font-size: 3px; left: 4px; bottom: 4px; }
    .idk-library-enabled .idk-comp-footer { padding: 5.2rem 17% 11rem; }
    .idk-archive-desk-props { left: 4%; bottom: 46px; width: 64%; height: 140px; }
    .idk-archive-desk { height: 115px; }
}
@media (max-height: 580px) and (min-width: 701px) {
    .idk-library-bay { --shelf-depth: 20px; --contact-inset: 3px; }
    .idk-prop-woodland, .idk-prop-instrument { width: 78px; }
    .idk-prop-candle { width: 52px; }
    .idk-shelf-paper { width: 65px; height: 45px; }
}

/* Surface contacts. The wrapper marks a point on a supporting plane; an
   intrinsic-ratio image is offset by its measured transparent bottom margin. */
.idk-library-enabled .idk-grounded-prop {
    height: 0; transform: none; filter: none; pointer-events: none;
}
.idk-grounded-prop > img {
    position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: auto;
    transform: translateY(calc(100% - var(--contact-y))); z-index: 2;
    filter: drop-shadow(1px 2px 1px #0009);
}
.idk-contact-shadow {
    position: absolute; left: 12%; width: 76%; height: 10px; top: -3px; z-index: 1;
    border-radius: 50%; background: radial-gradient(ellipse, #070402dc, #08040375 45%, transparent 72%);
    transform: skewX(-12deg);
}
.idk-shelf-surface {
    position: absolute; top: calc(var(--shelf-line) - var(--shelf-depth));
    height: var(--shelf-depth); left: 2%; right: 2%; z-index: 2; pointer-events: none;
    clip-path: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
    background: linear-gradient(#080503d9, #8a62332b 45%, #c2965329 88%, #120904), var(--archive-walnut);
    background-size: 100% 100%, 600px 150px;
    box-shadow: inset 0 5px 8px #0009; border-bottom: 1px solid #bf935442;
}
.idk-library-shelf-fill { height: calc(var(--shelf-line) - 28% - var(--shelf-depth) + 4px); }
.idk-shelf-paper { transform-origin: 50% 0; }
.idk-prop-candle::before, .idk-desk-candle::before {
    content: ''; position: absolute; inset: auto; left: -70%; bottom: -25px;
    width: 240%; height: auto; aspect-ratio: 1;
    background: radial-gradient(ellipse at 50% 25%, #ffcd7a59, #c5812630 36%, transparent 68%);
    z-index: -1; animation: idk-candle-breathe 6.7s ease-in-out infinite alternate;
}
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-surface {
    background-image: radial-gradient(ellipse at 94% 50%, #ffd58b78, transparent 28%), linear-gradient(#080503e0, #8a62332b 45%, #c296533d 88%, #120904), var(--archive-walnut);
    background-size: 100% 100%, 100% 100%, 600px 150px;
}
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-light {
    background: radial-gradient(ellipse at 91% 65%, #ffc87126, transparent 26%), radial-gradient(ellipse at 51% 45%, #a7b9ec08, transparent 38%), linear-gradient(90deg, #010100b3, transparent 29% 77%, #01010075), linear-gradient(#01010080, transparent 32% 70%, #04020191);
}
.idk-comp-hero { --hero-sill: 68px; --hero-depth: 36px; }
.idk-hero-surface {
    position: absolute; bottom: var(--hero-sill); height: var(--hero-depth); left: 3%; right: 3%; z-index: 2;
    background: radial-gradient(ellipse at 88% 45%, #ffc36c52, transparent 24%), linear-gradient(#0d0704e0, #8b622e44 80%, #b18a4530), var(--archive-walnut);
    background-size: 100% 100%, 100% 100%, 650px 160px;
    border-bottom: 2px solid #a4773c44; box-shadow: inset 0 6px 10px #0009;
}
.idk-archive-hero-books { bottom: calc(var(--hero-sill) + var(--hero-depth) - 5px); }
.idk-archive-globe, .idk-archive-lantern { bottom: calc(var(--hero-sill) + 7px); }
.idk-archive-globe { width: min(19vw, 255px); left: 5.5%; }
.idk-archive-lantern { width: min(20vw, 275px); right: 5.5%; }
.idk-archive-globe .idk-contact-shadow { left: 14%; width: 73%; }
.idk-archive-lantern .idk-contact-shadow { width: 87%; left: 6%; }
.idk-archive-lantern::before {
    inset: auto; left: -50%; bottom: -110px; width: 200%; height: auto; aspect-ratio: 1;
    background: radial-gradient(ellipse at 64% 60%, #ffd1814a, #a4682126 34%, transparent 64%);
}
.idk-archive-hero-light {
    background: radial-gradient(ellipse at 50% 39%, #f4ca7b12, transparent 42%), radial-gradient(ellipse at 12% 74%, #d3994133, transparent 25%), radial-gradient(ellipse at 87% 68%, #ffc86b4a, transparent 33%), linear-gradient(90deg, #010100b0, transparent 23% 78%, #01010094);
}
.idk-hero-notes {
    position: absolute; bottom: calc(var(--hero-sill) + 7px); left: 16%; width: min(15vw, 185px); z-index: 3;
    transform: rotate(-1deg); filter: drop-shadow(1px 2px 2px #000b);
}
.idk-hero-volume, .idk-desk-notebooks > span {
    display: block; height: 17px; border: 2px solid #39281c; border-radius: 2px 4px 4px 2px;
    background: linear-gradient(#9c713633, #08050399 80%), var(--archive-spines);
    background-size: 100% 100%, 800% 100%; background-position: center, 71.43% 50%;
    box-shadow: inset 0 1px #bd945142, 2px 2px 3px #000a;
}
.idk-hero-volume:first-child { width: 93%; margin-left: 4%; background-position: center, 14.286% 50%; }
.idk-hero-notes .idk-library-scroll { top: -25px; left: 8%; right: auto; width: 83%; height: 26px; }
.idk-hero-volume { position: relative; z-index: 3; }
.idk-hero-bookmark {
    position: absolute; right: 10%; top: 15px; width: 41px; height: 27px; z-index: 2;
    background: linear-gradient(110deg, #ac8859, #d1b17c 55%, #806039); border: 1px solid #71512e;
    transform: rotate(-7deg); box-shadow: 1px 3px 3px #0009;
}
.idk-hero-bookmark i { position: absolute; left: 7px; right: 7px; top: 14px; height: 1px; background: #79593270; box-shadow: 0 4px #79593250; }
.idk-hero-compass, .idk-hero-key {
    position: absolute; bottom: calc(var(--hero-sill) + 9px); z-index: 5; color: #b38a44;
    filter: drop-shadow(1px 3px 1px #000c);
}
.idk-hero-compass { left: 29%; width: 49px; height: 27px; transform: rotate(-12deg); border-radius: 50%; background: radial-gradient(ellipse, #332417, #6c4d26 70%, #1a1007); box-shadow: inset 1px 1px 1px #f0c68077, 0 2px 0 #4b3016; }
.idk-hero-key { right: 27%; width: 59px; height: 19px; transform: rotate(-8deg); }
.idk-hero-compass svg, .idk-hero-key svg { display: block; width: 100%; height: 100%; }
/* The stem begins beneath the cornice, with occlusion and a shadow on wood. */
.idk-archive-ivy { top: 32px; height: 70%; width: min(19vw, 225px); filter: drop-shadow(2px 3px 2px #000b); }
.idk-archive-ivy::before {
    content: ''; position: absolute; top: 0; left: 23%; width: 28px; height: 40px;
    border-left: 2px solid #55441f; border-radius: 70%; transform: rotate(18deg); z-index: -1;
}
.idk-comp-footer { --desk-sill: 65px; --desk-depth: 225px; }
.idk-library-enabled .idk-comp-footer { min-height: 480px; padding-top: 6.2rem; }
.idk-library-enabled .idk-comp-footer > p { max-width: 48rem; margin: 0 auto; font-size: clamp(1.15rem, 1.55vw, 1.55rem); line-height: 1.55; }
.idk-library-enabled .idk-comp-footer > .idk-comp-hero-ornament { width: 220px; max-width: 100%; margin-inline: auto; }
.idk-desk-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 35%, #080502d6, transparent 68%), linear-gradient(90deg, #020100a6, transparent 25% 75%, #020100a6); }
.idk-archive-desk { bottom: var(--desk-sill); height: var(--desk-depth); z-index: 1; }
.idk-archive-desk {
    background-image: radial-gradient(ellipse at 92% 65%, #ffce814a, transparent 36%), radial-gradient(ellipse at 51% 40%, #d9ac572b, transparent 55%), linear-gradient(90deg, #080402a1, transparent 30% 73%, #1c10068c), var(--archive-desktop);
    background-size: 100% 100%;
    border-top-color: #bc955749; box-shadow: inset 0 13px 15px #080401bc, inset 0 -11px 8px #1b0d07, 0 20px 30px #000c;
}
.idk-desk-front {
    position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
    background: linear-gradient(#a37b4240, #1c0f07 25%, #482914 68%, #0b0603), var(--archive-walnut);
    border-top: 2px solid #c49b5640; box-shadow: 0 -2px 3px #0007;
}
.idk-archive-desk-props { bottom: calc(var(--desk-sill) + 20px); width: min(32vw, 400px); }
.idk-archive-desk-props .idk-contact-shadow { height: 17px; top: -8px; opacity: 0.7; }
.idk-desk-writing { position: absolute; left: 48%; bottom: calc(var(--desk-sill) + 20px); width: min(22vw, 285px); z-index: 3; }
.idk-desk-writing .idk-contact-shadow { left: 6%; width: 89%; height: 14px; top: -6px; }
.idk-desk-greenery { position: absolute; right: 3%; top: 49px; width: min(13vw, 170px); z-index: 5; opacity: 0.84; filter: drop-shadow(-2px 3px 2px #000b); }
.idk-desk-greenery img { display: block; width: 100%; height: auto; }
.idk-desk-greenery::before { content: ''; position: absolute; top: -8px; right: 2%; width: 12px; height: 20px; border-right: 2px solid #493a1e; border-radius: 60%; }
.idk-desk-candle { position: absolute; right: 4%; bottom: calc(var(--desk-sill) + 12px); width: 90px; z-index: 4; }
.idk-desk-notebooks { position: absolute; right: 12%; bottom: calc(var(--desk-sill) + 12px); width: 145px; z-index: 3; }
.idk-desk-notebooks > span { height: 22px; }
.idk-desk-notebooks > span:first-child { width: 95%; margin-left: 8%; background-position: center, 57.14% 50%; }
.idk-desk-notebooks > i { position: absolute; right: 21%; width: 12px; height: 27px; bottom: -13px; background: linear-gradient(#754123, #352015); box-shadow: 1px 2px 3px #0009; z-index: -1; }
.idk-desk-light { position: absolute; inset: 0; z-index: 5; background: radial-gradient(ellipse at 90% 78%, #ffd0892b, transparent 35%), linear-gradient(90deg, #02010085, transparent 28% 77%, #02010059); pointer-events: none; }
@media (max-width: 1000px) and (min-width: 701px) {
    .idk-archive-globe { width: 22vw; }
    .idk-archive-lantern { width: 24vw; }
}
@media (max-width: 700px) {
    .idk-library-book { --book-depth: 36px; }
    .idk-shelf-greenery { width: 77px; right: 1%; top: 17%; z-index: 4; }
    .idk-library-enabled .idk-comp-footer { min-height: 360px; }
    .idk-desk-front { height: 18px; }
    .idk-comp-hero { --hero-sill: 47px; --hero-depth: 23px; }
    .idk-archive-globe { width: 125px; }
    .idk-archive-lantern { width: 145px; }
    .idk-archive-lantern::before { bottom: -50px; }
    .idk-archive-ivy { top: 26px; width: 95px; height: 31%; }
    .idk-hero-notes { left: 24%; width: 95px; }
    .idk-hero-volume { height: 11px; }
    .idk-hero-notes .idk-library-scroll { top: -17px; height: 18px; display: block; }
    .idk-hero-bookmark { top: 9px; width: 25px; height: 19px; }
    .idk-hero-compass { left: 42%; width: 29px; height: 16px; bottom: calc(var(--hero-sill) + 6px); }
    .idk-hero-key { right: 33%; width: 32px; height: 12px; bottom: calc(var(--hero-sill) + 8px); }
    .idk-library-shelf-fill { height: calc(var(--shelf-line) - 30% - var(--shelf-depth) + 3px); }
    .idk-comp-footer { --desk-sill: 45px; --desk-depth: 160px; }
    .idk-library-enabled .idk-comp-footer { min-height: 440px; padding: 4rem 8% 19rem; }
    /* Reserve the extra body height as the phone owl grows from 210 to 260px. */
    .idk-library-enabled .idk-comp-footer { padding-bottom: calc(19rem + clamp(0px, 46vw - 210px, 50px)); }
    .idk-library-enabled .idk-comp-footer > .idk-comp-hero-ornament { margin-top: 0; margin-bottom: 1rem; }
    .idk-desk-writing { left: 47%; width: 41%; bottom: calc(var(--desk-sill) + 45px); }
    .idk-desk-greenery { top: 44px; right: 3%; width: 70px; }
    .idk-archive-desk-props { width: 61%; }
    .idk-desk-candle { width: 36px; }
    .idk-desk-notebooks { left: 50%; right: auto; width: 72px; transform: translateX(-50%); }
    .idk-desk-notebooks > span { height: 13px; }
    .idk-desk-notebooks > i { width: 7px; height: 19px; bottom: -9px; }
    .idk-contact-shadow { height: 6px; top: -2px; }
}

/* Material wear and light are applied to the surfaces receiving them. Keep
   filters/opacity off 3D book ancestors so the cover and pages retain depth. */
.idk-library-spine {
    background-image: radial-gradient(ellipse at 85% 12%, #f8c87b2b, transparent 53%), linear-gradient(90deg, #000b, transparent 22% 64%, #000b), var(--archive-spines);
    background-size: 100% 100%, 100% 100%, 800% 100%;
    background-position: center, center, var(--binding-x) center;
    border-radius: 3px 7px 3px 1px;
}
.idk-library-spine:nth-child(3n+1) { border-radius: 6px 2px 1px 4px; }
.idk-library-spine:nth-child(4n+2) { border-top-color: #d8b67b38; }
.idk-library-spine:nth-child(3n) .idk-band-upper { top: 12%; }
.idk-library-spine:nth-child(4n) .idk-band-lower { bottom: 24%; }
.idk-library-spine:nth-child(4n+1) .idk-spine-band { height: 4px; opacity: 0.65; }
.idk-library-spine:nth-child(3n+2) .idk-spine-title { transform: rotate(-1.5deg); color: #c7aa77; }
.idk-library-spine .idk-spine-headcap { background: linear-gradient(9deg, #c9b28b50, #9c7c4233 38%, #292016 42% 49%, #c9b28b40 57%); border-radius: 20% 55% 10% 40%; }
.idk-library-bay[data-shelf-scene="woodland"] .idk-shelf-light {
    background: radial-gradient(ellipse at 53% 43%, #f9cc8120, transparent 46%), radial-gradient(ellipse at 83% 63%, #efba6329, transparent 33%), linear-gradient(90deg, #010100ba, transparent 25% 75%, #01010098), linear-gradient(#0101008a, transparent 33% 67%, #040201a6);
}
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-light {
    background: radial-gradient(ellipse at 91% 65%, #ffc87133, transparent 31%), radial-gradient(ellipse at 53% 44%, #efd19b17, transparent 44%), linear-gradient(90deg, #010100ba, transparent 25% 77%, #0101008c), linear-gradient(#01010091, transparent 33% 69%, #040201a6);
}
.idk-library-bay[data-shelf-scene="quiet"] .idk-shelf-light {
    background: radial-gradient(ellipse at 51% 42%, #e9b76c20, transparent 49%), linear-gradient(90deg, #010100ba, transparent 26% 74%, #010100ad);
}
.idk-shelf-surface::after, .idk-hero-surface::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 28% 84%, #e0c6a026, transparent 24%), radial-gradient(ellipse at 71% 20%, #d6bd9430, transparent 17%), linear-gradient(3deg, transparent 88%, #cbb18428);
}
.idk-library-bay[data-shelf-scene="celestial"] .idk-shelf-surface::after { transform: scaleX(-1); opacity: 0.65; }
.idk-shelf-paper, .idk-hero-bookmark { background-image: linear-gradient(100deg, #3d251b40, transparent 45%, #f8dba42b), var(--archive-paper); background-size: 100% 100%; }
.idk-archive-globe > img { filter: drop-shadow(3px 3px 2px #000b); }
.idk-archive-lantern > img, .idk-prop-candle > img, .idk-desk-candle > img { filter: drop-shadow(-4px 3px 2px #000b); }
.idk-prop-woodland > img, .idk-prop-instrument > img, .idk-desk-writing > img { filter: drop-shadow(-3px 2px 2px #000b); }
/* Alpha-shaped light passes shade the leaves, never the rectangular image.
   Their uneven pools follow the nearby lamp and the cabinet's occlusion. */
.idk-archive-ivy::after, .idk-shelf-greenery::after, .idk-desk-greenery::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 73% 62%, #efbc6670, transparent 37%), linear-gradient(126deg, #0906028c, transparent 40% 59%, #0b0703a3 90%);
    -webkit-mask-image: var(--foliage-mask); mask-image: var(--foliage-mask);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: top left; mask-position: top left;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.idk-archive-ivy { --foliage-mask: url('img/library/archive-ivy-v1.webp'); }
.idk-shelf-greenery { --foliage-mask: url('img/library/archive-oak-fern-v1.webp'); }
.idk-desk-greenery { --foliage-mask: url('img/library/archive-maidenhair-v1.webp'); opacity: 1; }
.idk-desk-greenery::after { background: radial-gradient(ellipse at 80% 89%, #efbc6680, transparent 46%), linear-gradient(110deg, #050402a6, transparent 53%, #0b07034d); }
.idk-comp-hero .idk-archive-side::after {
    content: ''; position: absolute; top: 50px; width: 110%; height: 91px;
    background: linear-gradient(150deg, #b1844e40, #1b0e0894 45%, #080402), var(--archive-walnut);
    border-top: 2px solid #b88f5140;
    clip-path: polygon(0 0, 100% 0, 83% 17%, 52% 27%, 36% 45%, 0 100%);
    filter: drop-shadow(3px 8px 4px #000c);
}
.idk-comp-hero .idk-side-left::after { left: 10%; }
.idk-comp-hero .idk-side-right::after { right: 10%; transform: scaleX(-1); }
.idk-desk-front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 45% 4%, #d1aa6352, transparent 30%), linear-gradient(90deg, #0008, transparent 24% 75%, #0009);
    border-bottom: 3px solid #080402; box-shadow: inset 0 1px #e0b8773d, inset 0 -5px 6px #0009;
}
.idk-desk-light { background: radial-gradient(ellipse at 90% 78%, #ffd08933, transparent 37%), radial-gradient(ellipse at 50% 63%, #f4ca7812, transparent 46%), linear-gradient(90deg, #020100b0, transparent 26% 75%, #0201008c); }
.idk-book-dust { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.idk-dust-mote { position: absolute; width: var(--mote-size, 2px); height: calc(var(--mote-size, 2px) * var(--mote-shape, 1)); border-radius: 43% 56% 47% 61%; background: radial-gradient(ellipse, #fff0dcee, #dec29a99 38%, transparent 78%); filter: blur(var(--mote-blur, 0px)); opacity: 0; pointer-events: none; }
.idk-dust-soft { background: radial-gradient(ellipse, #cbb693a1, #cbb69333 42%, transparent 70%); }
.idk-dust-glimmer { background: #ffdb8f; box-shadow: 0 0 5px #f4ba5b80; }
.idk-dust-veil { position: absolute; background: radial-gradient(ellipse at 39% 44%, #cdb69594, #cdb69535 28%, transparent 63%), radial-gradient(ellipse at 64% 58%, #c0a88d70, transparent 61%); border-radius: 49% 63% 55% 47%; opacity: 0; pointer-events: none; }
.idk-book-dust [hidden] { display: none; }
.idk-library-static .idk-book-dust { display: none; }
.idk-hero-owl { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; transform-origin: 0 0; }
.idk-comp-hero { --owl-perch-offset: 20px; }
.idk-owl-layer { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
.idk-hero-owl[hidden] { display: none; }
.idk-hero-owl .idk-owl-pose { position: absolute; display: block; left: 0; top: var(--owl-perch-offset, 0px); max-width: none; height: auto; object-fit: contain; transform-origin: 0 0; filter: sepia(0.1) saturate(0.83) brightness(var(--owl-light, 0.86)) drop-shadow(1px 3px 1px #0007); }
.idk-owl-perch { position: absolute; z-index: 4; height: 6px; opacity: 0; transform: translate(-50%, -30%) skewX(-12deg); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, #0b0604c4, #0b060454 37%, transparent 70%); }
.idk-footer-owl { z-index: 6; }
.idk-owl-idle-pose { animation: idk-owl-idle-eight 20s steps(1, end) infinite; }
.idk-owl-idle-pose[data-owl-idle-pose="1"] { opacity: 0; animation-name: idk-owl-idle-one; }
@keyframes idk-owl-idle-eight { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes idk-owl-idle-one { 0%, 49.99% { opacity: 0; } 50%, 100% { opacity: 1; } }
.idk-owl-idle-paused .idk-owl-idle-pose { animation-play-state: paused; }
/* Foreground growth follows physical scene owners, never the viewport. */
.idk-climbing-foreground { position: absolute; inset: 0; z-index: 16; pointer-events: none; overflow: hidden; }
.idk-climber { position: absolute; top: 0; bottom: 0; width: clamp(38px, 10vw, 145px); overflow: visible; }
/* Full silhouettes have padded viewports; only the scene's outer edge crops. */
.idk-library-bay-heading { z-index: 19; }
.idk-climber-left { left: 0; }
.idk-climber-right { right: 0; }
.idk-climber::before { content: ''; position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 45%; background: linear-gradient(90deg, #342710, #a08d465c, #17200d); box-shadow: 2px 2px 3px #0009; }
.idk-climber-left::before { left: 16px; }
.idk-climber-right::before { right: 16px; }
.idk-climber svg { position: absolute; display: block; overflow: visible; top: 0; height: 125%; width: auto; aspect-ratio: 390 / 1090; max-width: none; filter: saturate(0.8) brightness(0.78) drop-shadow(3px 4px 3px #000c); }
.idk-climber-left svg { left: calc(var(--scene-height) / -12); }
.idk-climber-right svg { right: calc(var(--scene-height) / -12); }
.idk-comp-hero .idk-climbing-foreground { top: 70px; }
.idk-comp-hero .idk-climber-left { opacity: 0.7; }
.idk-library-bay:nth-child(even) .idk-climber svg { top: -15%; transform: scaleX(-1); filter: saturate(0.72) brightness(0.72) drop-shadow(-3px 5px 3px #000c); }
.idk-comp-footer .idk-climbing-foreground { z-index: 18; }
.idk-comp-footer .idk-climber { width: clamp(55px, 14vw, 185px); }
.idk-comp-footer .idk-climber svg { top: 0; height: 100%; filter: saturate(0.83) brightness(0.97) drop-shadow(4px 5px 4px #000c); }
.idk-comp-footer .idk-climber-left svg { left: 0; }
.idk-comp-footer .idk-climber-right svg { right: 0; }
@media (max-width: 1000px) {
    /* Fill the cabinet sides with the original complete plant silhouettes. */
    :is(.idk-comp-hero, .idk-library-bay, .idk-comp-footer) .idk-climber svg {
        top: 0; bottom: auto; width: auto; height: 100%;
    }
    .idk-comp-hero > :is(.idk-comp-kicker, .idk-comp-title, .idk-comp-tagline, .idk-comp-hero-ornament, .idk-library-enter) {
        z-index: 19;
    }
    .idk-library-book-slot { z-index: 18; }
    .idk-comp-footer > :is(p, .idk-comp-hero-ornament) { z-index: 19; }
}
.idk-living-air { position: absolute; inset: 0; z-index: 17; overflow: hidden; pointer-events: none; }
.idk-falling-leaf { position: absolute; top: 0; width: var(--leaf-size); height: var(--leaf-size); background-image: url('img/library/archive-falling-leaves-v1.webp'); background-size: 300% 200%; opacity: 0; filter: brightness(0.92) drop-shadow(1px 3px 2px #0008); animation: idk-leaf-fall 30s linear infinite; }
@keyframes idk-leaf-fall { 0% { opacity: 0; transform: translate3d(0, -60px, 0) rotate(-10deg); } 13% { opacity: 0.68; } 35% { transform: translate3d(var(--leaf-sway), calc(var(--scene-height) * 0.32), 0) rotate(26deg); } 64% { opacity: 0.58; transform: translate3d(-12px, calc(var(--scene-height) * 0.63), 0) rotate(70deg); } 87% { opacity: 0.3; } 100% { opacity: 0; transform: translate3d(18px, calc(var(--scene-height) + 60px), 0) rotate(var(--leaf-turn)); } }
.idk-fairy-mote { position: absolute; width: var(--fairy-size); height: var(--fairy-size); border-radius: 50%; background: var(--fairy-color); box-shadow: 0 0 5px 1px var(--fairy-color), 0 0 13px 2px color-mix(in srgb, var(--fairy-color) 36%, transparent); opacity: 0; animation: idk-fairy-float 20s ease-in-out infinite; }
@keyframes idk-fairy-float { 0%, 13%, 70%, 100% { opacity: 0; } 24% { opacity: 0.43; } 43% { opacity: 0.15; } 56% { opacity: 0.31; } 100% { transform: translate3d(var(--fairy-x), var(--fairy-y), 0); } }
.idk-air-paused > i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .idk-living-air { display: none; }
    .idk-owl-idle-pose { animation: none; }
}
@media (max-width: 700px) {
    .idk-comp-hero { --owl-perch-offset: 10px; }
    /* Keep the ornament and invitation in separate rows above the owl. */
    .idk-library-enabled .idk-comp-hero .idk-comp-hero-ornament { width: 140px; margin-top: 0; }
    .idk-library-enabled .idk-comp-hero .idk-library-enter {
        display: flex; width: max-content; max-width: 100%;
        margin: 0.35rem auto 0; padding: 0.35rem 0;
        transform: none;
    }
    .idk-comp-hero .idk-archive-side::after { top: 39px; height: 67px; }
    .idk-library-book[data-cover-treatment="noir"] :is(.idk-cover-art, .idk-book-artwork) img { object-position: 25% center; }
}
@media (prefers-reduced-motion: reduce) {
    .idk-book-dust { display: none; }
}