/* Article pages inherit the visual site's editorial design tokens. */
:root{--sheet:#fff;--wash:#eef3f8;--accent:var(--blue)}
html[data-theme=dark]{--sheet:#172330;--wash:#1c2a39}
body.journal-open{background:var(--paper)}
body.writing #blog-view,body.writing #site{display:none}
body.writing>.music-player{bottom:58px}
.blog-header{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:24px var(--page-gutter);background:var(--paper);border-bottom:1px solid var(--line)}
.blog-header nav{display:flex;align-items:center;gap:32px;font-size:12px}
.blog-header nav a[aria-current]{color:var(--blue)}
#blog-main{max-width:1440px;margin:auto;min-height:calc(100dvh - 186px);padding:64px var(--page-gutter) 100px}
.blog-masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:44px;position:relative}
.blog-masthead h1{font-size:clamp(32px,3.5vw,52px);letter-spacing:-2px;line-height:1.4;margin-top:24px;font-weight:800}
.blog-masthead h1>span{color:var(--cyan);margin-left:4px}
.blog-display{font:950 italic clamp(38px,6.5vw,86px)/1.12 var(--display);letter-spacing:-3px;color:var(--ink);margin-top:3px}
#article-actions{display:flex;align-items:center;gap:26px;padding-bottom:8px}
#article-actions .solid-button{min-width:145px}
.blog-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
#blog-filters{gap:27px;flex-wrap:wrap}
#blog-filters button{min-height:40px;font-size:12px}
.blog-search{display:flex;align-items:center;gap:12px;width:260px;max-width:100%;flex-shrink:0;color:var(--muted)}
.blog-search svg{width:17px;height:17px;flex-shrink:0}
.blog-search input{width:100%;min-width:0;background:none;color:var(--ink);border:0;padding:10px 0;font:13px inherit;outline:none}
.blog-search:focus-within{color:var(--blue)}
.blog-search kbd{font:12px var(--display);border:1px solid var(--line);padding:3px 6px}
#result-count{text-align:right;font:11px/1.6 var(--display);color:var(--muted);margin-top:16px}
.blog-month{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;margin-top:28px}
.blog-month>h2{font:900 italic 23px var(--display);padding-top:23px;letter-spacing:-.5px}
.blog-month>h2 span{font:10px var(--display);color:var(--muted);display:block;margin-top:14px;letter-spacing:2px}
.blog-story{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:26px 0 30px;border-bottom:1px solid var(--line);align-items:center}
.blog-story.with-image{grid-template-columns:minmax(0,1fr) 140px}
.blog-story img{width:140px;height:96px;object-fit:cover;transition:transform .6s var(--ease);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.blog-story h3{font-size:23px;line-height:1.55;letter-spacing:-.5px;font-weight:750;margin-top:13px;overflow-wrap:anywhere;transition:color .2s}
.blog-story p{font-size:12px;line-height:1.9;color:var(--muted);margin-top:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.blog-story:hover h3{color:var(--blue)}.blog-story:hover img{transform:scale(1.035)}

.blog-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;border-top:1px solid var(--line);padding:28px var(--page-gutter);font-size:10px;color:var(--muted)}
.blog-empty{padding:70px 0;font-size:14px;line-height:2;color:var(--muted)}.blog-empty button{min-height:44px;color:var(--blue)}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--muted);margin-bottom:28px}
#detail-page{max-width:880px;margin:auto}.reading-layout{display:block}#reader{min-width:0}
.article-top{display:flex;align-items:center;gap:16px;font:11px/1.8 var(--display);color:var(--muted);margin:8px 0 22px}.article-top>span{color:var(--blue)}.article-top button{margin-left:auto;font-family:inherit;min-height:44px;color:var(--blue);font-size:12px}
.reading-title{font-size:clamp(32px,4vw,52px);line-height:1.5;letter-spacing:-1.5px;font-weight:800;margin-bottom:32px;overflow-wrap:anywhere}
.blog-reading-cover{width:100%;height:320px;object-fit:cover;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);margin-bottom:32px}
.prose{font-size:16px;line-height:2.05;overflow-wrap:anywhere}
.prose p{margin:22px 0}.prose :is(h2,h3,h4,h5,h6){line-height:1.6;margin:38px 0 16px;font-size:27px;font-weight:750}.prose h3{font-size:23px}.prose :is(h4,h5,h6){font-size:19px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}.prose code{font: .9em/1.8 'SFMono-Regular',Consolas,monospace}.prose :is(p,li) code{background:var(--wash);padding:3px 5px;color:var(--blue)}
.prose pre{padding:22px 24px;background:var(--wash);overflow:auto;line-height:1.8;border-left:2px solid var(--cyan)}.prose pre code{white-space:pre;color:var(--ink)}
.prose blockquote{margin:28px 0;padding:1px 24px;background:var(--wash);border-left:3px solid var(--cyan);color:var(--muted)}
.prose :is(ul,ol){padding-left:26px}.prose li::marker{color:var(--blue)}.prose li>p{margin:8px 0}.prose hr{border:0;border-top:1px solid var(--line);margin:35px 0}.prose th{background:var(--wash)}.prose :is(th,td){border-color:var(--line)}.prose .task-checkbox{accent-color:var(--blue)}
.blog-reading-footer{display:flex;align-items:center;justify-content:space-between;margin-top:38px;border-top:1px solid var(--line);padding-top:22px}
.import-result{border-left:2px solid var(--cyan);padding:16px 22px;background:var(--wash);margin-bottom:32px;font-size:12px;line-height:1.9;overflow-wrap:anywhere}.import-result button{color:var(--blue);padding:8px 0}
@keyframes page-fade{from{opacity:0}to{opacity:1}}
@keyframes journal-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){#list-page:not([hidden]),#reader>article{animation:journal-enter .55s var(--ease)}}
/* The outline floats in the margin, leaving the reading column stationary. */
#detail-page{max-width:760px}.reading-layout{display:block}.article-body{background:#f6f6f6;padding:28px 36px 32px}.article-body>:first-child{margin-top:0}.article-body>:last-child{margin-bottom:0}.article-body :is(h2,h3,h4,h5,h6){scroll-margin-top:100px}.article-body :is(h2,h3,h4,h5,h6):focus{outline:none}.article-body pre,.article-body blockquote{border-left-color:#d4d4d4}.reading-title{margin-bottom:28px}
.outline-rail{position:fixed;left:max(18px,calc((100vw - 1240px)/2));top:max(136px,calc((100dvh - 580px)/2));width:224px;height:min(580px,calc(100dvh - 160px));z-index:5;pointer-events:none;opacity:0;translate:-6px 0;visibility:hidden;transition:opacity .3s var(--ease),translate .42s var(--ease),visibility 0s .42s}
.outline-rail.outline-visible{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}
#outline-toggle{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;width:64px;min-height:48px;padding:14px 10px;pointer-events:auto;opacity:1;transition:opacity .22s var(--ease),translate .45s var(--ease)}
#outline-markers{display:flex;flex-direction:column;gap:var(--marker-gap,10px);align-items:flex-start;width:44px;max-height:100%}.outline-marker{display:block;flex:0 0 3px;width:12px;background:#d4d4d4;transform-origin:left center;transform:scaleX(1);transition:transform .38s var(--ease),background-color .3s var(--ease)}.outline-marker[data-distance="2"]{transform:scaleX(1.45)}.outline-marker[data-distance="1"]{transform:scaleX(2.15);background:#b7b7b7}.outline-marker[data-distance="0"]{transform:scaleX(3.3);background:#000}
.outline-panel{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:var(--paper);padding:14px 14px 20px 12px;opacity:0;transform:translateX(-14px);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),transform .42s var(--ease),visibility 0s .42s}.outline-open .outline-panel{opacity:1;transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s}.outline-open #outline-toggle{opacity:0;translate:-8px 0;pointer-events:none}
.outline-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:12px;color:var(--muted);font-size:11px}.outline-header button{min-width:44px;min-height:44px;font-size:18px;padding:6px}#article-outline{overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}#article-outline ol{list-style:none;margin:0;padding:0}#article-outline button{display:block;width:100%;text-align:left;padding:12px 4px;font-size:13px;line-height:1.8;color:#808080;overflow-wrap:anywhere;transition:color .24s var(--ease),transform .3s var(--ease)}#article-outline button:hover{color:#333}#article-outline button[aria-current]{color:#000;font-weight:600}#article-outline .outline-level-1{padding-left:16px}#article-outline .outline-level-2{padding-left:28px}#article-outline .outline-level-3{padding-left:40px}#article-outline .outline-level-4{padding-left:52px}
@media(max-width:1000px){#detail-page{padding-left:32px}.outline-rail{left:12px;width:260px}.outline-panel{box-shadow:18px 0 28px -22px #0003}}
@media(max-width:700px){#detail-page{padding-left:22px}.outline-rail{left:4px;width:min(280px,calc(100vw - 36px));height:min(580px,calc(100dvh - 160px))}#outline-toggle{width:34px;padding-left:4px;padding-right:4px}#outline-markers{width:26px;gap:var(--marker-gap,10px)}.outline-marker{width:7px;flex-basis:2px}.outline-panel{padding-left:18px}.article-body{padding:24px 18px}.article-top{margin-top:4px}.article-body :is(h2,h3,h4,h5,h6){scroll-margin-top:100px}}

/* Reader rail behavior is retained, with visual theme colors and paper. */
#detail-page{max-width:880px}.article-body{background:var(--sheet);padding:40px 48px;border-top:2px solid var(--cyan)}
.article-body pre,.article-body blockquote{border-left-color:var(--cyan)}
.outline-rail{z-index:70;left:max(12px,calc((100vw - 1390px)/2));width:222px}
.outline-panel{background:var(--paper);box-shadow:16px 0 28px -22px #14283944}
.outline-marker{background:var(--line)}.outline-marker[data-distance="1"]{background:var(--muted)}.outline-marker[data-distance="0"]{background:var(--ink)}
#article-outline button{color:var(--muted)}#article-outline button:hover{color:var(--blue)}#article-outline button[aria-current]{color:var(--ink)}
/* The editing surface uses the same typography and blue accents as the site. */
#editor-page{background:var(--paper);color:var(--ink)}
#editor-page button{min-height:40px;padding:8px 12px;font-size:12px}
#editor-page button:disabled{opacity:.5}
#writing-editor .writer-history{font-size:22px;padding:0}
#editor-page :is(input,select){color:var(--ink)}
.writing-header{background:var(--paper);border-color:var(--line);padding:14px 32px}
.writing-navigation a{color:var(--blue)}#writing-label{color:var(--muted);font-weight:600}
#writing-mode{background:var(--paper)}
#writer-save{background:var(--blue);color:var(--paper);padding:10px 22px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
#writer-title{font-size:clamp(28px,3.2vw,42px);font-weight:800;letter-spacing:-1px;max-width:960px;padding:34px 52px 24px}
.writing-document,#writing-editor .toastui-editor-ww-container{background:var(--sheet)}
#writing-editor .toastui-editor-defaultUI-toolbar{background:var(--sheet);border-color:var(--line)}
#writing-editor .toastui-editor-contents,#writing-editor .toastui-editor-md-container .ProseMirror{max-width:960px;color:var(--ink);font-family:inherit;font-size:16px;line-height:1.95}
#writing-editor .toastui-editor-contents :is(h1,h2,h3,h4,h5,h6){color:var(--ink)}
#writing-editor .toastui-editor-contents a{color:var(--blue)}
#writing-editor .toastui-editor-contents :is(pre,code,th),#writing-editor .writer-code-block{background:var(--wash);color:var(--ink)}
#writing-editor .writer-code-block code{background:none}
#writing-editor .toastui-editor-contents blockquote{border-left-color:var(--cyan);color:var(--muted)}
#writing-editor .toastui-editor-contents :is(th,td){border-color:var(--line);color:var(--ink)}
#writing-editor .toastui-editor-md-preview{border-color:var(--line)}
#writing-editor .toastui-editor-md-container .ProseMirror{font-family:'SFMono-Regular',Consolas,monospace;font-size:14px}
.writing-footer,#writer-find{background:var(--paper);border-color:var(--line);color:var(--muted)}
#writer-sidebar,#writer-block-actions,#writer-inline-hint,#writer-error{background:var(--wash);border-color:var(--line);color:var(--muted)}
#writer-outline button{color:var(--muted)}#writer-outline button[aria-current]{color:var(--blue)}
.writing-menu-panel{background:var(--sheet);border-color:var(--line)}.writing-menu-panel button:hover{background:var(--wash)}
#shortcuts-dialog{background:var(--sheet);color:var(--ink);border:1px solid var(--line)}#shortcuts-dialog::backdrop{background:#0a172755}
#shortcuts-dialog button{background:var(--blue);color:var(--paper);padding:10px 22px}
#writing-editor .toastui-editor-contents li::marker{color:var(--muted)}
html[data-theme=dark] #writing-editor .toastui-editor-toolbar-icons{filter:grayscale(1) invert(.85)}
html[data-theme=dark] #writing-editor .toastui-editor-toolbar-icons.active{background:#ddd}
html[data-theme=dark] #writing-editor .toastui-editor-popup,html[data-theme=dark] #writing-editor .toastui-editor-dropdown-toolbar{background:var(--sheet);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] #writing-editor .toastui-editor-popup :is(label,input,button){color:var(--ink)}
html[data-theme=dark] #writing-editor :is(.toastui-editor-md-heading,.toastui-editor-md-list-item,.toastui-editor-md-meta,.toastui-editor-md-marked-text,.toastui-editor-md-link,.toastui-editor-md-code,.toastui-editor-md-list-item-style){color:var(--ink)}
html[data-theme=dark] #writing-editor :is(.toastui-editor-md-code-block-line-background,.toastui-editor-md-code){background:var(--wash)}
html[data-theme=dark] #writing-editor .writer-search-match{background:#38536b;color:#fff}
@media(max-width:1000px){.blog-month{grid-template-columns:120px minmax(0,1fr);gap:20px}.blog-story.with-image{grid-template-columns:minmax(0,1fr) 100px}.blog-story img{width:100px;height:84px}.blog-story{gap:18px}.blog-story h3{font-size:20px}#article-actions{gap:16px}.blog-masthead{align-items:flex-start;flex-direction:column}.outline-rail{left:8px}#detail-page{padding-left:32px}}
@media(max-width:700px){
  .blog-header{padding:16px 22px}.blog-header .wordmark{font-size:22px}.blog-header .wordmark-cn{display:none}.blog-header nav{gap:18px;font-size:11px}.blog-header .icon-button{min-width:32px;width:32px;padding:6px}
  #blog-main{padding:32px 24px 60px}.blog-masthead{gap:24px;padding-bottom:28px}.blog-masthead h1{font-size:34px;margin-top:16px}.blog-display{font-size:42px;letter-spacing:-2px}
  #article-actions{justify-content:space-between;width:100%;padding:0}#article-actions .solid-button{min-height:46px;min-width:140px}
  .blog-tools{flex-direction:column;align-items:stretch;gap:12px;padding:10px 0}#blog-filters{gap:24px}.blog-search{width:100%;padding:0 0 6px}.blog-search kbd{display:none}
  .blog-month{grid-template-columns:1fr;gap:0;margin-top:24px}.blog-month>h2{display:flex;align-items:baseline;gap:12px;padding:12px 0;font-size:22px}.blog-month>h2 span{display:inline;margin:0}
  .blog-story{padding:23px 0;gap:14px}.blog-story h3{font-size:19px}.blog-story.with-image{grid-template-columns:minmax(0,1fr) 76px}.blog-story img{width:76px;height:80px}.blog-story .article-meta{font-size:9px;gap:8px}.blog-story .article-meta>span:last-child,.blog-story .article-meta>i:last-of-type{display:none}.blog-story p{font-size:11px}
  #detail-page{padding-left:14px}.reading-title{font-size:30px}.article-body{padding:26px 22px}.prose{font-size:15px}.prose h2{font-size:24px}.prose h3{font-size:21px}.blog-reading-cover{height:200px;margin-bottom:24px}.outline-rail{left:3px;width:260px}.blog-reading-footer{gap:16px}.blog-reading-footer .text-link{font-size:11px}.blog-footer{padding:22px 24px}
  .writing-header{padding:8px 10px}#editor-page button{padding:8px;font-size:11px}#writer-save{padding:10px 13px}#writer-title{padding:24px 22px 20px;font-size:28px}#writing-editor .toastui-editor-contents{font-size:15px}.writing-footer{padding:10px 14px}.writing-navigation a{width:26px}
}
@media(prefers-reduced-motion:reduce){#blog-view *,#editor-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{#print-document{color:#111;background:#fff}.prose pre,.prose blockquote{background:#f5f5f5}.prose a{color:#111}}

/* Administration stays out of the public reading and writing layout. */
#admin-dialog { width:min(420px,calc(100vw - 40px)); padding:36px; border:1px solid var(--line); background:var(--paper,#f7f9fc); color:var(--ink); margin:auto; }
#admin-dialog::backdrop { background:#10213688; backdrop-filter:blur(4px); }
#admin-close { position:absolute; right:12px; top:12px; }
#admin-form { display:grid; gap:16px; }
#admin-form h2 { font-size:28px; margin:0 0 8px; }
#admin-form label { font-size:13px; }
#admin-password { width:100%; min-width:0; padding:12px; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); }
#admin-password:focus { outline:2px solid var(--blue); outline-offset:2px; }
#admin-message { min-height:20px; font-size:13px; line-height:1.8; }
#admin-submit { justify-content:center; }
html[data-theme="dark"] #admin-dialog { background:#172432; }
@media(max-width:700px) { .blog-header nav { gap:12px; } .blog-header nav>.text-link { font-size:11px; } }

/* Article metadata stays out of the writing canvas until requested. */
#article-settings{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:inherit;font-size:14px;line-height:1.7}
#article-settings::backdrop{background:#17223566;backdrop-filter:blur(5px)}
.settings-heading{position:sticky;top:-28px;background:var(--paper);z-index:1;padding:10px 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.settings-heading h2{font-size:23px}
#article-settings label{display:flex;flex-direction:column;gap:6px;margin-top:17px;font-size:12px}#article-settings input:not([type=checkbox]),#article-settings textarea{box-sizing:border-box;width:100%;border:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 12px;font:inherit;border-radius:0}#article-settings textarea{resize:vertical;min-height:90px}#article-settings input:focus-visible,#article-settings textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#article-settings small,.settings-note{display:block;font-size:11px;line-height:1.8;color:var(--muted);margin-top:8px}#article-settings button{font:inherit;cursor:pointer;padding:8px 12px;color:var(--ink);border-bottom:1px solid var(--line)}.cover-setting{margin-top:18px;font-size:12px}.cover-setting>div{display:flex;gap:12px}#writer-cover-preview{width:100%;max-height:160px;aspect-ratio:1.92;object-fit:contain;margin:10px 0}#article-settings .home-setting{flex-direction:row;align-items:center;gap:10px;margin-top:24px}.home-setting input{accent-color:var(--blue);width:16px;height:16px}#settings-message{font-size:12px;color:var(--ink)}
.article-tags{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:11px;line-height:1.8;margin-top:12px}.reading-title+.article-tags{margin:12px 0 22px}
.journal-grid .list-card.without-cover{grid-template-columns:1fr}.featured-card.without-cover{border-top:2px solid var(--ink);padding-top:18px}.featured-card.without-cover h3{font-size:clamp(24px,3vw,38px)}.home-articles-empty{color:var(--muted);font-size:13px;padding:40px 0}.journal-bar .filters{flex-wrap:wrap}
@media(max-width:760px){.writing-header{flex-wrap:wrap;gap:4px}.writing-actions{flex-wrap:wrap;gap:4px;justify-content:flex-end}.writing-navigation{gap:6px}#article-settings{padding:22px}.writing-header #writer-settings{white-space:nowrap}}

#article-settings select,#cover-crop-dialog select{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;border-radius:0}
#article-settings .tag-setting{border:0;padding:0;margin:18px 0 0;min-width:0;font-size:12px}
#writer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#article-settings #writer-tags label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;cursor:pointer}
#writer-tags input{position:absolute;opacity:0;width:1px;height:1px}
#writer-tags span{padding:5px 10px;border:1px solid var(--line);transition:background .18s,color .18s}
#writer-tags input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#writer-tags input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
#writer-tags input:disabled+span{opacity:.4;cursor:default}
#cover-crop-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans,system-ui)}
#cover-crop-dialog::backdrop{background:#17223599;backdrop-filter:blur(5px)}
#crop-dimensions,.crop-hint{color:var(--muted);font-size:12px}
.crop-workspace{display:flex;justify-content:center;align-items:center;min-height:120px;margin:20px 0;background:#18202a;overflow:hidden}
#crop-stage{position:relative;max-width:100%;line-height:0;overflow:hidden;user-select:none}
#crop-image{display:block;max-width:100%;max-height:48dvh;width:auto;height:auto}
#crop-selection{position:absolute;border:2px solid white;box-sizing:border-box;box-shadow:0 0 0 2000px #0008;cursor:move;touch-action:none}
#crop-selection:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.crop-grid{position:absolute;inset:0;background:linear-gradient(to right,transparent 33%,#fff5 33%,#fff5 calc(33% + 1px),transparent calc(33% + 1px),transparent 66%,#fff5 66%,#fff5 calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(to bottom,transparent 33%,#fff5 33%,#fff5 calc(33% + 1px),transparent calc(33% + 1px),transparent 66%,#fff5 66%,#fff5 calc(66% + 1px),transparent calc(66% + 1px));pointer-events:none}
[data-crop-resize]{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;cursor:nwse-resize;border-right:4px solid white;border-bottom:4px solid white;background:#0003}
.crop-controls{display:flex;align-items:center;gap:20px}.crop-controls label{display:flex;gap:8px;align-items:center;font-size:12px;white-space:nowrap}.crop-controls label:nth-child(2){flex:1}.crop-controls input{min-width:60px;width:100%;accent-color:var(--ink)}
#cover-crop-dialog .crop-controls select{width:auto;padding:8px}#cover-crop-dialog button{padding:10px 14px;border:1px solid var(--line);font:inherit;cursor:pointer;color:var(--ink)}
.crop-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}#cover-crop-dialog #crop-confirm{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.crop-hint{margin-top:14px}#crop-error{font-size:12px}#cover-crop-dialog button:disabled{opacity:.5;cursor:wait}
@media(max-width:600px){#cover-crop-dialog{padding:16px}.crop-controls{gap:10px;flex-wrap:wrap}.crop-controls label:nth-child(2){flex-basis:55%}.cover-setting>div{flex-wrap:wrap}}

/* Mouse/touch and automatic focus should not add unexpected frames. */
html:not([data-keyboard-focus]) :focus{outline:none!important}
html:not([data-keyboard-focus]) .search-box:focus-within{outline:none}
html:not([data-keyboard-focus]) #writer-tags input:focus-visible+span{outline:none}
html:not([data-keyboard-focus]) #writer-title:focus-visible{box-shadow:none}

#article-settings .tag-setting{position:relative}
#article-settings #tag-manage{position:absolute;right:0;top:-26px;padding:2px 0;font-size:11px;color:var(--muted);border:0}
.tag-option{display:inline-flex;align-items:stretch;max-width:100%}
#article-settings .tag-option label{min-width:0}.tag-option span{overflow-wrap:anywhere}
#article-settings .tag-option>button{padding:0 8px;border:1px solid var(--line);border-left:0;font-size:16px;min-width:30px}
#tag-library-tools{margin-top:12px}.tag-add-row{display:flex;align-items:center;gap:10px}#article-settings .tag-add-row input{flex:1;min-width:0}#tag-add{white-space:nowrap}
#tag-library-message{font-size:11px;color:var(--muted);margin-top:6px}