mdx-artifacts 0.1.0

package/dist/lib/react/styles.css

@@ -0,0 +1,1417 @@
+@import "tailwindcss";
+@source "./components/**/*.{ts,tsx}";
+@source "../../artifact-docs/**/*.{mdx}";
+
+:root {
+  color-scheme: light;
+  --ak-bg: oklch(0.985 0 0);
+  --ak-surface: oklch(1 0 0);
+  --ak-surface-subtle: oklch(0.97 0 0);
+  --ak-text: oklch(0.145 0 0);
+  --ak-muted: oklch(0.556 0 0);
+  --ak-border: oklch(0.922 0 0);
+  --ak-primary: oklch(0.205 0 0);
+  --ak-primary-dark: oklch(0.205 0 0);
+  --ak-primary-foreground: oklch(0.985 0 0);
+  --ak-primary-subtle: oklch(0.97 0 0);
+  --ak-good: oklch(0.45 0.12 165);
+  --ak-good-subtle: oklch(0.96 0.03 165);
+  --ak-warn: oklch(0.55 0.12 85);
+  --ak-warn-subtle: oklch(0.97 0.04 85);
+  --ak-risk: oklch(0.577 0.245 27.325);
+  --ak-risk-subtle: oklch(0.971 0.013 17.38);
+  --ak-code-bg: oklch(0.97 0 0);
+  --ak-code-text: oklch(0.269 0 0);
+  --ak-code-highlight-bg: oklch(0.91 0.055 85);
+  --ak-code-add-bg: oklch(0.91 0.06 155);
+  --ak-code-remove-bg: oklch(0.93 0.055 25);
+  --ak-output-bg: oklch(0.145 0 0);
+  --ak-output-text: oklch(0.985 0 0);
+  --ak-comment-accent: oklch(0.55 0.17 245);
+  --ak-comment-accent-subtle: oklch(0.96 0.035 245);
+  --ak-review-content-width: 1120px;
+  --ak-review-gap: 18px;
+  --ak-review-gap-total: 36px;
+  --ak-review-page-gutter-total: 32px;
+  --ak-review-rail-width: clamp(
+    180px,
+    calc((100vw - var(--ak-review-content-width) - var(--ak-review-gap-total) - var(--ak-review-page-gutter-total)) / 2),
+    360px
+  );
+  --ak-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ak-bg: oklch(0.145 0 0);
+  --ak-surface: oklch(0.205 0 0);
+  --ak-surface-subtle: oklch(0.269 0 0);
+  --ak-text: oklch(0.985 0 0);
+  --ak-muted: oklch(0.708 0 0);
+  --ak-border: oklch(1 0 0 / 10%);
+  --ak-primary: oklch(0.922 0 0);
+  --ak-primary-dark: oklch(0.985 0 0);
+  --ak-primary-foreground: oklch(0.145 0 0);
+  --ak-primary-subtle: oklch(1 0 0 / 10%);
+  --ak-good: oklch(0.78 0.12 165);
+  --ak-good-subtle: oklch(0.32 0.06 165);
+  --ak-warn: oklch(0.82 0.12 85);
+  --ak-warn-subtle: oklch(0.34 0.06 85);
+  --ak-risk: oklch(0.704 0.191 22.216);
+  --ak-risk-subtle: oklch(0.31 0.08 22);
+  --ak-code-bg: oklch(1 0 0 / 8%);
+  --ak-code-text: oklch(0.922 0 0);
+  --ak-code-highlight-bg: oklch(0.34 0.06 85);
+  --ak-code-add-bg: oklch(0.28 0.055 155);
+  --ak-code-remove-bg: oklch(0.3 0.06 25);
+  --ak-output-bg: oklch(0.12 0 0);
+  --ak-output-text: oklch(0.985 0 0);
+  --ak-comment-accent: oklch(0.75 0.13 245);
+  --ak-comment-accent-subtle: oklch(0.32 0.055 245);
+  --ak-shadow: 0 1px 2px rgb(0 0 0 / 28%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --ak-bg: oklch(0.145 0 0);
+    --ak-surface: oklch(0.205 0 0);
+    --ak-surface-subtle: oklch(0.269 0 0);
+    --ak-text: oklch(0.985 0 0);
+    --ak-muted: oklch(0.708 0 0);
+    --ak-border: oklch(1 0 0 / 10%);
+    --ak-primary: oklch(0.922 0 0);
+    --ak-primary-dark: oklch(0.985 0 0);
+    --ak-primary-foreground: oklch(0.145 0 0);
+    --ak-primary-subtle: oklch(1 0 0 / 10%);
+    --ak-good: oklch(0.78 0.12 165);
+    --ak-good-subtle: oklch(0.32 0.06 165);
+    --ak-warn: oklch(0.82 0.12 85);
+    --ak-warn-subtle: oklch(0.34 0.06 85);
+    --ak-risk: oklch(0.704 0.191 22.216);
+    --ak-risk-subtle: oklch(0.31 0.08 22);
+    --ak-code-bg: oklch(1 0 0 / 8%);
+    --ak-code-text: oklch(0.922 0 0);
+    --ak-code-highlight-bg: oklch(0.34 0.06 85);
+    --ak-code-add-bg: oklch(0.28 0.055 155);
+    --ak-code-remove-bg: oklch(0.3 0.06 25);
+    --ak-output-bg: oklch(0.12 0 0);
+    --ak-output-text: oklch(0.985 0 0);
+    --ak-comment-accent: oklch(0.75 0.13 245);
+    --ak-comment-accent-subtle: oklch(0.32 0.055 245);
+    --ak-shadow: 0 1px 2px rgb(0 0 0 / 28%);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--ak-bg);
+  color: var(--ak-text);
+}
+
+.ak-shell {
+  width: min(var(--ak-review-content-width), calc(100% - 32px));
+  margin: 0 auto;
+  padding: 36px 0 56px;
+}
+
+.ak-shell:has(.ak-review-layout-active) {
+  width: min(
+    calc(100% - 32px),
+    calc(var(--ak-review-content-width) + var(--ak-review-gap-total) + var(--ak-review-rail-width) + var(--ak-review-rail-width))
+  );
+}
+
+.ak-document {
+  display: grid;
+  gap: 24px;
+}
+
+.ak-review-layout {
+  display: grid;
+  grid-template-columns: var(--ak-review-rail-width) minmax(0, var(--ak-review-content-width)) var(--ak-review-rail-width);
+  gap: var(--ak-review-gap);
+  align-items: start;
+}
+
+.ak-review-layout-inactive {
+  display: block;
+}
+
+.ak-review-content {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+}
+
+.ak-review-layout-inactive > .ak-review-rail {
+  display: none;
+}
+
+.ak-review-rail {
+  position: relative;
+  min-height: 1px;
+}
+
+.ak-document > h1,
+.ak-document > h2,
+.ak-document > h3,
+.ak-document > h4,
+.ak-document > h5,
+.ak-document > h6,
+.ak-document > p,
+.ak-document > ul,
+.ak-document > ol,
+.ak-document > blockquote,
+.ak-review-content > h1,
+.ak-review-content > h2,
+.ak-review-content > h3,
+.ak-review-content > h4,
+.ak-review-content > h5,
+.ak-review-content > h6,
+.ak-review-content > p,
+.ak-review-content > ul,
+.ak-review-content > ol,
+.ak-review-content > blockquote,
+.ak-content-section > h1,
+.ak-content-section > h2,
+.ak-content-section > h3,
+.ak-content-section > h4,
+.ak-content-section > h5,
+.ak-content-section > h6,
+.ak-content-section > p,
+.ak-content-section > ul,
+.ak-content-section > ol,
+.ak-content-section > blockquote {
+  margin: 0;
+}
+
+.ak-document > h1,
+.ak-document > h2,
+.ak-document > h3,
+.ak-document > h4,
+.ak-document > h5,
+.ak-document > h6,
+.ak-review-content > h1,
+.ak-review-content > h2,
+.ak-review-content > h3,
+.ak-review-content > h4,
+.ak-review-content > h5,
+.ak-review-content > h6,
+.ak-content-section > h1,
+.ak-content-section > h2,
+.ak-content-section > h3,
+.ak-content-section > h4,
+.ak-content-section > h5,
+.ak-content-section > h6 {
+  line-height: 1.25;
+}
+
+.ak-document > h1,
+.ak-review-content > h1,
+.ak-content-section > h1 {
+  margin: 0 0 4px;
+  font-size: 32px;
+  line-height: 1.15;
+}
+
+.ak-document > h2,
+.ak-review-content > h2,
+.ak-content-section > h2 {
+  font-size: 24px;
+}
+
+.ak-document > h3,
+.ak-review-content > h3,
+.ak-content-section > h3 {
+  font-size: 20px;
+}
+
+.ak-document > h4,
+.ak-review-content > h4,
+.ak-content-section > h4 {
+  font-size: 17px;
+}
+
+.ak-document > h5,
+.ak-document > h6,
+.ak-review-content > h5,
+.ak-review-content > h6,
+.ak-content-section > h5,
+.ak-content-section > h6 {
+  color: var(--ak-muted);
+  font-size: 15px;
+}
+
+.ak-document > p,
+.ak-document > blockquote,
+.ak-review-content > p,
+.ak-review-content > blockquote,
+.ak-content-section > p,
+.ak-content-section > blockquote,
+.ak-document li,
+.ak-review-content li,
+.ak-content-section li {
+  line-height: 1.65;
+}
+
+.ak-document > ul,
+.ak-document > ol,
+.ak-review-content > ul,
+.ak-review-content > ol,
+.ak-content-section > ul,
+.ak-content-section > ol {
+  display: grid;
+  gap: 6px;
+  padding-left: 22px;
+}
+
+.ak-document ul,
+.ak-review-content ul,
+.ak-content-section ul {
+  list-style: disc outside;
+}
+
+.ak-document ol,
+.ak-review-content ol,
+.ak-content-section ol {
+  list-style: decimal outside;
+}
+
+.ak-document li > ul,
+.ak-document li > ol,
+.ak-review-content li > ul,
+.ak-review-content li > ol,
+.ak-content-section li > ul,
+.ak-content-section li > ol {
+  margin-top: 6px;
+  padding-left: 22px;
+}
+
+.ak-document li > ul,
+.ak-review-content li > ul,
+.ak-content-section li > ul {
+  list-style-type: circle;
+}
+
+.ak-document li > ul li > ul,
+.ak-review-content li > ul li > ul,
+.ak-content-section li > ul li > ul {
+  list-style-type: square;
+}
+
+.ak-document li > ol,
+.ak-review-content li > ol,
+.ak-content-section li > ol {
+  list-style-type: lower-alpha;
+}
+
+.ak-document li > ol li > ol,
+.ak-review-content li > ol li > ol,
+.ak-content-section li > ol li > ol {
+  list-style-type: lower-roman;
+}
+
+.ak-document > blockquote,
+.ak-review-content > blockquote,
+.ak-content-section > blockquote {
+  border-left: 3px solid var(--ak-border);
+  color: var(--ak-muted);
+  padding-left: 14px;
+}
+
+.ak-section {
+  display: grid;
+  gap: 16px;
+  margin: 0;
+}
+
+.ak-section-header {
+  display: grid;
+  gap: 4px;
+}
+
+.ak-section-header :where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.25;
+}
+
+.ak-stack,
+.ak-columns,
+.ak-grid,
+.ak-split-pane {
+  min-width: 0;
+}
+
+.ak-stack {
+  display: grid;
+}
+
+.ak-stack-align-start {
+  justify-items: start;
+}
+
+.ak-stack-align-center {
+  justify-items: center;
+}
+
+.ak-stack-align-stretch {
+  justify-items: stretch;
+}
+
+.ak-columns,
+.ak-grid,
+.ak-split-pane {
+  display: grid;
+  grid-template-columns: var(--ak-layout-columns);
+}
+
+.ak-columns > *,
+.ak-grid > *,
+.ak-split-pane > * {
+  min-width: 0;
+}
+
+.ak-gap-sm {
+  gap: 10px;
+}
+
+.ak-gap-md {
+  gap: 16px;
+}
+
+.ak-gap-lg {
+  gap: 24px;
+}
+
+.ak-frame {
+  min-width: 0;
+  border-radius: 8px;
+}
+
+.ak-comparison-item {
+  height: 100%;
+}
+
+.ak-comparison-item-body {
+  display: grid;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.ak-surface-none {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.ak-surface-plain {
+  border: 0;
+  background: var(--ak-surface);
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-surface-subtle {
+  border: 1px solid var(--ak-border);
+  background: var(--ak-surface-subtle);
+}
+
+.ak-surface-outlined {
+  border: 1px solid var(--ak-border);
+  background: var(--ak-surface);
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-padding-none {
+  padding: 0;
+}
+
+.ak-padding-sm {
+  padding: 10px;
+}
+
+.ak-padding-md {
+  padding: 16px;
+}
+
+.ak-padding-lg {
+  padding: 24px;
+}
+
+.ak-eyebrow {
+  margin: 0;
+  color: var(--ak-primary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ak-decision-grid,
+.ak-option-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 14px;
+}
+
+.ak-card {
+  min-width: 0;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 16px;
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-card h3 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.3;
+}
+
+.ak-card p {
+  margin: 10px 0 0;
+}
+
+.ak-card ul {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.ak-card li {
+  margin: 4px 0;
+}
+
+.ak-inline-text {
+  min-width: 0;
+}
+
+.ak-inline-text code,
+.ak-markdown-body code {
+  border-radius: 4px;
+  background: var(--ak-code-bg);
+  color: var(--ak-code-text);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.92em;
+  padding: 1px 4px;
+}
+
+.ak-inline-text a,
+.ak-markdown-body a {
+  color: var(--ak-primary-dark);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ak-markdown-body {
+  display: grid;
+  gap: 10px;
+  line-height: 1.6;
+}
+
+.ak-markdown-body--compact {
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.ak-markdown-body > * {
+  margin: 0;
+}
+
+.ak-markdown-body h1,
+.ak-markdown-body h2,
+.ak-markdown-body h3,
+.ak-markdown-body h4,
+.ak-markdown-body h5,
+.ak-markdown-body h6 {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.ak-markdown-body h1 {
+  font-size: 1.35em;
+}
+
+.ak-markdown-body h2 {
+  font-size: 1.22em;
+}
+
+.ak-markdown-body h3 {
+  font-size: 1.12em;
+}
+
+.ak-markdown-body h4 {
+  font-size: 1.02em;
+}
+
+.ak-markdown-body h5,
+.ak-markdown-body h6 {
+  color: var(--ak-muted);
+  font-size: 0.95em;
+}
+
+.ak-markdown-body ul,
+.ak-markdown-body ol {
+  display: grid;
+  gap: 4px;
+  margin: 2px 0 0;
+  padding-left: 20px;
+}
+
+.ak-markdown-body ul {
+  list-style: disc outside;
+}
+
+.ak-markdown-body ol {
+  list-style: decimal outside;
+}
+
+.ak-markdown-body li {
+  margin: 4px 0;
+  padding-left: 2px;
+}
+
+.ak-markdown-body blockquote {
+  border-left: 3px solid var(--ak-border);
+  color: var(--ak-muted);
+  padding-left: 12px;
+}
+
+.ak-code-block {
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-code-bg);
+  color: var(--ak-code-text);
+}
+
+.ak-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--ak-border);
+  background: var(--ak-surface-subtle);
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 8px 12px;
+}
+
+.ak-code-filename,
+.ak-code-language {
+  min-width: 0;
+}
+
+.ak-code-language {
+  flex: 0 0 auto;
+  text-transform: lowercase;
+}
+
+.ak-code-pre {
+  overflow: auto;
+  margin: 0;
+  padding: 10px 0;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.ak-code-pre code {
+  display: block;
+  min-width: max-content;
+}
+
+.ak-code-line,
+.ak-diff-line {
+  min-height: 1.55em;
+  padding: 0 12px;
+  white-space: pre;
+}
+
+.ak-code-line {
+  display: block;
+}
+
+.ak-code-line-numbered {
+  display: grid;
+  grid-template-columns: minmax(3.5ch, auto) 1fr;
+  gap: 12px;
+}
+
+.ak-code-line-highlighted {
+  background: var(--ak-code-highlight-bg);
+}
+
+.ak-code-line-number,
+.ak-diff-marker,
+.ak-diff-line-number {
+  color: var(--ak-muted);
+  text-align: right;
+  user-select: none;
+}
+
+.ak-code-line-content,
+.ak-diff-line-content {
+  min-width: 0;
+}
+
+.ak-diff-line {
+  display: grid;
+  grid-template-columns: minmax(3.5ch, auto) 2ch 1fr;
+  gap: 10px;
+}
+
+.ak-diff-line-add {
+  background: var(--ak-code-add-bg);
+}
+
+.ak-diff-line-add .ak-diff-marker {
+  color: var(--ak-good);
+}
+
+.ak-diff-line-remove {
+  background: var(--ak-code-remove-bg);
+}
+
+.ak-diff-line-remove .ak-diff-marker {
+  color: var(--ak-risk);
+}
+
+.ak-severity-badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 4px 8px;
+}
+
+.ak-severity-badge-info {
+  background: var(--ak-primary-subtle);
+  color: var(--ak-primary-dark);
+}
+
+.ak-severity-badge-low {
+  background: var(--ak-good-subtle);
+  color: var(--ak-good);
+}
+
+.ak-severity-badge-medium {
+  background: var(--ak-warn-subtle);
+  color: var(--ak-warn);
+}
+
+.ak-severity-badge-high {
+  background: var(--ak-risk-subtle);
+  color: var(--ak-risk);
+}
+
+.ak-severity-badge-critical {
+  background: var(--ak-risk);
+  color: var(--ak-primary-foreground);
+}
+
+.ak-callout {
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--ak-border);
+  border-left-width: 4px;
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 14px 16px;
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-callout-info {
+  border-left-color: var(--ak-primary);
+}
+
+.ak-callout-success {
+  border-left-color: var(--ak-good);
+  background: var(--ak-good-subtle);
+}
+
+.ak-callout-warning {
+  border-left-color: var(--ak-warn);
+  background: var(--ak-warn-subtle);
+}
+
+.ak-callout-danger {
+  border-left-color: var(--ak-risk);
+  background: var(--ak-risk-subtle);
+}
+
+.ak-comment-target-block {
+  position: relative;
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  border-radius: 8px;
+}
+
+.ak-comment-target-card {
+  height: 100%;
+}
+
+.ak-comment-target-card > .ak-comment-target-content,
+.ak-comment-target-card > .ak-comment-target-content > .ak-card {
+  height: 100%;
+}
+
+.ak-comment-target-content {
+  min-width: 0;
+}
+
+.ak-comment-target-block:hover > .ak-comment-target-content,
+.ak-comment-target-block:focus-within > .ak-comment-target-content,
+.ak-comment-target-has-comments > .ak-comment-target-content,
+.ak-comment-target-selected > .ak-comment-target-content {
+  border-radius: 8px;
+  box-shadow:
+    0 0 0 2px var(--ak-comment-accent),
+    0 0 0 6px var(--ak-comment-accent-subtle);
+}
+
+.ak-comment-target-block:has(.ak-comment-target-block:hover):not(.ak-comment-target-selected) > .ak-comment-target-content {
+  box-shadow: none;
+}
+
+.ak-comment-marker-anchor,
+.ak-comment-affordance-anchor {
+  position: absolute;
+  z-index: 3;
+  top: 8px;
+  right: -14px;
+  display: inline-grid;
+  justify-items: end;
+  width: max-content;
+}
+
+.ak-comment-affordance-anchor {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.ak-comment-affordance,
+.ak-comment-marker {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border: 1px solid var(--ak-border);
+  border-radius: 999px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 6px 9px;
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-comment-affordance {
+  background: var(--ak-surface);
+}
+
+.ak-comment-target-block:hover > .ak-comment-affordance-anchor,
+.ak-comment-target-block:focus-within > .ak-comment-affordance-anchor,
+.ak-comment-target-composer-open > .ak-comment-affordance-anchor {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.ak-comment-target-block:has(.ak-comment-target-block:hover):not(.ak-comment-target-selected) > .ak-comment-affordance-anchor {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ak-comment-target-block:has(.ak-comment-marker):hover > .ak-comment-affordance-anchor,
+.ak-comment-target-block:has(.ak-comment-marker):focus-within > .ak-comment-affordance-anchor {
+  right: 58px;
+}
+
+.ak-comment-marker {
+  background: var(--ak-comment-accent);
+  border-color: var(--ak-comment-accent);
+  color: var(--ak-primary-foreground);
+}
+
+.ak-comment-target-popover,
+.ak-comment-composer-popover {
+  display: none;
+  pointer-events: auto;
+}
+
+.ak-comment-target-label {
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ak-comment-panel {
+  position: absolute;
+  z-index: 2;
+  top: var(--ak-comment-panel-top, 0px);
+  left: 0;
+  display: grid;
+  gap: 10px;
+  width: 100%;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 12px;
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-comment-panel-active {
+  border-color: var(--ak-comment-accent);
+}
+
+.ak-unplaced-review-dock {
+  position: fixed;
+  z-index: 22;
+  right: 24px;
+  bottom: 78px;
+  display: grid;
+  justify-items: end;
+  gap: 10px;
+}
+
+.ak-unplaced-review-trigger {
+  border: 1px solid var(--ak-warn);
+  border-radius: 999px;
+  background: var(--ak-warn);
+  color: var(--ak-primary-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 8px 12px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
+}
+
+.ak-unplaced-review-sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
+  width: min(480px, calc(100vw - 32px));
+  border-left: 1px solid var(--ak-border);
+  background: var(--ak-surface);
+  padding: 20px;
+  box-shadow: -20px 0 60px rgb(0 0 0 / 18%);
+}
+
+.ak-unplaced-review-header {
+  align-items: start;
+}
+
+.ak-unplaced-review-list {
+  display: grid;
+  align-content: start;
+  align-items: start;
+  gap: 12px;
+  overflow: auto;
+}
+
+.ak-unplaced-review-card {
+  display: grid;
+  align-self: start;
+  width: 100%;
+  gap: 10px;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface-subtle);
+  padding: 12px;
+}
+
+.ak-unplaced-review-anchor {
+  margin: 0;
+  color: var(--ak-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.ak-comment-form {
+  display: grid;
+  gap: 8px;
+}
+
+.ak-comment-form-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ak-comment-close-button {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: var(--ak-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0;
+}
+
+.ak-comment-close-button:hover {
+  color: var(--ak-text);
+}
+
+.ak-comment-input {
+  min-height: 92px;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  font: inherit;
+  line-height: 1.5;
+  padding: 10px;
+}
+
+.ak-comment-input:focus {
+  border-color: var(--ak-comment-accent);
+  outline: 2px solid var(--ak-comment-accent-subtle);
+}
+
+.ak-comment-form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ak-comment-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ak-comment-item {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface-subtle);
+  padding: 10px;
+}
+
+.ak-comment-item-number {
+  color: var(--ak-comment-accent);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ak-comment-role-label {
+  width: max-content;
+  border: 1px solid var(--ak-border);
+  border-radius: 999px;
+  color: var(--ak-muted);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 3px 7px;
+}
+
+.ak-comment-item-assistant {
+  background: var(--ak-surface);
+}
+
+.ak-comment-item-assistant .ak-comment-role-label {
+  border-color: var(--ak-comment-accent-subtle);
+  color: var(--ak-comment-accent);
+}
+
+.ak-comment-item p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.ak-comment-edit-form {
+  display: grid;
+  gap: 8px;
+}
+
+.ak-comment-edit-input {
+  min-height: 72px;
+}
+
+.ak-comment-item-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ak-comment-item time {
+  color: var(--ak-muted);
+  font-size: 12px;
+}
+
+.ak-comment-edit-button {
+  border: 0;
+  background: transparent;
+  color: var(--ak-comment-accent);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0;
+}
+
+.ak-comment-edit-button:hover {
+  text-decoration: underline;
+}
+
+.ak-annotated-code {
+  display: grid;
+  gap: 12px;
+}
+
+.ak-annotation-list {
+  display: grid;
+  gap: 10px;
+}
+
+.ak-annotation {
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 12px;
+}
+
+.ak-annotation-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ak-annotation-line {
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ak-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ak-badge {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ak-badge-high {
+  background: var(--ak-good-subtle);
+  color: var(--ak-good);
+}
+
+.ak-badge-medium {
+  background: var(--ak-warn-subtle);
+  color: var(--ak-warn);
+}
+
+.ak-badge-low {
+  background: var(--ak-risk-subtle);
+  color: var(--ak-risk);
+}
+
+.ak-muted {
+  color: var(--ak-muted);
+}
+
+.ak-list-block {
+  margin-top: 12px;
+}
+
+.ak-list-block h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.ak-verdict,
+.ak-intent {
+  color: var(--ak-primary-dark);
+  font-weight: 700;
+}
+
+.ak-export-panel {
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 16px;
+}
+
+.ak-export-dock {
+  position: fixed;
+  z-index: 20;
+  right: 24px;
+  bottom: 24px;
+  display: grid;
+  justify-items: end;
+  gap: 10px;
+}
+
+.ak-comment-export {
+  right: 112px;
+}
+
+.ak-export-dock-trigger {
+  border: 1px solid var(--ak-primary);
+  border-radius: 999px;
+  background: var(--ak-primary);
+  color: var(--ak-primary-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 10px 14px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
+}
+
+.ak-export-drawer {
+  display: grid;
+  gap: 14px;
+  width: min(720px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 112px));
+  overflow: auto;
+  border: 1px solid var(--ak-border);
+  border-radius: 12px 12px 8px 8px;
+  background: var(--ak-surface);
+  padding: 16px;
+  box-shadow: 0 20px 60px rgb(0 0 0 / 22%);
+}
+
+.ak-export-header {
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 16px;
+}
+
+.ak-export-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.ak-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.ak-format-tabs {
+  min-width: 0;
+}
+
+.ak-format-tabs-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ak-format-trigger {
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 10px;
+}
+
+.ak-format-trigger:hover {
+  border-color: var(--ak-primary);
+}
+
+.ak-format-trigger[data-state="active"] {
+  background: var(--ak-primary-subtle);
+  color: var(--ak-primary-dark);
+}
+
+.ak-button {
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 10px;
+}
+
+.ak-button:hover {
+  border-color: var(--ak-primary);
+}
+
+.ak-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ak-button:disabled:hover {
+  border-color: var(--ak-border);
+}
+
+.ak-button-active {
+  background: var(--ak-primary-subtle);
+  color: var(--ak-primary-dark);
+}
+
+.ak-button-primary {
+  background: var(--ak-primary);
+  border-color: var(--ak-primary);
+  color: var(--ak-primary-foreground);
+}
+
+.ak-export-output {
+  overflow: auto;
+  max-height: 360px;
+  margin: 0;
+  border-radius: 8px;
+  background: var(--ak-output-bg);
+  color: var(--ak-output-text);
+  padding: 14px;
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 1548px) {
+  .ak-shell:has(.ak-review-layout-active) {
+    width: min(var(--ak-review-content-width), calc(100% - 32px));
+  }
+
+  .ak-review-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .ak-review-rail {
+    display: none;
+  }
+
+  .ak-comment-panel {
+    position: static;
+    width: 100%;
+  }
+
+  .ak-comment-target-popover,
+  .ak-comment-composer-popover {
+    position: absolute;
+    z-index: 4;
+    top: calc(100% + 8px);
+    right: 0;
+    display: none;
+    width: min(360px, calc(100vw - 48px));
+    max-height: min(420px, calc(100vh - 96px));
+    overflow: auto;
+    border: 1px solid var(--ak-border);
+    border-radius: 8px;
+    background: var(--ak-surface);
+    padding: 12px;
+    box-shadow: 0 14px 42px rgb(0 0 0 / 16%);
+  }
+
+  .ak-comment-target-popover-open .ak-comment-target-popover {
+    display: grid;
+    gap: 10px;
+  }
+
+  .ak-comment-target-composer-open .ak-comment-composer-popover {
+    display: grid;
+    gap: 10px;
+  }
+
+  .ak-collapse-lg {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 720px) {
+  .ak-shell {
+    width: min(100% - 20px, 1120px);
+    padding-top: 20px;
+  }
+
+  .ak-export-dock {
+    right: 10px;
+    bottom: 10px;
+  }
+
+  .ak-comment-export {
+    right: 96px;
+  }
+
+  .ak-export-drawer {
+    width: calc(100vw - 20px);
+    max-height: calc(100vh - 86px);
+  }
+
+  .ak-export-header {
+    grid-template-columns: 1fr;
+  }
+
+  .ak-actions {
+    justify-content: flex-start;
+  }
+
+  .ak-collapse-md {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 540px) {
+  .ak-collapse-sm {
+    grid-template-columns: 1fr !important;
+  }
+}