:root { color-scheme: light; --yellow: #ffff00; --muted: #666; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 40px 96px; color: #111; background: #fff; font: 16px/1.8 Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
main { max-width: 1120px; margin: auto; }
h1,h2 { font-size: 18px; margin: 0 0 24px; } h2 { font-weight: 500; }
a { color: inherit; text-underline-offset: .2em; } a:hover { background: var(--yellow); }
button,input,textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; border: 1px solid #111; background: #fff; padding: 8px 16px; }
button:hover,button.primary { background: var(--yellow); }
button:disabled { cursor: wait; opacity: .45; }
button.quiet { border-color: transparent; padding: 6px 8px; }
:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
input,textarea { width: 100%; padding: 8px; border: 1px solid #aaa; background: #fff; }
textarea { resize: vertical; } input:read-only { background: #f5f5f5; }
label { display: block; margin: 24px 0 8px; }
small,.muted,.writing-hint { font-size: 13px; color: var(--muted); }
small { display: block; margin-top: 8px; }
.masthead { display: flex; gap: 24px; align-items: center; border-bottom: 1px solid #111; padding-bottom: 20px; font-size: 14px; }
.masthead>a { font-weight: 700; } .masthead>span { color: var(--muted); } .masthead button { margin-left: auto; }
#status { min-height: 26px; margin: 16px 0 12px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#login { margin-top: 64px; max-width: 680px; }
.writing-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.writing-actions>div { display: flex; align-items: center; gap: 12px; }
.writing-actions button { font-size: 13px; }
#save-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.writing-sheet { max-width: 680px; margin: 64px auto 0; }
.writing-title { display: block; border: 0; border-bottom: 1px solid #ddd; padding: 0 0 24px; font-size: 28px; font-weight: 600; line-height: 1.6; background: transparent; }
.writing-title::placeholder { color: #999; font-weight: 400; }
.writing-title:focus-visible { outline: 0; border-bottom-color: #111; }
.writing-tools { display: flex; align-items: start; gap: 16px; margin: 18px 0 28px; font-size: 12px; color: var(--muted); }
.writing-tools button { font-size: 12px; padding: 2px 6px; }
.format-tools summary { cursor: pointer; padding: 2px 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#body { min-height: 45vh; border: 0; padding: 0; font-size: 18px; line-height: 1.9; }
#body-rich .ProseMirror { min-height: 45vh; outline: 0; font-size: 18px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
#body-rich .ProseMirror>p:first-child:only-child:has(>br:only-child)::before { content: 'ここから書き始める'; color: #999; pointer-events: none; position: absolute; }
.ProseMirror p { margin: 0 0 1em; }
.ProseMirror h1,.ProseMirror h2,.ProseMirror h3,.ProseMirror h4,.ProseMirror h5,.ProseMirror h6 { font-size: 19px; font-weight: 700; margin: 2em 0 1em; line-height: 1.8; }
.ProseMirror>:first-child { margin-top: 0; }
.ProseMirror blockquote { margin: 1.5em 0; padding-left: 24px; border-left: 1px solid #777; }
.ProseMirror ul,.ProseMirror ol { padding-left: 1.5em; }
.ProseMirror li>p { margin-bottom: .25em; }
.ProseMirror pre,.article pre { overflow: auto; padding: 16px; background: #f5f5f5; font-size: 14px; }
.ProseMirror code { font-size: .9em; }
.ProseMirror hr { border: 0; border-top: 1px solid #bbb; margin: 2em 0; }
.editor-image { display: block; margin: 24px 0; }
.editor-image img { display: block; max-width: 100%; height: auto; }
.editor-image input { font-size: 12px; border: 0; border-bottom: 1px solid #ddd; color: var(--muted); margin-top: 8px; }
.writing-hint { margin-top: 32px; font-size: 12px; }
#articles { list-style: none; padding: 0; margin: 24px 0 0; }
#articles li { border-bottom: 1px solid #ddd; }
#articles button { width: 100%; text-align: left; border: 0; padding: 16px 8px; overflow-wrap: anywhere; }
#articles button[aria-current=true] { background: #ffffd0; }
#articles span { display: block; font-size: 12px; color: var(--muted); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; background: #fff; z-index: 1; padding-bottom: 8px; }
.dialog-heading h2 { margin: 0; }
dialog { border: 1px solid #111; padding: 32px; max-width: calc(100vw - 32px); max-height: 90dvh; overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / .25); }
#publish-settings-dialog { width: 560px; }
#publish-form label { margin-top: 16px; }
#publish-form .actions { margin-top: 24px; }
.url-preview { font-size: 12px; overflow-wrap: anywhere; color: var(--muted); margin: 8px 0 24px; }
#date { max-width: 220px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions button { font-size: 14px; }
.withdraw { font-size: 12px; border: 0; border-top: 1px solid #ddd; width: 100%; text-align: left; padding: 16px 0 0; margin-top: 16px; text-decoration: underline; text-underline-offset: .2em; }
#public-link { font-size: 13px; overflow-wrap: anywhere; }
#preview-dialog { width: 1000px; height: 90dvh; }
iframe { width: 100%; height: calc(100% - 72px); border: 0; margin-top: 24px; }
.article { max-width: 680px; margin: auto; overflow-wrap: anywhere; }
.article h1 { font-weight: 700; margin: 32px 0; }
.article h2,.article h3 { font-size: 16px; font-weight: 700; margin: 48px 0 24px; }
.article p { margin: 0 0 24px; } .article img { max-width: 100%; height: auto; display: block; }
.article blockquote { border-left: 1px solid; padding-left: 24px; margin: 32px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media(max-width: 700px) { body { padding: 24px 20px 64px; } .masthead { gap: 16px; } .writing-actions { gap: 16px; } .writing-actions>div:last-child { margin-left: auto; gap: 8px; } .writing-sheet { margin-top: 48px; } .writing-title { font-size: 24px; } #body-rich .ProseMirror,#body { font-size: 17px; } dialog { padding: 24px; } #save-state { font-size: 11px; } }

/* Article management and writing are separate views. */
#library { max-width: 800px; margin: 64px auto 0; }
.library-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.library-heading h1 { margin: 0; font-size: 24px; font-weight: 500; }
#library #articles { border-top: 1px solid #111; margin-top: 0; }
#library #articles button { padding: 24px 0; }
#library #articles button[aria-current=true] { background: #fff; }
#library #articles button:hover { background: #ffffd0; }
#library #empty { color: var(--muted); padding: 32px 0; }
.writing-mode .writing-sheet { margin-top: 64px; }
.writing-mode #status:not([hidden]) { margin-top: 0; }
@media(max-width: 700px) {
  #library { margin-top: 48px; }
  .writing-mode .writing-actions { flex-wrap: nowrap; gap: 8px; }
  .writing-mode .writing-actions>div { gap: 8px; }
  .writing-mode .writing-actions button { padding: 6px 10px; white-space: nowrap; }
  .writing-mode #save-state { font-size: 11px; }
  .writing-mode .writing-sheet { margin-top: 48px; }
}