.ws-intro { position: relative; overflow: hidden; background: #f3f0ff; border: 1px solid #e4def7; border-radius: 20px; padding: 2.5rem; margin: 1.5rem 0 2rem; }
.ws-intro > :not(.ws-hero-covers) { position: relative; z-index: 1; max-width: 57%; }
.ws-hero-covers { position: absolute; right: 4%; top: 10%; width: 35%; height: 85%; }
.ws-hero-covers img { position: absolute; width: 61%; height: auto; border-radius: 2px; box-shadow: 0 12px 28px #38295b35; }
.ws-hero-covers img:nth-child(1) { right: 0; top: 6%; transform: rotate(14deg); }
.ws-hero-covers img:nth-child(2) { left: 0; top: 10%; transform: rotate(-13deg); }
.ws-hero-covers img:nth-child(3) { left: 20%; top: 0; transform: rotate(1deg); }
.ws-eyebrow { color: #6d28d9; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.ws-intro h2 { color: #251b3d; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.12; letter-spacing: -.03em; margin: 1rem 0; }
.ws-intro > p { max-width: 530px; color: #5c5570; line-height: 1.65; }
.ws-benefits { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin: 1.4rem 0; color: #463264; font-size: .85rem; font-weight: 700; }
.ws-benefits span::before { content: '✓'; margin-right: .4rem; color: #6d28d9; }
.ws-intro .ws-account-note { font-size: .8rem; margin: 1rem 0 0; }
.ws-browse-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.ws-browse-heading h3 { margin: 0; color: #251b3d; font-size: 1.2rem; }
.ws-browse-heading > span, .ws-browse-heading > a { font-size: .8rem; color: #655679; }
.ws-language-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.ws-language-card { --ws-accent: #6d28d9; display: block; padding: .65rem .95rem; background: #fffdf8; border: 1px solid #e4e0d8; border-radius: 24px; color: #2e2738; text-decoration: none; }
.ws-language-card:hover, .ws-language-card:focus-visible, .ws-language-card.selected { outline: 2px solid var(--ws-accent); outline-offset: 1px; background: #f3f0ff; }
.ws-language-card[data-language='de'], .ws-language-card[data-language='fi'] { --ws-accent: #345d85; }
.ws-language-card[data-language='es'], .ws-language-card[data-language='tr'] { --ws-accent: #ac4c32; }
.ws-language-card[data-language='it'], .ws-language-card[data-language='pt'] { --ws-accent: #287163; }
.ws-language-card[data-language='haw'], .ws-language-card[data-language='sv'] { --ws-accent: #956b23; }
.ws-language-mark { color: var(--ws-accent); font-size: .75rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 1rem; }
.ws-language-name { font-size: .85rem; font-weight: 650; line-height: 1.15; }
.ws-language-kind { color: #68606f; font-size: .8rem; line-height: 1.45; margin: .65rem 0 1rem; }
.ws-language-status { margin-top: auto; font-size: .7rem; font-weight: 700; color: var(--ws-accent); }
.ws-empty span { display: block; margin-top: .65rem; font-size: .9rem; }
.ws-book-language { font-size: .75rem; color: #6d28d9; margin-bottom: .6rem; }
.ws-book-actions { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1rem; font-size: .8rem; font-weight: 700; }
.ws-book-actions a { color: #6d28d9; }
.ws-volume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ws-volume-card { overflow: hidden; border: 1px solid #e7e3dc; border-radius: 14px; background: white; min-width: 0; }
.ws-cover-shelf { display: flex; justify-content: center; align-items: center; padding: 1.6rem; background: #f3f0e9; }
.ws-volume-cover { display: block; width: 72%; max-width: 215px; height: auto; box-shadow: 4px 7px 14px #35302b30; transition: transform .2s; }
.ws-cover-shelf:hover .ws-volume-cover { transform: translateY(-4px); }
.ws-volume-info { padding: 1.3rem; }
.ws-volume-info h4 { margin: .65rem 0; font-size: 1.08rem; line-height: 1.45; }
.ws-volume-info .vol { font-size: .75rem; font-weight: 750; color: #514468; }
.ws-volume-info > p { color: #6d6674; font-size: .8rem; line-height: 1.5; margin: .7rem 0 1rem; }
.ws-open-book { width: 100%; text-align: center; box-sizing: border-box; }
.ws-book-header { display: flex; gap: 2rem; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid #e7e3dc; }
.ws-detail-cover { width: 180px; height: auto; flex-shrink: 0; box-shadow: 3px 6px 15px #35302b25; }
.ws-detail-description { color: #61596a; line-height: 1.65; font-size: .95rem; max-width: 620px; }
.ws-detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 800px) { .ws-volume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-intro > :not(.ws-hero-covers) { max-width: 100%; } .ws-hero-covers { display: none; } }
@media (max-width: 620px) { .ws-intro { padding: 1.5rem; } .ws-browse-heading { flex-wrap: wrap; gap: .4rem; } .ws-book-header { gap: 1.3rem; flex-direction: column; align-items: flex-start; } .ws-detail-cover { width: 140px; } }
@media (max-width: 440px) { .ws-volume-grid { grid-template-columns: 1fr; } .ws-cover-shelf { padding: 1.5rem; } .ws-volume-cover { width: 62%; } }