| :root { |
| color-scheme: light; |
| --app-bg: #f4f6f2; |
| --surface: #ffffff; |
| --ink: #202528; |
| --muted: #697278; |
| --line: #d8ddd6; |
| --shadow: 0 18px 48px rgba(26, 31, 34, 0.16); |
| --accent-main: #9f2842; |
| --yellow: #f2c94c; |
| --teal: #22a39f; |
| --rose: #e15c75; |
| --blue: #5b66f1; |
| --violet: #8a63c7; |
| --green: #75dd6b; |
| --code-bg: #20262a; |
| --pdf-target-width: calc(595px * var(--zoom, 1.66)); |
| --annotation-gutter: clamp(390px, 27vw, 560px); |
| --reader-header-height: 64px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| min-height: 100%; |
| } |
|
|
| body { |
| background: var(--app-bg); |
| color: var(--ink); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| body.is-mobile-overlay-locked { |
| overflow: hidden; |
| overscroll-behavior: none; |
| } |
|
|
| button, |
| textarea { |
| font: inherit; |
| } |
|
|
| button { |
| color: inherit; |
| } |
|
|
| .app-shell { |
| min-height: 100vh; |
| } |
|
|
| .reader-header { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| display: grid; |
| grid-template-columns: minmax(240px, 1fr) auto minmax(420px, 1fr); |
| align-items: center; |
| gap: 18px; |
| min-height: var(--reader-header-height); |
| padding: 0 24px; |
| border-bottom: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.94); |
| backdrop-filter: blur(14px); |
| } |
|
|
| .reader-title { |
| justify-self: start; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| overflow: hidden; |
| } |
|
|
| .reader-title strong { |
| flex: 0 0 auto; |
| color: var(--accent-main); |
| font-size: 1rem; |
| font-weight: 850; |
| letter-spacing: 0; |
| } |
|
|
| .reader-center-controls, |
| .reader-controls, |
| .zoom-controls { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .reader-center-controls { |
| justify-self: center; |
| min-height: 40px; |
| padding: 0 10px; |
| border: 1px solid rgba(32, 37, 40, 0.1); |
| border-radius: 10px; |
| background: rgba(249, 250, 247, 0.78); |
| } |
|
|
| .reader-controls { |
| justify-self: end; |
| } |
|
|
| .guide-info-button { |
| display: inline-grid; |
| flex: 0 0 auto; |
| width: 36px; |
| height: 36px; |
| place-items: center; |
| border: 1px solid rgba(159, 40, 66, 0.24); |
| border-radius: 9px; |
| background: #fff8f9; |
| color: var(--accent-main); |
| cursor: pointer; |
| font-size: 1.05rem; |
| font-family: Georgia, "Times New Roman", serif; |
| font-style: italic; |
| font-weight: 900; |
| line-height: 1; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76); |
| } |
|
|
| .guide-info-button:hover { |
| border-color: rgba(159, 40, 66, 0.42); |
| background: rgba(159, 40, 66, 0.08); |
| } |
|
|
| .guide-info-button:focus-visible { |
| border-color: rgba(159, 40, 66, 0.42); |
| outline: 2px solid rgba(159, 40, 66, 0.16); |
| outline-offset: 2px; |
| } |
|
|
| .page-jump { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| color: #303638; |
| font-size: 0.92rem; |
| font-weight: 780; |
| white-space: nowrap; |
| } |
|
|
| .page-input { |
| width: 44px; |
| height: 30px; |
| border: 1px solid rgba(32, 37, 40, 0.16); |
| border-radius: 7px; |
| background: #ffffff; |
| color: var(--ink); |
| font: inherit; |
| font-weight: 820; |
| text-align: center; |
| } |
|
|
| .page-input:focus { |
| border-color: rgba(159, 40, 66, 0.48); |
| outline: 2px solid rgba(159, 40, 66, 0.16); |
| outline-offset: 1px; |
| } |
|
|
| .toolbar-divider { |
| width: 1px; |
| height: 24px; |
| background: rgba(32, 37, 40, 0.12); |
| } |
|
|
| .checkbox-control { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| min-height: 34px; |
| color: var(--muted); |
| font-size: 0.9rem; |
| font-weight: 720; |
| white-space: nowrap; |
| } |
|
|
| .checkbox-control input { |
| width: 17px; |
| height: 17px; |
| accent-color: var(--accent-main); |
| } |
|
|
| .secondary-button, |
| .tool-button, |
| .icon-button, |
| .close-all-button { |
| display: inline-grid; |
| place-items: center; |
| border: 1px solid rgba(32, 37, 40, 0.14); |
| border-radius: 8px; |
| background: #ffffff; |
| cursor: pointer; |
| line-height: 1; |
| } |
|
|
| .secondary-button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| min-height: 36px; |
| padding: 0 14px; |
| color: #303638; |
| font-size: 0.9rem; |
| font-weight: 780; |
| white-space: nowrap; |
| } |
|
|
| .button-icon { |
| flex: 0 0 auto; |
| width: 18px; |
| height: 18px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 2.1; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| .tool-button, |
| .icon-button { |
| width: 36px; |
| height: 36px; |
| } |
|
|
| .secondary-button:hover, |
| .tool-button:hover, |
| .icon-button:hover { |
| border-color: rgba(159, 40, 66, 0.28); |
| background: rgba(159, 40, 66, 0.07); |
| color: var(--accent-main); |
| } |
|
|
| .close-all-button { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| min-height: 36px; |
| padding: 0 7px 0 11px; |
| border-color: rgba(159, 40, 66, 0.34); |
| background: #fff6f7; |
| color: #852139; |
| font-size: 0.9rem; |
| font-weight: 820; |
| white-space: nowrap; |
| } |
|
|
| .close-all-button:hover { |
| border-color: rgba(32, 37, 40, 0.58); |
| background: var(--accent-main); |
| color: #ffffff; |
| } |
|
|
| .close-all-button:disabled { |
| border-color: rgba(32, 37, 40, 0.12); |
| background: rgba(255, 255, 255, 0.64); |
| color: rgba(105, 114, 120, 0.78); |
| cursor: default; |
| } |
|
|
| .close-all-mark { |
| display: inline-grid; |
| place-items: center; |
| width: 22px; |
| height: 22px; |
| border: 1px solid rgba(32, 37, 40, 0.7); |
| border-radius: 5px; |
| background: #c72f34; |
| color: #ffffff; |
| font-size: 1rem; |
| font-weight: 900; |
| line-height: 1; |
| } |
|
|
| .close-all-button:disabled .close-all-mark { |
| border-color: rgba(32, 37, 40, 0.18); |
| background: rgba(159, 40, 66, 0.18); |
| color: rgba(255, 255, 255, 0.82); |
| } |
|
|
| .tool-readout, |
| .open-count { |
| color: #303638; |
| font-size: 0.92rem; |
| font-weight: 760; |
| } |
|
|
| .tool-readout { |
| min-width: 62px; |
| text-align: center; |
| } |
|
|
| .open-count { |
| min-width: 60px; |
| color: var(--muted); |
| text-align: right; |
| } |
|
|
| .pdf-pane { |
| min-height: calc(100vh - var(--reader-header-height)); |
| overflow-x: hidden; |
| overflow-y: auto; |
| background: |
| linear-gradient(90deg, rgba(32, 37, 40, 0.045) 1px, transparent 1px) 0 0 / 32px 32px, |
| #f2f4ef; |
| } |
|
|
| .viewer-stage { |
| position: relative; |
| min-height: calc(100vh - var(--reader-header-height)); |
| padding: 34px clamp(12px, 1vw, 22px) 90px; |
| } |
|
|
| .pages { |
| display: grid; |
| justify-items: start; |
| gap: 28px; |
| width: min(var(--pdf-target-width), calc(100vw - var(--annotation-gutter))); |
| } |
|
|
| .pdf-page { |
| position: relative; |
| width: 100%; |
| min-width: min(100%, 440px); |
| aspect-ratio: 595.276 / 841.89; |
| background: #ffffff; |
| box-shadow: 0 18px 42px rgba(26, 31, 34, 0.14); |
| user-select: none; |
| } |
|
|
| .pdf-page img { |
| display: block; |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| pointer-events: none; |
| } |
|
|
| .text-layer, |
| .highlight-layer { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .text-layer { |
| z-index: 1; |
| overflow: hidden; |
| color: transparent; |
| -webkit-text-fill-color: transparent; |
| pointer-events: none; |
| user-select: text; |
| } |
|
|
| .pdf-text-line { |
| position: absolute; |
| display: block; |
| overflow: visible; |
| color: transparent; |
| -webkit-text-fill-color: transparent; |
| font-family: "Palatino", "Palatino Linotype", "Book Antiqua", "URW Palladio L", "P052", serif; |
| font-weight: 400; |
| line-height: 1; |
| white-space: pre; |
| pointer-events: none; |
| user-select: text; |
| } |
|
|
| .pdf-text-word { |
| display: inline; |
| overflow: visible; |
| color: transparent; |
| -webkit-text-fill-color: transparent; |
| font-family: "Palatino", "Palatino Linotype", "Book Antiqua", "URW Palladio L", "P052", serif; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 1; |
| white-space: pre; |
| pointer-events: none; |
| user-select: text; |
| } |
|
|
| .pdf-text-word[data-font="serif-bold"] { |
| font-weight: 700; |
| } |
|
|
| .pdf-text-word[data-font="serif-italic"] { |
| font-style: italic; |
| } |
|
|
| .pdf-text-word[data-font="serif-bold-italic"] { |
| font-style: italic; |
| font-weight: 700; |
| } |
|
|
| .pdf-text-word[data-font="sans"], |
| .pdf-text-word[data-font="sans-bold"], |
| .pdf-text-word[data-font="sans-italic"] { |
| font-family: "DejaVu Sans", Arial, Helvetica, sans-serif; |
| } |
|
|
| .pdf-text-word[data-font="sans-bold"] { |
| font-weight: 700; |
| } |
|
|
| .pdf-text-word[data-font="sans-italic"] { |
| font-style: italic; |
| } |
|
|
| .pdf-text-word[data-font="mono"], |
| .pdf-text-word[data-font="mono-bold"] { |
| font-family: "Latin Modern Mono", "LM Mono", Consolas, "Courier New", monospace; |
| } |
|
|
| .pdf-text-word[data-font="mono-bold"] { |
| font-weight: 700; |
| } |
|
|
| .pdf-text-word[data-font="math"] { |
| font-style: italic; |
| } |
|
|
| .pdf-text-line::selection, |
| .pdf-text-word::selection { |
| background: rgba(159, 40, 66, 0.18); |
| color: transparent; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .highlight-layer { |
| z-index: 2; |
| } |
|
|
| .pdf-highlight { |
| position: absolute; |
| border: 1px solid color-mix(in srgb, var(--accent) 78%, #000); |
| border-radius: 3px; |
| background: color-mix(in srgb, var(--accent) 32%, transparent); |
| cursor: pointer; |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset; |
| } |
|
|
| .pdf-highlight:hover:not(.is-hover-suppressed), |
| .pdf-highlight:focus-visible:not(.is-hover-suppressed), |
| .pdf-highlight.is-hovered, |
| .pdf-highlight.is-active { |
| border-color: color-mix(in srgb, var(--accent) 92%, #000); |
| outline: none; |
| background: color-mix(in srgb, var(--accent) 45%, transparent); |
| box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 88%, #000); |
| } |
|
|
| .connector-layer, |
| .floating-layer { |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| } |
|
|
| .connector-layer { |
| z-index: 8; |
| width: 100%; |
| height: 100%; |
| overflow: visible; |
| } |
|
|
| .connector-layer path { |
| fill: none; |
| stroke-width: 2; |
| stroke-linecap: round; |
| stroke-dasharray: 4 6; |
| } |
|
|
| .floating-layer { |
| z-index: 9; |
| } |
|
|
| .floating-layer.is-arranging .annotation-card { |
| transition: transform 160ms ease-out; |
| } |
|
|
| .floating-layer.is-arranging .annotation-card.is-entering { |
| transition: none; |
| } |
|
|
| .annotation-card { |
| position: absolute; |
| width: min(360px, calc(100vw - 40px)); |
| max-height: min(620px, calc(100vh - 128px)); |
| overflow: auto; |
| border: 1px solid color-mix(in srgb, var(--card-accent, var(--teal)) 32%, rgba(32, 37, 40, 0.16)); |
| border-top: 5px solid var(--card-accent, var(--teal)); |
| border-bottom: 2px solid color-mix(in srgb, var(--card-accent, var(--teal)) 34%, rgba(32, 37, 40, 0.08)); |
| border-radius: 8px; |
| background: |
| linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--teal)) 4%, #ffffff), #ffffff 150px), |
| #ffffff; |
| box-shadow: |
| inset 0 0 0 1px rgba(255, 255, 255, 0.74), |
| inset 4px 0 0 color-mix(in srgb, var(--card-accent, var(--teal)) 16%, transparent), |
| 0 18px 46px rgba(26, 31, 34, 0.14); |
| pointer-events: auto; |
| scrollbar-gutter: stable; |
| } |
|
|
| .annotation-card.is-selected { |
| box-shadow: |
| inset 0 0 0 1px rgba(255, 255, 255, 0.74), |
| inset 4px 0 0 color-mix(in srgb, var(--card-accent, var(--teal)) 20%, transparent), |
| 0 0 0 2px color-mix(in srgb, var(--card-accent, var(--teal)) 34%, transparent), |
| 0 22px 52px rgba(26, 31, 34, 0.17); |
| } |
|
|
| .annotation-card-header { |
| position: sticky; |
| top: 0; |
| z-index: 5; |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 14px; |
| padding: 17px 18px 14px 20px; |
| border-bottom: 1px solid color-mix(in srgb, var(--card-accent, var(--teal)) 18%, rgba(32, 37, 40, 0.1)); |
| background: |
| linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--teal)) 7%, transparent), transparent 64%), |
| #ffffff; |
| backdrop-filter: blur(10px); |
| } |
|
|
| .annotation-card-header > div:first-child { |
| min-width: 0; |
| } |
|
|
| .annotation-type, |
| .eyebrow { |
| margin: 0; |
| color: var(--muted); |
| font-size: 0.76rem; |
| font-weight: 820; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .annotation-card h2 { |
| margin: 4px 0 0; |
| font-size: 1.06rem; |
| line-height: 1.22; |
| letter-spacing: 0; |
| } |
|
|
| .card-close, |
| .icon-button { |
| flex: 0 0 auto; |
| } |
|
|
| .annotation-card-actions { |
| display: flex; |
| flex: 0 0 auto; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .annotation-nav-button { |
| display: inline-grid; |
| place-items: center; |
| width: 34px; |
| height: 34px; |
| border: 1px solid color-mix(in srgb, var(--card-accent, var(--teal)) 34%, rgba(32, 37, 40, 0.14)); |
| border-radius: 8px; |
| background: color-mix(in srgb, var(--card-accent, var(--teal)) 8%, #ffffff); |
| color: color-mix(in srgb, var(--card-accent, var(--teal)) 70%, #202528); |
| cursor: pointer; |
| } |
|
|
| .annotation-nav-button svg { |
| width: 19px; |
| height: 19px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 2.5; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| .annotation-nav-button:hover, |
| .annotation-nav-button:focus-visible { |
| border-color: color-mix(in srgb, var(--card-accent, var(--teal)) 62%, rgba(32, 37, 40, 0.18)); |
| background: color-mix(in srgb, var(--card-accent, var(--teal)) 16%, #ffffff); |
| color: color-mix(in srgb, var(--card-accent, var(--teal)) 82%, #121617); |
| } |
|
|
| .annotation-nav-button:disabled { |
| border-color: rgba(32, 37, 40, 0.1); |
| background: rgba(32, 37, 40, 0.04); |
| color: rgba(32, 37, 40, 0.28); |
| cursor: default; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .floating-layer.is-arranging .annotation-card { |
| transition: none; |
| } |
| } |
|
|
| .card-close { |
| width: 38px; |
| height: 38px; |
| border-color: rgba(32, 37, 40, 0.82); |
| background: #c72f34; |
| color: #ffffff; |
| font-size: 1.25rem; |
| font-weight: 900; |
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset; |
| } |
|
|
| .card-close:hover, |
| .card-close:focus-visible { |
| border-color: #141718; |
| background: #a9141f; |
| color: #ffffff; |
| } |
|
|
| .annotation-body { |
| position: relative; |
| z-index: 0; |
| padding: 17px 18px 18px 20px; |
| color: #273034; |
| } |
|
|
| .annotation-body p, |
| .annotation-body li { |
| font-size: 0.94rem; |
| line-height: 1.55; |
| } |
|
|
| .annotation-body p { |
| margin: 0 0 13px; |
| } |
|
|
| .annotation-body blockquote { |
| position: relative; |
| isolation: isolate; |
| margin: 17px 0 18px; |
| padding: 15px 18px 15px 24px; |
| overflow: hidden; |
| border: 1px solid color-mix(in srgb, var(--card-accent, var(--teal)) 24%, rgba(32, 37, 40, 0.13)); |
| border-radius: 8px; |
| background: |
| linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--teal)) 12%, transparent), transparent 76%), |
| color-mix(in srgb, var(--card-accent, var(--teal)) 5%, #ffffff); |
| box-shadow: |
| inset 5px 0 0 var(--card-accent, var(--teal)), |
| inset 0 1px 0 rgba(255, 255, 255, 0.72); |
| } |
|
|
| .annotation-body blockquote::before { |
| content: "“"; |
| position: absolute; |
| top: -18px; |
| right: 14px; |
| color: color-mix(in srgb, var(--card-accent, var(--teal)) 18%, transparent); |
| font-family: Georgia, "Times New Roman", serif; |
| font-size: 5.2rem; |
| font-weight: 700; |
| line-height: 1; |
| pointer-events: none; |
| } |
|
|
| .annotation-body blockquote p, |
| .annotation-body blockquote li { |
| position: relative; |
| z-index: 1; |
| font-size: 0.93rem; |
| line-height: 1.55; |
| } |
|
|
| .annotation-body blockquote p { |
| margin: 0 0 11px; |
| } |
|
|
| .annotation-body blockquote p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .annotation-body ul { |
| margin: 8px 0 14px; |
| padding-left: 20px; |
| } |
|
|
| .annotation-body strong { |
| font-weight: 830; |
| } |
|
|
| .annotation-body a { |
| color: #0f756f; |
| font-weight: 760; |
| text-decoration-thickness: 2px; |
| text-underline-offset: 0.16em; |
| } |
|
|
| .annotation-body mark { |
| padding: 0.08em 0.22em; |
| border-radius: 4px; |
| background: #fff0a6; |
| } |
|
|
| .annotation-body .callout { |
| margin: 14px 0; |
| padding: 12px 13px; |
| border-left: 4px solid var(--card-accent, var(--teal)); |
| border-radius: 0 8px 8px 0; |
| background: color-mix(in srgb, var(--card-accent, var(--teal)) 12%, #ffffff); |
| } |
|
|
| .annotation-body pre { |
| position: relative; |
| margin: 14px 0; |
| padding: 14px; |
| overflow: auto; |
| border-radius: 8px; |
| background: var(--code-bg); |
| color: #f3f7f7; |
| font-size: 0.82rem; |
| line-height: 1.5; |
| white-space: pre; |
| tab-size: 4; |
| } |
|
|
| .annotation-body code { |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; |
| } |
|
|
| .annotation-body pre.is-highlighted-code { |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44px), |
| #1f262a; |
| } |
|
|
| .annotation-body pre.is-highlighted-code code { |
| color: #e8edf0; |
| text-shadow: none; |
| } |
|
|
| .annotation-body .token.comment, |
| .annotation-body .token.prolog, |
| .annotation-body .token.doctype, |
| .annotation-body .token.cdata { |
| color: #84919a; |
| font-style: italic; |
| } |
|
|
| .annotation-body .token.keyword { |
| color: #ff8f9c; |
| font-weight: 760; |
| } |
|
|
| .annotation-body .token.function, |
| .annotation-body .token.class-name { |
| color: #7fd7ff; |
| } |
|
|
| .annotation-body .token.builtin { |
| color: #c5a7ff; |
| } |
|
|
| .annotation-body .token.decorator, |
| .annotation-body .token.property, |
| .annotation-body .token.attr-name, |
| .annotation-body .token.variable { |
| color: #ffd37a; |
| } |
|
|
| .annotation-body .token.string, |
| .annotation-body .token.char { |
| color: #9ee493; |
| } |
|
|
| .annotation-body .token.number, |
| .annotation-body .token.boolean, |
| .annotation-body .token.constant { |
| color: #f7c873; |
| } |
|
|
| .annotation-body .token.operator, |
| .annotation-body .token.punctuation { |
| color: #aeb8bd; |
| } |
|
|
| .annotation-body :not(pre) > code { |
| padding: 0.12em 0.35em; |
| border-radius: 4px; |
| background: rgba(32, 37, 40, 0.08); |
| } |
|
|
| .annotation-body .table-scroll { |
| width: 100%; |
| max-width: 100%; |
| margin: 14px 0; |
| overflow-x: auto; |
| border: 1px solid rgba(32, 37, 40, 0.13); |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .annotation-body table { |
| width: 100%; |
| min-width: 650px; |
| border-collapse: separate; |
| border-spacing: 0; |
| background: #ffffff; |
| } |
|
|
| .annotation-body th, |
| .annotation-body td { |
| padding: 9px 10px; |
| border-right: 1px solid rgba(32, 37, 40, 0.1); |
| border-bottom: 1px solid rgba(32, 37, 40, 0.1); |
| color: #273034; |
| font-size: 0.78rem; |
| line-height: 1.35; |
| text-align: left; |
| vertical-align: top; |
| } |
|
|
| .annotation-body th { |
| background: color-mix(in srgb, var(--card-accent, var(--teal)) 8%, #ffffff); |
| color: #202528; |
| font-weight: 800; |
| } |
|
|
| .annotation-body th:last-child, |
| .annotation-body td:last-child { |
| border-right: 0; |
| } |
|
|
| .annotation-body tbody tr:nth-child(even) td { |
| background: rgba(32, 37, 40, 0.025); |
| } |
|
|
| .annotation-body tr:last-child td { |
| border-bottom: 0; |
| } |
|
|
| .annotation-body .math-inline { |
| display: inline-block; |
| pointer-events: none; |
| user-select: none; |
| vertical-align: -0.16em; |
| } |
|
|
| .annotation-body .math-inline.is-wide { |
| display: block; |
| max-width: 100%; |
| margin: 10px 0; |
| overflow-x: auto; |
| overflow-y: hidden; |
| vertical-align: middle; |
| } |
|
|
| .annotation-body .math-display { |
| display: block; |
| max-width: 100%; |
| margin: 13px 0; |
| overflow-x: auto; |
| overflow-y: hidden; |
| pointer-events: none; |
| user-select: none; |
| } |
|
|
| .annotation-body .katex { |
| color: currentColor; |
| font-size: 1em; |
| } |
|
|
| .annotation-body .katex * { |
| user-select: none; |
| } |
|
|
| .annotation-body .math-inline.is-wide .katex-display, |
| .annotation-body .math-display .katex-display { |
| margin: 0; |
| width: max-content; |
| } |
|
|
| .annotation-body figure { |
| margin: 16px 0 4px; |
| } |
|
|
| .annotation-body .annotation-media-pair { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); |
| align-items: center; |
| gap: 16px; |
| margin: 16px 0; |
| } |
|
|
| .annotation-body .annotation-media-pair p, |
| .annotation-body .annotation-media-pair figure { |
| margin: 0; |
| } |
|
|
| .annotation-body .annotation-media-pair img { |
| max-height: min(360px, 44vh); |
| } |
|
|
| .annotation-body img { |
| display: block; |
| width: auto; |
| max-width: 100%; |
| max-height: min(460px, 56vh); |
| margin-right: auto; |
| margin-left: auto; |
| border: 1px solid rgba(32, 37, 40, 0.12); |
| border-radius: 6px; |
| background: #f9faf7; |
| object-fit: contain; |
| } |
|
|
| .annotation-body img.is-zoomable { |
| cursor: zoom-in; |
| transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; |
| } |
|
|
| .annotation-body img.is-zoomable:hover { |
| border-color: color-mix(in srgb, var(--card-accent, var(--teal)) 44%, rgba(32, 37, 40, 0.12)); |
| box-shadow: 0 10px 28px rgba(32, 37, 40, 0.12); |
| } |
|
|
| .annotation-body img.is-zoomable:focus-visible { |
| outline: 3px solid color-mix(in srgb, var(--card-accent, var(--teal)) 44%, transparent); |
| outline-offset: 4px; |
| } |
|
|
| .annotation-body img[src$="002-modeling-capability-residual-stream.png"] { |
| max-height: min(320px, 39vh); |
| } |
|
|
| .annotation-body img[src$="003-future-hardware-efficiency-nvidia-compute-specs.png"], |
| .annotation-body img[src$="003-future-hardware-efficiency-blackwell-specs.png"] { |
| max-height: min(360px, 44vh); |
| } |
|
|
| .annotation-body img[src$="036-fp4-scale-absorption-fp8-scaling.png"] { |
| max-height: min(330px, 40vh); |
| } |
|
|
| .annotation-body figcaption { |
| margin-top: 7px; |
| color: var(--muted); |
| font-size: 0.78rem; |
| line-height: 1.35; |
| } |
|
|
| .notes-drawer { |
| position: fixed; |
| top: var(--notes-drawer-top, calc(var(--reader-header-height) + 8px)); |
| right: auto; |
| left: var(--notes-drawer-left, auto); |
| z-index: 30; |
| flex-direction: column; |
| width: min(640px, calc(100vw - 36px)); |
| max-height: calc(100vh - var(--reader-header-height) - 26px); |
| overflow: visible; |
| padding: 0; |
| border: 1px solid rgba(32, 37, 40, 0.13); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.97); |
| box-shadow: var(--shadow); |
| display: none; |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(-6px); |
| transform-origin: var(--notes-drawer-origin, 50% 0); |
| transition: opacity 120ms ease, transform 120ms ease; |
| visibility: hidden; |
| overscroll-behavior: contain; |
| } |
|
|
| .notes-drawer::before, |
| .notes-drawer::after { |
| content: ""; |
| position: absolute; |
| left: var(--notes-drawer-caret-x, 50%); |
| pointer-events: none; |
| } |
|
|
| .notes-drawer::before { |
| top: -9px; |
| margin-left: -10px; |
| border-right: 10px solid transparent; |
| border-bottom: 10px solid rgba(32, 37, 40, 0.13); |
| border-left: 10px solid transparent; |
| } |
|
|
| .notes-drawer::after { |
| top: -8px; |
| margin-left: -9px; |
| border-right: 9px solid transparent; |
| border-bottom: 9px solid rgba(255, 255, 255, 0.97); |
| border-left: 9px solid transparent; |
| } |
|
|
| .notes-drawer.is-open { |
| display: flex; |
| opacity: 1; |
| pointer-events: auto; |
| transform: translateY(0); |
| visibility: visible; |
| } |
|
|
| .guide-disclosure { |
| position: fixed; |
| top: var(--guide-disclosure-top, calc(var(--reader-header-height) + 8px)); |
| left: var(--guide-disclosure-left, 18px); |
| z-index: 35; |
| display: none; |
| flex-direction: column; |
| width: min(620px, calc(100vw - 36px)); |
| max-height: calc(100vh - var(--reader-header-height) - 26px); |
| overflow: visible; |
| padding: 0; |
| border: 1px solid rgba(32, 37, 40, 0.13); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: var(--shadow); |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(-6px); |
| transform-origin: var(--guide-disclosure-origin, 50% 0); |
| transition: opacity 120ms ease, transform 120ms ease; |
| visibility: hidden; |
| overscroll-behavior: contain; |
| } |
|
|
| .guide-disclosure::before, |
| .guide-disclosure::after { |
| content: ""; |
| position: absolute; |
| left: var(--guide-disclosure-caret-x, 24px); |
| pointer-events: none; |
| } |
|
|
| .guide-disclosure::before { |
| top: -9px; |
| margin-left: -10px; |
| border-right: 10px solid transparent; |
| border-bottom: 10px solid rgba(32, 37, 40, 0.13); |
| border-left: 10px solid transparent; |
| } |
|
|
| .guide-disclosure::after { |
| top: -8px; |
| margin-left: -9px; |
| border-right: 9px solid transparent; |
| border-bottom: 9px solid rgba(255, 255, 255, 0.98); |
| border-left: 9px solid transparent; |
| } |
|
|
| .guide-disclosure.is-open { |
| display: flex; |
| opacity: 1; |
| pointer-events: auto; |
| transform: translateY(0); |
| visibility: visible; |
| } |
|
|
| .guide-disclosure-header { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 20px 20px 16px; |
| border-bottom: 1px solid rgba(32, 37, 40, 0.1); |
| background: |
| linear-gradient(90deg, rgba(159, 40, 66, 0.07), transparent 58%), |
| linear-gradient(180deg, rgba(249, 250, 247, 0.94), rgba(255, 255, 255, 0.96)); |
| } |
|
|
| .guide-disclosure-header h1 { |
| margin: 4px 0 0; |
| font-size: 1.32rem; |
| line-height: 1.14; |
| letter-spacing: 0; |
| } |
|
|
| .guide-disclosure-body { |
| display: grid; |
| gap: 16px; |
| min-height: 0; |
| overflow: auto; |
| padding: 18px 20px 20px; |
| } |
|
|
| .disclosure-section { |
| display: grid; |
| gap: 9px; |
| } |
|
|
| .disclosure-section h2 { |
| margin: 0; |
| color: #2a3034; |
| font-size: 0.98rem; |
| font-weight: 840; |
| letter-spacing: 0; |
| } |
|
|
| .disclosure-section p { |
| margin: 0; |
| color: #30383d; |
| font-size: 0.94rem; |
| line-height: 1.55; |
| } |
|
|
| .disclosure-section a { |
| color: #0c7b72; |
| font-weight: 780; |
| text-decoration: underline; |
| text-decoration-thickness: 2px; |
| text-underline-offset: 3px; |
| } |
|
|
| .social-links { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(142px, 178px)); |
| gap: 10px; |
| align-items: center; |
| justify-content: space-between; |
| width: 100%; |
| } |
|
|
| .social-link { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 7px; |
| width: 100%; |
| min-width: 0; |
| min-height: 36px; |
| padding: 7px 10px; |
| border: 1px solid rgba(32, 37, 40, 0.12); |
| border-radius: 8px; |
| background: rgba(249, 250, 247, 0.86); |
| color: #303638; |
| font-size: 0.9rem; |
| font-weight: 780; |
| text-decoration: none; |
| transition: border-color 130ms ease, background 130ms ease, transform 130ms ease; |
| } |
|
|
| .social-link span:last-child { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .social-link:hover, |
| .social-link:focus-visible { |
| border-color: rgba(159, 40, 66, 0.26); |
| background: rgba(159, 40, 66, 0.07); |
| color: var(--accent-main); |
| } |
|
|
| .social-link:focus-visible { |
| outline: 2px solid rgba(159, 40, 66, 0.16); |
| outline-offset: 2px; |
| } |
|
|
| .social-mark, |
| .social-link img { |
| flex: 0 0 auto; |
| width: 26px; |
| height: 26px; |
| border-radius: 7px; |
| } |
|
|
| .social-mark { |
| display: inline-grid; |
| place-items: center; |
| background: #15191c; |
| color: #ffffff; |
| font-size: 0.78rem; |
| font-weight: 880; |
| letter-spacing: 0; |
| } |
|
|
| .social-mark-linkedin { |
| background: #0a66c2; |
| font-family: Arial, Helvetica, sans-serif; |
| font-size: 0.74rem; |
| } |
|
|
| .social-link img { |
| object-fit: cover; |
| border: 1px solid rgba(32, 37, 40, 0.12); |
| } |
|
|
| .project-status { |
| position: relative; |
| padding: 13px 15px 13px 18px; |
| border: 1px solid rgba(32, 37, 40, 0.1); |
| border-radius: 8px; |
| background: |
| linear-gradient(90deg, rgba(34, 163, 159, 0.1), transparent 58%), |
| rgba(249, 250, 247, 0.88); |
| box-shadow: inset 4px 0 0 var(--teal); |
| } |
|
|
| .drawer-header { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 20px 20px 16px; |
| border-bottom: 1px solid rgba(32, 37, 40, 0.1); |
| background: linear-gradient(180deg, rgba(249, 250, 247, 0.92), rgba(255, 255, 255, 0.94)); |
| } |
|
|
| .drawer-header h1 { |
| margin: 4px 0 0; |
| font-size: 1.35rem; |
| line-height: 1.15; |
| letter-spacing: 0; |
| } |
|
|
| .note-search { |
| display: grid; |
| gap: 8px; |
| padding: 14px 14px 12px; |
| border-bottom: 1px solid rgba(32, 37, 40, 0.09); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 250, 247, 0.82)); |
| } |
|
|
| .note-search-field { |
| display: grid; |
| grid-template-columns: 20px minmax(0, 1fr) 30px; |
| align-items: center; |
| gap: 8px; |
| min-height: 42px; |
| padding: 0 8px 0 12px; |
| border: 1px solid rgba(32, 37, 40, 0.14); |
| border-radius: 8px; |
| background: #ffffff; |
| box-shadow: |
| 0 1px 0 rgba(255, 255, 255, 0.74) inset, |
| 0 8px 18px rgba(26, 31, 34, 0.04); |
| transition: border-color 130ms ease, box-shadow 130ms ease; |
| } |
|
|
| .note-search-field:focus-within { |
| border-color: rgba(164, 33, 61, 0.42); |
| box-shadow: |
| 0 0 0 3px rgba(164, 33, 61, 0.09), |
| 0 1px 0 rgba(255, 255, 255, 0.74) inset; |
| } |
|
|
| .note-search-icon { |
| width: 19px; |
| height: 19px; |
| fill: none; |
| stroke: var(--muted); |
| stroke-width: 2; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| .note-search input { |
| width: 100%; |
| min-width: 0; |
| border: 0; |
| outline: 0; |
| background: transparent; |
| color: var(--ink); |
| font: inherit; |
| font-size: 0.92rem; |
| font-weight: 720; |
| } |
|
|
| .note-search input::placeholder { |
| color: color-mix(in srgb, var(--muted) 74%, #ffffff); |
| } |
|
|
| .note-search input::-webkit-search-cancel-button { |
| appearance: none; |
| -webkit-appearance: none; |
| } |
|
|
| .note-search-clear { |
| display: inline-grid; |
| place-items: center; |
| width: 28px; |
| height: 28px; |
| border: 1px solid rgba(32, 37, 40, 0.12); |
| border-radius: 7px; |
| background: rgba(249, 250, 247, 0.96); |
| color: var(--muted); |
| cursor: pointer; |
| font-size: 1.05rem; |
| font-weight: 820; |
| line-height: 1; |
| } |
|
|
| .note-search-clear:hover { |
| border-color: rgba(164, 33, 61, 0.28); |
| color: var(--accent-strong); |
| } |
|
|
| .note-search-clear[hidden] { |
| display: none; |
| } |
|
|
| .note-search-summary { |
| min-height: 16px; |
| margin: 0; |
| color: var(--muted); |
| font-size: 0.76rem; |
| font-weight: 760; |
| } |
|
|
| .note-list { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr); |
| gap: 8px; |
| min-height: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| overscroll-behavior: contain; |
| padding: 14px; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .note-chip { |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 14px; |
| width: 100%; |
| min-width: 0; |
| min-height: 68px; |
| padding: 12px 13px 12px 18px; |
| border: 1px solid rgba(32, 37, 40, 0.12); |
| border-radius: 8px; |
| overflow: hidden; |
| background: |
| linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%), |
| #ffffff; |
| cursor: pointer; |
| text-align: left; |
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; |
| transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; |
| } |
|
|
| .note-chip::before { |
| content: ""; |
| position: absolute; |
| top: -1px; |
| bottom: -1px; |
| left: -1px; |
| width: 6px; |
| border-radius: 8px 0 0 8px; |
| background: var(--accent); |
| } |
|
|
| .note-chip:hover { |
| border-color: color-mix(in srgb, var(--accent) 48%, rgba(32, 37, 40, 0.18)); |
| box-shadow: 0 12px 28px rgba(26, 31, 34, 0.09); |
| transform: translateY(-1px); |
| } |
|
|
| .note-chip-main { |
| flex: 1 1 auto; |
| min-width: 0; |
| overflow: hidden; |
| } |
|
|
| .note-chip-title-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .note-chip strong { |
| flex: 1 1 auto; |
| display: block; |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| font-size: 0.98rem; |
| line-height: 1.2; |
| } |
|
|
| .note-chip-match-count { |
| flex: 0 0 auto; |
| display: inline-flex; |
| align-items: center; |
| min-height: 22px; |
| padding: 0 8px; |
| border: 1px solid rgba(32, 37, 40, 0.1); |
| border-radius: 999px; |
| background: color-mix(in srgb, var(--accent) 10%, #ffffff); |
| color: color-mix(in srgb, var(--accent) 74%, #202528); |
| font-size: 0.7rem; |
| font-weight: 830; |
| letter-spacing: 0; |
| white-space: nowrap; |
| } |
|
|
| .note-chip-open-state { |
| flex: 0 0 auto; |
| display: inline-flex; |
| align-items: center; |
| min-height: 22px; |
| padding: 0 8px; |
| border: 1px solid color-mix(in srgb, var(--accent) 45%, rgba(32, 37, 40, 0.12)); |
| border-radius: 999px; |
| background: color-mix(in srgb, var(--accent) 14%, #ffffff); |
| color: color-mix(in srgb, var(--accent) 76%, #202528); |
| font-size: 0.72rem; |
| font-weight: 860; |
| letter-spacing: 0; |
| } |
|
|
| .note-chip-meta { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| margin-top: 5px; |
| } |
|
|
| .note-chip-meta span { |
| color: var(--muted); |
| font-size: 0.78rem; |
| font-weight: 750; |
| } |
|
|
| .note-chip-meta span + span::before { |
| content: ""; |
| display: inline-block; |
| width: 4px; |
| height: 4px; |
| margin: 0 6px 1px 0; |
| border-radius: 999px; |
| background: color-mix(in srgb, var(--accent) 62%, var(--muted)); |
| } |
|
|
| .note-chip-snippet { |
| display: -webkit-box; |
| margin-top: 10px; |
| max-height: calc(2 * 1.42em + 2px); |
| overflow: hidden; |
| color: color-mix(in srgb, var(--ink) 82%, var(--muted)); |
| font-size: 0.86rem; |
| font-weight: 610; |
| line-height: 1.42; |
| -webkit-box-orient: vertical; |
| -webkit-line-clamp: 2; |
| } |
|
|
| .note-chip-snippet mark { |
| padding: 0 2px; |
| border-radius: 4px; |
| background: color-mix(in srgb, var(--accent) 28%, #fff4a8); |
| color: color-mix(in srgb, var(--accent) 62%, #202528); |
| font-weight: 860; |
| } |
|
|
| .note-chip.is-search-result { |
| min-height: 116px; |
| padding-top: 14px; |
| padding-bottom: 15px; |
| align-items: flex-start; |
| } |
|
|
| .note-list.is-searching { |
| gap: 10px; |
| } |
|
|
| .note-search-empty { |
| display: grid; |
| gap: 5px; |
| min-height: 116px; |
| place-content: center; |
| padding: 18px; |
| border: 1px dashed rgba(32, 37, 40, 0.18); |
| border-radius: 8px; |
| background: rgba(249, 250, 247, 0.72); |
| text-align: center; |
| } |
|
|
| .note-search-empty strong { |
| color: var(--ink); |
| font-size: 0.98rem; |
| } |
|
|
| .note-search-empty span { |
| color: var(--muted); |
| font-size: 0.82rem; |
| font-weight: 650; |
| } |
|
|
| .note-chip.is-open { |
| border-color: color-mix(in srgb, var(--accent) 54%, rgba(32, 37, 40, 0.14)); |
| background: |
| linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%), |
| #ffffff; |
| } |
|
|
| .note-chip.is-active { |
| border-color: color-mix(in srgb, var(--accent) 62%, #000); |
| background: |
| linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%), |
| #ffffff; |
| box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 54%, transparent), 0 1px 0 rgba(255, 255, 255, 0.7) inset; |
| } |
|
|
| body.is-lightbox-open { |
| overflow: hidden; |
| } |
|
|
| .image-lightbox { |
| position: fixed; |
| inset: 0; |
| z-index: 5000; |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| background: rgba(18, 23, 26, 0.72); |
| opacity: 0; |
| backdrop-filter: blur(8px); |
| transition: opacity 140ms ease; |
| } |
|
|
| .image-lightbox[hidden] { |
| display: none; |
| } |
|
|
| .image-lightbox.is-open { |
| opacity: 1; |
| } |
|
|
| .image-lightbox-panel { |
| position: relative; |
| display: grid; |
| gap: 12px; |
| justify-items: end; |
| max-width: min(1280px, calc(100vw - 48px)); |
| max-height: calc(100dvh - 48px); |
| } |
|
|
| .image-lightbox-figure { |
| display: grid; |
| gap: 10px; |
| margin: 0; |
| min-height: 0; |
| } |
|
|
| .image-lightbox-figure img { |
| display: block; |
| width: auto; |
| height: auto; |
| max-width: min(1280px, calc(100vw - 48px)); |
| max-height: calc(100dvh - 156px); |
| object-fit: contain; |
| border: 1px solid rgba(255, 255, 255, 0.58); |
| border-radius: 8px; |
| background: #ffffff; |
| box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34); |
| } |
|
|
| .image-lightbox-figure figcaption { |
| max-width: min(960px, calc(100vw - 72px)); |
| justify-self: center; |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 0.86rem; |
| font-weight: 650; |
| line-height: 1.35; |
| text-align: center; |
| } |
|
|
| .image-lightbox-close { |
| position: static; |
| display: grid; |
| width: 48px; |
| height: 48px; |
| place-items: center; |
| border: 2px solid #2e2325; |
| border-radius: 8px; |
| background: #cf2f38; |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); |
| cursor: pointer; |
| font-size: 2rem; |
| font-weight: 900; |
| line-height: 1; |
| } |
|
|
| .image-lightbox-close:hover, |
| .image-lightbox-close:focus-visible { |
| background: #b92731; |
| outline: 3px solid rgba(255, 255, 255, 0.72); |
| outline-offset: 3px; |
| } |
|
|
| @media (max-width: 980px) { |
| .reader-header { |
| grid-template-columns: 1fr; |
| align-items: center; |
| gap: 10px; |
| padding: 12px 16px; |
| } |
|
|
| .reader-title, |
| .reader-center-controls, |
| .reader-controls { |
| width: 100%; |
| } |
|
|
| .reader-center-controls { |
| justify-content: center; |
| } |
|
|
| .reader-controls { |
| gap: 6px; |
| justify-content: space-between; |
| } |
|
|
| .viewer-stage { |
| padding: 20px 10px 70px; |
| } |
|
|
| .pages { |
| justify-items: center; |
| } |
|
|
| .pdf-page { |
| width: min(calc(100vw - 20px), var(--pdf-target-width)); |
| min-width: 0; |
| } |
|
|
| .annotation-card { |
| max-height: 460px; |
| } |
|
|
| .notes-drawer { |
| right: auto; |
| width: calc(100vw - 24px); |
| max-height: calc(100vh - var(--notes-drawer-top, 142px) - 12px); |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| html, |
| body { |
| overflow-x: hidden; |
| } |
|
|
| .reader-header { |
| position: fixed; |
| top: 0; |
| right: 0; |
| left: 0; |
| display: grid; |
| grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); |
| align-items: center; |
| gap: 10px; |
| min-height: var(--reader-header-height); |
| padding: 8px 10px; |
| transition: |
| transform 340ms cubic-bezier(0.4, 0, 0.2, 1), |
| opacity 300ms ease; |
| } |
|
|
| .reader-title { |
| display: flex; |
| justify-self: stretch; |
| width: 44px; |
| min-width: 44px; |
| overflow: visible; |
| } |
|
|
| .reader-title strong { |
| display: none; |
| } |
|
|
| .guide-info-button { |
| width: 44px; |
| height: 44px; |
| border-radius: 10px; |
| font-size: 1.14rem; |
| } |
|
|
| .reader-center-controls, |
| .reader-controls { |
| width: 100%; |
| max-width: none; |
| } |
|
|
| .reader-center-controls .toolbar-divider, |
| .reader-center-controls .zoom-controls, |
| .reader-controls .checkbox-control, |
| .reader-controls .open-count, |
| .reader-controls .close-all-button { |
| display: none; |
| } |
|
|
| .reader-center-controls { |
| justify-self: stretch; |
| justify-content: center; |
| min-width: 0; |
| min-height: 44px; |
| padding: 0 8px; |
| } |
|
|
| .page-jump { |
| justify-content: center; |
| width: 100%; |
| gap: 5px; |
| } |
|
|
| .page-input { |
| width: 38px; |
| } |
|
|
| .reader-controls { |
| justify-self: stretch; |
| justify-content: stretch; |
| } |
|
|
| .secondary-button { |
| width: 100%; |
| min-height: 44px; |
| } |
|
|
| .pdf-pane { |
| min-height: 100vh; |
| padding-top: var(--reader-header-height); |
| } |
|
|
| .viewer-stage { |
| min-height: 100vh; |
| overflow: hidden; |
| padding: 0 0 70px; |
| } |
|
|
| .pages { |
| width: 126vw; |
| margin-left: 50%; |
| transform: translateX(-50%); |
| justify-items: center; |
| } |
|
|
| .pdf-page { |
| width: 100%; |
| max-width: none; |
| box-shadow: none; |
| } |
|
|
| .annotation-card { |
| width: 94.5vw; |
| max-width: none; |
| max-height: calc(100dvh - var(--reader-viewport-top, 0px) - 28px); |
| } |
|
|
| .notes-drawer { |
| width: 95vw; |
| max-height: calc(100dvh - var(--notes-drawer-top, 64px) - 8px); |
| } |
|
|
| .guide-disclosure { |
| width: 95vw; |
| max-height: calc(100dvh - var(--guide-disclosure-top, 64px) - 8px); |
| } |
|
|
| .guide-disclosure-header { |
| padding: 17px 16px 14px; |
| } |
|
|
| .guide-disclosure-body { |
| overflow: hidden; |
| padding: 15px 16px 17px; |
| } |
|
|
| .social-links { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .social-link { |
| min-height: 42px; |
| padding: 7px 8px; |
| font-size: 0.86rem; |
| } |
|
|
| .social-link:nth-child(3):last-child { |
| grid-column: 1 / -1; |
| justify-self: center; |
| width: calc((100% - 8px) / 2); |
| } |
|
|
| body.mobile-header-hidden .reader-header { |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(calc(-100% - 1px)); |
| } |
|
|
| body.has-open-card .reader-header { |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(calc(-100% - 1px)); |
| } |
|
|
| .image-lightbox { |
| padding: 12px; |
| } |
|
|
| .image-lightbox-panel, |
| .image-lightbox-figure img { |
| max-width: calc(100vw - 24px); |
| } |
|
|
| .image-lightbox-figure img { |
| max-height: calc(100dvh - 120px); |
| } |
|
|
| .image-lightbox-close { |
| width: 44px; |
| height: 44px; |
| } |
| } |
|
|
