@open-press/core 0.3.0

package/src/styles/openpress/public-viewer.css

@@ -0,0 +1,983 @@
+.openpress-public-viewer.reader-app,
+.openpress-public-viewer.openpress-reader-app {
+  width: 100%;
+  height: 100dvh;
+  min-height: 100dvh;
+  --openpress-public-nav-min-width: 340px;
+  --openpress-public-nav-max-width: 420px;
+  --openpress-public-page-width: min(var(--openpress-page-width), 860px);
+  --openpress-public-nav-width: clamp(var(--openpress-public-nav-min-width), calc(100vw - var(--openpress-public-page-width) - 48px), var(--openpress-public-nav-max-width));
+  --openpress-public-nav-max-height: 960px;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: var(--openpress-public-nav-width) minmax(0, 1fr);
+  grid-template-areas: "left main";
+  overflow: hidden;
+  background: #141414;
+}
+
+.openpress-dev-public-viewer {
+  position: relative;
+}
+
+.openpress-public-viewer .openpress-public-viewer__stage {
+  min-width: 0;
+  min-height: 0;
+  container-type: inline-size;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: pan-y pinch-zoom;
+  background: #141414;
+}
+
+.openpress-public-viewer .openpress-dev-main-content {
+  grid-area: main;
+}
+
+.openpress-public-viewer .reader-stage {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y pinch-zoom;
+}
+
+.openpress-public-viewer .reader-pages {
+  padding: 30px 24px 56px;
+}
+
+.openpress-public-viewer .openpress-html-page {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 auto 12px;
+}
+
+.openpress-public-viewer .openpress-html-page__html .reader-page {
+  width: var(--openpress-public-page-width);
+  height: calc(var(--openpress-public-page-width) * var(--openpress-page-height-ratio, 1.4142857143));
+  aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+}
+
+.openpress-public-viewer .reader-side-nav {
+  position: relative;
+  z-index: 2;
+  grid-area: left;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+/* FAB / scrim / drawer-close: hidden on desktop, shown via media query */
+.openpress-public-fab,
+.openpress-public-scrim,
+.openpress-public-drawer-close {
+  display: none;
+}
+
+
+.openpress-public-viewer .openpress-public-navigation {
+  align-self: center;
+  min-width: 0;
+  height: min(100vh, var(--openpress-public-nav-max-height));
+  max-height: 100vh;
+  margin-top: 0;
+  border-right: 0;
+  border-left: 0;
+  overflow: hidden;
+  background: #141414;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.openpress-public-viewer .openpress-dev-public-navigation {
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+}
+
+.openpress-public-viewer[data-active-workspace="project"] .openpress-dev-public-navigation {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.openpress-public-identity {
+  display: grid;
+  gap: 8px;
+  padding: 22px 22px 16px;
+}
+
+.openpress-public-identity > span {
+  color: rgb(160 166 173 / 42%);
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.openpress-public-identity strong {
+  display: grid;
+  gap: 4px;
+  overflow: visible;
+  max-width: none;
+  color: rgb(242 242 240 / 92%);
+  text-wrap: balance;
+  word-break: keep-all;
+}
+
+.openpress-public-title-main {
+  color: rgb(242 242 240 / 94%);
+  font-family: var(--openpress-font-serif);
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 1.05;
+}
+
+.openpress-public-title-sub {
+  max-width: 15em;
+  color: rgb(214 218 222 / 78%);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.42;
+}
+
+.openpress-public-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 0 22px 18px;
+}
+
+.openpress-public-action-section {
+  display: grid;
+  gap: 8px;
+  padding: 0 22px 16px;
+}
+
+.openpress-public-action-heading {
+  color: rgb(160 166 173 / 46%);
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.openpress-public-action-list {
+  display: grid;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+}
+
+.openpress-public-action-entry {
+  display: grid;
+  grid-template-columns: 15px minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  gap: 8px;
+  border: 0 !important;
+  border-bottom: 1px solid rgb(255 255 255 / 7%) !important;
+  padding: 8px 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: rgb(198 204 210 / 76%);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.openpress-public-action-entry:hover:not(:disabled) {
+  color: rgb(242 242 240 / 92%);
+}
+
+.openpress-public-action-entry:disabled {
+  cursor: progress;
+  opacity: 0.62;
+}
+
+.openpress-public-action-entry svg {
+  width: 13px;
+  height: 13px;
+  color: currentColor;
+  opacity: 0.78;
+}
+
+.openpress-public-action-entry__label {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-public-action-entry .openpress-dev-pdf-status {
+  justify-self: end;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-public-action-entry .openpress-dev-deploy-status {
+  justify-self: end;
+}
+
+.openpress-public-action-entry[data-openpress-deploy-status="dirty"] {
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-public-export-button {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  justify-content: flex-start;
+  gap: 6px;
+  border: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  box-shadow: none;
+  color: rgb(198 204 210 / 68%);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  opacity: 0.88;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.openpress-public-export-button:hover:not(:disabled) {
+  color: rgb(242 242 240 / 88%);
+  opacity: 1;
+}
+
+.openpress-public-export-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.openpress-public-export-button svg {
+  width: 12px;
+  height: 12px;
+  color: currentColor;
+  opacity: 0.8;
+}
+
+.openpress-public-export-button:focus-visible {
+  outline: 1px solid rgb(242 242 240 / 28%);
+  outline-offset: 4px;
+}
+
+.openpress-view-mode-section {
+  padding-bottom: 18px;
+}
+
+.openpress-view-mode-toggle {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.openpress-view-mode-toggle button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 34px;
+  border: 1px solid rgb(255 255 255 / 11%);
+  border-radius: 0;
+  padding: 0 10px;
+  background: rgb(255 255 255 / 3%);
+  color: rgb(198 204 210 / 72%);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+
+.openpress-view-mode-toggle button:hover:not(:disabled),
+.openpress-view-mode-toggle button.is-active {
+  border-color: rgb(242 242 240 / 38%);
+  background: rgb(242 242 240 / 10%);
+  color: rgb(242 242 240 / 95%);
+}
+
+.openpress-view-mode-toggle button:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.openpress-view-mode-toggle svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] {
+  --openpress-reading-width: min(100%, 880px);
+  --openpress-reading-measure: min(100%, 760px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-public-viewer__stage,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-stage {
+  background: var(--openpress-color-document);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-pages {
+  align-items: stretch;
+  width: 100%;
+  max-width: none;
+  gap: 0;
+  padding: 0;
+  background: var(--openpress-color-document);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-html-page {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  scroll-margin-top: 0;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-html-page__html {
+  width: 100%;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-html-page__html .reader-page,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-html-page__html .reader-page--cover,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .openpress-html-page__html .reader-page--back-cover {
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+  margin: 0;
+  overflow: visible;
+  box-shadow: none;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content {
+  background: transparent;
+  background-image: none;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc {
+  min-height: min(100svh, 980px);
+  color: var(--toc-ink, #f7f9fb);
+  background-color: #1f2d3d;
+  background-image: none;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-frame,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-frame {
+  display: block;
+  width: var(--openpress-reading-width);
+  height: auto;
+  min-height: 0;
+  margin: 0 auto;
+  padding: clamp(34px, 6vw, 72px) clamp(22px, 5vw, 48px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-header,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-footer,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-header,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-footer {
+  display: none;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-body,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-body {
+  width: var(--openpress-reading-measure);
+  min-height: 0;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--cover,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--back-cover,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--chapter-opener {
+  width: 100%;
+  min-height: min(100svh, 980px);
+  max-height: none;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--cover,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--back-cover {
+  padding: clamp(42px, 9vw, 96px) clamp(28px, 7vw, 86px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .cover-main,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .back-cover-main {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  width: min(100%, 640px);
+  max-width: none;
+  margin-top: auto;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .cover-meta,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .back-cover-meta,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .cover-byline,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .back-cover-byline {
+  position: relative;
+  inset: auto;
+  right: auto;
+  left: auto;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .cover-byline,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .back-cover-byline {
+  margin-top: clamp(42px, 8vw, 82px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--cover .chapter-opener-illustration,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--back-cover .chapter-opener-illustration {
+  position: relative;
+  top: auto;
+  right: auto;
+  width: min(100%, 420px);
+  margin: clamp(42px, 9vw, 110px) auto clamp(26px, 6vw, 56px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--chapter-opener {
+  display: grid;
+  align-content: center;
+  padding: clamp(42px, 9vw, 96px) clamp(28px, 7vw, 86px);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content h2 {
+  margin-top: 0;
+  font-size: clamp(2.05rem, 5vw, 3.8rem);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content h3 {
+  margin-top: clamp(28px, 5vw, 48px);
+  font-size: clamp(1.28rem, 3.2vw, 1.78rem);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content h4 {
+  margin-top: clamp(22px, 4vw, 34px);
+  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content p,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content li {
+  font-size: clamp(1rem, 2.55vw, 1.12rem);
+  line-height: 1.9;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content pre {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  white-space: pre;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content pre code {
+  min-width: max-content;
+  white-space: pre;
+  font-size: clamp(0.86rem, 2.45vw, 1rem);
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  overflow: visible;
+  -webkit-overflow-scrolling: touch;
+  white-space: normal;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure {
+  width: min(100%, 960px);
+  max-width: none;
+  margin-right: auto;
+  margin-left: auto;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure img,
+.openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure svg {
+  max-width: 100%;
+  height: auto;
+}
+
+@media (max-width: 899px) {
+  .openpress-public-viewer[data-openpress-view-mode="reading"] {
+    --openpress-reading-edge: 18px;
+    --openpress-reading-full-bleed: calc(100dvw - (var(--openpress-reading-edge) * 2));
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-frame,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-frame {
+    width: 100%;
+    padding-inline: var(--openpress-reading-edge);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content .page-body,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--toc .page-body {
+    width: 100%;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure {
+    width: var(--openpress-reading-full-bleed);
+    max-width: var(--openpress-reading-full-bleed);
+    margin-inline: calc((100% - var(--openpress-reading-full-bleed)) / 2);
+    border-color: var(--openpress-color-line);
+    background: var(--openpress-color-block);
+    box-sizing: border-box;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table {
+    display: block;
+    padding-bottom: 8px;
+    border: 1px solid var(--openpress-color-line-strong);
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+    box-shadow: inset -18px 0 18px -22px rgb(31 45 61 / 40%);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table caption {
+    position: sticky;
+    left: 0;
+    display: block;
+    width: max-content;
+    min-width: 100%;
+    padding: 7px 0 0;
+    background: var(--openpress-color-block);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table th,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content table td {
+    min-width: 116px;
+    padding: 9px 10px;
+    white-space: nowrap;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure {
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-shadow: inset -18px 0 18px -22px rgb(31 45 61 / 42%);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure.openpress-component-frame {
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure.chart-frame {
+    padding: 12px;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .reader-page--content figure figcaption {
+    position: sticky;
+    left: 0;
+    width: max-content;
+    min-width: 100%;
+    margin-top: 10px;
+    padding-top: 2px;
+    background: var(--openpress-color-block);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .linked-list-diagram__panel,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .linked-stack-push__canvas {
+    overflow: visible;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .linked-list-diagram__svg,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .linked-stack-push__svg,
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .chart-frame svg {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .list-operation-demo__canvas {
+    overflow-x: auto;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="reading"] .list-operation-demo__chain {
+    min-width: max-content;
+  }
+}
+
+.openpress-dev-pdf-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  color: rgb(198 204 210 / 70%);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.openpress-dev-pdf-status__spinner {
+  width: 10px;
+  height: 10px;
+  flex: 0 0 auto;
+  border: 1px solid rgb(240 182 76 / 28%);
+  border-top-color: rgb(240 182 76 / 90%);
+  border-radius: 50%;
+  animation: openpress-pdf-status-spin 0.8s linear infinite;
+}
+
+.openpress-dev-pdf-status[data-openpress-pdf-status="opening"] {
+  color: rgb(110 231 160 / 82%);
+}
+
+.openpress-dev-pdf-status[data-openpress-pdf-status="opening"] .openpress-dev-pdf-status__spinner {
+  border-color: rgb(110 231 160 / 30%);
+  border-top-color: rgb(110 231 160 / 92%);
+}
+
+.openpress-dev-pdf-status[data-openpress-pdf-status="failed"] {
+  color: rgb(248 113 113 / 86%);
+}
+
+.openpress-dev-pdf-status[data-openpress-pdf-status="failed"] .openpress-dev-pdf-status__spinner {
+  border-color: rgb(248 113 113 / 30%);
+  border-top-color: rgb(248 113 113 / 92%);
+  animation: none;
+}
+
+@keyframes openpress-pdf-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.openpress-dev-public-tools {
+  display: grid;
+  gap: 10px;
+  padding: 0 22px 18px;
+}
+
+.openpress-dev-workspace-switcher {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+}
+
+.openpress-dev-project-tabs {
+  display: grid;
+  width: fit-content;
+  grid-template-columns: repeat(2, max-content);
+  gap: 18px;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+}
+
+.openpress-dev-workspace-switcher button,
+.openpress-dev-project-tabs button,
+.openpress-dev-deploy-button {
+  position: relative;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: rgb(180 186 193 / 72%);
+  font: inherit;
+  cursor: pointer;
+}
+
+.openpress-dev-workspace-switcher button,
+.openpress-dev-project-tabs button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 0 0 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-align: left;
+}
+
+.openpress-dev-workspace-switcher button:hover,
+.openpress-dev-workspace-switcher button.is-active,
+.openpress-dev-project-tabs button:hover,
+.openpress-dev-project-tabs button[aria-pressed="true"],
+.openpress-dev-deploy-button:hover:not(:disabled) {
+  color: rgb(242 242 240 / 94%);
+  background: transparent;
+}
+
+.openpress-dev-workspace-switcher button::after,
+.openpress-dev-project-tabs button::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 1px;
+  background: transparent;
+  content: "";
+}
+
+.openpress-dev-workspace-switcher button.is-active::after,
+.openpress-dev-project-tabs button[aria-pressed="true"]::after {
+  background: rgb(242 242 240 / 78%);
+}
+
+.openpress-dev-workspace-switcher svg,
+.openpress-dev-project-tabs svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: currentColor;
+  opacity: 0.78;
+}
+
+.openpress-dev-workspace-switcher span,
+.openpress-dev-project-tabs span {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-dev-deploy-button {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  color: rgb(240 182 76 / 80%);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+}
+
+.openpress-dev-deploy-button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.openpress-dev-deploy-button:disabled {
+  cursor: progress;
+  opacity: 0.58;
+}
+
+.openpress-dev-deploy-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: rgb(150 156 163 / 68%);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.openpress-dev-deploy-status__dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: rgb(150 156 163 / 62%);
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 12%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="online"] {
+  color: rgb(110 231 160 / 86%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="online"] .openpress-dev-deploy-status__dot {
+  background: #6ee7a0;
+  box-shadow: 0 0 0 1px rgb(110 231 160 / 28%), 0 0 14px rgb(110 231 160 / 18%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="deploying"] {
+  color: rgb(240 182 76 / 88%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="deploying"] .openpress-dev-deploy-status__dot {
+  background: #f0b64c;
+  box-shadow: 0 0 0 1px rgb(240 182 76 / 24%), 0 0 14px rgb(240 182 76 / 16%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="dirty"] {
+  color: rgb(240 182 76 / 90%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="dirty"] .openpress-dev-deploy-status__dot {
+  background: #f0b64c;
+  box-shadow: 0 0 0 1px rgb(240 182 76 / 24%), 0 0 14px rgb(240 182 76 / 16%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="failed"] {
+  color: rgb(248 113 113 / 88%);
+}
+
+.openpress-dev-deploy-status[data-openpress-deploy-status="failed"] .openpress-dev-deploy-status__dot {
+  background: #f87171;
+  box-shadow: 0 0 0 1px rgb(248 113 113 / 24%), 0 0 14px rgb(248 113 113 / 16%);
+}
+
+.openpress-dev-panel-section {
+  padding: 0 22px 22px;
+  color: rgb(170 176 183 / 72%);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.openpress-dev-panel-section p {
+  margin: 0;
+}
+
+.openpress-public-viewer .openpress-panel-section--current {
+  border-bottom: 0;
+  padding: 14px 0 20px;
+}
+
+.openpress-public-viewer .openpress-current-page-card {
+  gap: 6px;
+  padding: 0 22px;
+}
+
+.openpress-public-viewer .openpress-current-page-card__number {
+  color: rgb(242 242 240 / 84%);
+  font-size: 18px;
+  letter-spacing: 0.05em;
+}
+
+.openpress-public-viewer .openpress-current-page-card__prefix {
+  color: rgb(160 166 173 / 58%);
+  font-size: 10px;
+}
+
+.openpress-public-viewer .openpress-current-page-card__number .sep,
+.openpress-public-viewer .openpress-current-page-card__number [data-openpress-total-pages] {
+  font-size: 12px;
+}
+
+.openpress-public-viewer .openpress-current-page-card__title {
+  color: rgb(155 161 168 / 74%);
+  font-size: 11px;
+}
+
+.openpress-public-viewer .openpress-current-page-card__progress {
+  background: rgb(255 255 255 / 7%);
+}
+
+.openpress-public-viewer .openpress-current-page-card__progress span {
+  background: rgb(242 242 240 / 46%);
+}
+
+.openpress-public-viewer .openpress-panel-section--bookmarks {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  min-height: 0;
+  padding-top: 0;
+  overflow: hidden;
+}
+
+.openpress-public-viewer .openpress-panel-heading {
+  padding: 0 22px 10px;
+  color: rgb(160 166 173 / 52%);
+  font-size: 9px;
+}
+
+.openpress-public-viewer .reader-side-nav .reader-bookmarks {
+  min-height: 0;
+  overflow: auto;
+  padding: 0 22px 22px;
+}
+
+.openpress-public-viewer .reader-bookmarks-rail {
+  display: none;
+}
+
+.openpress-public-viewer .bookmark-item {
+  column-gap: 8px;
+  color: rgb(150 156 163 / 72%);
+}
+
+.openpress-public-viewer .bookmark-item:hover,
+.openpress-public-viewer .bookmark-item.is-active {
+  color: rgb(242 242 240 / 92%);
+}
+
+.openpress-public-viewer .bookmark-h2 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  padding: 8px 0 7px;
+}
+
+.openpress-public-viewer .bookmark-title {
+  display: block;
+  overflow: visible;
+  font-family: var(--openpress-font-serif);
+  white-space: normal;
+  -webkit-line-clamp: unset;
+}
+
+.openpress-public-viewer .bookmark-h3 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  column-gap: 8px;
+  padding: 4px 0 4px 32px;
+  font-size: 14px;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-item {
+  column-gap: 8px;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h2 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  padding: 8px 0 7px;
+  font-family: var(--openpress-font-serif);
+  font-size: 14px;
+  line-height: 1.42;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h3 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  column-gap: 8px;
+  padding: 4px 0 4px 32px;
+  font-family: var(--openpress-font-serif);
+  font-size: 14px;
+  line-height: 1.42;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h4 {
+  grid-template-columns: 36px minmax(0, 1fr);
+  column-gap: 8px;
+  padding: 3px 0 3px 52px;
+  font-family: var(--openpress-font-serif);
+  font-size: 13px;
+  line-height: 1.38;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-title {
+  display: block;
+  overflow: visible;
+  font-family: var(--openpress-font-serif);
+  letter-spacing: 0;
+  -webkit-line-clamp: unset;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h3 .bookmark-index {
+  font-size: 12px;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h4 .bookmark-index {
+  font-size: 11px;
+}