preview.css

:root {
  color-scheme: light;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --backdrop: #E8EEEB;
  --app: #FAF9F6;
  --sidebar: #F6F5F1;
  --card: #FFFFFF;
  --ink: #242011;
  --muted: #74736E;
  --line: #E5E4E1;
  --action: #9E9D99;
  --tag: #E7EDF4;
  --tag-text: #2F5E8D;
  --save: #98ACC0;
  --save-text: #FDFCFB;
  --selected: #EBE9E3;
  --day-active: #DCE5ED;
  --day-today: #AFC3DA;
  --warning: #AE8139;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--backdrop); }
/* This is the export canvas. Every UI surface is rendered from opaque CSS colors.
   The notebook photograph is the only raster content; no screenshot is a background. */
.stage { width: 1448px; height: 1086px; padding: 44px 46px 20px; font-family: var(--font-sans); color: var(--ink); background: var(--backdrop); }
.app { display: flex; width: 1356px; height: 1022px; overflow: hidden; border: 1px solid #C9CECB; border-radius: 8px; background: var(--app); box-shadow: 0 14px 30px #253A2F12; }
.sidebar { flex: 0 0 324px; padding: 10px 13px; border-right: 1px solid #E2E1DD; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 10px; height: 45px; margin-bottom: 12px; color: #17201C; }
.brand-lockup { display: block; width: 145px; height: auto; }
.brand .icon { width: 17px; height: 17px; margin-left: -1px; color: #858782; }
.icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav { height: 54px; display: flex; align-items: flex-start; gap: 15px; border-bottom: 1px solid #DBDBD5; color: #7F817E; }
.nav-item { display: flex; align-items: center; justify-content: center; height: 38px; width: 31px; }
.nav-active { justify-content: flex-start; gap: 9px; width: 139px; padding: 0 9px; border-radius: 7px; background: var(--selected); color: #262724; font-size: 18px; }
.nav-active .icon:first-child { width: 21px; height: 21px; }
.nav-active .icon:last-child { width: 15px; height: 15px; margin-left: -2px; color: #777B76; }
.nav-search { margin-left: auto; }
.calendar { padding: 17px 0 0; }
.calendar-title { height: 36px; display: flex; align-items: center; padding: 0 10px; font-size: 17.5px; font-weight: 500; }
.month-arrows { display: flex; align-items: center; gap: 23px; margin-left: auto; color: #858782; }
.month-arrows .icon { width: 17px; height: 17px; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays { height: 35px; color: #969794; font-size: 15px; align-items: center; text-align: center; }
.days { grid-auto-rows: 42px; font-size: 16px; }
.day { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 6px; }
.other-month { color: #BCBDB8; }
.day-active { background: var(--day-active); }
.day-today { background: var(--day-today); }
.side-section { margin-top: 32px; padding: 0 10px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; height: 30px; color: #8D8F89; font-size: 14px; }
.section-heading .icon { width: 19px; height: 19px; }
.view-row { display: flex; align-items: center; gap: 15px; height: 45px; color: #4E514D; font-size: 18px; }
.view-row .icon { color: #8C9089; }
.tags-section { margin-top: 15px; }
.tag-row { display: flex; align-items: center; gap: 15px; height: 39px; color: #565954; font-size: 17px; }
.tag-row .icon { color: #8F938C; width: 20px; height: 20px; }
.tag-count { margin-left: auto; color: #91958D; font-size: 16px; }
.timeline { flex: 1; min-width: 0; padding: 26px 64px 0 74px; background: var(--app); }
.composer, .memo { border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
/* Composer proportions follow the app's 672px feed at this preview's scale.
   Disabled colors are precomposited over the card to keep the PNG fills solid. */
.composer { height: 125px; padding: 16px 21px; margin-bottom: 10px; }
.placeholder { height: 54px; color: var(--action); font-size: 21px; line-height: 32px; }
.composer-rail { height: 37px; display: flex; align-items: center; gap: 5px; }
.insert { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #DAD9D4; border-radius: 8px; background: var(--app); color: var(--ink); box-shadow: 0 1px 3px #0000000D; }
.insert .icon { width: 21px; height: 21px; }
.audience { display: flex; align-items: center; gap: 5px; padding: 0 11px; color: var(--muted); font-size: 17.5px; line-height: 24px; }
.audience .icon { width: 19px; height: 19px; }
.audience .chevron { width: 16px; height: 16px; color: #B9B9B6; }
.save { display: grid; place-items: center; margin-left: auto; padding: 0 11px; height: 37px; border: 0; border-radius: 8px; background: var(--save); color: var(--save-text); font-family: inherit; font-size: 19px; font-weight: 500; line-height: 27px; }
.memo { position: relative; padding: 14px 21px; margin-bottom: 10px; }
.memo-header { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 10px; font-size: 16.25px; line-height: 23px; color: var(--muted); }
.memo-actions { display: flex; align-items: center; gap: 5px; color: var(--action); }
.memo-actions .icon { width: 30px; height: 30px; padding: 5px; }
.memo-actions .ellipsis { width: 30px; height: 30px; }
.pinned { position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; background: var(--warning); border-top-right-radius: 11px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.memo-line { margin: 0; font-size: 20px; line-height: 30px; white-space: nowrap; }
.tag { display: inline-block; margin-left: 3px; padding: 0 8px; border-radius: 999px; background: var(--tag); color: var(--tag-text); font-size: 20px; line-height: 28px; vertical-align: baseline; }
.memo-thought { min-height: 100px; }
.memo-checklist { min-height: 194px; }
.tasks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.task { display: flex; gap: 14px; align-items: center; min-height: 26px; font-size: 20px; line-height: 26px; }
.checkbox { width: 20px; height: 20px; border: 1px solid #9C9E9F; border-radius: 3px; display: grid; place-items: center; background: #FFFFFF; flex: 0 0 auto; }
.done .checkbox { background: #A2A3A4; border-color: #A2A3A4; color: #FFFFFF; }
.checkbox .icon { width: 18px; height: 18px; stroke-width: 2.3; }
.done .task-text { color: #909192; text-decoration: line-through; }
.memo-reading { min-height: 130px; }
.article-link { display: block; margin-top: 2px; color: #315F90; text-decoration: underline; text-underline-offset: 2px; font-size: 20px; line-height: 28px; }
.memo-sketch { min-height: 246px; }
.notebook { display: block; width: 672px; height: 136px; object-fit: cover; border-radius: 6px; margin-top: 12px; }
.memo-followup { min-height: 135px; margin-bottom: 0; }
.reference { display: flex; align-items: center; gap: 13px; margin-top: 12px; font-size: 16px; color: #85888D; }
.reference .icon { width: 20px; height: 20px; }
.reference-label { margin-left: auto; font-size: 16px; color: #A3A5A9; }
/* No textured fills, blend effects, or translucent controls in the export. */
.tag, .save, .memo, .composer, .sidebar, .timeline, .day, .nav-active {
  background-image: none;
  filter: none;
  backdrop-filter: none;
  opacity: 1;
  box-shadow: none;
  mix-blend-mode: normal;
  text-shadow: none;
}