:root { color-scheme: dark; --bg:#090b0d; --text:#e5e9eb; --muted:#929da3; --red:#de3e3e; --ruler-top:110px; --ruler-height:440px; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:var(--bg); color:var(--text); }
button,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button { color:inherit; border:0; background:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid #d5dde1; outline-offset:4px; }
button:disabled { opacity:.4; cursor:default; }
[hidden] { display:none!important; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#galleryRoot,.art-gallery { position:fixed; inset:0; width:100%; height:100%; }
.art-gallery { overflow:hidden; touch-action:none; cursor:grab; outline:none; }
.art-gallery.is-dragging { cursor:grabbing; }
.art-gallery > canvas { display:block; width:100%; height:100%; opacity:0; transition:opacity .5s ease; }
.art-gallery.is-ready > canvas { opacity:1; }
.art-gallery.is-fallback > canvas { display:none; }
.gallery-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg); z-index:1; font-size:11px; letter-spacing:3px; color:#859097; }
.gallery-loading span { width:24px; height:24px; border:1px solid #30383d; border-top-color:#c8d1d6; border-radius:50%; animation:loading 1s linear infinite; }
@keyframes loading { to { transform:rotate(360deg); } }
.accessible-catalog { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.accessible-catalog:focus-within { position:fixed; z-index:35; width:min(400px,calc(100% - 40px)); height:auto; max-height:60vh; top:90px; left:50%; transform:translateX(-50%); padding:12px; margin:0; overflow:auto; clip-path:none; white-space:normal; background:#1b2024; border:1px solid #566168; border-radius:8px; }
.accessible-catalog button { padding:12px; display:block; width:100%; text-align:left; }
.floating-filters,.floating-dock { border:0; border-radius:28px; background:#191e23b3; box-shadow:0 6px 24px #0002; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.floating-filters { position:fixed; top:max(24px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:20; display:flex; gap:3px; padding:5px; }
.filter-chip { min-width:61px; padding:10px 19px; color:#96a1a8; border-radius:24px; font-size:12px; transition:background .2s,color .2s; }
.filter-chip.active { background:#e2e7e8; color:#1b2226; }
.year-ruler { position:fixed; z-index:22; right:16px; top:var(--ruler-top); width:72px; }
.year-wheel { position:relative; height:var(--ruler-height); }
.year-wheel::before { content:""; position:absolute; inset:-8px -4px; pointer-events:none; border-radius:32px; background:#13191e66; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent); }
.year-label { display:inline-block; transform:scale(var(--year-scale,1)); transform-origin:center; transition:transform .24s cubic-bezier(.22,1,.36,1); }
.year-tabs { position:relative; width:100%; height:100%; overflow:clip; padding:0; scrollbar-width:none; touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab; mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent); -webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.year-tabs[data-motion="dragging"] { cursor:grabbing; }
.year-tabs::-webkit-scrollbar { display:none; }
.year-track { width:100%; will-change:transform; }
.year-tab { display:block; position:relative; width:100%; height:40px; min-height:40px; padding:0 0 0 18px; color:#a8b4bc; font-size:12px; letter-spacing:-.25px; font-variant-numeric:tabular-nums; text-shadow:0 1px 8px #000b; transform-origin:center; backface-visibility:hidden; transition:color .12s; }
.year-tab::after { content:""; position:absolute; left:9px; top:19px; height:1px; width:7px; background:#7b898f; box-shadow:-3px -10px #404b52,-3px 10px #404b52; }
.year-tab:focus-visible { outline:0; border-radius:18px; box-shadow:inset 0 0 0 1px #c9d5dc55; }
.year-tab.active { color:#f0f3f5; font-weight:600; }
.year-tab.active::after { width:8px; background:#c9d5dc; }
.ruler-marker { pointer-events:none; position:absolute; top:calc(var(--marker-y,20px) - 16px); left:5px; right:5px; height:32px; }
.ruler-marker::after { content:""; position:absolute; top:50%; right:calc(100% + 6px); width:12px; height:1px; background:#c3d1da; }
.floating-dock { position:fixed; z-index:25; bottom:max(24px,env(safe-area-inset-bottom)); right:26px; display:flex; align-items:center; height:52px; padding:0 6px 0 16px; color:#dce3e7; }
.floating-progress { display:flex; align-items:center; gap:5px; padding-right:18px; font-size:12px; font-variant-numeric:tabular-nums; }
.floating-progress svg { width:17px; margin-right:4px; }
.floating-progress strong { font-weight:600; }
.floating-progress > span { color:#8e9ba4; }
.share-button { display:flex; align-items:center; gap:9px; height:38px; padding:0 15px; font-size:11px; border-radius:24px; background:#e2e7e8; color:#1b2226; transition:background .2s,transform .2s; }
.share-button:active { transform:scale(.95); }
.share-button svg { width:16px; }
.icon-button { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; font-size:29px; font-weight:200; }
/* The share preview uses the same quiet glass controls as the gallery. */
.share-overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:22px; }
.share-backdrop { position:absolute; inset:0; background:#090c10a6; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.share-sheet { position:relative; width:min(540px,100%); max-height:calc(100dvh - 44px); display:flex; flex-direction:column; padding:8px; border-radius:18px; background:#191e23b3; box-shadow:0 16px 60px #0004; }
.share-close { position:absolute; z-index:2; right:17px; top:17px; width:34px; height:34px; border-radius:50%; color:#e5eaed; background:#181e23b3; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.share-close svg { width:16px; height:16px; }
.share-preview { overflow:auto; overscroll-behavior:contain; min-height:160px; border-radius:11px; background:#11161a; scrollbar-width:thin; scrollbar-color:#ffffff20 transparent; }
.share-preview img { display:block; width:100%; height:auto; }
.share-loading { display:grid; place-content:center; min-height:240px; font-size:12px; color:#a4b1b9; }
.share-controls { display:flex; justify-content:center; gap:8px; padding:12px 6px 4px; }
.primary-button,.secondary-button { min-width:140px; padding:12px 22px; border-radius:24px; font-size:12px; }
.primary-button { background:#e2e7e8; color:#1b2226; }
.secondary-button { background:#ffffff0c; color:#dce3e7; }
.toast { position:fixed; z-index:80; left:50%; bottom:88px; transform:translate(-50%,6px); max-width:calc(100% - 32px); padding:12px 17px; border:1px solid #424f58; border-radius:5px; background:#1b252c; color:#dae4ea; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.art-gallery.is-fallback { overflow:auto; touch-action:auto; padding:var(--gallery-content-top,128px) 96px 110px 30px; }
.fallback-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.fallback-gallery button { min-width:0; text-align:left; font-size:11px; line-height:1.5; scroll-margin-top:var(--gallery-content-top,128px); }
.fallback-gallery img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; margin-bottom:9px; }
@media (hover:hover) { .filter-chip:not(.active):hover { color:#e7edf0; } .year-tab:hover { color:#e6eef3; } .share-button:hover { background:#f0f4f6; } }
@media (max-width:760px) {
  .floating-filters { top:max(18px,env(safe-area-inset-top)); padding:4px; }
  .filter-chip { min-width:55px; font-size:11px; padding:9px 14px; }
  .year-ruler { right:6px; width:48px; }
  .year-wheel::before { inset:-8px 0; background:#13191e44; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .year-tab { font-size:9.5px; padding-left:10px; }
  .year-tab::after { left:4px; width:3px; box-shadow:-1px -10px #404b52,-1px 10px #404b52; }
  .year-tab.active::after { width:4px; }
  .ruler-marker { left:4px; right:4px; }
  .ruler-marker::after { right:calc(100% + 4px); width:7px; }
  .floating-dock { right:14px; bottom:max(18px,env(safe-area-inset-bottom)); height:48px; padding-left:12px; }
  .floating-progress { font-size:11px; padding-right:13px; }
  .share-button { height:36px; font-size:10px; gap:7px; padding-inline:12px; }
  .share-overlay { padding:14px; }
  .share-sheet { max-height:calc(100dvh - max(28px,env(safe-area-inset-top)) - env(safe-area-inset-bottom)); padding:6px; border-radius:16px; }
  .share-controls { padding:11px 4px 5px; }
  .share-close { right:13px; top:13px; }
  .fallback-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .art-gallery.is-fallback { padding-inline:14px 66px; }
}
.share-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:6px 6px 0; }
.share-tabs { display:flex; padding:4px; border-radius:24px; background:rgba(7,11,14,.35); }
.share-tab { padding:10px 20px; border-radius:22px; font-size:12px; color:#96a3aa; transition:background .2s,color .2s; }
.share-tab.active { color:#1b2226; background:#e2e7e8; }
.share-close { position:static; flex-shrink:0; width:36px; height:36px; color:#b8c3ca; background:none; }
.share-context { flex-shrink:0; margin:12px 12px 14px; color:#96a3aa; font-size:11px; font-variant-numeric:tabular-nums; }
.share-preview { position:relative; min-height:0; -webkit-overflow-scrolling:touch; }
.share-preview:focus-visible { outline:1px solid #566168; outline-offset:-1px; }
.share-controls { flex-shrink:0; }
.share-loading { min-height:280px; text-align:center; }
.share-loading span { justify-self:center; width:22px; height:22px; border:1px solid #36424a; border-top-color:#c5d0d7; border-radius:50%; animation:loading 1s linear infinite; }
.share-loading p { margin:16px 0 0; }
.share-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; padding:28px 20px; text-align:center; }
.share-empty > span { color:#94a5af; font-size:28px; margin-bottom:12px; }
.share-empty h2 { margin:0; color:#e5eaed; font-size:16px; font-weight:500; }
.share-empty p { margin:10px 0 26px; color:#96a3aa; font-size:12px; line-height:1.6; }
.share-empty button { padding:10px 18px; border-radius:22px; background:rgba(255,255,255,.07); color:#dce3e7; font-size:12px; }
.share-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
@media (max-width:380px) { .share-tab { padding-inline:16px; } .share-controls button { min-width:0; flex:1; padding-inline:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

/* One compact toolbar; franchise and type remain distinct controls. */
:root { --accent:#e2e7e8; }
.floating-toolbar { position:fixed; z-index:32; top:max(24px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; max-width:calc(100% - 28px); }
.floating-toolbar .floating-filters { position:static; z-index:0; transform:none; flex-shrink:1; min-width:0; }
.universe-picker { position:relative; z-index:1; flex:0 0 auto; }
.universe-button { display:flex; align-items:center; justify-content:center; gap:5px; height:46px; min-width:85px; padding:0 14px; border-radius:28px; color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.5px; background:#191e23b3; box-shadow:0 6px 24px #0002; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.universe-button svg { width:15px; height:15px; transition:transform .2s; }
.universe-button[aria-expanded="true"] svg { transform:rotate(180deg); }
.universe-menu { position:absolute; top:calc(100% + 10px); left:0; width:218px; padding:6px; border-radius:18px; background:#181e24ed; box-shadow:0 18px 60px #0007; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); transform-origin:top left; animation:menu-in .18s ease-out; }
.universe-option { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:13px 14px; border-radius:12px; }
.universe-option-copy { display:grid; gap:6px; }
.universe-menu { max-height:calc(100dvh - 130px); overflow-y:auto; overscroll-behavior:contain; }
.universe-option strong { font-size:13px; font-weight:500; }
.universe-option small { font-size:10px; color:#85929c; }
.universe-check { visibility:hidden; font-size:15px; color:var(--accent); }
.universe-option[aria-checked="true"] { background:#ffffff08; }
.universe-option[aria-checked="true"] .universe-check { visibility:visible; }
.universe-option:hover { background:#ffffff0c; }
.universe-scrim { position:fixed; inset:0; z-index:30; width:100%; height:100%; cursor:default; }
.catalog-loading { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#090b0dc9; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--muted); font-size:12px; }
.catalog-loading span { width:24px; height:24px; border:1px solid #30383d; border-top-color:var(--accent); border-radius:50%; animation:loading 1s linear infinite; }
.boot-error { position:absolute; inset:0; display:grid; place-content:center; gap:14px; text-align:center; font-size:13px; color:var(--muted); }
.boot-error button { border-radius:24px; padding:12px; background:#20272b; color:var(--text); }
.filter-chip.active,.share-button,.primary-button,.share-tab.active { background:var(--accent); }
html[data-universe="star-wars"] .year-tab.active { color:var(--accent); }
html[data-universe="star-wars"] .ruler-marker::after,html[data-universe="star-wars"] .year-tab.active::after { background:var(--accent); }
@keyframes menu-in { from { opacity:0; transform:translateY(-4px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  .floating-toolbar { top:max(18px,env(safe-area-inset-top)); gap:6px; }
  .universe-button { height:42px; min-width:72px; padding-inline:10px; font-size:11px; }
  .floating-toolbar .filter-chip { min-width:46px; padding:9px 12px; }
}
@media (max-width:350px) {
  .floating-toolbar { max-width:calc(100% - 20px); gap:5px; }
  .universe-button { min-width:67px; padding-inline:8px; }
  .floating-toolbar .filter-chip { min-width:43px; padding-inline:9px; }
}

/* Brand accents keep small control labels readable on both red and gold. */
:root { --accent:#d72b35; --on-accent:#ffffff; --accent-ink:#f47c83; }
.universe-button { color:var(--accent-ink); }
.filter-chip.active,.share-button,.primary-button,.share-tab.active { color:var(--on-accent); }
.year-tab.active,html[data-universe="star-wars"] .year-tab.active { color:var(--accent-ink); }
.ruler-marker::after,.year-tab.active::after { background:var(--accent-ink); }
.universe-check { color:var(--accent-ink); }
@media (hover:hover) { .share-button:hover { background:var(--accent); filter:brightness(1.1); } }

/* One quiet language control in the top-right corner, matching the glass tabs. */
.language-button { position:fixed; z-index:33; top:max(29px,env(safe-area-inset-top)); right:26px; display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; background:#191e23b3; color:#c3cdd3; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 6px 24px #0002; font-size:11px; font-weight:600; letter-spacing:.3px; transition:background .18s,color .18s,transform .18s; }
.language-button:active { transform:scale(.94); }
.language-button:hover { color:var(--accent-ink); background:#242c32d9; }
:lang(en) .share-tab { font-size:12px; padding-inline:17px; }
@media (max-width:760px) {
  .language-button { top:max(22px,env(safe-area-inset-top)); right:14px; width:36px; height:36px; }
  .floating-toolbar { left:14px; right:60px; transform:none; max-width:none; justify-content:center; gap:5px; }
  .universe-button { height:42px; min-width:58px; padding-inline:10px; font-size:11px; }
  .floating-toolbar .filter-chip { min-width:0; padding:9px 10px; font-size:11px; }
  .floating-filters { gap:1px; }
}
@media (max-width:379px) {
  .floating-toolbar { left:10px; right:51px; gap:4px; }
  .language-button { right:10px; width:32px; height:36px; }
  .universe-button { min-width:52px; padding-inline:7px; gap:3px; font-size:10.5px; }
  .universe-button svg { width:12px; }
  .floating-toolbar .filter-chip { padding-inline:7px; font-size:10.5px; }
  :lang(en) .floating-dock { right:10px; padding-left:10px; }
  :lang(en) .floating-progress { padding-right:8px; gap:3px; }
  :lang(en) .share-button { padding-inline:11px; gap:6px; }
}
.language-button::before { content:""; position:absolute; inset:-6px; border-radius:50%; }

/* Two views, one set of familiar glass controls. */
.view-tabs { display:flex; gap:3px; padding:4px; flex-shrink:0; border-radius:28px; background:#191e23c9; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 6px 24px #0002; }
.view-tabs button { min-height:36px; padding:8px 18px; border-radius:24px; font-size:12px; color:#9aa7af; white-space:nowrap; transition:background .2s,color .2s; }
.view-tabs [aria-selected="true"] { background:var(--accent); color:var(--on-accent); }
.has-story-tabs .floating-toolbar { flex-wrap:wrap; justify-content:center; width:max-content; }
.has-story-tabs .floating-toolbar .floating-filters { margin:0; }
#storyRoot { --story-columns:2; --story-gap:18px; touch-action:pan-x pan-y; overflow-anchor:none; position:fixed; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none; background-color:#090b0d; background-image:linear-gradient(#a8c4d005 1px,transparent 1px),linear-gradient(90deg,#a8c4d005 1px,transparent 1px); background-size:56px 56px; scroll-padding-top:140px; }
#storyRoot::-webkit-scrollbar { display:none; }
.story-content { position:relative; max-width:1140px; margin:auto; padding:var(--story-content-top,128px) 105px 160px 30px; }
.story-section { position:relative; padding:0 0 44px 20px; isolation:isolate; }
.story-section::before { content:""; position:absolute; left:0; top:24px; bottom:-24px; width:1px; background:linear-gradient(#9fb1bb33,#9fb1bb13); }
.story-section:last-child::before { bottom:35px; background:linear-gradient(#9fb1bb33,transparent); }
.story-year-heading { position:relative; display:flex; align-items:center; gap:12px; margin-bottom:20px; min-height:48px; }
.story-year-heading h2 { margin:0; font-size:36px; font-weight:450; font-variant-numeric:tabular-nums; letter-spacing:-1px; line-height:1.2; color:#dce4e8; }
.story-axis-dot { position:absolute; left:-23px; top:21px; width:7px; height:7px; border-radius:50%; background:var(--accent-ink); box-shadow:0 0 0 5px #090b0d; }
.story-group-count { align-self:flex-start; padding-top:7px; font-size:10px; color:#65727b; letter-spacing:1px; }
.story-same-time { margin-left:auto; color:#9aa5ac; font-size:10px; letter-spacing:.5px; }
.story-row { position:relative; display:flex; align-items:flex-start; gap:var(--story-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 1px 12px; scroll-padding:1px; -webkit-overflow-scrolling:touch; }
.story-row::-webkit-scrollbar { display:none; }
.story-row:focus-visible { outline-offset:3px; border-radius:4px; }
.story-card { flex:0 0 calc((100% - var(--story-gap) * (var(--story-columns) - 1)) / var(--story-columns)); min-width:0; scroll-snap-align:start; transition:opacity .2s; }
.story-poster { position:relative; display:block; width:100%; padding:0; aspect-ratio:2/3; border-radius:5px; overflow:hidden; background:#14191d; box-shadow:0 6px 22px #0004; transition:transform .18s,box-shadow .2s; }
.story-poster>img { display:block; width:100%; height:100%; object-fit:cover; }
.story-poster:active { transform:scale(.978); }
.story-watch { position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; min-width:32px; height:30px; padding:0 9px; color:#f1f4f6; background:#10171bb8; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:0 4px 0 8px; font-size:18px; font-weight:400; }
.is-watched .story-watch { color:var(--on-accent); background:var(--accent); font-size:10px; gap:3px; }
.story-card h3 { margin:12px 0 5px; font-size:13px; font-weight:500; line-height:1.55; color:#dee4e8; min-height:20px; overflow-wrap:anywhere; }
.story-date { margin:0 0 9px; color:#a0adb5; font-size:10px; line-height:1.6; min-height:32px; }
.story-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:#9eaab2; font-size:10px; font-variant-numeric:tabular-nums; }
.story-douban { display:inline-flex; align-items:center; gap:4px; }
.story-douban img { width:12px; height:12px; display:block; }
.story-gross { margin:7px 0 6px; color:#697984; font-size:10px; }
.story-more { display:block; width:100%; text-align:left; min-height:40px; padding:8px 0; font-size:10px; color:#a7b5bd; }
.story-more[aria-expanded="true"] { color:var(--accent-ink); }
.story-selected .story-poster { box-shadow:0 0 0 1px var(--accent-ink); }
.story-continuation { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; margin:6px 0 0; padding:10px 0; border-top:1px solid #ffffff0b; color:#a5b2ba; font-size:11px; text-align:left; }
.story-continuation small { margin-left:auto; color:#72818b; white-space:nowrap; font-size:9px; }
.continuation-line { color:var(--accent-ink); }
.story-notes { padding:20px 22px; margin:8px 0 12px; background:#151b20b8; border-radius:8px; animation:story-open .25s ease both; }
.story-note-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.story-note-title h3 { margin:0; font-size:14px; font-weight:500; color:#dbe4e8; }
.story-note-close { align-self:flex-start; padding:0; flex-shrink:0; width:32px; height:32px; color:#8ea0ab; font-size:22px; border-radius:50%; background:#ffffff06; }
.story-note-content { font-size:11px; color:#9eafb9; line-height:1.9; }
.story-basis { display:inline-block; font-size:10px; color:#a7b7c0; padding:2px 0; }
.basis-fan_inferred,.basis-unresolved { color:#d1b78a; }
.story-evidence { margin:10px 0 20px; }
.story-evidence-language { font-size:10px; color:#6f8491; }
.story-detail-heading { margin:20px 0 12px; color:#dde5e9; font-size:11px; font-weight:500; letter-spacing:.5px; }
.story-segments { list-style:none; margin:0; padding:0 0 0 14px; }
.story-segments li { position:relative; margin:0; padding:0 0 18px 16px; border-left:1px solid #7286933d; }
.story-segments li::before { content:""; position:absolute; top:9px; left:-3px; width:5px; height:5px; border-radius:50%; background:#b0bec7; }
.story-segments li:last-child { padding-bottom:0; border-color:transparent; }
.story-segments p { margin:2px 0 0; }
.segment-year { font-variant-numeric:tabular-nums; color:#e1e9ed; }
.segment-time_loop::before { box-shadow:0 0 0 3px #f47c8333; background:var(--accent-ink)!important; }
.story-relation { display:flex; width:100%; align-items:center; gap:10px; min-height:40px; text-align:left; font-size:11px; padding:6px 0; }
.story-relation>span:first-child { color:#7d929f; font-size:10px; flex-shrink:0; }
.story-relation strong { font-weight:400; color:#d4dfe5; }
.relation-arrow { margin-left:auto; color:var(--accent-ink); }
.relation-note { font-size:10px; margin:0 0 12px; color:#798e9c; }
.story-evidence-more { border-top:1px solid #ffffff0b; margin-top:18px; padding-top:12px; }
.story-evidence-more summary { cursor:pointer; min-height:32px; color:#a5b7c1; }
.story-evidence-more p { margin:8px 0; }
.story-candidate { color:#d1b78a; }
.story-source { display:block; text-decoration:underline; text-underline-offset:3px; font-size:10px; padding:6px 0; color:#91a9b8; }
.story-empty { min-height:40vh; display:grid; place-content:center; color:#8b9ba5; font-size:13px; }
.story-highlight .story-poster { animation:story-highlight 1.5s ease; }
@keyframes story-highlight { 0%,60% { box-shadow:0 0 0 2px var(--accent-ink),0 0 30px #f47c8328; } }
@keyframes story-open { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  /* Reserve the language button's column only on the first row; filters span the screen. */
  .has-story-tabs .floating-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr) 36px; width:auto; left:14px; right:14px; justify-content:initial; column-gap:8px; row-gap:9px; }
  .has-story-tabs .floating-toolbar .universe-picker { justify-self:start; }
  .has-story-tabs .view-tabs { justify-self:stretch; justify-content:center; }
  .has-story-tabs .view-tabs button { flex:1; min-height:34px; font-size:11px; padding:7px 9px; }
  .has-story-tabs .floating-toolbar .floating-filters { grid-column:1 / -1; justify-self:center; padding:3px; }
  .has-story-tabs .floating-toolbar .filter-chip { min-height:30px; padding:7px 17px; font-size:10px; }
  .story-content { padding:var(--story-content-top,128px) 64px 125px 20px; }
  .story-section { padding-left:14px; padding-bottom:32px; }
  .story-year-heading { margin-bottom:14px; min-height:40px; gap:8px; }
  .story-year-heading h2 { font-size:29px; }
  .story-axis-dot { left:-17px; top:17px; }
  .story-section::before { top:21px; }
  .story-group-count { padding-top:4px; font-size:9px; }
  .story-same-time { font-size:9px; letter-spacing:0; }
  #storyRoot { --story-gap:12px; }
  .story-card h3 { font-size:12px; margin-top:10px; }
  .story-date { font-size:10px; min-height:32px; }
  .story-meta { gap:8px; font-size:10px; }
  .story-douban img { width:10px; height:10px; }
  .story-gross { font-size:10px; }
  .story-watch { height:26px; min-width:26px; padding:0 7px; }
  .is-watched .story-watch { font-size:9px; }
  .story-notes { padding:15px 13px; }
  .story-note-title h3 { font-size:12px; }
  .story-note-content { font-size:10px; }
  .story-note-close { width:28px; height:28px; }
}
@media (max-width:379px) {
  .has-story-tabs .floating-toolbar { grid-template-columns:auto minmax(0,1fr) 32px; left:10px; right:10px; column-gap:5px; }
}
@media (max-width:370px) {
  .has-story-tabs .view-tabs button { padding-inline:8px; font-size:10px; }
  .story-content { padding-left:14px; padding-right:57px; }
  .story-meta { gap:6px; font-size:8px; }
}

.story-deferred { margin-top:20px; padding-top:22px; border-top:1px solid #ffffff18; }
.story-deferred .story-year-heading { position:relative; }
.story-deferred-hint { color:#82919b; font-size:11px; line-height:1.7; margin:-2px 0 20px; }
.story-calendar-legend { margin:0 0 26px; color:#85939d; font-size:10px; line-height:1.7; }
.story-group-hint { margin:-6px 0 18px; color:#85939d; font-size:10px; line-height:1.7; }
:is([data-universe="star-wars"],[data-universe="xmen"])[data-view="story"] .year-label { white-space:pre-line; line-height:1.1; font-size:10px; letter-spacing:-.3px; }
:is([data-universe="star-wars"],[data-universe="xmen"]) .story-year-heading h2 { font-size:clamp(22px,5.6vw,32px); letter-spacing:-.6px; }
@media (max-width:760px) {
  :is([data-universe="star-wars"],[data-universe="xmen"])[data-view="story"] .year-label { font-size:8px; }
}

.story-zooming .story-row { scroll-snap-type:none; }
.story-zooming .story-poster:active { transform:none; }
@media (max-width:760px) {
  .story-compact .story-card h3 { font-size:11px; }
  .story-compact .story-meta { font-size:9px; gap:4px 6px; }
  .story-compact .story-watch { min-width:22px; height:24px; padding-inline:5px; }
  .story-compact .is-watched .story-watch { font-size:8px; }
}