feat: render rich OneNote pages and resources

src/styles.css

@@ -324,7 +324,9 @@ p {
 }
 
 .page-content {
-  max-width: 48rem;
+  position: relative;
+  width: 100%;
+  max-width: 64rem;
   line-height: 1.65;
 }
 
@@ -333,6 +335,135 @@ p {
   white-space: pre-wrap;
 }
 
+.onenote-outline {
+  min-width: 0;
+  margin-bottom: 1rem;
+}
+
+.onenote-outline-group,
+.onenote-outline-element {
+  min-width: 0;
+}
+
+.onenote-text {
+  min-height: 1lh;
+  margin: 0 0 0.55rem;
+  white-space: pre-wrap;
+}
+
+.onenote-link {
+  color: #5b2c83;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.12em;
+}
+
+.onenote-table-scroll {
+  max-width: 100%;
+  margin-block: 1rem;
+  overflow-x: auto;
+}
+
+.onenote-table {
+  width: max-content;
+  min-width: min(100%, 28rem);
+  border-spacing: 0;
+  border-collapse: collapse;
+  background: #fff;
+}
+
+.onenote-table td {
+  min-width: 5rem;
+  border: 1px solid #cfc5d4;
+  padding: 0.55rem 0.65rem;
+  vertical-align: top;
+}
+
+.onenote-table--borderless td {
+  border-color: transparent;
+}
+
+.onenote-table td > :last-child {
+  margin-bottom: 0;
+}
+
+.onenote-image {
+  display: grid;
+  justify-items: start;
+  gap: 0.45rem;
+  max-width: 100%;
+  margin-block: 1rem;
+}
+
+.onenote-image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.3rem;
+}
+
+.onenote-image figcaption {
+  max-width: 40rem;
+  color: #716675;
+  font-size: 0.82rem;
+}
+
+.image-placeholder {
+  display: grid;
+  min-width: 12rem;
+  min-height: 7rem;
+  max-width: 32rem;
+  place-items: center;
+  border: 1px dashed #a58caf;
+  border-radius: 0.55rem;
+  padding: 1rem;
+  color: #716675;
+  background: #faf7fc;
+  text-align: center;
+}
+
+.attachment-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  margin-block: 0.8rem;
+  border: 1px solid #d4c8db;
+  border-radius: 0.65rem;
+  padding: 0.8rem;
+  background: #faf7fc;
+}
+
+.attachment-card > div {
+  display: grid;
+  flex: 1 1 12rem;
+  gap: 0.15rem;
+}
+
+.attachment-card span,
+.attachment-card small {
+  color: #716675;
+  font-size: 0.8rem;
+}
+
+.attachment-card small {
+  flex-basis: 100%;
+}
+
+.onenote-ink {
+  position: relative;
+  max-width: 100%;
+  margin-block: 0.75rem;
+  overflow: visible;
+  color: #241b2b;
+}
+
+.onenote-ink svg {
+  display: block;
+  max-width: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
 .unsupported-block {
   display: grid;
   gap: 0.2rem;
@@ -640,6 +771,32 @@ p {
     background: #3a3040;
   }
 
+  .onenote-link {
+    color: #d7acef;
+  }
+
+  .onenote-table,
+  .attachment-card,
+  .image-placeholder {
+    color: #f6effa;
+    background: #302638;
+  }
+
+  .onenote-table td {
+    border-color: #62536b;
+  }
+
+  .onenote-image figcaption,
+  .attachment-card span,
+  .attachment-card small,
+  .image-placeholder {
+    color: #cfc2d6;
+  }
+
+  .onenote-ink {
+    color: #f6effa;
+  }
+
   .diagnostic {
     color: #f5e8cd;
     background: #493b23;