:root { color-scheme: light; --paper:#fafaf7; --ink:#252b29; --muted:#596359; --rule:#d9ded7; --accent:#a43b2e; --soft:#edf0e9; --reader-size:1.375rem; font-family:system-ui,"Yu Gothic",sans-serif; background:var(--paper); color:var(--ink); }
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; --paper:#1b211e; --ink:#e8ece5; --muted:#c0cabd; --rule:#455244; --accent:#eea492; --soft:#2b352c; }
@media(prefers-color-scheme:dark) { :root[data-theme="system"] { color-scheme:dark; --paper:#1b211e; --ink:#e8ece5; --muted:#c0cabd; --rule:#455244; --accent:#eea492; --soft:#2b352c; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; }
button,select { font:inherit; font-size:1rem; color:inherit; touch-action:manipulation; }
button { background:transparent; border:0; min-width:48px; min-height:48px; cursor:pointer; }
button:disabled { opacity:.35; cursor:default; }
button:hover:not(:disabled),a.menu-action:hover { background:var(--soft); }
a { color:var(--accent); text-underline-offset:.2em; overflow-wrap:anywhere; }
button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.reader-shell { height:100vh; height:100dvh; min-height:240px; max-width:1120px; margin:auto; display:flex; flex-direction:column; position:relative; padding-top:env(safe-area-inset-top,0px); }
.reader-header { flex:none; padding:4px 12px 8px; border-bottom:1px solid var(--rule); }
.title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
h1 { margin:0; min-width:0; font:inherit; }
.date-button { text-align:left; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.625rem; line-height:1.4; letter-spacing:.06em; padding:4px 0; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:6px; overflow-wrap:anywhere; }
.date-button.long-title { font-size:1.4375rem; }
.menu-toggle { flex:none; padding:0; display:grid; place-items:center; }
.menu-toggle svg { width:25px; height:25px; }
.meta { display:flex; align-items:baseline; gap:10px; font-size:.875rem; line-height:1.5; }
.status { color:var(--accent); white-space:nowrap; }
.source { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.stage { flex:1; min-height:0; padding:12px 12px 4px; display:flex; }
.viewport { flex:1; min-width:0; direction:rtl; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--rule) var(--paper); overscroll-behavior:contain; }
.diary { writing-mode:vertical-rl; text-orientation:mixed; direction:ltr; height:100%; width:max-content; min-width:100%; padding:6px 5px 9px 18px; font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif; font-size:var(--reader-size); line-height:1.85; letter-spacing:.04em; }
.diary p { margin:0 0 0 .8em; padding-inline-start:calc(min(var(--indent,0),4)*1em); white-space:pre-wrap; overflow-wrap:anywhere; }
.diary p:last-child { margin-block-end:0; }
.diary ruby { ruby-align:center; }
.diary rt { font-size:.5em; }
.emphasis { text-emphasis:filled sesame; }
.emphasis.triangle { text-emphasis:open triangle; }
.emphasis.circle { text-emphasis:open circle; }
.underline { text-decoration:underline; text-underline-position:under right; }
.underline.double { text-decoration-style:double; }
.editorial-note { font-size:.75em; color:var(--muted); }
@supports not (text-emphasis:filled sesame) { .emphasis { font-weight:bold; } }
.horizontal .viewport { direction:ltr; overflow-y:auto; overflow-x:hidden; }
.horizontal .diary { writing-mode:horizontal-tb; width:100%; min-width:0; height:auto; max-width:38em; margin:auto; padding:3px 3px 16px; }
.horizontal .diary p { margin:0 0 .8em; }
.toolbar { flex:none; display:flex; justify-content:center; align-items:center; gap:8px; padding:3px 8px max(3px,env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule); }
.toolbar > * { flex:0 0 auto; }
.toolbar button { padding:0; }
.page-button { display:flex; align-items:center; justify-content:center; gap:2px; }
.page-button svg { width:17px; height:17px; }
.horizontal .page-button svg { transform:rotate(-90deg); }
.zoom-group { display:flex; gap:2px; }
.zoom { display:grid; place-items:center; }
.zoom svg { width:27px; height:27px; }
.today { padding:0 8px !important; }
.restore-controls { flex:none; min-height:49px; text-align:right; border-bottom:1px solid var(--rule); padding:0 12px; }
.restore-controls button { display:inline-flex; align-items:center; gap:8px; }
.message { padding:10px 12px; font-size:.9375rem; line-height:1.5; border-bottom:1px solid var(--rule); flex:none; }
.message button { text-decoration:underline; }
.empty { flex:1; min-height:0; overflow:auto; padding:24px; text-align:center; display:grid; align-content:center; font-size:1.125rem; line-height:1.8; }
.empty button { border:1px solid var(--rule); padding:8px 16px; }
.size-toast { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); color:var(--paper); background:var(--ink); padding:6px 12px; pointer-events:none; white-space:nowrap; z-index:2; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.menu { position:fixed; top:8px; margin:0 auto; max-width:420px; width:calc(100% - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); padding:8px 16px 14px; color:var(--ink); background:var(--paper); border:1px solid var(--rule); overflow-y:auto; }
.menu::backdrop,.original::backdrop { background:#0005; }
.menu-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.menu-title { margin:0; font-size:1.125rem; font-family:"Yu Mincho",serif; }
.menu-source { font-size:.9375rem; line-height:1.7; color:var(--muted); margin:4px 0 12px; }
.menu-action { display:block; width:100%; text-align:left; padding:10px 0; border-top:1px solid var(--rule); min-height:50px; font-size:1.0625rem; line-height:1.5; color:var(--ink); text-decoration:none; }
.theme-setting { display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid var(--rule); font-size:1.0625rem; }
.theme-setting select { width:100%; min-width:0; min-height:48px; padding:8px 10px; color:var(--ink); background:var(--paper); border:1px solid var(--muted); border-radius:4px; }
.menu-hint { font-size:.875rem; line-height:1.7; color:var(--muted); }
.original { max-width:780px; width:calc(100% - 24px); max-height:85vh; background:var(--paper); color:var(--ink); border:1px solid var(--rule); }
.original pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.8; }
.document { max-width:740px; margin:0 auto; padding:16px 20px 64px; font-size:1.0625rem; line-height:1.85; }
.document h1 { font-family:"Yu Mincho",serif; font-size:2rem; margin:24px 0; }
.document h2 { font-size:1.25rem; margin:32px 0 10px; }
.document h3 { font-size:1.125rem; }
.document .back-link { display:inline-flex; align-items:center; min-height:48px; }
.document p { margin:0 0 1em; }
.document details { border-top:1px solid var(--rule); padding:10px 0; }
.document summary { cursor:pointer; min-height:48px; padding:8px 0; }
.document pre { font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.document .credits { font-size:.9375rem; color:var(--muted); }
@media(max-width:330px) { .date-button { font-size:1.5rem; } .date-button.long-title { font-size:1.3125rem; } .meta { gap:6px; } .toolbar { padding-inline:4px; } .today { padding-inline:2px !important; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }