/*
 * Vocatale — Apple Books visual system
 * Presentation-only layer shared by every language edition.
 * Loaded after the functional feature styles so existing behavior stays intact.
 */

:root{
  --bg:#f3efe7;
  --panel:#fffdf8;
  --card:#fffdf9;
  --ink:#24211d;
  --ink2:#716b62;
  --line:rgba(75,61,44,.16);
  --acc:#086bc1;
  --acc2:#3586cf;
  --hl:rgba(8,107,193,.09);
  --hl2:rgba(8,107,193,.16);
  --good:#3b9258;
  --bad:#c2443b;
  --warn:#a76616;
  --goodbg:#eaf5ed;
  --badbg:#faecea;
  --shadow:0 20px 60px rgba(55,39,20,.18);
  --shadow-soft:0 1px 2px rgba(55,39,20,.04),0 12px 30px rgba(55,39,20,.06);
  --radius-sm:11px;
  --radius-md:16px;
  --radius-lg:22px;
  --control-h:44px;
  --focus:0 0 0 3px rgba(8,107,193,.18);
  --vp-ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --vp-story-font:"Iowan Old Style","New York","Palatino Linotype","Book Antiqua","Songti SC","STSong",Georgia,serif;
  color-scheme:light dark;
  accent-color:var(--acc);
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#12100d;
    --panel:#211e19;
    --card:#25211c;
    --ink:#f4efe6;
    --ink2:#b7afa4;
    --line:rgba(235,225,210,.15);
    --acc:#64aaf0;
    --acc2:#8bc0f3;
    --hl:rgba(100,170,240,.14);
    --hl2:rgba(100,170,240,.22);
    --good:#70c98d;
    --bad:#ef8278;
    --warn:#e0a557;
    --goodbg:#1f3325;
    --badbg:#3b2522;
    --shadow:0 24px 70px rgba(0,0,0,.48);
    --shadow-soft:0 12px 34px rgba(0,0,0,.2);
  }
}

html{
  background:var(--bg);
  font-family:var(--vp-ui-font);
  text-rendering:optimizeLegibility;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -18rem,color-mix(in srgb,var(--panel) 72%,transparent),transparent 44rem),
    var(--bg);
  color:var(--ink);
  font-family:var(--vp-ui-font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

button,
input,
select,
textarea{
  font-family:var(--vp-ui-font);
}

button{
  min-height:var(--control-h);
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--ink);
  font-size:13.5px;
  font-weight:580;
  box-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease;
}

button:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--acc) 38%,var(--line));
  background:color-mix(in srgb,var(--panel) 90%,var(--hl));
  color:var(--acc);
}

button:active:not(:disabled){
  transform:scale(.975);
}

button.pri,
.guidedPrimaryGenerate,
#vpExportMenu summary{
  border-color:var(--acc);
  background:var(--acc);
  color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 20%,transparent);
}

button.pri:hover:not(:disabled),
.guidedPrimaryGenerate:hover:not(:disabled){
  border-color:var(--acc2);
  background:var(--acc2);
  color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 24%,transparent);
  transform:none;
}

button:disabled{
  opacity:.42;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea{
  min-height:var(--control-h);
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bg) 64%,var(--panel));
  color:var(--ink);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}

select:focus,
input:focus,
textarea:focus{
  border-color:var(--acc);
  outline:0;
  background:var(--panel);
  box-shadow:var(--focus);
}

::placeholder{
  color:color-mix(in srgb,var(--ink2) 72%,transparent);
}

::selection{
  background:var(--hl2);
}

:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  box-shadow:var(--focus);
}

/* Product shell */

:root{--tabh:68px}

#tabbar{
  min-height:var(--tabh);
  padding:5px 7px calc(5px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  box-shadow:0 -8px 24px rgba(55,39,20,.035);
  backdrop-filter:blur(28px) saturate(155%);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
}

#tabbar button,
#tabbar a.sfLangHome{
  min-height:54px;
  gap:2px;
  padding:5px 2px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink2);
  box-shadow:none;
  font-weight:520;
}

#tabbar button:hover,
#tabbar a.sfLangHome:hover{
  background:var(--hl);
  color:var(--acc);
}

#tabbar button.on,
#tabbar [aria-current="page"],
#tabbar [data-v="library"].vpFlowActive{
  background:var(--hl);
  color:var(--acc);
}

.uxNavIcon{
  display:grid;
  min-height:24px;
  place-items:center;
  font-size:19px;
  filter:saturate(.78);
}

#tabbar button.on .uxNavIcon{
  filter:none;
}

#tabbar button span.uxNavLabel,
#tabbar a span.uxNavLabel{
  font-size:10px;
  font-weight:600;
  letter-spacing:-.01em;
}

#tabbar .badge{
  top:2px;
  right:calc(50% - 25px);
  min-width:17px;
  min-height:17px;
  display:grid;
  place-items:center;
  padding:0 4px;
  border:2px solid color-mix(in srgb,var(--panel) 84%,transparent);
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-size:9px;
  font-weight:700;
}

/* An empty inbox hides the badge; the grid display above must not resurrect
   it as a red zero. */
#tabbar .badge[hidden]{
  display:none;
}

#wrap,
.page{
  max-width:900px;
  padding:26px clamp(16px,4vw,40px) calc(var(--tabh) + 58px + env(safe-area-inset-bottom));
}

.page>h1,
.guidedCreateHero h1{
  margin:6px 0 8px;
  font-family:var(--vp-ui-font);
  font-size:clamp(30px,4.5vw,42px);
  font-weight:760;
  letter-spacing:-.045em;
  line-height:1.08;
}

.guidedCreateHero p,
#bookInfo{
  color:var(--ink2);
}

/* Reading */

#unitHead{
  max-width:720px;
  margin:28px auto 14px;
}

#unitHead h1{
  margin:0 0 7px;
  font-family:var(--vp-story-font);
  font-size:clamp(31px,5vw,46px);
  font-weight:600;
  letter-spacing:-.038em;
  line-height:1.08;
  text-wrap:balance;
}

#unitHead .zhTitle{
  margin-bottom:14px;
  color:var(--ink2);
  font-size:14px;
  line-height:1.5;
}

#unitHead .chips.uxDirectMeta{
  gap:7px;
  margin:12px 0 0;
}

#unitHead .uxDirectMeta>.chip,
.chip{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink2);
  box-shadow:0 1px 2px rgba(55,39,20,.03);
  font-size:11.5px;
}

.chip b{
  color:var(--ink);
}

#uxReadTrack{
  height:2px;
}

#uxReadTrack i{
  border-radius:0 999px 999px 0;
  background:var(--acc);
}

#reader{
  max-width:720px;
  margin:0 auto;
}

.para{
  margin:30px 0;
}

.para .en{
  font-family:var(--vp-story-font);
  font-size:calc(18.5px * var(--vp-reading-scale,1));
  line-height:1.88;
  letter-spacing:.003em;
}

html[data-vp-font] #reader .en,
html[data-vp-font] #reader .zh,
html[data-vp-font] #reader .para{
  font-family:var(--vp-reading-font,var(--vp-story-font));
}

.pnum{
  min-width:26px;
  min-height:22px;
  padding:1px 7px;
  border:0;
  border-radius:999px;
  background:var(--hl);
  color:var(--acc);
  font-family:var(--vp-ui-font);
  font-size:10px;
  font-weight:650;
  text-align:center;
}

.w{
  border-radius:4px;
  transition:background-color .12s ease,color .12s ease;
}

.w:hover{
  background:var(--hl);
}

.tw{
  border:0;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(transparent 66%,var(--hl2) 66%);
  box-shadow:inset 0 -1px 0 var(--acc);
  font-weight:650;
}

.tw:hover{
  background:var(--hl);
  color:var(--acc);
}

.tw.mastered{box-shadow:inset 0 -1px 0 var(--good)}
.tw.learning{box-shadow:inset 0 -2px 0 var(--warn)}
.tw.new{box-shadow:inset 0 -2px 0 var(--bad)}

.pactions{
  gap:7px;
  margin-top:10px;
}

.pactions button{
  min-height:34px;
  padding:5px 10px;
  border-color:transparent;
  background:transparent;
  color:var(--ink2);
  font-size:11.5px;
}

.zh{
  font-size:calc(14.5px * var(--vp-reading-scale,1));
  margin-top:13px;
  padding:14px 16px;
  border:0;
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--panel) 74%,var(--bg));
  color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line);
}

.unitFoot{
  margin:38px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
  gap:9px;
}

.unitFoot>button{
  min-height:44px;
}

.uxArchiveNotice{
  border:0;
  border-radius:var(--radius-md);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 35%,transparent);
}

/* Closing card for the reading queue: the same quiet grouped surface the
   reader uses elsewhere, so the end of the list reads as a resting place. */
.vpQueueEnd{
  border:0;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--panel) 74%,var(--bg));
  box-shadow:inset 0 0 0 1px var(--line);
}

/* Lookup card and transient feedback */

#pop{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--card) 94%,transparent);
  box-shadow:var(--shadow);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
}

#pop .hw{
  padding-right:32px;
  font-family:var(--vp-story-font);
  font-size:23px;
  letter-spacing:-.025em;
}

#pop .ipa{
  color:var(--ink2);
}

#pop .spk,
#pop .close,
#pop .morebtn{
  border:0;
  background:transparent;
  color:var(--acc);
  box-shadow:none;
}

/* Icon-only, so it carries no text to give it size. Padding matched to
   #selbar button, the sibling speaker control, rather than inventing a second
   treatment. Issue #41. */
#pop .spk{
  display:inline-grid;
  place-items:center;
  padding:4px 9px;
  vertical-align:middle;
}

/* Gender and plural, directly under the headword. Quiet by design: it is a
   reference detail the learner glances at, not the meaning they opened the
   card for. Only rendered when there is something to say, so it never leaves
   an empty line behind. */
#pop .dictGrammar{
  margin-top:4px;
  font-size:13px;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
}

#pop .zhline{
  margin-top:12px;
  font-size:16px;
}

#pop .enline{
  font-family:var(--vp-story-font);
  font-size:14px;
  line-height:1.65;
}

#pop .ctxline,
#pop .newctx{
  margin-top:12px;
  padding:11px 12px;
  border:0;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bg) 66%,var(--panel));
  font-family:var(--vp-story-font);
  line-height:1.6;
}

#pop .acts{
  gap:8px;
  margin-top:14px;
}

#pop .acts button{
  min-height:42px;
  flex:1 1 120px;
}

#toast{
  bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom));
  padding:10px 17px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(28,28,30,.92);
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font-size:13px;
}

#selbar,
#genPill{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(28,28,30,.92);
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* The close control was flush against the pill's own edge; give it a little
   breathing room instead of redesigning the pill. */
#genPill .gp-x{
  width:auto;
  min-width:22px;
  padding:0 7px;
  margin-left:2px;
}

/* Grouped content and Library */

.guidedLibrarySwitch,
.btabs{
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bg) 70%,var(--panel));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent);
}

.guidedLibrarySwitch{
  display:inline-flex;
}

.guidedLibrarySwitch button,
.btabs button{
  min-height:36px;
  padding:7px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink2);
  box-shadow:none;
  font-size:12.5px;
}

.guidedLibrarySwitch button.on,
.btabs button.on{
  border:0;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 2px 7px rgba(55,39,20,.11);
  font-weight:650;
}

.guidedLibrarySwitch button.on .uxLibraryCount{
  background:var(--hl);
  color:var(--acc);
}

.uxLibraryToolbar{
  gap:9px;
  margin:14px 0;
}

.uxFilterPanel{
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}

.uxFilterChip{
  border-color:transparent;
  border-radius:999px;
  background:var(--hl);
  color:var(--acc);
}

.inboxRow,
.artFolder,
.guidedCard,
.scCard,
.uxWizardCard,
.uxMetric,
.sfMemoryCard,
.sfAdvancedWriting,
.sfSuggestion,
.vpExportBar,
.vpFlowSelectionHeader{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}

.inboxRow{
  min-height:72px;
  margin:10px 0;
  padding:13px 15px;
}

.inboxRow:hover{
  border-color:color-mix(in srgb,var(--acc) 32%,var(--line));
  background:color-mix(in srgb,var(--card) 92%,var(--hl));
  box-shadow:0 12px 28px rgba(55,39,20,.09);
  transform:translateY(-1px);
}

.artFolder{
  margin:11px 0;
}

.afHead{
  min-height:56px;
  padding:11px 14px;
}

.artRow,
.artRow.inFolder{
  margin:0;
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  background:transparent;
}

.artRow:last-child{
  border-bottom:0;
}

.artRow:hover{
  background:var(--hl);
}

.artRow .t b,
.bkItem .fw,
.vpWordName{
  font-family:var(--vp-story-font);
  font-weight:650;
}

.artRow .c,
.ibMeta .c,
.genTag,
.sfSerialBadge{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  border-color:var(--line);
  border-radius:999px;
  background:var(--panel);
  padding:3px 8px;
}

#bookList{
  display:grid;
  gap:10px;
  margin-top:10px;
}

#bookList .bkItem{
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}

#bookList .bkItem .row1{
  gap:9px;
}

#bookList .bkItem .fw,
.vpWordName{
  font-size:17px;
}

#bookList .bkItem .fctx{
  margin-top:9px;
  color:var(--ink2);
  font-family:var(--vp-story-font);
  font-size:12.5px;
  font-style:normal;
  line-height:1.65;
}

#bookList .bkItem .acts{
  gap:7px;
  margin-top:10px;
}

#bookList .bkItem .acts button{
  min-height:36px;
  padding:6px 10px;
  border-color:transparent;
  background:color-mix(in srgb,var(--bg) 64%,var(--panel));
}

.vpExportBar,
#aBulk,
#uxVocabBulk,
.vpVocabContext,
#vpDeckActionDock .vpActionDock{
  padding:11px 13px;
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}

.vpExportOptions{
  padding:7px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  box-shadow:var(--shadow);
}

.vpExportOptions button{
  border-radius:8px;
}

/* Story, Series, memory and settings */

.uxSteps,
.sfCreateSteps{
  gap:8px;
}

.uxStep,
.sfCreateSteps span{
  border-color:var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--ink2);
}

.uxStep.on,
.sfCreateSteps .on{
  border-color:color-mix(in srgb,var(--acc) 50%,var(--line));
  background:var(--hl);
  color:var(--acc);
}

.uxWizardCard,
.guidedCard{
  padding:clamp(16px,3vw,22px);
}

.guidedCard h2,
.scCard h2,
.uxWizardCard h2,
.sfMemoryCard h2{
  font-family:var(--vp-ui-font);
  font-weight:700;
  letter-spacing:-.02em;
}

.uxWordPreview span,
.scChip,
.gserChip{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--hl);
  color:var(--acc);
}

.scChip:hover,
.gserChip:hover,
.scChip.on,
.gserChip.on,
#serialBranch .gserChip[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--acc) 42%,var(--line));
  background:var(--hl2);
  color:var(--acc);
}

.sfModeChoice{
  min-height:88px;
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:var(--panel);
}

.sfModeChoice.on{
  border-color:var(--acc);
  background:var(--hl);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 10%,transparent);
}

.sfMemoryItem,
.gserCard .gserRow{
  border-color:var(--line);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bg) 66%,var(--panel));
}

.sfTimelineNo,
.sfPlanNo{
  background:var(--hl);
  color:var(--acc);
}

.sfAuthority,
.sfBranchBeat{
  border:0;
  border-radius:var(--radius-sm);
  background:var(--hl);
  box-shadow:inset 3px 0 0 var(--acc);
}

.uxSettingsStack{
  gap:14px;
}

.uxSettingsGroup,
.setSec{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}

.uxSettingsGroup>summary{
  min-height:58px;
  padding:13px 16px;
  font-size:14px;
}

.uxSettingsGroup>summary::after{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--bg) 65%,var(--panel));
  color:var(--acc);
  font-size:17px;
  font-weight:400;
}

.uxSettingsGroupBody{
  padding:0 14px 14px;
}

.setSec{
  padding:15px 16px;
}

.setSec h3{
  font-size:14px;
  font-weight:700;
}

.setSec .frow{
  min-height:48px;
  margin:5px 0;
  padding:5px 0;
  border-bottom:1px solid var(--line);
}

.setSec .frow:last-child{
  border-bottom:0;
}

.uxInlineAdvanced{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bg) 64%,var(--panel));
}

.uxLanguageSwitch{
  border-color:transparent;
  border-radius:var(--radius-sm);
  background:var(--hl);
  color:var(--acc);
}

/* Sheets, dialogs and onboarding */

#modalBack{
  padding:5vh 16px;
  background:rgba(18,16,13,.38);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

#modal{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow);
}

#modal header{
  min-height:58px;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 86%,transparent);
}

#modal header h2{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  text-align:center;
}

#modal header button{
  min-width:38px;
  min-height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb,var(--bg) 65%,var(--panel));
  color:var(--ink2);
}

#modal .mbody{
  padding:16px 18px 20px;
}

.vpTourCard{
  padding:17px 48px 15px 17px;
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}

.vpTourEyebrow{
  color:var(--acc);
}

.vpTourTarget{
  box-shadow:0 0 0 3px var(--card),0 0 0 6px color-mix(in srgb,var(--acc) 55%,transparent)!important;
}

.vpTourProgress{
  background:color-mix(in srgb,var(--line) 75%,transparent);
}

@supports(corner-shape:squircle){
  button,
  #pop,
  #modal,
  .inboxRow,
  .artFolder,
  .guidedCard,
  .scCard,
  .uxWizardCard,
  .sfMemoryCard,
  .uxSettingsGroup{
    corner-shape:squircle;
  }
}

@media(min-width:900px){
  #tabbar{
    width:94px;
    padding:20px 10px;
    gap:8px;
    border-top:0;
    border-right:1px solid var(--line);
    box-shadow:8px 0 24px rgba(55,39,20,.025);
  }

  #tabbar button,
  #tabbar a.sfLangHome{
    min-height:62px;
    flex:0 0 auto;
    padding:7px 3px;
  }

  #views,
  #storageBar,
  .vpGuestBar{
    margin-left:94px;
  }

  #uxReadTrack{
    left:94px;
  }

  #aBulk,
  #uxVocabBulk,
  .vpVocabContext,
  #vpDeckActionDock{
    left:114px;
    right:20px;
    bottom:20px;
  }

  #toast{
    left:calc(50% + 47px);
    bottom:24px;
  }
}

@media(max-width:640px){
  #wrap,
  .page{
    padding:18px 15px calc(var(--tabh) + 64px + env(safe-area-inset-bottom));
  }

  #unitHead{
    margin-top:20px;
  }

  #unitHead h1{
    font-size:32px;
  }

  .para{
    margin:24px 0;
  }

  .para .en{
    font-size:calc(17.5px * var(--vp-reading-scale,1));
    line-height:1.84;
  }

  #pop{
    right:8px!important;
    bottom:calc(var(--tabh) + 8px + env(safe-area-inset-bottom))!important;
    left:8px!important;
    width:auto;
    max-width:none;
    padding:16px;
    border-radius:var(--radius-lg);
  }

  #modalBack{
    align-items:flex-end;
    padding:0;
  }

  #modal{
    width:100%;
    max-height:88dvh;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(18px);
  }

  #modalBack.show #modal{
    transform:translateY(0);
  }

  #modal header{
    padding-top:14px;
  }

  .guidedLibrarySwitch{
    width:100%;
  }

  .guidedLibrarySwitch button{
    flex:1;
  }

  .uxSteps{
    overflow-x:auto;
    grid-template-columns:repeat(3,minmax(112px,1fr));
    scrollbar-width:none;
  }

  .unitFoot>button{
    flex:1 1 135px;
  }

  /* Full width on a phone, but still the band's shared offset -- see the
     :root band tokens in ux-overhaul.css. */
  .vpTourCard{
    right:12px;
    bottom:var(--vp-band-bottom);
    left:12px;
    width:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* -------------------------------------------------------------------------
   Apple Books product structure
   Decorative elements are supplied by apple-books-ui.js. The selectors below
   never hide or replace application controls.
   ------------------------------------------------------------------------- */

.uxBrand{
  display:none;
}

.uxNavIcon svg,
.uxInlineIcon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.uxNavIcon{
  width:24px;
  height:24px;
  min-height:24px;
  filter:none;
}

#tabbar button.on .uxNavIcon svg{
  stroke-width:2.15;
}

.uxInlineIcon{
  display:inline-grid;
  width:17px;
  height:17px;
  flex:0 0 17px;
  place-items:center;
}

.uxPageEyebrow{
  margin:0 0 7px;
  color:var(--acc);
  font-size:11px;
  font-weight:720;
  letter-spacing:.095em;
  line-height:1.2;
  text-transform:uppercase;
}

.uxPageHeading{
  text-wrap:balance;
}

/* Read Now bookshelf */

body.uxBooksReadHome #wrap{
  width:min(100%,1180px);
  max-width:1180px;
  padding-top:34px;
}

.uxShelfHead{
  max-width:none!important;
  margin:0 0 26px!important;
  padding:0 2px 22px;
  border-bottom:1px solid var(--line);
}

.uxShelfHead h1{
  margin:0!important;
  font-family:var(--vp-ui-font)!important;
  font-size:clamp(35px,5vw,48px)!important;
  font-weight:760!important;
  letter-spacing:-.047em!important;
}

.uxShelfHead .zhTitle{
  max-width:640px;
  margin:9px 0 0!important;
  color:var(--ink2);
  font-size:14px!important;
}

#reader.uxBooksShelf{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:32px clamp(20px,3.2vw,38px);
  max-width:none;
}

.uxBooksShelf .inboxRow{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  align-self:start;
  gap:0;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.uxBooksShelf .inboxRow:hover{
  border:0;
  background:transparent;
  box-shadow:none;
  transform:translateY(-3px);
}

.uxImportArticleCard{
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  align-items:stretch;
  align-self:start;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  text-align:left;
}

.uxImportArticleCard:hover:not(:disabled){
  border:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  transform:translateY(-3px);
}

.uxImportArticleCard:active:not(:disabled){
  transform:scale(.985);
}

.uxImportCardCover{
  display:grid;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:1.52/1;
  flex:none;
  place-items:center;
  margin-bottom:14px;
  border:1.5px dashed color-mix(in srgb,var(--ink2) 48%,transparent);
  border-radius:7px 16px 16px 7px;
  background:color-mix(in srgb,var(--ink) 5%,var(--panel));
  color:var(--ink2);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--panel) 75%,transparent);
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}

.uxImportArticleCard:hover .uxImportCardCover,
.uxImportArticleCard:focus-visible .uxImportCardCover{
  border-color:var(--acc);
  background:var(--hl);
  color:var(--acc);
}

.uxImportPlus{
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--ink2) 10%,transparent);
  font-family:var(--vp-ui-font);
  font-size:42px;
  font-weight:260;
  line-height:1;
}

.uxImportCardTitle{
  display:block;
  overflow:hidden;
  padding:0 2px;
  color:var(--ink);
  font-size:15px;
  font-weight:660;
  letter-spacing:-.018em;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.uxImportCardHint{
  display:-webkit-box;
  min-height:36px;
  margin-top:4px;
  padding:0 2px;
  overflow:hidden;
  color:var(--ink2);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.uxBooksShelf>.inboxZero{
  grid-column:1/-1;
}

.uxBookCover{
  position:relative;
  display:flex;
  width:100%;
  aspect-ratio:1.52/1;
  flex:none;
  flex-direction:column;
  justify-content:space-between;
  margin-bottom:14px;
  padding:20px;
  overflow:hidden;
  border-radius:7px 16px 16px 7px;
  background:linear-gradient(145deg,#284a69,#86a9c2);
  box-shadow:0 2px 3px rgba(40,31,22,.12),0 14px 28px rgba(40,31,22,.16);
  color:#fff;
  pointer-events:none;
  isolation:isolate;
}

.uxBookCover::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.27),rgba(255,255,255,.14),transparent);
}

.uxBookCover::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-24px;
  bottom:-46px;
  z-index:-1;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(255,255,255,.08),0 0 0 52px rgba(255,255,255,.05);
}

.uxBookCover>i{
  width:36px;
  height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.75);
}

.uxBookCover>b{
  font-family:var(--vp-story-font);
  font-size:clamp(44px,7vw,70px);
  font-weight:500;
  line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.12);
}

.uxBookCover>small{
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}

.uxBookCover[data-variant="1"]{background:linear-gradient(145deg,#714c3a,#d7a36f)}
.uxBookCover[data-variant="2"]{background:linear-gradient(145deg,#2f6658,#91b997)}
.uxBookCover[data-variant="3"]{background:linear-gradient(145deg,#65537f,#b69bc8)}
.uxBookCover[data-variant="4"]{background:linear-gradient(145deg,#8a4a57,#d59896)}
.uxBookCover[data-variant="5"]{background:linear-gradient(145deg,#5f5947,#c2b57d)}

.uxBooksShelf .ibT{
  display:block;
  min-width:0;
  padding:0 2px;
}

.uxBooksShelf .ibT b{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-family:var(--vp-ui-font);
  font-size:15px;
  font-weight:660;
  letter-spacing:-.018em;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.uxBooksShelf .ibT small{
  display:-webkit-box;
  min-height:36px;
  margin-top:4px;
  overflow:hidden;
  color:var(--ink2);
  font-size:12px;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.uxBooksShelf .ibMeta{
  display:flex;
  gap:5px;
  margin-top:9px;
  padding:0 2px;
  overflow:hidden;
  flex-wrap:nowrap;
}

.uxBooksShelf .ibMeta .c{
  max-width:125px;
  overflow:hidden;
  border:0;
  background:transparent;
  color:var(--ink2);
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.uxBooksShelf .ibMeta .c:first-child{
  color:var(--acc);
  font-weight:620;
}

/* Collection / Library */

.guidedLibraryHead.uxCollectionHead{
  margin:0 0 26px;
  padding:0 0 22px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.uxCollectionHead .guidedLibraryTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
}

.uxCollectionHead .guidedLibraryTop h1{
  margin:0;
  font-size:clamp(35px,5vw,48px);
  font-weight:760;
  letter-spacing:-.047em;
  line-height:1.05;
}

.uxCollectionHead .guidedLibraryTop p{
  max-width:650px;
  margin:9px 0 0;
  color:var(--ink2);
  font-size:14px;
}

.guidedLibrarySwitch{
  min-width:250px;
  border-color:transparent;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  box-shadow:none;
}

.guidedLibrarySwitch button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  flex:1 1 0;
  min-width:0;
}

.guidedLibrarySwitch .uxLibraryCount{
  margin-left:0;
}

.guidedLibrarySwitch button.on{
  box-shadow:0 1px 2px rgba(30,24,17,.08),0 3px 9px rgba(30,24,17,.07);
}

.uxLibraryToolbar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  margin-bottom:18px;
}

.uxLibraryToolbar input[type="search"]{
  min-height:46px;
  padding-left:16px;
  border-color:transparent;
  border-radius:13px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  box-shadow:none;
  font-size:15px;
}

#uxFilterButton{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-color:transparent;
  background:transparent;
  color:var(--acc);
}

.artFolder{
  padding:0;
  overflow:hidden;
  border-radius:18px;
  background:var(--panel);
}

.artFolder>summary{
  min-height:50px;
  padding:14px 16px;
  font-size:15px;
}

.artFolder .artRow,
#aRows>.artRow{
  position:relative;
  min-height:76px;
  margin:0;
  padding:12px 14px 12px 25px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
}

.artFolder .artRow:last-child,
#aRows>.artRow:last-child{
  border-bottom:0;
}

.artFolder .artRow::before,
#aRows>.artRow::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  left:10px;
  width:7px;
  border-radius:2px 5px 5px 2px;
  background:linear-gradient(#456c8c,#95b4ca);
  box-shadow:0 2px 5px rgba(40,31,22,.15);
}

.artRow[data-books-variant="1"]::before{background:linear-gradient(#835842,#d3a475)}
.artRow[data-books-variant="2"]::before{background:linear-gradient(#3a705e,#92bca0)}
.artRow[data-books-variant="3"]::before{background:linear-gradient(#6a5884,#b69dca)}
.artRow[data-books-variant="4"]::before{background:linear-gradient(#914e5c,#d89c9b)}
.artRow[data-books-variant="5"]::before{background:linear-gradient(#655f4c,#c7ba82)}

#bookList{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}

#bookList .bkItem{
  position:relative;
  margin:0;
  padding:14px 16px 14px 22px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#bookList .bkItem:last-child{
  border-bottom:0;
}

#bookList .bkItem::before{
  content:"";
  position:absolute;
  top:17px;
  bottom:17px;
  left:9px;
  width:4px;
  border-radius:99px;
  background:var(--acc);
  opacity:.68;
}

#bookList .bkItem:hover{
  background:color-mix(in srgb,var(--hl) 56%,transparent);
  transform:none;
}

/* Story and Series discovery cards */

.guidedCreateHero.uxBooksFeatureHero{
  position:relative;
  min-height:210px;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(110px,26%,230px);
  align-items:end;
  gap:clamp(16px,3vw,34px);
  margin:6px 0 26px;
  padding:28px 30px 30px;
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 84% 30%,rgba(255,255,255,.32),transparent 23%),
    linear-gradient(135deg,#e8f3ff,#cadff5 48%,#b7cce5);
  box-shadow:0 1px 1px rgba(48,39,29,.04),0 16px 36px rgba(48,39,29,.1);
  color:#1f2b37;
  isolation:isolate;
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="read"]{
  background:
    radial-gradient(circle at 84% 28%,rgba(255,255,255,.33),transparent 25%),
    linear-gradient(135deg,#f8edd7,#ead6ad 48%,#d4b987);
  color:#352a1c;
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="library"]{
  background:
    radial-gradient(circle at 84% 27%,rgba(255,255,255,.3),transparent 25%),
    linear-gradient(135deg,#eee8f6,#d9cde8 48%,#bca8d2);
  color:#30283a;
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="series"],
.guidedCreateHero.uxBooksFeatureHero[data-books-kind="new-series"]{
  background:
    radial-gradient(circle at 84% 26%,rgba(255,255,255,.29),transparent 24%),
    linear-gradient(135deg,#f1e8fb,#d8c7eb 48%,#b8a4d2);
  color:#2e2638;
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="review"]{
  background:
    radial-gradient(circle at 82% 28%,rgba(255,255,255,.34),transparent 24%),
    linear-gradient(135deg,#e7f2ef,#c5ddd6 48%,#9fc4b8);
  color:#1e2f2b;
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="settings"]{
  background:
    radial-gradient(circle at 84% 28%,rgba(255,255,255,.31),transparent 25%),
    linear-gradient(135deg,#e8edf2,#cfd9e2 48%,#afbfcd);
  color:#26313b;
}

.uxFeatureCopy{
  position:relative;
  min-width:0;
  grid-column:1;
  grid-row:1;
  align-self:end;
  z-index:1;
}

.uxFeatureCopy>.zhTitle{
  max-width:none;
  margin:0!important;
  color:currentColor;
  font-size:14px!important;
  line-height:1.55;
  opacity:.72;
}

.uxCollectionHead.uxBooksFeatureHero .guidedLibraryTop{
  display:contents;
}

.uxCollectionHead.uxBooksFeatureHero .guidedLibraryTop>.uxFeatureCopy{
  grid-column:1;
  align-self:end;
}

.uxCollectionHead.uxBooksFeatureHero .guidedLibrarySwitch{
  width:min(100%,370px);
  min-width:0;
  grid-column:1/-1;
  grid-row:2;
  margin-top:4px;
  z-index:1;
}

.uxBooksFeatureHero .uxPageEyebrow{
  color:currentColor;
  opacity:.62;
}

.uxBooksFeatureHero h1{
  margin:0 0 8px;
  color:currentColor;
  font-size:clamp(36px,5vw,50px);
  font-weight:750;
  letter-spacing:-.05em;
}

.uxBooksFeatureHero p{
  position:relative;
  z-index:1;
  margin:0;
  color:currentColor;
  font-size:14px;
  line-height:1.55;
  opacity:.75;
}

.uxFeatureArtwork{
  position:relative;
  width:100%;
  height:164px;
  grid-column:2;
  grid-row:1;
  align-self:center;
  z-index:0;
  pointer-events:none;
}

.uxFeatureArtwork>i:not([class]){
  position:absolute;
  display:block;
  width:62%;
  height:82%;
  top:8%;
  border-radius:5px 14px 14px 5px;
  background:linear-gradient(145deg,#306d9d,#76a8cd);
  box-shadow:0 12px 22px rgba(31,43,55,.18);
  transform:rotate(-9deg);
}

.uxFeatureArtwork>i:not([class]):nth-child(2){
  left:24%;
  top:2%;
  background:linear-gradient(145deg,#936b4c,#d1a577);
  transform:rotate(2deg);
}

.uxFeatureArtwork>i:not([class]):nth-child(3){
  left:47%;
  top:12%;
  background:linear-gradient(145deg,#516d5a,#9dbc91);
  transform:rotate(11deg);
}

[data-books-kind="series"] .uxFeatureArtwork i,
[data-books-kind="new-series"] .uxFeatureArtwork i{
  background:linear-gradient(145deg,#59456f,#a58abc);
}

[data-books-kind="series"] .uxFeatureArtwork i:nth-child(2),
[data-books-kind="new-series"] .uxFeatureArtwork i:nth-child(2){
  background:linear-gradient(145deg,#735566,#bf91a6);
}

[data-books-kind="series"] .uxFeatureArtwork i:nth-child(3),
[data-books-kind="new-series"] .uxFeatureArtwork i:nth-child(3){
  background:linear-gradient(145deg,#4f6571,#8fa9b5);
}

/* Read: an open book, kept in its own grid column so the pages never cover copy. */
[data-books-kind="read"] .uxReadBook{
  position:absolute;
  display:flex;
  width:94%;
  height:66%;
  top:20%;
  left:3%;
  gap:3px;
  filter:drop-shadow(0 15px 14px rgba(53,42,28,.2));
  transform:rotate(-3deg);
}

[data-books-kind="read"] .uxReadBook>b{
  position:relative;
  display:block;
  width:50%;
  height:100%;
  border:1px solid rgba(91,68,37,.16);
  background:
    linear-gradient(rgba(83,62,35,.16),rgba(83,62,35,.16)) 50% 35%/58% 3px no-repeat,
    linear-gradient(rgba(83,62,35,.12),rgba(83,62,35,.12)) 50% 48%/68% 3px no-repeat,
    linear-gradient(rgba(83,62,35,.1),rgba(83,62,35,.1)) 50% 61%/54% 3px no-repeat,
    linear-gradient(155deg,#fffdf6,#f2e5cb);
}

[data-books-kind="read"] .uxReadBook>b:first-child{
  border-radius:16px 3px 4px 12px;
  transform:skewY(-4deg);
}

[data-books-kind="read"] .uxReadBook>b:last-child{
  border-radius:3px 16px 12px 4px;
  transform:skewY(4deg);
}

[data-books-kind="read"] .uxReadBook::after{
  content:"";
  position:absolute;
  width:3px;
  height:92%;
  top:4%;
  left:calc(50% - 1px);
  border-radius:99px;
  background:rgba(83,62,35,.2);
}

[data-books-kind="read"] .uxReadRibbon{
  position:absolute;
  width:13%;
  height:43%;
  right:21%;
  bottom:2%;
  border-radius:2px 2px 8px 8px;
  background:#c85b53;
  box-shadow:0 7px 12px rgba(53,42,28,.14);
  transform:rotate(5deg);
}

/* Library: a folder holding two slim volumes. */
[data-books-kind="library"] .uxLibraryFolder{
  position:absolute;
  width:92%;
  height:58%;
  left:4%;
  bottom:9%;
  border-radius:10px 18px 16px 16px;
  background:linear-gradient(150deg,#a98152,#d2ac76);
  box-shadow:0 16px 24px rgba(48,40,58,.2);
  transform:rotate(-3deg);
}

[data-books-kind="library"] .uxLibraryFolder::before{
  content:"";
  position:absolute;
  width:44%;
  height:21%;
  top:-17%;
  left:7%;
  border-radius:8px 10px 0 0;
  background:#b9905f;
}

[data-books-kind="library"] .uxLibraryVolume{
  position:absolute;
  display:block;
  width:32%;
  height:68%;
  bottom:28%;
  border-radius:4px 11px 9px 4px;
  box-shadow:0 10px 18px rgba(48,40,58,.18);
}

[data-books-kind="library"] .uxLibraryVolume::after{
  content:"";
  position:absolute;
  height:4px;
  left:18%;
  right:18%;
  top:18%;
  border-radius:99px;
  background:rgba(255,255,255,.6);
}

[data-books-kind="library"] .uxLibraryVolumeOne{
  left:17%;
  background:linear-gradient(150deg,#46667d,#8ca9bc);
  transform:rotate(-8deg);
}

[data-books-kind="library"] .uxLibraryVolumeTwo{
  right:18%;
  background:linear-gradient(150deg,#6d547d,#aa8db8);
  transform:rotate(6deg);
}

/* Settings: a tactile control panel with three independent sliders. */
[data-books-kind="settings"] .uxSettingsPanel{
  position:absolute;
  display:flex;
  width:82%;
  height:82%;
  top:9%;
  left:9%;
  flex-direction:column;
  justify-content:space-evenly;
  padding:12% 14%;
  border:1px solid rgba(38,49,59,.12);
  border-radius:22px;
  background:linear-gradient(155deg,#fffdf8,#e6e0d5);
  box-shadow:0 17px 28px rgba(38,49,59,.2);
  box-sizing:border-box;
  transform:rotate(4deg);
}

[data-books-kind="settings"] .uxSettingsPanel>b{
  position:relative;
  display:block;
  width:100%;
  height:5px;
  border-radius:99px;
  background:rgba(38,49,59,.18);
}

[data-books-kind="settings"] .uxSettingsPanel>b::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  top:50%;
  border:4px solid #6e93af;
  border-radius:50%;
  background:#f8f5ef;
  box-shadow:0 3px 7px rgba(38,49,59,.16);
  transform:translate(-50%,-50%);
}

[data-books-kind="settings"] .uxSettingsPanel>b:nth-child(1)::after{left:26%}
[data-books-kind="settings"] .uxSettingsPanel>b:nth-child(2)::after{left:72%}
[data-books-kind="settings"] .uxSettingsPanel>b:nth-child(3)::after{left:45%}

/* Quick Review: one flashcard (flat books style — not a fanned cover stack). */
[data-books-kind="review"] .uxFeatureArtwork{
  z-index:0;
}

[data-books-kind="review"] .uxFeatureArtwork .uxFlashCard{
  position:absolute;
  display:block;
  width:58%;
  height:78%;
  top:11%;
  left:22%;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),transparent 36%),
    linear-gradient(155deg,#f8f4ec,#e6d9c3 70%,#d4c2a6);
  box-shadow:0 16px 30px rgba(30,47,43,.2);
  transform:rotate(-4deg);
}

[data-books-kind="review"] .uxFeatureArtwork .uxFlashCard::before{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  top:28%;
  height:8%;
  border-radius:999px;
  background:rgba(30,47,43,.18);
}

[data-books-kind="review"] .uxFeatureArtwork .uxFlashCard::after{
  content:"";
  position:absolute;
  left:18%;
  width:46%;
  top:44%;
  height:6%;
  border-radius:999px;
  background:rgba(47,122,110,.45);
}

.guidedCreateHero.uxBooksFeatureHero[data-books-kind="news"]{
  background:
    radial-gradient(circle at 84% 28%,rgba(255,255,255,.12),transparent 26%),
    linear-gradient(135deg,#1a2233,#141b28 48%,#1e2738);
  color:#e8eef6;
}

[data-books-kind="news"] .uxFeatureArtwork{
  z-index:0;
}

[data-books-kind="news"] .uxFeatureArtwork .uxNewsGlobe{
  position:absolute;
  display:block;
  width:78%;
  aspect-ratio:1;
  height:auto;
  top:50%;
  left:50%;
  border-radius:50%;
  border:2px solid #c5cedc;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 50%,transparent 22%,rgba(197,206,220,.4) 23%,transparent 24.5%),
    radial-gradient(circle at 50% 50%,transparent 40%,rgba(197,206,220,.38) 41%,transparent 42.5%),
    radial-gradient(circle at 50% 50%,transparent 58%,rgba(197,206,220,.32) 59%,transparent 60.5%),
    linear-gradient(90deg,transparent 48.5%,rgba(197,206,220,.55) 49%,transparent 51.5%),
    linear-gradient(55deg,transparent 48.5%,rgba(197,206,220,.35) 49%,transparent 51.5%),
    linear-gradient(-55deg,transparent 48.5%,rgba(197,206,220,.35) 49%,transparent 51.5%),
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.1),transparent 42%),
    #1a2a48;
  box-shadow:0 14px 28px rgba(8,12,22,.35);
  transform:translate(-50%,-50%);
}

[data-books-kind="news"] .uxFeatureArtwork .uxNewsBanner{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  left:4%;
  right:4%;
  top:42%;
  height:22%;
  margin:0;
  border:1.5px solid #8a1a1a;
  border-radius:5px;
  background:
    linear-gradient(105deg,transparent 72%,rgba(255,255,255,.18) 72%,rgba(255,255,255,.18) 88%,transparent 88%),
    linear-gradient(180deg,#e03a3a,#c62828 55%,#b71c1c);
  box-shadow:0 10px 20px rgba(0,0,0,.28);
  color:#f2f4f7;
  font-size:clamp(12px,1.7vw,17px);
  font-weight:780;
  letter-spacing:.18em;
  line-height:1;
  text-indent:.18em;
  transform:none;
  z-index:1;
}

.uxBooksFeatureHero .qrDisclaimer{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:8px 0 0;
  color:currentColor;
  font-size:13px;
  line-height:1.5;
  opacity:.62;
}

.uxWizardCard,
.scCard{
  border-color:transparent;
  border-radius:20px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}

.gserHome{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.gserHome>.gserBig,
.gserHome>.gserH2{
  grid-column:1/-1;
}

.gserRow{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  align-content:start;
  column-gap:14px;
  margin:0;
  padding:16px;
  border:0;
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}

.gserRow>.uxBookCoverCompact{
  grid-row:1/5;
}

.uxBookCoverCompact{
  width:74px;
  aspect-ratio:2/3;
  margin:0;
  padding:9px;
  border-radius:4px 9px 9px 4px;
}

.uxBookCoverCompact>b{
  font-size:28px;
}

.uxBookCoverCompact>small{
  display:none;
}

.gserRow>.gserHead,
.gserRow>.gserSyn,
.gserRow>.gserSet,
.gserRow>.gserActs{
  grid-column:2;
}

/* iOS grouped Settings */

.uxBooksSettings{
  max-width:760px;
}

.uxBooksSettings>.uxSettingsHero{
  margin-top:6px;
}

.uxSettingsStack{
  gap:18px;
}

.uxSettingsGroup{
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:var(--panel);
  box-shadow:0 1px 2px rgba(55,39,20,.04),0 8px 24px rgba(55,39,20,.055);
}

.uxSettingsGroup>summary{
  min-height:54px;
  padding:16px 18px;
  border:0;
  color:var(--ink);
  font-size:16px;
  font-weight:650;
}

.uxSettingsGroup[open]>summary{
  border-bottom:1px solid var(--line);
}

.uxSettingsGroupBody{
  padding:0 18px;
}

.uxSettingsGroupBody>.setSec{
  margin:0;
  padding:18px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.uxSettingsGroupBody>.setSec:last-child{
  border-bottom:0;
}

.uxSettingsGroupBody>.setSec>h3{
  margin-top:0;
  font-size:14px;
}

/* Focused reading surface and toolbar */

body.uxBooksArticle{
  background:var(--panel);
}

.uxBooksArticle #wrap{
  max-width:780px;
}

.uxBooksArticle #unitHead{
  margin-top:42px;
  margin-bottom:30px;
}

.uxBooksArticle #reader{
  max-width:720px;
  margin-inline:auto;
}

@media(prefers-color-scheme:dark){
  .guidedCreateHero.uxBooksFeatureHero{
    background:
      radial-gradient(circle at 84% 30%,rgba(255,255,255,.09),transparent 23%),
      linear-gradient(135deg,#253647,#24313d 48%,#283745);
    color:#ecf4fb;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="series"],
  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="new-series"]{
    background:
      radial-gradient(circle at 84% 26%,rgba(255,255,255,.08),transparent 24%),
      linear-gradient(135deg,#382f43,#302a38 48%,#362e41);
    color:#f3ecf8;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="read"]{
    background:
      radial-gradient(circle at 84% 28%,rgba(255,255,255,.08),transparent 25%),
      linear-gradient(135deg,#3d3325,#352d23 48%,#463a29);
    color:#f5ead7;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="library"]{
    background:
      radial-gradient(circle at 84% 27%,rgba(255,255,255,.08),transparent 25%),
      linear-gradient(135deg,#352f3f,#302a39 48%,#3d3449);
    color:#f2ebf8;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="review"]{
    background:
      radial-gradient(circle at 82% 28%,rgba(255,255,255,.08),transparent 24%),
      linear-gradient(135deg,#243936,#223430 48%,#2a3f3a);
    color:#e8f4f0;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="news"]{
    background:
      radial-gradient(circle at 84% 28%,rgba(255,255,255,.1),transparent 26%),
      linear-gradient(135deg,#151b28,#10151f 48%,#1a2230);
    color:#e8eef6;
  }

  .guidedCreateHero.uxBooksFeatureHero[data-books-kind="settings"]{
    background:
      radial-gradient(circle at 84% 28%,rgba(255,255,255,.08),transparent 25%),
      linear-gradient(135deg,#2b363f,#27323a 48%,#34424d);
    color:#edf3f7;
  }

  .uxSettingsGroup,
  #bookList,
  .gserRow{
    box-shadow:0 10px 28px rgba(0,0,0,.18);
  }
}

@media(min-width:900px){
  #tabbar{
    width:112px;
    padding:18px 12px;
  }

  .uxBrand{
    display:flex;
    min-height:78px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    color:var(--ink);
  }

  .uxBrand>span{
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#2182d5,#075ea7);
    color:#fff;
    font-family:var(--vp-story-font);
    font-size:21px;
    font-weight:700;
    letter-spacing:-.06em;
    box-shadow:0 8px 18px rgba(8,107,193,.22);
  }

  .uxBrand>small{
    margin-top:7px;
    font-size:9px;
    font-weight:650;
    letter-spacing:-.02em;
  }

  #tabbar button,
  #tabbar a.sfLangHome{
    width:100%;
    min-height:65px;
  }

  #tabbar button.on{
    background:var(--hl);
  }

  #views,
  #storageBar,
  .vpGuestBar{
    margin-left:112px;
  }

  #uxReadTrack{
    left:112px;
  }

  #aBulk,
  #uxVocabBulk,
  .vpVocabContext,
  #vpDeckActionDock{
    left:132px;
  }

  #toast{
    left:calc(50% + 56px);
  }
}

@media(max-width:760px){
  body.uxBooksReadHome #wrap{
    padding-top:23px;
  }

  #reader.uxBooksShelf{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:27px 15px;
  }

  .uxBookCover{
    padding:15px;
    border-radius:5px 12px 12px 5px;
  }

  .uxImportCardCover{
    border-radius:5px 12px 12px 5px;
  }

  .uxCollectionHead .guidedLibraryTop{
    grid-template-columns:1fr;
    gap:18px;
  }

  .guidedLibrarySwitch{
    width:100%;
    min-width:0;
  }

  .guidedCreateHero.uxBooksFeatureHero{
    min-height:220px;
    grid-template-columns:minmax(0,1fr) 27%;
    gap:14px;
    padding:26px 25px 28px;
  }

  .uxFeatureArtwork{
    width:100%;
    height:150px;
    opacity:.82;
  }

  .gserHome{
    grid-template-columns:1fr;
  }

  .gserHome>*{
    grid-column:1!important;
  }
}

@media(max-width:480px){
  .uxPageEyebrow{
    font-size:10px;
  }

  .uxShelfHead h1,
  .uxCollectionHead .guidedLibraryTop h1,
  .uxBooksSettings .uxSettingsHero h1{
    font-size:34px!important;
  }

  #reader.uxBooksShelf{
    gap:24px 13px;
  }

  .uxBookCover{
    aspect-ratio:1.35/1;
    margin-bottom:11px;
  }

  .uxImportCardCover{
    aspect-ratio:1.35/1;
    margin-bottom:11px;
  }

  .uxBookCover>b{
    font-size:38px;
  }

  .uxBooksShelf .ibT b{
    font-size:13.5px;
  }

  .uxBooksShelf .ibT small{
    display:none;
  }

  .uxImportCardHint{
    display:none;
  }

  .uxBooksShelf .ibMeta{
    margin-top:5px;
  }

  .uxBooksShelf .ibMeta .c:nth-child(n+3){
    display:none;
  }

  .guidedCreateHero.uxBooksFeatureHero{
    min-height:200px;
    grid-template-columns:minmax(0,1fr) 27%;
    gap:12px;
    padding:24px 20px;
  }

  .uxBooksFeatureHero h1{
    font-size:34px;
  }

  .uxBooksFeatureHero p{
    max-width:none;
  }

  .uxFeatureArtwork{
    height:132px;
  }

  .uxCollectionHead.uxBooksFeatureHero .guidedLibrarySwitch{
    width:100%;
  }

  .gserRow{
    grid-template-columns:58px minmax(0,1fr);
    padding:13px;
  }

  .uxBookCoverCompact{
    width:58px;
  }
}