/* style.r24_4.css */
/* R22 · isolated two-page visual preview. One viewport; only inner result/rail/menu regions scroll. */
:root{
  color-scheme:light;
  --night:#1c1435;
  --ink:#4b332b;
  --plum:#59356f;
  --violet:#79549a;
  --gold:#cba66f;
  --gold-soft:#e2c89d;
  --paper:#f8e9c9;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night);overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",var(--wordbook-ui-font),serif;-webkit-text-size-adjust:100%;touch-action:manipulation}
#host{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden}
#studentLibrary{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);color:var(--paper);background-color:var(--night);background-image:url("./starfield_bg.b6a3105a39430cc5b.webp");background-position:center;background-size:100% 100%;background-repeat:no-repeat;touch-action:manipulation}

#studentLibrary[data-view=shelf] .sl-main{position:relative;isolation:isolate}
#studentLibrary[data-view=shelf] .sl-main::after{content:none}
#studentLibrary[data-view=shelf] .sl-shelf{z-index:1}
@media(max-height:720px){#studentLibrary[data-view=shelf] .sl-main::after{content:none}}
#studentLibrary[hidden],#studentLibrary [hidden]{display:none!important}
#studentLibrary button,#studentLibrary input{font:inherit;-webkit-tap-highlight-color:transparent}
#studentLibrary button{cursor:pointer;touch-action:manipulation}
#studentLibrary button:disabled{opacity:.42;cursor:default}
#studentLibrary button:focus-visible{outline:2px solid #f4d59a;outline-offset:2px}
#studentLibrary input:focus,#studentLibrary input:focus-visible{outline:0!important;box-shadow:none!important}
#studentLibrary h2,#studentLibrary p{margin:0}
#studentLibrary .sl-brand.mw-scene-brand{position:relative;isolation:isolate;display:flex;flex:0 0 84px;min-height:84px;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 34px 2px;border:0;background:transparent;text-align:center;overflow:visible;z-index:2}
#studentLibrary .sl-brand.mw-scene-brand::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;right:0;top:2px;height:76px;background:url("./brand_vine_v14_cropped.b6a3105a39430cc5b.webp") center/100% 100% no-repeat}
#studentLibrary .sl-brand.mw-scene-brand>b{color:#f8e7b9;font:700 clamp(20px,5.2vw,24px)/1.12 var(--wordbook-ui-font),serif;letter-spacing:3px;text-shadow:0 2px 7px #090822,0 0 10px #f6cb8a55;white-space:nowrap}
#studentLibrary .sl-brand.mw-scene-brand>small{color:#ead0a7;font:500 9px/1.35 Georgia,serif;letter-spacing:1.5px;text-shadow:0 1px 5px #100923;white-space:nowrap}
#studentLibrary .sl-brand.mw-info-brand{display:none!important}
#studentLibrary .sl-main{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;padding:0}

/* Bookshelf: the original scene is a single full-screen background. The shelf art itself reaches the viewport edges. */
#studentLibrary .sl-shelf.stage-shelf-scene{
  position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;
  overflow:hidden;border:0;border-radius:0;padding:0;margin:0;gap:0;background:none;
}
#studentLibrary .stage-shelf-frame{position:relative;flex:none;height:min(100%,155.7vw);width:auto;aspect-ratio:2/3;max-height:100%;transform:translateY(-4px) scale(1.05);transform-origin:center center}
#studentLibrary .stage-shelf-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
#studentLibrary .stage-shelf-title{
  position:absolute;top:6.6%;left:17%;width:66%;height:11.6%;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;
}
#studentLibrary .stage-shelf-title h2{
  color:#493056;font:750 clamp(21px,5.3vw,26px)/1.12 var(--wordbook-ui-font),serif;
  letter-spacing:2px;text-shadow:0 1px 1px #ffefc5,0 0 5px #fce8bf;
}
#studentLibrary .stage-shelf-title small{
  color:#77523c;font:italic 600 clamp(10px,2.7vw,12px)/1.2 "Snell Roundhand","Apple Chancery","Brush Script MT","URW Chancery L",cursive;
  letter-spacing:1.15px;text-shadow:0 1px 1px #fff0cb;
}
#studentLibrary .stage-shelf-row{position:absolute;left:2.6%;right:2.6%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;column-gap:0;min-height:0}
#studentLibrary .stage-shelf-row-1{top:21.5%;height:23.5%}
#studentLibrary .stage-shelf-row-2{top:46.2%;height:24.0%}
#studentLibrary .stage-shelf-row-3{top:71.0%;height:17.4%;left:3.4%;right:3.4%;display:block}
#studentLibrary .stage-book{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;
  min-height:0;height:100%;min-width:0;margin:0;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;transition:transform .18s ease;
}
#studentLibrary .stage-book:active{transform:translateY(-2px)}
#studentLibrary .stage-shelf-row .stage-book:nth-child(1) .stage-book-art{transform:perspective(440px) rotateY(-5deg) rotateZ(-1.2deg)}
#studentLibrary .stage-shelf-row .stage-book:nth-child(2) .stage-book-art{transform:perspective(440px) rotateY(1deg)}
#studentLibrary .stage-shelf-row .stage-book:nth-child(3) .stage-book-art{transform:perspective(440px) rotateY(5deg) rotateZ(1.2deg)}
#studentLibrary .stage-book-art{display:block;width:112%;min-width:0;height:90%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 2px #06021275);pointer-events:none}
/* The plaque deliberately overlaps the lower book edge; it is not a floor contact point. */
#studentLibrary .stage-book-caption{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;min-height:0;height:34%;width:101%;flex:none;margin-top:calc(-19% - 5px);transform:translateY(3px);padding:0 5%;color:#442960;background:url("./book_label_ornate_r20.b6a3105a39430cc5b.webp") center/100% 100% no-repeat;text-align:center;pointer-events:none}
#studentLibrary .stage-book-caption b{color:#3f2b4d;font:750 clamp(12px,3vw,15px)/1.12 var(--wordbook-ui-font),serif;text-shadow:0 1px #fdf0cf;white-space:nowrap}
#studentLibrary .stage-tarot-rail{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;gap:1px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;padding:0 1px}
#studentLibrary .stage-tarot-rail::-webkit-scrollbar{display:none}
#studentLibrary .stage-tarot{position:relative;flex:0 0 auto;height:100%;width:auto;aspect-ratio:2/3;max-height:100%;min-height:0;padding:0!important;margin:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scroll-snap-align:center;transform-origin:center bottom;transform:scale(.99);transition:transform .18s ease,filter .18s ease}
#studentLibrary .stage-tarot[data-focus=near]{transform:scale(1.025);z-index:1}
#studentLibrary .stage-tarot[data-focus=center]{transform:scale(1.08) translateY(-1px);z-index:3;filter:drop-shadow(0 0 6px #f1c77855)}
#studentLibrary .stage-tarot[aria-pressed=true]{filter:drop-shadow(0 0 9px #d6aaf6a0)}
#studentLibrary .stage-tarot img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #130b2780);pointer-events:none}
#studentLibrary .stage-tarot span{position:absolute;top:73.8%;left:0;right:0;width:100%;height:18%;display:flex;align-items:center;justify-content:center;color:#50385b;font:750 clamp(12px,3.35vw,15px)/1.03 var(--wordbook-ui-font),serif;text-align:center;white-space:nowrap;letter-spacing:.1px;text-shadow:0 1px 1px #fff4d5;pointer-events:none}
#studentLibrary .sl-nav{position:relative;isolation:isolate;z-index:3;display:flex;flex:0 0 104px;min-height:104px;width:100%;margin:0;align-items:center;justify-content:space-around;gap:0;padding:7px 18px 6px;border:0!important;border-radius:0;background:transparent;box-shadow:none}
#studentLibrary .sl-nav::before{content:"";position:absolute;inset:0 5px;z-index:-1;pointer-events:none;border:20px solid transparent;border-image-source:url("./nav_original_r19.b6a3105a39430cc5b.webp");border-image-slice:110 145 110 145 fill;border-image-width:29px 27px 28px 27px;border-image-repeat:stretch}
#studentLibrary .sl-nav button{
  position:relative;flex:1 1 25%;min-width:0;max-width:none;min-height:78px;padding:1px 2px 0;border:0;border-radius:0;
  box-shadow:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#f8deb4;font:600 12px/1.18 var(--wordbook-ui-font),serif;
}
#studentLibrary .sl-nav button img{flex:none;width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 2px 2px #08041a55)}
#studentLibrary .sl-nav button[aria-current=page]{color:#fff4d4}
#studentLibrary .sl-nav button[aria-current=page]::before{
  content:"";position:absolute;z-index:-1;top:5px;left:23%;right:23%;height:48px;pointer-events:none;
  background:radial-gradient(ellipse at center,#f4c77b66 0%,#b88ad344 42%,transparent 74%);filter:drop-shadow(0 0 7px #f3bf8470);opacity:.85;
}

/* Wordlist: a true full-screen information page, with the full parchment as its own container. */
/* A compact viewport never scrolls as a page; only result, tarot rail and an open picker can scroll. */
#studentLibrary .stage-shelf-title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#studentLibrary .stage-shelf-title h2{font-size:clamp(24px,5.8vw,28px);letter-spacing:2px}
#studentLibrary .stage-shelf-title small{display:block;color:#77523c;font:italic 650 clamp(11px,2.9vw,13px)/1.15 "Snell Roundhand","Apple Chancery","Brush Script MT","URW Chancery L",cursive;letter-spacing:1.1px;text-shadow:0 1px 1px #fff0cb}
#studentLibrary .stage-shelf-row .stage-book:nth-child(1) .stage-book-art{transform:perspective(440px) rotateY(-5deg) rotateZ(-1.2deg)}
#studentLibrary .stage-shelf-row .stage-book:nth-child(2) .stage-book-art{transform:perspective(440px) rotateY(1deg)}
#studentLibrary .stage-shelf-row .stage-book:nth-child(3) .stage-book-art{transform:perspective(440px) rotateY(5deg) rotateZ(1.2deg)}
@media(max-height:780px){
 #studentLibrary .sl-brand.mw-scene-brand{flex-basis:72px;min-height:72px}
 #studentLibrary .sl-brand.mw-scene-brand::before{height:66px}
 #studentLibrary .sl-nav{flex-basis:84px;min-height:84px;padding:4px 14px}
 #studentLibrary .sl-nav button{min-height:70px;font-size:11px}
 #studentLibrary .sl-nav button img{width:39px;height:39px}
 #studentLibrary .stage-shelf-frame{transform:translateY(0) scale(1.05)}
}
@media(prefers-reduced-motion:reduce){#studentLibrary .stage-book,#studentLibrary .stage-tarot{transition:none!important}}

/* R24 final: five complete cards in the rail; no sixth clipped fragment. */
#studentLibrary .stage-tarot-rail{gap:0;scrollbar-width:none}
#studentLibrary .stage-tarot{flex:0 0 20%;width:20%;height:100%;aspect-ratio:auto;max-height:100%}
#studentLibrary .stage-tarot img{object-fit:contain}
/* One-screen reading: the result list may scroll, the page never does. */
/* A readable focus ring for keyboard navigation, without the ugly native input box. */
@media(prefers-reduced-motion:reduce){#studentLibrary .stage-tarot{transition:none!important}}

/* R24.2 shelf correction — the wood columns, not their outer floral decorations, meet the viewport edges. */
#studentLibrary .stage-shelf-row-1,#studentLibrary .stage-shelf-row-2{left:5%;right:5%;}
#studentLibrary .stage-shelf-row-3{left:6.4%;right:6.4%;}
#studentLibrary .stage-book-art{width:110%;}
#studentLibrary .stage-book-caption{width:100%;}
#studentLibrary .stage-tarot span{font-weight:600;font-size:clamp(10px,2.9vw,13px);}

/* R24.3: tighter original four-object navigation, with larger independent icons.
   Keep the original gold border asset, active glow and labels; do not scale the entire navbar. */
#studentLibrary[data-view=shelf] .sl-nav{
  flex:0 0 92px;
  min-height:92px;
  padding:4px 17px 4px;
}
#studentLibrary[data-view=shelf] .sl-nav::before{
  border-image-width:25px 25px 24px 25px;
}
#studentLibrary[data-view=shelf] .sl-nav button{
  min-height:77px;
  gap:0;
  padding:0 2px;
  font-size:12.5px;
  line-height:1.12;
}
#studentLibrary[data-view=shelf] .sl-nav button img{
  width:54px;
  height:54px;
}
#studentLibrary[data-view=shelf] .sl-nav button[aria-current=page]::before{
  top:3px;
  left:20%;right:20%;height:54px;
}
@media(max-height:780px){
  #studentLibrary[data-view=shelf] .sl-nav{flex-basis:76px;min-height:76px;padding:3px 12px 3px}
  #studentLibrary[data-view=shelf] .sl-nav::before{border-image-width:22px 22px 20px 22px}
  #studentLibrary[data-view=shelf] .sl-nav button{min-height:67px;font-size:11.5px}
  #studentLibrary[data-view=shelf] .sl-nav button img{width:45px;height:45px}
  #studentLibrary[data-view=shelf] .sl-nav button[aria-current=page]::before{top:1px;height:45px}
}

/* R24.4: navigation anchor close to (never across) the bottom safe area.
   Never add an intermediate floating gap or stretch the original gold frame.
   The main shelf retains its 105% centered transform; books/cards unchanged. */
#studentLibrary[data-view=shelf] .sl-nav{
  flex-basis:88px;
  min-height:88px;
  margin-bottom:calc(-1 * min(7px, env(safe-area-inset-bottom, 0px)));
  padding:2px 15px 0;
}
#studentLibrary[data-view=shelf] .sl-nav::before{
  inset:-1px 4px -2px;
  border-image-width:24px 24px 22px 24px;
}
#studentLibrary[data-view=shelf] .sl-nav button{
  min-height:75px;
  gap:0;
  padding:0 2px;
  font-size:12.5px;
}
#studentLibrary[data-view=shelf] .sl-nav button img{
  width:56px;
  height:56px;
}
#studentLibrary[data-view=shelf] .sl-nav button[aria-current=page]::before{
  top:0;height:56px;
}
@media (max-height:780px){
  #studentLibrary[data-view=shelf] .sl-nav{flex-basis:74px;min-height:74px;padding:1px 12px 0;margin-bottom:calc(-1 * min(5px, env(safe-area-inset-bottom, 0px)))}
  #studentLibrary[data-view=shelf] .sl-nav::before{inset:-1px 3px -2px;border-image-width:21px 21px 19px 21px}
  #studentLibrary[data-view=shelf] .sl-nav button{min-height:66px;font-size:11.5px}
  #studentLibrary[data-view=shelf] .sl-nav button img{width:47px;height:47px}
  #studentLibrary[data-view=shelf] .sl-nav button[aria-current=page]::before{top:0;height:47px}
}

/* style.r24_6_2.css */
/* R24.6.2 candidate; preserve the restored R24.6 layout and art.
   Horizontal book and plaque moves use absolute CSS px, not scale-based offsets. */

/* First row: outside books 5px inward; their full plaque + text 8px inward. */
#studentLibrary .stage-shelf-row-1 > .stage-book:first-child{transform:translateX(5px)}
#studentLibrary .stage-shelf-row-1 > .stage-book:last-child{transform:translateX(-5px)}
#studentLibrary .stage-shelf-row-1 > .stage-book:first-child .stage-book-caption{transform:translate(3px,0px)}
#studentLibrary .stage-shelf-row-1 > .stage-book:last-child .stage-book-caption{transform:translate(-3px,0px)}

/* Second row: outside books 3px inward; their full plaque + text 5px inward. */
#studentLibrary .stage-shelf-row-2 > .stage-book:first-child{transform:translateX(3px)}
#studentLibrary .stage-shelf-row-2 > .stage-book:last-child{transform:translateX(-3px)}
#studentLibrary .stage-shelf-row-2 > .stage-book:first-child .stage-book-caption{transform:translate(2px,0px)}
#studentLibrary .stage-shelf-row-2 > .stage-book:last-child .stage-book-caption{transform:translate(-2px,0px)}

/* All plaques rise 3px from original translateY(3px); center books stay fixed.
   The label text remains a child of each plaque and travels with it. */
#studentLibrary .stage-shelf-row-1 > .stage-book:nth-child(2) .stage-book-caption,#studentLibrary .stage-shelf-row-2 > .stage-book:nth-child(2) .stage-book-caption{transform:translateY(0px)}

/* Tarot: centre the rail within the wooden pillars; 90% of pillar-to-pillar span.
   Card translation is exactly -5px, not a relative percentage. Focus retains the 85% base. */
#studentLibrary .stage-shelf-row-3{
  left:17%;right:17%;
  top:calc(71% - 5px);
}
#studentLibrary .stage-tarot{transform:scale(.85)}
#studentLibrary .stage-tarot[data-focus=near]{transform:scale(.87125)}
#studentLibrary .stage-tarot[data-focus=center]{transform:scale(.918) translateY(-1px)}
/* Card labels move upward a fixed 8px and one type-size step smaller. */
#studentLibrary .stage-tarot span{
  top:calc(73.8% - 8px);
  font-size:clamp(9px,calc(2.9vw - 1px),12px);
}

/* The Chinese brand and English subtitle move down 5px together; glow is unchanged. */
#studentLibrary .sl-brand.mw-scene-brand>b,#studentLibrary .sl-brand.mw-scene-brand>small{transform:translateY(5px)}

/* shelf_tweaks_repaired.css */
/* 由 _tuner.html 可视化微调台生成，可手工继续编辑或整段删除。 */
/* stage-book · "新概念" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(1) > button.stage-book:nth-of-type(2){translate:7px 1px;z-index:1}
/* stage-book · "学校词库" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(1) > button.stage-book:nth-of-type(1){z-index:2}
/* stage-book · "易错词" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(1){translate:11px 0px;z-index:1}
/* stage-book-art (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(1) > img.stage-book-art{scale:0.9}
/* stage-book-caption · "易错词" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(1) > span.stage-book-caption{width:118px;height:58px;translate:8px -7px}
/* stage-book-art (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(2) > img.stage-book-art{scale:0.94}
/* stage-book-caption · "待巩固" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(2) > span.stage-book-caption{width:129px;height:58px;translate:1px -8px}
/* stage-book · "全部词库" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(3){translate:-6px 0px;scale:0.95}
/* stage-book-caption · "全部词库" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(3) > span.stage-book-caption{width:133px;height:58px;translate:-4px -4px}
/* stage-book · "待巩固" (仅此一个) */
#studentLibrary > main.sl-main > div.sl-shelf > div.stage-shelf-frame > div.stage-shelf-row:nth-of-type(2) > button.stage-book:nth-of-type(2){translate:2px 0px}
/* stage-tarot-rail · "拼读魔法字母组合拼写变化" */

/* Layout/scroll repair, after externally-tuned declarations. */
/* Layout repair for user-supplied tweaks.css. Books/plaques remain untouched. */
/* Expand the fixed carousel's layout width instead of scaling the entire scrollport. */
#studentLibrary[data-view=shelf] .stage-shelf-row-3{
  left:11%;right:11%;
  top:calc(71% - 5px);
}
#studentLibrary[data-view=shelf] .stage-tarot-rail{
  scale:1 !important;
  translate:0px -6px;
  transform:none !important;
  width:100%;max-width:100%;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
#studentLibrary[data-view=shelf] .stage-tarot{transform:scale(.98);}
#studentLibrary[data-view=shelf] .stage-tarot[data-focus=near]{transform:scale(1.015)}
#studentLibrary[data-view=shelf] .stage-tarot[data-focus=center]{transform:scale(1.065) translateY(-1px)}
/* The edge crop is from parent clipping a 105% shelf: show the top finial above the main slot. */
#studentLibrary[data-view=shelf] .sl-main{overflow:visible;}
#studentLibrary[data-view=shelf] .sl-shelf.stage-shelf-scene{overflow:visible;}
/* Leave a small gap after the brand subtitle for the previously hidden gem. */
#studentLibrary[data-view=shelf] .sl-brand.mw-scene-brand{
  flex-basis:95px;min-height:95px;
}
#studentLibrary[data-view=shelf] .sl-brand.mw-scene-brand>b,#studentLibrary[data-view=shelf] .sl-brand.mw-scene-brand>small{transform:translateY(-4px)}
/* Do not let browser focus or scrollIntoView() pan an ancestor of the carousel. */
html,body,#host{overflow:clip}
#studentLibrary[data-view=shelf]{overflow:clip;overscroll-behavior: none}

/* shelf_focus_center.css */
/* Carousel-only visual correction. Preserve the user-tuned books, plaques, shelf and nav. */
/* Keep equal unscaled card slots: the scroll rail—not a card's transform—sets positions. */
#studentLibrary[data-view=shelf] .stage-tarot-rail{
  align-items:flex-end;
  scroll-snap-type:x proximity;
}
#studentLibrary[data-view=shelf] .stage-tarot{
  flex:0 0 20%;width:20%;height:92%;max-height:92%;
  transform-origin:center bottom;
  transform:scale(.96);
  transition:transform .16s ease,filter .16s ease;
  filter:none;
  z-index:0;
}
#studentLibrary[data-view=shelf] .stage-tarot[data-focus=near]{
  transform:scale(1);
  z-index:1;
}
#studentLibrary[data-view=shelf] .stage-tarot[data-focus=center]{
  transform:scale(1.09) translateY(-1px);
  z-index:5;
  filter:drop-shadow(0 0 7px #ffd17b99);
}
/* A clicked category may stay selected, but it must not look like a second focus. */
#studentLibrary[data-view=shelf] .stage-tarot[aria-pressed=true]:not([data-focus=center]){
  filter:none;
}
@media(prefers-reduced-motion:reduce){
  #studentLibrary[data-view=shelf] .stage-tarot{transition:none;}
}

/* shelf_top_unclip_v1.css */
/* R24 shelf top-finial fix: enlarge the TOP CLIP REGION without moving
   the shelf, book covers, labels, tarot cards, brand, or navigation.
   This prevents iPhone Safari from clipping the jewel when the shelf remains
   at 105% scale. Only the outer horizontal decorations may be cropped. */
#studentLibrary[data-view="shelf"] {
  --shelf-top-bleed: 32px;
}
#studentLibrary[data-view="shelf"] .sl-main {
  margin-top: calc(-1 * var(--shelf-top-bleed));
  padding-top: var(--shelf-top-bleed);
  overflow: hidden !important;
  box-sizing: border-box;
}
#studentLibrary[data-view="shelf"] .sl-shelf.stage-shelf-scene {
  overflow: visible !important;
}

/* brand_and_status_v13.css */
/* V13: matching iOS theme color and replacing only the bookshelf brand ornament. */
:root{ --night:#241452; }
html{ background-color:#241452!important; }
/* Preserve full new illustration at native aspect ratio, including flowers and jewel.
   The ornament is decorative, so its overflow must not affect header size, hit targets or layout. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand::before {
  top:-6px!important;
  left:0;
  right:0;
  height:clamp(105px,33.34vw,156px)!important;
  background-image:url("./brand_vine_v14_cropped.b6a3105a39430cc5b.webp")!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:no-repeat!important;
}

/* shelf_header_typography_v14.css */
/* V14 shelf-only: transparent trim, full-width ornament and typographic hierarchy.
   V13 list, quick filters, data semantics, navigation and shelf positions stay unchanged. */
:root { --night:#241452; }
#studentLibrary[data-view="shelf"] {
  font-family:var(--wordbook-ui-font),serif;
}
/* The CSS header starts below the OS safe-area. The artwork begins exactly at
   its top edge. 8px bleed on either side is intentionally clipped by viewport. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand {
  flex: 0 0 clamp(96px, 25.5vw, 108px) !important;
  min-height: clamp(96px, 25.5vw, 108px) !important;
  justify-content: flex-start !important;
  padding: clamp(44px, 12.2vw, 54px) 20px 0 !important;
  gap: 1px !important;
  overflow: visible !important;
}
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand::before {
  top: 0 !important;
  left: -8px !important;
  right: auto !important;
  width: calc(100% + 16px) !important;
  height: auto !important;
  aspect-ratio: 2172 / 447;
  background-image: url("./brand_vine_v14_cropped.b6a3105a39430cc5b.webp") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}
/* Place text just below the central gem / gold arch. Disable old -4px shim. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand>b {
  transform: none !important;
  font-family:var(--wordbook-ui-font),serif !important;
  font-size:clamp(21px, 5.55vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 2.2px !important;
  position:relative;
  z-index:1;
}
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand>small {
  transform: none !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(8px,2.2vw,9.5px) !important;
  font-style:normal !important;
  letter-spacing: 1.45px !important;
  position:relative;
  z-index:1;
}
#studentLibrary[data-view="shelf"] .stage-shelf-title h2,#studentLibrary[data-view="shelf"] .stage-book-caption b,#studentLibrary[data-view="shelf"] .stage-tarot span,#studentLibrary[data-view="shelf"] .sl-nav button {
  font-family:var(--wordbook-ui-font),serif !important;
}
#studentLibrary[data-view="shelf"] .stage-shelf-title small {
  font-family:Georgia,"Times New Roman",serif !important;
  font-style:italic !important;
  font-weight:600 !important;
  letter-spacing:.6px !important;
}
@media(max-height:680px) {
  #studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand {
    flex-basis:96px !important;
    min-height:96px !important;
  }
}

/* shelf_tuning_v15.css */
/* V15: shelf-only adjustments. Based on the approved V14 preview. 
   Do not move the fixed navigation, replace artwork, or modify word-list UI. */

/* Move the WHOLE bookshelf scene (artwork, plaques, books and tarot) up 5px,
   while leaving its flex slot and the bottom navigation unchanged. */
#studentLibrary[data-view="shelf"] .stage-shelf-frame {
  transform: translateY(-9px) scale(1.05) !important; /* V14: -4px */
}
@media (max-height:780px) {
  #studentLibrary[data-view="shelf"] .stage-shelf-frame {
    transform: translateY(-5px) scale(1.05) !important; /* V14: 0px */
  }
}

/* Shift both parts of the top brand together, not its ornamental border. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > small {
  transform:translateY(-10px) !important;
}

/* Keep ALL Chinese titles, captions and navigation labels in a Songti-style
   Chinese serif, using locally installed system fonts (no network dependency). */
#studentLibrary[data-view="shelf"],#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .stage-shelf-title h2,#studentLibrary[data-view="shelf"] .stage-book-caption b,#studentLibrary[data-view="shelf"] .stage-tarot span,#studentLibrary[data-view="shelf"] .sl-nav button,#studentLibrary[data-view="shelf"] .sl-nav button span {
  font-family:var(--wordbook-ui-font),serif !important;
}

/* The plaque subtitle is a graceful, regular-weight handwritten script. */
#studentLibrary[data-view="shelf"] .stage-shelf-title small {
  font-family:"Snell Roundhand","Apple Chancery","Brush Script MT","Lobster Two","Z003",cursive !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:clamp(14px, 3.65vw, 17px) !important;
  line-height:1.2 !important;
  letter-spacing:.2px !important;
}

/* shelf_serif_v16.css */
/* V16 — targeted shelf typography. Based on V15.
   Keep the stage, ornament and bottom navigation geometry unchanged. */

/* iOS Chinese serif: use an actual regular-weight Songti face. V15 relied on
   600–750 weights, which selected the Bold face and hid the Songti strokes.
   Native/system fonts only; no remote font dependency. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .stage-shelf-title h2,#studentLibrary[data-view="shelf"] .stage-book-caption b,#studentLibrary[data-view="shelf"] .stage-tarot span,#studentLibrary[data-view="shelf"] .sl-nav button span {
  font-family:var(--wordbook-ui-font),serif !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-synthesis:none !important;
}
/* Retain clear titles/labels while keeping the serif's thin/thick contrast. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b {
  -webkit-text-stroke:0.18px currentColor;
  transform:translateY(-15px) !important; /* V15 -10px, further up 5px */
}
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > small {
  transform:translateY(-15px) !important; /* move both Chinese/English together */
}
#studentLibrary[data-view="shelf"] .stage-shelf-title h2 {
  font-size:clamp(20px,5vw,23px) !important; /* <= brand clamp(21px,5.55vw,25px) */
  line-height:1.12 !important;
  -webkit-text-stroke:0.3px currentColor;
}
#studentLibrary[data-view="shelf"] .stage-book-caption b {
  -webkit-text-stroke:0.24px currentColor;
}
#studentLibrary[data-view="shelf"] .stage-tarot span {
  -webkit-text-stroke:0.13px currentColor;
}
#studentLibrary[data-view="shelf"] .sl-nav button span {
  -webkit-text-stroke:0.14px currentColor;
}

/* shelf_tarot_label_v17.css */
/* V17 — center rule/tarot card captions vertically within the illustrated label plaque.
   The light parchment text panel occupies approximately 70–87% of each tarot image.
   Keep the image, card, rail, focus animations, typography and bottom nav unchanged. */
#studentLibrary[data-view="shelf"] .stage-tarot > span {
  top: 69.5% !important;
  height: 18% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.03;
}

/* shelf_serif_spacing_v18.css */
/* V18: small, targeted shelf typography refinement based on V17.
   - Keep navigation, art, books, rule cards, positioning and data untouched.
   - Keep dynamic Chinese text as HTML; use native serif faces only (no remote font dependency).
   - On iOS Songti SC may be unavailable until downloaded; CSS cannot force installation. */

/* Prefer recognizably Song-style serif faces; avoid the synthetic over-strokes
   from V16 that partially filled in the serif detail. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .stage-shelf-title h2,#studentLibrary[data-view="shelf"] .stage-book-caption b,#studentLibrary[data-view="shelf"] .stage-tarot > span,#studentLibrary[data-view="shelf"] .sl-nav button span {
  font-family:var(--wordbook-ui-font), ui-serif, serif !important;
  font-weight:400 !important;
  font-synthesis:none !important;
  -webkit-text-stroke:0 !important;
}

/* Preserve the scroll/ornament geometry, move only the two brand text lines
   another 5px upward compared with V17 (-15px -> -20px). */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > small {
  transform:translateY(-20px) !important;
}

/* Shrink the Chinese plaque title exactly 2 CSS px at every viewport width,
   and move the whole bilingual plaque text group down by 8px to preserve
   internal spacing. Decorative plaque and books remain stationary. */
#studentLibrary[data-view="shelf"] .stage-shelf-title {
  transform:translateY(8px) !important;
}
#studentLibrary[data-view="shelf"] .stage-shelf-title h2 {
  font-size:clamp(18px,calc(5vw - 2px),21px) !important;
  line-height:1.12 !important;
}

/* shelf_fangsong_titles_v19.css */
/* V19 — V18 incremental shelf-only typography changes.
   User installed 华文仿宋 on iPhone. Request local font by its Apple/PostScript
   family name STFangsong, with localized alias and safe serif fallback.
   This does not embed or distribute fonts and cannot guarantee iOS Safari
   grants website access to user-installed font profiles. */

/* Scope to Chinese labels. Existing English brand and My Magic Library
   continue with their approved English serif / handwritten fonts. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b,#studentLibrary[data-view="shelf"] .stage-shelf-title h2,#studentLibrary[data-view="shelf"] .stage-book-caption b,#studentLibrary[data-view="shelf"] .stage-tarot > span,#studentLibrary[data-view="shelf"] .sl-nav button span {
  font-family:var(--wordbook-ui-font), serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  -webkit-text-stroke: 0 !important;
}

/* V18 brand responsive range clamp(21px,5.55vw,25px): subtract 2 CSS px. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b {
  font-size: clamp(19px, calc(5.55vw - 2px), 23px) !important;
}

/* V18 plaque responsive range clamp(18px,5vw-2px,21px): subtract 2px.
   Keep its whole bilingual group offset (+8px from V17), and preserve
   English subtitle font, all ornament positions, shelf, navigation. */
#studentLibrary[data-view="shelf"] .stage-shelf-title h2 {
  font-size: clamp(16px, calc(5vw - 4px), 19px) !important;
}

/* shelf_titles_independent_v20.css */
/* V20: only shelf typography corrections based on V19. */
/* V18 wrongly translated the entire bilingual plaque 8px. Reset the shared
   transform so title and subtitle are independently adjustable. The small
   4px individual offset compensates for the changed Chinese line height,
   returning handwritten My Magic Library to its original V15 visual Y. */
#studentLibrary[data-view="shelf"] .stage-shelf-title {
  transform: none !important;
}
#studentLibrary[data-view="shelf"] .stage-shelf-title h2 {
  position: relative;
  transform: translateY(4px) !important;
}
#studentLibrary[data-view="shelf"] .stage-shelf-title small {
  position: relative;
  transform: translateY(4px) !important;
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Lobster Two", "Z003", cursive !important;
  font-size: clamp(14px, 3.65vw, 17px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
}
/* ONLY the Chinese student-shelf brand loses 1 CSS px. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > b {
  font-size: clamp(18px, calc(5.55vw - 3px), 22px) !important;
}
/* Match the brand subtitle's line width to the Chinese brand width.
   Intentionally do not touch plaque subtitle or any list/nav content. */
#studentLibrary[data-view="shelf"] .sl-brand.mw-scene-brand > small {
  font-size: clamp(7.4px, calc(2.2vw - .45px), 9.15px) !important;
  letter-spacing: .95px !important;
}

/* shelf_background_v22.css */

:root{--shelf-scene-top:#170b4f}html,body{background-color:var(--shelf-scene-top)!important}
#studentLibrary[data-view="shelf"]{background-color:var(--shelf-scene-top)!important;background-image:url("./shelf_library_bg_v22.b6a3105a39430cc5b.webp")!important;background-repeat:no-repeat!important;background-position:center top!important;background-size:cover!important}


/* V36 · keep current smooth carousel, only add edge-centering space and selected-card lift state. */
#studentLibrary[data-view=shelf] .stage-tarot-rail::before,
#studentLibrary[data-view=shelf] .stage-tarot-rail::after{
  content:"";
  flex:0 0 40%;
  width:40%;
  height:1px;
  pointer-events:none;
}
#studentLibrary[data-view=shelf] .stage-tarot.is-flying{
  visibility:hidden;
}