: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,.year-all,.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; }
.year-all { position:fixed; z-index:25; left:24px; bottom:max(24px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; width:195px; height:52px; padding:8px 17px; color:#dce3e7; text-align:left; transition:color .2s,transform .2s; }
.year-all-icon { flex:0 0 auto; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#a7b5bd; transition:background .2s,color .2s; }
.year-all-icon svg { width:18px; height:18px; }
.year-all-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.year-all-copy > span { font-size:12px; font-weight:500; white-space:nowrap; }
.year-all small { color:#8e9ba4; font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.year-all.all-done { color:#e2e7e8; }
.year-all.all-done .year-all-icon { background:#e2e7e8; color:#1b2226; }
.year-all.all-done small { color:#b0c0c9; }
.year-all:active { transform:scale(.97); }
.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:100px 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:110px; }
.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; } .year-all:hover { color:#f0f3f5; } .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:8px; width:56px; }
  .year-tab { font-size:11px; padding-left:12px; }
  .year-tab::after { left:6px; width:4px; box-shadow:-2px -10px #404b52,-2px 10px #404b52; }
  .year-tab.active::after { width:5px; }
  .ruler-marker { left:4px; right:4px; }
  .ruler-marker::after { right:calc(100% + 5px); width:10px; }
  .year-all { left:14px; bottom:max(18px,env(safe-area-inset-bottom)); width:174px; max-width:calc(100vw - 194px); height:48px; padding:7px 13px; gap:8px; }
  .year-all-icon { width:22px; height:22px; }
  .year-all-copy > span { font-size:11px; }
  .year-all small { font-size:9px; }
  .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; }
}
@media (max-width:350px) { .year-all-icon { display:none; } .year-all-copy > span { font-size:10px; } .year-all small { font-size:8px; } }
.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; } }