:root { color-scheme: light; --ink:#28445e; --muted:#8393a2; --blue:#4a789d; --line:#e2eaf1; --paper:#f5f8fb; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:linear-gradient(180deg,#f3f8fc 0,#f8fafc 680px,#f5f8fb 100%); }
body.viewer-open { overflow:hidden; }
[hidden] { display:none !important; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #7bafd1; outline-offset:5px; }
button:disabled { opacity:.5; cursor:wait; }
button svg { width:18px; height:18px; flex-shrink:0; }
.page { max-width:1240px; margin:auto; padding:0 52px; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:27px 0 19px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; font-size:18px; font-weight:650; letter-spacing:2px; }
.brand svg { width:43px; height:36px; color:#5b85a9; }
.brand-sub { display:block; font-size:8px; font-weight:500; letter-spacing:2.1px; margin-top:5px; color:#95a5b4; }
.header-link { color:#8e9eac; font-size:12px; letter-spacing:1px; }
.header-link span { font-size:19px; margin-left:14px; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:center; padding:42px 32px 46px; min-height:392px; }
.eyebrow { font-size:10px; letter-spacing:2.5px; font-weight:500; color:#8b9fad; }
.hero .eyebrow { font-size:11px; letter-spacing:2px; color:#7490a5; }
.little-star { color:#91adc1; margin-right:8px; }
h1 { font-size:clamp(38px,4.4vw,56px); font-weight:650; line-height:1.28; letter-spacing:2px; margin:18px 0 18px; }
h1 span { color:#6b91b0; }
.hero-description { color:#788b9c; font-size:14px; line-height:1.95; margin:0; letter-spacing:1px; }
.hero-bottom { display:flex; align-items:center; gap:24px; margin-top:28px; }
.collection-link { font-size:12px; font-weight:550; display:flex; align-items:center; gap:17px; padding:11px 18px; background:#e5edf4; border-radius:8px; transition:background .2s; }
.collection-link:hover { background:#d7e6f1; }
.collection-count { color:#9aabb9; font-size:10px; letter-spacing:1px; }
.collection-count b { color:#728da3; font-weight:400; font-size:22px; font-variant-numeric:tabular-nums; margin-right:6px; }
.hero-art { position:relative; isolation:isolate; display:block; width:min(100%,350px); aspect-ratio:1; justify-self:center; }
.hero-art img { width:100%; height:100%; position:relative; z-index:2; object-fit:contain; transform:rotate(-2deg); transition:transform .4s; }
.hero-art:hover img { transform:rotate(1deg) translateY(-4px); }
.orbit { position:absolute; z-index:0; border:1px solid #d9e7f0; border-radius:50%; inset:10%; background:#eaf2f8; }
.orbit-two { inset:2%; background:transparent; border:1px dashed #dbe7ef; transform:rotate(-12deg); }
.hero-spark { position:absolute; color:#b8cedd; font-size:26px; z-index:3; }
.spark-one { left:2%; top:14%; }.spark-two { right:0; bottom:24%; font-size:17px; color:#dfc4bc; }
.hero-sticker { display:flex; align-items:center; gap:9px; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%) rotate(-3deg); width:max-content; z-index:3; border:1px solid #efe4df; background:#fffaf5; padding:10px 17px; border-radius:8px; font-size:11px; color:#aa8b80; box-shadow:0 4px 10px #a68d7910; }
.sticker-dot { width:5px; height:5px; background:#dba59a; border-radius:50%; }
.collection { scroll-margin-top:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:6px 0 25px; }
h2 { margin:9px 0 0; font-size:22px; font-weight:550; letter-spacing:1px; }
.quiet-note { font-size:11px; color:#97a6b4; margin-bottom:3px; }
.collection-toolbar { display:flex; align-items:center; gap:15px; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; flex-wrap:wrap; }
.filters { display:flex; gap:5px; flex-wrap:wrap; }
.filter { display:flex; gap:10px; align-items:center; border:0; background:transparent; color:#73879a; font-size:12px; padding:9px 14px; border-radius:8px; min-height:36px; }
.filter span { font-size:10px; opacity:.7; font-variant-numeric:tabular-nums; }
.filter:hover { background:#eaf0f5; }
.filter.is-active { background:#486f90; color:#fff; }
.global-actions { display:flex; gap:18px; }
.text-button { font-size:11px; color:#748d9f; background:transparent; border:0; min-height:36px; padding:4px 0; }
.text-button:hover { color:#28445e; }
.view-options { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:17px 0; font-size:10px; color:#98a7b3; }
.background-options { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.options-label { margin-right:4px; }
.background-options button { display:flex; align-items:center; gap:5px; background:transparent; color:#8d9ba8; border:1px solid transparent; border-radius:6px; font-size:10px; padding:5px 7px; min-height:30px; }
.background-options button[aria-pressed="true"] { color:#486f90; border-color:#dae5ee; background:#eff4f8; }
.swatch { display:block; width:10px; height:10px; border-radius:3px; border:1px solid #d3dde5; }
.swatch.light { background:#fff; }.swatch.dark { background:#344657; border-color:#344657; }.swatch.checker { background:repeating-conic-gradient(#fff 0% 25%,#cad5df 0% 50%) 0 / 6px 6px; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
/* CF 版：卡片整体小一圈（鹿鹿 2026-09-28：所有卡片都太大）——宽屏一行四张，窄一点三张，平板和手机两张 */
@media (max-width:1180px) { .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.animation-card { min-width:0; background:#fff; border:1px solid #e5ecf2; border-radius:20px; overflow:hidden; box-shadow:0 3px 10px #35506e03; transition:border-color .22s,box-shadow .22s,transform .22s; scroll-margin-top:30px; }
.animation-card:hover { transform:translateY(-3px); border-color:#cbdde9; box-shadow:0 12px 28px #35506e08; }
.card-media { position:relative; aspect-ratio:1; background:#fff; overflow:hidden; }
.open-card { position:absolute; inset:0; width:100%; height:100%; padding:0; background:transparent; border:0; color:inherit; }
.open-card video { display:block; width:100%; height:100%; object-fit:contain; }
.card-index { position:absolute; z-index:2; top:17px; left:17px; font-size:10px; color:#a5b2bd; letter-spacing:1px; pointer-events:none; }
.new-label { position:absolute; right:16px; top:14px; border:1px solid #f0e6e0; border-radius:5px; background:#fff8f1; color:#bb9a89; font-size:9px; letter-spacing:1px; padding:5px 8px; pointer-events:none; }
.expand-hint { display:flex; gap:6px; align-items:center; position:absolute; bottom:15px; right:16px; color:#69869c; border:1px solid #e5edf3; background:#ffffffe6; padding:6px 8px; border-radius:7px; font-size:10px; opacity:0; transform:translateY(3px); transition:opacity .2s,transform .2s; }
.open-card:hover .expand-hint,.open-card:focus-visible .expand-hint { opacity:1; transform:none; }
.expand-hint svg { width:13px; height:13px; }
.media-error { position:absolute; bottom:16px; left:16px; color:#ad6e6e; background:#fff5f2ed; border-radius:6px; font-size:11px; padding:7px 10px; pointer-events:none; }
.card-progress { position:absolute; bottom:0; height:2px; width:100%; background:transparent; overflow:hidden; pointer-events:none; }
.card-progress span { display:block; height:100%; width:100%; background:#c9dbe8; transform:scaleX(0); transform-origin:left; }
.card-copy { padding:18px 19px 18px; border-top:1px solid #f1f4f6; }
.card-title-row { display:flex; gap:10px; align-items:center; justify-content:space-between; }
h3 { margin:0; font-size:16px; font-weight:550; letter-spacing:.4px; }
.card-kind { display:inline-block; margin-top:7px; font-size:11px; color:#8093a3; letter-spacing:.6px; }
.card-caption { font-size:12px; line-height:1.8; color:#738697; margin:13px 0 17px; min-height:22px; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; }
.duration { font-size:10px; color:#a4b1bb; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.card-actions { display:flex; gap:7px; }
.icon-button { display:inline-flex; gap:4px; align-items:center; justify-content:center; border:1px solid #e6edf3; border-radius:7px; min-width:32px; height:30px; background:#f9fbfd; color:#7a94a8; padding:5px 7px; }
.icon-button:hover { background:#eaf2f7; color:#3d6689; }
.icon-button svg { width:13px; height:13px; }
.collection-end { display:flex; flex-direction:column; align-items:center; padding:55px 10px 43px; text-align:center; }
.collection-end>span:first-child { font-size:16px; color:#bfd0dd; }
.collection-end p { font-size:13px; color:#8da2b3; letter-spacing:2px; margin:15px 0 8px; }
.end-note { color:#adb8c1; font-size:10px; }
.site-footer { padding:23px 0 28px; border-top:1px solid var(--line); display:flex; gap:18px; align-items:center; justify-content:space-between; color:#a5b1bc; font-size:10px; line-height:1.8; }
.site-footer>span { flex-shrink:0; }
.site-footer p { margin:0; text-align:center; font-size:9px; }
dialog { padding:0; border:1px solid #dce7ee; border-radius:22px; background:#fff; color:var(--ink); width:min(1050px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; box-shadow:0 24px 100px #102c4340; }
dialog::backdrop { background:#1d334e6b; backdrop-filter:blur(7px); }
.viewer-shell { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); position:relative; }
.close-button { position:absolute; right:15px; top:15px; z-index:5; border:1px solid #e5eaf0; background:#fffffff0; color:#708ca2; width:34px; height:34px; border-radius:50%; line-height:1; font-size:25px; font-weight:300; }
.viewer-media { position:relative; aspect-ratio:1; background:#fff; display:flex; align-items:center; justify-content:center; align-self:center; }
.viewer-media video { width:100%; height:100%; display:block; object-fit:contain; }
.loading-label { position:absolute; left:0; right:0; bottom:15px; text-align:center; font-size:11px; color:#91a4b4; }
.viewer-info { padding:64px 30px 30px; border-left:1px solid #edf1f5; display:flex; flex-direction:column; justify-content:center; }
.viewer-info h2 { font-size:25px; margin-top:14px; line-height:1.5; }
.viewer-info>p { color:#8b9ba8; font-size:12px; line-height:1.9; margin:15px 0 25px; }
.viewer-controls { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.primary-button,.secondary-button { border-radius:7px; padding:8px 15px; font-size:12px; min-height:36px; }
.primary-button { color:#fff; background:#4c7797; border:1px solid #4c7797; }.secondary-button { color:#758ea2; background:#f6f9fc; border:1px solid #e1e9f1; }
.speed-control { font-size:10px; color:#9aabb7; display:flex; align-items:center; gap:5px; margin-left:auto; }
.speed-control select { font-size:11px; color:#6c8499; background:#fff; border:1px solid #e1e9f1; border-radius:6px; padding:7px 3px; }
.viewer-timeline { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 10px; }
.viewer-timeline input { accent-color:#709bb9; width:100%; min-width:0; margin:0; }
.viewer-timeline output { width:100%; text-align:right; color:#9caeba; font-size:10px; font-variant-numeric:tabular-nums; }
.viewer-backgrounds { margin-top:7px; }
.viewer-links { display:flex; gap:20px; margin-top:28px; font-size:11px; color:#698da8; }
.viewer-links a:hover { text-decoration:underline; text-underline-offset:4px; }
.viewer-info .viewer-footnote { font-size:10px; color:#acb7bf; margin:23px 0 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:1500px) { .page { max-width:1380px; } .hero { padding-top:52px; padding-bottom:62px; }.hero-art { width:380px; } }
@media (max-width:980px) { .page { padding:0 30px; }.hero { padding:30px 10px 40px; gap:12px; }.hero-art { width:300px; }.gallery { gap:18px; }.card-copy { padding:15px; }h3 { font-size:14px; }.card-caption { min-height:40px; }.global-actions { gap:12px; } }
@media (max-width:760px) { .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.page { padding:0 22px; }.hero { gap:0; }.hero-art { width:260px; }h1 { font-size:38px; }.hero-bottom { gap:12px; }.collection-count { font-size:9px; }.collection-count b { font-size:18px; }.viewer-shell { grid-template-columns:1fr; }.viewer-media { max-height:56dvh; aspect-ratio:auto; height:min(calc(100vw - 48px),56dvh); }.viewer-info { padding:23px; border-left:0; border-top:1px solid #edf1f5; }.viewer-info h2 { font-size:21px; }.viewer-info>p { margin:10px 0 18px; }.viewer-timeline { margin-top:14px; }.viewer-links { margin-top:15px; }.viewer-info .viewer-footnote { display:none; }.viewer-controls { gap:10px; }.site-footer { flex-wrap:wrap; }.site-footer p { order:3; width:100%; text-align:left; }.expand-hint { opacity:1; transform:none; } }
@media (max-width:540px) { .page { padding:0 20px; }.site-header { padding:22px 0 17px; }.brand { font-size:16px; }.brand svg { width:36px; }.header-link { font-size:10px; letter-spacing:0; }.header-link span { margin-left:6px; }.hero { grid-template-columns:1fr; padding:31px 0 30px; text-align:center; }.hero-copy { z-index:2; }.hero .eyebrow { font-size:10px; }h1 { font-size:40px; margin:15px 0; }.hero-description { font-size:11px; line-height:1.8; }.hero-bottom { justify-content:center; margin-top:18px; gap:20px; }.hero-art { width:230px; margin:17px auto 22px; }.hero-sticker { font-size:10px; padding:8px 12px; }.hero-spark { font-size:21px; }.section-heading { margin:5px 0 20px; }h2 { font-size:18px; }.quiet-note { font-size:9px; max-width:80px; text-align:right; line-height:1.8; }.collection-toolbar { gap:9px; padding-bottom:12px; }.filters { gap:3px; width:100%; justify-content:space-between; }.filter { font-size:11px; padding:8px 9px; gap:6px; }.global-actions { margin-left:auto; gap:20px; }.text-button { min-height:30px; }.view-options { margin:10px 0 14px; }.background-options { gap:0; }.options-label { display:none; }.gallery { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }.animation-card { border-radius:16px; }.card-copy { padding:12px 12px 13px; }h3 { font-size:14px; line-height:1.5; }.card-caption { font-size:11px; line-height:1.7; min-height:0; margin:8px 0 10px; }.card-kind { font-size:9px; margin-top:4px; letter-spacing:.3px; }.card-bottom { flex-wrap:wrap; gap:6px; }.icon-button { height:32px; min-width:32px; padding:4px 7px; }.duration { font-size:10px; }.card-index { top:11px; left:12px; }.new-label { top:9px; right:10px; padding:4px 6px; }.collection-end { padding:42px 0 35px; }dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:16px; }.viewer-media { height:min(calc(100vw - 24px),48dvh); }.viewer-info { padding:20px; }.viewer-info>p { font-size:11px; }.viewer-controls button,.speed-control select { min-height:40px; }.viewer-backgrounds button { min-height:36px; }.site-footer { gap:8px; padding-bottom:20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }