.page-notebook { --note-surface:color-mix(in srgb,var(--bg) 89%,transparent); --note-muted:var(--muted); font-family:'IBM Plex Sans',sans-serif; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--bg); }
.page-notebook > .notebook-main { flex:1; }
.notebook-main { min-height:65vh; padding-top:56px; padding-bottom:64px; }
.notebook-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; }
.notebook-eyebrow,.sidebar-label { display:block; font:500 10px/1.5 'IBM Plex Sans',sans-serif; letter-spacing:1.5px; color:var(--muted); }
.notebook-title h1 { margin:12px 0; font:500 clamp(38px,4vw,54px)/1.1 'IBM Plex Sans',sans-serif; letter-spacing:-1.8px; }
.notebook-title p { margin:0; color:var(--muted); font-size:15px; }
.notebook-actions,.editor-save { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.page-notebook button,.page-notebook input { font:inherit; }
.page-notebook button { cursor:pointer; }
.page-notebook button:disabled { cursor:wait; opacity:.5; }
.page-notebook button:focus-visible,.page-notebook a:focus-visible,.page-notebook input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.primary-button,.secondary-button,.quiet-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:0; padding:9px 14px; border-radius:8px; font-size:12px!important; text-decoration:none; transition:background .15s,color .15s; }
.page-notebook .primary-button { background:var(--text); color:var(--bg); font-weight:500; }
.page-notebook .primary-button:hover { background:var(--accent); color:var(--bg); }
.secondary-button { background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); }
.quiet-button { padding:8px 0; color:var(--muted); background:transparent; }
.quiet-button:hover { color:var(--text); }
.library-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:64px; }
.library-sidebar { padding-top:8px; }
.library-sidebar nav { display:grid; gap:4px; margin-top:16px; }
.library-sidebar nav button { display:flex; align-items:center; gap:10px; background:none; color:var(--muted); padding:12px; border:0; border-radius:6px; text-align:left; font-size:13px; }
.library-sidebar nav button[aria-current],.library-sidebar nav button:hover { background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--text); }
.library-sidebar nav button small { margin-left:auto; font-size:11px; color:var(--muted); }
.library-reference { display:grid; gap:16px; margin-top:48px; font-size:12px; }
.library-reference a { display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
.library-reference a:hover { color:var(--text); }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 28px; }
.library-heading h2 { font-size:18px; font-weight:500; margin:0; letter-spacing:-.4px; }
.library-heading h2 span { margin-left:8px; color:var(--muted); font-size:12px; font-weight:400; }
.article-search { display:flex; align-items:center; gap:8px; color:var(--muted); }
.article-search input { width:180px; padding:8px 0; border:0; background:none; color:var(--text); font-size:12px; }
.blog-empty { min-height:280px; padding:56px 32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:var(--note-surface); border-radius:12px; }
.blog-empty > svg { color:var(--muted); margin-bottom:24px; }
.blog-empty h3 { margin:0 0 12px; font-size:24px; font-weight:400; letter-spacing:-.6px; }
.blog-empty p { max-width:480px; margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.7; }
.article-list { display:grid; gap:16px; }
.article-list-item { padding:28px; border-radius:10px; background:var(--note-surface); transition:background .2s; }
.article-list-item:hover { background:color-mix(in srgb,var(--surface) 90%,transparent); }
.article-list-meta { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; }
.draft-badge { font-size:10px; padding:3px 6px; background:color-mix(in srgb,var(--text) 8%,transparent); border-radius:4px; }
.article-list-item h3 { margin:16px 0 10px; font-size:25px; font-weight:500; letter-spacing:-.7px; }
.article-list-item h3 a { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.article-list-item h3 svg { color:var(--muted); flex-shrink:0; }
.article-list-item > p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
.article-list-bottom { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; color:var(--muted); }
.article-list-bottom > div { display:flex; align-items:center; gap:8px; }
.article-list-bottom button { border:0; background:none; color:var(--muted); display:inline-flex; gap:6px; align-items:center; min-height:36px; padding:8px; font-size:11px; }
.article-list-bottom button:hover { color:var(--text); }
.reader-layout { display:grid; grid-template-columns:200px minmax(0,760px); justify-content:start; gap:64px; }
.blog-reading { min-width:0; }
.reader-navigation { position:sticky; top:36px; align-self:start; font-size:12px; }
.reader-navigation .sidebar-label { margin:32px 0 16px; }
.reader-navigation nav { display:grid; gap:12px; }
.reader-navigation nav a { color:var(--muted); line-height:1.6; }
.reader-navigation nav a:hover { color:var(--text); }
.reader-navigation nav .heading-nested { padding-left:12px; }
.article-metadata { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:11px; }
.blog-reading > h1 { font:500 clamp(30px,3.4vw,44px)/1.18 'IBM Plex Sans',sans-serif; letter-spacing:-1.2px; margin:20px 0; overflow-wrap:anywhere; }
.article-lead { color:var(--muted); font-size:18px; line-height:1.65; margin:0 0 24px; }
.article-byline { display:flex; align-items:center; gap:10px; font-size:12px; margin:24px 0 48px; }
.article-byline img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.article-byline > div { display:flex; gap:16px; align-items:center; margin-left:auto; }
.article-end { display:flex; gap:16px; margin-top:48px; font-size:11px; color:var(--muted); }
.article-body { font-size:16px; line-height:1.85; overflow-wrap:anywhere; }
.article-body > :first-child { margin-top:0; }
.article-body h2 { font:500 27px/1.3 'IBM Plex Sans',sans-serif; margin:40px 0 16px; letter-spacing:-.6px; scroll-margin-top:24px; }
.article-body h3 { font:500 21px/1.4 'IBM Plex Sans',sans-serif; margin:32px 0 12px; scroll-margin-top:24px; }
.article-body p { margin:18px 0; }
.article-body a { text-decoration:underline; text-underline-offset:4px; color:var(--accent); }
.article-body blockquote { margin:24px 0; padding:8px 24px; background:color-mix(in srgb,var(--text) 4%,transparent); border:0; border-radius:6px; color:var(--muted); }
.article-body ul,.article-body ol { margin:18px 0; padding-left:24px; }
.article-body li { margin:6px 0; }
.article-body .article-image { display:block; margin:32px 0; }
.article-body img { max-width:100%; height:auto; border-radius:8px; }
.article-body .image-caption { display:block; font-size:11px; color:var(--muted); text-align:center; margin-top:10px; }
.article-body code,.markdown-help code { font-family:'JetBrainsMono NF','JetBrains Mono',monospace; font-size:.85em; background:color-mix(in srgb,var(--text) 6%,transparent); padding:3px 5px; border-radius:4px; }
.article-code { --code-edge:color-mix(in srgb,var(--muted) 30%,transparent); position:relative; margin:24px 0; background:color-mix(in srgb,var(--bg) 92%,var(--text)); border:1px solid var(--code-edge); border-radius:8px; overflow:hidden; }
.article-body pre { margin:0; padding:12px 20px 20px; overflow-x:auto; font:400 13px/1.6 'JetBrainsMono NF','JetBrains Mono',monospace; letter-spacing:0; tab-size:4; }
.article-body pre code { display:block; padding:0; background:none; font:inherit; border-radius:0; white-space:pre; }
.article-code pre code { white-space:normal; }
.code-line { display:grid; grid-template-columns:calc(var(--code-gutter-width,2ch) + 16px + 1px) minmax(0,1fr); column-gap:20px; min-height:1.6em; }
.code-line-number { color:var(--code-comment); border-right:1px solid var(--code-edge); padding-right:16px; text-align:right; white-space:nowrap; user-select:none; font-variant-numeric:tabular-nums; }
.code-line-number::before { content:attr(data-line); }
.code-line-content { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.copy-code { display:flex; gap:6px; align-items:center; position:absolute; top:6px; right:12px; background:none; color:var(--muted); font-size:10px!important; border:0; padding:8px; }
@media(max-width:480px) { .article-code pre { padding-inline:12px; }.code-line { column-gap:12px; } }
.article-body .katex-display { margin:10px 0; overflow-x:auto; overflow-y:hidden; padding:4px 0; }
.article-body .katex { cursor:copy; }
.article-body .katex:hover { color:var(--accent); }
.article-body table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:14px; }
.article-body th,.article-body td { padding:10px 14px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); text-align:left; }
.article-body hr { border:0; height:24px; }
.editor-workspace { background:var(--note-surface); border-radius:12px; overflow:hidden; }
.editor-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:color-mix(in srgb,var(--text) 3%,transparent); }
.save-state { color:var(--muted); font-size:10px; }
.editor-metadata { padding:32px 32px 24px; }
.editor-metadata > label { display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.editor-metadata > input { width:100%; border:0; background:none; font:500 32px/1.2 'IBM Plex Sans',sans-serif; color:var(--text); letter-spacing:-.8px; padding:4px 0; }
.metadata-details { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-top:24px; }
.metadata-details label { color:var(--muted); font-size:10px; }
.metadata-details input { display:block; width:100%; border:0; background:none; font-size:12px; padding:10px 0; color:var(--text); }
.editor-toolbar { padding:12px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; background:color-mix(in srgb,var(--text) 3%,transparent); }
.format-tools,.editor-mode { display:flex; align-items:center; gap:2px; }
.format-tools button { display:grid; place-items:center; width:36px; height:36px; background:none; border:0; border-radius:5px; color:var(--muted); }
.format-tools button:hover { background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--text); }
.editor-mode { padding:3px; border-radius:6px; background:color-mix(in srgb,var(--bg) 80%,transparent); }
.editor-mode button { display:flex; align-items:center; gap:6px; background:none; border:0; padding:8px 10px; color:var(--muted); font-size:10px; border-radius:4px; }
.editor-mode button[aria-pressed=true] { background:color-mix(in srgb,var(--text) 9%,transparent); color:var(--text); }
.editor-panes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:480px; }
.source-pane,.preview-pane { min-width:0; }
.source-pane { background:color-mix(in srgb,var(--bg) 94%,var(--text)); }
.pane-label { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; font-size:9px; font-weight:500; letter-spacing:1.3px; color:var(--muted); }
.pane-label span { font-size:9px; font-weight:400; letter-spacing:0; }
.preview-content { padding:16px 32px 40px; }
.preview-content > h1 { font:500 28px/1.25 'IBM Plex Sans',sans-serif; letter-spacing:-.7px; margin:0 0 28px; }
.preview-content .article-body { font-size:14px; }
.preview-content .article-body h2 { font-size:22px; }
.preview-placeholder { color:var(--muted); font-size:14px; line-height:1.8; max-width:36ch; }
.mode-source,.mode-preview { grid-template-columns:1fr; }
.mode-source .preview-pane,.mode-preview .source-pane { display:none; }
.markdown-source .cm-editor { min-height:440px; color:var(--text); background:transparent; font-family:'JetBrainsMono NF','JetBrains Mono',monospace; font-size:12px; }
.markdown-source .cm-scroller { font-family:inherit; overflow:auto; }
.markdown-source .cm-content { padding:16px 0 40px; caret-color:var(--accent); line-height:1.9; }
.markdown-source .cm-gutters { background:transparent; color:color-mix(in srgb,var(--muted) 60%,transparent); border:0; font-size:10px; }
.markdown-source .cm-line { padding:0 16px; }
.markdown-source .cm-activeLine,.markdown-source .cm-activeLineGutter { background:color-mix(in srgb,var(--text) 3%,transparent); }
.markdown-source .cm-cursor { border-left-color:var(--accent); }
.markdown-source .cm-selectionBackground,.markdown-source .cm-focused .cm-selectionBackground { background:color-mix(in srgb,var(--accent) 25%,transparent)!important; }
.markdown-source .cm-focused { outline:none; }
.markdown-source .cm-focused:focus-within { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }
.editor-statusbar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 24px; font-size:10px; color:var(--muted); background:color-mix(in srgb,var(--text) 3%,transparent); }
.markdown-help { padding:20px 24px; font-size:12px; line-height:1.8; color:var(--muted); background:var(--bg); }
.markdown-help p { margin:0 0 12px; }.markdown-help a { margin-left:24px; text-decoration:underline; }
.recovery-banner { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:16px 24px; font-size:12px; background:color-mix(in srgb,var(--accent) 12%,var(--bg)); }
.recovery-banner button { background:none; color:var(--text); border:0; text-decoration:underline; padding:8px; font-size:12px; }
.blog-toast { position:fixed; z-index:100; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:24px; width:max-content; max-width:calc(100vw - 32px); padding:16px 20px; background:var(--text); color:var(--bg); border-radius:8px; font-size:12px; box-shadow:0 8px 32px rgb(0 0 0 / .2); }
.blog-toast button { color:inherit; background:none; border:0; font-size:20px; cursor:pointer; }
.blog-error { margin-bottom:24px; padding:20px; background:color-mix(in srgb,var(--accent) 10%,var(--bg)); border-radius:8px; font-size:13px; }.blog-error p { margin:0 0 8px; }.blog-error button { background:none; border:0; color:var(--text); text-decoration:underline; }
.blog-loading { display:grid; gap:24px; max-width:720px; margin-left:auto; }.blog-loading span { height:80px; background:color-mix(in srgb,var(--text) 5%,transparent); border-radius:8px; animation:note-pulse 1.5s ease-in-out infinite alternate; }
.delete-dialog { position:fixed; inset:0; margin:auto; z-index:150; width:min(440px,calc(100vw - 32px)); padding:28px; border:0; border-radius:12px; background:var(--bg); color:var(--text); box-shadow:0 16px 80px rgb(0 0 0 / .4); }
.delete-dialog::backdrop { background:rgb(0 0 0 / .6); backdrop-filter:blur(4px); }
.delete-dialog h2 { font-size:22px; font-weight:500; margin:0 0 16px; }.delete-dialog p { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 24px; }.delete-dialog > div { display:flex; justify-content:flex-end; gap:12px; }
@keyframes note-pulse { to { opacity:.35; } }
@media(max-width:1024px) { .library-layout,.reader-layout { gap:32px; grid-template-columns:160px minmax(0,1fr); }.notebook-actions { gap:8px; }.editor-topbar { flex-wrap:wrap; }.editor-save { margin-left:auto; }.pane-label span { display:none; } }
@media(max-width:768px) { .notebook-main { padding-top:36px; }.notebook-title { align-items:flex-start; flex-direction:column; margin-bottom:32px; gap:24px; }.library-layout,.reader-layout { grid-template-columns:1fr; gap:24px; }.library-sidebar nav { display:flex; margin-top:12px; }.library-sidebar nav button { padding:10px; flex:1; }.library-sidebar .sidebar-label,.library-reference { display:none; }.reader-navigation { position:static; }.reader-navigation nav,.reader-navigation .sidebar-label { display:none; }.blog-reading > h1 { font-size:32px; }.editor-mode button span { display:none; }.editor-panes { grid-template-columns:1fr; }.mode-split .preview-pane { border-top:0; }.editor-metadata { padding:24px; }.editor-save { gap:8px; }.save-state { width:100%; text-align:right; }.editor-topbar { padding:16px; }.editor-toolbar { padding:12px 16px; }.preview-content { padding:16px 24px 32px; } }
@media(max-width:480px) { .notebook-title h1 { font-size:38px; }.notebook-title p { font-size:13px; }.notebook-actions { width:100%; justify-content:space-between; }.library-heading { align-items:flex-start; flex-direction:column; gap:12px; }.article-search { width:100%; }.article-search input { width:100%; }.blog-empty { padding:32px 24px; }.blog-empty h3 { font-size:22px; }.article-list-item { padding:24px; }.article-list-item h3 { font-size:22px; }.article-list-bottom { align-items:flex-start; }.metadata-details { grid-template-columns:1fr; gap:8px; }.editor-metadata > input { font-size:26px; }.editor-save { width:100%; justify-content:space-between; margin-left:0; }.save-state { text-align:left; }.format-tools { flex-wrap:wrap; }.format-tools button { width:32px; }.editor-mode { margin-left:auto; }.preview-content { padding:16px 20px 32px; }.editor-statusbar { padding:14px 16px; }.article-body { font-size:15px; }.article-lead { font-size:16px; }.article-byline { flex-wrap:wrap; }.notebook-main { padding-bottom:40px; } }
@media(prefers-reduced-motion:reduce) { .blog-loading span { animation:none; }.article-list-item,.primary-button,.secondary-button,.quiet-button { transition:none; } }

/* A writing surface with document blocks, quiet controls, and a readable code palette. */
.code-summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 88px 10px 20px; cursor:pointer; list-style:none; }
.code-summary::-webkit-details-marker { display:none; }
.code-summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:7px; }
.code-disclosure { flex-shrink:0; color:var(--muted); }
.article-code[open] .code-disclosure { transform:rotate(90deg); }
.code-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 12px; min-width:0; }
.code-filename { font:500 12px/1.4 'JetBrainsMono NF','JetBrains Mono',monospace; overflow-wrap:anywhere; }
.code-language-label { font:400 11px/1.3 'IBM Plex Sans',sans-serif; color:var(--muted); }
@media(max-width:480px) { .code-summary { padding-left:12px; gap:7px; } }
.page-notebook { --code-keyword:#c8a9f0; --code-string:#a6ce98; --code-number:#e7b486; --code-title:#93c7ec; --code-comment:#87919d; --code-built-in:#ead08e; }
:root[data-theme=light] .page-notebook { --code-keyword:#8044a6; --code-string:#29713b; --code-number:#975526; --code-title:#246da0; --code-comment:#6b737f; --code-built-in:#865f12; }
.page-notebook .hljs-keyword,.page-notebook .hljs-selector-tag,.page-notebook .hljs-type { color:var(--code-keyword); }
.page-notebook .hljs-string,.page-notebook .hljs-regexp,.page-notebook .hljs-addition { color:var(--code-string); }
.page-notebook .hljs-number,.page-notebook .hljs-literal,.page-notebook .hljs-operator { color:var(--code-number); }
.page-notebook .hljs-title,.page-notebook .hljs-attr,.page-notebook .hljs-property,.page-notebook .hljs-tag,.page-notebook .hljs-symbol { color:var(--code-title); }
.page-notebook .hljs-comment,.page-notebook .hljs-quote { color:var(--code-comment); font-style:italic; }
.page-notebook .hljs-built_in,.page-notebook .hljs-meta,.page-notebook .hljs-params { color:var(--code-built-in); }
.write-formatbar { display:flex; align-items:center; flex-wrap:wrap; gap:3px; padding:14px 24px; }
.write-formatbar button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:36px; height:36px; color:var(--muted); border:0; border-radius:5px; background:none; }
.write-formatbar button:hover,.write-formatbar button[aria-pressed=true] { background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--text); }
.write-formatbar select,.write-code-topbar select { background:var(--note-surface); color:var(--text); border:0; padding:8px; border-radius:4px; font:400 11px 'IBM Plex Sans',sans-serif; max-width:140px; cursor:pointer; }
.write-heading-select { margin:0 8px 0 6px; }
.code-insert-tools { display:flex; align-items:center; gap:0; margin-left:10px; border-radius:5px; background:color-mix(in srgb,var(--text) 4%,transparent); }
.write-history { display:flex; margin-left:auto; }.write-formatbar .add-block { padding:0 8px; font-size:11px; }
.block-picker { position:relative; }
.block-menu { position:absolute; top:calc(100% + 8px); left:0; z-index:20; min-width:190px; padding:8px; background:var(--bg); border-radius:9px; box-shadow:0 10px 30px #0004; }
.block-menu > span { display:block; padding:8px 10px; font-size:9px; letter-spacing:1.1px; color:var(--muted); }
.block-menu button { justify-content:flex-start; width:100%; gap:12px; padding:0 10px; font-size:12px; }
.write-document { min-height:460px; max-width:800px; margin:auto; padding:24px 32px 56px; outline:none; }
.write-document:focus { box-shadow:none; }.write-document > :first-child { margin-top:0; }
.write-document p.is-editor-empty:first-child::before { content:attr(data-placeholder); float:left; height:0; pointer-events:none; color:var(--muted); }
.write-document pre { padding:16px 20px 20px; font:400 13px/1.6 'JetBrainsMono NF','JetBrains Mono',monospace; white-space:pre; }
.write-code-block { border-radius:8px; background:color-mix(in srgb,var(--bg) 92%,var(--text)); margin:24px 0; overflow:hidden; }
.write-code-topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px 0; gap:12px; }
.write-code-topbar select { color:var(--muted); background:transparent; }
.write-code-topbar .write-code-filename { flex:1; width:0; min-width:70px; padding:7px 8px; border:1px solid transparent; border-radius:4px; color:var(--text); background:transparent; font:400 11px/1.4 'JetBrainsMono NF','JetBrains Mono',monospace; }
.write-code-filename::placeholder { color:var(--muted); }
.write-code-topbar .write-code-filename:focus { border-color:var(--code-edge,var(--accent)); outline:none; }
.write-code-topbar button { display:flex; align-items:center; gap:7px; padding:8px; color:var(--muted); background:none; border:0; font-size:10px; }
.write-code-disclosure { flex-shrink:0; }
.write-code-disclosure[aria-expanded=true] svg { transform:rotate(90deg); }
.write-code-block pre[hidden] { display:none; }
.write-code-block.ProseMirror-selectednode { outline:1px solid var(--accent); }
.write-document .tiptap-mathematics-render { border-radius:5px; cursor:pointer; }
.write-document .tiptap-mathematics-render:hover { background:color-mix(in srgb,var(--accent) 8%,transparent); }
.write-document [data-type=block-math] { display:block; padding:16px; overflow-x:auto; }
.write-document .ProseMirror-selectednode { outline:1px solid var(--accent); outline-offset:3px; }
.write-document .selectedCell { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.write-document .tableWrapper { overflow-x:auto; }.write-document table { display:table; min-width:300px; table-layout:fixed; width:100%; }
.write-document td > p,.write-document th > p { margin:0; }
.table-tools { padding:0 24px 10px; display:flex; flex-wrap:wrap; gap:6px; }.table-tools button { border:0; background:color-mix(in srgb,var(--text) 5%,transparent); color:var(--muted); border-radius:4px; font-size:10px; padding:8px; }
.write-hint { padding:12px 24px 24px; color:var(--muted); font-size:10px; }
.write-loading { padding:48px 32px; color:var(--muted); }
.editor-dialog { width:min(520px,calc(100vw - 32px)); padding:28px; border:0; border-radius:12px; background:var(--bg); color:var(--text); box-shadow:0 24px 90px #0007; }
.editor-dialog::backdrop { background:#090810a8; backdrop-filter:blur(5px); }
.editor-dialog-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }.editor-dialog h2 { font-size:22px; font-weight:500; margin:0; letter-spacing:-.5px; }
.editor-dialog-title button { display:grid; place-items:center; background:none; border:0; color:var(--muted); padding:8px; }
.editor-dialog > label { display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
.editor-dialog textarea,.editor-dialog > input { display:block; width:100%; background:color-mix(in srgb,var(--text) 5%,transparent); border:0; border-radius:6px; padding:14px; color:var(--text); font:400 13px/1.7 'JetBrainsMono NF',monospace; resize:vertical; }
.editor-dialog .math-inline-choice { display:flex; align-items:center; gap:8px; margin-top:16px; }.math-inline-choice input { accent-color:var(--accent); }
.equation-preview { min-height:100px; padding:18px 8px; overflow-x:auto; }.editor-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:20px; }
@media(max-width:768px) { .write-formatbar { padding:12px 16px; }.write-document { padding:24px 24px 48px; font-size:15px; }.write-document pre { font-size:12px; }.code-insert-tools { margin-left:0; }.write-hint { padding:12px 16px 24px; }.editor-mode button span { display:inline; }.editor-mode button { padding:8px; } }
@media(max-width:480px) { .editor-mode { width:100%; justify-content:space-between; margin:0; }.editor-mode button { min-height:38px; }.write-formatbar button { min-width:38px; height:38px; }.write-document { padding:20px 16px 40px; }.write-document pre { padding:16px; font-size:11px; }.write-history { margin-left:0; }.editor-dialog { padding:20px; } }

/* Blog8: an editorial list with text and a cover beside each other. */
.page-blog-index .notebook-main { padding-top:64px; }
.page-blog-index .notebook-title { flex-direction:column; align-items:center; text-align:center; gap:24px; margin-bottom:64px; }
.page-blog-index .notebook-title h1 { margin:16px 0; }
.page-blog-index .notebook-title p { max-width:560px; line-height:1.7; }
.page-blog-index .notebook-actions { justify-content:center; }
.blog8-library { max-width:1112px; margin-inline:auto; }
.blog8-library .library-heading { margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.blog8-library .library-heading h2 { font-size:14px; letter-spacing:0; }
.blog8-list { display:grid; gap:64px; }
.blog8-post { min-width:0; }
.blog8-card[data-slot=card] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--text); }
.blog8-copy { min-width:0; }
.blog8-tags { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:16px; color:var(--muted); font-size:11px; line-height:1.5; letter-spacing:1.3px; text-transform:uppercase; }
.blog8-copy h3 { margin:0; font-size:clamp(24px,2.5vw,32px); font-weight:500; line-height:1.3; letter-spacing:-.7px; overflow-wrap:anywhere; }
.blog8-copy h3 a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.blog8-summary { margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
.blog8-byline { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; color:var(--muted); font-size:12px; line-height:1.5; }
.blog8-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; }
.blog8-read { display:inline-flex; align-items:center; gap:10px; min-height:40px; font-size:13px; font-weight:500; }
.blog8-read:hover { text-decoration:underline; text-underline-offset:4px; }
.blog8-read svg { transition:transform .2s; }
.blog8-read:hover svg { transform:translateX(3px); }
.blog8-image { display:block; overflow:hidden; aspect-ratio:16/9; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--note-surface); }
.blog8-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; transition:opacity .2s; }
.blog8-image:hover img { opacity:.75; }
.blog8-image-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; height:100%; color:var(--muted); font-size:12px; letter-spacing:1px; }
.blog8-references { display:flex; flex-wrap:wrap; gap:16px 32px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.blog8-references a { display:inline-flex; align-items:center; gap:10px; font-size:12px; }
.blog8-owner-actions { display:flex; gap:8px; }
.blog8-owner-actions button { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px; border:0; border-radius:4px; background:none; color:var(--muted); font-size:12px; }
.blog8-owner-actions button:hover { color:var(--text); background:color-mix(in srgb,var(--text) 5%,transparent); }
.blog8-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.blog8-filters button { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 12px; border:0; border-radius:6px; background:none; color:var(--muted); font-size:12px; }
.blog8-filters button[aria-current],.blog8-filters button:hover { background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--text); }
.blog8-filters small { color:var(--muted); }
@media(max-width:1024px) { .blog8-card[data-slot=card] { gap:32px; } }
@media(max-width:639px) { .page-blog-index .notebook-main { padding-top:40px; }.page-blog-index .notebook-title { margin-bottom:40px; }.blog8-card[data-slot=card] { grid-template-columns:1fr; gap:24px; }.blog8-image { grid-row:1; }.blog8-list { gap:48px; }.blog8-copy h3 { font-size:24px; }.blog8-summary { margin-top:16px; }.blog8-library .library-heading { margin-bottom:24px; }.blog8-references { margin-top:32px; } }
@media(prefers-reduced-motion:reduce) { .blog8-read svg,.blog8-image img { transition:none; } }