/* Local material and bookmark study only. */
body.year-tabs .stage,body.year-tabs.mode-single .stage{padding:110px 12px 35px}
body.year-tabs .book,body.year-tabs.mode-single .book{--w:calc(100vw - 24px);width:100%;height:clamp(480px,65vw,900px)}
body.year-tabs.mode-single .book{height:720px}
body.year-tabs .pf-page{border-radius:0}
body.year-tabs .pf-page::after{display:none}
body.paper-material .pf-page:not(.is-cover){background:#faf7f2;background-image:linear-gradient(90deg,#6e615522,transparent 9%,transparent 94%,#8b776211);border-color:#cfc5b9;box-shadow:inset 0 0 20px #7a68551a;color:#503c4b}
body.paper-material .pf-page.--left:not(.is-cover){background-image:linear-gradient(90deg,#8b77620c,transparent 8%,transparent 88%,#53483e38);box-shadow:inset -8px 0 16px #65584a12}
body.paper-material .pf-page.--right:not(.is-cover){background-image:linear-gradient(90deg,#53483e38,transparent 12%,transparent 92%,#8b77620c);box-shadow:inset 8px 0 16px #65584a12}
body.paper-material #flip-host{filter:drop-shadow(0 5px 9px #241a2533)}
body.year-tabs .bookmark-rail,body.year-tabs.mode-single .bookmark-rail{top:auto;bottom:calc(100% - 12px);left:16px;right:16px;height:88px;align-items:flex-end;gap:8px}
body.year-tabs .marks,body.year-tabs.mode-single .marks{gap:8px;align-items:flex-end}
body.year-tabs #ribbon,body.year-tabs #marks .mark,body.year-tabs.mode-single #ribbon,body.year-tabs.mode-single #marks .mark{border:0;border-radius:0;background:transparent!important;width:var(--tab-width,110px);min-width:0;height:var(--tab-height,58px);padding:0 4px 12px;flex:none;display:flex;align-items:center;justify-content:center;overflow:visible;color:var(--tab-text)!important;font-size:var(--tab-size,12px);font-weight:var(--tab-weight,400);text-decoration:none;isolation:isolate}
.tab-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;fill:var(--tab-fill);stroke:var(--tab-stroke);stroke-width:var(--tab-line,1px)}
.tab-shape path{vector-effect:non-scaling-stroke}
[aria-pressed=true]>.tab-shape{fill:var(--tab-active)}
.tab-label{position:relative}
body.year-tabs[data-tab-pattern="2"] .tab-label{writing-mode:vertical-rl;text-orientation:mixed}
body.year-tabs[data-tab-pattern="3"] .tab-label{padding-top:12px}
body.year-tabs[data-tab-position="bottom"] .stage{padding-top:35px;padding-bottom:110px}
body.year-tabs[data-tab-position="bottom"] .bookmark-rail{top:calc(100% - 12px);bottom:auto;align-items:flex-start}
body.year-tabs[data-tab-position="bottom"] .marks{align-items:flex-start}
body.year-tabs[data-tab-position="bottom"] #ribbon,body.year-tabs[data-tab-position="bottom"] #marks .mark{padding:12px 4px 0}
body[data-tab-position="bottom"] .tab-shape{transform:scaleY(-1)}
.bookmark-lab{margin:20px auto 35px;padding:16px;width:min(940px,calc(100% - 32px));border:1px solid #eadbe766;font:13px Georgia,'Yu Mincho',serif;background:#49374f;color:#f9eef7}
.bookmark-lab summary{cursor:pointer}.lab-layout{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0}.bookmark-lab label{display:flex;gap:8px;align-items:center}.bookmark-lab select,.bookmark-lab button{background:#68516f;color:inherit;border:1px solid #c6b3c9;padding:6px}.lab-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.lab-tabs fieldset{display:grid;gap:10px;border:1px solid #a68ba6;padding:12px;min-width:0}.lab-tabs label{justify-content:space-between}.lab-tabs input[type=color]{width:48px;height:27px;padding:0;border:0}.lab-tabs input[type=range]{width:115px}.bookmark-lab output{min-width:30px}.lab-hint{opacity:.65;font-size:11px;margin-top:15px}
@media(max-width:600px){body.year-tabs .stage,body.year-tabs.mode-single .stage{padding-left:6px;padding-right:6px}body.year-tabs .bookmark-rail,body.year-tabs.mode-single .bookmark-rail{left:8px;right:8px;gap:5px}body.year-tabs .marks,body.year-tabs.mode-single .marks{gap:5px}}
/* Use the same text box for pagination and the rendered leaves. */
body.year-tabs .measure-page .page-inner{padding:10% 12% 10%!important}
@media(max-width:390px){body.year-tabs[data-tab-pattern="1"] #ribbon,body.year-tabs[data-tab-pattern="1"] #marks .mark{width:calc((100vw - 48px)/3)}}
/* Diagonal study: the page covers the root of the ribbon. */
body.year-tabs[data-tab-pattern="4"] .bookmark-rail{left:28px;right:auto;height:180px}
body.year-tabs[data-tab-pattern="4"][data-tab-position="bottom"] .bookmark-rail{top:calc(100% - 22px)}
body.year-tabs[data-tab-pattern="4"] #ribbon{width:240px;height:180px;padding:0;display:block}
.diagonal-ribbon{display:block;width:100%;height:100%;overflow:visible;shape-rendering:crispEdges}
.diagonal-ribbon text{shape-rendering:auto}
body.year-tabs[data-tab-pattern="4"][data-tab-position="bottom"] .stage{padding-bottom:190px}
body.year-tabs[data-tab-pattern="4"][data-tab-position="top"] .stage{padding-top:205px}
body.year-tabs[data-tab-pattern="4"][data-tab-position="top"] .diagonal-ribbon{transform:scaleY(-1)}
body.year-tabs #marks:empty{display:none}
/* Pull the bookmark outward without changing its color. */
body.year-tabs #ribbon{font-family:Yomogi,cursive;font-weight:400;transition:translate .18s ease;translate:0 0}
body.year-tabs #ribbon:is(:hover,:focus-visible,[aria-pressed=true]){translate:0 9px;text-decoration:none}
body.year-tabs[data-tab-position="top"] #ribbon:is(:hover,:focus-visible,[aria-pressed=true]){translate:0 -9px}
body.year-tabs[data-tab-pattern="4"][data-tab-position="bottom"] #ribbon:is(:hover,:focus-visible,[aria-pressed=true]){translate:-8px 8px}
body.year-tabs[data-tab-pattern="4"][data-tab-position="top"] #ribbon:is(:hover,:focus-visible,[aria-pressed=true]){translate:-8px -8px}
body.year-tabs #ribbon[aria-pressed=true]>.tab-shape{fill:var(--tab-fill)}
body.year-tabs #ribbon>.diagonal-ribbon,body.year-tabs #ribbon>.tab-shape{filter:drop-shadow(3px 5px 3px #160d194d)}
body.year-tabs[data-tab-pattern="2"] .bookmark-rail{height:180px}
body.year-tabs[data-tab-pattern="2"][data-tab-position="bottom"] .bookmark-rail{top:calc(100% - 22px)}
body.year-tabs[data-tab-pattern="2"] #ribbon{padding:0;display:block}
body.year-tabs[data-tab-pattern="2"][data-tab-position="bottom"] .stage{padding-bottom:205px}
body.year-tabs[data-tab-pattern="2"][data-tab-position="top"] .stage{padding-top:205px}
body.year-tabs[data-tab-pattern="2"][data-tab-position="top"] .diagonal-ribbon{transform:scaleY(-1)}
@media(prefers-reduced-motion:reduce){body.year-tabs #ribbon{transition:none}}