.bookshelf{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,7vw,7.5rem)}.bookshelf-stage{border-radius:var(--radius-media);background:#f2f6fc;outline:none;height:clamp(24rem,40vw,34rem);position:relative;overflow:hidden}.bookshelf-stage:focus-visible{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--blue)}.bookshelf-canvas{touch-action:pan-y;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.bookshelf-placeholder{place-items:end center;padding-block-end:22%;display:grid;position:absolute;inset:0}.bookshelf-placeholder span{opacity:.7;background:linear-gradient(90deg,#dcc7a4,#e8d9bf,#dcc7a4);border-radius:1rem;width:70%;height:.5rem}.bookshelf-tooltip{z-index:2;border:1px solid var(--line);border-radius:var(--radius-card);max-width:18rem;box-shadow:var(--shadow-blue);pointer-events:none;background:#fffffff5;gap:.2rem;padding:.6rem .8rem;display:grid;position:absolute;transform:translate(-50%,calc(-100% - 1rem))}.bookshelf-tooltip strong{font-size:.86rem;line-height:1.3}.bookshelf-tooltip span{color:var(--ink-soft);font-size:.74rem}.bookshelf-hint{min-height:1.5rem;color:var(--ink-soft);margin-block:1rem clamp(2.5rem,5vw,4rem);font-size:.86rem;line-height:1.5}.bookshelf-hint strong{color:var(--ink)}.bookshelf[data-status=fallback]{display:none}.blog-card{scroll-margin-block:6rem;transition:box-shadow .4s,border-color .4s}.blog-card.is-targeted{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-pale), var(--shadow-blue)}@media (prefers-reduced-motion:reduce){.blog-card{transition:none}}@media (max-width:640px){.bookshelf{padding-inline:1.1rem}.bookshelf-stage{height:18rem}}