konpeki 0.3.1 → 0.4.0

package/src/lib/alignment.ts

@@ -0,0 +1,21 @@
+export type Guide = { axis: "x" | "y"; value: number };
+
+export function closest(points: number[], targets: number[], threshold: number) {
+  let match: { delta: number; target: number } | undefined;
+  for (const point of points)
+    for (const target of targets) {
+      const delta = target - point;
+      if (Math.abs(delta) <= threshold && (!match || Math.abs(delta) < Math.abs(match.delta)))
+        match = { delta, target };
+    }
+  return match;
+}
+
+/** Visual references only. Never change the dragged coordinates. */
+export function referenceGuides(rect: { x: number; y: number; width: number; height: number }, targets: { x: number[]; y: number[] }, threshold = 2): Guide[] {
+  return (["x", "y"] as const).flatMap(axis => {
+    const size = axis === "x" ? rect.width : rect.height;
+    const match = closest([rect[axis], rect[axis] + size / 2, rect[axis] + size], targets[axis], threshold);
+    return match ? [{ axis, value: match.target }] : [];
+  });
+}

package/src/lib/page-board.ts

@@ -0,0 +1,25 @@
+/** Presentation geometry only; never stored in the authored document. */
+export function layoutPages(sizes: readonly { width: number; height: number }[], availableWidth: number, availableHeight: number) {
+  const gap = 80, heading = 32;
+  let nextX = 0;
+  const pages = sizes.map(size => {
+    const scale = Math.min(availableWidth / size.width, Math.max(0, availableHeight - heading) / size.height);
+    const width = size.width * scale, height = size.height * scale;
+    const x = nextX;
+    nextX += width + gap;
+    return { x, y: heading, width, height };
+  });
+  const arrows = pages.slice(1).map((next, index) => {
+    const previous = pages[index];
+    const start = previous.x + previous.width + 16;
+    const end = next.x - 16;
+    const middle = (start + end) / 2;
+    return `M ${start} ${previous.y + previous.height / 2} H ${middle} V ${next.y + next.height / 2} H ${end}`;
+  });
+  return {
+    // The board centers this tightly bounded row when it fits the viewport.
+    width: pages.length ? nextX - gap : availableWidth,
+    height: pages.length ? heading + Math.max(...pages.map(page => page.height)) : 0,
+    pages, arrows,
+  };
+}

package/src/lib/review-position.ts

@@ -0,0 +1,19 @@
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** Fixed viewport coordinates; the caller measures the already-zoomed target. */
+export function reviewPosition(anchor: Rect, panel: Pick<Rect, "width" | "height">, viewport: Rect) {
+  const margin = 16, gap = 12;
+  const minX = viewport.x + margin, minY = viewport.y + margin;
+  const maxX = Math.max(minX, viewport.x + viewport.width - margin - panel.width);
+  const maxY = Math.max(minY, viewport.y + viewport.height - margin - panel.height);
+  const left = Math.max(minX, Math.min(anchor.x, maxX));
+  const top = Math.max(minY, Math.min(anchor.y, maxY));
+  const candidates = [
+    { left, top: anchor.y + anchor.height + gap },
+    { left, top: anchor.y - gap - panel.height },
+    { left: anchor.x + anchor.width + gap, top },
+    { left: anchor.x - gap - panel.width, top },
+  ];
+  return candidates.find(p => p.left >= minX && p.left <= maxX && p.top >= minY && p.top <= maxY)
+    ?? { left, top: Math.max(minY, Math.min(candidates[0].top, maxY)) };
+}

package/src/styles/base.css

@@ -53,10 +53,7 @@ button:disabled {
   cursor: default;
   color: #767676;
 }
-.right-panel input[type="number"],
-.revision-note-count,
-.overflow-trigger,
-.thumbnail-page-number {
+.revision-note-count {
   font-variant-numeric: tabular-nums;
 }
 :focus-visible {
@@ -105,12 +102,6 @@ h2 {
   background: #383838;
   border-color: #383838;
 }
-.panel-toggle:active:not(:disabled),
-.action-island button:active:not(:disabled),
-.component-dock button:active:not(:disabled),
-.segmented-options button:active:not(:disabled),
-.theme-options button:active:not(:disabled),
-.appearance-options button:active:not(:disabled),
 .revision-note-submit button:active:not(:disabled),
 .revision-note-remove:active:not(:disabled) {
   transform: scale(0.96);

package/src/styles/feedback.css

@@ -69,6 +69,7 @@
   font-size: 20px !important;
   color: inherit;
 }
+.toast-undo { margin-left: 12px; padding: 4px 8px; border: 0; background: transparent; color: var(--accent); font-weight: 500; }
 .toast.error {
   background: #fff7f7;
   color: #8d1717;
@@ -130,7 +131,7 @@ input[aria-invalid="true"]:focus-visible {
   line-height: 1.5;
 }
 @media (max-width: 900px) {
-  .toast { top: calc(var(--panel-top) + 68px); }
+  .toast { top: 16px; }
 }
 @media (prefers-reduced-motion: reduce) {
   *,

package/src/styles/shell.css

@@ -1,364 +1,104 @@
-:root {
-  --panel-top: 20px;
-}
-.skip-link {
-  position: fixed;
-  top: -60px;
-  left: 12px;
-  background: white;
-  padding: 10px;
-  z-index: 100;
-  color: var(--accent);
-}
-.skip-link:focus {
-  top: 8px;
-}
 .workspace {
-  --panel-duration: 200ms;
-  --panel-easing: cubic-bezier(0.2, 0, 0, 1);
-  --panel-header-height: 58px;
-  position: relative;
   height: 100dvh;
-  min-height: 100dvh;
-  overflow: hidden;
+  overflow: auto;
+  padding: 32px 48px;
   background: var(--ui-bg);
-}
-.left-sidebar,
-.right-panel {
+  scrollbar-gutter: stable;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+}
+.board-heading { margin: 0 0 24px; }
+.board-heading h1 { font-size: 17px; font-weight: 500; }
+.board-help { margin: 24px auto 0; text-align: center; font-size: 12px; color: var(--ui-muted); }
+.page-board { display: flex; align-items: center; justify-content: center; width: max-content; min-width: 100%; }
+.page-board-content { position: relative; flex: none; }
+.board-page { position: absolute; }
+.stage-meta { display: flex; align-items: baseline; gap: 12px; height: 32px; padding-top: 2px; color: var(--ui-muted); font-size: 12px; line-height: 18px; }
+.page-index { flex: none; font-variant-numeric: tabular-nums; }
+.stage-meta h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: inherit; }
+.stage-meta input { width: min(300px, 100%); height: 26px; margin-top: -3px; padding: 2px 6px; font: inherit; }
+.page-order { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
+.page-order path { fill: none; stroke: #8b969c; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
+.review-launcher {
   position: fixed;
-  top: var(--panel-top);
-  height: calc(100dvh - 92px - var(--panel-top));
-  width: var(--panel-width);
-  z-index: 30;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--ui-surface);
-  min-height: 0;
-  border: 1px solid transparent;
-  border-radius: 12px;
-  box-shadow: var(--ui-floating-shadow);
-  transition: width var(--panel-duration) var(--panel-easing),
-    height var(--panel-duration) var(--panel-easing),
-    top var(--panel-duration) var(--panel-easing);
-}
-.left-sidebar {
-  --panel-width: 252px;
-  left: 20px;
+  right: 24px;
+  bottom: 24px;
   z-index: 40;
-}
-.left-sidebar.collapsed {
-  top: 20px;
-  width: 107px;
-  height: calc(var(--panel-header-height) + 2px);
-}
-.left-sidebar:not(.collapsed):has(.browser-menu[open]) {
-  overflow: visible;
-}
-.right-panel {
-  --panel-width: min(328px, calc(100vw - 40px));
-  right: 20px;
-}
-.right-panel.collapsed {
-  top: 20px;
-  width: 50px;
-  height: calc(var(--panel-header-height) + 2px);
-}
-.right-panel.collapsed > .panel-toolbar {
-  gap: 0;
-  grid-template-columns: minmax(0, 1fr) 0 40px;
-  padding: 0 4px;
-  border-bottom-color: transparent;
-}
-.left-panel,
-.right-panel-body {
-  width: calc(var(--panel-width) - 2px);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.right-panel-body {
-  align-self: flex-end;
-}
-.right-panel > .panel-toolbar > .panel-tabs {
-  clip-path: inset(-4px 0);
-}
-.right-panel .panel-tabs button:focus-visible {
-  outline-offset: -3px;
-}
-.document-title,
-.document-title-error,
-.file-status,
-.right-panel > .panel-toolbar > .panel-tabs,
-.right-panel > .panel-toolbar > .overflow-control,
-.left-panel,
-.action-island,
-.right-panel-body {
-  transition: opacity var(--panel-duration) var(--panel-easing),
-    visibility 0s;
-}
-.left-collapsed .document-title,
-.left-collapsed .document-title-error,
-.left-collapsed .file-status,
-.right-panel.collapsed .panel-tabs,
-.right-panel.collapsed .overflow-control,
-.left-panel.collapsed,
-.left-collapsed .action-island,
-.right-panel.collapsed .right-panel-body {
-  opacity: 0;
-  visibility: hidden;
-  transition-delay: 0s, var(--panel-duration);
-}
-.panel-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 48px;
-  background: var(--ui-surface);
-  border-bottom: 1px solid var(--ui-border);
-}
-.left-panel > .panel-toolbar {
-  flex: none;
-  padding: 0 8px 0 16px;
-  border-bottom: 0;
-}
-.right-panel > .panel-toolbar {
-  flex: none;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 48px 40px;
-  height: var(--panel-header-height);
-  padding: 0 8px 0 12px;
-  overflow: hidden;
-  transition: padding var(--panel-duration) var(--panel-easing),
-    gap var(--panel-duration) var(--panel-easing),
-    grid-template-columns var(--panel-duration) var(--panel-easing),
-    border-bottom-color var(--panel-duration) var(--panel-easing);
-}
-.panel-heading {
-  flex: 1;
-  color: var(--ui-text);
-  font-size: 13px;
-  font-weight: 500;
-}
-.panel-toggle {
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  border-color: transparent;
-  box-shadow: none;
-}
-.panel-toggle:hover:not(:disabled) {
-  border-color: transparent;
-  background: var(--ui-hover);
-}
-.panel-close-icon,
-.panel-collapse-icon {
-  position: relative;
-  display: block;
-  width: 14px;
-  height: 14px;
-  margin: auto;
-}
-.panel-collapse-icon {
-  width: 18px;
-  height: 18px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.7;
-}
-.panel-close-icon::before,
-.panel-close-icon::after {
-  position: absolute;
-  top: 6px;
-  left: 1px;
-  width: 12px;
-  height: 1.5px;
-  border-radius: 1px;
-  background: currentColor;
-  content: "";
-}
-.panel-close-icon::before {
-  transform: rotate(45deg);
-}
-.panel-close-icon::after {
-  transform: rotate(-45deg);
-}
-.panel-tabs {
-  flex: 1;
-  display: flex;
-  align-self: stretch;
-  min-width: 0;
-  justify-content: flex-start;
-  gap: 20px;
-}
-.left-panel .panel-tabs button {
-  padding-inline: 1px;
-  font-size: 12px;
-}
-.panel-tabs button {
-  position: relative;
-  border: 0;
-  border-radius: 0;
-  padding: 0 2px;
-  background: transparent;
-  color: var(--ui-muted);
-  font-size: 13px;
-  font-weight: 500;
-}
-.panel-tabs button:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-  color: var(--ui-text);
-}
-.panel-tabs button.active {
-  background: transparent;
-  color: #006aa1;
-  box-shadow: none;
-}
-.panel-tabs button.active::after {
-  position: absolute;
-  right: 0;
-  bottom: -1px;
-  left: 0;
-  height: 2px;
-  background: var(--accent);
-  content: "";
-}
-.stage {
-  position: absolute;
-  inset: 0;
-  padding: 112px 376px 110px 292px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  transition: padding-left var(--panel-duration) var(--panel-easing),
-    padding-right var(--panel-duration) var(--panel-easing);
-}
-.workspace.left-collapsed .stage {
-  padding-left: 96px;
-}
-.workspace.right-collapsed .stage {
-  padding-right: 96px;
-}
-.editor-content {
-  display: contents;
-}
-.is-building .canvas {
-  opacity: 0.18;
-  filter: none;
-}
-.build-loading {
-  z-index: 45;
-  pointer-events: none;
-}
-.build-loading-card {
-  pointer-events: auto;
-  display: grid;
-  gap: 10px;
-  width: min(320px, 100%);
-  padding: 24px;
-  border: 1px solid var(--ui-border);
-  border-radius: 16px;
-  background: var(--ui-surface);
-  box-shadow: var(--ui-shadow);
-  text-align: center;
-}
-.build-loading-card button {
-  min-height: 40px;
-  border-radius: 8px;
-}
-.build-loading-card strong {
-  font-size: 14px;
-  font-weight: 500;
-}
-.build-loading-card span {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ui-muted);
-}
-.build-nebula {
-  position: relative;
-  width: 88px;
-  height: 88px;
-  margin: -4px auto 4px;
-}
-.build-nebula::before {
-  content: "";
-  position: absolute;
-  inset: 14px;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  padding: 14px;
+  border: 1px solid #00000014;
   border-radius: 50%;
-  background: conic-gradient(from 45deg, #77d3ed70, #b994dc60, #729fec50, #77d3ed70);
-  filter: blur(10px);
-  animation: orb-turn 12s linear infinite reverse;
-}
-.slide-wrap {
-  width: 100%;
-  max-width: min(1200px, calc((100vh - 270px) * var(--page-ratio)));
-}
-.stage-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  height: 40px;
-  margin: 0 0 12px;
-}
-.edit-elements-action {
-  flex-shrink: 0;
-  min-height: 40px;
-  padding: 7px 10px;
-  font-size: 12px;
-}
-.stage-meta h2 {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--ui-muted);
-  margin: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: text;
-}
-.stage-meta input {
-  width: min(240px, 100%);
-  height: 40px;
-  padding: 7px 9px;
-  font-size: 12px;
-}
-@media (max-width: 1200px) {
-  .stage {
-    padding-right: 96px;
-    padding-left: 276px;
-  }
-}
-@media (max-width: 900px) {
-  .workspace.left-collapsed .stage,
-  .workspace.right-collapsed .stage,
-  .workspace.left-collapsed.right-collapsed .stage {
-    padding: 96px 16px 110px;
-  }
+  background: #25292c;
+  color: white;
+  box-shadow: 0 2px 4px #00000006, 0 6px 16px #0000000d;
+}
+.review-launcher:hover:not(:disabled) { background: #373d41; border-color: #00000014; color: white; box-shadow: 0 2px 4px #00000008, 0 8px 20px #00000012; }
+.review-launcher:active:not(:disabled) { transform: translateY(1px); }
+.review-launcher[aria-pressed="true"] { border-color: var(--accent); background: var(--ui-selected); color: var(--accent); box-shadow: 0 2px 4px #00000008, 0 6px 18px #007bbb26; }
+.review-launcher[aria-pressed="true"]:hover:not(:disabled),
+.review-launcher[aria-pressed="true"][aria-expanded="true"] { background: #e0f0f8; color: #006da7; }
+.review-launcher svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; animation: review-icon-in 160ms ease-out; }
+.review-count { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; background: var(--accent); color: white; border: 2px solid var(--ui-bg); border-radius: 20px; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; animation: review-icon-in 180ms ease-out; }
+.revision-notes { position: fixed; right: 24px; bottom: 88px; z-index: 40; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 112px); overflow: auto; overscroll-behavior: contain; scroll-padding-block: 16px 68px; scrollbar-width: thin; scrollbar-color: #00000026 transparent; padding: 0 16px 16px; border: 1px solid #00000014; border-radius: 14px; background: var(--ui-surface); box-shadow: 0 4px 12px -2px #0000000f, 0 16px 32px -4px #0000001a; font-size: 13px; line-height: 1.5; animation: review-panel-in 180ms cubic-bezier(.2,.8,.2,1); }
+.revision-notes:not(.comment-composer) { max-height: min(50dvh, calc(100dvh - 108px)); }
+.revision-notes > header:not(.sr-only) { padding: 12px 0 0; }
+.revision-notes h2 { min-width: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
+.revision-notes svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.revision-note-scope { overflow-wrap: anywhere; font-weight: 500; }
+.revision-notes form { padding-top: 14px; }
+.revision-notes textarea { display: block; min-height: 90px; max-height: 220px; padding: 10px 12px; border-color: #dcdfe4; border-radius: 8px; font-size: 14px; }
+.revision-notes textarea::placeholder { color: var(--ui-muted); }
+.revision-notes textarea:hover { border-color: #aab4ba; }
+.revision-notes textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #007bbb1f; }
+.revision-notes .primary, .review-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 12px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; }
+.revision-notes .primary { background: var(--accent); border-color: var(--accent); }
+.revision-notes .primary:hover:not(:disabled) { background: #006da7; border-color: #006da7; }
+.review-secondary { border-color: transparent; background: #eceff1; font-weight: 500; }
+.review-secondary:hover:not(:disabled) { border-color: transparent; background: #e1e6e9; }
+.revision-notes .primary:disabled { background: #f0f2f3; border-color: #e6e9eb; color: #788087; box-shadow: none; }
+.revision-note-submit { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.comment-error { margin-top: 12px; color: #9b2929; font-size: 12px; }
+.comment-copy-fallback { display: grid; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ui-muted); }
+.comment-copy-fallback textarea { font-size: 12px; }
+.revision-note-list { list-style: none; padding: 0; margin: 0; }
+.revision-note-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; padding: 14px 0; border-top: 1px solid var(--ui-border); }
+.revision-note-list li:first-child { border-top: 0; }
+.revision-note-list li p { grid-column: 2 / -1; grid-row: 2; margin-top: 6px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.revision-note-list button { border: 0; background: transparent; border-radius: 6px; font-size: 12px; line-height: 18px; color: var(--ui-muted); }
+.revision-note-target { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; text-align: left; }
+.revision-note-target > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.revision-note-target:hover:not(:disabled) { background: transparent; color: var(--accent); }
+.revision-note-number { display: inline-grid; flex: none; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 50%; background: var(--ui-selected); color: #006da7; font-size: 10px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.revision-note-actions { grid-column: 3; grid-row: 1; display: flex; gap: 2px; margin: -4px -6px -4px 0; }
+.revision-note-actions button { display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; }
+.revision-note-actions button:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-text); }
+.revision-note-actions .revision-note-remove:hover:not(:disabled) { background: #fff1f0; color: #9b2929; }
+.current-comments li p { grid-row: 1; grid-column: 2; margin-top: 0; }
+.current-comments + form { border-top: 1px solid var(--ui-border); }
+.review-empty { margin: 28px 0; color: var(--ui-muted); text-align: center; }
+.review-actions { position: sticky; bottom: -16px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 -16px -16px; padding: 10px 12px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
+.comment-copy-fallback + .review-actions, .comment-error + .review-actions { margin-top: 16px; }
+.comment-composer { padding-bottom: 0; }
+.comment-composer:focus-within { border-color: #007bbb55; }
+.comment-composer .revision-note-scope { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-muted); font-size: 12px; line-height: 18px; }
+.comment-composer form { padding-top: 0; }
+.comment-composer #revision-note { min-height: 88px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.comment-composer .revision-note-submit { margin: 4px -16px 0; padding: 10px 12px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
+.comment-composer > .comment-error { margin-bottom: 12px; }
+@keyframes review-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes review-icon-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
+@media (prefers-reduced-motion: reduce) {
+  .revision-notes, .review-launcher svg, .review-count { animation: none; }
+  .review-launcher, .revision-notes button { transition: none; }
 }
-
 @media (max-width: 600px) {
-  :root {
-    --panel-top: 88px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .workspace {
-    --panel-duration: 0ms;
-  }
+  .workspace { padding: 24px 16px; }
+  .board-heading { margin-bottom: 28px; }
+  .review-launcher { right: 16px; bottom: 16px; }
+  .revision-notes { right: 16px; bottom: 80px; max-height: calc(100dvh - 96px); }
+  .revision-note-actions button { width: 32px; height: 32px; }
+  .review-actions button, .revision-note-submit button { min-height: 36px; }
 }

package/theme-base.css

@@ -0,0 +1,90 @@
+/* Shared output geometry and type scales. Themes supply visual treatments;
+   documents own composition. See html/theme.md for the public contract. */
+[data-page] {
+  --kp-page-width: 1920px; --kp-page-height: 1080px; --kp-page-margin: 72px;
+  --kp-font-fine: 20px; --kp-font-caption: 24px; --kp-font-body: 28px; --kp-font-lead: 36px; --kp-font-heading: 44px; --kp-font-title: 60px; --kp-font-display: 76px;
+  --kp-leading-fine: 28px; --kp-leading-caption: 32px; --kp-leading-body: 40px; --kp-leading-lead: 46px; --kp-leading-heading: 52px; --kp-leading-title: 68px; --kp-leading-display: 84px;
+}
+[data-size="portrait"], [data-size="square"] {
+  --kp-page-width: 1080px; --kp-page-height: 1350px; --kp-page-margin: 60px;
+  --kp-font-fine: 18px; --kp-font-caption: 22px; --kp-font-body: 28px; --kp-font-lead: 34px; --kp-font-heading: 44px; --kp-font-title: 60px; --kp-font-display: 76px;
+  --kp-leading-fine: 24px; --kp-leading-caption: 28px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-heading: 52px; --kp-leading-title: 68px; --kp-leading-display: 84px;
+}
+[data-size="square"] { --kp-page-height: 1080px; }
+[data-size="link"] {
+  --kp-page-width: 1200px; --kp-page-height: 630px; --kp-page-margin: 48px;
+  --kp-font-fine: 16px; --kp-font-caption: 20px; --kp-font-body: 24px; --kp-font-lead: 30px; --kp-font-heading: 40px; --kp-font-title: 52px; --kp-font-display: 64px;
+  --kp-leading-fine: 20px; --kp-leading-caption: 24px; --kp-leading-body: 32px; --kp-leading-lead: 36px; --kp-leading-heading: 48px; --kp-leading-title: 60px; --kp-leading-display: 72px;
+}
+[data-size="article"] {
+  --kp-page-width: 1600px; --kp-page-height: 600px; --kp-page-margin: 48px;
+  --kp-font-fine: 18px; --kp-font-caption: 22px; --kp-font-body: 28px; --kp-font-lead: 34px; --kp-font-heading: 44px; --kp-font-title: 56px; --kp-font-display: 72px;
+  --kp-leading-fine: 24px; --kp-leading-caption: 28px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-heading: 52px; --kp-leading-title: 64px; --kp-leading-display: 80px;
+}
+[data-size="a4"] {
+  --kp-page-width: 210mm; --kp-page-height: 297mm; --kp-page-margin: 56px;
+  --kp-font-fine: 10px; --kp-font-caption: 12px; --kp-font-body: 14px; --kp-font-lead: 18px; --kp-font-heading: 24px; --kp-font-title: 32px; --kp-font-display: 44px;
+  --kp-leading-fine: 14px; --kp-leading-caption: 16px; --kp-leading-body: 20px; --kp-leading-lead: 24px; --kp-leading-heading: 30px; --kp-leading-title: 38px; --kp-leading-display: 50px;
+}
+[data-size="explainer"] { --kp-page-width: 1200px; --kp-page-height: 1600px; --kp-page-margin: 60px; }
+[data-size="gallery"] {
+  --kp-page-width: 1600px; --kp-page-height: 1000px; --kp-page-margin: 64px;
+  --kp-font-lead: 34px; --kp-font-title: 56px; --kp-font-display: 72px;
+  --kp-leading-fine: 24px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-title: 64px; --kp-leading-display: 80px;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; }
+:root { color-scheme: light; }
+[data-page] {
+  --kp-space-1: var(--kp-unit); --kp-space-2: calc(2 * var(--kp-unit)); --kp-space-3: calc(3 * var(--kp-unit));
+  --kp-space-4: calc(4 * var(--kp-unit)); --kp-space-6: calc(6 * var(--kp-unit)); --kp-space-8: calc(8 * var(--kp-unit));
+  --kp-space-5: calc(5 * var(--kp-unit)); --kp-space-10: calc(10 * var(--kp-unit));
+  --kp-space-12: calc(12 * var(--kp-unit)); --kp-space-16: calc(16 * var(--kp-unit));
+  position: relative; display: flow-root;
+  width: var(--kp-page-width); height: var(--kp-page-height); padding: var(--kp-page-margin);
+  background: var(--kp-bg); color: var(--kp-fg);
+  font-family: var(--kp-font-family); font-size: var(--kp-font-body); line-height: var(--kp-leading-body);
+  font-weight: var(--kp-weight-body); letter-spacing: var(--kp-tracking-body);
+  font-synthesis: none;
+  /* Avoid stranded last words; headline roles below balance their lines. */
+  text-wrap: pretty;
+}
+
+/* Zero-specificity defaults leave page-authored CSS in control. An explicit
+   data-type replaces the element's default role without changing its semantics. */
+:where([data-page]) :where(h1, h2, h3, p, figure) { margin: 0; }
+:where([data-page]) :where([data-type="fine"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-fine); line-height: var(--kp-leading-fine);
+  font-weight: var(--kp-weight-fine); letter-spacing: var(--kp-tracking-fine); color: var(--kp-muted);
+}
+:where([data-page]) :where(figcaption:not([data-type]), [data-type="caption"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-caption); line-height: var(--kp-leading-caption);
+  font-weight: var(--kp-weight-caption); letter-spacing: var(--kp-tracking-caption); color: var(--kp-muted);
+}
+:where([data-page]) :where([data-type="body"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-body); line-height: var(--kp-leading-body);
+  font-weight: var(--kp-weight-body); letter-spacing: var(--kp-tracking-body); color: var(--kp-fg);
+}
+:where([data-page]) :where(h3:not([data-type]), [data-type="lead"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-lead); line-height: var(--kp-leading-lead);
+  font-weight: var(--kp-weight-lead); letter-spacing: var(--kp-tracking-lead);
+}
+:where([data-page]) :where(h2:not([data-type]), [data-type="heading"]) {
+  font-family: var(--kp-font-family-heading); font-size: var(--kp-font-heading); line-height: var(--kp-leading-heading);
+  font-weight: var(--kp-weight-heading); letter-spacing: var(--kp-tracking-heading);
+  text-wrap: balance;
+}
+:where([data-page]) :where(h1:not([data-type]), [data-type="title"]) {
+  font-family: var(--kp-font-family-heading); font-size: var(--kp-font-title); line-height: var(--kp-leading-title);
+  font-weight: var(--kp-weight-title); letter-spacing: var(--kp-tracking-title); color: var(--kp-accent);
+  text-wrap: balance;
+}
+:where([data-page]) :where([data-type="display"]) {
+  font-family: var(--kp-font-family-display); font-size: var(--kp-font-display); line-height: var(--kp-leading-display);
+  font-weight: var(--kp-weight-display); letter-spacing: var(--kp-tracking-display); color: var(--kp-accent);
+  text-wrap: balance;
+}
+:where([data-page]) :where(strong) { font-weight: var(--kp-weight-strong); }
+:where([data-page]) :where(code) { font-family: var(--kp-font-family-mono); font-weight: var(--kp-weight-mono); color: var(--kp-accent); }
+:where([data-page]) :where(hr) { margin: var(--kp-space-3) 0; border: 0; border-top: var(--kp-rule-width) solid var(--kp-line); }