:root{color-scheme:light;--paper:#f8f6ef;--ink:#42443f;--muted:#777970;--line:#deded4;--accent:#526956}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:16px}button,input,textarea{font:inherit}button{border:0;background:transparent;color:var(--accent);padding:10px 12px;cursor:pointer;min-height:44px}button:hover{background:#eaece3;border-radius:5px}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}header{max-width:700px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:var(--paper);position:sticky;top:0;z-index:1;border-bottom:1px solid #eae8e0}h1{font-size:19px;font-weight:500;letter-spacing:.15em;margin:0}main{max-width:652px;margin:auto;padding:18px 24px 60px}.day{padding:24px 0 30px;scroll-margin-top:94px}.day-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;min-height:44px}.date{font-size:14px;font-weight:500}.badge{font-size:11px;margin-left:10px;color:var(--accent)}.actions{display:flex;font-size:13px;flex-wrap:wrap;justify-content:flex-end}.body,textarea{font-size:16px;line-height:36px;letter-spacing:.03em;white-space:pre-wrap;overflow-wrap:anywhere;min-height:108px;margin:0;width:100%;border:0;border-radius:0;padding:0 3px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 35px,var(--line) 36px);color:var(--ink)}textarea{display:block;resize:none;overflow:hidden;outline:none}.error{font-size:13px;color:#914d3d;line-height:1.8}.login{max-width:360px;margin:18vh auto;padding:24px}.login p{color:var(--muted);font-size:14px;line-height:1.8}.login label{display:block;font-size:13px;margin:36px 0 10px}.login input{width:100%;padding:12px;border:1px solid var(--line);background:transparent;border-radius:4px}.login form button{margin-top:16px;width:100%;background:var(--accent);color:white;border-radius:4px}#older{display:block;margin:auto;font-size:13px}footer{text-align:center;color:var(--muted);font-size:12px;margin-top:32px}dialog{width:min(560px,calc(100% - 32px));max-height:80dvh;border:1px solid var(--line);border-radius:8px;padding:24px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#20251f66}h2{font-size:18px;font-weight:500}.revision{padding:18px 0;border-bottom:1px solid var(--line)}.revision time{font-size:12px;color:var(--muted)}.revision pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.revision button{font-size:13px}#notice{font-size:13px;color:#914d3d}@media(max-width:400px){main{padding-inline:20px}.day-head{align-items:flex-start}.actions button{padding-inline:7px}}

/* Leave enough paper below tomorrow to align today beneath the sticky header. */
footer{min-height:65dvh}

/* Native modal dialogs make the notebook inert while writing. */
body:has(dialog[open]) { overflow: hidden; }
#editor { width: min(620px, calc(100% - 24px)); max-height: 90dvh; padding: 28px; overscroll-behavior: contain; }
.editor-label { margin: 0 0 8px; color: var(--accent); font-size: 12px; letter-spacing: .12em; }
#editor-title { margin: 0; }
#editor-hint { font-size: 13px; color: var(--muted); margin: 12px 0 24px; }
#editor-body { min-height: 180px; }
#editor-body:focus-visible { outline: none; }
.editor-actions { display: flex; align-items: center; gap: 4px; margin-top: 24px; position: sticky; bottom: -28px; background: var(--paper); padding: 12px 0; }
.editor-actions span { flex: 1; }
#editor-save { background: var(--accent); color: white; border-radius: 5px; padding-inline: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:400px) { #editor { padding: 20px; } .editor-actions { bottom: -20px; font-size: 14px; } }

.weekday-saturday { color: #3e6e9c; }
.weekday-holiday { color: #ad4944; }