/* Personal LOG / NagiMemo-inspired panels. MIT License (c) 2026 Lichiphen. */
:root,[data-log-theme="light-blue"] { color-scheme:light; --log-bg:#f3f7fb; --log-card:#fff; --log-text:#253449; --log-muted:#57687c; --log-line:#dbe5ef; --log-field:#7e8b9a; --log-accent:#225dcb; --log-cyan:#0a7692; --log-on-accent:#fff; --log-radius:16px; --log-shadow:0 8px 30px #18355308; }
[data-log-theme="light-sage"] { color-scheme:light; --log-bg:#eff5f0; --log-card:#fcfefb; --log-text:#293f34; --log-muted:#576c5e; --log-line:#d4e2d7; --log-field:#798c81; --log-accent:#32694a; --log-cyan:#32694a; --log-on-accent:#fff; --log-radius:20px; --log-shadow:0 8px 30px #24483108; }
[data-log-theme="light-paper"] { color-scheme:light; --log-bg:#f4efe7; --log-card:#fffcf5; --log-text:#473b32; --log-muted:#746456; --log-line:#ded4c6; --log-field:#8e8378; --log-accent:#8b4f30; --log-cyan:#8b4f30; --log-on-accent:#fff; --log-radius:6px; --log-shadow:0 3px 8px #55402b09; }
[data-log-theme="dark-navy"] { color-scheme:dark; --log-bg:#111b2a; --log-card:#1c2a3c; --log-text:#e5edf6; --log-muted:#a3b5ca; --log-line:#344960; --log-field:#67798c; --log-accent:#94bcff; --log-cyan:#6ad1e1; --log-on-accent:#102338; --log-radius:16px; --log-shadow:0 8px 30px #030d1a25; }
[data-log-theme="dark-charcoal"] { color-scheme:dark; --log-bg:#191b1f; --log-card:#24272c; --log-text:#e9eaec; --log-muted:#adb3bd; --log-line:#41464e; --log-field:#72767c; --log-accent:#b5c9e9; --log-cyan:#b5c9e9; --log-on-accent:#20252d; --log-radius:8px; --log-shadow:0 6px 20px #0002; }
[data-log-theme="dark-plum"] { color-scheme:dark; --log-bg:#241d2d; --log-card:#32283e; --log-text:#f1e7f5; --log-muted:#c2afcc; --log-line:#53445f; --log-field:#82758c; --log-accent:#e2b5ed; --log-cyan:#e2b5ed; --log-on-accent:#32203b; --log-radius:20px; --log-shadow:0 8px 30px #13091b25; }
html[data-log-theme] { --bg:var(--log-bg); --card:var(--log-card); --text:var(--log-text); --muted:var(--log-muted); --line:var(--log-line); --field:var(--log-field); --accent:var(--log-accent); --accent-text:var(--log-on-accent); --danger:#b3261e; --ok-bg:#e6f4ea; --err-bg:#fce8e6; --warn-bg:#fff4d6; --like-ink:#b8204f; scrollbar-color:var(--log-muted) var(--log-bg); }
html[data-log-theme^="dark"] { --like-ink:#ff8fb1; --danger:#f5a7a1; --ok-bg:#223d30; --err-bg:#492f38; --warn-bg:#463b27; }
/* Placeholders read at 4.5:1 like other text (browsers fade them by default). */
html[data-log-theme] ::placeholder,.log-site ::placeholder { color:var(--log-muted); opacity:1; }
html[data-log-theme] *,html[data-log-theme] { scrollbar-color:var(--log-muted) var(--log-bg); scrollbar-width:auto; }
html[data-log-theme]::-webkit-scrollbar,html[data-log-theme] *::-webkit-scrollbar { width:12px; height:12px; }
html[data-log-theme]::-webkit-scrollbar-track,html[data-log-theme] *::-webkit-scrollbar-track { background:var(--log-bg); }
html[data-log-theme]::-webkit-scrollbar-thumb,html[data-log-theme] *::-webkit-scrollbar-thumb { background:var(--log-muted); border:3px solid var(--log-bg); border-radius:12px; }
html[data-log-theme]::-webkit-scrollbar-thumb:hover,html[data-log-theme] *::-webkit-scrollbar-thumb:hover { background:var(--log-accent); }
html[data-log-theme]::-webkit-scrollbar-corner,html[data-log-theme] *::-webkit-scrollbar-corner { background:var(--log-bg); }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.log-site { margin:0; background:var(--log-bg); color:var(--log-text); font:16px/1.8 system-ui,-apple-system,"Segoe UI","Hiragino Sans",sans-serif; }
.log-site *, .log-site *::before, .log-site *::after { box-sizing:border-box; }
.log-site a { color:var(--log-accent); }
.log-site-header { max-width:1060px; margin:auto; padding:48px 24px 24px; }
.log-site-title > a { display:inline-flex; align-items:center; gap:14px; color:var(--log-text); text-decoration:none; font-size:1.7rem; font-weight:750; letter-spacing:.04em; }
.log-site-description { margin:8px 0; color:var(--log-muted); font-size:.9rem; }
.log-site-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:28px; max-width:1060px; margin:auto; padding:0 24px; }
.log-site-main { min-width:0; }
.log-site-footer { text-align:center; color:var(--log-muted); padding:40px 24px; font-size:12px; }
.log-post { color:var(--log-text); background:var(--log-card); border:1px solid var(--log-line); border-radius:var(--log-radius); padding:24px; margin-bottom:16px; box-shadow:var(--log-shadow); }
/* Posts below the first are laid out and painted only when they come near the screen (a long page opens faster on phones). A post with a NEW mark is left out: the mark sticks out above it and would be cut off. */
.log-site-main > .log-post ~ .log-post:not(:has(> .log-post-new)) { content-visibility:auto; contain-intrinsic-size:auto 640px; }
/* The strip as the post's pictures: one row per group (画像N), drag to sort or to another row (hold first on touch screens), x to take one out, + to add. */
/* Content warnings. センシティブ veils a picture; R-18 / R-18G fold the whole post. --veil-color fills badges under white text on every theme;
   --veil-ink is the same hue as text, icons and borders on the card, lighter on dark themes so it still reads. */
:root { --veil-sensitive:#9c5800; --veil-r18:#c4234a; --veil-r18g:#6d2fa3; --veil-sensitive-ink:#9c5800; --veil-r18-ink:#c4234a; --veil-r18g-ink:#6d2fa3; }
html[data-log-theme^="dark"] { --veil-sensitive-ink:#f2b45e; --veil-r18-ink:#ff8fa8; --veil-r18g-ink:#cfa6f5; }
[data-veil] { --veil-color:var(--log-accent); --veil-ink:var(--log-accent); }[data-veil="sensitive"] { --veil-color:var(--veil-sensitive); --veil-ink:var(--veil-sensitive-ink); }[data-veil="r18"] { --veil-color:var(--veil-r18); --veil-ink:var(--veil-r18-ink); }[data-veil="r18g"] { --veil-color:var(--veil-r18g); --veil-ink:var(--veil-r18g-ink); }
.log-veil { margin:16px 0; }.log-veil > summary { list-style:none; cursor:pointer; }.log-veil > summary::-webkit-details-marker { display:none; }.log-veil[open] > summary { display:none; }
.log-veil > summary:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-veil-cover { position:relative; display:grid; overflow:hidden; border-radius:10px; }
.log-veil-image > .log-veil-cover { width:fit-content; max-width:100%; min-width:min(260px,100%); min-height:180px; background:linear-gradient(135deg,#3b3f4a,#20232a); }
.log-veil-image > .log-veil-cover > * { grid-area:1 / 1; }
.log-veil-shade { display:block; width:auto; max-width:100%; height:auto; max-height:500px; align-self:stretch; object-fit:cover; filter:blur(26px) saturate(.7) brightness(.8); transform:scale(1.12); }
.log-veil-label { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px 16px; color:#fff; text-align:center; background:#00000094; z-index:1; }
.log-veil-icon { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.log-veil-badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; background:var(--veil-color); color:#fff; font-size:12px; font-weight:800; line-height:1.6; letter-spacing:.06em; white-space:nowrap; }
.log-veil-note { font-size:13px; font-weight:600; line-height:1.6; text-shadow:0 1px 3px #0009; overflow-wrap:anywhere; }
.log-veil-show { margin-top:4px; padding:6px 16px; border:1px solid #ffffffb3; border-radius:999px; background:#00000024; font-size:13px; font-weight:700; transition:background-color .15s ease; }
/* Darken rather than lighten on hover, so the white text only gains contrast. */
.log-veil-cover:hover .log-veil-show { background:#00000052; }
.log-veil-post > .log-veil-cover { justify-items:center; padding:26px 16px; border:1px dashed color-mix(in srgb,var(--veil-ink) 55%,var(--log-line)); background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--veil-color) 7%,var(--log-card)) 0 12px,var(--log-card) 12px 24px); }
.log-veil-post .log-veil-label { padding:0; background:none; color:var(--log-text); }.log-veil-post .log-veil-icon { color:var(--veil-ink); }.log-veil-post .log-veil-note { text-shadow:none; }
.log-veil-post .log-veil-show { border-color:var(--veil-ink); background:var(--log-card); color:var(--veil-ink); }.log-veil-post .log-veil-cover:hover .log-veil-show { background:color-mix(in srgb,var(--veil-color) 10%,var(--log-card)); }
.log-veil-offer { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:-6px 0 16px; padding:8px 12px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-bg); color:var(--log-muted); font-size:13px; }
.log-veil-offer button,.log-veil-reset button { padding:4px 12px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-accent); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.log-veil-offer button:focus-visible,.log-veil-reset button:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-veil-reset { margin:8px 0 24px; text-align:center; color:var(--log-muted); font-size:12px; }
.log-tile-thumb.is-veiled img { filter:blur(18px) saturate(.75) brightness(.88); transform:scale(1.14); }.log-site .log-tile > a:hover .log-tile-thumb.is-veiled:not(.is-shown) img { transform:scale(1.14); }
.log-tile-thumb.is-veiled.is-shown img { filter:none; transform:none; }
.log-tile-veil { position:absolute; left:50%; top:50%; display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; background:var(--veil-color); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; white-space:nowrap; transform:translate(-50%,-50%); box-shadow:0 4px 14px #0000003d; }
.log-tile-veil .log-veil-icon { width:15px; height:15px; stroke-width:2.2; }.is-shown > .log-tile-veil { left:auto; top:auto; right:10px; bottom:10px; transform:none; }
.log-figure.is-rated { position:relative; width:fit-content; max-width:100%; }.log-figure-badge { position:absolute; top:8px; left:8px; z-index:1; box-shadow:0 2px 8px #0000004d; }
.log-age-dialog { width:min(400px,calc(100% - 32px)); padding:0; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); color:var(--log-text); box-shadow:0 18px 50px #0000003d; }.log-age-dialog::backdrop { background:#10192db3; }
.log-age-dialog form { display:grid; gap:14px; padding:24px 20px 18px; text-align:center; }.log-age-dialog h2 { margin:0; font-size:17px; }.log-age-dialog p { margin:0; color:var(--log-muted); font-size:14px; line-height:1.7; }
.log-age-dialog label { display:flex; justify-content:center; align-items:center; gap:8px; font-size:13px; cursor:pointer; }.log-age-dialog input { width:18px; height:18px; accent-color:var(--log-accent); }
.log-age-actions { display:grid; gap:8px; }.log-age-actions button { min-height:44px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-text); font:inherit; font-weight:700; cursor:pointer; }.log-age-actions .is-yes { border-color:transparent; background:var(--veil-r18); color:#fff; }
.log-age-actions button:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .log-veil-show { transition:none; } }
/* A draft kept in this tab: a dot on the write button. */
.log-post-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:12px; color:var(--log-muted); margin-bottom:14px; }.log-post-meta a { text-decoration:none; color:var(--log-muted); }.log-post-meta > strong { color:var(--log-text); font-size:14px; }
.log-avatar,.log-site-avatar,.log-settings-avatar { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--log-bg); color:var(--log-cyan); font-weight:700; font-size:15px; }
.log-site-avatar { width:48px; height:48px; font-size:24px; }.log-settings-avatar { width:72px; height:72px; font-size:32px; }
.log-login-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.log-login-link { display:flex; align-items:center; gap:8px; font-weight:650; text-decoration:none; padding:12px 16px; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); }
.log-sidebar { position:sticky; top:24px; min-width:0; padding-bottom:24px; }.log-sidebar-head { display:none; }
.log-widget { background:var(--log-card); border:1px solid var(--log-line); border-radius:var(--log-radius); padding:18px; margin:16px 0; font-size:14px; }.log-widget h2 { font-size:15px; margin:0 0 14px; }
.log-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.log-calendar-nav a { padding:6px; text-decoration:none; }.log-calendar-nav > a:first-child,.log-calendar-nav > a:last-child { font-size:24px; line-height:1; }
.log-calendar { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; text-align:center; }.log-calendar th { color:var(--log-muted); font-weight:500; padding:4px 0; }.log-calendar td { height:32px; padding:1px; }.log-calendar td > * { display:grid; place-items:center; width:100%; min-height:30px; border-radius:6px; }.log-calendar a { text-decoration:none; font-weight:700; background:var(--log-bg); }.log-calendar .today > * { outline:1px solid var(--log-accent); outline-offset:-1px; }.log-calendar .selected > a { background:var(--log-accent); color:var(--log-on-accent); }
.log-latest { list-style:none; margin:0; padding:0; }.log-latest li + li { border-top:1px solid var(--log-line); margin-top:12px; padding-top:12px; }.log-latest a { display:block; line-height:1.7; overflow-wrap:anywhere; text-decoration:none; }.log-latest time { display:block; font-size:11px; color:var(--log-muted); margin-top:4px; }
.log-menu-toggle,.log-menu-close { display:none; }.log-archive-title { font-size:16px; margin:0 0 20px; }.log-site a:hover { text-decoration:underline; }
.log-categories { display:flex; flex-wrap:wrap; align-items:center; gap:4px 2px; margin:14px 0 4px; padding-top:12px; border-top:1px dashed var(--log-line); font-size:13px; }
.log-categories-label { margin-right:8px; padding:1px 8px; border-radius:4px; background:var(--log-bg); color:var(--log-muted); font-size:11.5px; font-weight:700; letter-spacing:.06em; }
.log-site .log-categories > a { display:inline-flex; align-items:center; gap:4px; padding:2px 4px; border-radius:6px; color:var(--log-accent); font-weight:600; text-decoration:none; }.log-site .log-categories > a:hover { background:var(--log-bg); text-decoration:underline; }
.log-categories .log-cat-icon { width:16px; height:16px; }.log-cat-sep { color:var(--log-muted); margin-right:6px; }
.log-share { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:6px; margin:14px 0 -6px; }
.log-site .log-share-btn { --share-accent:var(--log-text); display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-muted); font:inherit; font-size:.72rem; font-weight:600; line-height:1; letter-spacing:.02em; text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .1s ease; }
.log-site .log-share-btn:hover { color:var(--share-accent); border-color:var(--share-accent); text-decoration:none; }.log-share-btn:active { transform:scale(.95); }.log-share-btn:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-share-icon { flex-shrink:0; width:14px; height:14px; }
.log-share-open { --share-accent:var(--log-accent); }
.log-share-copy { --share-accent:var(--log-accent); }html:not(.log-share-ready) .log-share-copy { display:none; }.log-share-copy .log-share-icon-done { display:none; }
.log-site .log-share-copy.is-copied { --share-accent:#047857; color:#047857; background:var(--ok-bg); border-color:#6ee7b7; }.log-site .log-share-copy.is-error { --share-accent:var(--danger); color:var(--danger); background:var(--err-bg); border-color:var(--danger); }
html[data-log-theme^="dark"] .log-site .log-share-copy.is-copied { --share-accent:#8fe0b5; color:#8fe0b5; border-color:#4f9f78; }
.log-share-copy.is-copied .log-share-icon-copy { display:none; }.log-share-copy.is-copied .log-share-icon-done { display:block; animation:log-share-pop .25s ease; }
@keyframes log-share-pop { from { transform:scale(.4); } to { transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .log-site .log-share-btn,.log-share-copy.is-copied .log-share-icon-done { transition:none; animation:none; } }
.log-share-dialog { width:min(420px,calc(100% - 32px)); padding:0; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); color:var(--log-text); box-shadow:0 18px 50px #0000003d; }.log-share-dialog::backdrop { background:#10192d80; }
.log-share-dialog-body { display:grid; gap:14px; padding:22px 20px 16px; }.log-share-dialog h2 { margin:0; text-align:center; font-size:15px; color:var(--log-muted); font-weight:600; }
.log-share-preview { margin:0; padding:10px 12px; border-radius:10px; background:var(--log-bg); font-size:13px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.log-share-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.log-share-service { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:76px; padding:10px 4px; border:1px solid var(--log-line); border-radius:12px; background:var(--log-card); color:var(--log-text); font:inherit; font-size:12px; font-weight:600; line-height:1.3; text-align:center; word-break:keep-all; cursor:pointer; transition:border-color .15s ease,color .15s ease,background-color .15s ease; }
.log-share-service .log-share-icon { width:24px; height:24px; color:var(--log-accent); }.log-share-service:hover { border-color:var(--log-accent); background:var(--log-bg); }.log-share-service:focus-visible,.log-share-close:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-share-status { margin:0; color:var(--log-muted); font-size:13px; text-align:center; }.log-share-status:empty { display:none; }.log-share-status.is-error { color:var(--danger); }.log-share-status a { font-weight:700; white-space:nowrap; }
.log-share-close { justify-self:center; min-height:40px; padding:6px 18px; border:0; background:none; color:var(--log-muted); font:inherit; font-size:13px; cursor:pointer; }
@media(max-width:420px) { .log-share-services { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.log-category-picker input[name="new_categories"] { width:100%; }
html[data-log-theme="light-paper"] .log-site-title > a { font-family:"Yu Mincho",serif; }
.log-post h1,.log-post h2 { margin:0 0 16px; font-size:1.1rem; line-height:1.6; overflow-wrap:anywhere; }.log-post h2 a { color:inherit; text-decoration:none; }
.log-body { line-height:1.9; overflow-wrap:anywhere; font-size:16px; }.log-body strong { font-weight:750; }
/* Embeds (Tegalog notation). Players keep their aspect ratio and never overflow the post. */
.log-embed { display:block; width:100%; max-width:100%; margin:14px 0 18px; }.log-embed + br { display:none; }
.log-embed iframe { display:block; width:100%; max-width:100%; border:0; border-radius:calc(var(--log-radius) * .6); background:var(--log-bg); }
.embeddedyoutube,.embeddednicovideo { position:relative; aspect-ratio:16 / 9; border-radius:calc(var(--log-radius) * .6); overflow:hidden; background:#000; }
.embeddedyoutube iframe,.embeddednicovideo iframe { position:absolute; inset:0; height:100%; border-radius:0; background:#000; }
.embeddedspotify iframe { height:152px; border-radius:12px; }.embeddedspotify.log-embed-tall iframe { height:352px; }
.embeddedapplemusic { max-width:660px; }.embeddedapplemusic iframe { height:450px; border-radius:10px; overflow:hidden; }.embeddedapplemusic.log-embed-song iframe { height:175px; }
.embeddedamazonmusic { max-width:500px; }.embeddedamazonmusic iframe { height:352px; border-radius:20px; background:#000; }.embeddedamazonmusic.log-embed-tall iframe { height:500px; }
.embeddedsoundcloud iframe { height:166px; }.embeddedsoundcloud.log-embed-tall iframe { height:450px; }
.log-embed-source { display:block; width:fit-content; margin-top:6px; font-size:12px; line-height:1.7; }
.embeddedbandcamp { max-width:500px; }.embeddedbandcamp iframe { height:120px; }.embeddedbandcamp.log-embed-tall iframe { height:472px; }
.embeddedbluesky,.embeddedthreads,.embeddedmastodon,.embeddedfacebook { max-width:550px; }.embeddedbluesky iframe { height:450px; }.embeddedthreads iframe { height:550px; }.embeddedmastodon iframe { height:550px; }.embeddedfacebook iframe { height:650px; }
.embeddedfacebook { overflow:hidden; }
.embeddedtiktok { max-width:400px; }.embeddedtiktok iframe { aspect-ratio:9 / 16; height:auto; }
.embeddedmixcloud iframe { height:180px; }.embeddedmixcloud.log-embed-tall iframe { height:400px; }
.embeddedaudiomack iframe { height:252px; }.embeddedaudiomack.log-embed-tall iframe { height:400px; }
.embeddedvimeo iframe { aspect-ratio:16 / 9; height:auto; }.embeddedtwitch iframe { aspect-ratio:16 / 9; height:auto; min-height:300px; }
@media(max-width:446px) { .embeddedtwitch iframe { display:none; }.embeddedtwitch::before { content:"Twitchのプレーヤーは、スマホを横向きにすると表示されます。下のリンクからTwitchでも見られます。"; display:block; font-size:13px; color:var(--log-muted); } }
.embeddedcodepen iframe { height:300px; }
.embeddednote { max-width:494px; }.embeddednote iframe { height:400px; border-radius:0; background:transparent; }
.embeddedvoicy { max-width:500px; }.embeddedvoicy iframe { height:385px; overflow:hidden; }
.embeddedsteam { max-width:646px; }.embeddedsteam iframe { height:190px; background:#1b2838; }
.embeddedgigaviewer { position:relative; max-width:560px; aspect-ratio:560 / 400; border-radius:calc(var(--log-radius) * .6); overflow:hidden; background:#000; }.embeddedgigaviewer iframe { position:absolute; inset:0; height:100%; border-radius:0; }
.embeddedtweet .twitter-tweet { margin:0 auto!important; }.embeddedtweet iframe,.embeddedinstagram iframe { background:transparent; border-radius:12px; }
.embeddedtweet blockquote,.embeddedinstagram blockquote { margin:0; padding:16px 18px; border:1px solid var(--log-line); border-radius:12px; background:var(--log-bg); }
.embeddedinstagram .instagram-media,.embeddedinstagram iframe { width:100%!important; max-width:540px!important; min-width:0!important; margin:0 auto!important; border-radius:12px!important; }
.log-embed-video video { display:block; width:100%; max-width:100%; height:auto; border-radius:calc(var(--log-radius) * .6); background:#000; }
.log-embed-video figure { margin:0; display:grid; gap:8px; }.log-embed-video figcaption { color:var(--log-muted); font-size:13px; text-align:center; }
/*
 * Page embeds ([ページ埋込]URL[/ページ埋込]): a dark screen in the chosen shape, never taller than most of the window, with
 * the page's title and a sticker to press. Pressed, the page takes its place; 全画面 fills the screen (or the window on an iPhone).
 */
.log-frame { --w:16; --h:9; --frame-width:min(100%, calc(78svh * var(--w) / var(--h))); margin:16px 0 20px; }.log-frame + br { display:none; }
.log-frame.is-4x3 { --w:4; --h:3; }.log-frame.is-3x2 { --w:3; --h:2; }.log-frame.is-1x1 { --w:1; --h:1; }.log-frame.is-2x3 { --w:2; --h:3; }
.log-frame.is-3x4 { --w:3; --h:4; }.log-frame.is-9x16 { --w:9; --h:16; }.log-frame.is-21x9 { --w:21; --h:9; }
.log-frame-stage { position:relative; width:var(--frame-width); aspect-ratio:var(--w) / var(--h); margin:0 auto; overflow:hidden; border-radius:calc(var(--log-radius) * .6); background:#0d1018; box-shadow:0 0 0 1px var(--log-line), 0 4px 0 color-mix(in srgb,var(--log-accent) 20%,transparent); }
.log-frame-stage iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:#000; }
.log-site .log-frame-start,.log-frame-start { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px; overflow:hidden; color:#fff; text-align:center; text-decoration:none;
    background:radial-gradient(110% 80% at 50% 0%, color-mix(in srgb,var(--log-accent) 42%,#0d1018), #0d1018 72%); }
.log-site .log-frame-start:hover { text-decoration:none; }
.log-frame-start::before { content:""; position:absolute; inset:10px; border:1.5px dashed #ffffff38; border-radius:calc(var(--log-radius) * .45); pointer-events:none; }
.log-frame-start img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.9); }
.log-frame-play { position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 20px 9px 15px; border:3px solid #fff; border-radius:999px; background:var(--log-accent); color:var(--log-on-accent); font-size:15px; font-weight:750; line-height:1.3;
    box-shadow:0 4px 0 #00000040, 0 10px 24px #00000040; transform:rotate(-3deg); transition:transform .2s ease; }
.log-frame-start:hover .log-frame-play,.log-frame-start:focus-visible .log-frame-play { transform:rotate(0) scale(1.06); }
.log-frame-start:focus-visible { outline:3px solid #fff; outline-offset:-6px; }
.log-frame-play .log-frame-icon { width:18px; height:18px; fill:currentColor; stroke:none; }
.log-frame-text { position:relative; display:flex; flex-direction:column; gap:2px; max-width:92%; text-shadow:0 1px 8px #000c; }
.log-frame-text strong { font-size:16px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.log-frame-text small { font-size:12px; opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-frame-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.log-frame-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; width:var(--frame-width); margin:8px auto 0; font-size:12px; line-height:1.6; }
.log-frame-open { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--log-muted); }
.log-frame-full,.log-frame-close { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-text); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.log-frame-full[hidden] { display:none; }
.log-frame-full:hover { color:var(--log-accent); border-color:var(--log-accent); }
.log-frame-full:focus-visible,.log-frame-close:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
/* The close button shows only over the full screen, small in the corner so the page keeps most of it. */
.log-frame-close { position:absolute; top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right)); z-index:1; display:none; border-color:#ffffff40; background:#000000a6; color:#fff; }
.log-frame.is-full .log-frame-close,.log-frame.is-cover .log-frame-close { display:inline-flex; }
.log-frame.is-full .log-frame-stage,.log-frame.is-cover .log-frame-stage { width:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; background:#000; }
.log-frame.is-cover .log-frame-stage { position:fixed; inset:0; z-index:230; height:100dvh; }
html.log-frame-covered,html.log-frame-covered body { overflow:hidden; }
/* A page embed whose target turned out to be a file download: shown greyed out, not loadable, with an outside link only. */
.log-frame.is-blocked .log-frame-stage { background:#1a1410; box-shadow:0 0 0 1px var(--log-line); }
.log-frame-start.is-blocked { cursor:default; color:#f2d9c4; background:repeating-linear-gradient(135deg,#2a211a 0 12px,#241c16 12px 24px); }
.log-frame-start.is-blocked::before { border-style:solid; border-color:#ffb27d40; }
.log-frame-start.is-blocked .log-frame-play { border-color:#ffb27d; background:#5a3a24; color:#ffe6d2; transform:none; box-shadow:none; }
.log-frame-start.is-blocked .log-frame-play .log-frame-icon { fill:none; stroke:currentColor; }
.log-frame-note { display:inline-flex; align-items:center; gap:5px; min-width:0; color:var(--log-muted); }
.log-frame-note .log-frame-icon { flex:none; width:14px; height:14px; }
.log-site .log-card,.log-card { display:flex; align-items:stretch; max-width:640px; margin:14px 0 18px; border:1px solid var(--log-line); border-radius:calc(var(--log-radius) * .75); background:var(--log-card); color:var(--log-text); text-decoration:none; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease; }
.log-card + br { display:none; }.log-site .log-card:hover { border-color:var(--log-accent); box-shadow:0 6px 20px #0000001a; text-decoration:none; }.log-card:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-card-text { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; padding:14px 18px; }
.log-card-text strong { font-size:15px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.log-card-text small { color:var(--log-muted); font-size:12.5px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.log-card-site { margin-top:auto; color:var(--log-muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-card-image { flex:0 0 auto; width:min(36%,220px); height:auto; min-height:100%; aspect-ratio:1.91 / 1; object-fit:cover; background:var(--log-bg); border-left:1px solid var(--log-line); }
@media(max-width:560px) { .log-site .log-card,.log-card { flex-direction:column-reverse; }.log-card-image { width:100%; border-left:0; border-bottom:1px solid var(--log-line); } }
.log-figure { margin:16px 0; }.log-figure a { display:block; }.log-figure img { display:block; max-width:100%; width:auto; height:auto; max-height:500px; border-radius:10px; }
/* Pictures in a row (only line breaks between them): square thumbnails, two columns; three on PCs from three pictures (2 and 4 stay two by two). */
.log-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; }
@media(min-width:901px) { .log-gallery:not(.is-two) { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Also the picture inside an opened veil, which otherwise keeps .log-figure's margin and sits lower than its row. */
.log-gallery .log-figure,.log-gallery > .log-veil { min-width:0; margin:0; }.log-gallery .log-figure.is-rated { width:auto; }
.log-gallery .log-figure img,.log-gallery .log-veil-shade { width:100%; height:auto; max-height:none; aspect-ratio:1; object-fit:cover; }
.log-gallery .log-veil-image > .log-veil-cover { width:100%; min-width:0; min-height:0; aspect-ratio:1; }.log-gallery .log-veil-shade { height:100%; }
.log-manga { display:flex; width:100%; max-width:580px; gap:18px; padding:12px; border:1px solid var(--log-line); background:var(--log-bg); border-radius:12px; margin:16px 0; text-decoration:none; color:var(--log-text)!important; align-items:center; }
.log-manga img { width:100px; height:130px; object-fit:cover; flex-shrink:0; border-radius:6px; }.log-manga strong { display:block; }.log-manga small { display:block; color:var(--log-cyan); margin-top:8px; }
.log-empty { text-align:center; color:var(--log-muted); padding:48px 12px; }.log-pagination { display:flex; justify-content:center; gap:20px; padding:20px 0 28px; }
/* Breadcrumb: one soft pill, house icon + site name › … › this page. Long names shorten with "…". */
.log-breadcrumb { display:flex; margin:0 0 18px; font-size:12.5px; line-height:1.4; }
.log-breadcrumb ol { display:flex; align-items:center; min-width:0; max-width:100%; margin:0; padding:4px; list-style:none; border:1px solid var(--log-line); border-radius:999px; background:color-mix(in srgb,var(--log-card) 82%,transparent); box-shadow:var(--log-shadow); }
.log-breadcrumb li { display:flex; align-items:center; flex:none; min-width:0; }
.log-breadcrumb li:not(:first-child):not(:last-child) { flex-shrink:1; }.log-breadcrumb li:last-child { flex:0 1 auto; }
.log-crumb { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:5px 11px; border-radius:999px; color:var(--log-muted); font-weight:600; text-decoration:none; transition:background-color .15s ease,color .15s ease; }
.log-crumb > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-breadcrumb li:not(:first-child):not(:last-child) .log-crumb > span { max-width:12em; }
.log-site a.log-crumb { color:var(--log-accent); }.log-site a.log-crumb:hover { background:color-mix(in srgb,var(--log-accent) 10%,transparent); text-decoration:none; }
a.log-crumb:focus-visible { outline:2px solid var(--log-accent); outline-offset:1px; }
.log-breadcrumb li:first-child .log-crumb { background:color-mix(in srgb,var(--log-accent) 10%,transparent); }
.log-breadcrumb [aria-current] .log-crumb { color:var(--log-text); }
.log-crumb-home { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.log-crumb-sep { width:14px; height:14px; flex:none; margin:0 1px; fill:none; stroke:var(--log-muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.6; }
@media(max-width:600px) { .log-breadcrumb { font-size:12px; }.log-crumb { padding:5px 9px; gap:5px; }.log-breadcrumb li:first-child .log-crumb > span { max-width:7.5em; }.log-breadcrumb li:not(:first-child):not(:last-child) .log-crumb > span { max-width:6.5em; } }
@media(max-width:900px) {
    .log-site-grid { display:block; padding:0; }.log-site-header { padding-right:84px; }.log-site-main { padding:0; width:100%; }
    .log-site .log-post { border-radius:0; border-left:0; border-right:0; margin-bottom:12px; width:100%; box-shadow:none; }
    .log-breadcrumb,.log-archive-title { padding:0 16px; }
    .log-menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:fixed; right:calc(14px + env(safe-area-inset-right)); top:calc(14px + env(safe-area-inset-top)); width:58px; height:58px; padding:0; border:1px solid var(--log-line); border-radius:18px; background:color-mix(in srgb,var(--log-card) 86%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--log-accent); box-shadow:0 6px 20px #0000001f; font:inherit; cursor:pointer; z-index:30; transition:transform .15s ease; }
    .log-menu-toggle:active { transform:scale(.95); }.log-menu-toggle:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
    .log-menu-toggle svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
    .log-menu-label { font-size:10px; font-weight:700; letter-spacing:.16em; line-height:1; margin-right:-.16em; }
    .log-sidebar { position:fixed; top:0; right:0; bottom:0; width:min(340px,92vw); content-visibility:auto; padding:calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background:var(--log-bg); overflow-y:auto; overscroll-behavior:contain; z-index:50; visibility:hidden; transform:translateX(100%); }
    .log-menu-open { overflow:hidden; }.log-menu-open .log-sidebar { visibility:visible; transform:translateX(0); }.log-sidebar-head { display:flex; justify-content:space-between; align-items:center; margin:0 0 16px; }.log-sidebar-head h2 { font-size:17px; margin:0; }.log-menu-close { display:block; width:44px; height:44px; border:1px solid var(--log-line); border-radius:12px; background:var(--log-card); color:var(--log-text); font-size:25px; cursor:pointer; }.log-menu-backdrop { position:fixed; inset:0; background:#10192d66; z-index:40; }
    .log-feed { padding-bottom:60px; }
}
@media(max-width:480px) { .log-site-header { padding:32px 76px 20px 16px; }.log-post { padding:18px 16px; }.log-manga { gap:12px; }.log-manga img { width:76px; height:100px; } }
/* Owner controls and compact management list. */
.log-ui-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btn .log-ui-icon { display:block; }
.log-edit-link { align-items:center; gap:6px; }
.log-post-meta .log-edit-link { display:inline-flex; margin-left:auto; color:var(--log-accent); padding:5px 8px; border-radius:8px; background:var(--log-bg); }
.log-delete-form { display:contents; }.log-delete-link { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:0; border-radius:8px; background:var(--log-bg); color:#c0392b; font:inherit; cursor:pointer; }.log-delete-link:hover { background:color-mix(in srgb,#c0392b 12%,var(--log-bg)); }
.log-delete-link:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
/* The red of the dark themes: light enough on their dark background (AA). */
html[data-log-theme^="dark"] .log-delete-link { color:#ff9e94; }
html[data-log-theme^="dark"] .log-delete-link:hover { background:color-mix(in srgb,#ff9e94 14%,var(--log-bg)); }
.log-private-note { padding:10px 16px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-card); color:var(--log-muted); font-size:13px; }
.log-site .btn { display:inline-flex; align-items:center; justify-content:center; font:inherit; cursor:pointer; padding:7px 14px; border:1px solid var(--log-line); border-radius:8px; background:var(--log-card); color:var(--log-text); text-decoration:none; }
.log-site .btn:disabled { opacity:.5; cursor:wait; }
.log-site .note { color:var(--log-muted); font-size:13px; line-height:1.7; }.log-site input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width:100%; box-sizing:border-box; font:inherit; color:var(--log-text); background:var(--log-bg); border:1px solid var(--log-field); border-radius:8px; padding:8px 10px; }
/* Pages without the open editor: both buttons float in softly right after load instead of rising from below. */
/* Optional sidebar blocks and their settings editor. */
.log-profile-links { margin:0 0 24px; padding:8px 0 0; border:0; background:none; box-shadow:none; }
.log-profile-icon { display:flex; justify-content:center; margin:0 0 16px; }.log-profile-icon .log-settings-avatar { width:84px; height:84px; font-size:36px; }
.log-profile-message::before { content:""; position:absolute; left:50%; top:-9px; width:16px; height:16px; background:inherit; border:inherit; border-right:0; border-bottom:0; border-radius:3px 0 0; transform:translateX(-50%) rotate(45deg); }
.log-profile-name { margin:-4px 0 16px; color:var(--log-text); font-size:16px; font-weight:700; line-height:1.4; text-align:center; overflow-wrap:anywhere; }
.log-profile-icon-framed .log-settings-avatar { box-shadow:0 0 0 3px var(--log-bg),0 0 0 5px var(--log-accent),0 6px 18px #0000001f; }
.log-profile-message { position:relative; margin:6px 0 16px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--log-accent) 30%,var(--log-line)); border-radius:14px; background:color-mix(in srgb,var(--log-accent) 10%,var(--log-card)); color:var(--log-text); font-size:13px; line-height:1.7; text-align:center; overflow-wrap:anywhere; }
.log-link-buttons { display:grid; gap:8px; }
.log-site .log-link-button { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 16px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-card); color:var(--log-text); font-size:14px; font-weight:600; text-decoration:none; }
.log-link-button span { min-width:0; overflow-wrap:anywhere; }
.log-link-icon { display:block; width:24px; height:24px; flex-shrink:0; color:var(--log-accent); }
.log-site .log-link-button:hover { border-color:var(--log-accent); background:var(--log-bg); text-decoration:none; }
.log-link-button:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-mail-dialog { width:min(400px,calc(100% - 32px)); padding:0; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); color:var(--log-text); box-shadow:0 18px 50px #0000003d; }.log-mail-dialog::backdrop { background:#10192d80; }
.log-mail-body { display:grid; gap:12px; padding:22px 20px 18px; text-align:center; }.log-mail-body h2 { margin:0; font-size:15px; color:var(--log-muted); font-weight:600; }
.log-mail-address { margin:0; padding:12px; border-radius:10px; background:var(--log-bg); font-size:16px; font-weight:650; overflow-wrap:anywhere; user-select:all; }
.log-mail-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.log-mail-actions > * { display:flex; align-items:center; justify-content:center; min-height:46px; padding:8px 12px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-bg); color:var(--log-text); font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
.log-site .log-mail-send { color:var(--log-text); }.log-mail-actions > .log-mail-primary { border-color:var(--log-accent); background:var(--log-accent); color:var(--log-on-accent); }
.log-mail-actions > *:hover { border-color:var(--log-accent); text-decoration:none; }.log-mail-actions > *:focus-visible,.log-mail-close:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-mail-status { min-height:1.5em; margin:0; color:var(--log-muted); font-size:13px; }.log-mail-status:empty { display:none; }
.log-mail-close { justify-self:center; min-height:40px; padding:6px 18px; border:0; background:none; color:var(--log-muted); font:inherit; font-size:13px; cursor:pointer; }
@media(max-width:420px) { .log-mail-actions { grid-template-columns:1fr; } }
.log-sidebar-block { min-width:0; }.log-custom-block { margin:16px 0; overflow-wrap:anywhere; }.log-custom-block h2 { font-size:15px; margin:0 0 14px; }.log-custom-block img { display:block; max-width:100%; height:auto; }.log-custom-block p:first-child { margin-top:0; }.log-custom-block p:last-child { margin-bottom:0; }
.log-cat-list { list-style:none; margin:0 -6px; padding:0; display:grid; gap:2px; }
.log-site .log-cat-list a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--log-text); text-decoration:none; }.log-site .log-cat-list a:hover { background:var(--log-bg); color:var(--log-accent); text-decoration:none; }
.log-cat-icon { width:18px; height:18px; flex-shrink:0; fill:color-mix(in srgb,var(--log-accent) 18%,transparent); stroke:var(--log-accent); stroke-width:1.7; stroke-linejoin:round; }
.log-cat-list a > span { flex:1; min-width:0; overflow-wrap:anywhere; }.log-cat-list small { min-width:26px; padding:1px 8px; border-radius:999px; background:var(--log-bg); color:var(--log-muted); font-size:12px; text-align:center; }
.log-tag-cloud { display:flex; flex-wrap:wrap; gap:6px 4px; }
.log-site .log-tag-cloud a { padding:2px 8px; border-radius:6px; color:var(--log-cyan); font-size:13px; font-weight:600; text-decoration:none; }.log-site .log-tag-cloud a:hover { background:color-mix(in srgb,var(--log-cyan) 12%,transparent); text-decoration:underline; }
.log-link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.log-link-grid > a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px; border:1px solid var(--log-line); border-radius:8px; background:var(--log-bg); color:var(--log-accent); text-align:center; text-decoration:none; overflow-wrap:anywhere; }
.log-banner-link { display:block; text-decoration:none; }.log-banner { display:block; width:100%; height:auto; border:0; border-radius:0; }
/* Sidebar settings editor (admin). */
.log-ui-icon { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.log-ui-icon-grip { fill:currentColor; stroke:none; }
[data-link-items] { display:grid; gap:8px; }
/* Pager: plain links that stay where the thumb expects them (no infinite scroll). */
.log-pager { display:grid; justify-items:center; gap:16px; margin:32px 0 40px; }
.log-pager-status { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; margin:0; font-size:13px; color:var(--log-muted); }
.log-pager-status b { color:var(--log-text); font-size:15px; font-variant-numeric:tabular-nums; }
.log-pager-of { padding:3px 11px; border-radius:999px; background:color-mix(in srgb,var(--log-accent) 12%,var(--log-card)); color:var(--log-accent); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
.log-pager-row { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
.log-pager.is-numbers .log-pager-row { display:grid; grid-template-columns:1fr auto 1fr; }
.log-pager.is-numbers .is-newer { justify-self:start; }.log-pager.is-numbers .is-older { justify-self:end; }
.log-pager-pages { display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.log-pager-num { position:relative; display:grid; place-items:center; min-width:42px; height:42px; padding:0 8px; box-sizing:border-box; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-text); font-weight:700; font-variant-numeric:tabular-nums; text-decoration:none; transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s ease, color .15s ease; }
.log-site a.log-pager-num { color:var(--log-text); }.log-site a.log-pager-num:hover { transform:translateY(-3px); border-color:var(--log-accent); color:var(--log-accent); }
.log-pager-num[aria-current] { border-color:var(--log-accent); background:var(--log-accent); color:var(--log-on-accent); box-shadow:0 6px 16px color-mix(in srgb,var(--log-accent) 32%,transparent); animation:log-pager-pop .45s cubic-bezier(.3,1.6,.5,1) both; }
.log-pager-num[aria-current]::after { content:""; position:absolute; left:50%; bottom:-11px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--log-accent); }
.log-pager-gap { display:flex; gap:3px; padding:0 4px; }.log-pager-gap span { width:4px; height:4px; border-radius:50%; background:var(--log-muted); opacity:.6; }
.log-pager-step,.log-pager-back { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px 0 8px; box-sizing:border-box; border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); box-shadow:var(--log-shadow); color:var(--log-accent); font-weight:700; white-space:nowrap; text-decoration:none; transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s ease; }
.log-pager-step.is-older { padding:0 8px 0 18px; }
.log-pager-arrow { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--log-accent); color:var(--log-on-accent); transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.log-pager-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
a.log-pager-step:hover,.log-pager-back:hover { transform:translateY(-2px); border-color:var(--log-accent); }
a.log-pager-step.is-older:hover .log-pager-arrow { transform:translateX(3px); }a.log-pager-step.is-newer:hover .log-pager-arrow,.log-pager-back:hover .log-pager-arrow { transform:translateX(-3px); }
.log-pager-step[aria-disabled] { color:var(--log-muted); box-shadow:none; opacity:.5; }.log-pager-step[aria-disabled] .log-pager-arrow { background:var(--log-line); color:var(--log-muted); }
.log-pager-jump { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:999px; background:color-mix(in srgb,var(--log-card) 70%,transparent); font-size:13px; color:var(--log-muted); white-space:nowrap; }.log-site .log-pager-jump label { display:flex; align-items:center; gap:8px; margin:0; }
.log-site .log-pager-jump input[type=number][name=page] { flex:none; width:64px; margin:0; height:34px; box-sizing:border-box; padding:0 8px; border:1px solid var(--log-field); border-radius:10px; background:var(--log-card); color:var(--log-text); font:inherit; font-weight:700; text-align:center; }
.log-pager-jump button { height:34px; padding:0 14px; border:1px solid color-mix(in srgb,var(--log-accent) 45%,var(--log-line)); border-radius:999px; background:var(--log-card); color:var(--log-accent); font:inherit; font-weight:700; cursor:pointer; }.log-pager-jump button:hover { border-color:var(--log-accent); }
.log-pager-more { display:flex; flex-direction:column; align-items:center; gap:2px; width:min(340px,100%); box-sizing:border-box; padding:13px 28px; border-radius:999px; background:var(--log-accent); color:var(--log-on-accent); box-shadow:0 8px 22px color-mix(in srgb,var(--log-accent) 30%,transparent); font-size:16px; font-weight:800; text-decoration:none; transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.log-site .log-pager-more { color:var(--log-on-accent); }
.log-pager-more small { font-size:12px; font-weight:600; opacity:.85; }.log-pager-more:hover { transform:translateY(-2px); }
.log-pager-more[aria-busy="true"] { pointer-events:none; opacity:.8; }.log-pager-more[aria-busy="true"] > span::after { content:"…"; display:inline-block; width:1em; overflow:hidden; text-align:left; vertical-align:bottom; animation:log-pager-wait 1s steps(3) infinite; }
.log-pager-end { display:flex; align-items:center; gap:10px; margin:0; color:var(--log-muted); font-size:13px; font-weight:700; }.log-pager-end::before,.log-pager-end::after { content:""; width:28px; height:8px; background:radial-gradient(circle at 4px 4px,var(--log-accent) 2px,transparent 2.5px) 0 0 / 10px 8px repeat-x; opacity:.5; }
.log-pager-back { min-height:40px; font-size:13px; }.log-pager-back .log-pager-arrow { width:26px; height:26px; }
.log-pager a:focus-visible,.log-pager button:focus-visible,.log-pager input:focus-visible,.log-post-nav a:focus-visible,.log-all-chip:focus-visible,.log-all-link:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-site .log-pager a:hover,.log-site .log-post-nav a:hover,.log-site .log-all-chip:hover,.log-site .log-all-link:hover { text-decoration:none; }
@keyframes log-pager-pop { 0% { transform:scale(.6); } 60% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes log-pager-wait { from { width:0; } to { width:1em; } }
.log-pager-added { animation:log-pager-in .4s ease both; }@keyframes log-pager-in { from { opacity:0; transform:translateY(10px); } }
/* "All posts": one look everywhere (sidebar row, filtered lists, single posts). */
.log-all-icon { width:18px; height:18px; flex-shrink:0; fill:currentColor; }
.log-all-count { min-width:28px; padding:2px 9px; box-sizing:border-box; border-radius:999px; background:color-mix(in srgb,var(--log-accent) 12%,var(--log-card)); color:var(--log-accent); font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.log-all-link { display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); font-weight:650; text-decoration:none; transition:border-color .15s ease; }.log-all-link .log-all-count { margin-left:auto; }.log-all-link:hover { border-color:var(--log-accent); }
.log-all-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 6px 5px 12px; border:1px solid color-mix(in srgb,var(--log-accent) 40%,var(--log-line)); border-radius:999px; background:var(--log-card); color:var(--log-accent); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s ease; }.log-all-chip:hover { transform:translateY(-2px); border-color:var(--log-accent); }
.log-archive-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 20px; }.log-archive-head .log-archive-title { margin:0; padding:0; }.log-archive-count { color:var(--log-muted); font-size:13px; }.log-archive-head .log-all-chip { margin-left:auto; }
/* Single post: newer / older neighbours. A solid accent tab on the outer edge carries the arrow; the title sits beside it. */
.log-post-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 36px; }
.log-post-nav-link { display:flex; align-items:stretch; min-width:0; min-height:84px; overflow:hidden; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); box-shadow:var(--log-shadow); color:var(--log-text); text-decoration:none; transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s ease; }
.log-site .log-post-nav-link { color:var(--log-text); }
.log-post-nav-link.is-older { flex-direction:row-reverse; }.log-post-nav-link.is-empty { visibility:hidden; }
.log-post-nav-tab { display:grid; place-items:center; flex:none; width:36px; background:var(--log-accent); color:var(--log-on-accent); transition:width .2s cubic-bezier(.3,1.6,.5,1); }
.log-post-nav-tab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.log-post-nav-body { display:grid; flex:1; align-content:center; gap:4px; min-width:0; padding:12px 16px; }.is-older .log-post-nav-body { text-align:right; }
.log-post-nav-kicker { display:flex; align-items:center; gap:8px; color:var(--log-accent); font-size:12px; font-weight:700; line-height:1.4; }
.is-older .log-post-nav-kicker { justify-content:flex-end; }.log-post-nav-kicker time { color:var(--log-muted); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.log-post-nav-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
a.log-post-nav-link:hover { transform:translateY(-2px); border-color:var(--log-accent); }
a.log-post-nav-link:hover .log-post-nav-tab { width:42px; }
a.log-post-nav-link.is-newer:hover .log-post-nav-tab svg { transform:translateX(-3px); }a.log-post-nav-link.is-older:hover .log-post-nav-tab svg { transform:translateX(3px); }
.log-post-nav .log-all-chip { grid-column:1 / -1; justify-self:center; margin-top:4px; }
@media(max-width:900px) { .log-pager,.log-post-nav,.log-archive-head { padding:0 16px; } }
@media(max-width:600px) {
    .log-pager.is-numbers .log-pager-row { grid-template-columns:1fr 1fr; gap:14px 10px; }
    .log-pager.is-numbers .log-pager-pages { grid-column:1 / -1; grid-row:1; justify-content:center; }
    .log-pager-step { justify-content:center; width:100%; }.log-pager.is-numbers .is-newer,.log-pager.is-numbers .is-older { justify-self:stretch; }
    .log-pager.is-simple .log-pager-row > * { flex:1; }
    .log-pager-pages { gap:4px; }.log-pager-num { min-width:38px; height:38px; padding:0 6px; }
    .log-post-nav { gap:8px; }.log-post-nav-link { min-height:76px; }.log-post-nav-tab { width:28px; }a.log-post-nav-link:hover .log-post-nav-tab { width:32px; }.log-post-nav-tab svg { width:17px; height:17px; }.log-post-nav-body { gap:3px; padding:10px 10px 10px 12px; }.is-older .log-post-nav-body { padding:10px 12px 10px 10px; }.log-post-nav-kicker { flex-wrap:wrap; gap:0 6px; font-size:11px; }.log-post-nav-kicker time { font-size:10px; }.log-post-nav-title { -webkit-line-clamp:3; font-size:14px; line-height:1.5; }.is-older .log-post-nav-body { text-align:left; }.is-older .log-post-nav-kicker { justify-content:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .log-pager *,.log-post-nav-link,.log-post-nav-tab,.log-post-nav-tab svg,.log-all-chip,.log-pager-added { transition:none!important; animation:none!important; } }
/* Search: sidebar box on the public LOG, and the admin list search. */
.log-search { position:relative; display:flex; align-items:center; margin:16px 0; }
.log-site .log-search input[type=search][name=q] { width:100%; height:48px; margin:0; padding:0 52px 0 18px; border:1px solid var(--log-field); border-radius:999px; background:var(--log-card); color:var(--log-text); font:inherit; font-size:15px; transition:border-color .15s ease, box-shadow .15s ease; }
.log-site .log-search input[type=search][name=q]::placeholder { color:var(--log-muted); opacity:1; }
.log-site .log-search input[type=search][name=q]:focus { outline:2px solid var(--log-accent); outline-offset:2px; border-color:var(--log-accent); }
.log-search input::-webkit-search-cancel-button { cursor:pointer; }
.log-search button { position:absolute; right:6px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--log-accent); color:var(--log-on-accent); cursor:pointer; transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.log-search button:hover { transform:scale(1.08) rotate(-8deg); }.log-search button:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-search svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; }
/* Search hits: one solid highlighter with its own dark ink, so the text stays readable on light and dark themes. */
.log-post mark { padding:0 2px; border-radius:4px; background:#ffe27a; color:#211a06; }
@media(prefers-reduced-motion:reduce) { .log-search button,.log-site .log-search input { transition:none; } }
/* Site header on phones: only the title row keeps clear of the MENU button; the description uses the full width.
   Titles of 8+ characters (class from nl_title_fit) shrink to fit one line. */
.log-site-title > a > span { min-width:0; line-height:1.25; overflow-wrap:anywhere; }
@media(max-width:900px) {
    .log-site-header { padding-right:24px; }
    .log-site-title > a { max-width:calc(100% - 60px); }
    .log-site-title > a.log-title-long { font-size:clamp(15px, calc((100vw - 24px - 84px - 62px) / var(--log-title-em, 9)), 1.7rem); }
}
@media(max-width:480px) {
    .log-site-header { padding:32px 16px 20px; }
    .log-site-title > a.log-title-long { font-size:clamp(15px, calc((100vw - 16px - 76px - 62px) / var(--log-title-em, 9)), 1.7rem); }
}
/* iOS zooms into any field under 16px; touch screens always get at least 16px text in fields (sizes stay fixed). */
@media(pointer:coarse) { .log-site input:not([type=checkbox]):not([type=radio]):not([type=range]),.log-site select,.log-site textarea,html[data-log-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-log-theme] select,html[data-log-theme] textarea { font-size:max(16px,1em)!important; } }
/* Like: first in the share row. Tap +1, hold +10 every 70 frames (the fill shows the way to the next +10). */
.log-site .log-like { --share-accent:var(--like-ink); --like-tint:color-mix(in srgb,#d63d6e 16%,transparent); position:relative; background:linear-gradient(var(--like-tint),var(--like-tint)) left / calc(var(--like-hold,0) * 100%) 100% no-repeat,var(--log-card); font-variant-numeric:tabular-nums; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
html[data-log-theme^="dark"] .log-site .log-like { --share-accent:#ff8fb1; --like-tint:color-mix(in srgb,#ff8fb1 22%,transparent); }
html:not(.log-like-ready) .log-like { display:none; }
.log-like-heart { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; transition:fill .15s ease; }
.log-site .log-like.is-liked,.log-site .log-like.is-holding { color:var(--share-accent); border-color:color-mix(in srgb,var(--share-accent) 55%,var(--log-line)); }
.log-like.is-liked .log-like-heart { fill:currentColor; }
.log-like.is-full { cursor:default; }
.log-like.is-beat .log-like-heart { animation:log-like-beat .32s cubic-bezier(.3,1.8,.5,1); }
@keyframes log-like-beat { 40% { transform:scale(1.45); } }
.log-like-pop { position:absolute; left:50%; bottom:calc(100% + 6px); padding:3px 9px; border-radius:999px; background:var(--share-accent); color:#fff; font-size:12px; font-weight:800; line-height:1.4; white-space:nowrap; pointer-events:none; transform:translateX(-50%); animation:log-like-pop .9s ease-out forwards; }
html[data-log-theme^="dark"] .log-like-pop { color:#3a1020; }
.log-like-pop::after { content:""; position:absolute; left:50%; top:100%; border:5px solid transparent; border-top-color:var(--share-accent); transform:translateX(-50%); }
@keyframes log-like-pop { from { opacity:0; transform:translate(-50%,6px) scale(.7); } 20% { opacity:1; transform:translate(-50%,0) scale(1); } 70% { opacity:1; } to { opacity:0; transform:translate(-50%,-16px); } }
@media(prefers-reduced-motion:reduce) { .log-like.is-beat .log-like-heart { animation:none; }.log-like-pop { animation-duration:.9s; animation-name:log-like-fade; } }
@keyframes log-like-fade { from,70% { opacity:1; } to { opacity:0; } }
/* Tiles: picture, date and title (the list layout "タイル"). The newest post on the top page opens wide. */
.log-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 28px; padding:0; list-style:none; }
.log-tile { min-width:0; }
.log-tile > a { display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid var(--log-line); border-radius:var(--log-radius); background:var(--log-card); box-shadow:var(--log-shadow); color:var(--log-text); text-decoration:none; transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .15s ease; }
.log-site .log-tile > a { color:var(--log-text); }.log-site .log-tile > a:hover { text-decoration:none; transform:translateY(-3px); border-color:var(--log-accent); }
.log-tile > a:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-tile-thumb { position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:var(--log-bg); }
.log-tile-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.log-tile > a:hover .log-tile-thumb img { transform:scale(1.045); }
.log-tile-blank { display:grid; place-items:center; width:100%; height:100%; background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--log-accent) 22%,var(--log-card)),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--log-cyan) 14%,var(--log-bg)),var(--log-bg)); color:var(--log-accent); font-size:clamp(28px,5vw,44px); font-weight:800; }
/* New posts: a mark on the tile's picture, or at the top left of the post in the mini blog. The text is set in the settings (NEW, 新…). */
.log-tile-badge,.log-post-new { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--log-accent); color:var(--log-on-accent); font-size:11px; font-weight:800; line-height:1.5; letter-spacing:.12em; white-space:nowrap; box-shadow:0 2px 8px #0000001f; pointer-events:none; }
.log-tile-badge::before,.log-post-new::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.log-tile-badge { top:10px; left:10px; }
.log-post:has(> .log-post-new) { position:relative; }.log-post-new { top:-10px; left:18px; }
.log-tile-body { display:grid; align-content:start; gap:6px; flex:1; padding:12px 16px 16px; }
.log-tile-body time { color:var(--log-accent); font-size:12px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.log-tile-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; line-height:1.6; overflow-wrap:anywhere; }
.log-tiles .log-pager-added > a { animation:log-pager-in .4s ease both; }
.log-archive-head + .log-tiles { margin-top:0; }
/* Related posts under a post: smaller tiles, three across. */
.log-related { margin:8px 0 32px; }
.log-related h2 { display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:1.05rem; }
.log-related h2::before { content:""; width:6px; height:1.2em; border-radius:3px; background:var(--log-accent); }
.log-related h2::after { content:""; flex:1; height:1px; background:var(--log-line); }
.log-related-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; }
.log-related-list .log-tile-body { gap:4px; padding:10px 12px 12px; }.log-related-list .log-tile-title { font-size:14px; line-height:1.55; }.log-related-list .log-tile-body time { font-size:11px; }
@media(max-width:900px) { .log-tiles { padding:0 16px; gap:14px; }.log-related { padding:0 16px; }.log-related-list { padding:0; } }
@media(max-width:640px) {
    .log-tiles,.log-related-list { gap:10px; }
    .log-tile-body { padding:10px 12px 12px; gap:4px; }.log-tile-body time { font-size:11px; }.log-tile-title { font-size:14px; line-height:1.55; -webkit-line-clamp:3; }
    .log-related-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:340px) { .log-tiles,.log-related-list { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .log-tile > a,.log-tile-thumb img { transition:none; }.log-tiles .log-pager-added > a { animation:none; } }
/* Site title: the page's h1 on lists (a p on posts and fixed pages), with the description under it when shown. A logo replaces icon and name. */
.log-site-title { margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }
.log-site-title.has-logo > a { display:inline-block; max-width:100%; line-height:0; vertical-align:top; }
.log-site-logo { display:block; width:auto; height:auto; max-width:min(100%,480px); max-height:64px; }
.log-site-title.has-logo + .log-site-description { margin-top:12px; }
@media(max-width:900px) { .log-site-title.has-logo > a { max-width:calc(100% - 60px); }.log-site-logo { max-height:44px; } }
/* Top menu: one row of links under the title. When it does not fit it scrolls sideways (swipe on phones);
   fades and arrows mark the hidden side, the row slides once to show it moves, and the arrow nudges until it is used. */
.log-topmenu { max-width:1060px; margin:0 auto 22px; padding:0 24px; box-sizing:border-box; overflow-x:clip; }
.log-topmenu-inner { position:relative; border-bottom:1px solid var(--log-line); }
.log-topmenu-scroller { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:36px; -webkit-overflow-scrolling:touch; }
.log-topmenu-scroller::-webkit-scrollbar { display:none; }
.log-topmenu-links { display:flex; gap:2px; width:max-content; min-width:100%; margin:0; padding:0; list-style:none; }
.log-topmenu-links li { flex:none; scroll-snap-align:start; }
.log-site .log-topmenu-links a { position:relative; display:flex; align-items:center; min-height:46px; padding:0 15px; border-radius:10px 10px 0 0; color:var(--log-muted); font-size:14.5px; font-weight:650; letter-spacing:.02em; text-decoration:none; white-space:nowrap; transition:color .15s ease,background-color .15s ease; }
.log-site .log-topmenu-links a:hover { color:var(--log-text); background:color-mix(in srgb,var(--log-accent) 8%,transparent); text-decoration:none; }
.log-site .log-topmenu-links a[aria-current="page"] { color:var(--log-accent); }
.log-topmenu-links a[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--log-accent); }
.log-topmenu-links a:focus-visible { outline:2px solid var(--log-accent); outline-offset:-3px; }
.log-topmenu-inner::before,.log-topmenu-inner::after { content:""; position:absolute; top:0; bottom:1px; z-index:1; width:56px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.log-topmenu-inner::before { left:0; background:linear-gradient(to right,var(--log-bg) 35%,transparent); }
.log-topmenu-inner::after { right:0; background:linear-gradient(to left,var(--log-bg) 35%,transparent); }
.log-topmenu.can-prev .log-topmenu-inner::before,.log-topmenu.can-next .log-topmenu-inner::after { opacity:1; }
.log-topmenu-arrow { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:30px; height:30px; margin-top:-15px; padding:0; border:1px solid var(--log-line); border-radius:50%; background:var(--log-card); color:var(--log-accent); box-shadow:0 2px 10px #00000024; cursor:pointer; }
.log-topmenu-arrow[hidden] { display:none; }
.log-topmenu-arrow.is-prev { left:2px; }.log-topmenu-arrow.is-next { right:2px; }
.log-topmenu-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.log-topmenu-arrow:hover { border-color:var(--log-accent); }
.log-topmenu.can-next:not(.is-touched) .log-topmenu-arrow.is-next { animation:log-topmenu-nudge 1.3s ease-in-out infinite; }
.log-topmenu.is-hinting .log-topmenu-links { animation:log-topmenu-peek 1.5s cubic-bezier(.45,0,.2,1) .3s both; }
@keyframes log-topmenu-nudge { 0%,100% { transform:translateX(-6px); } 50% { transform:translateX(0); } }
@keyframes log-topmenu-peek { 0%,100% { transform:translateX(0); } 40%,58% { transform:translateX(-64px); } }
@media(max-width:900px) {
    .log-topmenu { margin-bottom:14px; padding:0; }
    .log-topmenu-scroller { padding:0 6px; }
    .log-site .log-topmenu-links a { min-height:44px; padding:0 13px; font-size:14px; }
    .log-topmenu-arrow { width:28px; height:28px; margin-top:-14px; }
}
@media(prefers-reduced-motion:reduce) { .log-topmenu .log-topmenu-links,.log-topmenu .log-topmenu-arrow { animation:none!important; }.log-topmenu-inner::before,.log-topmenu-inner::after,.log-site .log-topmenu-links a { transition:none; } }
/* Fixed pages: wide (no sidebar, full width) and narrow (no sidebar, the main column centred) on PCs. Phones are unchanged: the sidebar stays in MENU. */
@media(min-width:901px) {
    .log-layout-wide .log-site-grid,.log-layout-narrow .log-site-grid { grid-template-columns:minmax(0,1fr); }
    .log-layout-wide .log-sidebar,.log-layout-narrow .log-sidebar { display:none; }
    .log-layout-narrow .log-site-main { width:100%; max-width:724px; margin:0 auto; }
}
.log-page > h1 { margin:0 0 22px; font-size:1.6rem; line-height:1.45; overflow-wrap:anywhere; }
.log-page-body { line-height:1.95; overflow-wrap:anywhere; }
.log-page-body > :first-child { margin-top:0; }.log-page-body > :last-child { margin-bottom:0; }
.log-body .log-heading-2 { margin:1.6em 0 .6em; padding-bottom:.35em; border-bottom:2px solid var(--log-line); font-size:1.25rem; line-height:1.5; }
.log-body .log-heading-3 { margin:1.4em 0 .5em; padding-left:.6em; border-left:4px solid var(--log-accent); font-size:1.08rem; line-height:1.5; }
.log-body .log-heading-4 { margin:1.2em 0 .4em; font-size:1rem; line-height:1.5; }
.log-body > .log-heading-2:first-child,.log-body > .log-heading-3:first-child,.log-body > .log-heading-4:first-child { margin-top:.4em; }
.log-body h2[id],.log-body h3[id],.log-body h4[id] { scroll-margin-top:16px; }
/* Markdown in posts: line breaks stay as typed, so blocks keep only a small margin. */
.log-body ul,.log-body ol,.log-body blockquote,.log-body pre,.log-body .log-md-table { margin:.5em 0; }
.log-body ul,.log-body ol { padding-left:1.6em; }.log-body li + li { margin-top:.2em; }.log-body li > ul,.log-body li > ol { margin:.2em 0 0; }
.log-body li::marker { color:var(--log-accent); }
.log-body blockquote { padding:.6em 1em; border-left:4px solid var(--log-line); border-radius:0 10px 10px 0; background:var(--log-bg); color:var(--log-muted); }
.log-body code { padding:.12em .4em; border-radius:6px; background:var(--log-bg); font:.9em/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.log-body pre { padding:12px 14px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-bg); line-height:1.6; }
.log-body pre code { padding:0; background:none; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-body hr { margin:1.4em 0; border:0; border-top:1px solid var(--log-line); }
.log-body del { color:var(--log-muted); }
/* Ruby (|漢字《かんじ》, in posts, pages, titles and the table of contents): a small reading over the words. */
.log-site ruby,.log-body ruby,.log-page-body ruby { ruby-align:center; overflow-wrap:normal; }
.log-site rt,.log-body rt,.log-page-body rt { font-size:.55em; font-weight:500; line-height:1.2; letter-spacing:.02em; text-align:center; }
.log-body img.log-md-image { max-width:100%; height:auto; border-radius:8px; vertical-align:middle; }
/* The table of contents (above the first 見出し2 of an article or page). */
.log-toc { margin:1.2em 0 1.6em; border:1px solid var(--log-line); border-radius:12px; background:var(--log-bg); font-size:.94rem; line-height:1.6; }
.log-toc > summary { display:flex; align-items:center; gap:8px; padding:10px 16px; color:var(--log-text); font-weight:700; cursor:pointer; list-style:none; }
.log-toc > summary::-webkit-details-marker { display:none; }
.log-toc > summary::before { content:""; flex:0 0 auto; width:7px; height:7px; border-right:2px solid var(--log-accent); border-bottom:2px solid var(--log-accent); transform:rotate(-45deg); transition:transform .15s ease; }
.log-toc[open] > summary::before { transform:rotate(45deg); }
/* + when folded, − when open, at the right end: it reads as something that opens. The marks are viewer/icons/*.svg (shared by every article). */
.log-toc > summary::after { content:""; flex:0 0 auto; width:18px; height:18px; margin-left:auto; background:var(--log-accent); -webkit-mask:url("icons/plus.svg?v=bcdbad81") center/contain no-repeat; mask:url("icons/plus.svg?v=bcdbad81") center/contain no-repeat; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.log-toc[open] > summary::after { -webkit-mask-image:url("icons/minus.svg?v=6a8ecd43"); mask-image:url("icons/minus.svg?v=6a8ecd43"); transform:rotate(180deg); }
.log-toc > summary:focus-visible { outline:2px solid var(--log-accent); outline-offset:-2px; border-radius:12px; }
.log-toc-list { margin:0; padding:0 16px 12px 16px; list-style:none; counter-reset:log-toc; }
.log-body .log-toc-list,.log-page-body .log-toc-list { margin:0; padding:0 16px 12px; }
.log-toc-list li { margin:0; }
.log-toc-list li + li { margin-top:.15em; }
.log-toc-list a { display:block; padding:3px 0; color:var(--log-text); text-decoration:none; }
.log-toc-list a:hover { color:var(--log-accent); text-decoration:underline; }
.log-toc-list .log-toc-2 { counter-increment:log-toc; }
.log-toc-list .log-toc-2 > a::before { content:counter(log-toc) ". "; color:var(--log-accent); font-weight:700; }
.log-toc-list .log-toc-3 { padding-left:1.3em; font-size:.95em; }
.log-toc-list .log-toc-4 { padding-left:2.6em; font-size:.9em; color:var(--log-muted); }
.log-body .log-toc-list li::marker,.log-page-body .log-toc-list li::marker { content:none; }
@media(prefers-reduced-motion:reduce) { .log-toc > summary::before,.log-toc > summary::after { transition:none; } }
/* The table of contents beside the article (wide screens): it sticks at the top while the article scrolls. */
.log-site-grid:has(> .log-toc-rail) { position:relative; }
.log-toc-rail { display:none; position:absolute; top:0; bottom:0; right:100%; width:196px; }
.log-toc-rail-card { position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:16px 12px 14px 14px; border:1px solid var(--log-line); border-radius:20px; background:color-mix(in srgb,var(--log-card) 90%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--log-shadow); opacity:0; transform:translateX(-14px); transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.log-toc-rail.is-ready .log-toc-rail-card { opacity:1; transform:none; }
.log-toc-rail-title { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:var(--log-accent); font-size:12.5px; font-weight:800; letter-spacing:.12em; }
.log-toc-rail-title svg,.log-toc-fab-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.log-toc-progress { height:5px; margin:0 2px 12px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--log-line) 70%,transparent); }
.log-toc-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--log-accent),var(--log-cyan,var(--log-accent))); transform:scaleX(var(--toc-progress,0)); transform-origin:left; transition:transform .25s ease-out; }
.log-toc-rail .log-toc-list,.log-toc-sheet .log-toc-list { position:relative; isolation:isolate; margin:0; padding:0 0 0 12px; list-style:none; }
.log-toc-rail .log-toc-list::before,.log-toc-sheet .log-toc-list::before { content:""; position:absolute; top:12px; bottom:12px; left:4px; width:2px; border-radius:2px; background:var(--log-line); }
.log-toc-rail .log-toc-list li,.log-toc-sheet .log-toc-list li { position:relative; margin:0; padding:0; font-size:inherit; color:inherit; }
.log-toc-rail .log-toc-list li + li,.log-toc-sheet .log-toc-list li + li { margin-top:2px; }
.log-toc-rail .log-toc-list li::before,.log-toc-sheet .log-toc-list li::before { content:""; position:absolute; z-index:1; left:-11px; top:calc(.75em + 1px); width:8px; height:8px; box-sizing:border-box; border:2px solid var(--log-line); border-radius:50%; background:var(--log-card); transition:background-color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease; }
.log-toc-rail .log-toc-list li.is-past::before,.log-toc-sheet .log-toc-list li.is-past::before { border-color:var(--log-accent); background:var(--log-accent); }
.log-toc-rail .log-toc-list li.is-active::before,.log-toc-sheet .log-toc-list li.is-active::before { border-color:var(--log-accent); background:var(--log-card); transform:scale(1.45); box-shadow:0 0 0 4px color-mix(in srgb,var(--log-accent) 18%,transparent); }
.log-toc-rail .log-toc-list a,.log-toc-sheet .log-toc-list a { position:relative; z-index:1; display:block; padding:5px 8px 5px 9px; border-radius:10px; color:var(--log-muted); font-size:13px; line-height:1.5; text-decoration:none; overflow-wrap:anywhere; transition:color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); }
.log-toc-rail .log-toc-list a:hover,.log-toc-sheet .log-toc-list a:hover { color:var(--log-accent); text-decoration:none; transform:translateX(3px); }
.log-toc-rail .log-toc-list a:focus-visible,.log-toc-sheet .log-toc-list a:focus-visible { outline:2px solid var(--log-accent); outline-offset:-2px; }
.log-toc-rail .log-toc-list .is-active > a,.log-toc-sheet .log-toc-list .is-active > a { color:var(--log-text); font-weight:700; }
.log-toc-rail .log-toc-list .log-toc-3 > a,.log-toc-sheet .log-toc-list .log-toc-3 > a { padding-left:20px; font-size:12.5px; }
.log-toc-rail .log-toc-list .log-toc-4 > a,.log-toc-sheet .log-toc-list .log-toc-4 > a { padding-left:31px; font-size:12px; }
.log-toc-rail .log-toc-list .log-toc-2 > a::before,.log-toc-sheet .log-toc-list .log-toc-2 > a::before { margin-right:2px; }
.log-toc-marker { position:absolute; z-index:0; top:0; left:12px; right:0; height:0; border-radius:10px; background:color-mix(in srgb,var(--log-accent) 13%,transparent); opacity:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1),height .35s ease,opacity .3s ease; }
.log-toc-marker.is-on { opacity:1; }
/* The heading a link jumped to glows for a moment. */
.log-body .is-toc-target,.log-page-body .is-toc-target { animation:log-toc-glow 1.3s ease-out; border-radius:6px; }
@keyframes log-toc-glow { 0% { background:color-mix(in srgb,var(--log-accent) 22%,transparent); box-shadow:0 0 0 6px color-mix(in srgb,var(--log-accent) 22%,transparent); } 100% { background:transparent; box-shadow:0 0 0 6px transparent; } }
/* The floating button (narrower screens). The owner's 書く and 管理 buttons are in the same corner, so it sits above them. */
.log-toc-fab { position:fixed; right:max(24px,calc((100% - 1060px) / 2 + 24px)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:19; display:grid; place-items:center; align-content:center; gap:0; width:60px; height:60px; padding:0; border:1px solid var(--log-line); border-radius:50%; background:color-mix(in srgb,var(--log-card) 92%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--log-accent); box-shadow:0 8px 24px #0000002b; font:inherit; cursor:pointer; visibility:hidden; opacity:0; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.log-toc-fab.is-owner { bottom:calc(24px + 58px + 12px + 42px + 14px + env(safe-area-inset-bottom)); }
.log-toc-fab.is-shown { visibility:visible; opacity:1; animation:log-toc-puff .75s cubic-bezier(.34,1.56,.64,1) backwards; }
/* ぽわん: it swells a little, settles, and a soft ring spreads once around it. */
.log-toc-fab::after { content:""; position:absolute; inset:-2px; border-radius:50%; pointer-events:none; }
.log-toc-fab.is-shown::after { animation:log-toc-halo 1.1s ease-out .3s backwards; }
@keyframes log-toc-puff { 0% { opacity:0; transform:scale(.35); } 55% { opacity:1; transform:scale(1.12); } 78% { transform:scale(.96); } 100% { transform:none; } }
@keyframes log-toc-halo { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--log-accent) 45%,transparent); } 100% { box-shadow:0 0 0 18px color-mix(in srgb,var(--log-accent) 0%,transparent); } }
.log-toc-fab:hover { transform:translateY(-3px); }.log-toc-fab:active { transform:scale(.92); }
.log-toc-fab:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-toc-fab-ring { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); pointer-events:none; }
.log-toc-fab-ring circle { fill:none; stroke:color-mix(in srgb,var(--log-line) 80%,transparent); stroke-width:3; }
.log-toc-fab-ring .log-toc-fab-done { stroke:var(--log-accent); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--toc-progress,0) * 100); transition:stroke-dashoffset .25s ease-out; }
.log-toc-fab-icon { width:20px; height:20px; }
.log-toc-fab-label { margin-top:1px; font-size:10px; font-weight:800; letter-spacing:.08em; line-height:1; }
/* The sheet the button opens: it rises from the bottom. */
.log-toc-sheet { width:min(560px,100%); max-width:100%; max-height:min(74vh,640px); margin:auto auto 0; padding:0 0 calc(16px + env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; border:1px solid var(--log-line); border-bottom:0; border-radius:24px 24px 0 0; background:var(--log-card); color:var(--log-text); box-shadow:0 -10px 40px #00000033; }
.log-toc-sheet[open] { animation:log-toc-rise .45s cubic-bezier(.22,1,.36,1); }
.log-toc-sheet::backdrop { background:#10223866; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.log-toc-sheet[open]::backdrop { animation:log-toc-fade .3s ease; }
@keyframes log-toc-rise { from { transform:translateY(100%); } to { transform:none; } }
@keyframes log-toc-fade { from { opacity:0; } to { opacity:1; } }
.log-toc-sheet-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 12px; background:var(--log-card); }
.log-toc-sheet-head::before { content:""; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--log-line); }
.log-toc-sheet-head h2 { margin:0; color:var(--log-accent); font-size:15px; letter-spacing:.12em; }
.log-toc-sheet-close { min-height:36px; padding:6px 14px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-bg); color:var(--log-text); font:inherit; font-size:13px; cursor:pointer; }
.log-toc-sheet .log-toc-list { margin:0 20px 0 22px; }
.log-toc-sheet .log-toc-list a { padding:10px 10px 10px 12px; font-size:15px; }
.log-toc-sheet .log-toc-list .log-toc-3 > a { padding-left:24px; font-size:14px; }.log-toc-sheet .log-toc-list .log-toc-4 > a { padding-left:36px; font-size:13.5px; }
.log-toc-sheet .log-toc-list li::before { top:calc(10px + .62em); }
.log-toc-sheet .log-toc-list .is-active > a { background:color-mix(in srgb,var(--log-accent) 12%,transparent); }
/* Wide enough for the rail beside the article (196px and its gap in the left margin): no button. */
@media(min-width:1500px) {
    .log-toc-rail { display:block; }
    .log-toc-fab { display:none; }
}
/* A narrow fixed page centres a 724px column, so the rail fits beside it on smaller screens too. */
@media(min-width:1200px) {
    .log-layout-narrow .log-toc-rail { display:block; right:calc(50% + 362px + 24px); }
    .log-layout-narrow .log-toc-fab { display:none; }
}
@media(prefers-reduced-motion:reduce) { .log-toc-rail-card,.log-toc-progress i,.log-toc-rail .log-toc-list li::before,.log-toc-sheet .log-toc-list li::before,.log-toc-rail .log-toc-list a,.log-toc-sheet .log-toc-list a,.log-toc-marker,.log-toc-fab,.log-toc-fab-ring .log-toc-fab-done { transition:none; }.log-toc-fab.is-shown,.log-toc-fab.is-shown::after,.log-toc-sheet[open],.log-toc-sheet[open]::backdrop,.log-body .is-toc-target,.log-page-body .is-toc-target { animation:none; } }
.log-page-body h2 { margin:2.1em 0 .8em; padding-bottom:.4em; border-bottom:2px solid var(--log-line); font-size:1.3rem; line-height:1.5; }
.log-page-body h3 { margin:1.8em 0 .6em; padding-left:.65em; border-left:4px solid var(--log-accent); font-size:1.1rem; line-height:1.5; }
.log-page-body h4 { margin:1.5em 0 .5em; font-size:1rem; }
.log-page-body p,.log-page-body ul,.log-page-body ol,.log-page-body blockquote,.log-page-body pre,.log-page-body .log-md-table { margin:0 0 1.15em; }
.log-page-body ul,.log-page-body ol { padding-left:1.6em; }.log-page-body li + li { margin-top:.3em; }.log-page-body li > ul,.log-page-body li > ol { margin:.3em 0 0; }
.log-page-body li::marker { color:var(--log-accent); }
.log-page-body blockquote { padding:.7em 1.1em; border-left:4px solid var(--log-line); border-radius:0 10px 10px 0; background:var(--log-bg); color:var(--log-muted); }
.log-page-body blockquote > :last-child { margin-bottom:0; }
.log-page-body code { padding:.12em .4em; border-radius:6px; background:var(--log-bg); font:.9em/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.log-page-body pre { padding:14px 16px; border:1px solid var(--log-line); border-radius:10px; background:var(--log-bg); line-height:1.6; }
.log-page-body pre code { padding:0; background:none; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-page-body hr { margin:2.2em 0; border:0; border-top:1px solid var(--log-line); }
.log-page-body del { color:var(--log-muted); }
/* Code blocks wrap long lines (no sideways scrolling) and carry a COPY button (viewer/log-code.js) on the frame's top right corner, half above it. */
.log-code-block { position:relative; margin:22px 0 .5em; }.log-page-body .log-code-block { margin:26px 0 1.15em; }
.log-body .log-code-block > pre,.log-page-body .log-code-block > pre { margin:0; padding-top:18px; }
.log-code-copy { position:absolute; top:0; right:12px; z-index:1; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; transform:translateY(-50%); border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-muted); box-shadow:0 2px 8px #0000001f; font:inherit; font-size:.7rem; font-weight:700; line-height:1; letter-spacing:.06em; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .15s ease,border-color .15s ease,background-color .15s ease; }
.log-code-copy:hover { color:var(--log-accent); border-color:var(--log-accent); }.log-code-copy:active { transform:translateY(-50%) scale(.95); }.log-code-copy:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-code-copy svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.log-code-copy .log-code-icon-done { display:none; }
.log-code-copy.is-copied { color:#047857; background:var(--ok-bg); border-color:#6ee7b7; }.log-code-copy.is-error { color:var(--danger); background:var(--err-bg); border-color:var(--danger); }
html[data-log-theme^="dark"] .log-code-copy.is-copied { color:#8fe0b5; border-color:#4f9f78; }
.log-code-copy.is-copied .log-code-icon-copy { display:none; }.log-code-copy.is-copied .log-code-icon-done { display:block; animation:log-share-pop .25s ease; }
@media(prefers-reduced-motion:reduce) { .log-code-copy { transition:none; }.log-code-copy.is-copied .log-code-icon-done { animation:none; } }
@media print { .log-code-copy { display:none; } }
/*
 * Alerts (> [!NOTE] … [!CAUTION]; GitHub's class names, so CSS written for GitHub still finds them), drawn the LOG's way:
 * a soft dashed card with its title as a round sticker stuck on the top edge, a little tilted, with a white rim.
 */
.markdown-alert { --alert:#2f6fd6; --alert-ink:#fff; position:relative; margin:30px 0 1em; padding:24px 18px 14px; border:2px dashed color-mix(in srgb,var(--alert) 38%,var(--log-line)); border-radius:max(10px,var(--log-radius,16px)); background:color-mix(in srgb,var(--alert) 6%,var(--log-card)); overflow-wrap:anywhere; }
.markdown-alert-note { --alert:#2f6fd6; }.markdown-alert-tip { --alert:#1a8a4a; }.markdown-alert-important { --alert:#7c4ddb; }.markdown-alert-warning { --alert:#b86a00; }.markdown-alert-caution { --alert:#d1343a; }
html[data-log-theme^="dark"] .markdown-alert { --alert:#7fb0ff; --alert-ink:#10192d; }html[data-log-theme^="dark"] .markdown-alert-tip { --alert:#5fcf8c; }html[data-log-theme^="dark"] .markdown-alert-important { --alert:#b99cff; }html[data-log-theme^="dark"] .markdown-alert-warning { --alert:#f0b04d; }html[data-log-theme^="dark"] .markdown-alert-caution { --alert:#ff8a8f; }
.markdown-alert-title { position:absolute; top:0; left:14px; display:inline-flex; align-items:center; gap:6px; margin:0 !important; padding:4px 14px 4px 6px; transform:translateY(-55%) rotate(-3deg); transform-origin:left center; border:3px solid var(--log-card); border-radius:999px; background:color-mix(in srgb,var(--alert) 88%,#000); color:var(--alert-ink); box-shadow:0 3px 0 color-mix(in srgb,var(--alert) 30%,transparent),0 6px 14px #0000001f; font-size:13px; font-weight:800; line-height:1.4; letter-spacing:.08em; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
html[data-log-theme^="dark"] .markdown-alert-title { background:var(--alert); }
.markdown-alert:hover .markdown-alert-title { transform:translateY(-58%) rotate(1deg) scale(1.04); }
/* The icon sits in its own white circle, like a badge on the sticker. */
.markdown-alert-icon { flex:none; box-sizing:border-box; width:24px; height:24px; padding:3px; border-radius:50%; background:var(--log-card); color:color-mix(in srgb,var(--alert) 88%,#000); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
html[data-log-theme^="dark"] .markdown-alert-icon { color:var(--alert); }
.markdown-alert > :last-child { margin-bottom:0; }.log-page-body .markdown-alert { margin:32px 0 1.15em; }
.markdown-alert blockquote,.markdown-alert code { background:var(--log-card); }
@media(prefers-reduced-motion:reduce) { .markdown-alert-title { transition:none; }.markdown-alert:hover .markdown-alert-title { transform:translateY(-55%) rotate(-3deg); } }
/* Diagrams (```mermaid, drawn by viewer/log-mermaid.js): fitted to the column, 拡大 on the frame's corner like COPY. */
.log-mermaid { position:relative; margin:22px 0 .5em; padding:20px 14px 14px; border:1px solid var(--log-line); border-radius:12px; background:var(--log-card); }
.log-page-body .log-mermaid { margin:26px 0 1.15em; }
.log-mermaid-view { overflow-x:auto; overscroll-behavior-x:contain; }
.log-mermaid-view svg { display:block; max-width:100%; height:auto; margin:0 auto; overflow:visible; }
/*
 * The diagrams drawn by log-mermaid.js, in the LOG's look: boxes are small cards with a short shadow under them like a
 * sticker, lines are soft and round-ended, notes are tilted sticky notes, and a frame's kind sits in a round tag.
 */
.log-dg { --dg-ink:var(--log-text); --dg-line:color-mix(in srgb,var(--log-muted) 75%,var(--log-card)); --dg-box:var(--log-card); --dg-edge:var(--log-accent); font-family:inherit; }
.log-dg-text { fill:var(--dg-ink); font-size:14px; font-weight:500; }
.log-dg-text.is-small { font-size:13px; }
.log-dg-text.is-muted { fill:var(--log-muted); }
.log-dg-text.is-tag { fill:var(--log-on-accent); font-size:12px; font-weight:700; letter-spacing:.06em; }
.log-dg-text.is-number { fill:var(--log-on-accent); font-size:11px; font-weight:700; }
.log-dg-node > :first-child { fill:var(--dg-box); stroke:var(--dg-edge); stroke-width:1.6; filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--dg-edge) 22%,transparent)); }
.log-dg-node.is-diamond > :first-child { fill:color-mix(in srgb,var(--dg-edge) 9%,var(--dg-box)); }
.log-dg-node.is-circle > :first-child,.log-dg-node.is-stadium > :first-child { fill:color-mix(in srgb,var(--dg-edge) 6%,var(--dg-box)); }
.log-dg-line { fill:none; stroke:var(--dg-edge); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.log-dg-edge { fill:none; stroke:var(--dg-line); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.log-dg-edge.is-dotted { stroke-dasharray:2 6; }
.log-dg-edge.is-thick { stroke:var(--dg-edge); stroke-width:3.2; }
.log-dg-head { fill:var(--dg-line); }.log-dg-head.is-strong { fill:var(--dg-edge); }
.log-dg-head-open { fill:none; stroke:var(--dg-line); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.log-dg-head-ring { fill:var(--dg-box); stroke:var(--dg-line); stroke-width:1.8; }
.log-dg-edge-label rect { fill:var(--dg-box); stroke:color-mix(in srgb,var(--dg-line) 55%,transparent); stroke-width:1; }
/* Sequence diagrams: people as cards (an actor's corners round), dashed lives, messages in the text color. */
.log-dg-actor rect { fill:var(--dg-box); stroke:var(--dg-edge); stroke-width:1.6; filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--dg-edge) 22%,transparent)); }
.log-dg-actor.is-actor rect { fill:color-mix(in srgb,var(--dg-edge) 9%,var(--dg-box)); }
.log-dg-life { fill:none; stroke:var(--log-line); stroke-width:1.6; stroke-dasharray:4 5; stroke-linecap:round; }
.log-dg-message .log-dg-line { stroke:var(--dg-ink); stroke-width:1.5; }
.log-dg-message.is-dashed .log-dg-line { stroke-dasharray:5 5; }
.log-dg-message .log-dg-head { fill:var(--dg-ink); }.log-dg-message .log-dg-head-open { stroke:var(--dg-ink); }
.log-dg-number { fill:var(--dg-edge); }
.log-dg-note rect { --note:#d9a400; fill:color-mix(in srgb,var(--note) 16%,var(--dg-box)); stroke:color-mix(in srgb,var(--note) 45%,var(--log-line)); stroke-width:1.2; transform-box:fill-box; transform-origin:center; transform:rotate(-1deg); filter:drop-shadow(0 2px 3px #0000001a); }
.log-dg-frame rect { fill:color-mix(in srgb,var(--dg-edge) 3%,transparent); stroke:color-mix(in srgb,var(--dg-edge) 40%,var(--log-line)); stroke-width:1.4; stroke-dasharray:6 4; }
.log-dg-frame.is-rect rect,.log-dg-frame.is-box rect { fill:color-mix(in srgb,var(--dg-edge) 6%,transparent); stroke-dasharray:none; stroke:var(--log-line); }
.log-dg-frame-tag { fill:var(--dg-edge); }
.log-dg-frame-split { fill:none; stroke:color-mix(in srgb,var(--dg-edge) 35%,var(--log-line)); stroke-width:1.2; stroke-dasharray:6 4; }
.log-mermaid-source { margin:0; padding:0; border:0; background:none; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--log-muted); }
.log-mermaid-source[hidden] { display:none; }
.log-mermaid-error { display:grid; gap:2px; margin:0 0 10px; padding:8px 12px; border-radius:10px; background:color-mix(in srgb,#b86a00 9%,var(--log-card)); color:var(--log-text); font-size:13px; line-height:1.6; }
.log-mermaid-error small { color:var(--log-muted); font-size:11.5px; overflow-wrap:anywhere; }
.log-mermaid-zoom { position:absolute; top:0; right:12px; z-index:1; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; transform:translateY(-50%); border:1px solid var(--log-line); border-radius:999px; background:var(--log-card); color:var(--log-muted); box-shadow:0 2px 8px #0000001f; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.log-mermaid-zoom:hover { color:var(--log-accent); border-color:var(--log-accent); }.log-mermaid-zoom:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-mermaid-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* 拡大: the diagram over the whole screen, scrolled both ways; the bar keeps the zoom and 閉じる in reach. */
html.log-mermaid-open,html.log-mermaid-open body { overflow:hidden; }
.log-mermaid-sheet { position:fixed; inset:0; z-index:220; box-sizing:border-box; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--log-bg); color:var(--log-text); }
.log-mermaid-sheet[open] { display:flex; flex-direction:column; }
.log-mermaid-sheet::backdrop { background:#10192d80; }
.log-mermaid-sheet-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom:1px solid var(--log-line); background:var(--log-card); }
.log-mermaid-sheet-tools { display:flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--log-line); border-radius:999px; background:var(--log-bg); }
.log-mermaid-sheet button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:38px; padding:0 12px; border:0; border-radius:999px; background:none; color:var(--log-text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.log-mermaid-sheet button:hover { color:var(--log-accent); }.log-mermaid-sheet button:focus-visible { outline:2px solid var(--log-accent); outline-offset:1px; }
.log-mermaid-sheet .log-mermaid-level { min-width:64px; font-variant-numeric:tabular-nums; }
.log-mermaid-sheet .log-mermaid-sheet-close { border:1px solid var(--log-line); background:var(--log-card); }
.log-mermaid-sheet .log-mermaid-icon { width:18px; height:18px; }
.log-mermaid-stage { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px; box-sizing:border-box; outline:none; }
.log-mermaid-figure { display:flex; align-items:center; justify-content:center; width:max-content; min-width:100%; min-height:100%; padding-bottom:env(safe-area-inset-bottom); }
.log-mermaid-figure svg { display:block; flex:none; padding:16px; box-sizing:content-box; border-radius:12px; background:var(--log-card); }
@media print { .log-mermaid-zoom { display:none; } }
.log-md-table { max-width:100%; overflow-x:auto; }
.log-md-table table { width:100%; border-collapse:collapse; font-size:.94em; line-height:1.7; }
.log-md-table th,.log-md-table td { padding:9px 12px; border:1px solid var(--log-line); text-align:left; vertical-align:top; }
.log-md-table th { background:var(--log-bg); font-weight:700; }
.log-md-table .is-center { text-align:center; }.log-md-table .is-right { text-align:right; }
.log-page-body img { max-width:100%; height:auto; border-radius:8px; vertical-align:middle; }
.log-page-body a.log-md-image { display:inline-block; max-width:100%; }
.log-page-body h2[id],.log-page-body h3[id],.log-page-body h4[id] { scroll-margin-top:16px; }
/* Admin: fixed page list and editor. */
[data-md-status].is-error { color:var(--danger); }
/* Admin: top menu editor. */
/* Admin: 画像一覧 — add pictures only, copy their addresses; the logo preview in the settings. */
/* Loading: a small wave before a message that is still working ("…"), and for page changes over a second
   a quiet drop rippling in the theme's colors (viewer/log-loading.js). */
@keyframes log-busy-wave { to { -webkit-mask-position:20px 50%; mask-position:20px 50%; } }
.log-nav-wait { position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); z-index:1000; display:flex; align-items:center; gap:12px; padding:10px 20px 10px 12px; border:1px solid color-mix(in srgb,var(--log-accent) 25%,var(--log-line)); border-radius:999px; background:color-mix(in srgb,var(--log-card) 88%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--log-text); font:600 13.5px/1.4 system-ui,-apple-system,"Segoe UI","Hiragino Sans",sans-serif; letter-spacing:.04em; box-shadow:0 10px 30px #0000001f; opacity:0; visibility:hidden; transform:translate(-50%,12px); transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s; pointer-events:none; }
.log-navigating .log-nav-wait { opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .4s ease,transform .4s ease; }
.log-nav-drop { position:relative; display:block; width:30px; height:30px; flex:none; }
.log-nav-drop i { position:absolute; inset:0; border:2px solid var(--log-accent); border-radius:50%; opacity:0; animation:log-nav-ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.log-nav-drop i:nth-child(2) { animation-delay:.8s; border-color:var(--log-cyan); }.log-nav-drop i:nth-child(3) { animation-delay:1.6s; }
.log-nav-drop::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--log-accent); animation:log-nav-float 2.4s ease-in-out infinite; }
@keyframes log-nav-ripple { 0% { opacity:.9; transform:scale(.15); } 100% { opacity:0; transform:scale(1); } }
@keyframes log-nav-float { 0%,100% { transform:translateY(1px) scale(.9); } 50% { transform:translateY(-2px) scale(1.1); } }
.log-navigating body::before { content:""; position:fixed; top:0; left:0; right:0; z-index:1000; height:3px; background:linear-gradient(90deg,transparent,var(--log-accent),var(--log-cyan),transparent) 0 0 / 50% 100% no-repeat; animation:log-nav-flow 2.2s ease-in-out infinite; }
@keyframes log-nav-flow { from { background-position:-50% 0; } to { background-position:150% 0; } }
@media(prefers-reduced-motion:reduce) { .log-nav-drop i,.log-nav-drop::after,.log-navigating body::before { animation:none; }.log-nav-drop i:first-child { opacity:.6; transform:scale(.7); }.log-nav-wait { transition:none; } }
/* Fixed page editor: the pictures in the text as thumbnails, drop anywhere, and the picker dialog. */
/* Footer: HOME with the house icon and the footer links (terms, privacy…), then the footer text. */
.log-footer-nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; max-width:1012px; margin:0 auto 14px; padding:0; list-style:none; }
.log-site .log-footer-nav a { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; border-radius:999px; color:var(--log-muted); font-size:13px; font-weight:600; text-decoration:none; transition:color .15s ease,background-color .15s ease; }
.log-site .log-footer-nav a:hover { background:color-mix(in srgb,var(--log-accent) 9%,transparent); color:var(--log-text); text-decoration:none; }
.log-site .log-footer-nav a[aria-current="page"] { color:var(--log-accent); }
.log-site .log-footer-nav a.log-footer-home { border:1px solid var(--log-line); background:var(--log-card); color:var(--log-accent); }
.log-footer-home svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.log-footer-nav a:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-footer-text { margin:0; }
@media(prefers-reduced-motion:reduce) { .log-site .log-footer-nav a { transition:none; } }
/* Phones: the compose box's panels (hashtags, categories, content warning, help) open as a sheet from the bottom. */
@keyframes log-sheet-up { from { transform:translateY(100%); } }
@keyframes log-sheet-fade { from { opacity:0; } }
/* Video and audio players (log-player.js). Colours follow the LOG design. */
.log-player { --player-played:var(--log-accent); --player-rest:color-mix(in srgb,var(--log-text) 20%,var(--log-card)); margin:14px 0 18px; }
.log-player audio,.log-player video { display:block; width:100%; max-width:100%; }
.log-audio { display:grid; grid-template-columns:minmax(0,1fr); gap:6px 14px; align-items:center; padding:14px 16px; border:1px solid var(--log-line); border-radius:calc(var(--log-radius) * .75); background:var(--log-card); }
.log-audio.has-cover { grid-template-columns:72px minmax(0,1fr); }
.log-audio.has-cover .log-player-cover { grid-row:1 / span 2; width:72px; height:72px; object-fit:cover; border-radius:10px; background:var(--log-bg); }
.log-player-title { margin:0; font-weight:700; font-size:15px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-player-length { font-size:12px; color:var(--log-muted); }
.log-player-row { display:flex; align-items:center; gap:12px; min-width:0; }
.log-player-play { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--log-accent); color:var(--log-on-accent,#fff); cursor:pointer; transition:transform .15s ease, filter .15s ease; }
.log-player-play svg { width:20px; height:20px; fill:currentColor; }
.log-player-play:hover { filter:brightness(1.08); }
.log-player-play:active { transform:scale(.94); }
.log-player-play:focus-visible,.log-player-wave:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-player-wave { flex:1; min-width:0; height:44px; cursor:pointer; touch-action:none; border-radius:6px; }
.log-player-wave.is-plain { height:24px; }
.log-player-wave canvas { display:block; width:100%; height:100%; }
.log-player-time { flex:none; min-width:7.5em; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; color:var(--log-muted); }
.log-player-loop { flex:none; display:grid; place-items:center; width:36px; height:36px; margin-left:-6px; padding:0; border:0; border-radius:50%; background:none; color:var(--log-muted); cursor:pointer; }
.log-player-loop svg { width:20px; height:20px; }
.log-player-loop:hover { color:var(--log-accent); }
.log-player-loop[aria-pressed="true"] { background:color-mix(in srgb,var(--log-accent) 14%,transparent); color:var(--log-accent); }
.log-player-loop:focus-visible { outline:2px solid var(--log-accent); outline-offset:2px; }
.log-video { position:relative; }
.log-video-unmute { position:absolute; top:10px; right:10px; z-index:2; display:none; align-items:center; gap:6px; padding:6px 12px 6px 9px; border:0; border-radius:999px; background:#000000a6; color:#fff; font:600 13px/1.2 system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(4px); }
.log-video-unmute svg { width:18px; height:18px; fill:currentColor; }
.log-video-unmute:hover { background:#000000d0; }
.log-video-unmute:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.is-auto .log-video-screen.is-muted.is-playing .log-video-unmute { display:inline-flex; }
.log-player.is-preparing .log-player-loop { animation:log-player-wait 1s ease-in-out infinite; }
@keyframes log-player-wait { 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .log-player.is-preparing .log-player-loop { animation:none; opacity:.5; } }
.log-video-screen { position:relative; overflow:hidden; width:min(100%, calc(80vh * var(--player-w,16) / var(--player-h,9))); margin:0 auto; border-radius:calc(var(--log-radius) * .75); background:#000; color:#fff; outline:none; }
.log-video-screen video { width:100%; height:auto; aspect-ratio:var(--player-w,16) / var(--player-h,9); background:#000; }
.log-video-screen:fullscreen,.log-video-screen:-webkit-full-screen { border-radius:0; display:flex; align-items:center; }
.log-video-screen:fullscreen { width:100%; }
.log-video-screen:fullscreen video { width:auto; max-width:100%; height:100%; max-height:100vh; margin:auto; }
.log-video-big { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:68px; height:68px; margin:-34px 0 0 -34px; padding:0; border:0; border-radius:50%; background:#000000a0; color:#fff; cursor:pointer; backdrop-filter:blur(4px); transition:opacity .2s ease, transform .15s ease; }
.log-video-big svg { width:30px; height:30px; fill:currentColor; margin-left:3px; }
.log-video-big:hover { transform:scale(1.06); }
.is-playing .log-video-big,.is-started:not(.is-playing) .log-video-big { opacity:0; pointer-events:none; }
.is-started:not(.is-playing) .log-video-big { opacity:1; pointer-events:auto; }
.log-video-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px; padding:22px 10px 8px; background:linear-gradient(transparent,#000000b8); opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; }
.is-started.is-awake .log-video-bar,.is-started:not(.is-playing) .log-video-bar,.log-video-screen:focus-within .log-video-bar { opacity:1; transform:none; }
.log-video-tool { flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer; }
.log-video-tool svg { width:20px; height:20px; fill:currentColor; }
.log-video-tool:hover,.log-video-tool:focus-visible { background:#ffffff26; outline:none; }
.log-video-track { position:relative; flex:1; min-width:0; height:20px; cursor:pointer; touch-action:none; }
.log-video-track::before,.log-video-loaded,.log-video-done { position:absolute; left:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; content:""; }
.log-video-track::before { right:0; background:#ffffff40; }
.log-video-loaded { background:#ffffff66; width:0; }
.log-video-done { background:var(--log-accent); width:0; }
.log-video-done::after { position:absolute; right:-6px; top:-4px; width:12px; height:12px; border-radius:50%; background:#fff; content:""; }
.log-video-track:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.log-video-bar .log-player-time { color:#fff; min-width:auto; font-size:12px; }
.log-video-bar .log-video-volume { flex:0 0 72px; width:72px; min-width:0; margin:0; padding:0; accent-color:var(--log-accent); }
.log-player-caption { margin-top:6px; font-size:13px; color:var(--log-muted); }
@media (hover:none) { .log-video-bar .log-video-volume { display:none; } }
/* The bar follows the player's own width (an upright video is narrow even on a PC). */
.log-video-screen { container-type:inline-size; }
@container (max-width:460px) { .log-video-bar .log-video-volume { display:none; } }
@container (max-width:340px) { .log-video-bar .log-player-time { display:none; } }
@media (max-width:480px) { .log-audio.has-cover { grid-template-columns:56px minmax(0,1fr); } .log-audio.has-cover .log-player-cover { width:56px; height:56px; } .log-player-time { min-width:auto; } }
.log-veil-media:not([open]) > summary.log-veil-cover { position:relative; min-height:140px; display:grid; border-radius:calc(var(--log-radius) * .75); background:linear-gradient(135deg,#3b3f4a,#20232a); }
.log-veil-media .log-veil-label { width:100%; background:none; }

/* Pinned posts: a pin mark next to the date (mini blog) or on the tile, and a quiet accent line on the post. */
.log-pin-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 8px; border-radius:999px; background:color-mix(in srgb,var(--log-accent) 12%,var(--log-card)); color:var(--log-accent); font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1.6; white-space:nowrap; }
.log-pin-icon { width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.log-post.is-pinned { box-shadow:inset 3px 0 0 var(--log-accent),var(--log-shadow); }
.log-tile-pin { gap:4px; padding-left:8px; }
.log-tile-pin::before { display:none; }
.log-tile-pin .log-pin-icon { width:13px; height:13px; }
/* Locked posts and pages: the title stays, a lock and the password field take the place of the content. */
.log-lock { display:grid; justify-items:center; gap:10px; margin:6px 0 4px; padding:28px 20px; border:1px dashed var(--log-line); border-radius:calc(var(--log-radius) * .75); background:var(--log-bg); text-align:center; }
.log-lock-icon { width:34px; height:34px; fill:none; stroke:var(--log-accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.log-lock-title { margin:0; font-weight:700; color:var(--log-text); }
.log-lock-error { margin:0; padding:6px 14px; border-radius:999px; background:var(--err-bg,#fce8e6); color:var(--danger,#b3261e); font-size:14px; font-weight:600; }
.log-lock-form { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:10px 12px; width:100%; max-width:420px; }
.log-lock-field { display:grid; gap:4px; flex:1 1 220px; text-align:left; font-size:13px; color:var(--log-muted); }
/* A plain text field drawn like a password field (text-security): browsers offer to save only password fields. */
.log-lock-input { box-sizing:border-box; width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--log-field); border-radius:10px; background:var(--log-card); color:var(--log-text); font:inherit; font-size:16px; letter-spacing:.08em; -webkit-text-security:disc; text-security:disc; }
.log-lock-input:focus { outline:2px solid var(--log-accent); outline-offset:2px; border-color:var(--log-accent); }
.log-lock-form:has(.log-lock-show input:checked) .log-lock-input { -webkit-text-security:none; text-security:none; letter-spacing:normal; }
.log-lock-show { order:3; flex-basis:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--log-muted); cursor:pointer; }
.log-lock-show input { width:16px; height:16px; margin:0; accent-color:var(--log-accent); }
.log-lock-submit { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:0 22px; border:0; border-radius:10px; background:var(--log-accent); color:var(--log-on-accent); font:inherit; font-weight:700; cursor:pointer; }
.log-lock-submit:hover { filter:brightness(1.06); }
.log-lock-submit:focus-visible { outline:2px solid var(--log-accent); outline-offset:3px; }
.log-lock-submit-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.log-lock-note { margin:0; max-width:420px; color:var(--log-muted); font-size:12px; line-height:1.7; }
.log-lock.is-teaser { padding:20px 16px; gap:8px; }
.log-lock.is-teaser .log-lock-icon { width:28px; height:28px; }
.log-lock-open { display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; background:var(--log-card); border:1px solid var(--log-line); color:var(--log-accent); font-size:14px; font-weight:700; text-decoration:none; }
.log-lock-open:hover { border-color:var(--log-accent); }
.log-tile-blank.is-locked .log-lock-icon { width:40px; height:40px; opacity:.8; }
.log-lock-badge { display:inline-flex; align-items:center; gap:3px; }
.log-lock-badge-icon { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.log-page .log-lock { margin-top:18px; }