* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { color: #37352f; font: 14px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.notion-demo { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e9edf1; }
.database { position: absolute; top: clamp(72px, 22%, 160px); left: clamp(96px, 14%, 160px); right: -96px; min-height: calc(100% + 48px); padding: 80px 96px 80px 60px; border: 1px solid #e2e2df; border-radius: 18px; background: #fff; box-shadow: 0 2px 14px #00000007; }
.window-dots { position: absolute; top: 16px; left: 16px; display: flex; gap: 5px; }
.window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #e1e1df; }
.database-content { font-size: 12.6px; }
.database-title { margin: 0 0 44px 7.2px; font-size: 25.2px; line-height: 1.2; font-weight: 650; letter-spacing: -.54px; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #ccc transparent; padding-bottom: 10.8px; }
.table-track { width: max-content; padding-right: var(--scroll-tail, 0px); }
.table-scroll:focus-visible { outline: 2px solid #8cb3db; outline-offset: -2px; }
table { table-layout: fixed; border-collapse: collapse; width: 1497px; background: #fff; }
th, td { border: 1px solid #eee; text-align: left; vertical-align: top; padding: 0; }
th { border-top: 0; font-weight: 400; height: 32.4px; }
th:first-child, td:first-child { border-left: 0; }
th:last-child, td:last-child { border-right: 0; }
.property-heading { width: 100%; height: 32.4px; display: flex; align-items: center; gap: 5.4px; border: 0; padding: 0 7.2px; background: transparent; color: #91918e; font: inherit; white-space: nowrap; cursor: default; text-align: left; }
.property-heading:hover, .property-heading[aria-expanded="true"] { background: #f2f1ef; }
.property-heading:focus-visible { outline: 2px solid #8cb3db; outline-offset: -2px; }
.property-icon { width: 15.3px; height: 15.3px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.info-icon { width: 11.7px; height: 11.7px; flex: none; fill: none; stroke: #aaa9a5; stroke-width: 1.3; }
td { padding: 7.2px; overflow-wrap: break-word; }
td:first-child { font-weight: 600; }
td.number { text-align: left; vertical-align: top; }
.tag { display: inline-block; padding: 0 6.3px; border-radius: 3.6px; line-height: 20.7px; }
.tag-city { color: #31547b; background: #d3e5fa; }
.tag-category { color: #805331; background: #f6dfd1; }
.property-tip-viewport { position: absolute; top: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 10; }
.property-tip { position: absolute; z-index: 10; width: max-content; max-width: min(340px, calc(100vw - 24px)); padding: 7px 9px; border-radius: 6px; background: #2f2f2d; color: #ededeb; box-shadow: 0 4px 12px #0002; font-size: 12px; line-height: 1.45; pointer-events: none; }
.property-tip[hidden] { display: none; }
.tip-description { color: #b5b4ae; }

@media (max-width: 620px) {
  .database { top: 64px; left: 56px; right: -28px; padding-right: 28px; padding-left: 32px; padding-top: 64px; border-radius: 14px; }
  .database-title { margin-bottom: 38px; font-size: 21.6px; }
}