.bs-stage{width:min(100%,1100px);margin:1.5rem auto 0;position:relative}.bs-glow{pointer-events:none;background:radial-gradient(at 50% 45%,#ffd6788c,#ffd67800 65%);position:absolute;inset:-4% -6% 18%}.bs-shelf{width:100%;margin-inline:auto;position:relative;overflow-x:clip;container-type:inline-size}.bs-shelf[data-variant=tall]{width:min(100%,460px);display:none}@media (max-width:659px){.bs-shelf[data-variant=wide]{display:none}.bs-shelf[data-variant=tall]{display:block}}@media (max-width:779px){.bs-stage[data-crowded] .bs-shelf[data-variant=wide]{display:none}.bs-stage[data-crowded] .bs-shelf[data-variant=tall]{display:block}}.bs-canvas{position:absolute;top:0;bottom:0}.bs-art{object-fit:contain;filter:drop-shadow(0 24px 30px #3c230559)}[data-zone=kids]{--zone:#e9a52c;--wall:#ffb13b;--wall-blend:hard-light;--wall-alpha:.78}[data-zone=juniors]{--zone:#3d7fe6;--wall:#2f63d8;--wall-blend:color;--wall-alpha:1}.bs-wall{background:var(--wall);mix-blend-mode:var(--wall-blend);opacity:var(--wall-alpha);pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#0000,#000 6% 94%,#0000);mask-image:linear-gradient(#0000,#000 6% 94%,#0000)}.bs-mark{background:var(--zone);border:2px solid #fff3d6;flex:none;width:.8em;height:.8em;box-shadow:0 1px 2px #280f0099}[data-zone=kids]>.bs-mark{border-radius:50%}[data-zone=juniors]>.bs-mark{border-radius:2px;transform:rotate(45deg)scale(.88)}.bs-sign{color:#fff3d6;text-shadow:0 2px #280e0099;font-family:var(--font-display);background:linear-gradient(#ffecbe2e,#ffecbe00 30%,#1e0a0040),repeating-linear-gradient(177deg,#0000 0 6px,#2d120038 6px 7px,#0000 7px 13px),linear-gradient(90deg,#6a3713,#8f5223 28%,#7b4319 55%,#8a4e21 80%,#6a3713);border:3px solid #f0c45a;border-radius:12px;align-items:center;gap:.4em;line-height:1.1;display:flex;position:relative;box-shadow:inset 0 0 0 2px #5b2d0e,inset 0 3px 0 4px #ffd68c2e,0 5px #4a240a,0 10px 18px #28120080}.bs-sign:before{content:"";pointer-events:none;--nail:radial-gradient(circle, #fff1b8 0 1.5px, #e8b23c 2px 3px, #8a5a12 3.5px 4px, #0000 4.5px);background:var(--nail) left top / 10px 10px no-repeat, var(--nail) right top / 10px 10px no-repeat, var(--nail) left bottom / 10px 10px no-repeat, var(--nail) right bottom / 10px 10px no-repeat;position:absolute;inset:5px}.bs-sign-text{flex-direction:column;min-width:0;display:flex}.bs-sign-th{letter-spacing:.01em;font-weight:800}.bs-sign-en{color:#ffe2a8;font-size:.62em;font-weight:700}.bs-row>.bs-sign{text-align:center;text-wrap:balance;flex-direction:column;justify-content:center;align-self:end;height:80%;margin-bottom:2%;padding:.35em .45em;font-size:clamp(15px,2.6cqw,28px)}.bs-row>.bs-sign .bs-sign-text{align-items:center}.bs-sign-bar{z-index:2;white-space:nowrap;padding:6px 18px;font-size:19px;position:absolute;left:50%;translate:-50% -50%}.bs-plaque{font-size:inherit;text-align:center;color:var(--color-island-ink);font-family:var(--font-display);place-content:center;margin:0;padding-top:.9cqw;line-height:1.2;display:grid;position:absolute}.bs-plaque-th{font-size:max(15px,3cqw);font-weight:800}.bs-plaque-en{color:var(--color-island-ink-soft);font-size:max(11px,1.6cqw);font-weight:700}.bs-row{column-gap:2%;padding-inline:2%;display:grid;position:absolute}.bs-cell{cursor:pointer;border-radius:14px;justify-content:center;align-items:flex-end;min-width:64px;min-height:64px;display:flex;position:relative}.bs-cell[aria-disabled=true]{cursor:default}.bs-label{z-index:2;background:color-mix(in srgb, var(--tint,#0f7c93) 72%, #000);color:#fff;text-align:center;border-radius:.7em;width:max-content;max-width:108%;padding:.22em .6em .26em;font-size:max(11px,1.05cqw);font-weight:800;line-height:1.45;position:absolute;top:0;left:50%;translate:-50%;rotate:-2.5deg;box-shadow:0 0 0 .2em #fff,0 .32em .4em .08em #32190061}.bs-label:before{content:"";pointer-events:none;background:linear-gradient(#ffffff47,#fff0);border-radius:.5em .5em .3em .3em;height:38%;position:absolute;inset:.18em .4em auto}.bs-cell:nth-child(2n) .bs-label{rotate:2deg}.bs-stage[data-shelf=hadith2] .bs-label[lang=en]>.whitespace-nowrap{white-space:normal}.bs-cell .bs-book{height:72%}.bs-shelf[data-variant=tall] .bs-label{max-width:calc(100% + 6px);font-size:max(11px,2.9cqw)}.bs-shelf[data-variant=tall] .bs-cell .bs-book{height:84%}.bs-shelf[data-variant=tall] .bs-label{padding-inline:.45em;rotate:-1.5deg}.bs-shelf[data-variant=tall] .bs-cell:nth-child(2n) .bs-label{rotate:1.5deg}.bs-shelf[data-variant=tall] section:first-of-type>.bs-row .bs-label{top:-5.5cqw}.bs-cell:focus-visible{box-shadow:0 0 0 8px var(--color-brand-blue);outline:4px solid #fff}.bs-cell[data-flying] .bs-book{visibility:hidden}.bs-book{aspect-ratio:3/4;transform-origin:50% 100%;filter:drop-shadow(0 6px 5px #28140073);height:86%;transition:transform .2s ease-out,filter .2s ease-out;display:block;position:relative;transform:perspective(700px)rotateY(-14deg)}.bs-book:before{content:"";background:linear-gradient(90deg, color-mix(in srgb, var(--tint,#0f7c93) 55%, #000), var(--tint,#0f7c93));border-radius:4px 0 0 4px;width:7%;position:absolute;top:1%;bottom:1%;left:-7%;box-shadow:inset 0 0 0 1px #f7d77c99}.bs-book:after{content:"";background:repeating-linear-gradient(0deg,#fffaf0 0 2px,#e6d8b8 2px 3px);border-radius:0 3px 3px 0;width:4%;position:absolute;top:3%;bottom:3%;right:-4%}.bs-cover{background:var(--tint,#0f7c93);border-radius:2px 7px 7px 2px;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 2px #f7d77c,inset 0 0 0 4px #ffffff59}.bs-cover:after{content:"";pointer-events:none;background:linear-gradient(115deg,#ffffff59 0%,#fff0 38%,#0000 70%,#0000002e 100%);position:absolute;inset:0}.bs-cover-art{background:radial-gradient(circle,#fff8e1 0 55%,#f7d77c 56% 60%,#0000 61%);border-radius:50%;place-items:center;display:grid;position:absolute;inset:12% 14%}.bs-cover-icon{width:70%;height:70%;color:var(--color-ink)}.bs-soon{text-align:center;color:var(--color-sun-ink);background:linear-gradient(#ffd66b,#f5a623);border-radius:4px;padding-block:2px;font-size:clamp(9px,1.15vw,14px);font-weight:800;line-height:1.3;position:absolute;bottom:12%;left:-6%;right:-6%;box-shadow:0 2px #b7791f}@media (hover:hover){.bs-cell:not([aria-disabled=true]):hover .bs-book{filter:drop-shadow(0 14px 12px #28140080)}}@media (prefers-reduced-motion:no-preference){@media (hover:hover){.bs-cell:not([aria-disabled=true]):hover .bs-book{transform:perspective(700px)rotateY(-4deg)translateY(-6%)scale(1.06)}}.bs-cell:not([aria-disabled=true]):active .bs-book{transition-duration:75ms;transform:perspective(700px)rotateY(-10deg)scale(.98)}}.bs-overlay{z-index:60;pointer-events:none;perspective:1600px;position:fixed;inset:0}.bs-dim{background:radial-gradient(circle,#ffde8c73,#082346b8 62%);animation:.5s ease-out forwards bs-dim-in;position:absolute;inset:0}@keyframes bs-dim-in{0%{opacity:0}to{opacity:1}}.bs-fly{transform-origin:0 0;transform-style:preserve-3d;position:fixed}.bs-fly .bs-book{filter:drop-shadow(0 30px 30px #00000073);width:100%;height:100%;transform:none}.bs-shelf[data-variant=tall] .bs-row{column-gap:6%;padding-inline:4%}
.sg-bubble{--sg-gold:#e2ad3b;min-width:0;color:var(--color-ink);border:3px solid var(--sg-gold);background:radial-gradient(120% 90% at 50% 0,#ffffffe6,#fff0 60%),linear-gradient(#fffaf0,#fff1d2);border-radius:24px;flex:1;margin-bottom:.5rem;padding:1.35rem 1.25rem 1.1rem;position:relative;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #e2ad3b59,0 6px #c48a1e,0 14px 24px #3c230547}@media (min-width:640px){.sg-bubble{padding:1.5rem 1.6rem 1.25rem}}.sg-bubble:before{content:"";border-left:3px solid var(--sg-gold);border-bottom:3px solid var(--sg-gold);background:#fff3d8;border-bottom-left-radius:6px;width:24px;height:24px;position:absolute;bottom:22px;left:-14px;transform:rotate(45deg)skew(8deg,8deg)}.sg-bubble:after{content:"";pointer-events:none;--sg-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23e2ad3b'%3E%3Crect x='5' y='5' width='10' height='10'/%3E%3Crect x='5' y='5' width='10' height='10' transform='rotate(45 10 10)'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23fff6dc'/%3E%3C/svg%3E");background:var(--sg-star) left center / 18px 18px no-repeat, var(--sg-star) right center / 18px 18px no-repeat;height:18px;position:absolute;inset:8px 10px auto}.sg-name{color:#fff;font-family:var(--font-display);box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--sg-gold), 0 3px 6px #0003;background:#0e7490;border-radius:999px;align-items:baseline;gap:.35em;padding:.15rem .8rem;font-size:.95rem;font-weight:800;display:inline-flex;position:absolute;top:0;left:1.25rem;translate:0 -55%}.sg-name span{font-size:.8em;font-weight:700}