@w100n/documents 0.4.0 → 0.11.0

package/dist/index.css

@@ -1,941 +1,3845 @@
-/* src/styles.css */
-.w100n-docs {
-  --docs-bg: #faf9f6;
-  --docs-side: #f8fafc;
-  --docs-card: #fff;
-  --docs-paper: #fff;
-  --docs-border: #e2e8f0;
-  --docs-line2: #cbd5e1;
-  --docs-text: #0f172a;
-  --docs-muted: #64748b;
-  --docs-dim: #94a3b8;
-  --docs-hover: #f1f5f9;
-  --docs-soft: #f1f5f9;
-  --docs-active: #8b5cf61a;
-  --docs-accent: #7c3aed;
-  --docs-thumb: #eef0f5;
-  --docs-shadow: 0 12px 32px -14px rgb(15 23 42 / 22%);
-  --docs-narrow: 0;
-  container-type: inline-size;
+/* src/slides/slides.css */
+.w100n-slides {
+  position: relative;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  box-sizing: border-box;
-  background: var(--docs-bg);
-  color: var(--docs-text);
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-}
-.w100n-docs[data-theme=dark] {
-  --docs-bg: #10111b;
-  --docs-side: #0b0d17;
-  --docs-card: #11141f;
-  --docs-paper: #fff;
-  --docs-border: #ffffff12;
-  --docs-line2: #ffffff1c;
-  --docs-text: #eef1f8;
-  --docs-muted: #8e97ab;
-  --docs-dim: #5d6579;
-  --docs-hover: #ffffff0a;
-  --docs-soft: #ffffff09;
-  --docs-active: #8b5cf624;
-  --docs-accent: #a78bfa;
-  --docs-thumb: #0f1220;
-  --docs-shadow: 0 16px 40px -16px rgb(0 0 0 / 70%);
-  color-scheme: dark;
+  gap: 8px;
 }
-.w100n-docs *,
-.w100n-docs *::before,
-.w100n-docs *::after {
-  box-sizing: border-box;
+.w100n-slides-bar {
+  margin: 0 auto;
 }
-.w100n-docs button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: 0;
-  cursor: pointer;
+.w100n-slides-bar .w100n-docs-action:first-child {
+  margin-left: 0;
+  margin-right: 6px;
 }
-.w100n-docs button:disabled {
-  cursor: default;
-  opacity: .5;
+.w100n-slides-bar .w100n-pdf-pageno {
+  margin-left: 4px;
 }
-.w100n-docs svg {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+.w100n-slides-bar .w100n-docs-muted {
+  padding: 0 6px;
 }
-.w100n-docs-bar {
+.w100n-slides-body {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 58px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--docs-border);
-  background: var(--docs-card);
+  gap: 10px;
 }
-.w100n-docs-tile {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
+.w100n-slides-rail {
   flex-shrink: 0;
-  border-radius: 10px;
-  color: #fff;
-  background:
-    linear-gradient(
-      145deg,
-      #8b5cf6,
-      #6d28d9);
-  box-shadow: 0 6px 14px -6px #7c3aed99;
+  width: 196px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 10px 10px 14px 6px;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-side);
+  scrollbar-width: thin;
 }
-.w100n-docs-tile[data-kind=docx] {
-  background:
-    linear-gradient(
-      145deg,
-      #3b82f6,
-      #1d4ed8);
-  box-shadow: 0 6px 14px -6px #1d4ed899;
+.w100n-slides-rail ol {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.w100n-docs-tile[data-kind=pdf] {
-  background:
-    linear-gradient(
-      145deg,
-      #f43f5e,
-      #be123c);
-  box-shadow: 0 6px 14px -6px #be123c99;
+.w100n-slides-rail li {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  padding-left: 26px;
 }
-.w100n-docs-tile[data-kind=sheet] {
-  background:
-    linear-gradient(
-      145deg,
-      #10b981,
-      #047857);
-  box-shadow: 0 6px 14px -6px #04785799;
+.w100n-slides-rail li[data-stack=in] {
+  padding-left: 40px;
 }
-.w100n-docs-tile[data-kind=slides] {
-  background:
-    linear-gradient(
-      145deg,
-      #f59e0b,
-      #c2410c);
-  box-shadow: 0 6px 14px -6px #c2410c99;
+.w100n-slides-rail li[data-drop]::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  left: 22px;
+  right: 0;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--docs-accent);
 }
-.w100n-docs-heading {
-  display: grid;
-  min-width: 0;
-  flex: 1;
+.w100n-slides-rail li[data-drop=before]::after {
+  top: -8px;
 }
-.w100n-docs-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-  font-weight: 650;
+.w100n-slides-rail li[data-drop=after]::after {
+  bottom: -8px;
 }
-.w100n-docs-crumbs {
+.w100n-docs .w100n-slides-thumb {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   display: flex;
-  align-items: center;
-  min-width: 0;
+  align-items: flex-start;
+  padding: 2px 0 0;
+  border-radius: 8px;
   color: var(--docs-muted);
-  font-size: 12px;
+  font-size: 11px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
 }
-.w100n-docs-crumbs > span {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  white-space: nowrap;
+.w100n-docs .w100n-slides-thumb[aria-current=true] {
+  color: var(--docs-accent);
 }
-.w100n-docs-crumbs svg {
-  width: 12px;
-  height: 12px;
-  margin: 0 3px;
+.w100n-docs .w100n-slides-thumb[data-dragging=true] ~ .w100n-slides-mini {
+  opacity: .4;
 }
-.w100n-docs-end {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
+.w100n-docs .w100n-slides-thumb:focus-visible {
+  outline: none;
 }
-.w100n-docs .w100n-docs-action {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: 9px;
-  background:
-    linear-gradient(
-      135deg,
-      #8b5cf6,
-      #6d28d9);
-  color: #fff;
-  font-weight: 600;
-  white-space: nowrap;
+.w100n-docs .w100n-slides-thumb:focus-visible ~ .w100n-slides-mini {
+  box-shadow: 0 0 0 2px var(--docs-accent), 0 0 0 5px #8b5cf633;
 }
-.w100n-docs .w100n-docs-action svg {
-  width: 14px;
-  height: 14px;
+.w100n-slides-mini {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 0 0 1px var(--docs-border);
+  transition: box-shadow .15s;
 }
-.w100n-docs .w100n-docs-action:disabled {
-  opacity: .6;
+.w100n-slides-thumb:hover ~ .w100n-slides-mini {
+  box-shadow: 0 0 0 1px #8b5cf680;
 }
-.w100n-docs-badge {
-  display: inline-flex;
-  align-items: center;
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 7px;
-  background: var(--docs-active);
-  color: var(--docs-accent);
-  font-size: 11px;
-  font-weight: 700;
-  white-space: nowrap;
+.w100n-slides-thumb[aria-current=true] ~ .w100n-slides-mini {
+  box-shadow: 0 0 0 2px #8b5cf6, 0 8px 18px -10px #8b5cf6b3;
 }
-.w100n-docs-body {
+.w100n-slides-frame {
   position: relative;
+  display: block;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.w100n-slides-frame iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  border: 0;
+  background: #fff;
+  transform-origin: 0 0;
+  color-scheme: only light;
+}
+.w100n-slides-frame[data-hidden=true] {
+  visibility: hidden;
+}
+.w100n-slides-mini iframe,
+.w100n-slides-show iframe,
+.w100n-slides-presenter iframe {
+  pointer-events: none;
+}
+.w100n-slides-main {
   flex: 1;
+  min-width: 0;
   min-height: 0;
   display: flex;
+  flex-direction: column;
   gap: 10px;
-  padding: 10px;
 }
-.w100n-docs-side {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  min-height: 0;
+.w100n-slides-stage {
+  flex: 1;
+  min-height: 180px;
+  display: grid;
+  place-items: center;
   overflow: hidden;
-  border: 1px solid var(--docs-border);
   border-radius: 13px;
-  background: var(--docs-side);
-  box-shadow: var(--docs-shadow);
 }
-.w100n-docs-list {
-  width: 300px;
+.w100n-slides-stage > .w100n-slides-frame {
+  grid-area: 1 / 1;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 18px 40px -20px rgb(15 23 42 / 35%);
 }
-.w100n-docs-panel {
-  width: 272px;
+.w100n-docs[data-theme=dark] .w100n-slides-stage > .w100n-slides-frame {
+  box-shadow: 0 0 0 1px #ffffff14, 0 18px 40px -20px rgb(0 0 0 / 80%);
 }
-.w100n-docs-head {
+.w100n-slides-notes {
+  flex-shrink: 0;
   display: grid;
-  gap: 10px;
-  padding: 12px 12px 11px;
-  border-bottom: 1px solid var(--docs-border);
-  background:
-    linear-gradient(
-      to bottom,
-      #8b5cf612,
-      transparent);
+  gap: 7px;
+  padding: 10px 12px 12px;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
 }
-.w100n-docs-row {
+.w100n-slides-notes header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   min-width: 0;
+  font-size: 12.5px;
+  font-weight: 650;
 }
-.w100n-docs-caption {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  padding: 0 4px;
-  font-size: 13px;
-  font-weight: 650;
-}
-.w100n-docs-caption span {
+.w100n-slides-notes header svg {
   color: var(--docs-accent);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-.w100n-docs .w100n-docs-close,
-.w100n-docs .w100n-docs-reopen {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  border-radius: 9px;
-  color: #fff;
-  background:
-    linear-gradient(
-      145deg,
-      #8b5cf6,
-      #6d28d9);
-  box-shadow: 0 6px 14px -6px #7c3aed99;
-}
-.w100n-docs-close svg,
-.w100n-docs-reopen svg {
-  width: 15px;
-  height: 15px;
-}
-.w100n-docs-reopen {
-  position: absolute;
-  z-index: 3;
-  top: 20px;
-  left: 20px;
-}
-.w100n-docs-reopen-right {
-  left: auto;
-  right: 10px;
-  top: 10px;
-}
-.w100n-docs-picker {
-  position: relative;
 }
-.w100n-docs .w100n-docs-field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  height: 36px;
-  padding: 0 10px;
-  border: 1px solid var(--docs-border);
-  border-radius: 10px;
-  background: var(--docs-card);
-  text-align: left;
-}
-.w100n-docs-field b {
-  min-width: 0;
+.w100n-slides-notes header small {
+  margin-left: auto;
   overflow: hidden;
+  color: var(--docs-dim);
+  font-size: 11.5px;
+  font-weight: 500;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-weight: 600;
-  font-size: 12.5px;
-}
-.w100n-docs-field > svg:last-child:not(:first-child) {
-  margin-left: auto;
-  color: var(--docs-dim);
-}
-.w100n-docs-search {
-  gap: 8px;
-  color: var(--docs-dim);
 }
-.w100n-docs-search input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  border: 0;
-  outline: none;
-  background: transparent;
+.w100n-slides-notes textarea {
+  height: 84px;
+  min-height: 52px;
+  resize: vertical;
+  padding: 8px 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 9px;
+  background: var(--docs-bg);
   color: var(--docs-text);
   font: inherit;
-  font-size: 12.5px;
+  line-height: 1.5;
+  outline: none;
 }
-.w100n-docs-search input::placeholder {
+.w100n-slides-notes textarea:focus {
+  border-color: var(--docs-accent);
+  box-shadow: 0 0 0 3px #8b5cf61f;
+}
+.w100n-slides-notes textarea::placeholder {
   color: var(--docs-dim);
 }
-.w100n-docs-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 3px;
-  background: var(--docs-accent);
-  flex-shrink: 0;
+.w100n-slides-notes p {
+  max-height: 84px;
+  margin: 0;
+  overflow-y: auto;
+  color: var(--docs-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
-.w100n-docs-all {
+.w100n-slides-show {
+  position: fixed;
+  z-index: 2000;
+  inset: 0;
   display: grid;
   place-items: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  border-radius: 6px;
-  color: #fff;
-  background:
-    linear-gradient(
-      145deg,
-      #64748b,
-      #334155);
+  overflow: hidden;
+  background: #000;
+  cursor: pointer;
 }
-.w100n-docs-all svg {
-  width: 12px;
-  height: 12px;
+.w100n-slides-show > .w100n-slides-frame {
+  grid-area: 1 / 1;
 }
-.w100n-docs-count {
-  color: var(--docs-dim);
-  font-size: 11px;
+.w100n-slides-count {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  padding: 2px 9px;
+  border-radius: 8px;
+  background: rgb(0 0 0 / 45%);
+  color: #ffffffd9;
+  font-size: 12px;
+  font-weight: 650;
   font-variant-numeric: tabular-nums;
+  pointer-events: none;
 }
-.w100n-docs-menu {
+.w100n-slides-foot {
   position: absolute;
-  z-index: 6;
-  top: calc(100% + 6px);
   left: 0;
   right: 0;
+  bottom: 0;
   display: flex;
-  flex-direction: column;
-  max-height: min(420px, 60vh);
-  overflow-y: auto;
-  padding: 6px;
-  border: 1px solid var(--docs-border);
-  border-radius: 12px;
-  background: var(--docs-card);
-  box-shadow: var(--docs-shadow);
-}
-.w100n-docs-menu button {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  min-height: 34px;
-  padding: 0 8px;
-  border-radius: 8px;
-  text-align: left;
-  font-size: 12.5px;
-}
-.w100n-docs-menu button b {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
+  justify-content: center;
+  align-items: flex-end;
+  height: 110px;
+  padding-bottom: 16px;
+  opacity: 0;
+  transition: opacity .2s;
+  cursor: default;
 }
-.w100n-docs-menu button .w100n-docs-count {
-  margin-left: auto;
+.w100n-slides-foot:hover,
+.w100n-slides-foot:focus-within {
+  opacity: 1;
 }
-.w100n-docs-menu button > svg:last-child {
-  margin-left: auto;
-  color: var(--docs-accent);
-  width: 14px;
-  height: 14px;
+.w100n-slides-controls {
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  border-radius: 14px;
+  background: rgb(17 17 27 / 78%);
+  box-shadow: 0 12px 30px -12px #000;
 }
-.w100n-docs-menu button:hover {
-  background: #8b5cf60f;
+.w100n-docs .w100n-slides-controls button,
+.w100n-docs .w100n-slides-head .w100n-slides-end button:not(.w100n-docs-action) {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
 }
-.w100n-docs-menu button[aria-selected=true] {
-  background: #8b5cf61f;
+.w100n-docs .w100n-slides-controls button:last-child {
+  background:
+    linear-gradient(
+      145deg,
+      #f43f5e,
+      #be123c);
+  box-shadow: 0 6px 14px -6px #be123c99;
 }
-.w100n-docs-menu-caption {
-  margin: 6px 0 2px;
-  padding: 4px 8px 3px;
-  color: var(--docs-dim);
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: .06em;
-  text-transform: uppercase;
+.w100n-docs.w100n-slides-presenter {
+  height: 100%;
 }
-.w100n-docs-chips {
+.w100n-slides-head {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.w100n-docs-chips button {
-  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  height: 26px;
-  padding: 0 9px;
-  border-radius: 8px;
-  background: var(--docs-soft);
+  gap: 10px;
+  min-height: 58px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--docs-border);
+  background: var(--docs-card);
+}
+.w100n-docs .w100n-slides-head > button {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
   color: var(--docs-muted);
-  font-size: 11.5px;
-  font-weight: 600;
 }
-.w100n-docs-chips button:hover {
+.w100n-docs .w100n-slides-head > button:hover {
+  background: var(--docs-hover);
   color: var(--docs-text);
 }
-.w100n-docs-chips button span {
-  color: var(--docs-dim);
+.w100n-slides-time {
+  min-width: 74px;
+  font-size: 22px;
+  font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
-.w100n-docs-chips button[aria-pressed=true] {
-  background: var(--docs-active);
-  color: var(--docs-accent);
-  box-shadow: inset 0 0 0 1px #8b5cf659;
+.w100n-slides-end {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
 }
-.w100n-docs-chips button[aria-pressed=true] span {
-  color: inherit;
+.w100n-slides-end .w100n-docs-action {
+  margin-left: 6px;
 }
-.w100n-docs-cards {
+.w100n-slides-desk {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
   display: grid;
-  align-content: start;
-  gap: 10px;
-  padding: 10px 12px 16px;
-  scrollbar-width: thin;
+  grid-template-columns: minmax(0, 1.75fr) minmax(240px, 1fr);
+  gap: 14px;
+  padding: 14px;
 }
-.w100n-docs-folder {
+.w100n-slides-now {
+  min-width: 0;
+  min-height: 0;
   display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 13px;
+  background: #000;
+}
+.w100n-slides-side {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   gap: 8px;
 }
-.w100n-docs-group {
-  margin: 4px 2px 0;
-  color: var(--docs-dim);
+.w100n-slides-side .w100n-docs-caption {
+  flex: none;
+  padding: 0;
+}
+.w100n-slides-side .w100n-docs-caption svg {
+  color: var(--docs-accent);
+}
+.w100n-slides-next {
+  flex-shrink: 0;
+  display: grid;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px var(--docs-border);
+}
+.w100n-slides-next > .w100n-docs-muted {
+  padding: 24px 12px;
+  text-align: center;
+}
+.w100n-slides-speech {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px 16px;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-card);
+  font-size: 20px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+@container (max-width: 900px) {
+  .w100n-slides-body {
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+  }
+  .w100n-slides-main {
+    flex: none;
+  }
+  .w100n-slides-stage {
+    flex: none;
+    min-height: 0;
+    aspect-ratio: var(--w100n-ratio);
+  }
+  .w100n-slides-rail {
+    width: auto;
+    overflow: auto hidden;
+    padding: 8px 10px;
+  }
+  .w100n-slides-rail ol {
+    grid-auto-flow: column;
+    justify-content: start;
+  }
+  .w100n-slides-rail li,
+  .w100n-slides-rail li[data-stack=in] {
+    padding-left: 20px;
+  }
+  .w100n-slides-notes header small {
+    display: none;
+  }
+  .w100n-slides-bar {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .w100n-slides-bar > * {
+    flex-shrink: 0;
+  }
+  .w100n-slides-bar > .w100n-docs-action:last-child {
+    position: sticky;
+    right: 0;
+    margin-left: 6px;
+    box-shadow: -10px 0 8px 2px var(--docs-card);
+  }
+  .w100n-docs .w100n-slides-bar > .w100n-docs-action:last-child:disabled {
+    opacity: 1;
+    background:
+      linear-gradient(
+        135deg,
+        #b9a5f8,
+        #9f86ec);
+  }
+}
+
+/* src/styles.css */
+.w100n-docs {
+  --docs-bg: #faf9f6;
+  --docs-side: #f8fafc;
+  --docs-card: #fff;
+  --docs-paper: #fff;
+  --docs-border: #e2e8f0;
+  --docs-line2: #cbd5e1;
+  --docs-text: #0f172a;
+  --docs-muted: #5b6b80;
+  --docs-dim: #677489;
+  --docs-hover: #f1f5f9;
+  --docs-soft: #f1f5f9;
+  --docs-active: #8b5cf61a;
+  --docs-accent: #7c3aed;
+  --docs-thumb: #eef0f5;
+  --docs-shadow: 0 12px 32px -14px rgb(15 23 42 / 22%);
+  --docs-narrow: 0;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.w100n-docs[data-theme=dark] {
+  --docs-bg: #10111b;
+  --docs-side: #0b0d17;
+  --docs-card: #11141f;
+  --docs-paper: #fff;
+  --docs-border: #ffffff12;
+  --docs-line2: #ffffff1c;
+  --docs-text: #eef1f8;
+  --docs-muted: #949db1;
+  --docs-dim: #7d869c;
+  --docs-hover: #ffffff0a;
+  --docs-soft: #ffffff09;
+  --docs-active: #8b5cf624;
+  --docs-accent: #a78bfa;
+  --docs-thumb: #0f1220;
+  --docs-shadow: 0 16px 40px -16px rgb(0 0 0 / 70%);
+  color-scheme: dark;
+}
+.w100n-docs *,
+.w100n-docs *::before,
+.w100n-docs *::after {
+  box-sizing: border-box;
+}
+.w100n-docs button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.w100n-docs button:disabled {
+  cursor: default;
+  opacity: .5;
+}
+.w100n-docs svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.w100n-docs :is(button, a):focus-visible {
+  outline: 2px solid var(--docs-accent);
+  outline-offset: 1px;
+}
+.w100n-docs-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--docs-border);
+  background: var(--docs-card);
+}
+.w100n-docs-tile {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-docs-tile[data-kind=docx] {
+  background:
+    linear-gradient(
+      145deg,
+      #3b82f6,
+      #1d4ed8);
+  box-shadow: 0 6px 14px -6px #1d4ed899;
+}
+.w100n-docs-tile[data-kind=pdf] {
+  background:
+    linear-gradient(
+      145deg,
+      #f43f5e,
+      #be123c);
+  box-shadow: 0 6px 14px -6px #be123c99;
+}
+.w100n-docs-tile[data-kind=sheet] {
+  background:
+    linear-gradient(
+      145deg,
+      #10b981,
+      #047857);
+  box-shadow: 0 6px 14px -6px #04785799;
+}
+.w100n-docs-tile[data-kind=slides] {
+  background:
+    linear-gradient(
+      145deg,
+      #f59e0b,
+      #c2410c);
+  box-shadow: 0 6px 14px -6px #c2410c99;
+}
+.w100n-docs-heading {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+}
+.w100n-docs-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 650;
+}
+.w100n-docs-crumbs {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--docs-muted);
+  font-size: 12px;
+}
+.w100n-docs-crumbs > span {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+}
+.w100n-docs-crumbs svg {
+  width: 12px;
+  height: 12px;
+  margin: 0 3px;
+}
+.w100n-docs-end {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+.w100n-docs .w100n-docs-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 9px;
+  background:
+    linear-gradient(
+      135deg,
+      #8b5cf6,
+      #6d28d9);
+  color: #fff;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.w100n-docs .w100n-docs-action svg {
+  width: 14px;
+  height: 14px;
+}
+.w100n-docs .w100n-docs-action:disabled {
+  opacity: .6;
+}
+.w100n-docs-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 7px;
+  background: var(--docs-active);
+  color: var(--docs-accent);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.w100n-docs-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+}
+.w100n-docs-side {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-side);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-docs-list {
+  width: 300px;
+}
+.w100n-docs-panel {
+  width: 272px;
+}
+.w100n-docs-head {
+  display: grid;
+  gap: 10px;
+  padding: 12px 12px 11px;
+  border-bottom: 1px solid var(--docs-border);
+  background:
+    linear-gradient(
+      to bottom,
+      #8b5cf612,
+      transparent);
+}
+.w100n-docs-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.w100n-docs-caption {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0 4px;
+  font-size: 13px;
+  font-weight: 650;
+}
+.w100n-docs-caption span {
+  color: var(--docs-accent);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-docs .w100n-docs-close,
+.w100n-docs .w100n-docs-reopen {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-docs-close svg,
+.w100n-docs-reopen svg {
+  width: 15px;
+  height: 15px;
+}
+.w100n-docs-reopen {
+  position: absolute;
+  z-index: 3;
+  top: 20px;
+  left: 20px;
+}
+.w100n-docs-reopen-right {
+  left: auto;
+  right: 10px;
+  top: 10px;
+}
+.w100n-docs-picker {
+  position: relative;
+}
+.w100n-docs .w100n-docs-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  background: var(--docs-card);
+  text-align: left;
+}
+.w100n-docs-field b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 12.5px;
+}
+.w100n-docs-field > svg:last-child:not(:first-child) {
+  margin-left: auto;
+  color: var(--docs-dim);
+}
+.w100n-docs-search {
+  gap: 8px;
+  color: var(--docs-dim);
+}
+.w100n-docs-search input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--docs-text);
+  font: inherit;
+  font-size: 12.5px;
+}
+.w100n-docs-search input::placeholder {
+  color: var(--docs-dim);
+}
+.w100n-docs-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  background: var(--docs-accent);
+  flex-shrink: 0;
+}
+.w100n-docs-all {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #64748b,
+      #334155);
+}
+.w100n-docs-all svg {
+  width: 12px;
+  height: 12px;
+}
+.w100n-docs-count {
+  color: var(--docs-dim);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-docs-menu {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: min(420px, 60vh);
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-docs-menu button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-height: 34px;
+  padding: 0 8px;
+  border-radius: 8px;
+  text-align: left;
+  font-size: 12.5px;
+}
+.w100n-docs-menu button b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+.w100n-docs-menu button .w100n-docs-count {
+  margin-left: auto;
+}
+.w100n-docs-menu button > svg:last-child {
+  margin-left: auto;
+  color: var(--docs-accent);
+  width: 14px;
+  height: 14px;
+}
+.w100n-docs-menu button:hover {
+  background: #8b5cf60f;
+}
+.w100n-docs-menu button[aria-selected=true] {
+  background: #8b5cf61f;
+}
+.w100n-docs-menu-caption {
+  margin: 6px 0 2px;
+  padding: 4px 8px 3px;
+  color: var(--docs-dim);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.w100n-docs-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.w100n-docs-chips button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 9px;
+  border-radius: 8px;
+  background: var(--docs-soft);
+  color: var(--docs-muted);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.w100n-docs-chips button:hover {
+  color: var(--docs-text);
+}
+.w100n-docs-chips button span {
+  color: var(--docs-muted);
+  font-variant-numeric: tabular-nums;
+}
+.w100n-docs-chips button[aria-pressed=true] {
+  background: var(--docs-active);
+  color: var(--docs-accent);
+  box-shadow: inset 0 0 0 1px #8b5cf659;
+}
+.w100n-docs-chips button[aria-pressed=true] span {
+  color: inherit;
+}
+.w100n-docs-cards {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  padding: 10px 12px 16px;
+  scrollbar-width: thin;
+}
+.w100n-docs-folder {
+  display: grid;
+  gap: 8px;
+}
+.w100n-docs-group {
+  margin: 4px 2px 0;
+  color: var(--docs-dim);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.w100n-docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
+  gap: 8px;
+}
+.w100n-docs .w100n-docs-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  text-align: left;
+  transition: border-color .15s, box-shadow .15s;
+}
+.w100n-docs .w100n-docs-card:hover {
+  border-color: #8b5cf666;
+}
+.w100n-docs .w100n-docs-card[aria-current=true] {
+  border-color: #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf6, 0 8px 22px -12px #8b5cf6b3;
+}
+.w100n-docs-thumb {
+  position: relative;
+  display: block;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-bottom: 1px solid var(--docs-border);
+  background: var(--docs-thumb);
+}
+.w100n-docs-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+  background: #fff;
+}
+.w100n-docs-paper {
+  position: absolute;
+  inset: 9px 12px 0;
+  display: block;
+  overflow: hidden;
+  padding: 9px 10px;
+  border-radius: 4px 4px 0 0;
+  background: #fff;
+  color: #475569;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 12%);
+  font-size: 5.6px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.w100n-docs-paper b {
+  display: block;
+  margin-bottom: 4px;
+  color: #0f172a;
+  font-size: 8px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+.w100n-docs-paper i {
+  display: block;
+  height: 4px;
+  margin-bottom: 5px;
+  border-radius: 2px;
+  background: #e2e8f0;
+}
+.w100n-docs-paper i:first-child {
+  width: 62%;
+  height: 6px;
+  background: #334155;
+}
+.w100n-docs-paper i:nth-child(3) {
+  width: 84%;
+}
+.w100n-docs-paper i:nth-child(5) {
+  width: 48%;
+}
+.w100n-docs-kind {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  padding: 1px 6px;
+  border-radius: 5px;
+  color: #fff;
+  background: #7c3aed;
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+.w100n-docs-kind[data-kind=docx] {
+  background: #2563eb;
+}
+.w100n-docs-kind[data-kind=pdf] {
+  background: #e11d48;
+}
+.w100n-docs-kind[data-kind=sheet] {
+  background: #047857;
+}
+.w100n-docs-kind[data-kind=slides] {
+  background: #c2410c;
+}
+.w100n-docs-card-text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding: 7px 9px 8px;
+}
+.w100n-docs-card-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12.5px;
+  font-weight: 650;
+}
+.w100n-docs-card-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--docs-dim);
+  font-size: 11px;
+}
+.w100n-docs-muted {
+  margin: 0;
+  color: var(--docs-muted);
+  font-size: 12px;
+}
+.w100n-docs-about {
+  display: grid;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--docs-border);
+}
+.w100n-docs-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.w100n-docs-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 56px 12px 32px;
+}
+.w100n-docs-empty {
+  margin: auto;
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  color: var(--docs-muted);
+}
+.w100n-docs-empty svg {
+  width: 32px;
+  height: 32px;
+}
+.w100n-docs-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--docs-muted);
+}
+.w100n-docs-note button {
+  color: var(--docs-accent);
+  font-weight: 600;
+}
+.w100n-docs-page {
+  width: min(820px, 100%);
+  padding: 56px 64px;
+  border-radius: 6px;
+  background: var(--docs-paper);
+  color: #1f2937;
+  color-scheme: only light;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 18px 40px -20px rgb(15 23 42 / 35%);
+}
+.w100n-docs-prose {
+  font-size: 15px;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+.w100n-docs-prose :is(p, ul, ol, pre, table, blockquote, hr) {
+  margin: 0 0 14px;
+}
+.w100n-docs-prose :is(ul, ol) {
+  padding-left: 24px;
+}
+.w100n-docs-prose ul {
+  list-style: disc;
+}
+.w100n-docs-prose ol {
+  list-style: decimal;
+}
+.w100n-docs-prose li + li {
+  margin-top: 4px;
+}
+.w100n-docs-prose blockquote {
+  padding-left: 14px;
+  border-left: 3px solid #e2e8f0;
+  color: #64748b;
+}
+.w100n-docs-prose hr {
+  border: 0;
+  border-top: 1px solid #e2e8f0;
+}
+.w100n-docs-prose h1,
+.w100n-docs-prose h2,
+.w100n-docs-prose h3 {
+  margin: 28px 0 12px;
+  color: #0f172a;
+  font-weight: 650;
+  line-height: 1.3;
+  scroll-margin-top: 12px;
+}
+.w100n-docs-prose > :first-child {
+  margin-top: 0;
+}
+.w100n-docs-prose h1 {
+  font-size: 28px;
+}
+.w100n-docs-prose h2 {
+  font-size: 21px;
+}
+.w100n-docs-prose h3 {
+  font-size: 17px;
+}
+.w100n-docs-prose a {
+  color: #7c3aed;
+}
+.w100n-docs-prose pre,
+.w100n-docs-prose code {
+  border-radius: 6px;
+  background: #f1f5f9;
+}
+.w100n-docs-prose pre {
+  padding: 12px 14px;
+  overflow-x: auto;
+}
+.w100n-docs-prose code {
+  padding: 1px 5px;
+}
+.w100n-docs-prose table {
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+}
+.w100n-docs-prose th,
+.w100n-docs-prose td {
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+}
+.w100n-docs-prose img {
+  max-width: 100%;
+}
+.w100n-docs-docx {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+.w100n-docs-docx section.w100n-docx {
+  box-shadow: 0 18px 40px -20px rgb(15 23 42 / 35%);
+  border-radius: 4px;
+}
+.w100n-docs-docx .w100n-docx-wrapper {
+  background: transparent;
+  padding: 0;
+}
+.w100n-docs-tabs {
+  display: grid;
+  flex: 1;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: 3px;
+  padding: 3px;
+  border-radius: 11px;
+  background: var(--docs-soft);
+}
+.w100n-docs-tabs button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 30px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+.w100n-docs-tabs svg {
+  width: 13px;
+  height: 13px;
+}
+.w100n-docs-tabs button:hover {
+  color: var(--docs-text);
+}
+.w100n-docs-tabs button[aria-selected=true] {
+  background: var(--docs-card);
+  color: var(--docs-text);
+  box-shadow: 0 1px 2px #0f172a14;
+}
+.w100n-docs[data-theme=dark] .w100n-docs-tabs button[aria-selected=true] {
+  background: #ffffff14;
+  box-shadow: none;
+}
+.w100n-docs-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+}
+.w100n-docs-outline {
+  display: grid;
+  gap: 2px;
+}
+.w100n-docs-outline button {
+  padding: 6px 9px;
+  border-radius: 8px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.w100n-docs-outline button:hover {
+  background: var(--docs-hover);
+}
+.w100n-docs-outline button[data-level="2"] {
+  padding-left: 20px;
+}
+.w100n-docs-outline button[data-level="3"] {
+  padding-left: 32px;
+  color: var(--docs-muted);
+}
+.w100n-docs-versions {
+  display: grid;
+  gap: 4px;
+}
+.w100n-docs-versions button {
+  display: grid;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 9px;
+  text-align: left;
+}
+.w100n-docs-versions button:hover {
+  background: var(--docs-hover);
+}
+.w100n-docs-versions button[aria-pressed=true] {
+  background: var(--docs-active);
+}
+.w100n-docs-versions b {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+.w100n-docs-versions small {
+  color: var(--docs-muted);
+  font-size: 12px;
+}
+.w100n-docs-details {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px 12px;
+  margin: 0;
+}
+.w100n-docs-details dt {
+  color: var(--docs-muted);
+}
+.w100n-docs-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.w100n-docs-tabs[data-compact=true] {
+  display: flex;
+}
+.w100n-docs-tabs[data-compact=true] button {
+  flex: 1 1 auto;
+  min-width: 30px;
+  padding: 0 8px;
+}
+.w100n-docs-versions button:disabled {
+  opacity: 1;
+  cursor: default;
+}
+.w100n-docs-versions b .w100n-docs-badge {
+  margin-left: auto;
+}
+.w100n-docs-bare {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.w100n-docs a.w100n-docs-action {
+  text-decoration: none;
+}
+.w100n-docs.w100n-docs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  height: auto;
+}
+.w100n-docs-reopen ~ .w100n-docs-stage :is(.w100n-pdf-bar, .w100n-text-ribbon, .w100n-sheet-ribbon),
+.w100n-docs-reopen-right ~ .w100n-docs-bare :is(.w100n-pdf-bar, .w100n-text-ribbon, .w100n-sheet-ribbon) {
+  max-width: calc(100% - 92px);
+}
+.w100n-docs .w100n-docs-action[data-tone=red] {
+  background:
+    linear-gradient(
+      135deg,
+      #e11d48,
+      #be123c);
+}
+.w100n-docs-ask {
+  position: absolute;
+  z-index: 20;
+  border-radius: 0;
+}
+.w100n-docs-ask .w100n-pdf-dialog {
+  width: min(420px, 100%);
+}
+.w100n-docs-ask .w100n-pdf-dialog-end {
+  flex-wrap: wrap;
+}
+@font-face {
+  font-family: "W100n Sign";
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("./caveat-latin-IUBKKMHQ.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+@font-face {
+  font-family: "W100n Sign";
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("./caveat-latin-ext-5S7R5SZN.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA,
+    U+02BD-02C5,
+    U+02C7-02CC,
+    U+02CE-02D7,
+    U+02DD-02FF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1D00-1DBF,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "W100n Sign";
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("./caveat-cyrillic-XVO43JCM.woff2") format("woff2");
+  unicode-range:
+    U+0301,
+    U+0400-045F,
+    U+0490-0491,
+    U+04B0-04B1,
+    U+2116;
+}
+.w100n-pdf {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.w100n-pdf-bar {
+  align-self: center;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  max-width: 100%;
+  padding: 4px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-pdf-bar button:not(.w100n-docs-action),
+.w100n-pdf-find button {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+}
+.w100n-pdf-bar button:not(.w100n-docs-action):hover:not(:disabled),
+.w100n-pdf-find button:hover:not(:disabled) {
+  background: var(--docs-hover);
+  color: var(--docs-text);
+}
+.w100n-docs .w100n-pdf-bar button[aria-pressed=true] {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-pdf-bar .w100n-docs-action {
+  margin-left: 6px;
+}
+.w100n-pdf-gap {
+  width: 1px;
+  height: 20px;
+  margin: 0 5px;
+  background: var(--docs-border);
+}
+.w100n-pdf-pageno {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px;
+  color: var(--docs-muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.w100n-pdf-pageno input {
+  width: 42px;
+  height: 26px;
+  padding: 0 4px;
+  border: 1px solid var(--docs-border);
+  border-radius: 7px;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font: inherit;
+  font-weight: 650;
+  text-align: center;
+  outline: none;
+}
+.w100n-pdf-pageno input:focus {
+  border-color: var(--docs-accent);
+}
+.w100n-pdf-zoom {
+  min-width: 44px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-pdf-palette {
+  position: relative;
+}
+.w100n-pdf-palette i {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #0f172a2e, 0 0 0 2px var(--docs-card);
+}
+.w100n-pdf-pop {
+  position: absolute;
+  z-index: 7;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  grid-template-columns: repeat(7, 30px);
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-docs .w100n-pdf-pop button[aria-pressed=true] {
+  background: var(--docs-active);
+  box-shadow: inset 0 0 0 1px #8b5cf659;
+}
+.w100n-pdf-pop b {
+  display: block;
+  width: 16px;
+  border-radius: 3px;
+  background: var(--docs-text);
+}
+.w100n-pdf-pop.w100n-pdf-more {
+  left: auto;
+  right: 0;
+  transform: none;
+  grid-template-columns: minmax(190px, max-content);
+}
+.w100n-pdf-bar .w100n-pdf-more button:not(.w100n-docs-action) {
+  display: flex;
+  justify-content: flex-start;
+  gap: 9px;
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  color: var(--docs-text);
+  font-size: 12.5px;
+  font-weight: 550;
+  white-space: nowrap;
+}
+.w100n-docs .w100n-pdf-bar .w100n-pdf-more button[aria-pressed=true] {
+  background: var(--docs-active);
+  color: var(--docs-accent);
+  box-shadow: none;
+}
+.w100n-pdf-find {
+  position: absolute;
+  z-index: 6;
+  top: 52px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: min(380px, calc(100% - 24px));
+  height: 42px;
+  padding: 0 6px 0 12px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+  color: var(--docs-dim);
+}
+.w100n-pdf-find input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--docs-text);
+  font: inherit;
+}
+.w100n-pdf-find span {
+  color: var(--docs-muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.w100n-pdf-hint {
+  position: absolute;
+  z-index: 6;
+  top: 52px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 8px 8px 14px;
+  border-radius: 11px;
+  background: #1e1b4b;
+  color: #fff;
+  font-weight: 600;
+  box-shadow: var(--docs-shadow);
+  white-space: nowrap;
+}
+.w100n-docs .w100n-pdf-hint button {
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 7px;
+  background: #ffffff1f;
+  color: #fff;
+  font-weight: 600;
+}
+.w100n-pdf-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: 10px;
+}
+.w100n-pdf-rail {
+  flex-shrink: 0;
+  width: 132px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-side);
+  scrollbar-width: thin;
+}
+.w100n-docs .w100n-pdf-thumb {
+  display: grid;
+  justify-items: center;
+  gap: 4px;
+  color: var(--docs-muted);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-pdf-thumb .w100n-pdf-page {
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px var(--docs-border);
+}
+.w100n-pdf-thumb[aria-current=true] .w100n-pdf-page {
+  box-shadow: 0 0 0 2px #8b5cf6;
+}
+.w100n-pdf-thumb[aria-current=true] span {
+  color: var(--docs-accent);
+}
+.w100n-pdf-scroll {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  outline: none;
+  border-radius: 13px;
+}
+.w100n-pdf-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: max-content;
+  min-width: 100%;
+  padding: 16px;
+}
+.w100n-pdf-page {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 3px;
+  background: #fff;
+  color-scheme: only light;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 18px 40px -20px rgb(15 23 42 / 35%);
+  scroll-margin-top: 12px;
+}
+.w100n-pdf-page > :is(div, svg) {
+  position: absolute;
+  inset: 0;
+}
+.w100n-pdf-paint canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.w100n-pdf-words {
+  z-index: 1;
+}
+.w100n-pdf-forms {
+  z-index: 2;
+  pointer-events: none;
+}
+svg.w100n-pdf-marks {
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.w100n-pdf-marks .w100n-pdf-glow {
+  mix-blend-mode: multiply;
+  opacity: .45;
+}
+.w100n-pdf-scroll[data-tool=select] .w100n-pdf-marks path {
+  pointer-events: stroke;
+}
+.w100n-pdf-page > .w100n-pdf-hit {
+  inset: auto;
+  z-index: 3;
+  margin: -1px;
+  padding: 1px;
+  border-radius: 3px;
+  background: #a78bfa59;
+  pointer-events: none;
+}
+.w100n-pdf-page > .w100n-pdf-hit[data-active=true] {
+  background: #f9731680;
+  box-shadow: 0 0 0 1px #ea580c;
+}
+.w100n-pdf-input {
+  z-index: 4;
+  touch-action: none;
+}
+.w100n-pdf-input[data-tool=ink] {
+  cursor: crosshair;
+}
+.w100n-pdf-input[data-tool=eraser] {
+  cursor: cell;
+}
+.w100n-pdf-input[data-tool=note],
+.w100n-pdf-input[data-tool=place] {
+  cursor: copy;
+}
+.w100n-pdf-scroll[data-tool=highlight] .textLayer span,
+.w100n-pdf-scroll[data-tool=underline] .textLayer span,
+.w100n-pdf-scroll[data-tool=strike] .textLayer span {
+  cursor: text;
+}
+.w100n-pdf-scroll:not([data-tool=select]) :is(.w100n-pdf-note, .w100n-pdf-sign) {
+  pointer-events: none;
+}
+.w100n-pdf-page > .w100n-pdf-note {
+  inset: auto;
+  z-index: 5;
+}
+.w100n-docs .w100n-pdf-pin {
+  display: grid;
+  place-items: center;
+  width: calc(var(--total-scale-factor) * 20px);
+  height: calc(var(--total-scale-factor) * 20px);
+  min-width: 18px;
+  min-height: 18px;
+  border-radius: 6px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #fbbf24,
+      #d97706);
+  box-shadow: 0 6px 14px -6px #d9770699;
+}
+.w100n-pdf-pin svg {
+  width: 60%;
+  height: 60%;
+}
+.w100n-pdf-card {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 6px);
+  left: 0;
+  display: grid;
+  gap: 8px;
+  width: 240px;
+  padding: 10px;
+  border: 1px solid #fde68a;
+  border-radius: 12px;
+  background: #fffbeb;
+  color: #1f2937;
+  box-shadow: 0 16px 36px -14px rgb(15 23 42 / 40%);
+}
+.w100n-pdf-note[data-side~=left] .w100n-pdf-card {
+  left: auto;
+  right: 0;
+}
+.w100n-pdf-note[data-side~=up] .w100n-pdf-card {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+.w100n-pdf-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.w100n-pdf-card-head span {
+  display: grid;
+  min-width: 0;
+}
+.w100n-pdf-card-head b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w100n-pdf-card-head small {
+  color: #92400e;
+}
+.w100n-docs .w100n-pdf-card-head button {
+  margin-left: auto;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #f43f5e,
+      #be123c);
+}
+.w100n-pdf-card-head svg {
+  width: 13px;
+  height: 13px;
+}
+.w100n-pdf-card textarea {
+  min-height: 72px;
+  resize: vertical;
+  padding: 8px;
+  border: 1px solid #fde68a;
+  border-radius: 8px;
+  background: #fff;
+  color: #1f2937;
+  font: inherit;
+  outline: none;
+}
+.w100n-pdf-card textarea:focus {
+  border-color: #f59e0b;
+}
+.w100n-pdf-page > .w100n-pdf-sign {
+  inset: auto;
+  z-index: 5;
+  cursor: grab;
+  touch-action: none;
+  border-radius: 4px;
+}
+.w100n-pdf-sign img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+.w100n-pdf-sign[aria-selected=true] {
+  outline: 1.5px dashed #7c3aed;
+  outline-offset: 3px;
+}
+.w100n-pdf-grip {
+  position: absolute;
+  right: -7px;
+  bottom: -7px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: #7c3aed;
+  cursor: nwse-resize;
+  box-shadow: 0 1px 3px #0005;
+}
+.w100n-docs .w100n-pdf-drop {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #f43f5e,
+      #be123c);
+  box-shadow: 0 4px 10px -4px #be123c;
+}
+.w100n-pdf-drop svg {
+  width: 12px;
+  height: 12px;
+}
+.w100n-pdf-back {
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  background: rgb(15 23 42 / 45%);
+  border-radius: 13px;
+}
+.w100n-pdf-dialog {
+  display: grid;
+  gap: 12px;
+  width: min(520px, 100%);
+  padding: 16px;
+  border: 1px solid var(--docs-border);
+  border-radius: 16px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-pdf-dialog-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 650;
+}
+.w100n-pdf-name {
+  height: 38px;
+  padding: 0 12px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font: inherit;
+  outline: none;
+}
+.w100n-pdf-name:focus {
+  border-color: var(--docs-accent);
+}
+.w100n-pdf-script,
+.w100n-pdf-pad,
+.w100n-pdf-upload {
+  width: 100%;
+  height: 160px;
+  margin: 0;
+  border: 1px dashed var(--docs-line2);
+  border-radius: 12px;
+  background: #fff;
+}
+.w100n-pdf-script {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding: 0 16px;
+  color: #1e3a8a;
+  font:
+    52px/1.2 "W100n Sign",
+    "Segoe Script",
+    "Bradley Hand",
+    cursive;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.w100n-pdf-pad {
+  display: block;
+  touch-action: none;
+  cursor: crosshair;
+}
+.w100n-pdf-upload {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  color: #64748b;
+  font-weight: 600;
+  cursor: pointer;
+}
+.w100n-pdf-upload svg {
+  width: 26px;
+  height: 26px;
+}
+.w100n-pdf-upload img {
+  max-width: 90%;
+  max-height: 140px;
+  object-fit: contain;
+}
+.w100n-pdf-upload input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.w100n-pdf-dialog-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+.w100n-docs .w100n-pdf-link {
+  margin-left: auto;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 8px;
+  color: var(--docs-accent);
+  font-weight: 600;
+}
+.w100n-pdf-dialog-end .w100n-pdf-link {
+  margin-left: 0;
+}
+.w100n-docs .w100n-pdf-link:hover {
+  background: var(--docs-hover);
+}
+.w100n-pdf .textLayer {
+  position: absolute;
+  inset: 0;
+  overflow: clip;
+  opacity: 1;
+  line-height: 1;
+  text-align: initial;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-size-adjust: none;
+  forced-color-adjust: none;
+  transform-origin: 0 0;
+  caret-color: CanvasText;
+  z-index: 0;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+}
+.w100n-pdf .textLayer :is(span, br) {
+  position: absolute;
+  color: transparent;
+  white-space: pre;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+.w100n-pdf .textLayer > :not(.markedContent),
+.w100n-pdf .textLayer .markedContent span:not(.markedContent) {
+  z-index: 1;
+  --font-height: 0;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  --scale-x: 1;
+  --rotate: 0deg;
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+.w100n-pdf .textLayer .markedContent {
+  display: contents;
+}
+.w100n-pdf .textLayer ::selection {
+  background: #7c3aed40;
+  color: transparent;
+}
+.w100n-pdf .textLayer br::selection {
+  background: transparent;
+}
+.w100n-pdf .textLayer .endOfContent {
+  display: block;
+  position: absolute;
+  inset: 100% 0 0;
+  z-index: 0;
+  cursor: default;
+  user-select: none;
+}
+.w100n-pdf .textLayer.selecting .endOfContent {
+  top: 0;
+}
+.w100n-pdf [data-main-rotation="90"] {
+  transform: rotate(90deg) translateY(-100%);
+}
+.w100n-pdf [data-main-rotation="180"] {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+.w100n-pdf [data-main-rotation="270"] {
+  transform: rotate(270deg) translateX(-100%);
+}
+.w100n-pdf .annotationLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.w100n-pdf .annotationLayer section {
+  position: absolute;
+  box-sizing: border-box;
+  text-align: initial;
+  pointer-events: auto;
+  transform-origin: 0 0;
+  user-select: none;
+}
+.w100n-pdf .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+  position: absolute;
+  inset: 0;
+  font-size: 1em;
+}
+.w100n-pdf .annotationLayer .linkAnnotation > a:hover {
+  background: #8b5cf61f;
+  border-radius: 2px;
+}
+.w100n-pdf .annotationLayer :is(.textWidgetAnnotation :is(input, textarea), .choiceWidgetAnnotation select) {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 3px;
+  box-sizing: border-box;
+  vertical-align: top;
+  border: 1px solid #8b5cf633;
+  border-radius: 3px;
+  background: #8b5cf614;
+  color: #0f172a;
+  font: calc(9px * var(--total-scale-factor)) sans-serif;
+  outline: none;
+}
+.w100n-pdf .annotationLayer .textWidgetAnnotation textarea {
+  resize: none;
+}
+.w100n-pdf .annotationLayer :is(.textWidgetAnnotation :is(input, textarea), .choiceWidgetAnnotation select):hover {
+  border-color: #8b5cf680;
+}
+.w100n-pdf .annotationLayer :is(.textWidgetAnnotation :is(input, textarea), .choiceWidgetAnnotation select):focus {
+  border-color: #7c3aed;
+  background: #fff;
+  box-shadow: 0 0 0 3px #8b5cf62e;
+}
+.w100n-pdf .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 1px solid #7c3aed80;
+  border-radius: 3px;
+  background: #8b5cf614;
+  cursor: pointer;
+}
+.w100n-pdf .annotationLayer .buttonWidgetAnnotation.radioButton input {
+  border-radius: 50%;
+}
+.w100n-pdf .annotationLayer .buttonWidgetAnnotation.checkBox input:checked {
+  border-color: #7c3aed;
+  background: #7c3aed center / 78% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
+}
+.w100n-pdf .annotationLayer .buttonWidgetAnnotation.radioButton input:checked {
+  border-color: #7c3aed;
+  background:
+    radial-gradient(
+      circle,
+      #7c3aed 0 40%,
+      #fff 44%);
+}
+.w100n-pdf .annotationLayer :is(input, textarea, select):focus-visible {
+  box-shadow: 0 0 0 3px #8b5cf640;
+}
+.w100n-pdf .annotationLayer :is(input, textarea, select):disabled {
+  background: none;
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.w100n-pdf .annotationLayer .popupAnnotation {
+  position: absolute;
+  z-index: 1;
+  width: max-content;
+  max-width: 45%;
+  pointer-events: none;
+  font-size: 12px;
+}
+.w100n-pdf .annotationLayer .popup {
+  display: grid;
+  gap: 4px;
+  max-width: 260px;
+  padding: 9px 11px;
+  border: 1px solid #fde68a;
+  border-radius: 10px;
+  background: #fffbeb;
+  color: #1f2937;
+  box-shadow: 0 16px 36px -14px rgb(15 23 42 / 40%);
+  font: 12px/1.45 inherit;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  user-select: text;
+}
+.w100n-pdf .annotationLayer .popup .header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 8px;
+}
+.w100n-pdf .annotationLayer .popup .header .title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+}
+.w100n-pdf .annotationLayer .popup .header .popupDate {
+  color: #92400e;
+  font-size: 11px;
+}
+.w100n-pdf .annotationLayer .popup .popupContent {
+  margin: 0;
+  padding: 0;
+}
+.w100n-pdf .annotationLayer .popup .popupContent p {
+  margin: 0;
+}
+.w100n-pdf .annotationLayer .overlaidText {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.w100n-pdf .annotationLayer section > svg,
+.w100n-pdf .annotationLayer .textAnnotation img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.w100n-pdf .annotationLayer .textAnnotation img {
+  opacity: 0;
+  cursor: pointer;
+}
+.w100n-pdf .annotationLayer [hidden] {
+  display: none;
+}
+.w100n-text {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.w100n-text-ribbon {
+  align-self: center;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  width: min(100%, 1000px);
+  padding: 4px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-text-tabs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px 4px;
+  border-bottom: 1px solid var(--docs-border);
+}
+.w100n-text-tabs [role=tablist] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+.w100n-text-tabs [role=tab] {
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.w100n-text-tabs [role=tab]:hover {
+  color: var(--docs-text);
+  background: var(--docs-hover);
+}
+.w100n-text-tabs [role=tab][aria-selected=true] {
+  color: var(--docs-text);
+  background: var(--docs-soft);
+  box-shadow: inset 0 -2px 0 var(--docs-accent);
+}
+.w100n-text-end {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+.w100n-text-end .w100n-docs-action {
+  margin-left: 6px;
+}
+.w100n-text-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  min-height: 32px;
+}
+.w100n-text-ribbon :is(.w100n-text-tools, .w100n-text-anchor, .w100n-text-end) > button:not(.w100n-docs-action) {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+}
+.w100n-text-ribbon :is(.w100n-text-tools, .w100n-text-anchor, .w100n-text-end) > button:not(.w100n-docs-action):hover:not(:disabled) {
+  background: var(--docs-hover);
+  color: var(--docs-text);
+}
+.w100n-docs .w100n-text-ribbon button[aria-pressed=true] {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-text-ribbon .w100n-text-tools > button.w100n-text-word {
+  display: inline-flex;
+  gap: 6px;
+  width: auto;
+  padding: 0 10px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.w100n-text-word b {
+  color: var(--docs-accent);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-text-word[aria-pressed=true] b {
+  color: inherit;
+}
+.w100n-text-label {
+  padding: 0 4px 0 6px;
+  color: var(--docs-dim);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.w100n-text-anchor {
+  position: relative;
+  display: inline-flex;
+}
+.w100n-text-ribbon .w100n-text-anchor > button.w100n-text-picker {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  width: 136px;
+  padding: 0 8px 0 10px;
+  border: 1px solid var(--docs-border);
+  color: var(--docs-text);
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.w100n-text-picker svg {
+  width: 14px;
+  height: 14px;
+  color: var(--docs-dim);
+}
+.w100n-text-bar {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 4px;
+  height: 3px;
+  border-radius: 2px;
+}
+.w100n-text-pop {
+  position: absolute;
+  z-index: 8;
+  top: calc(100% + 8px);
+  left: 0;
+  padding: 6px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-text-styles {
+  display: grid;
+  gap: 2px;
+  min-width: 190px;
+}
+.w100n-text-styles button {
+  padding: 6px 10px;
+  border-radius: 8px;
+  text-align: left;
+  font-size: 13px;
+}
+.w100n-text-styles button:hover {
+  background: var(--docs-hover);
+}
+.w100n-text-styles button[aria-selected=true] {
+  background: var(--docs-active);
+  color: var(--docs-accent);
+}
+.w100n-text-styles [data-style=h1] {
+  font-size: 18px;
+  font-weight: 700;
+}
+.w100n-text-styles [data-style=h2] {
+  font-size: 16px;
+  font-weight: 700;
+}
+.w100n-text-styles [data-style=h3] {
+  font-size: 14.5px;
+  font-weight: 650;
+}
+.w100n-text-styles [data-style=h4] {
+  font-size: 13.5px;
+  font-weight: 650;
+}
+.w100n-text-styles [data-style=quote] {
+  font-style: italic;
+  color: var(--docs-muted);
+}
+.w100n-text-styles [data-style=code] {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  font-size: 12.5px;
+}
+.w100n-text-swatches {
+  display: grid;
+  grid-template-columns: repeat(5, 28px);
+  gap: 4px;
+}
+.w100n-text-swatches button {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+}
+.w100n-text-swatches button:hover {
+  background: var(--docs-hover);
+}
+.w100n-docs .w100n-text-swatches button[aria-pressed=true] {
+  background: var(--docs-active);
+  box-shadow: inset 0 0 0 1px #8b5cf659;
+}
+.w100n-text-swatches i {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #0f172a2e;
+}
+.w100n-text-swatches .w100n-text-none {
+  grid-column: 1 / -1;
+  width: auto;
+  height: 28px;
+  padding: 0 8px;
+  color: var(--docs-muted);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: left;
+}
+.w100n-text-grid {
+  display: grid;
+  gap: 6px;
+}
+.w100n-text-grid > span {
+  display: grid;
+  grid-template-columns: repeat(8, 18px);
+  gap: 3px;
+}
+.w100n-text-grid button {
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--docs-line2);
+  border-radius: 4px;
+}
+.w100n-text-grid button[data-on=true] {
+  border-color: #8b5cf6;
+  background: #8b5cf633;
+}
+.w100n-text-grid small {
+  color: var(--docs-muted);
+  font-size: 11.5px;
+  font-weight: 600;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-text-form {
+  display: grid;
+  gap: 8px;
+  width: 300px;
+}
+.w100n-text-form input:not([type=file]) {
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 9px;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font: inherit;
+  outline: none;
+}
+.w100n-text-form input:focus {
+  border-color: var(--docs-accent);
+}
+.w100n-text-form .w100n-docs-row {
+  justify-content: flex-end;
+}
+.w100n-text-form .w100n-pdf-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 0;
+  margin-right: auto;
+  cursor: pointer;
+  line-height: 30px;
+}
+.w100n-text-scroll {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: 13px;
+}
+.w100n-text-zoomed {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-height: 100%;
+  padding: 12px 12px 48px;
+}
+.w100n-text-column {
+  flex-shrink: 0;
+  margin: 0 auto;
+}
+.w100n-text-sheet {
+  flex-shrink: 0;
+  margin: 0 auto;
+  width: var(--page-w);
+  max-width: none;
+  min-height: var(--page-h);
+  padding: var(--mt) var(--mr) var(--mb) var(--ml);
+  border-radius: 3px;
+  background: var(--docs-paper);
+  color: #1f2937;
+  color-scheme: only light;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 18px 40px -20px rgb(15 23 42 / 35%);
+  font-size: 14.5px;
+  line-height: 1.55;
+}
+.w100n-text-body {
+  position: relative;
+  min-height: 1.6em;
+  outline: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: #1f2937;
+}
+.w100n-text-column .w100n-text-body > * {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 1.7em;
+}
+.w100n-text-body :is(h4, h5, h6) {
+  margin: 22px 0 10px;
+  color: #0f172a;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.w100n-text-body h4 {
+  font-size: 15.5px;
+}
+.w100n-text-body :is(h5, h6) {
+  font-size: 14px;
+}
+.w100n-text-body p:empty::before {
+  content: "\200b";
+}
+.w100n-text-body img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+}
+.w100n-text-body .ProseMirror-selectednode {
+  outline: 2px solid #8b5cf6;
+  outline-offset: 1px;
+}
+.w100n-text-body li > p {
+  margin: 0;
+}
+.w100n-text-body ul[data-type=taskList] {
+  list-style: none;
+  padding-left: 2px;
+}
+.w100n-text-body ul[data-type=taskList] > li {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+.w100n-text-body ul[data-type=taskList] > li > label {
+  position: relative;
+  flex: none;
+  margin-top: .25em;
+  user-select: none;
+}
+.w100n-text-body ul[data-type=taskList] > li > label input {
+  display: block;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: #7c3aed;
+  cursor: pointer;
+}
+.w100n-text-body ul[data-type=taskList] > li > div {
+  flex: 1;
+  min-width: 0;
+}
+.w100n-text-body ul[data-type=taskList] > li[data-checked=true] > div {
+  color: #64748b;
+  text-decoration: line-through;
+}
+.w100n-text-body .tableWrapper {
+  margin: 0 0 14px;
+  overflow-x: auto;
+}
+.w100n-text-body table {
+  display: table;
+  width: 100%;
+  margin: 0;
+  table-layout: fixed;
+}
+.w100n-text-body :is(td, th) {
+  position: relative;
+  min-width: 48px;
+  vertical-align: top;
+}
+.w100n-text-body th {
+  background: #f8fafc;
+  font-weight: 650;
+  text-align: left;
+}
+.w100n-text-body :is(td, th) > :last-child {
+  margin-bottom: 0;
+}
+.w100n-text-body .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: #8b5cf626;
+  pointer-events: none;
+}
+.w100n-text-body pre {
+  white-space: pre;
+}
+.w100n-text-body pre code {
+  padding: 0;
+  background: none;
+}
+.w100n-text-body .w100n-text-lock {
+  position: relative;
+  padding: 8px 12px 8px 34px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 9px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12.5px;
+  cursor: default;
+  user-select: none;
+}
+.w100n-text-lock::before {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 11px;
+  width: 14px;
+  height: 14px;
+  background: #64748b;
+  -webkit-mask: var(--w100n-lock) center / contain no-repeat;
+  mask: var(--w100n-lock) center / contain no-repeat;
+}
+.w100n-text-lock::after {
+  content: attr(data-label);
+  margin-left: 8px;
+  padding: 1px 7px;
+  border-radius: 6px;
+  background: #e2e8f0;
+  color: #475569;
   font-size: 10.5px;
   font-weight: 700;
-  letter-spacing: .06em;
+  white-space: nowrap;
+}
+.w100n-text-body {
+  --w100n-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
+}
+.w100n-text-toc {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0 0 1em;
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #f8fafc;
+  user-select: none;
+}
+.w100n-text-toc > b {
+  margin-bottom: 4px;
+  color: #0f172a;
+  font-size: 13px;
+}
+.w100n-text-toc > button {
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: #334155;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.w100n-text-toc > button:hover {
+  background: #ede9fe;
+  color: #5b21b6;
+}
+.w100n-text-toc > button[data-level="2"] {
+  padding-left: 22px;
+}
+.w100n-text-toc > button[data-level="3"] {
+  padding-left: 38px;
+  font-size: 12.5px;
+}
+.w100n-text-toc > small {
+  color: #64748b;
+  font-size: 12px;
+}
+.ProseMirror-selectednode.w100n-text-toc {
+  outline: 2px solid #8b5cf6;
+}
+.w100n-text-body ins.w100n-text-rev {
+  color: #15803d;
+  background: #dcfce7;
+  text-decoration: underline;
+  text-decoration-color: #22c55e;
+}
+.w100n-text-body del.w100n-text-rev {
+  color: #b91c1c;
+  background: #fee2e2;
+  text-decoration: line-through;
+}
+.w100n-text-change[data-kind=insertion] {
+  border-left: 3px solid #22c55e;
+}
+.w100n-text-change[data-kind=deletion] {
+  border-left: 3px solid #ef4444;
+}
+.w100n-text-change p {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--docs-muted);
+}
+.w100n-text-change q {
+  color: var(--docs-text);
+  font-weight: 600;
+}
+.w100n-text-note {
+  background: #fde68a99;
+  border-bottom: 2px solid #f59e0b;
+  cursor: pointer;
+}
+.w100n-text-note.is-active {
+  background: #fcd34d;
+}
+.w100n-text-break {
+  position: relative;
+  height: 18px;
+  margin: 10px 0;
+  border-top: 1px dashed #cbd5e1;
+}
+.w100n-text-break::after {
+  content: attr(data-label);
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 8px;
+  background: var(--docs-paper);
+  color: #64748b;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .05em;
+  line-height: 18px;
   text-transform: uppercase;
+  white-space: nowrap;
 }
-.w100n-docs-grid {
+.w100n-text-body .w100n-text-break.ProseMirror-selectednode {
+  outline: none;
+  border-top-color: #8b5cf6;
+}
+.w100n-text-gap {
+  position: relative;
+  margin: 0 calc(-1 * var(--mr)) 0 calc(-1 * var(--ml));
+  pointer-events: none;
+  user-select: none;
+  background:
+    linear-gradient(
+      to bottom,
+      transparent calc(100% - var(--mt) - 24px),
+      var(--docs-bg) 0 calc(100% - var(--mt)),
+      transparent 0);
+}
+.w100n-text-gap::after {
+  content: attr(data-page);
+  position: absolute;
+  right: var(--mr);
+  bottom: calc(var(--mt) + 24px + var(--mb) / 2 - 7px);
+  color: #64748b;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-text-gap.is-end {
+  background: none;
+}
+.w100n-text-gap.is-end::after {
+  bottom: calc(var(--mb) / -2 - 7px);
+}
+.w100n-text-notes {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
+  gap: 10px;
+}
+.w100n-text-notes > .w100n-docs-row .w100n-docs-caption {
+  padding: 0;
+}
+.w100n-text-card {
+  display: grid;
+  gap: 7px;
+  padding: 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  cursor: pointer;
+  transition: border-color .15s;
+}
+.w100n-text-card:hover {
+  border-color: #8b5cf666;
+}
+.w100n-text-card[aria-current=true] {
+  border-color: #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf6;
+}
+.w100n-text-card[data-resolved=true] {
+  opacity: .75;
+}
+.w100n-text-draft {
+  cursor: default;
+  border-color: #8b5cf6;
+}
+.w100n-text-card header {
+  display: flex;
+  align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+.w100n-text-who {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.3;
+}
+.w100n-text-who b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 650;
+}
+.w100n-text-who small {
+  color: var(--docs-dim);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.w100n-text-face {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  font-size: 11px;
+  font-weight: 700;
+  object-fit: cover;
 }
-.w100n-docs .w100n-docs-card {
+.w100n-text-people {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-  border: 1px solid var(--docs-border);
-  border-radius: 12px;
-  background: var(--docs-card);
-  text-align: left;
-  transition: border-color .15s, box-shadow .15s;
-}
-.w100n-docs .w100n-docs-card:hover {
-  border-color: #8b5cf666;
-}
-.w100n-docs .w100n-docs-card[aria-current=true] {
-  border-color: #8b5cf6;
-  box-shadow: 0 0 0 1px #8b5cf6, 0 8px 22px -12px #8b5cf6b3;
+  align-items: center;
+  margin: 0 6px 0 4px;
 }
-.w100n-docs-thumb {
-  position: relative;
-  display: block;
-  aspect-ratio: 4 / 3;
+.w100n-text-people .w100n-text-face {
+  width: 26px;
+  height: 26px;
+  margin-left: -6px;
   overflow: hidden;
-  border-bottom: 1px solid var(--docs-border);
-  background: var(--docs-thumb);
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      145deg,
+      var(--face),
+      color-mix(in srgb, var(--face), #000 28%));
+  box-shadow: 0 0 0 2px var(--docs-card);
 }
-.w100n-docs-thumb img {
+.w100n-text-people .w100n-text-face:first-child {
+  margin-left: 0;
+}
+.w100n-text-people img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: top;
-  background: #fff;
 }
-.w100n-docs-paper {
+.w100n-text-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: 6px;
+  color: var(--docs-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.w100n-text-live svg {
+  width: 14px;
+  height: 14px;
+}
+.w100n-text-body .collaboration-carets__caret {
+  position: relative;
+  margin: 0 -1px;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  word-break: normal;
+  pointer-events: none;
+}
+.w100n-text-body .collaboration-carets__label {
   position: absolute;
-  inset: 9px 12px 0;
-  display: block;
+  top: -1.45em;
+  left: -1px;
+  padding: 1px 5px;
+  border-radius: 4px 4px 4px 0;
+  color: #fff;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+  user-select: none;
+}
+.w100n-text-card blockquote {
+  margin: 0;
+  padding-left: 8px;
+  border-left: 3px solid #f59e0b;
+  color: var(--docs-muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  max-height: 3em;
   overflow: hidden;
-  padding: 9px 10px;
-  border-radius: 4px 4px 0 0;
-  background: #fff;
-  color: #475569;
-  box-shadow: 0 2px 8px rgb(15 23 42 / 12%);
-  font-size: 5.6px;
-  line-height: 1.45;
+}
+.w100n-text-card p {
+  margin: 0;
+  white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
-.w100n-docs-paper b {
-  display: block;
-  margin-bottom: 4px;
-  color: #0f172a;
-  font-size: 8px;
-  line-height: 1.2;
-  font-weight: 700;
+.w100n-text-reply {
+  display: grid;
+  gap: 5px;
+  margin-left: 4px;
+  padding: 6px 0 0 10px;
+  border-left: 2px solid var(--docs-border);
+  cursor: default;
 }
-.w100n-docs-paper i {
-  display: block;
-  height: 4px;
-  margin-bottom: 5px;
-  border-radius: 2px;
-  background: #e2e8f0;
+.w100n-text-card textarea {
+  min-height: 64px;
+  resize: vertical;
+  padding: 8px;
+  border: 1px solid var(--docs-border);
+  border-radius: 8px;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font: inherit;
+  outline: none;
 }
-.w100n-docs-paper i:first-child {
-  width: 62%;
-  height: 6px;
-  background: #334155;
+.w100n-text-card textarea:focus {
+  border-color: var(--docs-accent);
 }
-.w100n-docs-paper i:nth-child(3) {
-  width: 84%;
+.w100n-text-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
 }
-.w100n-docs-paper i:nth-child(5) {
-  width: 48%;
+.w100n-text-actions .w100n-docs-badge {
+  margin-right: auto;
+}
+.w100n-docs .w100n-text-notes .w100n-docs-action {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+.w100n-docs .w100n-docs-action[data-tone=green] {
+  background:
+    linear-gradient(
+      135deg,
+      #08865c,
+      #047857);
+}
+.w100n-text-card header .w100n-text-own {
+  display: flex;
+  gap: 4px;
+}
+.w100n-docs .w100n-text-own button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+}
+.w100n-docs .w100n-text-own button[data-tone=red] {
+  background:
+    linear-gradient(
+      145deg,
+      #e11d48,
+      #be123c);
+}
+.w100n-text-own svg {
+  width: 12px;
+  height: 12px;
+}
+.w100n-text-edit {
+  margin-left: 0;
+  padding-left: 0;
+  border-left: 0;
+}
+.w100n-text-confirm {
+  display: grid;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid #fecdd3;
+  border-radius: 9px;
+  background: #fff1f2;
+  color: #881337;
+  cursor: default;
+}
+.w100n-docs[data-theme=dark] .w100n-text-confirm {
+  border-color: #f43f5e4d;
+  background: #f43f5e1a;
+  color: #fecdd3;
+}
+.w100n-text-confirm p {
+  font-weight: 600;
+}
+.w100n-docs-about .w100n-docs-caption {
+  padding: 0;
+}
+.w100n-docs-bar > .w100n-docs-close {
+  flex-shrink: 0;
+}
+@container (max-width: 1180px) {
+  .w100n-docs-panel {
+    width: 240px;
+  }
+  .w100n-docs-list {
+    width: 272px;
+  }
+}
+@container (max-width: 900px) {
+  .w100n-docs-body {
+    --docs-narrow: 1;
+  }
+  .w100n-docs-list,
+  .w100n-docs-panel {
+    position: absolute;
+    z-index: 5;
+    top: 10px;
+    bottom: 10px;
+    width: min(320px, calc(100% - 20px));
+  }
+  .w100n-docs-list {
+    left: 10px;
+  }
+  .w100n-docs-panel {
+    right: 10px;
+  }
+  .w100n-docs-page {
+    padding: 32px 24px;
+  }
+  .w100n-docs-crumbs {
+    display: none;
+  }
+  .w100n-pdf-rail {
+    position: absolute;
+    z-index: 5;
+    top: 50px;
+    bottom: 0;
+    left: 0;
+    box-shadow: var(--docs-shadow);
+  }
+  .w100n-text-tabs {
+    gap: 4px;
+  }
+  .w100n-text-tabs [role=tablist],
+  .w100n-text-tools {
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .w100n-text-tools {
+    padding-block: 2px;
+  }
+  .w100n-text-tabs [role=tab],
+  .w100n-text-tools > *,
+  .w100n-text-end {
+    flex-shrink: 0;
+  }
+  .w100n-text-pop {
+    position: fixed;
+    z-index: 30;
+    top: auto;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    max-height: 60%;
+    overflow-y: auto;
+  }
+  .w100n-text-form {
+    width: auto;
+  }
+}
+@container (max-width: 560px) {
+  .w100n-docs-bar {
+    gap: 8px;
+    padding: 10px 12px;
+  }
+  .w100n-docs-bar > .w100n-docs-badge {
+    display: none;
+  }
+  .w100n-docs-body {
+    padding: 8px;
+  }
+  .w100n-docs-list,
+  .w100n-docs-panel {
+    top: 8px;
+    bottom: 8px;
+    width: calc(100% - 16px);
+  }
+  .w100n-docs-list {
+    left: 8px;
+  }
+  .w100n-docs-panel {
+    right: 8px;
+  }
+  .w100n-text-end .w100n-docs-action {
+    margin-left: 2px;
+    padding: 0 10px;
+  }
+  .w100n-docs-overlay .w100n-docs-end .w100n-docs-action {
+    width: 32px;
+    padding: 0;
+    justify-content: center;
+  }
+  .w100n-docs-overlay .w100n-docs-end .w100n-docs-action span {
+    display: none;
+  }
+}
+.w100n-docs .w100n-docs-action[data-tone=blue] {
+  background:
+    linear-gradient(
+      135deg,
+      #3b82f6,
+      #1d4ed8);
+}
+.w100n-docs .w100n-docs-action[data-tone=slate] {
+  background:
+    linear-gradient(
+      135deg,
+      #64748b,
+      #475569);
+}
+.w100n-share {
+  display: grid;
+  gap: 10px;
+}
+.w100n-share-link,
+.w100n-share-team {
+  display: grid;
+  gap: 9px;
+  padding: 11px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+}
+.w100n-share-link[data-ended=true] {
+  opacity: .72;
+}
+.w100n-share-link header,
+.w100n-share-team {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.w100n-share-link header > span:last-child,
+.w100n-share-team > span:last-child {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+.w100n-share-link b,
+.w100n-share-team b {
+  font-size: 13px;
+  font-weight: 650;
+}
+.w100n-share-link small,
+.w100n-share-team small,
+.w100n-share-who small {
+  color: var(--docs-muted);
+  font-size: 11.5px;
+  line-height: 1.4;
+}
+.w100n-share-tile {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-share-tile svg {
+  width: 15px;
+  height: 15px;
+}
+.w100n-share-tile[data-tone=blue] {
+  background:
+    linear-gradient(
+      145deg,
+      #3b82f6,
+      #1d4ed8);
+  box-shadow: 0 6px 14px -6px #1d4ed899;
 }
-.w100n-docs-kind {
-  position: absolute;
-  right: 6px;
-  bottom: 6px;
-  padding: 1px 6px;
-  border-radius: 5px;
-  color: #fff;
-  background: #7c3aed;
-  font-size: 9.5px;
-  font-weight: 800;
-  letter-spacing: .02em;
-  text-transform: uppercase;
+.w100n-share-tile[data-tone=amber] {
+  background:
+    linear-gradient(
+      145deg,
+      #f59e0b,
+      #c2410c);
+  box-shadow: 0 6px 14px -6px #c2410c99;
 }
-.w100n-docs-kind[data-kind=docx] {
-  background: #2563eb;
+.w100n-share-tile[data-tone=slate] {
+  background:
+    linear-gradient(
+      145deg,
+      #64748b,
+      #475569);
+  box-shadow: 0 6px 14px -6px #47556999;
 }
-.w100n-docs-kind[data-kind=pdf] {
-  background: #e11d48;
+.w100n-share-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.w100n-docs-kind[data-kind=sheet] {
-  background: #059669;
+.w100n-share-chips span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 7px;
+  background: var(--docs-soft);
+  color: var(--docs-muted);
+  font-size: 11.5px;
+  font-weight: 600;
 }
-.w100n-docs-kind[data-kind=slides] {
-  background: #ea580c;
+.w100n-share-chips svg {
+  width: 12px;
+  height: 12px;
 }
-.w100n-docs-card-text {
-  display: grid;
-  gap: 2px;
+.w100n-share-url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   min-width: 0;
-  padding: 7px 9px 8px;
-}
-.w100n-docs-card-text b {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12.5px;
-  font-weight: 650;
+  padding: 4px 4px 4px 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  background: var(--docs-soft);
 }
-.w100n-docs-card-text small {
+.w100n-share-url span {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--docs-dim);
-  font-size: 11px;
-}
-.w100n-docs-muted {
-  margin: 0;
-  color: var(--docs-muted);
   font-size: 12px;
 }
-.w100n-docs-about {
+.w100n-docs .w100n-share-url .w100n-docs-action,
+.w100n-docs .w100n-share-tools .w100n-docs-action {
+  height: 28px;
+  padding: 0 10px;
+}
+.w100n-share-who {
   display: grid;
+  gap: 6px;
+}
+.w100n-share-who div {
+  display: flex;
+  align-items: center;
   gap: 8px;
-  margin-top: 14px;
-  padding-top: 12px;
-  border-top: 1px solid var(--docs-border);
+  min-width: 0;
+  font-size: 12.5px;
 }
-.w100n-docs-stage {
-  position: relative;
-  flex: 1;
+.w100n-share-who b {
   min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
 }
-.w100n-docs-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 56px 12px 32px;
+.w100n-share-who small {
+  margin-left: auto;
+  white-space: nowrap;
 }
-.w100n-docs-zoomed {
+.w100n-share-tools {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  min-height: 100%;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.w100n-docs-zoom {
-  position: absolute;
-  z-index: 3;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 38px;
-  padding: 0 4px;
-  border: 1px solid var(--docs-border);
-  border-radius: 11px;
-  background: var(--docs-card);
-  box-shadow: var(--docs-shadow);
+.w100n-docs .w100n-share-new {
+  justify-content: center;
 }
-.w100n-docs-zoom button {
+.w100n-share-field {
   display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  color: var(--docs-muted);
-}
-.w100n-docs-zoom button:hover {
-  background: var(--docs-hover);
-  color: var(--docs-text);
+  gap: 6px;
 }
-.w100n-docs-zoom span {
-  min-width: 44px;
-  text-align: center;
+.w100n-share-field > span {
+  color: var(--docs-muted);
   font-size: 12px;
-  font-weight: 650;
-  font-variant-numeric: tabular-nums;
+  font-weight: 600;
 }
-.w100n-docs-empty {
-  margin: auto;
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  color: var(--docs-muted);
+.w100n-docs .w100n-share-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  background: var(--docs-card);
+  color: var(--docs-text);
+  font: inherit;
+  font-size: 13px;
 }
-.w100n-docs-empty svg {
-  width: 32px;
-  height: 32px;
+.w100n-docs .w100n-share-input:focus {
+  outline: 2px solid #8b5cf680;
+  outline-offset: 1px;
 }
-.w100n-docs-note {
+.w100n-share-toggle {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 10px;
-  color: var(--docs-muted);
-}
-.w100n-docs-note button {
-  color: var(--docs-accent);
-  font-weight: 600;
-}
-.w100n-docs-page {
-  width: min(820px, 100%);
-  padding: 56px 64px;
-  border-radius: 6px;
-  background: var(--docs-paper);
-  color: #1f2937;
-  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 18px 40px -20px rgb(15 23 42 / 35%);
+  padding: 9px 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  background: var(--docs-card);
+  cursor: pointer;
 }
-.w100n-docs-prose {
-  font-size: 15px;
-  line-height: 1.7;
-  overflow-wrap: anywhere;
+.w100n-share-toggle input {
+  position: relative;
+  width: 30px;
+  height: 18px;
+  margin: 1px 0 0;
+  flex-shrink: 0;
+  appearance: none;
+  border-radius: 999px;
+  background: var(--docs-line2);
+  cursor: pointer;
+  transition: background .15s;
 }
-.w100n-docs-prose :is(p, ul, ol, pre, table, blockquote, hr) {
-  margin: 0 0 14px;
+.w100n-share-toggle input::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+  transition: transform .15s;
 }
-.w100n-docs-prose :is(ul, ol) {
-  padding-left: 24px;
+.w100n-share-toggle input:checked {
+  background:
+    linear-gradient(
+      135deg,
+      #8b5cf6,
+      #6d28d9);
 }
-.w100n-docs-prose ul {
-  list-style: disc;
+.w100n-share-toggle input:checked::after {
+  transform: translateX(12px);
 }
-.w100n-docs-prose ol {
-  list-style: decimal;
+.w100n-share-toggle input:focus-visible {
+  outline: 2px solid #8b5cf680;
+  outline-offset: 2px;
 }
-.w100n-docs-prose li + li {
-  margin-top: 4px;
+.w100n-share-toggle span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
 }
-.w100n-docs-prose blockquote {
-  padding-left: 14px;
-  border-left: 3px solid #e2e8f0;
-  color: #64748b;
+.w100n-share-toggle b {
+  font-size: 12.5px;
+  font-weight: 600;
 }
-.w100n-docs-prose hr {
-  border: 0;
-  border-top: 1px solid #e2e8f0;
+.w100n-share-toggle small {
+  color: var(--docs-muted);
+  font-size: 11.5px;
 }
-.w100n-docs-prose h1,
-.w100n-docs-prose h2,
-.w100n-docs-prose h3 {
-  margin: 28px 0 12px;
-  color: #0f172a;
+.w100n-guest-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  padding-right: 12px;
+  border-right: 1px solid var(--docs-border);
+  font-size: 13px;
   font-weight: 650;
-  line-height: 1.3;
-  scroll-margin-top: 12px;
+  white-space: nowrap;
 }
-.w100n-docs-prose > :first-child {
-  margin-top: 0;
+.w100n-guest-gate {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  padding: 24px 16px;
+  overflow-y: auto;
 }
-.w100n-docs-prose h1 {
-  font-size: 28px;
+.w100n-guest-card {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  width: min(400px, 100%);
+  padding: 28px 24px;
+  border: 1px solid var(--docs-border);
+  border-radius: 16px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+  text-align: center;
 }
-.w100n-docs-prose h2 {
-  font-size: 21px;
+.w100n-guest-card .w100n-share-tile {
+  width: 44px;
+  height: 44px;
+  border-radius: 13px;
 }
-.w100n-docs-prose h3 {
+.w100n-guest-card .w100n-share-tile svg {
+  width: 20px;
+  height: 20px;
+}
+.w100n-guest-card h2 {
+  margin: 0;
   font-size: 17px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+.w100n-guest-card p {
+  margin: 0;
+  color: var(--docs-muted);
+  font-size: 13px;
+  line-height: 1.5;
 }
-.w100n-docs-prose a {
-  color: #7c3aed;
+.w100n-guest-form {
+  display: grid;
+  gap: 10px;
+  width: 100%;
 }
-.w100n-docs-prose pre,
-.w100n-docs-prose code {
-  border-radius: 6px;
-  background: #f1f5f9;
+.w100n-docs .w100n-guest-form .w100n-docs-action {
+  justify-content: center;
+  height: 40px;
 }
-.w100n-docs-prose pre {
-  padding: 12px 14px;
-  overflow-x: auto;
+.w100n-guest-note {
+  margin: 0;
+  padding: 6px 16px;
 }
-.w100n-docs-prose code {
-  padding: 1px 5px;
+.w100n-guest-panel .w100n-docs-panel-body {
+  display: grid;
+  align-content: start;
+  gap: 10px;
 }
-.w100n-docs-prose table {
-  border-collapse: collapse;
-  display: block;
-  overflow-x: auto;
+@container (max-width: 900px) {
+  .w100n-guest-body {
+    flex-direction: column;
+  }
+  .w100n-docs-body .w100n-guest-panel {
+    position: static;
+    width: auto;
+    max-height: 45%;
+  }
 }
-.w100n-docs-prose th,
-.w100n-docs-prose td {
-  padding: 6px 10px;
-  border: 1px solid #e2e8f0;
+@container (max-width: 560px) {
+  .w100n-docs-bar > .w100n-docs-action span,
+  .w100n-docs-bar > .w100n-docs-tile {
+    display: none;
+  }
 }
-.w100n-docs-prose img {
-  max-width: 100%;
+@container (max-width: 720px) {
+  .w100n-guest-brand > :not(:first-child),
+  .w100n-guest-bar .w100n-docs-action span,
+  .w100n-guest-bar > .w100n-docs-badge {
+    display: none;
+  }
+  .w100n-guest-brand {
+    padding-right: 8px;
+  }
 }
-.w100n-docs-pdf,
-.w100n-docs-docx {
+
+/* src/sheets/sheets.css */
+@font-face {
+  font-family: "Calibri";
+  font-weight: 400;
+  font-style: normal;
+  src:
+    local("Calibri"),
+    local("Carlito"),
+    local("Arial"),
+    local("ArialMT"),
+    local("Liberation Sans");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 400;
+  font-style: italic;
+  src:
+    local("Calibri Italic"),
+    local("Carlito Italic"),
+    local("Arial Italic"),
+    local("Arial-ItalicMT"),
+    local("Liberation Sans Italic");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 700;
+  font-style: normal;
+  src:
+    local("Calibri Bold"),
+    local("Carlito Bold"),
+    local("Arial Bold"),
+    local("Arial-BoldMT"),
+    local("Liberation Sans Bold");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 700;
+  font-style: italic;
+  src:
+    local("Calibri Bold Italic"),
+    local("Carlito Bold Italic"),
+    local("Arial Bold Italic"),
+    local("Arial-BoldItalicMT"),
+    local("Liberation Sans Bold Italic");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 400;
+  font-style: normal;
+  src:
+    local("Aptos"),
+    local("Arial"),
+    local("ArialMT"),
+    local("Liberation Sans");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 400;
+  font-style: italic;
+  src:
+    local("Aptos Italic"),
+    local("Arial Italic"),
+    local("Arial-ItalicMT"),
+    local("Liberation Sans Italic");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 700;
+  font-style: normal;
+  src:
+    local("Aptos Bold"),
+    local("Arial Bold"),
+    local("Arial-BoldMT"),
+    local("Liberation Sans Bold");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 700;
+  font-style: italic;
+  src:
+    local("Aptos Bold Italic"),
+    local("Arial Bold Italic"),
+    local("Arial-BoldItalicMT"),
+    local("Liberation Sans Bold Italic");
+}
+.w100n-sheet {
+  position: relative;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-}
-.w100n-docs-sheet {
-  max-width: 100%;
-  height: auto;
-  border-radius: 4px;
-  background: #fff;
-  box-shadow: 0 18px 40px -20px rgb(15 23 42 / 35%);
-  scroll-margin-top: 12px;
-}
-.w100n-docs-docx section.w100n-docx {
-  box-shadow: 0 18px 40px -20px rgb(15 23 42 / 35%);
-  border-radius: 4px;
-}
-.w100n-docs-docx .w100n-docx-wrapper {
-  background: transparent;
-  padding: 0;
+  gap: 8px;
 }
-.w100n-docs-slides {
-  width: min(1040px, 100%);
-  aspect-ratio: 16 / 9;
+.w100n-sheet-ribbon {
+  align-self: center;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 6px;
+  width: min(100%, 1240px);
+  padding: 4px;
   border: 1px solid var(--docs-border);
   border-radius: 12px;
-  background: #fff;
+  background: var(--docs-card);
   box-shadow: var(--docs-shadow);
 }
-.w100n-docs-tabs {
-  display: grid;
-  flex: 1;
-  grid-auto-columns: 1fr;
-  grid-auto-flow: column;
-  gap: 3px;
-  padding: 3px;
-  border-radius: 11px;
-  background: var(--docs-soft);
-}
-.w100n-docs-tabs button {
+.w100n-sheet-tools {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  gap: 5px;
+  gap: 2px;
+  min-width: 0;
+  min-height: 32px;
+}
+.w100n-sheet-ribbon button:not(.w100n-docs-action) {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 30px;
   height: 30px;
   border-radius: 8px;
   color: var(--docs-muted);
+}
+.w100n-sheet-ribbon button:not(.w100n-docs-action):hover:not(:disabled) {
+  background: var(--docs-hover);
+  color: var(--docs-text);
+}
+.w100n-docs .w100n-sheet-ribbon button[aria-pressed=true],
+.w100n-docs .w100n-sheet-ribbon button[aria-expanded=true] {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-sheet-gap {
+  width: 1px;
+  height: 20px;
+  margin: 0 5px;
+  background: var(--docs-border);
+}
+.w100n-sheet-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+.w100n-sheet-muted {
+  max-width: 380px;
+  color: var(--docs-muted);
   font-size: 12px;
-  font-weight: 600;
+  line-height: 1.35;
 }
-.w100n-docs-tabs svg {
-  width: 13px;
-  height: 13px;
+.w100n-sheet-anchor {
+  position: relative;
+  display: inline-flex;
 }
-.w100n-docs-tabs button:hover {
-  color: var(--docs-text);
+.w100n-sheet-bar {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 4px;
+  height: 3px;
+  border-radius: 2px;
 }
-.w100n-docs-tabs button[aria-selected=true] {
-  background: var(--docs-card);
+.w100n-sheet-ribbon .w100n-sheet-anchor > button.w100n-sheet-picker {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  width: 132px;
+  padding: 0 8px 0 10px;
+  border: 1px solid var(--docs-border);
   color: var(--docs-text);
-  box-shadow: 0 1px 2px #0f172a14;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
 }
-.w100n-docs[data-theme=dark] .w100n-docs-tabs button[aria-selected=true] {
-  background: #ffffff14;
-  box-shadow: none;
+.w100n-sheet-picker span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.w100n-docs-panel-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px;
+.w100n-sheet-picker svg {
+  width: 14px;
+  height: 14px;
+  color: var(--docs-dim);
 }
-.w100n-docs-outline {
+.w100n-sheet-pop {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 8px);
+  left: 0;
+  padding: 6px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-sheet-list {
   display: grid;
   gap: 2px;
+  min-width: 200px;
 }
-.w100n-docs-outline button {
-  padding: 6px 9px;
-  border-radius: 8px;
+.w100n-sheet-ribbon .w100n-sheet-list button:not(.w100n-docs-action) {
+  display: flex;
+  justify-content: flex-start;
+  gap: 9px;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  color: var(--docs-text);
+  font-size: 12.5px;
+  font-weight: 550;
   text-align: left;
-  overflow-wrap: anywhere;
-}
-.w100n-docs-outline button:hover {
-  background: var(--docs-hover);
+  white-space: nowrap;
 }
-.w100n-docs-outline button[data-level="2"] {
-  padding-left: 20px;
+.w100n-sheet-list button small {
+  margin-left: auto;
+  padding-left: 12px;
+  color: var(--docs-dim);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
 }
-.w100n-docs-outline button[data-level="3"] {
-  padding-left: 32px;
-  color: var(--docs-muted);
+.w100n-docs .w100n-sheet-ribbon .w100n-sheet-list button[aria-selected=true] {
+  background: var(--docs-active);
+  color: var(--docs-accent);
+  box-shadow: none;
 }
-.w100n-docs-versions {
+.w100n-sheet-swatches {
   display: grid;
+  grid-template-columns: repeat(5, 28px);
   gap: 4px;
 }
-.w100n-docs-versions button {
-  display: grid;
-  gap: 2px;
-  padding: 8px 10px;
-  border-radius: 9px;
-  text-align: left;
-}
-.w100n-docs-versions button:hover {
-  background: var(--docs-hover);
+.w100n-sheet-ribbon .w100n-sheet-swatches button:not(.w100n-docs-action) {
+  width: 28px;
+  height: 28px;
 }
-.w100n-docs-versions button[aria-pressed=true] {
+.w100n-docs .w100n-sheet-ribbon .w100n-sheet-swatches button[aria-pressed=true] {
   background: var(--docs-active);
+  box-shadow: inset 0 0 0 1px #8b5cf659;
 }
-.w100n-docs-versions b {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
+.w100n-sheet-swatches i {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #0f172a2e;
 }
-.w100n-docs-versions small {
+.w100n-sheet-ribbon .w100n-sheet-swatches .w100n-sheet-none {
+  grid-column: 1 / -1;
+  width: auto;
+  height: 28px;
+  padding: 0 8px;
+  place-items: center start;
   color: var(--docs-muted);
   font-size: 12px;
+  font-weight: 600;
 }
-.w100n-docs-details {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 8px 12px;
-  margin: 0;
+.w100n-sheet-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--docs-border);
+  border-radius: 13px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
 }
-.w100n-docs-details dt {
-  color: var(--docs-muted);
+.w100n-sheet-grid,
+.w100n-sheet-host {
+  position: absolute;
+  inset: 0;
 }
-.w100n-docs-details dd {
-  margin: 0;
-  overflow-wrap: anywhere;
+:root [class*=univer-]:not(canvas) {
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
 }
-@container (max-width: 1180px) {
-  .w100n-docs-panel {
-    width: 240px;
-  }
-  .w100n-docs-list {
-    width: 272px;
-  }
+.w100n-sheet-cover {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  background: var(--docs-card);
+  color: var(--docs-muted);
+  font-weight: 600;
+}
+.w100n-sheet-cover span {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 @container (max-width: 900px) {
-  .w100n-docs {
-    --docs-narrow: 1;
+  .w100n-sheet-tools {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding-block: 2px;
   }
-  .w100n-docs-list,
-  .w100n-docs-panel {
-    position: absolute;
-    z-index: 5;
-    top: 10px;
-    bottom: 10px;
-    width: min(320px, calc(100% - 20px));
-  }
-  .w100n-docs-list {
-    left: 10px;
-  }
-  .w100n-docs-panel {
-    right: 10px;
+  .w100n-sheet-tools > * {
+    flex-shrink: 0;
   }
-  .w100n-docs-page {
-    padding: 32px 24px;
+  .w100n-sheet-pop {
+    position: fixed;
+    top: auto;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
   }
-  .w100n-docs-crumbs {
+  .w100n-sheet-muted {
     display: none;
   }
 }