:root {
  color-scheme: light dark;
  --ink:light-dark(#37352f,#ececec);
  --muted:light-dark(#6f6d66,#aaa9a6);
  --quiet:light-dark(#85827a,#969490);
  --white:light-dark(#fff,#191919);
  --panel:light-dark(#fff,#252525);
  --on-accent:#fff;
  --rail:light-dark(#f7f7f5,#202020);
  --rule:light-dark(#e9e8e4,#373737);
  --hover:light-dark(#eeedea,#2c2c2c);
  --selected:light-dark(#e8e7e3,#303030);
  --blue:light-dark(#2383e2,#2477c5);
  --blue-hover:light-dark(#1473cf,#1e6bb5);
  --focus:light-dark(#097fe8,#72b9ff);
  --red:light-dark(#aa3733,#ec8d89);
  --danger-fill:light-dark(#aa3733,#a43835);
  --sidebar:270px;
  --topbar:46px;
  --reading:708px;
  --page-gutter:48px;
  --wide-gutter:clamp(var(--page-gutter),7.5%,104px);
  --document-start:112px;
  --document-icon-start:96px;
  --document-table-cell:120px;
  --document-table-cell-max:280px;
  --database-table-title:220px;
  --database-table-cell:176px;
  --database-table-action:40px;
  --round:6px;
  --outline:1px solid var(--rule);
  --shadow:0 2px 5px light-dark(#37352f14,#0006),0 10px 30px light-dark(#37352f17,#0008);
  /* Palette and component sizes */
  --red-hover:light-dark(#942923,#902c29);
  --mark-background:light-dark(#e5e4e0,#41403d);
  --mark-ink:light-dark(#55524a,#ececec);
  --favorite-background:light-dark(#fff6d9,#473b20);
  --placeholder:light-dark(#b0ada6,#969490);
  --row-hover:light-dark(#fbfbfa,#222);
  --callout:light-dark(#f1f0ed,#2b2b2b);
  --code-surface:light-dark(#f7f6f3,#252525);
  --badge-gray-ink:light-dark(#555149,#cfcecc);
  --badge-blue:light-dark(#e0effc,#233b56);
  --badge-blue-ink:light-dark(#17558c,#a9cfff);
  --badge-green:light-dark(#e2eee4,#263e31);
  --badge-green-ink:light-dark(#235b3b,#b2dcbc);
  --modal-backdrop:light-dark(#37352f2d,#0008);
  --drawer-backdrop:light-dark(#37352f38,#0009);
  --icon:16px;
  --icon-small:13px;
  --control-height:29px;
  --input-height:37px;
  /* Typography and radius */
  --ui:14px;
  --small:13px;
  --label:12px;
  --hero:72px;
  --glyph:15px;
  --title:40px;
  --heading:30px;
  --heading-small:24px;
  --subheading:20px;
  --body:16px;
  --emoji:20px;
  --auth-title:32px;
  --brand:22px;
  --title-compact:34px;
  --hero-compact:52px;
  --ui-leading:20px;
  --control-leading:22px;
  --body-leading:25px;
  --radius-tile:5px;
  --radius-small:4px;
  --radius-panel:8px;
  --radius-pill:999px;
  --radius-modal:11px;
  /* Spacing */
  --space-1:1px;
  --space-2:2px;
  --space-3:3px;
  --space-4:4px;
  --space-5:5px;
  --space-6:6px;
  --space-7:7px;
  --space-8:8px;
  --space-9:9px;
  --space-10:10px;
  --space-11:11px;
  --space-12:12px;
  --space-14:14px;
  --space-15:15px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-21:21px;
  --space-22:22px;
  --space-23:23px;
  --space-24:24px;
  --space-28:28px;
  --space-32:32px;
  --space-33:33px;
  --space-37:37px;
  --space-40:40px;
  --space-48:48px;
  --space-51:51px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);
  background:var(--white);
}
:root[data-theme="light"] {color-scheme:light}
:root[data-theme="dark"] {color-scheme:dark;--icon-filter:invert(.9)}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {--icon-filter:invert(.9)}
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html,body,#app {height:100%;margin:0}
button,input,textarea,select {font:inherit;color:inherit}
button {cursor:pointer}
button:disabled {cursor:default;opacity:.52}
a {color:inherit}
:focus-visible {outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,h4,p,figure,ul {margin:0}
.icon {display:inline-block;width:var(--icon);height:var(--icon);flex:none;vertical-align:middle;opacity:.78;filter:var(--icon-filter,none)}
.icon.small {width:var(--icon-small);height:var(--icon-small)}
.icon-btn,.ghost,.primary,.secondary,.danger,.nav-row {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-7);min-height:var(--control-height);padding:var(--space-4) var(--space-8);
  border:0;border-radius:var(--round);background:none;text-decoration:none;font-size:var(--ui);line-height:var(--ui-leading);font-weight:500;
}
.icon-btn {width:var(--control-height);padding:var(--space-4);flex:none}
:is(.icon-btn,.ghost,.secondary,.nav-row):hover:not(:disabled) {background:var(--hover)}
.secondary {border:var(--outline);background:var(--white)}
.primary {background:var(--blue);color:var(--on-accent);padding-inline:var(--space-12)}
.primary:hover:not(:disabled) {background:var(--blue-hover)}
.danger {background:var(--danger-fill);color:var(--on-accent);padding-inline:var(--space-12)}
.danger:hover:not(:disabled) {background:var(--red-hover)}
.subdued {color:var(--muted)}
.workspace {display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.workspace.sidebar-closed {grid-template-columns:0 minmax(0,1fr)}
.sidebar {min-width:0;overflow:hidden;display:flex;flex-direction:column;background:var(--rail);border-right:var(--outline)}
.sidebar-closed .sidebar {visibility:hidden}
.sidebar-overlay {display:none}
.workspace-bar {height:var(--topbar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-8);gap:var(--space-3);flex:none}
.workspace-name {min-width:0;justify-content:flex-start;max-width:calc(100% - 30px);padding-inline:var(--space-4);font-weight:650}
.workspace-name>span:nth-child(2) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-mark {width:23px;height:23px;display:inline-grid;place-items:center;flex:none;border-radius:var(--radius-tile);background:var(--mark-background);font-weight:750;color:var(--mark-ink);font-size:var(--small)}
.side-scroll {flex:1;overflow:auto;padding:var(--space-4) var(--space-8) var(--space-12)}
.side-tools {display:grid;gap:var(--space-2)}
.side-shortcuts {display:flex;justify-content:space-between;align-items:center}
.side-shortcuts [data-home] {background:var(--hover);border-radius:var(--radius-pill)}
.nav-row {width:100%;justify-content:flex-start;padding-inline:var(--space-7);white-space:nowrap}
.nav-section {margin-top:var(--space-23)}
.nav-section ul,.search-results {padding:0;list-style:none}
.nav-section li ul {padding-left:var(--space-16)}
.nav-caption {display:flex;align-items:center;justify-content:space-between;height:28px;padding-left:var(--space-7);color:var(--muted);font-size:var(--label);font-weight:600}
.nav-caption button,.tree-row button {width:24px;min-height:24px}
.tree-row {position:relative;display:flex;align-items:center;min-width:0;min-height:var(--control-height);border-radius:var(--round);color:var(--ink)}
.tree-row:hover {background:var(--hover)}
.tree-row.current {background:var(--selected);font-weight:600}
.tree-row :is([data-new],[data-tree-grip]) {position:absolute;inset-inline-end:0;opacity:0;pointer-events:none}
.tree-row [data-new] {inset-inline-end:var(--space-24)}
.tree-row[data-tree-page]:is(:hover,:focus-within) {padding-inline-end:var(--space-48)}
.tree-row:is(:hover,:focus-within) :is([data-new],[data-tree-grip]) {opacity:1;pointer-events:auto}
.tree-row [data-tree] {width:21px}
.tree-row [data-tree]:disabled {opacity:.27}
.tree-row .tree-link {flex:1;min-width:0}
.tree-link {display:flex;align-items:center;gap:var(--space-7);min-height:28px;padding:var(--space-3) var(--space-4);font-size:var(--ui);text-decoration:none}
.tree-link>span:last-child,.breadcrumbs a>span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinned {padding-inline-start:var(--space-7)}
.bottom-tools {margin-top:var(--space-21)}
.side-footer {display:flex;gap:var(--space-4);padding:var(--space-9);border-top:var(--outline)}
.side-footer .secondary {flex:1;justify-content:flex-start;padding-inline:var(--space-9)}
.surface {display:grid;grid-template-rows:var(--topbar) minmax(0,1fr);height:100%;min-width:0;min-height:0}
.topbar {display:flex;align-items:center;gap:var(--space-6);padding:0 var(--space-14);min-width:0;background:var(--white);font-size:var(--ui)}
.workspace:not(.sidebar-closed) .global-sidebar {display:none}
.breadcrumbs {display:flex;align-items:center;gap:var(--space-5);min-width:0;overflow:hidden;flex:1}
.breadcrumbs a {display:inline-flex;align-items:center;min-width:0;gap:var(--space-6);text-decoration:none;padding:var(--space-4) var(--space-6);border-radius:var(--radius-small)}
.breadcrumbs a:hover {background:var(--hover)}
.crumb-slash {color:var(--quiet)}
.top-actions {margin-left:auto;display:flex;align-items:center;gap:var(--space-4);flex:none}
.top-actions [aria-pressed=true] {background:var(--favorite-background)}
#save-state {color:var(--muted);font-size:var(--label);margin-right:var(--space-9)}
.viewport {overflow:auto;min-width:0;overscroll-behavior:contain}
.document {width:min(var(--reading),calc(100% - var(--page-gutter) * 2));margin:0 auto;padding:var(--space-51) 0 var(--space-40);min-height:calc(100% - 1px)}
.document.wide {width:auto;margin-inline:var(--page-gutter)}
.document.note {padding-top:var(--document-start)}
.document.note.wide {margin-inline:var(--wide-gutter)}
.document.note:has(.document-icon) {padding-top:var(--document-icon-start)}
.document-header {position:relative;display:flow-root}
.document-header:has(.no-icon) {margin-top:calc(-1 * var(--space-40));padding-top:var(--space-40)}
.document-icon {margin-bottom:var(--space-32)}
.hero-icon {display:inline-flex;align-items:center;gap:var(--space-7);border:0;border-radius:var(--round);padding:var(--space-2);background:none;font-size:var(--hero);line-height:1.15}
.hero-icon .page-glyph {font-size:inherit}
.hero-icon>.icon {width:46px;height:46px}
.hero-icon:hover {background:var(--rail)}
.hero-icon.no-icon {font-size:var(--ui);color:var(--muted);line-height:var(--control-leading);padding-inline:var(--space-5)}
.document-header .no-icon {position:absolute;inset-inline-start:0;top:var(--space-4);opacity:0;pointer-events:none}
.document-header:is(:hover,:focus-within) .no-icon {opacity:1;pointer-events:auto}
.hero-icon.no-icon .icon {width:15px;height:15px}
.page-glyph {display:inline-grid;place-items:center;flex:none;font-size:var(--glyph)}
.document h1 {font-size:var(--title);line-height:1.2;letter-spacing:-.025em;font-weight:700;margin-bottom:var(--space-24);overflow-wrap:anywhere}
.page-title {background:transparent;border:0;padding:0;display:block;line-height:inherit;width:100%;min-height:1.2em;font-weight:inherit;letter-spacing:inherit;resize:none;overflow:hidden;outline:none}
.page-title:focus {outline:none}
.page-title::placeholder {color:var(--placeholder)}
.document h2 {font-size:var(--heading);line-height:1.35;letter-spacing:-.015em;font-weight:665}
.document h3 {font-size:var(--heading-small);line-height:1.35;font-weight:650}
.document h4 {font-size:var(--subheading);line-height:1.35;font-weight:650}
.page-outline {display:none;position:fixed;z-index:2;inset-inline-end:var(--space-24);top:calc(var(--topbar) + 118px);width:var(--space-24);max-height:min(50vh,520px);overflow:auto;padding:var(--space-5) var(--space-4);scrollbar-width:none}
.outline-link {display:flex;align-items:center;min-height:var(--space-12);gap:var(--space-8);width:100%;padding:0;border:0;border-radius:var(--radius-small);background:none;color:inherit;text-align:start}
.outline-link::before {content:"";width:var(--space-16);height:2px;flex:none;background:var(--rule);border-radius:var(--radius-pill)}
.outline-link[data-level="2"]::before {width:var(--space-12)}
.outline-link[data-level="3"]::before {width:var(--space-8)}
.outline-link[aria-current="location"]::before {background:var(--muted)}
.outline-link span {width:1px;height:1px;overflow:hidden;clip-path:inset(50%);position:absolute}
@media (min-width:1280px) and (hover:hover) {
  .viewport>.document.note:not(.wide) {position:relative;inset-inline-start:calc(-1 * var(--space-6))}
  .document.note:not(.wide) .page-outline {display:block}
  .page-outline:is(:hover,:focus-within) {width:min(248px,calc((100vw - var(--sidebar) - var(--reading))/2 - var(--space-32)));padding:var(--space-6);background:var(--panel);box-shadow:var(--shadow);border-radius:var(--radius-panel)}
  .page-outline:is(:hover,:focus-within) .outline-link {min-height:var(--space-24);padding:var(--space-4) var(--space-5);font-size:var(--small);line-height:1.3}
  .page-outline:is(:hover,:focus-within) .outline-link[data-level="2"] {padding-inline-start:var(--space-12)}
  .page-outline:is(:hover,:focus-within) .outline-link[data-level="3"] {padding-inline-start:var(--space-18)}
  .page-outline:is(:hover,:focus-within) .outline-link span {position:static;clip-path:none;width:auto;height:auto;text-overflow:ellipsis;white-space:nowrap}
  .outline-link:is(:hover,:focus-visible) {background:var(--hover);outline-offset:-2px}
}
.block {position:relative;margin:var(--space-1) 0;line-height:var(--body-leading);min-height:27px;word-break:keep-all;overflow-wrap:anywhere}
.block-text+.block-text {margin-top:var(--space-10)}
.block :is(p,ul,ol,table) {margin:0}
.block .editable {outline:none;padding:var(--space-2) 0;min-height:27px;min-width:0}
.block .editable:empty:focus::before {content:attr(data-placeholder);color:var(--quiet);pointer-events:none}
.block .editable a {text-underline-offset:3px;color:var(--muted)}
.block-controls {position:absolute;right:100%;top:1px;margin-right:var(--space-4);display:flex;align-items:center;opacity:0}
.block:hover>.block-controls,.block:focus-within>.block-controls {opacity:1}
.block-controls .icon-btn {width:22px;min-height:24px;padding:var(--space-3)}
.block-controls .icon {width:14px;height:14px}
[data-grip],[data-tree-grip],[data-record-grip] {cursor:grab;touch-action:none}
[data-record-grip] {color:var(--muted)}
.block-h1,.block-h2,.block-h3 {margin-block:var(--space-28) var(--space-8)}
.block:is(.block-h1,.block-h2,.block-h3) {scroll-margin-top:var(--space-16)}
.block-h1 {margin-top:var(--space-24)}
.block:is(.block-todo,.block-number,.block-bullet,.block-callout) {display:flex;gap:var(--space-8);align-items:flex-start}
.block:is(.block-todo,.block-number,.block-bullet,.block-callout) .editable {flex:1}
.block-marker {flex:0 0 var(--space-16);text-align:center;padding-top:var(--space-2)}
.block-bullet .block-marker {font-size:var(--emoji);line-height:var(--body-leading)}
.todo-check {flex:none;width:16px;height:16px;margin:var(--space-6) 0 0 var(--space-1);accent-color:var(--blue);cursor:pointer}
.completed .editable {text-decoration:line-through;color:var(--muted)}
.block hr {border:0;border-top:var(--outline);margin:var(--space-15) 0}
.block.block-callout {gap:var(--space-12);margin:var(--space-8) 0;padding:var(--space-14) var(--space-16);background:var(--callout);border-radius:var(--radius-small)}
.callout-symbol {font-size:var(--emoji);padding-top:var(--space-2);flex:none}
.block-quote .editable {margin:var(--space-6) 0;border-inline-start:3px solid var(--ink);padding-inline-start:var(--space-14)}
.block-code .editable {margin:var(--space-8) 0;white-space:pre-wrap;background:var(--code-surface);border-radius:var(--radius-small);padding:var(--space-24) var(--space-16);font:var(--ui)/var(--control-leading) ui-monospace,monospace}
.block code {font:var(--ui) ui-monospace,monospace;background:var(--rail);color:var(--red);border-radius:var(--radius-small);padding:var(--space-2) var(--space-4)}
.toggle-head {display:flex;gap:var(--space-3);align-items:center}
.toggle-arrow {width:var(--space-21);min-height:var(--space-24)}
.toggle-arrow::before {content:"";display:block;width:0;height:0;border:5px solid transparent;border-inline-start:7px solid currentColor;border-inline-end:0;transform-origin:35% 50%}
.toggle-arrow[aria-expanded="true"]::before {transform:rotate(90deg)}
.toggle-title {border:0;background:none;flex:1;min-width:0;min-height:27px;padding:0}
.toggle-title:focus {outline:none}
.toggle-body {margin-inline-start:var(--space-24)}
.block figure {margin:var(--space-8) 0}
.block figure img {display:block;max-width:100%;height:auto}
.block figcaption {font-size:var(--small);color:var(--muted);margin-top:var(--space-5)}
.block>a.block-link {display:inline-flex;align-items:center;gap:var(--space-7);text-underline-offset:3px;font-weight:535;padding:var(--space-1) var(--space-3);border-radius:var(--radius-small);max-width:100%}
.block>a.block-link:hover {background:var(--rail)}
.block-file>a.block-link {display:flex;width:100%;padding:var(--space-8);text-decoration:none}
.block-file>a.block-link span {text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:var(--space-3)}
.block .attach {background:var(--rail);color:var(--muted);width:100%;justify-content:flex-start}
.block [data-body] table {border-collapse:collapse}
.block [data-body] :is(td,th) {border:var(--outline);padding:var(--space-6) var(--space-8)}
.block-table {margin-block:var(--space-16) calc(var(--space-48) + var(--space-8))}
.block-table .table-scroll {padding-inline:var(--space-8)}
.block-table table {width:max-content;font-size:var(--ui);line-height:var(--control-leading)}
.block-table :is(td,th) {min-width:var(--document-table-cell);max-width:var(--document-table-cell-max);height:35px;text-align:start;vertical-align:top}
.block-table th {background:var(--rail);font-weight:600}
.block-table caption {padding-block:var(--space-4);text-align:start;color:var(--muted)}
.table-tools {position:absolute;inset-inline-start:var(--space-8);top:100%;display:flex;gap:var(--space-3);padding-block-start:var(--space-3);opacity:0;pointer-events:none}
.block-table:is(:hover,:focus-within) .table-tools {opacity:1;pointer-events:auto}
.table-tools .icon-btn {width:auto;min-height:var(--space-24);font-size:var(--label);padding-inline:var(--space-6);color:var(--muted)}
.table-tools [data-row-add]::after {content:"행"}
.table-tools [data-column-add]::after {content:"열"}
.table-tools .icon {width:var(--icon-small);height:var(--icon-small)}
.block-inline-database {margin-block:var(--space-16);min-width:0}
.document-header:has(+ #editor>.block-inline-database:first-child) h1 {margin-bottom:var(--space-16)}
.block-inline-database:first-child {margin-block-start:0}
.inline-database-heading {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);margin-bottom:var(--space-6)}
.block-inline-database:first-child .inline-database-heading {margin-bottom:var(--space-14)}
.inline-database-heading h2 {font-size:var(--heading-small);overflow-wrap:anywhere}
.block-inline-database .database-table {--database-table-title:152px;--database-table-cell:152px;--preview-tight:104px;--preview-notes:350px;--preview-tags:190px;--preview-url:200px;width:var(--preview-width,100%);min-width:var(--preview-width,100%)}
.block-inline-database col[data-track="tight"] {width:var(--preview-tight)}
.block-inline-database col[data-track="standard"] {width:var(--database-table-cell)}
.block-inline-database col[data-track="notes"] {width:var(--preview-notes)}
.block-inline-database col[data-track="tags"] {width:var(--preview-tags)}
.block-inline-database col[data-track="url"] {width:var(--preview-url)}
.block-inline-database .db-column-label span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-inline-database .db-tabs .current {border-radius:var(--radius-pill)}
.block-inline-database .title-cell .cell-value {word-break:normal}
.block-inline-database .database-table input[type="checkbox"] {appearance:none;display:inline-grid;place-items:center;width:var(--space-16);height:var(--space-16);margin:var(--space-6);border:1px solid var(--muted);border-radius:2px;vertical-align:top}
.block-inline-database .database-table input[type="checkbox"]:checked {background:var(--blue);border-color:var(--blue)}
.block-inline-database .database-table input[type="checkbox"]:checked::before {content:"";width:7px;height:4px;border:solid var(--on-accent);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.database-table .cell-value.cell-url {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration-color:var(--quiet);text-underline-offset:var(--space-3)}
.database-table .cell-tags {display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start}
.db-tag {display:inline-block;max-width:100%;padding:0 var(--space-6);border-radius:3px;background:var(--hover);color:var(--badge-gray-ink);font-size:var(--small);line-height:var(--ui-leading)}
.db-tag[data-tone="0"] {background:var(--badge-green);color:var(--badge-green-ink)}
.db-tag[data-tone="1"] {background:light-dark(#ffeed7,#583c21);color:light-dark(#804612,#ffddaa)}
.db-tag[data-tone="2"] {background:var(--badge-blue);color:var(--badge-blue-ink)}
.db-tag[data-tone="3"] {background:light-dark(#efe5f7,#493653);color:light-dark(#674488,#e8ccf8)}
.db-tag[data-tone="4"] {background:light-dark(#fae8ec,#513239);color:light-dark(#903a51,#ffd0dc)}
.document.note.wide .block-inline-database .db-display {margin-inline-end:calc(var(--space-16) - var(--wide-gutter))}
.inline-database-heading a {color:var(--muted);font-size:var(--small);text-decoration:none}
[data-inline-database][aria-busy="true"] {min-height:var(--control-height)}
[data-drop="before"],[data-drop="after"] {position:relative}
[data-drop="before"]::before,[data-drop="after"]::after {content:"";position:absolute;z-index:2;inset-inline:0;height:var(--space-2);background:var(--blue);pointer-events:none;border-radius:var(--radius-pill)}
[data-drop="before"]::before {top:0}
[data-drop="after"]::after {bottom:0}
[data-drop="inside"] {outline:var(--space-2) solid var(--blue);outline-offset:calc(-1 * var(--space-2));background:var(--badge-blue)}
[data-drag-source] {opacity:.45}
.dragging,.dragging * {cursor:grabbing!important;user-select:none}
.drag-preview {position:fixed;top:0;left:0;z-index:11;pointer-events:none;padding:var(--space-5) var(--space-8);background:var(--white);border:var(--outline);border-radius:var(--round);box-shadow:var(--shadow);font-size:var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.append-block {margin-top:var(--space-14);color:var(--muted);padding-inline:var(--space-3);opacity:0}
.append-block:is(:hover,:focus-visible) {opacity:1}
.popup {position:fixed;z-index:4;background:var(--panel);border:var(--outline);box-shadow:var(--shadow);border-radius:var(--radius-panel)}
.block-menu {width:min(256px,calc(100vw - var(--space-20)));padding:var(--space-5);max-height:min(348px,50vh);overflow:auto;font-size:var(--ui)}
.menu-title,.menu-empty {color:var(--muted);font-size:var(--label);padding:var(--space-5) var(--space-7)}
.menu-row {display:flex;align-items:center;gap:var(--space-9);width:100%;border:0;background:none;border-radius:var(--radius-tile);text-align:left;padding:var(--space-5) var(--space-7);min-height:var(--control-height)}
.menu-row.active,.menu-row:hover:not(:disabled) {background:var(--hover)}
.menu-icon {display:grid;place-items:center;border:var(--outline);border-radius:var(--radius-tile);width:28px;height:28px}
.format-bar {display:flex;align-items:center;padding:var(--space-3)}
.recent {display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:var(--space-8);margin:var(--space-12) 0 var(--space-21)}
.recent .tree-link {border:var(--outline);border-radius:var(--radius-panel);padding:var(--space-10) var(--space-12)}
.recent .tree-link:hover {background:var(--rail)}
.page-children {margin-top:var(--space-24)}
.page-children h2 {font-size:var(--subheading);font-weight:650;margin-bottom:var(--space-8)}
.child-links {display:grid;gap:var(--space-3);justify-items:start}
.child-links .tree-link {max-width:100%;border-radius:var(--round);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:var(--space-3)}
.child-links .tree-link:hover {background:var(--hover)}
.db-pager,.db-pager>div,.db-group-pager {display:flex;align-items:center;gap:var(--space-3)}
.db-pager {justify-content:flex-end;flex-wrap:wrap;padding:var(--space-6) 0;color:var(--muted);font-size:var(--small)}
.db-pager>span {margin-right:var(--space-5)}
.db-group-pager {justify-content:center;color:var(--muted);font-size:var(--label);white-space:nowrap}
.db-bar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);border-bottom:var(--outline);padding-bottom:var(--space-6)}
.db-tabs,.db-tools {display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.db-tabs .current {background:var(--hover);font-weight:650}
.db-filter {display:inline-flex;align-items:center;gap:var(--space-1);padding-left:var(--space-6);border-radius:var(--round);color:var(--muted)}
.db-filter:hover {background:var(--rail)}
.db-filter select {border:0;background:transparent;max-width:100px;min-height:var(--control-height);font-size:var(--small)}
.table-scroll,.board,.calendar {overflow:auto}
.table-scroll {max-width:100%}
.database-table {
  width:100%;min-width:calc(var(--database-table-title) + var(--data-columns) * var(--database-table-cell) + var(--action-columns) * var(--database-table-action));
  table-layout:fixed;border-collapse:collapse;font-size:var(--ui);line-height:var(--ui-leading)
}
.db-title-col {width:var(--database-table-title)}
.db-actions-col {width:var(--database-table-action)}
.database-table :is(th,td) {border-bottom:var(--outline);border-right:var(--outline);height:var(--input-height);padding:var(--space-4) var(--space-5);text-align:start;vertical-align:top;font-weight:400}
.database-table :is(th,td):last-child {border-right:0}
.database-table th {color:var(--muted)}
.db-column-label {display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-4);overflow-wrap:anywhere}
.db-column-label .icon {margin-top:var(--space-2)}
.database-table tr:hover td {background:var(--row-hover)}
.database-table :is(input:not([type=checkbox]),textarea) {width:100%;min-width:0;border:0;background:transparent;padding:var(--space-4)}
.database-table textarea {display:block;field-sizing:content;min-height:calc(var(--ui-leading) + 2 * var(--space-4));resize:none;overflow-wrap:anywhere;word-break:keep-all}
.database-table .cell-value {white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--space-4)}
.title-cell {display:flex;align-items:flex-start;gap:var(--space-2);font-weight:600}
.title-cell>.icon {margin-top:var(--space-6)}
.title-cell .icon-btn {width:25px}
.database-table .badge {border:0;max-width:100%}
.table-new {margin-top:var(--space-4);color:var(--muted)}
.badge {display:inline-block;padding:var(--space-2) var(--space-8);border-radius:var(--radius-pill);font-size:var(--label);white-space:nowrap}
.badge.gray {background:var(--hover);color:var(--badge-gray-ink)}
.badge.blue {background:var(--badge-blue);color:var(--badge-blue-ink)}
.badge.green {background:var(--badge-green);color:var(--badge-green-ink)}
.board {display:flex;gap:var(--space-14);padding:var(--space-12) 0 var(--space-18)}
.lane {flex:0 0 236px;background:var(--rail);border-radius:var(--radius-panel);min-height:150px;padding:var(--space-8)}
.lane-head {display:flex;align-items:center;gap:var(--space-8);min-height:31px;padding:var(--space-1) var(--space-4) var(--space-6);color:var(--muted)}
.record {display:flex;flex-direction:column;gap:var(--space-4);background:var(--white);border:var(--outline);border-radius:var(--round);margin-bottom:var(--space-6);padding:var(--space-4) var(--space-7);min-height:38px}
.record-link {justify-content:flex-start;text-align:left;overflow-wrap:anywhere}
.record-head,.calendar-card {display:flex;align-items:center;min-width:0}
.record-head .record-link,.calendar-card .calendar-event {flex:1;min-width:0}
.calendar-card [data-record-grip] {width:var(--space-22);min-height:var(--space-24)}
.calendar-card [data-record-grip] .icon {width:var(--icon-small);height:var(--icon-small)}
.record small {display:flex;align-items:center;gap:var(--space-5);color:var(--muted);padding:0 var(--space-8) var(--space-6)}
.calendar {padding-top:var(--space-7)}
.calendar header {position:sticky;left:0;display:flex;justify-content:space-between;align-items:center;min-height:var(--input-height)}
.calendar-days,.calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(75px,1fr));min-width:535px}
.calendar.paged :is(.calendar-days,.calendar-grid) {grid-template-columns:repeat(7,minmax(112px,1fr));min-width:784px}
.calendar .db-group-pager .icon-btn {flex:0 0 var(--space-24);width:var(--space-24)}
.calendar-days span {padding:var(--space-6);text-align:center;color:var(--muted);font-size:var(--label)}
.calendar-grid {border-top:var(--outline);border-left:var(--outline)}
.calendar-grid>div {min-height:82px;border-bottom:var(--outline);border-right:var(--outline);padding:var(--space-3)}
.calendar-grid .outside {background:var(--rail)}
.day-head {display:flex;align-items:center;justify-content:space-between;padding-left:var(--space-5);color:var(--muted);font-size:var(--small)}
.calendar-event {background:var(--badge-blue);border:0;border-radius:var(--radius-small);margin:var(--space-2) 0;width:100%;display:block;padding:var(--space-3);font-size:var(--label);text-align:left;word-break:keep-all;overflow-wrap:anywhere}
dialog {max-width:calc(100vw - 24px);width:440px;max-height:85vh;padding:0;border:var(--outline);border-radius:var(--radius-modal);color:var(--ink);background:var(--panel);box-shadow:var(--shadow)}
dialog::backdrop {background:var(--modal-backdrop)}
.dialog-head {display:flex;align-items:center;justify-content:space-between;border-bottom:var(--outline);padding:var(--space-11) var(--space-14)}
.dialog-head h2 {font-size:var(--body);font-weight:650}
.dialog-body {padding:var(--space-16)}
.dialog-body footer {display:flex;justify-content:flex-end;align-items:center;gap:var(--space-8);margin-top:var(--space-7)}
.form {display:grid;gap:var(--space-12);font-size:var(--ui)}
.form p {line-height:1.5}
.form label {display:grid;gap:var(--space-5);font-weight:550}
.form input,.form select,.search-input input {border:var(--outline);border-radius:var(--round);width:100%;min-height:var(--input-height);padding:var(--space-6) var(--space-8);background:var(--white);font-weight:400}
.form input[type=file] {padding:var(--space-8)}
.form small,.choice-list small {color:var(--muted);font-size:var(--label)}
.form-error:empty {display:none}
.form-error {color:var(--red);font-size:var(--small)}
.import-dialog {width:480px}
.import-fields,.import-state {display:grid;gap:var(--space-8)}
.import-fields>p,.import-state p {word-break:keep-all}
.import-limits {display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-10)}
.import-limits span {white-space:nowrap}
.import-state {padding:var(--space-12);border-radius:var(--radius-panel);background:var(--rail)}
.import-state p {overflow-wrap:anywhere;font-size:var(--small);color:var(--muted)}
.import-state progress {width:100%;height:var(--space-8);accent-color:var(--blue)}
.import-form footer {flex-wrap:wrap}
.search-dialog {width:530px;margin-top:min(16vh,130px)}
.search-input {display:flex;gap:var(--space-6);align-items:center}
.search-results {margin-top:var(--space-8);max-height:40vh;overflow:auto}
.search-results li {padding-inline:var(--space-4);border-radius:var(--radius-small)}
.search-results [aria-selected="true"],.search-results li:hover {background:var(--hover)}
.search-panel #search-group {margin-top:var(--space-8)}
.search-panel .search-results {margin-top:0}
.choice-list {display:grid;gap:var(--space-4)}
.choice-list>.ghost {justify-content:flex-start;text-align:left;padding:var(--space-8)}
.choice-list>.ghost span {display:grid;flex:1;gap:var(--space-3)}
.account-label {font-weight:600;margin:var(--space-2) var(--space-7) var(--space-8)}
.theme-setting {display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-4) var(--space-7);font-size:var(--ui)}
.theme-setting select {min-height:var(--control-height);padding:var(--space-3) var(--space-7);border:var(--outline);border-radius:var(--round);background:var(--white)}
.member-row {display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);border-top:var(--outline);padding-top:var(--space-12)}
.member-row>div,.version-current,.version-row {display:grid;gap:var(--space-4);min-width:0;overflow-wrap:anywhere}
.version-list {max-height:52vh;overflow:auto;list-style:none;border-top:var(--outline);padding:var(--space-8) 0 0}
.version-row {width:100%;height:auto;text-align:left;justify-content:start;padding:var(--space-8)}
.version-row span {color:var(--muted);font-size:var(--label)}
.history-dialog {width:720px}
.version-preview {max-height:62vh;overflow:auto;border:var(--outline);border-radius:var(--round)}
.version-preview :is(.document,.document.note) {padding:var(--space-24);min-height:0}
.version-preview .document.note.wide {margin-inline:0}
.edit-conflict {position:sticky;top:0;z-index:2;background:var(--rail);border-bottom:var(--outline);padding:var(--space-12) var(--page-gutter);font-size:var(--ui)}
.edit-conflict p,.form p,.form small,.auth-frame>p {word-break:keep-all;overflow-wrap:anywhere}
.edit-conflict div {display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-8)}
.emoji-picker {display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-4)}
.emoji-picker button {font-size:var(--emoji)}
.trash-list {display:grid;gap:var(--space-5)}
.trash-list>div {display:flex;align-items:center;gap:var(--space-6)}
.trash-list>div>span:nth-last-child(2) {flex:1}
.empty,.loading {color:var(--muted);font-size:var(--ui);padding:var(--space-10)}
.auth {min-height:100%;display:grid;place-content:center;padding:var(--space-24);gap:var(--space-12)}
.auth-frame {width:min(320px,calc(100vw - 48px))}
.auth-frame h1 {margin:var(--space-10) 0 var(--space-6);font-size:var(--auth-title)}
.auth-frame>p {margin-bottom:var(--space-22);color:var(--muted);font-size:var(--ui)}
.auth-frame .large {height:44px;width:44px;font-size:var(--brand)}
.auth-frame .primary {margin-top:var(--space-4);min-height:var(--input-height)}
#toast {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);z-index:10;padding:var(--space-10) var(--space-14);box-shadow:var(--shadow);background:var(--ink);color:var(--white);border-radius:var(--radius-panel);font-size:var(--ui)}
#toast.error {background:var(--danger-fill);color:var(--on-accent)}
@media (hover:none) {
  .table-tools,.append-block {opacity:1;pointer-events:auto}
  .tree-row[data-tree-page] {padding-inline-end:var(--space-48)}
  .tree-row :is([data-new],[data-tree-grip]),.block-controls,.document-header .no-icon {opacity:1;pointer-events:auto}
  .calendar-days,.calendar-grid {grid-template-columns:repeat(7,minmax(88px,1fr));min-width:616px}
}
@media (max-width:720px) {
  .document.note.wide .block-inline-database .db-display {margin-inline-end:0}
  :root {--page-gutter:24px;--wide-gutter:var(--page-gutter);--document-start:72px;--document-icon-start:56px}
  .workspace,.workspace.sidebar-closed {display:block}
  .workspace .sidebar {position:fixed;top:0;bottom:0;left:0;width:min(82vw,290px);z-index:8}
  .sidebar-overlay {position:fixed;inset:0;z-index:7;border:0;background:var(--drawer-backdrop);width:100%;display:block}
  .sidebar-closed .sidebar-overlay {display:none}
  .topbar {padding-inline:var(--space-7)}
  .breadcrumbs a:first-child:not(:last-child),.crumb-slash {display:none}
  #save-state {display:none}
  .document {padding-top:var(--space-37)}
  .document h1 {font-size:var(--title-compact)}
  .document .block-controls {right:100%;margin-right:var(--space-1)}
  .document .block-controls [data-plus] {display:none}
  .hero-icon {font-size:var(--hero-compact)}
  .emoji-picker {grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:no-preference) {
  :is(.icon-btn,.ghost,.nav-row,.primary) {transition:background-color 90ms ease-out}
}
@media (forced-colors:active) {
  .block-inline-database .database-table input[type="checkbox"] {appearance:auto}
  .block-inline-database .database-table input[type="checkbox"]:checked::before {content:none}
}