/* Draw UI symbols instead of asking the operating system to select a glyph. */
.ui-icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em;overflow:visible;pointer-events:none}
button{-webkit-appearance:none;appearance:none;border-radius:0}
.brand-mark,.title-star,.botanic-mark{line-height:1}
.brand-mark .ui-icon,.title-star .ui-icon,.botanic-mark .ui-icon{vertical-align:middle}
.caption-arrow .ui-icon,.open-indicator .ui-icon{display:block}
.zoom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.zoom-button .ui-icon,.reader-section-nav .ui-icon{width:18px;height:18px}
.close-reader{display:grid;place-items:center;padding:0}
.close-reader .ui-icon{width:24px;height:24px}
.zoom-dialog>button{width:44px;height:44px;min-width:44px;min-height:44px;margin-bottom:-44px;border:0;border-radius:0;background:var(--paper-light);color:var(--ink)}
.zoom-dialog>button .ui-icon{width:24px;height:24px}
/* Automatic modal focus and touch taps do not need a decorative ring. */
.reader:focus,.zoom-dialog:focus{outline:none}
html:not(.keyboard-navigation) :where(a,button,summary,[tabindex]):focus{outline:none}
/* Keyboard users retain a quiet, visible indicator on individual controls. */
html.keyboard-navigation :where(a,button,summary):focus,
html.keyboard-navigation #reader-description:focus,
html.keyboard-navigation #reader-title:focus{outline:2px solid var(--ink);outline-offset:4px}
@media print{.ui-icon{print-color-adjust:exact;-webkit-print-color-adjust:exact}}