@import url('/interaction-motion.css');
@import url('/image-viewer.css');

:root {
  --my-css-build: mobile-compat-32acfc0;
  color-scheme: light;
  --my-bg: #eff0f3;
  --my-paper: #ffffff;
  --my-ink: #292930;
  --my-body: #53545e;
  --my-secondary: #72737e;
  --my-soft: #e8e7ee;
  --my-hover: #e6e7ec;
  --my-glass: #ffffff94;
  --my-toolbar-glass: #f8f8fbb3;
  --my-modal-glass: #f8f8fbd4;
  --my-glass-sheen: #ffffff8c;
  --my-glass-rim: #8a839916;
  --my-glass-selection: #dedce7ad;
  --my-edge: #ffffffed;
  --my-line: #edecf1;
  --my-shadow: #2c28450a;
  --my-accent: #726b80;
  --my-glow: #e5e0ed;
  --my-focus: #787084;
  --my-search-backdrop: #dddde847;
  --my-dialog-shadow: #28233d1b;
  --my-floating-shadow: #28223d12;
  --my-card-shadow: #29263e08;
  --my-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --my-control: 44px;
  --my-icon: 20px;
  --my-radius-card: 28px;
  --my-radius-subtle: 20px;
  --my-radius-thumbnail: 10px;
  --my-radius-pill: 999px;
  --my-space-1: 4px;
  --my-space-2: 8px;
  --my-space-3: 12px;
  --my-space-4: 16px;
  --my-space-5: 20px;
  --my-space-6: 24px;
  --my-space-8: 32px;
  --my-space-10: 40px;
  --my-space-12: 48px;
  --my-control-inset: 6px;
  --my-tab-width: 72px;
  --my-reader-width: 620px;
  --my-body-size: 16px;
  --my-section-size: 22px;
  --my-body-leading: 2;
  --my-copy-leading: 1.9;
  --my-title-leading: 1.5;
  --my-title-tracking: -.03em;
  --my-weight-label: 500;
  --my-weight-title: 600;
  --my-duration-enter: 220ms;
  --my-duration-exit: 160ms;
  --my-duration-move: 260ms;
  --my-ease-out: cubic-bezier(.23, 1, .32, 1);
  --my-ease-move: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html { min-width: 280px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(88px + env(safe-area-inset-top)); }
html.my-modal-open { overflow: hidden; }
/* The destination stays quiet until its translated reading position is restored. */
html[data-language-arrival] #maoyu-app { opacity: 0; }
body { margin: 0; min-width: 280px; background: var(--my-bg); color: var(--my-ink); font: 16px var(--my-font); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 100% 100%, var(--my-glow), transparent 48%); pointer-events: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
svg { display: block; flex: none; width: var(--my-icon); height: var(--my-icon); stroke-width: 1.75; }
[hidden] { display: none !important; }
::selection { background: var(--my-soft); color: var(--my-ink); }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--my-focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 50; top: var(--my-space-3); left: var(--my-space-3); transform: translateY(-160%); padding: var(--my-space-3) var(--my-space-5); border-radius: var(--my-radius-subtle); background: var(--my-paper); box-shadow: 0 5px 20px var(--my-shadow); font-size: 14px; }
.skip-link:focus { transform: none; }

/* One geometry and one state treatment for all icon tools. */
.my-round { position: relative; display: grid; place-items: center; flex: none; width: var(--my-control); height: var(--my-control); min-width: var(--my-control); min-height: var(--my-control); padding: 0; border-radius: var(--my-radius-pill); color: var(--my-ink); transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-round::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--my-glass-selection); opacity: 0; transition: opacity var(--my-duration-exit) var(--my-ease-out); pointer-events: none; }
.my-round svg, .my-language-toggle > span { position: relative; }
.my-language-toggle { font-size: 12px; font-weight: var(--my-weight-label); text-decoration: none; }
.my-round[aria-pressed='true']::before { opacity: 1; }
.my-round:active::before { opacity: 1; }
.my-theme-light { display: contents; }
.my-theme-dark { display: none; }
.my-paper-actions, .my-brand-actions { display: flex; flex: none; align-items: center; gap: var(--my-space-2); }
.my-paper-actions { margin-left: auto; }
.my-brand-actions { display: none; }

/* Shared glass; nested tools intentionally have no additional blur layer. */
.my-dock, .my-round, .my-paper-bar, .my-search-sheet, .my-appearance-sheet {
  background: var(--my-material-fill, var(--my-glass));
  background-image: linear-gradient(135deg, var(--my-glass-sheen), transparent 48%);
  box-shadow: inset 0 1px 0 var(--my-edge), inset 0 0 0 1px var(--my-glass-rim), inset 0 -1px 1px var(--my-glass-rim), 0 7px 24px var(--my-floating-shadow);
  -webkit-backdrop-filter: blur(var(--my-material-blur, 16px)) saturate(1.3);
  backdrop-filter: blur(var(--my-material-blur, 16px)) saturate(1.3);
}
.my-paper-bar { --my-material-fill: var(--my-toolbar-glass); }
.my-dock { --my-material-blur: 18px; }
.my-quiet-action, .my-desktop-close, .my-search-close { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.my-round.my-quiet-action[aria-pressed='true'] { background: transparent; }
.my-round:active, .my-tab:active, .my-issue:active, .my-next-issue:active, .my-theme-choice:active, .my-contents a:active { transform: scale(.97); }
.my-round, .my-tab, .my-issue, .my-next-issue, .my-theme-choice, .my-contents a, .my-edition { transform-origin: center center; }

/* Reader shell and its persistent directory. */
#maoyu-app { min-height: 100vh; min-height: 100svh; padding-block: 28px; isolation: isolate; overflow-anchor: none; }
.my-stage { width: min(1220px, calc(100% - 56px)); margin-inline: auto; }
.my-app { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: var(--my-space-5); align-items: start; }
.my-sidebar { position: sticky; top: 28px; display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); padding: var(--my-space-6) var(--my-space-2) var(--my-space-3); }
.my-brand { padding: 0 var(--my-space-3) var(--my-space-10); }
.my-brand-copy { min-width: 0; }
.my-logo { display: inline-block; flex: none; width: 34px; height: 28px; background: currentColor; -webkit-mask: url('/assets/maoyu-mark.svg') center / contain no-repeat; mask: url('/assets/maoyu-mark.svg') center / contain no-repeat; }
.my-brand-title { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-bottom: var(--my-space-2); font-size: 28px; font-weight: var(--my-weight-title); line-height: 1.3; letter-spacing: var(--my-title-tracking); overflow-wrap: break-word; }
.my-brand-title { transition: opacity 140ms var(--my-ease-out); }
.my-brand-title:active { opacity: .68; }
.my-brand-title > span { min-width: 0; }
.my-brand p { padding-left: 44px; }
.my-about-mark .my-logo { width: 42px; height: 34px; }
.my-brand p { margin: 0; color: var(--my-secondary); font-size: 12px; line-height: 1.8; }
.my-list-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-3); padding: 0 var(--my-space-3) var(--my-space-4); color: var(--my-secondary); font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.my-list { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--my-space-1); }
.my-issue { position: relative; z-index: 1; display: block; width: 100%; padding: var(--my-space-5) var(--my-space-3); border-radius: var(--my-radius-subtle); background: transparent; text-align: left; transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-issue::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--my-hover); opacity: 0; transition: opacity 140ms var(--my-ease-out); pointer-events: none; }
.my-issue[aria-current='page'], .my-selection-surface { background: var(--my-paper); box-shadow: 0 3px 16px var(--my-shadow); }
.my-selection-surface { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 0; border-radius: var(--my-radius-subtle); pointer-events: none; }
.my-list:has(.my-selection-surface) > .my-issue[aria-current='page'] { background: transparent; box-shadow: none; }
.my-issue-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-3); margin-bottom: var(--my-space-2); color: var(--my-secondary); font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.my-issue-title { display: block; font-size: 15px; font-weight: var(--my-weight-label); line-height: 1.6; letter-spacing: -.01em; overflow-wrap: break-word; }
.my-mobile-caption { display: none; }
.my-sidebar-bottom { display: flex; align-items: center; justify-content: center; gap: var(--my-space-3); margin-top: auto; padding-top: var(--my-space-10); }
#maoyu-app[data-page='reader'] .my-sidebar-bottom .my-rss { display: none; }
.my-dock { position: relative; display: flex; gap: var(--my-space-1); padding: var(--my-control-inset); border-radius: var(--my-radius-pill); }
.my-dock-indicator { position: absolute; top: var(--my-control-inset); left: var(--my-control-inset); width: var(--my-tab-width); height: var(--my-control); border-radius: var(--my-radius-pill); background: var(--my-glass-selection); pointer-events: none; }
#maoyu-app[data-section='about'] .my-dock-indicator { transform: translateX(calc(var(--my-tab-width) + var(--my-space-1))); }
.my-tab { isolation: isolate; position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 var(--my-tab-width); gap: 6px; width: var(--my-tab-width); height: var(--my-control); border-radius: var(--my-radius-pill); background: transparent; color: var(--my-ink); font-size: 12px; font-weight: var(--my-weight-label); white-space: nowrap; transition: transform var(--my-duration-exit) var(--my-ease-out); }

.my-tab::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--my-glass-selection); opacity: 0; transition: opacity 140ms var(--my-ease-out); pointer-events: none; }

.my-paper { position: relative; min-width: 0; min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); padding: var(--my-space-8) clamp(32px, 4.8vw, 64px) var(--my-space-12); border-radius: var(--my-radius-card); background: var(--my-paper); box-shadow: 0 8px 32px var(--my-shadow); }
.my-paper:focus:not(:focus-visible) { outline: none; }
.my-paper-bar { position: sticky; z-index: 12; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-3); width: max-content; max-width: 100%; min-height: calc(var(--my-control) + 2 * var(--my-control-inset)); margin: 0 auto var(--my-space-12); padding: var(--my-control-inset); border-radius: var(--my-radius-pill); color: var(--my-ink); }
.my-article, .my-about { max-width: var(--my-reader-width); margin-inline: auto; }
.my-article-label { margin: 0 0 var(--my-space-4); color: var(--my-secondary); font-size: 12px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.my-article-title { margin: 0 0 var(--my-space-4); color: var(--my-ink); font-size: clamp(32px, 3.1vw, 40px); font-weight: var(--my-weight-title); line-height: var(--my-title-leading); letter-spacing: var(--my-title-tracking); text-wrap: balance; overflow-wrap: break-word; }
.my-deck { margin: 0 0 var(--my-space-10); color: var(--my-secondary); font-size: 15px; line-height: var(--my-copy-leading); }
.my-body { color: var(--my-body); font-size: var(--my-body-size); line-height: var(--my-body-leading); overflow-wrap: break-word; }
.my-body p { margin: 0 0 var(--my-space-6); }
.my-body p:last-child { margin-bottom: 0; }
.my-body h2, .my-body h3 { margin: var(--my-space-10) 0 var(--my-space-4); color: var(--my-ink); font-size: var(--my-section-size); font-weight: var(--my-weight-title); line-height: 1.6; letter-spacing: -.02em; text-wrap: balance; scroll-margin-top: var(--my-space-3); }
.my-body h3 { font-size: 20px; }
.my-body blockquote { margin: var(--my-space-8) 0; padding: 0 0 0 var(--my-space-5); border-left: 2px solid var(--my-soft); color: var(--my-accent); font-size: inherit; line-height: inherit; }
.my-body ul, .my-body ol { margin: var(--my-space-6) 0; padding-left: 1.4em; }
.my-body li + li { margin-top: var(--my-space-2); }
.my-body a { color: var(--my-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--my-accent) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.my-body a svg { display: inline-block; vertical-align: -.2em; margin-left: var(--my-space-1); }
.my-body a span { margin-left: var(--my-space-1); }
.my-note { margin: var(--my-space-10) 0 0; color: var(--my-secondary); font-size: 11px; line-height: 1.8; }
.my-article-cover { margin: 0 0 var(--my-space-8); }
.my-cover-frame { display: block; overflow: hidden; overflow: clip; border-radius: var(--my-radius-subtle); background: var(--my-soft); }
.my-cover-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.my-cover-frame[data-image-viewer], .my-body [data-image-viewer] { cursor: zoom-in; }
.my-body figure { margin: var(--my-space-8) 0; }
.my-body figure a { display: block; overflow: hidden; border-radius: var(--my-radius-subtle); }
.my-body figure img { display: block; width: 100%; height: auto; }
.my-body figure figcaption { margin-top: 10px; color: var(--my-secondary); font-size: 12px; line-height: 1.6; }
.my-article-cover figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--my-space-1) var(--my-space-4); margin-top: var(--my-space-3); color: var(--my-secondary); font-size: 11px; line-height: 1.7; }
.my-image-credit { min-width: 0; overflow-wrap: break-word; }
.my-image-credit a { text-decoration: underline; text-underline-offset: 3px; }
.my-contents { margin-bottom: var(--my-space-8); padding-bottom: var(--my-space-6); border-bottom: 1px solid var(--my-line); }
.my-contents-label { margin: 0 0 var(--my-space-3); color: var(--my-secondary); font-size: 11px; line-height: 1.8; }
.my-contents-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--my-space-2); }
.my-contents a { position: relative; isolation: isolate; display: flex; align-items: baseline; gap: var(--my-space-2); min-width: 0; padding: var(--my-space-2) var(--my-space-3); border-radius: var(--my-radius-subtle); background: var(--my-bg); color: var(--my-body); font-size: 12px; line-height: 1.7; overflow-wrap: break-word; transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-contents a::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--my-hover); opacity: 0; transition: opacity 140ms var(--my-ease-out); pointer-events: none; }
.my-contents-number { flex: none; color: var(--my-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.my-next-issue { display: flex; align-items: center; gap: var(--my-space-5); max-width: var(--my-reader-width); margin: var(--my-space-12) auto 0; padding-top: var(--my-space-6); border-top: 1px solid var(--my-line); transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-next-issue > span { display: block; flex: 1; min-width: 0; }
.my-next-label { display: block; color: var(--my-secondary); font-size: 11px; line-height: 1.7; }
.my-next-title { display: block; margin-top: var(--my-space-2); color: var(--my-ink); font-size: 18px; font-weight: var(--my-weight-label); line-height: 1.6; overflow-wrap: break-word; }
.my-next-image { display: block; flex: none; width: 80px; height: 64px; border-radius: var(--my-radius-thumbnail); object-fit: cover; }
.my-next-issue > svg { color: var(--my-secondary); transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-about { padding: var(--my-space-8) 0; }
.my-about-mark { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--my-space-8); border-radius: var(--my-radius-subtle); background: var(--my-bg); color: var(--my-accent); font-size: 26px; font-weight: var(--my-weight-title); letter-spacing: var(--my-title-tracking); }
.my-about .my-body { margin-top: var(--my-space-6); }
.my-reading-progress { position: fixed; z-index: 15; top: 0; left: 0; width: 100%; height: 2px; background: var(--my-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Top-level pages share their header and dock, independent of the reader. */
#maoyu-app[data-page='library'],
#maoyu-app[data-page='about'] { --my-tab-width: 88px; }
#maoyu-app[data-page='library'] .my-app,
#maoyu-app[data-page='about'] .my-app { display: block; }
#maoyu-app[data-page='library'] .my-sidebar,
#maoyu-app[data-page='about'] .my-sidebar { position: static; min-height: 0; padding: var(--my-space-1) 0 var(--my-space-8); }
#maoyu-app[data-page='library'] .my-brand,
#maoyu-app[data-page='about'] .my-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-4); padding: 0; }
#maoyu-app[data-page='library'] .my-brand-title,
#maoyu-app[data-page='about'] .my-brand-title { margin-bottom: var(--my-space-1); font-size: 24px; }
#maoyu-app[data-page='library'] .my-brand p,
#maoyu-app[data-page='about'] .my-brand p { font-size: 11px; }
#maoyu-app[data-page='library'] .my-brand-actions,
#maoyu-app[data-page='about'] .my-brand-actions { display: flex; }
#maoyu-app[data-page='library'] .my-sidebar > .my-list,
#maoyu-app[data-page='library'] .my-sidebar > .my-list-caption,
#maoyu-app[data-page='about'] .my-sidebar > .my-list,
#maoyu-app[data-page='about'] .my-sidebar > .my-list-caption { display: none; }
#maoyu-app[data-page='library'] .my-paper,
#maoyu-app[data-page='about'] .my-paper { min-height: 0; padding: 0 0 calc(128px + env(safe-area-inset-bottom)); border-radius: 0; background: transparent; box-shadow: none; }
#maoyu-app[data-page='library'] .my-sidebar-bottom,
#maoyu-app[data-page='about'] .my-sidebar-bottom { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); margin: 0; padding: 0; pointer-events: none; }
#maoyu-app[data-page='library'] .my-sidebar-bottom > *,
#maoyu-app[data-page='about'] .my-sidebar-bottom > * { pointer-events: auto; }
#maoyu-app[data-page='about'] .my-about { max-width: 840px; padding: clamp(28px, 5vw, 64px); border-radius: var(--my-radius-card); background: var(--my-paper); box-shadow: 0 8px 32px var(--my-shadow); }
.my-library-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--my-space-6); margin: var(--my-space-3) 0 var(--my-space-6); }
.my-library-heading { min-width: 0; }
.my-library-kicker { margin: 0 0 var(--my-space-2); color: var(--my-secondary); font-size: 11px; font-weight: var(--my-weight-label); line-height: 1.6; letter-spacing: .04em; }
.my-library-title { margin: 0; color: var(--my-ink); font-size: 32px; font-weight: var(--my-weight-title); line-height: var(--my-title-leading); letter-spacing: var(--my-title-tracking); text-wrap: balance; overflow-wrap: break-word; }
.my-library-description { margin: var(--my-space-2) 0 0; color: var(--my-secondary); font-size: 13px; line-height: var(--my-copy-leading); }
.my-library-count { flex: none; max-width: 120px; margin: 0 0 var(--my-space-1); color: var(--my-secondary); font-size: 11px; line-height: 1.7; text-align: right; }
.my-library-count span { display: block; }
.my-library-count strong { display: block; margin-bottom: var(--my-space-1); color: var(--my-ink); font-size: 24px; font-weight: var(--my-weight-label); line-height: 1.3; font-variant-numeric: tabular-nums; }
.my-resume { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--my-icon); align-items: center; gap: var(--my-space-4); margin-bottom: var(--my-space-6); padding: var(--my-space-3) var(--my-space-1) var(--my-space-4); border-bottom: 1px solid var(--my-line); color: var(--my-ink); transition: opacity var(--my-duration-exit) var(--my-ease-out); }
.my-resume-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--my-space-1) var(--my-space-4); min-width: 0; }
.my-resume-label { color: var(--my-secondary); font-size: 11px; line-height: 1.7; }
.my-resume-title { min-width: 0; font-size: 14px; font-weight: var(--my-weight-label); line-height: 1.6; overflow-wrap: break-word; }
.my-resume-progress { color: var(--my-secondary); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-resume > svg { color: var(--my-secondary); transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-resume:active { opacity: .72; }
.my-edition { min-width: 0; border-radius: var(--my-radius-card); background: var(--my-paper); box-shadow: 0 7px 26px var(--my-card-shadow); overflow: hidden; transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-featured { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.my-edition-image { position: relative; display: block; min-width: 0; overflow: hidden; background: var(--my-soft); }
.my-featured > .my-edition-image { border-radius: var(--my-radius-card) 0 0 var(--my-radius-card); }
.my-edition-card .my-edition-image { border-radius: var(--my-radius-card) var(--my-radius-card) 0 0; }
.my-edition-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--my-duration-move) var(--my-ease-move); }
.my-featured > .my-edition-image { min-height: 390px; aspect-ratio: 3 / 2; }
.my-featured-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3vw, 40px); }
.my-edition-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--my-space-2) var(--my-space-3); margin-bottom: var(--my-space-4); color: var(--my-secondary); font-size: 11px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.my-edition-latest { color: var(--my-accent); }
.my-edition-title { margin: 0 0 var(--my-space-4); color: var(--my-ink); font-size: 30px; font-weight: var(--my-weight-title); line-height: var(--my-title-leading); letter-spacing: var(--my-title-tracking); text-wrap: balance; overflow-wrap: break-word; }
.my-edition-summary { margin: 0 0 var(--my-space-6); color: var(--my-secondary); font-size: 14px; line-height: var(--my-copy-leading); overflow-wrap: break-word; }
.my-edition-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--my-space-2); }
.my-edition-tags > span { max-width: 100%; padding: var(--my-space-1) var(--my-space-2); border-radius: var(--my-radius-pill); background: var(--my-bg); color: var(--my-secondary); font-size: 11px; line-height: 1.6; overflow-wrap: break-word; }
.my-edition-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--my-space-3); margin-top: auto; padding-top: var(--my-space-6); color: var(--my-ink); font-size: 12px; font-weight: var(--my-weight-label); line-height: 1.8; }
.my-edition-action > span:first-child { display: inline-flex; align-items: center; gap: var(--my-space-2); }
.my-edition-action > span:last-child { color: var(--my-secondary); font-size: 11px; font-weight: 400; }
.my-edition-action svg { transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--my-space-5); margin: var(--my-space-10) 0 var(--my-space-4); }
.my-archive-head h2 { margin: 0; color: var(--my-ink); font-size: 18px; font-weight: var(--my-weight-title); line-height: 1.6; }
.my-archive-head > :not(h2) { margin: 0; color: var(--my-secondary); font-size: 11px; line-height: 1.8; }
.my-edition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--my-space-5); }
.my-edition-card { display: flex; flex-direction: column; }
.my-edition-card .my-edition-image { flex: none; aspect-ratio: 16 / 10; }
.my-edition-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: var(--my-space-6); }
.my-edition-card .my-edition-meta { margin-bottom: var(--my-space-3); }
.my-edition-card .my-edition-title { margin-bottom: var(--my-space-3); font-size: 20px; }
.my-edition-card .my-edition-summary { margin-bottom: var(--my-space-5); font-size: 13px; }
.my-edition-card .my-edition-tags { margin-top: auto; }
.my-edition:active { transform: scale(.985); }

/* Native dialogs share the same frame, tools, and interaction states. */
dialog.my-search-sheet, dialog.my-appearance-sheet { --my-material-fill: var(--my-modal-glass); width: min(510px, calc(100% - 40px)); max-height: min(640px, calc(100vh - 96px)); max-height: min(640px, calc(100svh - 96px)); margin: min(16vh, 140px) auto auto; margin: min(16svh, 140px) auto auto; padding: var(--my-space-5); border: 0; border-radius: var(--my-radius-card); color: var(--my-ink); box-shadow: inset 0 1px 0 var(--my-edge), inset 0 0 0 1px var(--my-glass-rim), 0 24px 90px var(--my-dialog-shadow); overflow: auto; overscroll-behavior: contain; transform-origin: center center; }
dialog.my-search-sheet:not([open]), dialog.my-appearance-sheet:not([open]) { display: none; }
.my-search-sheet::backdrop, .my-appearance-sheet::backdrop { background: transparent; }
.my-modal-backdrop { position: fixed; z-index: 40; inset: 0; background: var(--my-search-backdrop); pointer-events: none; }
.my-search-head { display: flex; align-items: center; gap: var(--my-space-2); }
.my-search-input { display: flex; align-items: center; flex: 1; gap: var(--my-space-3); min-width: 0; min-height: var(--my-control); padding-inline: var(--my-space-4); border-radius: var(--my-radius-subtle); background: var(--my-bg); }
.my-search-input > svg { color: var(--my-secondary); }
.my-search-input input { display: block; width: 100%; min-width: 0; height: var(--my-control); padding: 0; border: 0; background: transparent; color: var(--my-ink); font-size: 16px; }
.my-search-input input::placeholder { color: var(--my-secondary); opacity: 1; }
.my-search-input:focus-within { outline: 2px solid var(--my-focus); outline-offset: 4px; }
.my-search-input input:focus-visible { outline: none; }
.my-search-results { display: flex; flex-direction: column; gap: var(--my-space-1); padding-top: var(--my-space-4); }
.my-search-results .my-issue { padding: var(--my-space-4); box-shadow: none; }
.my-search-results mark { color: var(--my-ink); background: var(--my-soft); border-radius: var(--my-space-1); padding-inline: 2px; }
.my-search-results .my-issue[aria-current='page'] { background: var(--my-bg); }
.my-empty { margin: 0; padding: var(--my-space-6) var(--my-space-4); color: var(--my-secondary); font-size: 14px; line-height: 1.8; text-align: center; }
.my-search-hint { margin: var(--my-space-3) var(--my-space-4) 0; color: var(--my-secondary); font-size: 11px; line-height: 1.8; }
dialog.my-appearance-sheet { width: min(360px, calc(100% - 40px)); margin-top: min(22vh, 180px); margin-top: min(22svh, 180px); }
.my-appearance-head { display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-4); margin-bottom: var(--my-space-4); padding-left: var(--my-space-3); }
.my-appearance-head h2 { margin: 0; font-size: 18px; font-weight: var(--my-weight-title); line-height: 1.6; }
.my-theme-options { display: flex; flex-direction: column; gap: var(--my-space-1); }
.my-theme-choice { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--my-icon) minmax(0, 1fr) var(--my-icon); align-items: center; gap: var(--my-space-3); width: 100%; min-height: 56px; padding: var(--my-space-4); border-radius: var(--my-radius-subtle); background: transparent; color: var(--my-body); text-align: left; transition: transform var(--my-duration-exit) var(--my-ease-out); }
.my-theme-choice-icon { color: var(--my-secondary); }
.my-theme-choice-label { font-size: 14px; line-height: 1.7; }
.my-theme-check { opacity: 0; color: var(--my-ink); transform: scale(.82); transition: opacity 140ms var(--my-ease-out), transform 180ms var(--my-ease-out); }
.my-theme-choice::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--my-glass-selection); opacity: 0; pointer-events: none; transition: opacity 160ms var(--my-ease-out); }
.my-theme-choice[aria-pressed='true'] { color: var(--my-ink); }
.my-theme-choice[aria-pressed='true']::before { opacity: 1; }
.my-theme-choice[aria-pressed='true'] .my-theme-check { opacity: 1; transform: scale(1); }

/* English labels get more horizontal room while retaining the shared control height. */
html[lang='en'] { --my-body-leading: 1.8; --my-copy-leading: 1.75; --my-title-leading: 1.3; --my-title-tracking: -.02em; }
html[lang='en'] #maoyu-app[data-page='reader'] { --my-tab-width: 88px; }
html[lang='en'] #maoyu-app[data-page='reader'] .my-app { grid-template-columns: 264px minmax(0, 1fr); }
html[lang='en'] .my-tab { gap: 8px; }
html[lang='en'] :is(.my-article-title, .my-library-title, .my-edition-title, .my-issue-title, .my-next-title) { word-break: normal; overflow-wrap: break-word; hyphens: none; }
html[lang='en'] .my-brand-title { font-size: 24px; }
html[lang='en'] #maoyu-app[data-page='library'] .my-brand-title,
html[lang='en'] #maoyu-app[data-page='about'] .my-brand-title { font-size: 22px; }
html[lang='en'] .my-library-kicker { letter-spacing: 0; }
html[lang='en'] .my-issue-title { line-height: 1.45; }
html[lang='en'] .my-next-title { line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
  .my-round:hover:not(:active)::before { opacity: .65; transition-duration: var(--my-duration-enter); }
  .my-issue:hover::before { opacity: 1; }
  .my-list > .my-issue[aria-current='page']:hover::before { opacity: 0; }
  .my-tab:hover::before { opacity: .65; }
  .my-tab[aria-current='page']:hover::before { opacity: 0; }
  .my-next-issue:hover > svg, .my-edition:hover .my-edition-action svg { transform: translateX(3px); }
  .my-resume:hover > svg { transform: translateX(3px); }
  .my-resume:hover .my-resume-title { text-decoration: underline; text-underline-offset: 4px; }
  .my-edition:hover .my-edition-image img { transform: scale(1.025); }
  .my-body a:hover { text-decoration-color: currentColor; }
  .my-theme-choice:hover::before { opacity: .55; }
  .my-theme-choice[aria-pressed='true']:hover::before { opacity: 1; }
  .my-contents a:hover::before { opacity: 1; }
}

/* Reserve image space even when the browser has no aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
  .my-edition-image::before { content: ''; display: block; padding-top: 62.5%; }
  .my-featured > .my-edition-image::before { padding-top: 66.6667%; }
  .my-edition-image img { position: absolute; top: 0; left: 0; }
  .my-cover-frame { position: relative; }
  .my-cover-frame::before { content: ''; display: block; padding-top: 62.5%; }
  .my-cover-frame > img { position: absolute; top: 0; left: 0; height: 100%; }
  @media (max-width: 700px) {
    .my-featured > .my-edition-image::before { padding-top: 62.5%; }
  }
}

/* Each breakpoint owns layout changes only; control sizes stay invariant. */
@media (max-width: 960px) {
  :root { --my-tab-width: 64px; }
  #maoyu-app { padding-block: var(--my-space-5); }
  .my-stage { width: calc(100% - 40px); }
  .my-app { grid-template-columns: 216px minmax(0, 1fr); gap: var(--my-space-4); }
  html[lang='en'] #maoyu-app[data-page='reader'] .my-app { grid-template-columns: 256px minmax(0, 1fr); }
  .my-sidebar { top: var(--my-space-5); min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); padding-inline: var(--my-space-1); }
  .my-brand-title { font-size: 26px; }
  .my-paper { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); padding: var(--my-space-6) var(--my-space-8) var(--my-space-12); }
  .my-paper-bar { margin-bottom: var(--my-space-10); }
  .my-article-title { font-size: 34px; }
  .my-featured-copy { padding: 28px; }
  .my-featured > .my-edition-image { min-height: 370px; }
  .my-featured .my-edition-title { font-size: 27px; }
  .my-edition-grid { gap: var(--my-space-4); }
  .my-edition-copy { padding: var(--my-space-5); }
  .my-edition-card .my-edition-title { font-size: 18px; }
}
@media (max-width: 820px) {
  #maoyu-app[data-page='reader'] .my-app { display: block; }
  #maoyu-app[data-page='reader'] .my-sidebar { display: none; }
  #maoyu-app[data-page='reader'] .my-stage { width: min(780px, calc(100% - 40px)); }
  .my-selection-surface { display: none; }
}
@media (max-width: 700px) {
  .my-featured { grid-template-columns: minmax(0, 1fr); }
  .my-featured > .my-edition-image { border-radius: var(--my-radius-card) var(--my-radius-card) 0 0; }
  .my-featured > .my-edition-image { min-height: 0; aspect-ratio: 16 / 10; }
  .my-featured-copy { padding: var(--my-space-6); }
  .my-featured .my-edition-title { font-size: 28px; }
  .my-edition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-archive-head { margin-top: var(--my-space-8); }
}
@media (max-width: 600px) {
  #maoyu-app { padding-block: 0; }
  #maoyu-app[data-page='reader'] .my-stage { width: 100%; }
  .my-paper { min-height: 100vh; min-height: 100svh; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border-radius: 0; box-shadow: none; }
  .my-paper-bar { top: max(8px, env(safe-area-inset-top)); gap: var(--my-space-1); width: max-content; max-width: 100%; margin-bottom: var(--my-space-8); }
  .my-brand-title { gap: 8px; }
  .my-brand-title .my-logo { width: 28px; height: 23px; }
  .my-brand p { padding-left: 36px; }
  .my-paper-actions { gap: var(--my-space-1); margin-left: 0; }
  .my-article-title { font-size: 32px; }
  .my-deck { font-size: 14px; margin-bottom: var(--my-space-8); }
  .my-contents-links { grid-template-columns: minmax(0, 1fr); }
  .my-next-issue { gap: var(--my-space-4); margin-top: var(--my-space-10); }
  .my-next-title { font-size: 16px; }
  .my-next-image { width: 64px; height: 56px; }
  .my-about { padding-top: var(--my-space-6); }
  dialog.my-search-sheet, dialog.my-appearance-sheet { max-height: calc(100vh - 100px); max-height: calc(100svh - 100px); margin-top: max(64px, env(safe-area-inset-top)); padding: var(--my-space-4); }
  dialog.my-search-sheet { width: calc(100% - 32px); }
  #maoyu-app[data-page='library'],
  #maoyu-app[data-page='about'] { padding-top: max(24px, env(safe-area-inset-top)); }
  #maoyu-app[data-page='library'] .my-stage,
  #maoyu-app[data-page='about'] .my-stage { width: calc(100% - 40px); }
  #maoyu-app[data-page='library'] .my-sidebar,
  #maoyu-app[data-page='about'] .my-sidebar { padding: 0 0 var(--my-space-8); }
  #maoyu-app[data-page='library'] .my-brand-title,
  #maoyu-app[data-page='about'] .my-brand-title { font-size: 22px; }
  #maoyu-app[data-page='library'] .my-sidebar-bottom,
  #maoyu-app[data-page='about'] .my-sidebar-bottom { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .my-library-top { align-items: flex-start; gap: var(--my-space-4); margin-top: var(--my-space-2); }
  .my-library-title { font-size: 28px; }
  .my-library-description { font-size: 12px; }
  .my-library-count { max-width: 88px; }
  .my-resume { gap: var(--my-space-3); }
  .my-resume-copy { display: grid; gap: var(--my-space-1); }
  html[lang='en'] #maoyu-app[data-page='library'] .my-brand-title,
  html[lang='en'] #maoyu-app[data-page='about'] .my-brand-title { font-size: 20px; }
}
@media (max-width: 480px) {
  .my-edition-grid { grid-template-columns: minmax(0, 1fr); gap: var(--my-space-6); }
  .my-edition-copy { padding: var(--my-space-6); }
  .my-edition-card .my-edition-title { font-size: 21px; }
  .my-featured .my-edition-title { font-size: 27px; }
  html[lang='en'] .my-library-top { flex-wrap: wrap; }
  html[lang='en'] .my-library-heading { flex: 1 1 100%; }
  html[lang='en'] .my-library-count { display: flex; align-items: baseline; gap: var(--my-space-2); max-width: none; text-align: left; }
  html[lang='en'] .my-library-count strong { font-size: 18px; }
}
@media (max-width: 360px) {
  .my-paper { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .my-article-title { font-size: 30px; }
  #maoyu-app[data-page='library'] .my-stage,
  #maoyu-app[data-page='about'] .my-stage { width: calc(100% - 32px); }
  #maoyu-app[data-page='library'] .my-brand,
  #maoyu-app[data-page='about'] .my-brand { gap: var(--my-space-2); }
  .my-library-title { font-size: 26px; }
  .my-featured .my-edition-title { font-size: 25px; }
  .my-featured-copy, .my-edition-copy { padding: var(--my-space-5); }
  .my-next-issue { gap: var(--my-space-3); }
  .my-next-image { width: 56px; height: 56px; }
  html[lang='en'] #maoyu-app[data-page='library'] .my-brand-title,
  html[lang='en'] #maoyu-app[data-page='about'] .my-brand-title { font-size: 18px; gap: 6px; }
  html[lang='en'] .my-brand-title .my-logo { width: 24px; height: 20px; }
  html[lang='en'] .my-brand p { padding-left: 30px; }
}

/* Focus affects only the layout of an actual issue. */
#maoyu-app[data-page='library'] .my-focus-toggle,
#maoyu-app[data-page='about'] .my-focus-toggle,
#maoyu-app[data-section='about'] .my-focus-toggle,
#maoyu-app:not([data-issue]) .my-focus-toggle,
#maoyu-app[data-issue=''] .my-focus-toggle { display: none; }
#maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) { --my-reader-width: 720px; padding-block: 0; background: var(--my-paper); }
#maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) .my-stage { width: 100%; }
#maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) .my-app { display: block; }
#maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) .my-sidebar { display: none; }
#maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) .my-paper { width: min(840px, 100%); min-height: 100vh; min-height: 100svh; margin-inline: auto; padding: max(20px, env(safe-area-inset-top)) max(20px, min(5vw, 60px), env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(20px, min(5vw, 60px), env(safe-area-inset-left)); border-radius: 0; background: transparent; box-shadow: none; }
@media (max-width: 820px) {
  #maoyu-app[data-reading='focus'][data-page='reader'][data-section='weekly'][data-issue]:not([data-issue='']) :is(.my-contents, .my-next-issue) { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  #maoyu-app[data-page='reader'] .my-app { display: block; }
  #maoyu-app[data-page='reader'] .my-sidebar { display: none; }
  #maoyu-app[data-page='reader'] .my-stage { width: calc(100% - 32px); }
  #maoyu-app[data-page='reader'] .my-paper { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
  .my-paper-bar { top: max(8px, env(safe-area-inset-top)); margin-bottom: var(--my-space-6); }
  dialog.my-search-sheet, dialog.my-appearance-sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin-top: var(--my-space-3); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --my-bg: #1b1c21;
    --my-paper: #26272e;
    --my-ink: #ededf2;
    --my-body: #c5c5d0;
    --my-secondary: #a0a1ad;
    --my-soft: #3a3843;
    --my-hover: #303139;
    --my-glass: #34343dcc;
    --my-toolbar-glass: #282830b8;
    --my-modal-glass: #282830d9;
    --my-glass-sheen: #ffffff0d;
    --my-glass-rim: #ffffff14;
    --my-glass-selection: #57526091;
    --my-edge: #ffffff14;
    --my-line: #383841;
    --my-shadow: #0000001c;
    --my-accent: #c4bdd2;
    --my-glow: #2e2839;
    --my-focus: #b8aecb;
    --my-search-backdrop: #10101566;
    --my-dialog-shadow: #00000045;
    --my-floating-shadow: #00000029;
    --my-card-shadow: #00000015;
  }
  :root:not([data-theme='light']) .my-theme-light { display: none; }
  :root:not([data-theme='light']) .my-theme-dark { display: contents; }
}
html[data-theme='dark'] {
  color-scheme: dark;
  --my-bg: #1b1c21;
  --my-paper: #26272e;
  --my-ink: #ededf2;
  --my-body: #c5c5d0;
  --my-secondary: #a0a1ad;
  --my-soft: #3a3843;
  --my-hover: #303139;
  --my-glass: #34343dcc;
  --my-toolbar-glass: #282830b8;
  --my-modal-glass: #282830d9;
  --my-glass-sheen: #ffffff0d;
  --my-glass-rim: #ffffff14;
  --my-glass-selection: #57526091;
  --my-edge: #ffffff14;
  --my-line: #383841;
  --my-shadow: #0000001c;
  --my-accent: #c4bdd2;
  --my-glow: #2e2839;
  --my-focus: #b8aecb;
  --my-search-backdrop: #10101566;
  --my-dialog-shadow: #00000045;
  --my-floating-shadow: #00000029;
  --my-card-shadow: #00000015;
}
html[data-theme='dark'] .my-theme-light { display: none; }
html[data-theme='dark'] .my-theme-dark { display: contents; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .my-dock, .my-round:not(.my-quiet-action), .my-paper-bar, dialog.my-search-sheet, dialog.my-appearance-sheet { background: var(--my-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .my-dock, .my-round:not(.my-quiet-action), .my-paper-bar, dialog.my-search-sheet, dialog.my-appearance-sheet { background: var(--my-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .my-dock-indicator, .my-round[aria-pressed='true']::before, .my-theme-choice[aria-pressed='true']::before { background: var(--my-soft); }
}

/* Cover-only transitions keep text stable. */
::view-transition { pointer-events: none; }
::view-transition-group(maoyu-cover) { animation-duration: var(--my-duration-move); animation-timing-function: var(--my-ease-move); }
::view-transition-image-pair(maoyu-cover) { isolation: isolate; }
::view-transition-old(maoyu-cover), ::view-transition-new(maoyu-cover) { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: normal; }
/* The new crop becomes opaque before the old corners are removed. */
::view-transition-old(maoyu-cover) { animation: my-cover-out calc(var(--my-duration-move) - var(--my-duration-exit)) var(--my-ease-out) var(--my-duration-exit) both; }
::view-transition-new(maoyu-cover) { animation: my-cover-in var(--my-duration-exit) var(--my-ease-out) both; }
@keyframes my-cover-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes my-cover-out { from { opacity: 1; } to { opacity: 0; } }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Text crossfades at its own size while the cover alone travels between frames. */
html.my-cover-transition::view-transition-old(root) { animation: my-cover-out 100ms var(--my-ease-out) both; }
html.my-cover-transition::view-transition-new(root) { animation: my-cover-in 180ms var(--my-ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  html[data-language-arrival] #maoyu-app { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .my-round:active, .my-tab:active, .my-issue:active, .my-next-issue:active, .my-edition:active, .my-theme-choice:active, .my-contents a:active { transform: none; }
  .my-next-issue:hover > svg, .my-edition:hover .my-edition-image img, .my-edition:hover .my-edition-action svg, .my-resume:hover > svg { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.keyboard-navigation *, .keyboard-navigation *::before, .keyboard-navigation *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.keyboard-navigation :is(.my-round, .my-tab, .my-issue, .my-next-issue, .my-edition, .my-theme-choice, .my-contents a):active { transform: none; }
.keyboard-navigation .my-next-issue:hover > svg, .keyboard-navigation .my-edition:hover .my-edition-image img, .keyboard-navigation .my-edition:hover .my-edition-action svg, .keyboard-navigation .my-resume:hover > svg { transform: none; }
html:has(.keyboard-navigation)::view-transition-group(*), html:has(.keyboard-navigation)::view-transition-old(*), html:has(.keyboard-navigation)::view-transition-new(*) { animation: none !important; }
html:not(.js) :is([data-action='search'], [data-action='theme'], [data-action='focus']) { display: none; }