/* Apple Books-inspired interaction layer. White, quiet, and content-first. */
:root{
  --ab-ink:#1d1d1f;
  --ab-muted:#6e6e73;
  --ab-faint:#8e8e93;
  --ab-line:#e5e5e7;
  --ab-soft:#f5f5f7;
  --ab-current:#08738f;
  --ab-current-bg:#f0f8fa;
  --ab-current-line:#bfdde5;
  --ab-control-radius:13px;
  --ab-control-height:50px;
  --ab-hit:44px;
}

.apple-books-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Opaque white chrome: no fake glass or floating island. */
.runner{
  min-height:var(--header-h);background:#fff!important;
  border-bottom:1px solid var(--ab-line)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.runner::before{content:none!important}
.runner__home{width:var(--ab-hit);height:var(--ab-hit);border-radius:50%;
  transition:background var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.runner__home:active{background:#ececee}
.runner__lang{
  width:74px;min-width:74px;height:var(--ab-hit)!important;padding:3px!important;
  border:1px solid var(--ab-line)!important;border-radius:var(--ab-control-radius)!important;
  background:#fff!important;box-shadow:none!important}
.runner__lang span{min-width:0;padding:7px 5px!important;border-radius:10px!important;
  color:var(--ab-muted)!important}
.runner__lang span.is-active{background:var(--ab-ink)!important;color:#fff!important;
  box-shadow:none!important}

.burger{width:var(--ab-hit);height:var(--ab-hit)}
.burger::before{width:40px;height:40px;border:1px solid var(--ab-line)!important;
  border-radius:50%!important;background:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.burger span{transition:transform var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
  opacity var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.burger:active::before{background:#ececee!important}

/* Left drawer selected by the user. */
html.apple-books-drawer-open,body.apple-books-drawer-open{overflow:hidden}
.drawer{width:min(320px,calc(100vw - 44px));max-width:none;padding:0 0 40px;
  background:#fff;border-right:1px solid var(--ab-line);box-shadow:8px 0 24px rgba(0,0,0,.12)}
.scrim{background:rgba(0,0,0,.22)}
.drawer__toolbar{position:sticky;top:0;z-index:2;height:56px;padding:0 10px;
  display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--ab-line)}
.drawer__close{width:var(--ab-hit);height:var(--ab-hit);border:0;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--ab-ink);font:400 22px/1 var(--sans);cursor:pointer}
.drawer__close:active,.toc__chapter-toggle:active{background:#ececee}
.drawer__title{margin:auto;font:700 14px/1 var(--sans);color:var(--ab-ink)}
.drawer__toolbar-spacer{width:var(--ab-hit);height:var(--ab-hit)}
.drawer__brand{padding:17px 18px 14px;margin:0;border-bottom:1px solid var(--ab-line)}
.drawer__pct{padding:12px 18px 8px}
.drawer>.toc__pagelink{min-height:var(--ab-hit);padding:10px 18px!important;
  display:flex!important;align-items:center}
.drawer>.toc__hen{display:block;padding:18px 18px 8px;color:var(--ab-current)}
.toc__chapter-group{border-bottom:1px solid var(--ab-line)}
.toc__chapter-row{min-height:var(--ab-hit);display:flex;align-items:stretch}
.toc__chapter-row>.toc__chap{min-height:var(--ab-hit);padding:11px 8px 11px 18px;
  display:flex;align-items:center;flex:1;color:var(--ab-ink);background:#fff}
.toc__chapter-toggle{width:var(--ab-hit);height:var(--ab-hit);border:0;background:#fff;
  color:var(--ab-faint);display:grid;place-items:center;cursor:pointer}
.toc__chapter-toggle>span[aria-hidden="true"]{font-size:18px;
  transition:transform var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.toc__chapter-toggle[aria-expanded="true"]>span[aria-hidden="true"]{transform:rotate(90deg)}
.toc__chapter-talks>.toc__talk{min-height:var(--ab-hit);padding:10px 18px 10px 32px;
  display:flex;align-items:center;line-height:1.55;background:#fff;color:var(--ab-muted)}
.toc__chapter-talks>.toc__talk.is-here,.toc__chapter-talks>.toc__talk[aria-current="page"]{
  background:var(--ab-current-bg);color:var(--ab-current);font-weight:700}
.toc__chapter-row>.toc__chap[aria-current="location"]{color:var(--ab-current)}

/* Native details/summary remains the source of truth. */
.ans,.aug{border:0;border-top:1px solid var(--ab-line);border-radius:0;background:#fff}
.ans__sum,.aug__sum{min-height:56px;padding:0 4px;display:flex;align-items:center;gap:10px;
  color:var(--ab-ink);background:#fff;font-size:12.5px;line-height:1.45}
.ans__sum::after,.aug__sum::after{content:"›"!important;margin-left:auto;color:var(--ab-faint);
  font-size:20px;font-weight:400;transform:rotate(0);transform-origin:center;
  transition:transform var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.ans[open]>.ans__sum::after,.aug[open]>.aug__sum::after{content:"›"!important;transform:rotate(90deg)}
.ans__pill,.aug__pill{display:none}
.ans__body{margin:0;padding:15px 4px 18px;background:#fff;border-radius:0}
.aug__wrap{padding:2px 0 12px}

/* Copy feedback stays on the pressed control; orange remains reserved for answer meaning. */
.yt__copy{min-height:var(--ab-hit);padding:0 14px;gap:8px;border:1px solid var(--ab-line);
  border-radius:12px;background:#fff;color:var(--ab-ink);box-shadow:none;
  transition:background var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
    border-color var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
    color var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
    transform 100ms var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.yt__copy:active{transform:scale(.98);background:var(--ab-soft)}
.yt__copy-ico,.yt__copy:hover .yt__copy-ico{border-color:currentColor}
.yt__copy.is-copied{background:var(--ab-current-bg);border-color:var(--ab-current-line);color:var(--ab-current)}
.yt__copy.is-copied .yt__copy-ico{border-color:var(--ab-current);opacity:1}
.yt__copy.is-copied .yt__copy-ico::before{border-left-color:var(--ab-current);
  border-bottom-color:var(--ab-current)}

/* Quiz keeps its book layout, but selected state becomes unmistakable. */
.js-quiz .quiz__choice{min-height:56px;border-radius:var(--ab-control-radius);
  border-color:var(--ab-line);background:#fff}
.js-quiz .quiz__choice.is-picked{border-color:var(--ab-current-line);
  background:var(--ab-current-bg);box-shadow:none}
.js-quiz .quiz__choice.is-picked .quiz__key{background:var(--ab-current);color:#fff}
.js-quiz .quiz__choice[aria-disabled="true"]:active{transform:none}
.js-quiz .quiz__choice[aria-disabled="true"]:not(.is-picked):hover{border-color:var(--ab-line)}

/* Opaque bottom navigation with 44px logical targets. */
.storybar{height:calc(60px + env(safe-area-inset-bottom));background:#fff!important;
  border-top:1px solid var(--ab-line)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:none!important}
.storybar__side{height:var(--ab-hit);border-radius:12px}
.storybar__home{height:var(--ab-hit);min-width:var(--ab-hit);padding:0 14px;
  border:1px solid var(--ab-line);border-radius:12px;background:#fff}
.storybar__side:active,.storybar__home:active{background:#ececee}
.storybar:focus-within{transform:translateY(0)!important;transition-duration:0ms!important}

/* Next-story/chapter becomes a white hairline row; override the legacy white-on-black text too. */
.gonext__a{min-height:88px;border:1px solid var(--ab-line)!important;border-radius:14px;
  background:#fff!important;box-shadow:none!important;color:var(--ab-ink)!important;
  transition:border-color var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
    background var(--duration-fast,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1))}
.gonext--talk .gonext__lbl,.gonext--chap .gonext__lbl{color:var(--ab-muted)!important}
.gonext--talk .gonext__ttl,.gonext--chap .gonext__ttl{color:var(--ab-ink)!important}
.chapterpage .gonext--story .gonext__a{
  display:flex;align-items:flex-start;min-height:88px;padding:20px 44px 20px 24px;
  border:1px solid var(--ab-line)!important;border-radius:14px;background:#fff!important;
  box-shadow:none!important;color:var(--ab-ink)!important;text-align:left}
.chapterpage .gonext--story .gonext__a .gonext__lbl{margin-bottom:0}
.chapterpage .gonext--story .gonext__a::after{
  content:"›";right:18px;color:var(--ab-faint);font-family:inherit;font-size:20px;opacity:1}
.gonext--story .gonext--end{cursor:pointer}

@media (hover:hover) and (pointer:fine){
  .runner__home:hover,.drawer__close:hover{background:var(--ab-soft)}
  .yt__copy:hover{background:var(--ab-soft);border-color:#d2d2d7;color:var(--ab-ink)}
  .storybar__side:hover,.storybar__side:hover .storybar__ar{color:var(--ab-ink)}
  .storybar__home:hover{border-color:#d2d2d7;color:var(--ab-ink);background:var(--ab-soft)}
  .js-quiz .quiz__choice:not([aria-disabled="true"]):hover{border-color:#c7c7cc}
  .gonext__a:hover{transform:none!important;border-color:#d2d2d7!important;
    background:var(--ab-soft)!important;box-shadow:none!important}
  .chapterpage .gonext--story .gonext__a:hover{
    border-color:#d2d2d7!important;background:var(--ab-soft)!important;color:var(--ab-ink)!important}
  .chapterpage .gonext--story .gonext__a:hover .gonext__ttl{color:var(--ab-ink)!important}
}

@media (hover:none),(pointer:coarse){
  .runner__home:not(:active):hover{background:transparent}
  .drawer__close:not(:active):hover{background:#fff}
  .yt__copy:not(:active):hover{background:#fff;border-color:var(--ab-line);color:var(--ab-ink)}
  .yt__copy.is-copied:not(:active):hover{
    background:var(--ab-current-bg);border-color:var(--ab-current-line);color:var(--ab-current)}
  .storybar__side:not(:active):hover{color:var(--sub)}
  .storybar__side:not(:active):hover .storybar__ar{color:var(--faint)}
  .storybar__home:not(:active):hover{
    border-color:var(--ab-line);color:var(--sub);background:#fff}
  .js-quiz .quiz__choice:not(:active):hover{border-color:var(--ab-line)}
  .js-quiz .quiz__choice.is-picked:not(:active):hover{
    border-color:var(--ab-current-line);background:var(--ab-current-bg)}
  .gonext__a:not(:active):hover{
    transform:none!important;border-color:var(--ab-line)!important;
    background:#fff!important;box-shadow:none!important;color:var(--ab-ink)!important}
  .chapterpage .gonext--story .gonext__a:not(:active):hover{
    border-color:var(--ab-line)!important;background:#fff!important;color:var(--ab-ink)!important}
  .chapterpage .gonext--story .gonext__a:not(:active):hover .gonext__ttl{
    color:var(--ab-ink)!important}
}

:where(a,button,summary,[role="button"]):focus-visible{
  outline:2px solid var(--ab-current)!important;outline-offset:3px!important}

@media (prefers-reduced-motion:reduce){
  .burger span,.toc__chapter-toggle>span[aria-hidden="true"],
  .ans__sum::after,.aug__sum::after{transition:none!important}
}