:root { color-scheme: light; --paper:#fffdf7; --ink:#332f2a; --muted:#655c4f; --red:#b93428; --green:#446b49; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:#f6f0e3; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.65; }
.page { width:min(100%,660px); margin:auto; padding:24px 18px calc(32px + env(safe-area-inset-bottom)); }
.brand { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; color:var(--red); font-weight:600; }
.read-only { padding:3px 12px; color:var(--green); background:#e9eee2; border-radius:18px; font-size:15px; }
.welcome { text-align:center; padding:26px 6px 18px; }
.lantern { object-fit:contain; filter:drop-shadow(0 8px 16px #bd6c3c20); }
h1,h2 { font-family:"Songti SC","Noto Serif CJK SC",serif; line-height:1.4; }
h1 { margin:12px 0; font-size:28px; }
h2 { margin:0 0 12px; font-size:22px; }
p { margin:10px 0; overflow-wrap:anywhere; }
.muted { color:var(--muted); font-size:15px; }
.card { padding:22px 20px; margin-bottom:18px; border:1px solid #e8dfcf; border-radius:24px; background:var(--paper); box-shadow:0 8px 24px #57452808; }
label { display:block; margin:18px 0 8px; color:var(--muted); }
input { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #d3c9b8; border-radius:14px; color:var(--ink); background:#fffcf5; font:inherit; }
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #527752; outline-offset:3px; }
button,a { min-height:44px; min-width:44px; font:inherit; }
button { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border:1px solid transparent; border-radius:16px; cursor:pointer; line-height:1.5; text-align:center; white-space:normal; }
button:disabled { cursor:default; opacity:.65; }
.primary { width:100%; margin-top:12px; color:white; background:var(--red); font-weight:600; }
.secondary { color:var(--green); background:#eff2e8; border-color:#d7ddcf; }
.text-button { color:var(--red); background:transparent; flex:none; }
.code-row { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.code-field { flex:1; min-width:110px; }
.code-row button { min-height:48px; }
.privacy-note { margin-top:16px; color:var(--muted); font-size:15px; }
.session-card { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.session-card > div { flex:1; min-width:180px; }
.family-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.entry-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.entry-heading h3 { margin:0; font-size:19px; font-weight:600; }
.entry-kind { font-size:15px; color:var(--green); background:#edf1e6; border-radius:12px; padding:4px 9px; }
.entry-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.entry-time { margin:8px 0 16px; color:var(--muted); font-size:15px; }
.entry-open { width:100%; margin-top:14px; }
.entry-detail { margin-top:16px; padding-top:16px; border-top:1px solid #e5dfd1; animation:appear .3s ease-out; }
.media-image { display:block; width:100%; max-height:380px; object-fit:contain; border-radius:14px; margin:12px 0; }
.media-box { margin-top:12px; padding:12px; border:1px solid #e4decd; border-radius:16px; background:#f7f5ed; }
audio { display:block; max-width:100%; width:100%; margin:12px 0; }
.playback-rates { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.playback-rates button { flex:1; min-width:60px; }
.playback-rates [aria-pressed="true"] { color:white; background:var(--green); }
.reply { padding-top:12px; margin-top:12px; border-top:1px solid #e5dfd1; }
.reactions { margin:12px 0; color:var(--muted); overflow-wrap:anywhere; }
.notice { padding:15px 18px; border:1px solid #e4d5ad; border-radius:16px; color:#695631; background:#fbf1d8; }
.read-only-note { margin-top:22px; }
footer { margin-top:28px; text-align:center; color:#866030; }
footer a { display:inline-flex; align-items:center; color:var(--red); padding:8px; }
@keyframes appear { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .entry-detail { animation:none; } }
@media (max-width:360px) { .page { padding-inline:14px; } .card { padding:18px 16px; } h1 { font-size:25px; } }