:root {
  --paper: #f1f1ed;
  --white: #fff;
  --ink: #111;
  --muted: #73736f;
  --line: #171717;
  --soft-line: #c9c9c3;
  --red: #ed1c24;
  --green: #009c49;
  --blue: #4b73ff;
  --yellow: #f4d20c;
  --afeng: #fff;
  --xiaojing: #eef4ff;
  --mono: "SFMono-Regular", "Roboto Mono", "Noto Sans Mono CJK SC", Menlo, Consolas, monospace;
  --sans: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(75,115,255,.3); outline-offset: 2px; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

.page-shell { width: min(1480px, calc(100vw - 32px)); min-height: 100vh; margin: 16px auto; border: 1.5px solid var(--line); background: var(--white); box-shadow: 0 15px 45px rgba(0,0,0,.12); }
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr); align-items: stretch; min-height: 76px; border-bottom: 1.5px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 24px; color: inherit; text-decoration: none; }
.brand strong { display: block; font-size: 19px; line-height: 1.1; }
.brand small { display: block; margin-top: 5px; font: 9px/1 var(--mono); letter-spacing: .24em; color: var(--muted); }
.brand sup, .year-mark { color: var(--red); font: 700 13px/1 var(--mono); }
.brand-icon { position: relative; width: 26px; height: 26px; flex: 0 0 26px; border: 1.5px solid var(--ink); background: #be8547; border-radius: 5px; }
.brand-icon::before, .brand-icon::after { position: absolute; top: -5px; width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; background: #be8547; content: ""; }
.brand-icon::before { left: 1px; } .brand-icon::after { right: 1px; }
.brand-icon i, .brand-icon b { position: absolute; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: #111; }
.brand-icon i { left: 6px; } .brand-icon b { right: 6px; }
.memory-tabs { display: flex; align-items: stretch; justify-content: center; }
.memory-tab { position: relative; min-width: 160px; padding: 0 28px; border: 0; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.memory-tab::after { position: absolute; right: 0; bottom: -1.5px; left: 0; height: 6px; background: var(--red); transform: scaleX(0); content: ""; }
.memory-tab.active { color: var(--red); }.memory-tab.active::after { transform: scaleX(1); }
.admin-link { align-self: center; justify-self: end; margin-right: 24px; color: var(--green); font-weight: 800; text-decoration: none; }

.archive-intro { display: grid; grid-template-columns: 1.25fr auto 1fr; align-items: end; gap: 32px; padding: 62px 44px 38px; border-bottom: 1.5px solid var(--line); }
.archive-code, .section-label { margin: 0; font: 700 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.intro-title h1, .us-header h2 { margin: 10px 0 0; font-size: clamp(48px,6vw,92px); line-height: .95; font-weight: 900; }
.participant-strip { display: flex; align-items: center; gap: 10px; padding-bottom: 5px; }
.participant-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.participant-chip img { width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; object-fit: cover; }
.participant-join { font: 700 16px var(--mono); }
.stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.stat-card { min-width: 0; padding: 12px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat-label { display: block; color: var(--muted); font: 9px/1.3 var(--mono); }
.stat-value { display: block; margin-top: 7px; overflow-wrap: anywhere; font: 800 17px/1 var(--mono); }

.archive-controls { display: grid; grid-template-columns: minmax(280px,1fr) auto; align-items: end; gap: 24px; padding: 18px 44px; border-bottom: 1.5px solid var(--line); background: #fafafa; }
.field-label { display: block; margin-bottom: 8px; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.search-wrap { position: relative; max-width: 620px; }
.search-wrap > span { position: absolute; left: 13px; top: 50%; font: 20px/1 var(--mono); transform: translateY(-50%); }
.text-input { width: 100%; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); padding: 10px 12px; font-size: 16px; appearance: none; }
.search-wrap .text-input { padding-left: 42px; }
.text-input::placeholder { color: #969691; }
.segmented { display: flex; border: 1.5px solid var(--ink); background: #fff; }
.segmented-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; min-width: 82px; padding: 8px 13px; border: 0; border-right: 1px solid var(--ink); background: #fff; cursor: pointer; }
.segmented-btn:last-child { border-right: 0; }.segmented-btn.active { color: #fff; background: var(--ink); }
.segmented-btn img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

.content-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); min-width: 0; }
.month-rail { position: relative; min-width: 0; border-right: 1.5px solid var(--line); }
.rail-head, .timeline-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--ink); }
.rail-head h2 { margin: 8px 0 0; font-size: 25px; }.red-square { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--red); }
.archive-count { font: 10px/1 var(--mono); color: var(--muted); }
.month-list { display: flex; flex-direction: column; padding: 0; }
.month-chip { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; min-height: 58px; padding: 12px 24px; border: 0; border-bottom: 1px solid var(--soft-line); background: #fff; text-align: left; cursor: pointer; }
.month-chip > span:first-child { font: 700 16px/1 var(--mono); }.month-chip-count { color: var(--muted); font: 11px/1 var(--mono); }
.month-chip:hover { background: #f5f5f2; }.month-chip.active { color: #fff; background: var(--red); }.month-chip.active .month-chip-count { color: #fff; }
.month-chip:disabled { opacity: .35; cursor: default; }
.rail-footer { position: sticky; top: 76px; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--ink); font: 9px/1 var(--mono); letter-spacing: .08em; }
.easter-stamp { display: flex; gap: 3px; filter: grayscale(.2); }
.easter-stamp i, .easter-stamp b { display: block; position: relative; width: 18px; height: 18px; border: 1px solid #111; }
.easter-stamp i { border-radius: 5px; background: #bd8447; }.easter-stamp b { border-radius: 50% 50% 5px 5px; background: #fff; }
.easter-stamp i::before { content:""; position:absolute; inset:5px; border-bottom:2px solid #111; border-radius:50%; }
.easter-stamp b::before,.easter-stamp b::after { content:""; position:absolute; top:-6px; width:5px; height:9px; border:1px solid #111; background:#fff; }
.easter-stamp b::before { left:2px; }.easter-stamp b::after { right:2px; }

.timeline-panel { min-width: 0; }
.timeline-toolbar { position: sticky; top: 76px; z-index: 20; align-items: center; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.toolbar-meta { margin: 7px 0 0; color: var(--muted); font: 11px/1.4 var(--mono); }
.toolbar-actions { display: flex; gap: 6px; }
.toolbar-btn, .icon-btn, .floating-btn { min-height: 38px; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; }
.toolbar-btn { padding: 8px 12px; }.icon-btn { width: 38px; padding: 0; font: 700 18px/1 var(--mono); }
.toolbar-btn:hover,.icon-btn:hover { color:#fff;background:#111; }.toolbar-btn:disabled,.icon-btn:disabled { opacity:.25; cursor:default; }
.timeline { counter-reset: day; min-width: 0; }
.day-block { counter-increment: day; display: grid; grid-template-columns: 190px minmax(0,1fr); min-width: 0; border-bottom: 1.5px solid var(--ink); }
.day-header { position: sticky; top: 153px; align-self: start; padding: 28px 24px; }
.day-header > div { display: flex; flex-direction: column; }.day-seq::before { content: counter(day, decimal-leading-zero); font: 800 11px/1 var(--mono); color: var(--red); }
.day-date { margin: 9px 0 0; font: 800 20px/1 var(--mono); }.day-count { display: block; margin-top: 12px; color: var(--muted); font: 11px/1 var(--mono); }
.message-list { min-width: 0; padding: 24px; border-left: 1px dotted #8e8e8a; }
.message-card { position: relative; width: min(680px,100%); margin-bottom: 14px; padding: 14px 16px; border: 1.5px solid var(--ink); background: var(--afeng); box-shadow: 3px 3px 0 #111; }
.message-card.sender-xiao-jing { margin-left: auto; background: var(--xiaojing); box-shadow: 3px 3px 0 var(--blue); }
.message-card::before { position: absolute; top: 20px; left: -7px; width: 11px; height: 11px; border: 1.5px solid var(--ink); border-right: 0; border-top: 0; background: inherit; transform: rotate(45deg); content: ""; }
.message-card.sender-xiao-jing::before { right: -7px; left: auto; border: 1.5px solid var(--ink); border-left: 0; border-bottom: 0; }
.message-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-author { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; font-weight: 800; }
.message-avatar { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #111; border-radius: 50%; object-fit: cover; }
.message-kind { min-height: 12px; color: var(--red); font: 9px/1 var(--mono); }.message-text { margin: 12px 0 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; }
mark { background: var(--yellow); color: inherit; padding: 0 2px; }
.empty-state { margin: 28px; padding: 34px; border: 1px dashed var(--ink); color: var(--muted); text-align: center; font: 12px/1.5 var(--mono); }

.us-section { min-height: 70vh; }
.us-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 58px 44px 36px; border-bottom: 1.5px solid var(--ink); }
.us-index { display:flex; align-items:flex-end; gap:14px; }.us-index span { color:var(--muted); font:11px/1 var(--mono); }.us-index strong { color:var(--red); font:900 54px/.8 var(--mono); }
.us-grid { counter-reset: item; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.us-card { counter-increment: item; min-width: 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background:#fff; }
.us-card:nth-child(3n) { border-right:0; }.us-card-media { position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--ink); background:#efefeb; }
.us-card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.02); transition:transform .35s ease; }.us-card:hover img { transform:scale(1.025); }
.us-card.is-quote .us-card-media { display:grid; place-items:center; background:var(--red); }
.us-card.is-quote .us-card-media::before { content:'“'; color:#fff; font:900 100px/.7 Georgia,serif; }
.us-card-body { padding:18px 20px 24px; }.us-card-topline { display:flex; justify-content:space-between; gap:10px; font:10px/1 var(--mono); }
.us-card-number::before { content:'0' counter(item); color:var(--red); }.us-card-date { color:var(--muted); }.us-card-title { margin:18px 0 0; font-size:19px; }.us-card-text { margin:10px 0 0; color:#444; font-size:14px; line-height:1.7; }

.site-footer { display:flex; justify-content:space-between; gap:20px; padding:16px 24px; background:#111; color:#fff; font:9px/1 var(--mono); letter-spacing:.1em; }.easter-note { color:#70cf91; }
.floating-actions { position:fixed; right:24px; bottom:24px; z-index:40; display:flex; gap:6px; }.floating-btn { padding:9px 12px; box-shadow:3px 3px 0 #111; }
.scroll-indicator { position:fixed; right:max(8px,env(safe-area-inset-right)); top:50%; z-index:35; transform:translateY(-50%); opacity:.35; transition:opacity .2s; }.scroll-indicator.is-active { opacity:1; }
.scroll-indicator-date { margin-bottom:8px; padding:4px; background:#111; color:#fff; font:8px/1 var(--mono); writing-mode:vertical-rl; }
.scroll-indicator-rail { position:relative; width:22px; height:min(42vh,320px); cursor:pointer; touch-action:none; }
.scroll-indicator-track,.scroll-indicator-progress { position:absolute; top:0; left:9px; width:3px; height:100%; background:#d0d0cb; transform-origin:top; }.scroll-indicator-progress { background:var(--red); transform:scaleY(.08); }
.scroll-indicator-thumb { position:absolute; top:0; left:3px; width:15px; height:15px; border:2px solid #fff; background:var(--red); box-shadow:0 0 0 1px #111; }

.lock-screen { min-height:100svh; display:grid; place-items:center; padding:20px; background-color:#e9e9e5; background-image:linear-gradient(#d9d9d4 1px,transparent 1px),linear-gradient(90deg,#d9d9d4 1px,transparent 1px); background-size:24px 24px; }
.lock-card { width:min(940px,100%); border:1.5px solid #111; background:#fff; box-shadow:10px 10px 0 #111; }
.window-bar { display:flex; align-items:center; gap:8px; min-height:46px; padding:0 14px; border-bottom:1.5px solid #111; background:#f4f4f0; }
.window-dot { width:12px; height:12px; border:1px solid #111; border-radius:50%; }.dot-red{background:#f05246}.dot-yellow{background:#f4cf21}.dot-green{background:#2ebd59}.window-name{margin-left:9px;font:10px/1 var(--mono);letter-spacing:.08em}.pixel-pair{margin-left:auto;display:flex;gap:3px}.pixel-pair i,.pixel-pair b{display:block;width:12px;height:12px;border:1px solid #111}.pixel-pair i{background:#bd8447}.pixel-pair b{background:#fff}
.lock-layout { display:grid; grid-template-columns:1.2fr .8fr; min-height:460px; }.lock-copy { padding:62px 54px; border-right:1.5px solid #111; }.lock-title { margin:16px 0 0; font-size:clamp(52px,8vw,86px); line-height:.95; }.lock-text { margin:24px 0 0; color:#555; }
.lock-index { margin:50px 0 0; max-width:360px; border-top:1px solid #111; }.lock-index div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #aaa; }.lock-index dt,.lock-index dd { margin:0; font:10px/1 var(--mono); }.status-offline{color:var(--red)}
.lock-form { align-self:center; padding:44px; }.primary-btn { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; margin-top:12px; padding:10px 14px; border:1.5px solid #111; border-radius:0; background:var(--red); color:#fff; font-weight:800; cursor:pointer; box-shadow:4px 4px 0 #111; }.primary-btn:hover{background:#111}.form-error{margin:18px 0 0;color:var(--red);font:10px/1.4 var(--mono)}

.admin-body { background:#e8e8e3; }.admin-shell { width:min(1180px,calc(100vw - 32px)); margin:16px auto; }.admin-login,.admin-panel { border:1.5px solid #111; background:#fff; box-shadow:8px 8px 0 #111; }.admin-login { width:min(620px,100%); margin:8vh auto 0; }.admin-login-body { display:grid; grid-template-columns:1fr 1fr; }.admin-login-copy,.admin-login-form { padding:38px; }.admin-login-copy { border-right:1px solid #111; }.admin-login h1 { margin:10px 0 0; font-size:52px; }.admin-login p { line-height:1.6; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; border-bottom:1.5px solid #111; }.admin-header h1 { margin:8px 0 0;font-size:36px}.admin-header .admin-link{margin:0}.admin-workspace { display:grid; grid-template-columns:minmax(0,1fr) 380px; }.admin-editor,.admin-list-panel { padding:28px; }.admin-list-panel { border-left:1.5px solid #111; }.admin-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.admin-field { display:block; margin-bottom:18px; }.admin-field>span { display:block; margin-bottom:8px; font:700 10px/1 var(--mono); letter-spacing:.1em; }.admin-textarea { min-height:130px; resize:vertical; }.file-input { padding:9px; }.admin-hint { color:var(--muted); font:10px/1.6 var(--mono); }.admin-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid #111; }.admin-list-head h2{margin:0;font-size:20px}.admin-memory-list{margin-top:18px}.admin-memory-card{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid #aaa}.admin-memory-thumb{width:76px;height:76px;border:1px solid #111;background:#eee;overflow:hidden}.admin-memory-thumb img{width:100%;height:100%;object-fit:cover}.admin-memory-card h3{margin:4px 0;font-size:14px}.admin-memory-card p{margin:3px 0;color:#555;font-size:11px;line-height:1.4}.admin-memory-date{font-family:var(--mono)}.admin-empty{color:var(--muted);font:11px var(--mono)}

@media (max-width: 1040px) {
  .site-header { grid-template-columns:1fr auto; }.memory-tabs { order:3; grid-column:1/-1; border-top:1px solid #111; }.memory-tab{min-height:48px}.archive-intro{grid-template-columns:1fr auto}.stat-grid{grid-column:1/-1}.content-grid{grid-template-columns:260px minmax(0,1fr)}.day-block{grid-template-columns:150px minmax(0,1fr)}.us-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.us-card:nth-child(3n){border-right:1.5px solid #111}.us-card:nth-child(2n){border-right:0}.admin-workspace{grid-template-columns:1fr}.admin-list-panel{border-top:1.5px solid #111;border-left:0}
}

@media (max-width: 720px) {
  html{scroll-padding-top:112px}.page-shell{width:100%;margin:0;border-right:0;border-left:0;box-shadow:none}.site-header{min-height:60px;grid-template-columns:1fr auto}.brand{padding:10px 14px}.brand small{display:none}.brand-icon{width:22px;height:22px;flex-basis:22px}.admin-link{margin-right:14px;font-size:12px}.memory-tab{min-width:0;min-height:44px;padding:0 14px;font-size:14px}.archive-intro{grid-template-columns:1fr;padding:36px 16px 20px;gap:22px}.intro-title h1,.us-header h2{font-size:46px}.participant-strip{justify-content:flex-start}.stat-grid{grid-column:auto}.archive-controls{grid-template-columns:1fr;padding:16px;gap:14px}.segmented{width:100%}.segmented-btn{flex:1;min-width:0}.content-grid{display:block}.month-rail{border-right:0;border-bottom:1.5px solid #111}.rail-head{padding:18px 16px}.month-list{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none}.month-list::-webkit-scrollbar{display:none}.month-chip{flex:0 0 auto;display:flex;gap:12px;width:auto;min-height:48px;padding:10px 15px;border-right:1px solid #aaa;border-bottom:0}.rail-footer{display:none}.timeline-toolbar{top:104px;padding:13px 16px;align-items:flex-start}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.toolbar-meta{max-width:200px}.day-block{display:block}.day-header{position:static;display:flex;align-items:center;justify-content:space-between;padding:20px 16px 12px}.day-header>div{flex-direction:row;align-items:baseline;gap:10px}.day-date{font-size:18px}.day-count{margin:0}.message-list{padding:10px 16px 24px;border-left:0}.message-card{width:calc(100% - 18px);margin-right:18px;padding:12px 13px;box-shadow:3px 3px 0 #111}.message-card.sender-xiao-jing{margin-right:0;margin-left:18px}.message-text{font-size:15px}.scroll-indicator,.floating-actions{display:none!important}.us-header{padding:38px 16px 22px}.us-index span{display:none}.us-index strong{font-size:34px}.us-grid{grid-template-columns:1fr}.us-card,.us-card:nth-child(2n),.us-card:nth-child(3n){border-right:0}.us-card-media{aspect-ratio:4/3}.site-footer{flex-wrap:wrap;padding:14px 16px}.lock-screen{padding:12px}.lock-card{box-shadow:5px 5px 0 #111}.lock-layout{grid-template-columns:1fr;min-height:0}.lock-copy{padding:36px 24px 26px;border-right:0;border-bottom:1.5px solid #111}.lock-title{font-size:52px}.lock-text{margin-top:16px}.lock-index{display:none}.lock-form{padding:26px 24px 32px}.admin-shell{width:100%;margin:0}.admin-login,.admin-panel{border-right:0;border-left:0;box-shadow:none}.admin-login{margin:0;min-height:100svh}.admin-login-body{grid-template-columns:1fr}.admin-login-copy{padding:32px 20px;border-right:0;border-bottom:1px solid #111}.admin-login-form{padding:28px 20px}.admin-header{align-items:flex-start;padding:20px 16px}.admin-header h1{font-size:26px}.admin-editor,.admin-list-panel{padding:20px 16px}.admin-field-row{grid-template-columns:1fr}.admin-memory-card{grid-template-columns:68px minmax(0,1fr)}.admin-memory-card>.toolbar-btn{grid-column:2;justify-self:start}.admin-memory-thumb{width:68px;height:68px}
}

@media (max-width: 390px) {
  .brand strong{font-size:16px}.brand sup{display:none}.admin-link span{display:none}.archive-intro{padding-top:30px}.intro-title h1{font-size:40px}.stat-value{font-size:14px}.timeline-toolbar{display:block}.toolbar-actions{margin-top:12px;justify-content:flex-start}.message-card{width:calc(100% - 12px);margin-right:12px}.message-card.sender-xiao-jing{margin-left:12px}.message-avatar{width:28px;height:28px;flex-basis:28px}.site-footer .easter-note{display:none}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.us-card-media img{transition:none} }