:root { color-scheme: light; --bg:#f8f6ef; --paper:#fffdf7; --ink:#181716; --muted:#706b61; --line:rgba(24,23,22,.12); --accent:#2f7d5c; --accent-2:#d8482d; --shadow:0 20px 70px rgba(31,28,22,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:ui-serif,"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:24px; align-items:center; min-height:72px; padding:14px clamp(18px,4vw,56px); background:color-mix(in srgb,var(--bg) 88%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.brand { display:inline-flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; font-weight:700; }
.brand span { font-size:clamp(20px,3vw,32px); }
.brand small,.tagline { color:var(--muted); font-size:15px; }
.top-nav,.site-footer nav { display:flex; gap:18px; color:var(--muted); font-size:15px; }
.top-nav a:hover,.site-footer a:hover { color:var(--ink); }
.mode-switch { display:grid; grid-template-columns:repeat(3,34px); gap:6px; }
.mode-switch button { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; }
.mode-switch button.active { background:var(--ink); color:var(--paper); }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,.72fr); gap:clamp(28px,6vw,86px); align-items:center; min-height:calc(100svh - 72px); padding:clamp(34px,7vw,96px) clamp(18px,6vw,88px) 48px; }
.eyebrow { margin:0 0 14px; color:var(--accent-2); font:700 12px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:0; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:9em; margin-bottom:12px; font-size:clamp(52px,9vw,118px); line-height:.96; letter-spacing:0; }
.intro { max-width:620px; margin:28px 0; color:var(--muted); font-size:clamp(18px,2vw,24px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:1px solid var(--ink); border-radius:6px; font-family:ui-sans-serif,system-ui,sans-serif; font-weight:650; cursor:pointer; }
.button.primary { background:var(--ink); color:var(--paper); }
.button.ghost { color:var(--ink); }
.hero-media { margin:0; }
.hero-media img { display:block; width:100%; max-height:66svh; object-fit:cover; border-radius:8px; box-shadow:var(--shadow); }
.section-band,.moments { padding:72px clamp(18px,6vw,88px); border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:24px; align-items:end; margin-bottom:28px; }
h2 { margin-bottom:0; font-size:clamp(32px,5vw,58px); line-height:1.06; }
.search-box { display:grid; gap:7px; color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; }
.search-box input,.writer-form input,.writer-form textarea { width:100%; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); outline:none; }
.search-box input { height:42px; padding:0 12px; }
.post-list { display:grid; gap:1px; border-top:1px solid var(--line); }
.post-card { display:grid; grid-template-columns:150px minmax(0,1fr) auto auto; gap:24px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.post-card time,.post-card .author,.empty { color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:14px; }
.post-card h3 { margin-bottom:8px; font-size:clamp(24px,3vw,38px); line-height:1.12; }
.post-card p { max-width:760px; margin-bottom:0; color:var(--muted); }
.post-card .arrow { color:var(--accent); font-family:ui-sans-serif,system-ui,sans-serif; font-size:26px; }
.moments { display:grid; grid-template-columns:minmax(220px,.35fr) minmax(0,1fr); gap:36px; }
.moment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.moment-grid article { min-height:210px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.moment-grid span { color:var(--accent-2); font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800; }
.moment-grid h3 { margin:28px 0 10px; font-size:22px; }
.moment-grid p { color:var(--muted); }
.reader { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px; background:rgba(24,23,22,.42); }
.reader[hidden] { display:none; }
.reader-panel { width:min(780px,100%); max-height:min(760px,calc(100svh - 36px)); overflow:auto; padding:clamp(26px,5vw,58px); border-radius:8px; background:var(--paper); box-shadow:var(--shadow); }
.reader-close { position:fixed; top:22px; right:24px; width:42px; height:42px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font-size:28px; line-height:1; cursor:pointer; }
.reader-meta { color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:14px; }
#readerBody p,.preview-body p { margin-bottom:1.05em; font-size:18px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:26px clamp(18px,4vw,56px); border-top:1px solid var(--line); color:var(--muted); }
.site-footer p { margin-bottom:0; }
.writer-page { min-height:100svh; padding:clamp(24px,6vw,72px); }
.writer-shell { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(320px,1fr); gap:32px; max-width:1180px; margin:0 auto; }
.writer-form,.preview { padding:clamp(22px,4vw,36px); border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.writer-form label { display:grid; gap:8px; margin-bottom:16px; color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:14px; }
.writer-form input { min-height:42px; padding:0 12px; }
.writer-form textarea { min-height:260px; resize:vertical; padding:12px; }
.export-box { width:100%; min-height:170px; margin-top:16px; padding:12px; border:1px dashed var(--line); border-radius:6px; background:color-mix(in srgb,var(--bg) 78%,var(--paper)); color:var(--ink); font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
body.night { color-scheme:dark; --bg:#121417; --paper:#1a1e23; --ink:#f4f0e8; --muted:#aaa29a; --line:rgba(244,240,232,.14); --accent:#83c59f; --accent-2:#ff8067; --shadow:0 20px 70px rgba(0,0,0,.32); }
body.sunny { --bg:#fff7d7; --paper:#fffdf4; --ink:#1d1a12; --muted:#766f54; --line:rgba(68,58,22,.14); --accent:#217c75; --accent-2:#cf5d23; }
@media (max-width:880px) { .site-header{grid-template-columns:1fr auto}.top-nav{grid-column:1/-1;order:3}.hero,.moments,.writer-shell{grid-template-columns:1fr}.hero{min-height:auto}.section-heading,.post-card,.moment-grid{grid-template-columns:1fr}.post-card{gap:10px}.post-card .arrow{display:none}.site-footer{flex-direction:column} }
@media (max-width:520px) { .site-header{gap:12px}.brand span{width:100%}.mode-switch{grid-template-columns:repeat(3,30px)}.mode-switch button{width:30px;height:30px}h1{font-size:46px}.hero-actions .button{width:100%} }

.status-line { min-height: 24px; margin: 16px 0 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }
.status-line[data-type="ok"] { color: var(--accent); }
.status-line[data-type="error"] { color: var(--accent-2); }
.button:disabled { opacity: .58; cursor: wait; }