:root { color-scheme: dark; --ink: #f0edf6; --muted: #aaa6b8; --paper: #11111c; --paper-rgb: 17, 17, 28; --glass: rgba(23, 22, 36, .55); --glass-strong: rgba(28, 26, 42, .78); --line: rgba(235, 226, 255, .12); --violet: #aaa6e6; --violet-deep: #cbc6f5; --rose: #e1a6b8; --peach: #efc8b5; --shadow: 0 22px 70px rgba(0, 0, 0, .3); --radius: 28px; --serif: "Noto Serif SC", "Songti SC", STSong, ui-serif, serif; --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --cute: "LXGW WenKai", "霞鹜文楷", "STKaiti", KaiTi, "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; position: relative; isolation: isolate; overflow-x: hidden; color: var(--ink); background: var(--paper); font: 15px/1.75 var(--sans); min-height: 100vh; transition: background-color .35s, color .35s; } /* 全屏固定背景图：由注入，或回退到默认图 */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background-image: var(--page-bg, url('../images/backgrounds/bg-01.jpg')); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; transform: scale(1.025); animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1) both; will-change: transform, filter; } /* 暗角+遮罩，保证文字可读性的同时让背景高透明度可见 */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 15% 10%, rgba(17, 17, 28, .50), transparent 45%), radial-gradient(circle at 85% 90%, rgba(17, 17, 28, .62), transparent 52%), linear-gradient(rgba(12, 11, 24, .28), rgba(12, 11, 24, .48)); } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } img { max-width: 100%; display: block; } ::selection { color: white; background: var(--violet); } .glass-card, .glass-bar { background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); } .eyebrow { margin: 0 0 6px; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .muted { color: var(--muted); } .site-header { position: fixed; top: 20px; left: 50%; z-index: 80; transform: translateX(-50%); width: min(1180px, calc(100% - 36px)); height: 70px; padding: 0 18px 0 14px; display: flex; align-items: center; border-radius: 22px; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .25s ease; will-change: transform, opacity; } .site-header.is-hidden { transform: translate(-50%, calc(-100% - 30px)); opacity: 0; pointer-events: none; } .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; line-height: 1.15; } .brand-mark { width: 43px; height: 43px; border-radius: 15px; display: grid; place-items: center; flex: 0 0 auto; color: white; font: 700 24px var(--serif); background: linear-gradient(145deg, var(--rose), var(--violet)); box-shadow: 0 8px 22px rgba(119,117,173,.3), inset 0 1px rgba(255,255,255,.4); } .brand b { display: block; font: 700 18px var(--serif); letter-spacing: .08em; } .brand small { color: var(--muted); font-size: 8px; letter-spacing: .16em; } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav a { position: relative; padding: 10px 13px; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .2s, transform .2s; } .main-nav a:hover, .main-nav a.active { color: var(--ink); transform: translateY(-1px); } .main-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--rose); } .nav-toggle { border: 0; background: transparent; color: var(--ink); cursor: pointer; } .nav-toggle { display: none; font-size: 20px; } .site-main { position: relative; z-index: 2; min-height: 75vh; } .hero { position: relative; min-height: 780px; max-height: 920px; height: 95vh; overflow: hidden; display: flex; align-items: center; padding: 120px max(7vw, calc((100vw - 1180px)/2)); background: var(--hero) center / cover no-repeat; } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, var(--paper)); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,16,34,.52), rgba(24,21,47,.1) 60%, rgba(13,12,29,.22)), linear-gradient(0deg, rgba(12,11,26,.34), transparent 60%); } body.page-home::before { animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1), backdrop-pan 26s ease-in-out 1.4s infinite alternate; } body.page-home .hero { background: transparent; } body.page-home .hero::after { height: 34%; background: linear-gradient(transparent, rgba(11,10,23,.18), transparent); } body.page-home .hero-overlay { background: linear-gradient(90deg, rgba(17,16,34,.48), rgba(24,21,47,.08) 62%, rgba(13,12,29,.16)); -webkit-mask-image: linear-gradient(#000 0 72%, transparent 100%); mask-image: linear-gradient(#000 0 72%, transparent 100%); } .hero-copy { position: relative; z-index: 2; width: min(570px, 54vw); padding: 46px 50px; border-radius: 34px; color: var(--ink); } .hero-copy h1 { margin: 8px 0 18px; font: 600 clamp(42px, 5vw, 70px)/1.14 var(--serif); letter-spacing: .03em; } .hero-copy h1 em { color: #c8c2ff; font-style: normal; text-shadow: 0 3px rgba(0,0,0,.3); } .hero-copy > p:not(.eyebrow) { max-width: 430px; color: #c3bfce; font-size: 16px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .button { border: 1px solid transparent; border-radius: 15px; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-weight: 700; font-size: 13px; transition: transform .2s, box-shadow .2s, background .2s; } .button:hover { transform: translateY(-2px); } .button.primary { color: white; background: linear-gradient(135deg, #706ca8, #8b739c); box-shadow: 0 10px 24px rgba(70,65,118,.38); } .button.ghost { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.055); } .button.full { width: 100%; } .hero-note { margin-top: 24px; color: var(--muted); font-size: 11px; } .pulse-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: #89a77f; box-shadow: 0 0 0 5px rgba(137,167,127,.16); animation: pulse 2s infinite; } .moon-card { position: absolute; right: max(6vw, calc((100vw - 1180px)/2)); bottom: 130px; z-index: 3; width: 88px; padding: 13px; border-radius: 24px; color: var(--ink); text-align: center; } .moon-card span { display: block; font: 600 29px var(--serif); } .moon-card small { letter-spacing: .18em; font-size: 9px; } .bento-hero { min-height: 860px; height: auto; max-height: none; padding: 110px 20px 40px; display: block; overflow: visible; } .bento-wrap { position: relative; z-index: 3; width: min(1180px, 100%); margin: auto; } .home-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 12px; } .bento-card { position: relative; min-width: 0; padding: 24px; grid-column: var(--x) / span var(--w); grid-row: var(--y) / span var(--h); border-radius: 28px; overflow: hidden; container-type: inline-size; font-family: var(--cute); transition: border-color .35s, box-shadow .35s, outline-color .25s, scale .35s; } .bento-card h1, .bento-card h2, .bento-card blockquote, .bento-card strong { font-family: var(--cute); } .welcome-card.hero-copy { width: auto; padding: clamp(30px, 5cqi, 50px); display: flex; flex-direction: column; justify-content: center; } .welcome-card h1 { margin: 5px 0 14px; font-size: clamp(38px, 9cqi, 72px); line-height: 1.12; } .welcome-card h1 em { color: #c8c2ff; font-style: normal; } .welcome-card > p:not(.eyebrow) { max-width: 92%; font-size: clamp(13px, 2.5cqi, 17px); } .welcome-card .hero-actions { margin-top: clamp(16px, 4cqi, 27px); } .welcome-card .hero-note { margin-top: clamp(15px, 3cqi, 24px); } .music-card { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 19px 22px; } .music-toggle { width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; color: white; background: radial-gradient(circle at 35% 30%, #d8a9bc, #7772ad 58%, #35324f); box-shadow: 0 12px 30px rgba(0,0,0,.25); cursor: pointer; transition: transform .3s, box-shadow .3s; } .music-toggle span { display: block; translate: 2px 0; font-size: 18px; }.music-toggle.playing span { translate: 0; }.music-toggle:disabled { cursor: not-allowed; opacity: .48; } .music-toggle.playing { box-shadow: 0 0 0 7px rgba(170,166,230,.1), 0 12px 30px rgba(0,0,0,.28); animation: music-pulse 1.8s ease-in-out infinite alternate; } .music-copy { min-width: 0; }.music-copy .eyebrow { margin: 0; }.music-copy h2 { margin: 0; overflow: hidden; font-size: clamp(16px, 5cqi, 23px); text-overflow: ellipsis; white-space: nowrap; }.music-copy small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .music-control-row { height: 17px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }.music-progress { --fill:0%; width:auto;height:13px;margin:0 4px 0 0;flex:1;appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer }.music-progress::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--rose) 0,var(--violet) var(--fill),rgba(255,255,255,.13) var(--fill));box-shadow:0 0 8px rgba(170,166,230,.2)}.music-progress::-moz-range-track{height:3px;border:0;border-radius:99px;background:linear-gradient(90deg,var(--rose) 0,var(--violet) var(--fill),rgba(255,255,255,.13) var(--fill))}.music-progress::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;-webkit-appearance:none;border:2px solid #f4f0ff;border-radius:50%;background:var(--violet);box-shadow:0 2px 8px rgba(0,0,0,.35)}.music-progress::-moz-range-thumb{width:9px;height:9px;border:2px solid #f4f0ff;border-radius:50%;background:var(--violet)}.music-progress:disabled { cursor: default; opacity:.45 }.music-control-row time, .music-control-row > span { color: var(--muted); font-size: 8px; }.music-status { margin-top: 1px; font-size: 8px; }.music-card[data-music-state="error"] .music-status { color: #f0a8b5; } .music-card audio { display:none } .clock-card { display: flex; flex-direction: column; justify-content: center; text-align: center; }.clock-card strong { display: block; font-size: clamp(28px, 20cqi, 54px); line-height: 1; }.clock-card > span { margin-top: 7px; color: var(--violet-deep); }.clock-card small { margin-top: auto; color: var(--muted); } .moment-card-home { display: flex; flex-direction: column; justify-content: center; border-color: rgba(225,166,184,.2); background: linear-gradient(145deg, rgba(58,43,68,.68), rgba(24,23,40,.72)); }.moment-card-home::before { content: ""; position: absolute; top: -8px; left: 43%; width: 62px; height: 22px; rotate: -4deg; background: rgba(222,190,185,.24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }.card-spark { position: absolute; right: 20px; top: 16px; color: var(--rose); font-size: 24px; }.moment-card-home blockquote { margin: 10px 0 14px; font-size: clamp(15px, 6cqi, 22px); line-height: 1.65; }.moment-card-home small { margin-top: auto; color: var(--muted); } .lyrics-card { display: grid; grid-template-columns: minmax(120px,.26fr) 1fr; align-items: center; gap: 24px; padding: 22px 30px; }.lyrics-card > div { border-right: 1px solid var(--line); }.lyrics-card > div span { color: var(--rose); font-size: 24px; }.lyrics-card blockquote { margin: 0; font-size: clamp(17px, 3.2cqi, 30px); line-height: 1.65; letter-spacing: .04em; }.lyrics-original, .lyrics-translation { display: block; animation: lyric-line-in .55s ease both; }.lyrics-translation { margin-top: 3px; color: var(--muted); font-size: .48em; letter-spacing: .02em; } .quick-card { display: flex; flex-direction: column; justify-content: center; }.quick-card > div { display: grid; gap: 5px; }.quick-card a { padding: 7px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); font-size: clamp(12px, 4cqi, 16px); }.quick-card a:last-child { border: 0; }.quick-card a span { color: var(--violet); } .content-section, .page-intro, .timeline, .article-shell, .about-layout, .gallery-grid, .download-grid, .moments-stream, .support-page, .moment-teaser { width: min(1120px, calc(100% - 40px)); margin-left: auto; margin-right: auto; } .content-section { position: relative; z-index: 4; padding: 42px 0 90px; } .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; } .section-heading h2, .page-intro h1 { margin: 0; font: 600 34px var(--serif); } .section-heading > a { color: var(--muted); font-size: 12px; font-weight: 700; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .post-card { border-radius: var(--radius); overflow: hidden; transition: translate .35s, box-shadow .35s; } .post-card:hover { translate: 0 -7px; box-shadow: 0 28px 70px rgba(0,0,0,.3); } .post-cover { position: relative; display: block; height: 215px; overflow: hidden; background: linear-gradient(135deg, #d8c5d4, #8e8bb4); } .post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .post-card:hover .post-cover img { transform: scale(1.045); } .post-date { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border-radius: 10px; color: var(--ink); background: rgba(20,19,32,.72); backdrop-filter: blur(12px); font: 700 11px var(--serif); } .post-body { padding: 23px 24px 24px; } .tag-row { display: flex; flex-wrap: wrap; gap: 7px; min-height: 19px; } .tag-row span { color: var(--violet); font-size: 10px; font-weight: 700; } .post-body h3 { margin: 8px 0 10px; font: 600 20px/1.45 var(--serif); } .post-body h3 a { transition: color .2s; } .post-body h3 a:hover { color: var(--violet); } .post-body > p { min-height: 50px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.8; } .text-link { color: var(--violet-deep); font-size: 11px; font-weight: 800; } .text-link span { margin-left: 5px; transition: margin .2s; } .text-link:hover span { margin-left: 9px; } .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 38px; } .pagination a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; } .pagination a.active { color: white; background: var(--violet); } .moment-teaser { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-bottom: 28px; padding: 26px 30px; border-color: rgba(225,166,184,.2); border-radius: 15px 22px 17px 20px; background: linear-gradient(150deg, rgba(56,42,67,.76), rgba(25,24,41,.86)); rotate: -.35deg; } .moment-teaser .moment-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: white; background: linear-gradient(135deg, var(--rose), var(--violet)); } .moment-teaser p { margin: 0; } .moment-teaser > a { color: var(--violet); font-size: 12px; font-weight: 700; } .page-intro { padding: 165px 0 60px; text-align: center; } .page-intro h1 { font-size: clamp(42px, 6vw, 66px); } .page-intro > p:last-child { color: var(--muted); } .timeline { padding-bottom: 110px; } .timeline-year { display: grid; grid-template-columns: 120px 1fr; gap: 36px; } .year-badge { position: sticky; top: 118px; align-self: start; text-align: right; } .year-badge strong { display: block; color: var(--violet); font: 600 43px var(--serif); } .year-badge small { color: var(--muted); letter-spacing: .22em; } .year-stream { position: relative; padding: 4px 0 70px 34px; } .year-stream::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--rose), rgba(119,117,173,.18)); transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.16,1,.3,1) .15s; } .timeline-year.visible .year-stream::before { transform: scaleY(1); } .month-group { position: relative; margin-bottom: 26px; } .month-group::before { content: ""; position: absolute; left: -39px; top: 12px; width: 9px; height: 9px; border: 4px solid var(--paper); border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 1px rgba(119,117,173,.28); } .month-label { margin: 0 0 9px 5px; color: var(--violet); font: 700 21px var(--serif); } .month-label small { margin-left: 3px; font: 10px var(--sans); } .month-items { border-radius: 22px; padding: 4px 20px; } .archive-item { display: grid; grid-template-columns: 45px 1fr auto; gap: 15px; align-items: center; padding: 17px 4px; border-bottom: 1px solid var(--line); } .archive-item:last-child { border: 0; } .archive-item time { color: var(--rose); font: 700 18px var(--serif); } .archive-item span b { display: block; font-family: var(--serif); } .archive-item span small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; } .archive-item i { color: var(--violet); font-style: normal; transition: transform .2s; } .archive-item:hover i { transform: translateX(4px); } .article-shell { padding: 160px 0 100px; } .article-hero { max-width: 800px; margin: 0 auto 38px; text-align: center; } .back-link { color: var(--muted); font-size: 12px; } .article-hero .tag-row { justify-content: center; margin-top: 25px; } .article-hero h1 { margin: 12px 0 20px; font: 600 clamp(36px, 6vw, 62px)/1.3 var(--serif); } .article-meta { display: flex; justify-content: center; align-items: center; gap: 11px; color: var(--muted); font-size: 11px; } .article-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--rose); } .article-cover { height: min(58vw, 590px); margin: 0 0 35px; overflow: hidden; border-radius: 34px; box-shadow: var(--shadow); } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .article-content { max-width: 850px; margin: auto; padding: clamp(30px, 6vw, 70px); border-radius: 34px; font-size: 16px; line-height: 2; } .article-content p { margin: 0 0 1.5em; } .article-content h2, .article-content h3 { margin: 2em 0 .8em; font-family: var(--serif); line-height: 1.5; } .article-content h2 { font-size: 28px; } .article-content blockquote { position: relative; margin: 2em 0; padding: 20px 25px; border-left: 3px solid var(--rose); border-radius: 0 15px 15px 0; color: var(--muted); background: rgba(119,117,173,.07); } .article-content pre { padding: 22px; overflow: auto; border-radius: 16px; color: #eae8f4; background: #2f2e43; font-size: 13px; line-height: 1.7; } .article-content a { color: var(--violet); border-bottom: 1px dashed; } .article-content img { margin: 30px auto; border-radius: 18px; } .article-end { margin: 45px auto 0; text-align: center; color: var(--muted); } .article-end span { color: var(--rose); } .about-layout { padding: 160px 0 110px; display: grid; grid-template-columns: 370px 1fr; gap: 24px; align-items: stretch; } .about-profile { padding: 17px; border-radius: 36px; } .about-avatar { min-height: 410px; position: relative; border-radius: 25px; background-size: cover; background-position: center; overflow: hidden; } .about-avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(14,13,27,.7)); } .about-monogram { position: absolute; z-index: 1; right: 20px; bottom: 20px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: white; background: rgba(24,22,40,.38); backdrop-filter: blur(12px); font: 27px var(--serif); } .about-identity { padding: 24px 15px 12px; } .about-identity h2 { margin: 2px 0 3px; font: 600 29px var(--serif); } .about-identity > p:not(.eyebrow) { margin: 0; color: var(--muted); } .about-identity small { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); } .about-identity small i { width: 7px; height: 7px; border-radius: 50%; background: #91ad88; box-shadow: 0 0 0 5px rgba(145,173,136,.12); } .about-copy { padding: clamp(38px, 5vw, 66px); border-radius: 36px; } .about-copy h1 { margin: 7px 0 20px; font: 600 clamp(38px, 5vw, 60px) var(--serif); } .about-copy .lead { max-width: 620px; color: #c3bfce; font-size: 16px; line-height: 2; } .about-tags { margin: 27px 0 30px; display: flex; flex-wrap: wrap; gap: 9px; } .about-tags span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--violet-deep); background: rgba(170,166,230,.07); font-size: 10px; font-weight: 700; } .about-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .about-details article { min-height: 128px; padding: 22px; display: grid; grid-template-columns: 30px 1fr; gap: 12px; border: 1px solid rgba(235,226,255,.09); border-radius: 20px; background: rgba(255,255,255,.035); } .about-details article > span { color: var(--rose); font: 21px var(--serif); } .about-details b { font-family: var(--serif); } .about-details p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; word-break: break-word; } .about-copy .hero-actions { margin-top: 28px; } .gallery-grid { padding-bottom: 110px; columns: 3; column-gap: 20px; } .gallery-item { break-inside: avoid; position: relative; margin: 0 0 20px; overflow: hidden; border-radius: 24px; background: #ddd; box-shadow: var(--shadow); } .gallery-item img { width: 100%; transition: transform .6s; } .gallery-item:hover img { transform: scale(1.035); } .gallery-item figcaption { position: absolute; inset: auto 0 0; padding: 40px 18px 16px; display: flex; justify-content: space-between; color: white; background: linear-gradient(transparent, rgba(35,30,54,.75)); opacity: 0; transition: opacity .3s; } .gallery-item:hover figcaption { opacity: 1; } .gallery-item small { opacity: .75; } .download-grid { padding-bottom: 110px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .download-card { padding: 30px; border-radius: 28px; display: grid; grid-template-columns: 86px 1fr; gap: 25px; } .file-icon { width: 86px; height: 100px; display: grid; place-items: center; border-radius: 18px 18px 28px 18px; color: white; background: linear-gradient(145deg, var(--rose), var(--violet)); font-size: 12px; font-weight: 900; letter-spacing: .08em; box-shadow: inset 0 1px rgba(255,255,255,.4); } .download-card h2 { margin: 2px 0 8px; font: 600 23px var(--serif); } .download-card > div > p:not(.eyebrow) { color: var(--muted); font-size: 12px; } .download-card .button { margin-top: 8px; } .moments-stream { position: relative; max-width: 1000px; padding: 10px 10px 120px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 38px 30px; } .moments-stream::before { display: none; } .moment-card { position: relative; min-height: 190px; margin: 0; padding: 38px 31px 29px; overflow: visible; border-color: rgba(225,166,184,.2); border-radius: 11px 19px 13px 17px; background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(214,196,231,.045) 30px 31px), linear-gradient(155deg, rgba(57,46,72,.94), rgba(27,26,44,.96)); box-shadow: 0 24px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); rotate: var(--note-angle, 0deg); translate: var(--note-shift, 0) 0; transform-origin: center 8%; cursor: zoom-in; transition: rotate .45s cubic-bezier(.16,1,.3,1), translate .45s, border-color .35s, box-shadow .35s, scale .35s; } .moment-card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 78px; height: 28px; translate: -50% 0; rotate: var(--tape-angle, -2deg); background: linear-gradient(90deg, rgba(218,184,181,.23), rgba(229,203,192,.42), rgba(218,184,181,.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .moment-inner header { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; } .moment-inner header span { padding: 2px 8px; color: var(--violet-deep); border-radius: 99px; background: rgba(170,166,230,.11); font-weight: 700; } .moment-inner > p { margin: 17px 0 0; font: 500 16px/2 var(--cute); letter-spacing: .035em; } .moment-inner img { width: 100%; height: 190px; margin-top: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; object-fit: cover; rotate: .5deg; } .moment-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; } .moment-dialog { width: min(760px, calc(100% - 28px)); max-height: 88vh; padding: 0; overflow: visible; border: 1px solid rgba(203,198,245,.22); border-radius: 25px; color: var(--ink); background: rgba(24,23,40,.94); box-shadow: 0 35px 110px rgba(0,0,0,.6); backdrop-filter: blur(25px); } .moment-dialog::backdrop { background: rgba(7,7,14,.72); backdrop-filter: blur(8px); } .moment-dialog[open] { animation: dialog-arrive .35s cubic-bezier(.16,1,.3,1) both; } .moment-dialog > article { max-height: 88vh; padding: clamp(28px,5vw,48px); overflow: auto; }.moment-dialog header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.moment-dialog header span { color: var(--violet-deep); }.moment-dialog p { margin: 22px 0 0; white-space: pre-wrap; font: 500 clamp(17px,3vw,22px)/1.9 var(--cute); }.moment-dialog img { width: 100%; max-height: 60vh; margin-top: 25px; border-radius: 17px; object-fit: contain; background: rgba(0,0,0,.18); } .moment-dialog-close { position: absolute; right: -12px; top: -12px; z-index: 2; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: #5d526f; box-shadow: 0 8px 22px rgba(0,0,0,.3); cursor: pointer; font-size: 22px; } .site-runtime { width: auto; margin: 0; padding: 25px 29px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-radius: 25px; font-family: var(--cute); } .runtime-orbit { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(170,166,230,.25); border-radius: 50%; color: var(--peach); background: radial-gradient(circle, rgba(170,166,230,.18), transparent 68%); box-shadow: 0 0 28px rgba(170,166,230,.15); font-size: 25px; animation: runtime-float 2.6s ease-in-out infinite alternate; } .site-runtime h2 { margin: 0; font-size: 18px; }.site-runtime strong { color: var(--violet-deep); font-size: clamp(15px, 3vw, 22px); letter-spacing: .04em; }.site-runtime > small { max-width: 150px; color: var(--muted); text-align: right; } .support-page { max-width: 620px; margin-top: 170px; margin-bottom: 110px; padding: 55px; border-radius: 38px; text-align: center; } .support-heart { width: 80px; height: 80px; margin: -95px auto 30px; display: grid; place-items: center; border: 8px solid var(--paper); border-radius: 50%; color: white; background: linear-gradient(145deg, var(--rose), var(--violet)); font-size: 38px; } .support-page h1 { margin: 8px 0 15px; font: 600 38px var(--serif); } .support-page > p:not(.eyebrow) { color: var(--muted); } .qr-image { width: 230px; margin: 25px auto; padding: 10px; border-radius: 22px; background: white; } .support-fab { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 11px 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: white; background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 12px 30px rgba(84,78,132,.3); font-size: 12px; } .empty-state, .not-found { padding: 60px 30px; border-radius: var(--radius); text-align: center; } .empty-state > span { color: var(--violet); font-size: 36px; } .not-found { width: min(620px, calc(100% - 40px)); margin: 170px auto 100px; } .not-found > div { color: var(--violet); font: 700 100px/1 var(--serif); opacity: .18; } .not-found h1 { font: 600 36px var(--serif); } .site-footer { position: relative; z-index: 2; padding: 0 20px 45px; color: var(--muted); text-align: center; font-size: 11px; } .site-footer p { margin: 5px; } .site-footer a:hover { color: var(--violet); } .footer-links { display: flex; justify-content: center; gap: 13px; }.footer-links a { color: var(--violet-deep); } .footer-line { display: flex; align-items: center; gap: 14px; max-width: 380px; margin: 0 auto 22px; color: var(--rose); } .footer-line::before, .footer-line::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); } .footer-line::after { transform: rotate(180deg); } .ambient { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; } .ambient i { position: absolute; top: -20px; width: 10px; height: 7px; border-radius: 80% 10% 80% 20%; background: rgba(227,171,190,.65); filter: blur(.2px); animation: petal 13s linear infinite; } .ambient i:nth-child(1) { left: 8%; animation-delay: -3s; }.ambient i:nth-child(2) { left: 26%; animation-delay: -8s; animation-duration: 16s; }.ambient i:nth-child(3) { left: 44%; animation-delay: -1s; }.ambient i:nth-child(4) { left: 63%; animation-delay: -10s; animation-duration: 18s; }.ambient i:nth-child(5) { left: 78%; animation-delay: -5s; }.ambient i:nth-child(6) { left: 93%; animation-delay: -12s; animation-duration: 20s; } .scene-motion { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; will-change: translate; } .scene-motion::before { content: ""; position: absolute; left: -30%; top: 48%; width: 160%; height: 25%; background: linear-gradient(90deg, transparent, rgba(153,147,222,.045), rgba(240,184,172,.07), transparent); filter: blur(24px); animation: mist-drift 18s ease-in-out infinite alternate; } .scene-motion i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd8a6; box-shadow: 0 0 8px 2px rgba(255,190,120,.72), 0 0 22px 7px rgba(202,156,214,.18); animation: scene-light 7s ease-in-out infinite; } .scene-motion i:nth-child(1) { left: 9%; top: 29%; animation-delay: -2s; }.scene-motion i:nth-child(2) { left: 24%; top: 62%; animation-delay: -5s; animation-duration: 9s; }.scene-motion i:nth-child(3) { left: 39%; top: 18%; animation-delay: -1s; }.scene-motion i:nth-child(4) { left: 53%; top: 54%; animation-delay: -6s; animation-duration: 10s; }.scene-motion i:nth-child(5) { left: 67%; top: 34%; animation-delay: -3s; }.scene-motion i:nth-child(6) { left: 77%; top: 70%; animation-delay: -7s; animation-duration: 11s; }.scene-motion i:nth-child(7) { left: 88%; top: 24%; animation-delay: -4s; }.scene-motion i:nth-child(8) { left: 94%; top: 58%; animation-delay: -8s; animation-duration: 12s; } .page-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; gap: 14px; color: var(--muted); text-align: center; background: rgba(var(--paper-rgb), .94); backdrop-filter: blur(15px); transition: opacity .5s, visibility .5s; } .page-loader.hidden { opacity: 0; visibility: hidden; } .page-loader.leaving { opacity: 1; visibility: visible; } .page-loader p { font: 12px var(--serif); letter-spacing: .14em; } .loader-orbit { width: 64px; height: 64px; margin: auto; position: relative; display: grid; place-items: center; border: 1px solid rgba(119,117,173,.2); border-radius: 50%; } .loader-orbit::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border-top: 2px solid var(--rose); animation: spin 1.2s linear infinite; } .loader-orbit span { color: var(--violet); font: 24px var(--serif); } .scroll-progress { position: fixed; z-index: 120; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--rose), var(--violet), #8ec5d2); box-shadow: 0 0 15px rgba(170,166,230,.55); transform: scaleX(0); transform-origin: left; } .hero-copy, .moon-card { will-change: translate; } .js .reveal { --reveal-x: 0px; --reveal-y: 42px; --reveal-scale: .96; opacity: 0; filter: blur(9px); transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)); transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay, var(--delay, 0ms)), transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, var(--delay, 0ms)), filter .75s ease var(--reveal-delay, var(--delay, 0ms)); will-change: opacity, transform, filter; } .js .reveal-left { --reveal-x: -58px; --reveal-y: 14px; --reveal-scale: .98; } .js .reveal-right { --reveal-x: 58px; --reveal-y: 14px; --reveal-scale: .98; } .js .reveal-zoom { --reveal-y: 18px; --reveal-scale: .86; } .js .reveal.visible { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); } .install-page { min-height: 100vh; padding: 50px 20px; display: grid; place-items: center; background: linear-gradient(rgba(34,31,59,.38), rgba(67,52,81,.25)), url('../images/hero-anime.png') center / cover fixed; } .install-shell { width: min(680px, 100%); padding: clamp(30px, 6vw, 55px); border-radius: 34px; } .install-shell > .brand-mark { margin-bottom: 20px; } .install-shell h1 { margin: 5px 0 10px; font: 600 clamp(31px, 5vw, 46px) var(--serif); } .install-form { margin-top: 28px; } .install-checks { margin: 18px 0 4px; display: flex; flex-wrap: wrap; gap: 7px; } .install-checks span { padding: 5px 9px; border-radius: 99px; font-size: 9px; font-weight: 700; } .install-checks .ready { color: #47735f; background: rgba(105,167,137,.14); } .install-checks .missing { color: #9b4b5c; background: rgba(195,93,113,.14); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; } .form-grid label, .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; } .form-grid input, .form-grid textarea, .form-grid select, .stack-form input { width: 100%; min-height: 45px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); background: rgba(255,255,255,.055); } .form-grid input:focus, .form-grid textarea:focus, .stack-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(119,117,173,.1); } .form-grid textarea { resize: vertical; } .span-2 { grid-column: span 2; } .install-form .button { margin-top: 22px; } .notice { margin: 15px 0; padding: 12px 15px; border-radius: 13px; font-size: 12px; } .notice.error { color: #8c3f4e; background: rgba(227,139,157,.18); border: 1px solid rgba(170,72,92,.17); } .notice.success { color: #3e765f; background: rgba(116,183,146,.16); } .notice.info { color: var(--violet-deep); background: rgba(119,117,173,.1); border: 1px solid var(--line); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(137,167,127,0); } } @keyframes petal { 0% { transform: translate3d(0,-20px,0) rotate(0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translate3d(120px,105vh,0) rotate(720deg); opacity: 0; } } @keyframes backdrop-arrive { from { opacity: 0; filter: blur(10px) saturate(.72); transform: scale(1.08); } to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.025); } } @keyframes backdrop-pan { from { background-position: 48% 50%; } to { background-position: 52% 47%; } } @keyframes scene-light { 0%, 100% { opacity: .18; transform: translate3d(0,8px,0) scale(.7); } 35% { opacity: .9; } 60% { opacity: .42; transform: translate3d(16px,-16px,0) scale(1.35); } } @keyframes mist-drift { from { opacity: .28; transform: translate3d(-3%,0,0); } to { opacity: .7; transform: translate3d(3%,-8px,0); } } @keyframes music-pulse { from { transform: scale(1); } to { transform: scale(1.055) rotate(2deg); } } @keyframes lyric-line-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes runtime-float { from { transform: translateY(2px) rotate(-5deg); } to { transform: translateY(-4px) rotate(5deg); } } @keyframes card-hover-breathe { from { scale: 1.012; } to { scale: 1.027; } } @keyframes dialog-arrive { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { :is(.bento-card, .post-card, .archive-item, .gallery-item, .download-card, .moment-card, .about-notes > div, .moment-teaser, .site-runtime, .support-page):hover { z-index: 7; border-color: rgba(203,198,245,.3); box-shadow: 0 30px 75px rgba(0,0,0,.34), 0 0 34px rgba(119,117,173,.11), inset 0 1px rgba(255,255,255,.1); animation: card-hover-breathe 1.15s ease-in-out infinite alternate; } .moment-card:hover { rotate: 0deg; } } @media (max-width: 900px) { .hero.bento-hero { min-height: 0; height: auto; max-height: none; padding: 105px 14px 58px; align-items: initial; } .home-dashboard { display: flex; flex-direction: column; gap: 14px; } .bento-card { width: 100%; min-height: 180px; } .welcome-card.hero-copy { min-height: 430px; } .music-card { min-height: 160px; } .clock-card, .moment-card-home { min-height: 185px; } .lyrics-card { min-height: 165px; } .quick-card { min-height: 195px; } .main-nav { position: absolute; top: 78px; left: 0; right: 0; padding: 13px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 20px; background: var(--glass-strong); box-shadow: var(--shadow); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s; } .main-nav.open { opacity: 1; visibility: visible; transform: none; } .main-nav a { text-align: center; } .nav-toggle { display: block; } .hero { height: 850px; min-height: 760px; align-items: flex-end; padding-bottom: 120px; background-position: 65% center; } .hero-copy { width: min(580px, 100%); padding: 35px; } .moon-card { display: none; } .post-grid { grid-template-columns: repeat(2, 1fr); } .about-layout { grid-template-columns: 1fr; } .about-avatar { min-height: 460px; } .gallery-grid { columns: 2; } } @media (max-width: 620px) { .hero.bento-hero { height: auto; min-height: 0; padding: 92px 14px 52px; } .welcome-card.hero-copy { width: 100%; min-height: 410px; padding: 30px 25px; } .welcome-card h1 { font-size: clamp(38px, 13cqi, 54px); } .lyrics-card { grid-template-columns: 1fr; gap: 10px; } .lyrics-card > div { border-right: 0; border-bottom: 1px solid var(--line); } .music-card { grid-template-columns: 58px 1fr; padding: 17px; } .music-toggle { width: 54px; height: 54px; border-radius: 18px; } .site-header { top: 10px; width: calc(100% - 20px); height: 62px; border-radius: 18px; } .brand-mark { width: 38px; height: 38px; border-radius: 13px; font-size: 21px; } .brand b { font-size: 15px; }.brand small { display: none; } .hero { height: 790px; padding: 100px 15px 90px; background-position: 70% center; } .hero-copy { padding: 28px 25px; border-radius: 27px; } .hero-copy h1 { font-size: 40px; } .hero-copy > p:not(.eyebrow) { font-size: 14px; } .content-section { width: calc(100% - 28px); padding-top: 25px; } .post-grid { grid-template-columns: 1fr; } .post-cover { height: 230px; } .section-heading h2 { font-size: 29px; } .moment-teaser { grid-template-columns: auto 1fr; width: calc(100% - 28px); padding: 20px; } .moment-teaser > a { grid-column: 2; } .page-intro { width: calc(100% - 28px); padding-top: 125px; } .timeline { width: calc(100% - 28px); } .timeline-year { display: block; } .year-badge { position: static; text-align: left; margin: 0 0 15px 32px; } .year-stream { padding-left: 25px; } .month-group::before { left: -30px; } .archive-item { grid-template-columns: 38px 1fr auto; gap: 9px; } .archive-item span small { display: none; } .article-shell { width: calc(100% - 28px); padding-top: 120px; } .article-hero h1 { font-size: 36px; } .article-meta { flex-wrap: wrap; } .article-cover { border-radius: 24px; } .article-content { padding: 27px 23px; border-radius: 24px; font-size: 15px; } .about-layout { width: calc(100% - 28px); padding-top: 120px; } .about-profile { padding: 13px; border-radius: 28px; } .about-avatar { min-height: 360px; border-radius: 21px; } .about-copy { padding: 30px 24px; border-radius: 28px; } .about-details { grid-template-columns: 1fr; } .gallery-grid { width: calc(100% - 28px); columns: 1; } .gallery-item figcaption { opacity: 1; } .download-grid { width: calc(100% - 28px); grid-template-columns: 1fr; } .download-card { grid-template-columns: 66px 1fr; padding: 22px; gap: 18px; } .file-icon { width: 66px; height: 80px; } body.page-home::before { background-position: center; animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1) both; } .moments-stream { width: calc(100% - 28px); padding: 5px 6px 90px; grid-template-columns: 1fr; gap: 34px; } .moment-card { min-height: 0; padding: 34px 23px 25px; translate: 0 0; } .moment-inner header { align-items: start; flex-direction: column; } .site-runtime { padding: 22px; grid-template-columns: auto 1fr; }.site-runtime > small { grid-column: 2; max-width: none; text-align: left; } .support-page { width: calc(100% - 28px); padding: 40px 25px; } .form-grid { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } } .pay-exact{margin:8px auto 14px;padding:10px 13px;border:1px solid rgba(194,173,255,.22);border-radius:13px;color:#d9cff7!important;background:rgba(126,102,190,.1);font-size:11px;line-height:1.7}.order-receipt h2{color:#f4efff;text-shadow:0 0 28px rgba(178,147,255,.3)} .pay-qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:16px 0}.pay-qr-card{margin:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.pay-qr-card span{display:block;margin-bottom:8px;color:#ded7f4;font-size:11px}.pay-qr-card .qr-image{width:100%;max-height:220px;margin:0 auto;background:#fff}.pay-qr-card.wechat{box-shadow:inset 0 0 0 1px rgba(89,194,111,.06)}.pay-qr-card.alipay{box-shadow:inset 0 0 0 1px rgba(66,153,235,.07)} .moment-filters { width: min(900px,calc(100% - 32px)); margin: -25px auto 38px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }.moment-filters a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(17,17,28,.42); backdrop-filter: blur(14px); font-size: 10px; }.moment-filters a.active { color: white; border-color: rgba(203,198,245,.38); background: rgba(119,117,173,.35); }.moment-filters small { color: var(--rose); } .moment-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.moment-photo-grid.count-1 { grid-template-columns: 1fr; }.moment-photo-grid.count-2 { grid-template-columns: 1fr 1fr; }.moment-photo-grid img { width: 100%; height: 115px; margin: 0; object-fit: cover; border-radius: 11px; }.moment-photo-grid.count-1 img { height: 220px; } .moment-dialog-gallery { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.moment-dialog-gallery img { width: 100%; max-height: 55vh; margin: 0; object-fit: contain; border-radius: 13px; }.moment-dialog-gallery img:only-child { grid-column: 1/-1; } .comment-item.comment-reply { margin-left: 42px; border-left: 2px solid rgba(170,166,230,.35); }.comment-reply-button { margin-top: 8px; padding: 0; border: 0; color: var(--violet); background: none; cursor: pointer; font-size: 10px; }.replying-note { margin: 0; padding: 7px 10px; border-radius: 9px; color: var(--muted); background: rgba(170,166,230,.08); font-size: 10px; }.replying-note button { border: 0; color: var(--rose); background: none; cursor: pointer; } .download-card details { margin: 10px 0; color: var(--muted); font-size: 11px; }.download-card summary { color: var(--violet-deep); cursor: pointer; }.file-checksum { max-width: 100%; margin: 10px 0; display: block; overflow: hidden; color: #858197; font: 8px ui-monospace,monospace; text-overflow: ellipsis; white-space: nowrap; }.download-card .button span { opacity: .7; font-size: 9px; } .support-order-form { width: min(380px,100%); margin: 20px auto 0; display: grid; gap: 10px; }.support-order-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }.support-order-form input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.05); } /* self-hosted order and paid downloads */ .purchase-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}.purchase-inline input{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:rgba(255,255,255,.05);outline:0}.purchase-inline .button{margin:0}.order-receipt{width:min(430px,100%);margin:24px auto 0;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.035)}.order-receipt h2{margin:12px 0 5px;font:600 34px var(--serif)}.order-receipt code{display:block;margin-bottom:16px;color:var(--violet);word-break:break-all}.order-receipt .qr-image{width:min(230px,80%);max-height:270px;margin:14px auto;object-fit:contain;border-radius:18px}.status-pill{display:inline-flex;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px}.status-pill.paid{color:#afd1a5;border-color:rgba(137,167,127,.35);background:rgba(137,167,127,.08)}.status-pill.pending{color:#e9c0d0;border-color:rgba(225,166,184,.32);background:rgba(225,166,184,.07)}.proof-form{display:grid;gap:10px;margin-top:18px}.file-picker{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 10px;padding:12px;border:1px dashed rgba(170,166,230,.38);border-radius:14px;text-align:left;cursor:pointer}.file-picker>span{grid-column:1/-1;color:var(--muted);font-size:10px}.file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-picker i{padding:8px 10px;border-radius:9px;color:#fff;background:rgba(119,117,173,.75);font-size:10px;font-style:normal;text-align:center}.file-picker b{align-self:center;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.file-picker.has-file{border-color:rgba(137,167,127,.5)}.order-help{margin-top:18px!important;font-size:10px}.pricing-form{display:grid;grid-template-columns:auto 80px auto;gap:5px;align-items:center}.pricing-form input[type=number]{width:80px}.payment-table .row-actions form:first-child{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:5px}.payment-table .row-actions input{min-width:110px} .pay-steps{margin:16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pay-steps span{padding:9px 5px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:rgba(255,255,255,.025);font-size:8px}.pay-steps i{width:17px;height:17px;margin:0 auto 5px;display:grid;place-items:center;border-radius:7px;color:#fff;background:rgba(119,117,173,.55);font-size:8px;font-style:normal}.payee-line{margin-bottom:5px!important}.payment-help{margin-top:15px;padding:0 13px;border:1px solid var(--line);border-radius:14px;text-align:left;background:rgba(0,0,0,.08)}.payment-help summary{padding:12px 0;color:var(--muted);cursor:pointer;font-size:9px}.payment-help[open] summary{border-bottom:1px solid var(--line)}.payment-help .proof-form{margin:13px 0}.payment-help .button{width:100%} @media(max-width:620px){.purchase-inline{grid-template-columns:1fr}.purchase-inline .button{width:100%}.order-receipt{padding:18px}} @media(max-width:620px){.moment-photo-grid img{height:90px}.moment-photo-grid.count-1 img{height:200px}.comment-item.comment-reply{margin-left:18px}.moment-dialog-gallery{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce) { .music-toggle.playing, .runtime-orbit, :is(.bento-card, .post-card, .archive-item, .gallery-item, .download-card, .moment-card, .about-notes > div, .moment-teaser, .site-runtime, .support-page):hover { animation: none; } } /* ---- Markdown 正文渲染 ---- */ .markdown-body { line-height: 1.8; color: var(--ink); font-size: 15px; word-break: break-word; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: var(--serif); line-height: 1.4; margin: 1.4em 0 .6em; } .markdown-body h2 { font-size: 24px; padding-bottom: .3em; border-bottom: 1px solid var(--line); } .markdown-body h3 { font-size: 20px; } .markdown-body p { margin: .8em 0; } .markdown-body a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; } .markdown-body img { max-width: 100%; border-radius: 12px; margin: .6em 0; } .markdown-body blockquote { margin: 1em 0; padding: .6em 1.1em; border-left: 3px solid var(--rose); background: rgba(225,166,184,.1); border-radius: 0 12px 12px 0; color: #d2c9de; } .markdown-body code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(170,166,230,.16); padding: .15em .4em; border-radius: 6px; font-size: .88em; } .markdown-body pre { background: rgba(20,19,32,.7); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; overflow: auto; } .markdown-body pre code { background: none; padding: 0; } .markdown-body ul, .markdown-body ol { padding-left: 1.4em; margin: .8em 0; } .markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 1.6em 0; } /* ---- 评论区 ---- */ .comments { margin-top: 38px; padding: 26px; } .comments-title { font-family: var(--serif); font-size: 22px; margin: 0 0 18px; } .comments-title span { color: var(--violet); font-size: 15px; } .comment-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .comment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .comment-form textarea { min-height: 96px; resize: vertical; } .comment-actions { display: flex; align-items: center; gap: 12px; } .hp-note { font-size: 11px; color: #8a86a0; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .comment-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); } .comment-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .comment-meta b { color: #fff; font-size: 14px; } .comment-meta i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(135deg,var(--rose),var(--violet)); font: 12px var(--serif); } .comment-meta time { color: #8a86a0; font-size: 11px; } .comment-body { font-size: 14px; color: #d7d2e8; } .comment-empty { color: #8a86a0; font-size: 13px; } /* ---- 友链公开页 ---- */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; } .link-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; } .link-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(60,55,95,.4); } .link-card img { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; } .link-card b { font-family: var(--serif); font-size: 16px; } .link-card small { color: #9c98b1; font-size: 12px; } .link-card .link-url { color: var(--violet); font-size: 11px; word-break: break-all; } @media (max-width: 720px) { .editor-split.active { grid-template-columns: 1fr; } .editor-split.active .md-preview { max-height: 50vh; } .comment-row { grid-template-columns: 1fr; } .link-form { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---- 3.0 内容发现、阅读与精选体验 ---- */ .tag-row a, .post-category { color: var(--violet-deep); font-size: 10px; font-weight: 800; } .tag-row a { padding: 3px 8px; border: 1px solid rgba(170,166,230,.18); border-radius: 999px; background: rgba(170,166,230,.07); } .featured-strip { padding-top: 0; } .featured-strip .section-heading small { color: var(--muted); } .featured-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; } .featured-card { min-height: 190px; position: relative; display: flex; align-items: end; overflow: hidden; border-radius: 25px; } .featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); } .featured-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgba(14,12,28,.88)); } .featured-card span { position: relative; z-index: 1; padding: 24px; display: grid; gap: 4px; } .featured-card small { color: var(--rose); font-size: 9px; letter-spacing: .16em; } .featured-card b { font: 600 20px var(--serif); } .featured-card em { color: #bcb7ca; font-size: 11px; font-style: normal; } .featured-card:hover img { transform: scale(1.07); } .page-hero { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 155px 0 35px; text-align: center; } .page-hero h1 { margin: 5px 0 24px; font: 600 clamp(38px,6vw,62px) var(--serif); } .search-panel { max-width: 760px; margin: auto; padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border-radius: 21px; } .search-panel input { min-width: 0; padding: 12px 16px; border: 0; outline: 0; color: var(--ink); background: transparent; } .search-results { padding-top: 25px; } .article-read-progress { position: fixed; inset: 0 0 auto; z-index: 95; height: 3px; pointer-events: none; } .article-read-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--rose),var(--violet),#d9d4ff); box-shadow: 0 0 12px var(--violet); } .article-layout { display: grid; grid-template-columns: 210px minmax(0,850px); gap: 24px; align-items: start; justify-content: center; } .article-main { min-width: 0; } .article-toc { position: sticky; top: 105px; padding: 22px; border-radius: 23px; } .article-toc h2 { margin: 2px 0 15px; font: 600 18px var(--serif); } .article-toc nav { display: grid; gap: 5px; border-left: 1px solid var(--line); } .article-toc nav a, .article-toc nav span { padding: 5px 0 5px 13px; color: var(--muted); font-size: 11px; line-height: 1.5; transition: color .2s,translate .2s; } .article-toc nav a:hover { color: var(--violet-deep); translate: 3px 0; } .article-toc nav a.sub { padding-left: 24px; font-size: 10px; } .article-content { max-width: none; } .article-content h2, .article-content h3 { scroll-margin-top: 120px; } .article-content pre { position: relative; } .code-copy { position: sticky; left: 100%; top: 0; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(17,17,28,.85); cursor: pointer; } .article-content img.zoomable { cursor: zoom-in; } .image-lightbox { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; padding: 4vw; border: 0; display: grid; place-items: center; background: rgba(6,5,13,.9); backdrop-filter: blur(18px); cursor: zoom-out; animation: dialog-arrive .3s ease; } .image-lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 20px; box-shadow: var(--shadow); } .article-tools { margin-top: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; border-radius: 18px; color: var(--muted); font-size: 11px; } .article-tools button, .article-tools a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--violet-deep); background: rgba(255,255,255,.04); cursor: pointer; } .article-tools span { margin-left: auto; } .post-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .post-neighbors a { min-height: 92px; padding: 19px 21px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); backdrop-filter: blur(18px); } .post-neighbors a:last-child { text-align: right; } .post-neighbors small { color: var(--rose); font-size: 9px; } .post-neighbors b { margin-top: 5px; font: 600 14px var(--serif); } .related-posts { margin-top: 65px; } .compact-grid .post-cover { height: 150px; } .compact-grid .post-body > p { min-height: 0; } @media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr 1fr; }.featured-card:first-child { grid-column: 1/-1; } .article-layout { display: block; }.article-toc { position: relative; top: auto; margin-bottom: 16px; }.article-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) { .featured-grid { grid-template-columns: 1fr; }.featured-card:first-child { grid-column: auto; }.featured-card { min-height: 165px; } .page-hero { width: calc(100% - 28px); padding-top: 115px; }.search-panel { grid-template-columns: 1fr; }.search-panel .button { width: 100%; } .article-toc nav { grid-template-columns: 1fr; }.article-tools { align-items: stretch; flex-wrap: wrap; }.article-tools span { width: 100%; margin: 0; }.post-neighbors { grid-template-columns: 1fr; }.post-neighbors a:last-child { text-align: left; } }