--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/src/public/mjj-modal.css	Sat Aug 08 02:08:08 2026 -0700
@@ -0,0 +1,360 @@
+:where(mjj-content-modal, mjj-window-modal) {
+  display: contents;
+}
+
+:where(mjj-content-modal, mjj-window-modal) dialog {
+  --mjj-modal-border: var(--zenbu-sys-color-border-strong);
+  --mjj-modal-shadow:
+    inset 0 0 0 var(--zenbu-sys-stroke-width)
+      var(--zenbu-sys-color-action-primary-border),
+    var(--zenbu-sys-space-control)
+      var(--zenbu-sys-space-control)
+      0
+      var(--zenbu-sys-color-danger-border),
+    var(--zenbu-sys-shadow-dialog);
+  box-sizing: border-box;
+  width: min(
+    calc(100vw - var(--zenbu-sys-space-container)),
+    var(--mjj-modal-width)
+  );
+  max-width: none;
+  max-height: calc(100dvh - var(--zenbu-sys-space-container));
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: var(--zenbu-sys-stroke-width) solid var(--mjj-modal-border);
+  border-radius: 0;
+  background: var(--zenbu-sys-color-surface-raised);
+  color: var(--zenbu-sys-color-text-primary);
+  box-shadow: var(--mjj-modal-shadow);
+}
+
+:where(mjj-content-modal, mjj-window-modal) dialog::backdrop {
+  background: var(--zenbu-sys-color-scrim);
+  backdrop-filter: blur(var(--zenbu-sys-stroke-width-emphasis));
+}
+
+:where(mjj-content-modal, mjj-window-modal) dialog[open] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  animation:
+    mjj-modal-enter
+    var(--zenbu-sys-motion-duration-layout)
+    var(--zenbu-sys-motion-ease-enter);
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-header] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zenbu-sys-space-group);
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-heading] {
+  display: grid;
+  gap: var(--zenbu-sys-space-icon-label);
+  min-width: 0;
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-kicker] {
+  margin: 0;
+  color: var(--zenbu-sys-color-warning-foreground);
+  font-size: var(--zenbu-sys-font-size-xs);
+  font-weight: var(--zenbu-sys-font-weight-strong);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-title] {
+  margin: 0;
+  color: var(--zenbu-sys-color-action-primary-background);
+  font-family: var(--zenbu-sys-type-title-family);
+  font-size: var(--zenbu-sys-type-title-size);
+  font-weight: var(--zenbu-sys-type-title-weight);
+  line-height: var(--zenbu-sys-type-title-line-height);
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions],
+:where(mjj-content-modal, mjj-window-modal) [data-modal-footer-actions] {
+  display: flex;
+  align-items: center;
+  gap: var(--zenbu-sys-space-control);
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions] {
+  justify-content: flex-end;
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zenbu-sys-space-group);
+}
+
+:where(mjj-content-modal, mjj-window-modal) [data-modal-footer] > p {
+  margin: 0;
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-sm);
+}
+
+:where(mjj-content-modal, mjj-window-modal) zen-scroll-area[data-cyber-scroll] {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: scroll;
+  border: 0;
+  border-radius: 0;
+  background: var(--zenbu-sys-color-surface-default);
+  scrollbar-color:
+    var(--zenbu-sys-color-action-primary-background)
+    var(--zenbu-sys-color-surface-sunken);
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+:where(mjj-content-modal, mjj-window-modal)
+  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar {
+  width: var(--zenbu-sys-space-control);
+  height: var(--zenbu-sys-space-control);
+}
+
+:where(mjj-content-modal, mjj-window-modal)
+  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-track {
+  border-inline-start: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-info-border);
+  background: var(--zenbu-sys-color-surface-sunken);
+}
+
+:where(mjj-content-modal, mjj-window-modal)
+  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb {
+  border: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-surface-sunken);
+  border-radius: 0;
+  background: var(--zenbu-sys-color-action-primary-background);
+}
+
+:where(mjj-content-modal, mjj-window-modal)
+  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb:hover {
+  background: var(--zenbu-sys-color-danger-foreground);
+}
+
+mjj-content-modal {
+  --mjj-modal-width: 54rem;
+}
+
+mjj-content-modal dialog {
+  --mjj-modal-border: var(--zenbu-sys-color-action-primary-border);
+}
+
+mjj-content-modal [data-modal-header] {
+  padding:
+    var(--zenbu-sys-padding-xl)
+    var(--zenbu-sys-padding-xl)
+    var(--zenbu-sys-padding-lg);
+  border-bottom: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-danger-border);
+  background: var(--zenbu-sys-color-surface-raised);
+}
+
+mjj-content-modal [data-modal-body] {
+  min-height: 0;
+  padding: 0;
+  overflow: auto;
+  background: var(--zenbu-sys-color-surface-default);
+  color: var(--zenbu-sys-color-text-primary);
+  font-family: var(--zenbu-sys-type-reading-family);
+  font-size: var(--zenbu-sys-type-reading-size);
+  line-height: var(--zenbu-sys-type-reading-line-height);
+}
+
+mjj-content-modal [data-modal-article] {
+  display: grid;
+  gap: var(--zenbu-sys-space-content);
+  padding:
+    var(--zenbu-sys-padding-xl)
+    max(
+      var(--zenbu-sys-padding-xl),
+      calc((100% - 42rem) / 2)
+    );
+}
+
+mjj-content-modal [data-modal-article] > :where(
+  h2,
+  h3,
+  p,
+  blockquote,
+  pre,
+  ul,
+  ol
+) {
+  margin-block: 0;
+}
+
+mjj-content-modal [data-modal-body] :where(h2, h3) {
+  color: var(--zenbu-sys-color-action-primary-background);
+  font-family: var(--zenbu-sys-font-family-ui);
+}
+
+mjj-content-modal [data-modal-body] [data-modal-description] {
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-type-body-large-size);
+  line-height: var(--zenbu-sys-type-body-large-line-height);
+}
+
+mjj-content-modal [data-modal-body] blockquote {
+  padding:
+    var(--zenbu-sys-padding-md)
+    var(--zenbu-sys-padding-lg);
+  border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
+    var(--zenbu-sys-color-danger-border);
+  background: var(--zenbu-sys-color-surface-sunken);
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+mjj-content-modal [data-modal-body] pre {
+  padding: var(--zenbu-sys-padding-lg);
+  overflow: auto;
+  border: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-info-border);
+  border-radius: 0;
+  background: var(--zenbu-sys-color-surface-sunken);
+  font-family: var(--zenbu-sys-type-code-family);
+  font-size: var(--zenbu-sys-type-code-size);
+  line-height: var(--zenbu-sys-type-code-line-height);
+}
+
+mjj-content-modal [data-modal-footer] {
+  padding:
+    var(--zenbu-sys-padding-md)
+    var(--zenbu-sys-padding-xl);
+  border-top: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-danger-border);
+  background: var(--zenbu-sys-color-surface-raised);
+}
+
+mjj-window-modal {
+  --mjj-modal-width: 72rem;
+}
+
+mjj-window-modal dialog {
+  --mjj-modal-border: var(--zenbu-sys-color-info-border);
+  height: min(82dvh, 48rem);
+  border-radius: 0;
+}
+
+mjj-window-modal [data-modal-header] {
+  padding:
+    var(--zenbu-sys-padding-md)
+    var(--zenbu-sys-padding-lg);
+  border-bottom: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-action-primary-border);
+  background: var(--zenbu-sys-color-surface-sunken);
+  box-shadow: var(--zenbu-sys-shadow-subtle);
+}
+
+mjj-window-modal [data-modal-body] {
+  min-width: 0;
+  min-height: 0;
+  padding: var(--zenbu-sys-padding-lg);
+  overflow: auto;
+  background: var(--zenbu-sys-color-surface-default);
+}
+
+mjj-window-modal [data-modal-body][data-modal-layout="split"] {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
+  gap: var(--zenbu-sys-space-group);
+}
+
+mjj-window-modal [data-modal-pane] {
+  min-width: 0;
+  min-height: 0;
+  padding: var(--zenbu-sys-padding-lg);
+  overflow: auto;
+  border: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-info-border);
+  border-radius: 0;
+  background: var(--zenbu-sys-color-surface-sunken);
+}
+
+mjj-window-modal [data-modal-pane="primary"] {
+  border-color: var(--zenbu-sys-color-action-primary-border);
+  background: var(--zenbu-sys-color-surface-raised);
+  box-shadow:
+    var(--zenbu-sys-space-icon-label)
+    var(--zenbu-sys-space-icon-label)
+    0
+    var(--zenbu-sys-color-danger-border);
+}
+
+mjj-window-modal [data-modal-footer] {
+  padding:
+    var(--zenbu-sys-padding-sm)
+    var(--zenbu-sys-padding-lg);
+  border-top: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-action-primary-border);
+  background: var(--zenbu-sys-color-surface-sunken);
+}
+
+@keyframes mjj-modal-enter {
+  0% {
+    clip-path: inset(49% 45%);
+    opacity: 0.72;
+    transform: scaleX(0.12);
+  }
+  45% {
+    clip-path: inset(49% 0);
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  100% {
+    clip-path: inset(0);
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@media (max-width: 42rem) {
+  :where(mjj-content-modal, mjj-window-modal) dialog {
+    width: calc(100vw - var(--zenbu-sys-space-group));
+    max-height: calc(100dvh - var(--zenbu-sys-space-group));
+  }
+
+  mjj-content-modal [data-modal-header],
+  mjj-content-modal [data-modal-footer] {
+    padding-inline: var(--zenbu-sys-padding-lg);
+  }
+
+  mjj-content-modal [data-modal-body] {
+    padding: 0;
+  }
+
+  mjj-content-modal [data-modal-article] {
+    padding: var(--zenbu-sys-padding-lg);
+  }
+
+  mjj-window-modal dialog {
+    height: calc(100dvh - var(--zenbu-sys-space-group));
+  }
+
+  mjj-window-modal [data-modal-body][data-modal-layout="split"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(mjj-content-modal, mjj-window-modal) dialog[open] {
+    animation: none;
+  }
+}