:root {
  --bg: #f7f3ec;
  --bg-header: rgba(243, 237, 225, 0.78);
  --surface: #fbf8f3;
  --surface-raised: rgba(255,255,255,0.76);
  --surface-soft: #f4ede3;
  --surface-soft-2: #efe7db;
  --text: #1d1a17;
  --muted: #776d61;
  --muted-strong: #61584e;
  --border: #d8cfc3;
  --border-strong: #cdbfae;
  --accent: #181614;
  --blue-line: rgba(108, 137, 187, 0.52);
  --blue-fill: rgba(108, 137, 187, 0.10);
  --danger-line: rgba(166, 91, 78, 0.32);
  --danger-fill: rgba(166, 91, 78, 0.055);
  --shadow: 0 20px 48px rgba(16, 13, 10, 0.035);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 14px;
  --gap-4: 18px;
  --gap-5: 24px;
  --studio-width: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}
button, input, textarea, select, a, pre { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.shell { width: min(calc(100% - 36px), var(--studio-width)); margin: 0 auto; }
.hidden-input { position: absolute; left: -9999px; width: 1px; height: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; border-radius: 999px; padding: 10px 14px; z-index: 200; }

.page { min-height: 100vh; }
.masthead {
  background: linear-gradient(var(--bg-header), var(--bg-header));
  border-bottom: 1px solid rgba(208,198,183,0.9);
}
.masthead-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4); }
.masthead-title { font-size: 1.05rem; letter-spacing: -0.02em; }
.masthead-actions { display: flex; align-items: center; gap: 12px; }
.header-link,
.toolbar-pill,
.tool-chip,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.64);
  color: var(--text);
  line-height: 1;
  text-decoration: none;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.header-link { min-height: 48px; padding: 0 22px; background: rgba(255,255,255,0.22); color: var(--muted-strong); }
.toolbar-pill:hover,
.toolbar-pill:focus-visible,
.tool-chip:hover,
.tool-chip:focus-visible,
.button:hover,
.button:focus-visible,
.header-link:hover,
.header-link:focus-visible { transform: translateY(-1px); background: rgba(255,255,255,0.88); outline: none; }
.toolbar-pill-primary,
.button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.toolbar-pill-primary:hover,
.toolbar-pill-primary:focus-visible,
.button-primary:hover,
.button-primary:focus-visible { background: #10100f; border-color: #10100f; }
.button-secondary { background: rgba(255,255,255,0.58); }
.button-small { min-height: 36px; padding: 0 14px; font-size: 0.94rem; }
.button-danger-subtle { border-color: var(--danger-line); background: var(--danger-fill); color: #7b4c42; }
.button-danger-subtle:hover,
.button-danger-subtle:focus-visible { background: rgba(166,91,78,0.10); border-color: rgba(166,91,78,0.44); }
.tool-chip { min-height: 44px; padding-inline: 18px; background: rgba(255,255,255,0.78); }

.studio { padding: 32px 0 78px; }
.studio-shell { display: grid; gap: var(--gap-4); width: min(100%, 1060px); margin: 0 auto; }
.studio-bar { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-5); }
.studio-heading { min-width: 0; }
h1 { font-size: clamp(2.6rem, 5.5vw, 4.15rem); line-height: .92; letter-spacing: -0.075em; font-weight: 200; white-space: nowrap; }
.studio-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-2); }
.card { background: linear-gradient(180deg, rgba(250,247,241,0.96), rgba(247,243,235,0.96)); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.checkpoint-studio { padding: 16px; }
.studio-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 18px; align-items: start; }
.studio-rail { display: grid; gap: 16px; align-content: start; }
.studio-canvas-column { min-width: 0; }

.rail-section { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(250,247,241,0.78)); }
.rail-section-type { padding: 12px 14px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); }
.rail-label,
.section-kicker { font-size: 0.76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.rail-field,
.drawer-field,
.hotspot-selected-field,
.option-feedback-field { display: grid; gap: 8px; }
.rail-field span,
.drawer-field-label,
.hotspot-selected-field > span,
.option-feedback-field > span,
.rail-note-field > span { color: var(--muted-strong); font-size: 0.9rem; }
.rail-field-compact { gap: 6px; }

.canvas-shell { padding: 16px; border-radius: 28px; }
.canvas-shell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); margin-bottom: 14px; }
.builder-card { display: grid; min-height: 330px; padding: 20px; border: 1px solid var(--border); border-radius: 28px; background: rgba(255,255,255,0.58); }
.canvas-main-stack { display: grid; gap: 16px; align-content: start; }
.builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-main-stack { grid-template-columns: minmax(0,1fr); align-items: start; gap: 18px; }
.builder-card[data-type="image-hotspot"][data-side-state="content"] .builder-prompt-input { grid-column: 1 / -1; }
.builder-card[data-type="image-hotspot"][data-side-state="content"] .builder-image-slot { grid-column: 1; }
.builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-preview-mount { grid-column: 1; }
.builder-prompt-input { width: 100%; min-height: 74px; max-height: 120px; resize: none; border: 0; background: transparent; color: var(--text); font-size: clamp(1.75rem, 3vw, 2.2rem); line-height: 1.04; letter-spacing: -0.055em; font-weight: 200; padding: 4px 4px 8px; }
.builder-prompt-input::placeholder { color: #8d8275; }
.builder-prompt-input:focus-visible { outline: none; }
.builder-card:focus-within { box-shadow: 0 0 0 4px rgba(108,137,187,0.06); }
.builder-image-slot { display: grid; gap: var(--gap-3); min-width: 0; }
.canvas-preview-mount { min-width: 0; }

.drawer-input,
.drawer-textarea,
.inline-feedback-input,
.option-feedback-input {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.84);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
}
.drawer-textarea,
.inline-feedback-input { resize: vertical; }
.drawer-input:focus-visible,
.drawer-textarea:focus-visible,
.inline-feedback-input:focus-visible,
.option-feedback-input:focus-visible { outline: none; border-color: var(--blue-line); box-shadow: 0 0 0 4px rgba(108,137,187,0.12); }

.interaction-block,
.interaction-block-rail { display: grid; gap: 14px; }
.answer-toggle-row,
.answer-choice-row,
.answer-choice-row-rail { display: grid; gap: 12px; }
.answer-pill { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.78); text-align: left; }
.answer-pill.is-correct { border-color: var(--blue-line); background: rgba(233,238,248,0.84); }
.answer-pill-glyph { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.96); flex: 0 0 auto; }
.option-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.74); }
.option-row:focus-within { border-color: var(--blue-line); background: rgba(255,255,255,0.92); }
.option-row.is-correct { border-color: rgba(108,137,187,0.36); }
.option-row.is-draft { opacity: .76; }
.option-status { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.92); color: var(--muted-strong); }
.option-status.is-correct { border-color: var(--blue-line); background: var(--blue-fill); color: var(--text); }
.option-input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text); padding: 0; }
.option-input:focus-visible { outline: none; }
.option-actions { display: flex; justify-content: flex-end; }
.option-remove { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.88); color: var(--muted-strong); }
.option-remove-placeholder { visibility: hidden; }
.option-feedback-details { grid-column: 1 / -1; border-top: 1px solid rgba(216,207,195,0.72); padding-top: 8px; }
.option-feedback-details summary,
.feedback-advanced-details summary,
.hotspot-meta-details summary,
.hotspot-support-details summary,
.publish-code-details summary,
.publish-advanced summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted-strong); cursor: pointer; }
.option-feedback-details summary::-webkit-details-marker,
.feedback-advanced-details summary::-webkit-details-marker,
.hotspot-meta-details summary::-webkit-details-marker,
.publish-code-details summary::-webkit-details-marker,
.publish-advanced summary::-webkit-details-marker { display: none; }
.option-feedback-details summary span,
.feedback-advanced-details summary span { color: var(--muted); font-size: .86rem; }
.option-feedback-field { margin-top: 8px; }
.option-feedback-input { min-height: 38px; padding-block: 8px; font-size: .92rem; }

.rail-note-toggle-row { display: flex; }
.rail-note-add { width: 100%; }
.rail-note-card { display: grid; gap: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.70); }
.rail-note-card-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 16px; padding-bottom: 2px; }
.rail-note-card-title { display: grid; gap: 2px; min-width: 0; }
.rail-note-card-title strong { font-weight: 400; }
.rail-note-card-title span { color: var(--muted); font-size: .86rem; }
.rail-note-clear { justify-self: end; align-self: start; min-width: 74px; white-space: nowrap; }
.rail-note-field { display: grid; gap: 8px; }
.rail-inline-feedback-input { min-height: 92px; }
.feedback-advanced-details { display: grid; gap: 10px; }
.feedback-advanced-details[open] { gap: 12px; }
.feedback-advanced-grid { display: grid; gap: 10px; margin-top: 10px; }

.canvas-answer-stack { display: grid; gap: 10px; }
.canvas-answer { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.78); }
.canvas-answer.is-correct { border-color: var(--blue-line); background: var(--blue-fill); }
.canvas-answer-glyph { width: 26px; text-align: center; color: var(--muted-strong); }

.canvas-image-dropzone,
.hotspot-empty-card { min-height: 210px; display: grid; place-items: center; gap: 4px; width: 100%; border: 1px dashed var(--border-strong); border-radius: 22px; background: rgba(255,255,255,0.62); color: var(--muted-strong); text-align: center; padding: 24px; }
.canvas-image-dropzone-title,
.inline-image-dropzone-title { display: block; color: var(--text); font-weight: 400; }
.canvas-image-dropzone-copy,
.inline-image-dropzone-copy { display: block; color: var(--muted-strong); font-size: .92rem; }
.canvas-image-figure,
.image-rail-preview,
.image-preview-card { margin: 0; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface-soft); }
.canvas-image-figure img,
.image-preview-card img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.image-rail-preview img { width: 100%; max-height: 150px; object-fit: contain; }
.extras-stack { display: grid; gap: 12px; }
.rail-action-row,
.extras-action-row,
.inline-actions,
.inline-image-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.extras-action-row-compact,
.hotspot-inline-actions-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.extras-action-row-compact .button,
.hotspot-inline-actions-primary .button { width: 100%; }
.rail-meta-details,
.extras-details { border-top: 1px solid rgba(216,207,195,0.72); padding-top: 8px; }

.hotspot-control-stack,
.hotspot-workflow { display: grid; gap: 14px; }
.hotspot-step-card,
.hotspot-mode-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.70); }
.hotspot-mode-meta,
.hotspot-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted-strong); }
.hotspot-step-head { justify-content: flex-start; }
.hotspot-step-head strong { font-weight: 400; color: var(--text); }
.hotspot-step-number,
.hotspot-count-pill { min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.86); color: var(--muted-strong); }
.hotspot-count-pill { min-width: 0; height: 34px; }
.hotspot-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.68); }
.hotspot-mode-switch .button { border-color: transparent; background: transparent; width: 100%; }
.hotspot-mode-switch .button.is-active { border-color: var(--blue-line); background: var(--blue-fill); }
.hotspot-mode-help,
.hotspot-field-hint { color: var(--muted-strong); font-size: .9rem; line-height: 1.35; }
.hotspot-mode-help-warning { color: #8a5a44; }
.hotspot-empty-inline { display: grid; gap: 4px; color: var(--muted-strong); }
.hotspot-empty-inline strong { color: var(--text); font-weight: 400; }
.hotspot-list { display: grid; gap: 10px; }
.hotspot-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.72); }
.hotspot-row.is-active { border-color: var(--blue-line); background: rgba(233,238,248,0.74); }
.hotspot-row-button { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 10px; border: 0; background: transparent; padding: 0; text-align: left; }
.hotspot-row-index { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.92); }
.hotspot-row-copy { display: grid; gap: 2px; min-width: 0; }
.hotspot-row-copy strong { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotspot-row-copy span { color: var(--muted-strong); font-size: .9rem; line-height: 1.3; }
.hotspot-image-shell { display: grid; gap: 10px; }
.hotspot-image-copy { color: var(--muted-strong); font-size: .92rem; }
.hotspot-canvas-viewport { overflow: auto; padding: 0 0 4px; }
.hotspot-canvas-card { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--surface-soft); }
.hotspot-canvas-card img { width: auto; max-width: min(100%, 780px); max-height: 430px; height: auto; user-select: none; -webkit-user-drag: none; }
.hotspot-overlay { position: absolute; inset: 0; }
.hotspot-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 999px; border: 2px solid rgba(31,29,26,0.42); background: rgba(255,255,255,0.30); box-shadow: inset 0 0 0 999px rgba(194,180,133,0.12); display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: grab; }
.hotspot-dot.is-reveal { width: 36px; height: 36px; background: rgba(255,255,255,0.92); box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
.hotspot-dot.is-active { border-color: rgba(108,137,187,0.92); box-shadow: inset 0 0 0 999px rgba(108,137,187,0.14), 0 0 0 4px rgba(108,137,187,0.16); }
.hotspot-resize-handle { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid #fff; background: var(--blue-line); }
.hotspot-dot-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 220px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.98); box-shadow: 0 14px 34px rgba(0,0,0,0.10); color: var(--text); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease, transform 120ms ease; z-index: 5; }
.hotspot-dot-tooltip strong { font-weight: 400; }
.hotspot-dot-tooltip em { font-style: normal; color: var(--muted-strong); font-size: .92rem; line-height: 1.3; }
.hotspot-dot:hover .hotspot-dot-tooltip,
.hotspot-dot:focus-visible .hotspot-dot-tooltip,
.hotspot-dot.is-active .hotspot-dot-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.canvas-note-editor { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,0.76); }
#hotspotSelectedCard { align-self: start; }
.canvas-note-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(216,207,195,0.72); }
.canvas-note-editor-head strong { font-weight: 400; }
.canvas-note-editor-title-row { display: grid; gap: 6px; }
.canvas-note-preview-pill { width: fit-content; display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.84); color: var(--muted-strong); font-size: .9rem; }
.canvas-note-editor-remove { flex: 0 0 auto; }
.canvas-note-editor-fields { display: grid; gap: 12px; }
.hotspot-selected-textarea { min-height: 100px; }
.hotspot-note-limit { justify-self: end; color: var(--muted); font-size: .84rem; }
.hotspot-geometry-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.inline-image-dropzone { min-height: 110px; display: grid; place-items: center; text-align: center; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 18px; background: rgba(255,255,255,0.70); }

.preview-inline { display: grid; }
.preview-runtime-frame,
.preview-frame { width: 100%; min-height: 190px; border: 0; border-radius: 22px; background: transparent; display: block; }

.drawer-layer { position: fixed; inset: 0; z-index: 70; }
.drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(24,22,20,0.42); backdrop-filter: blur(4px); }
.side-drawer { position: absolute; top: 0; right: 0; width: min(520px, 100%); height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -16px 0 40px rgba(0,0,0,0.08); display: grid; grid-template-rows: auto 1fr; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 22px 18px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin-top: 4px; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.055em; font-weight: 300; }
.drawer-body { padding: 22px; overflow-y: auto; display: grid; gap: 18px; }
.drawer-copy,
.publish-copy { color: var(--muted-strong); }
.drawer-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,0.72); }
.type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.type-row { display: grid; gap: 4px; padding: 15px; text-align: left; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.66); }
.type-row.is-active { border-color: rgba(194,180,133,0.86); background: rgba(244,238,224,0.84); }
.type-name { font-weight: 400; }
.type-popover { position: absolute; z-index: 90; width: min(360px, calc(100vw - 36px)); padding: 10px; border: 1px solid var(--border); border-radius: 24px; background: rgba(251,248,243,0.98); box-shadow: 0 22px 44px rgba(16,13,10,0.08); backdrop-filter: blur(10px); }
.type-menu-list { display: grid; gap: 8px; }
.type-menu-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid transparent; border-radius: 18px; background: transparent; text-align: left; }
.type-menu-option:hover,
.type-menu-option:focus-visible,
.type-menu-option.is-active { background: rgba(255,255,255,0.9); border-color: var(--border); outline: none; }
.type-menu-copy { display: grid; gap: 2px; color: var(--muted-strong); }
.type-menu-label { color: var(--text); font-weight: 400; }
.type-menu-check { color: var(--muted); }

.image-dropzone { min-height: 180px; border: 1px dashed var(--border-strong); border-radius: 22px; background: rgba(255,255,255,0.62); display: grid; place-items: center; padding: 20px; text-align: center; }
.publish-grid,
.publish-grid-main,
.publish-code-stack,
.publish-link-stack,
.publish-advanced-body { display: grid; gap: 12px; }
.publish-grid-main { grid-template-columns: 1fr 1fr; }
.publish-card { text-align: left; width: 100%; min-height: 0; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--border); background: rgba(255,255,255,0.78); display: grid; gap: 6px; }
.publish-card-primary { border-color: rgba(24,22,20,0.18); }
.publish-card-badge { width: fit-content; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.publish-card strong { font-weight: 400; }
.publish-card span { color: var(--muted-strong); line-height: 1.4; }
.publish-step-card,
.publish-snippet-item { display: grid; gap: 12px; }
.publish-readiness-card-inline { padding: 14px; }
.publish-status-list { display: grid; gap: 10px; }
.publish-status-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; }
.publish-status-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.publish-status-row.is-ready .publish-status-icon { border-color: rgba(111,153,104,.48); background: rgba(111,153,104,.10); color: #50724b; }
.publish-status-row strong { font-weight: 400; display: block; }
.publish-status-row span { color: var(--muted-strong); font-size: .92rem; }
.publish-link-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.68); }
.publish-link-row strong { font-weight: 400; display: block; }
.publish-link-row span { color: var(--muted-strong); }
.publish-copy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.publish-code-input,
.publish-codebox { width: 100%; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.8); padding: 10px 12px; color: var(--muted-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .82rem; line-height: 1.45; }
.publish-codebox { white-space: pre-wrap; overflow: auto; max-height: 180px; }
.publish-codebox-compact { max-height: 120px; }
.publish-helper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.publish-helper-head strong { font-weight: 400; }
.publish-code-details { display: grid; gap: 10px; }
.publish-code-details[open] { gap: 12px; }
.publish-meta-grid,
.publish-meta-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.publish-advanced { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.62); padding: 14px; }
.publish-advanced-body { margin-top: 12px; }
.publish-quiet-row { display: flex; justify-content: flex-start; }

.site-footer-minimal { display: flex; justify-content: center; padding: 46px 0 34px; }
.footer-stamp { display: inline-flex; align-items: center; justify-content: center; opacity: 1; }
.footer-stamp img { width: 24px; height: auto; opacity: 1; }
.toast { position: fixed; right: 18px; bottom: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(28,26,23,0.92); color: #fff; z-index: 90; }

@media (max-width: 980px) {
  .studio-layout { grid-template-columns: 1fr; }
  .studio-bar { align-items: flex-start; flex-direction: column; }
  h1 { white-space: normal; }
  .builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-main-stack { grid-template-columns: 1fr; }
  .builder-card[data-type="image-hotspot"][data-side-state="content"] .builder-image-slot,
  .builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-preview-mount { grid-column: 1; }
}
@media (max-width: 720px) {
  .shell { width: min(calc(100% - 24px), var(--studio-width)); }
  .studio { padding: 20px 0 56px; }
  h1 { font-size: 2.9rem; }
  .checkpoint-studio,
  .canvas-shell,
  .builder-card { padding: 12px; border-radius: 22px; }
  .rail-section { padding: 14px; }
  .publish-grid-main,
  .publish-meta-grid,
  .publish-meta-grid-2,
  .publish-copy-row,
  .hotspot-geometry-grid { grid-template-columns: 1fr; }
  .side-drawer { width: 100%; }
  .masthead-inner { min-height: 68px; }
  .header-link { min-height: 42px; padding: 0 16px; }
}

.hotspot-alt-answer-field { margin-top: 4px; }
.hotspot-access-card { border-style: solid; }

/* Hotspot image stays full-size when a point is selected. */
.builder-card[data-type="image-hotspot"] .canvas-preview-mount { width: 100%; }
.builder-card[data-type="image-hotspot"] #hotspotSelectedCard { width: 100%; }
.canvas-note-editor-simple { padding: 15px; }
.canvas-note-editor-fields-tip { grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); align-items: start; }
.canvas-note-editor-fields-area { grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr); align-items: start; }
.canvas-note-editor-fields-area .hotspot-geometry-grid,
.canvas-note-editor-fields-area .hotspot-mode-help { grid-column: 2; }
.hotspot-selected-textarea { min-height: 86px; }

/* Calmer feedback card actions in the narrow rail. */
.rail-note-card { gap: 13px; padding: 14px; }
.rail-note-card-head { align-items: center; gap: 12px; }
.rail-note-card-title span { line-height: 1.24; }
.rail-note-clear { min-width: 0; min-height: 36px; padding-inline: 13px; border-radius: 14px; }

@media (max-width: 980px) {
  .canvas-note-editor-fields-tip,
  .canvas-note-editor-fields-area { grid-template-columns: 1fr; }
  .canvas-note-editor-fields-area .hotspot-geometry-grid,
  .canvas-note-editor-fields-area .hotspot-mode-help { grid-column: auto; }
}

/* Selected hotspot editor lives below the image so adding the first point never shrinks the canvas. */
.builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-main-stack {
  grid-template-columns: minmax(0, 1fr);
}
.builder-card[data-type="image-hotspot"][data-side-state="content"] .builder-prompt-input,
.builder-card[data-type="image-hotspot"][data-side-state="content"] .builder-image-slot,
.builder-card[data-type="image-hotspot"][data-side-state="content"] .canvas-preview-mount {
  grid-column: 1;
}
.builder-card[data-type="image-hotspot"] .builder-image-slot,
.builder-card[data-type="image-hotspot"] .canvas-preview-mount {
  width: min(100%, 820px);
  margin-inline: auto;
}
.builder-card[data-type="image-hotspot"] .hotspot-canvas-card img {
  max-width: min(100%, 820px);
  max-height: 460px;
}
.builder-card[data-type="image-hotspot"] .canvas-preview-mount {
  margin-top: 2px;
}
.canvas-note-editor-simple {
  padding: 16px;
}
.canvas-note-editor-fields-tip {
  grid-template-columns: 1fr;
}
.canvas-note-editor-fields-area {
  grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
  align-items: start;
}
.canvas-note-editor-fields-area .hotspot-geometry-grid,
.canvas-note-editor-fields-area .hotspot-mode-help {
  grid-column: 2;
}
.hotspot-selected-field-tip .hotspot-selected-textarea {
  min-height: 72px;
}
.hotspot-dot-tooltip-simple em {
  color: var(--text);
}
.cp-hotspot-tooltip-simple em {
  color: var(--cp-text);
}

/* Tiny Chesspiece footer stamp. */
.site-footer-minimal {
  padding: 52px 0 34px;
}
.footer-stamp,
.footer-stamp:hover,
.footer-stamp:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  opacity: 1;
  transform: none;
}
.footer-stamp img {
  width: 24px;
  height: auto;
  display: block;
  opacity: 1;
}

@media (max-width: 980px) {
  .canvas-note-editor-fields-area {
    grid-template-columns: 1fr;
  }
  .canvas-note-editor-fields-area .hotspot-geometry-grid,
  .canvas-note-editor-fields-area .hotspot-mode-help {
    grid-column: auto;
  }
}

/* rev58 legacy: carried-forward visual QA guardrails for hotspot authoring. */
.hotspot-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-strong);
  font-size: .92rem;
}
.hotspot-canvas-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--muted-strong);
  white-space: nowrap;
}
.hotspot-inline-actions-primary .button {
  white-space: nowrap;
  min-width: 0;
}
.hotspot-step-card {
  gap: 11px;
}
.hotspot-row {
  min-height: 58px;
}
.hotspot-row-copy span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 205px;
}
.builder-card[data-type="image-hotspot"] .builder-image-slot,
.builder-card[data-type="image-hotspot"] .canvas-preview-mount {
  width: min(100%, 840px);
}
.builder-card[data-type="image-hotspot"] .hotspot-canvas-card img {
  max-width: min(100%, 840px);
  max-height: 500px;
}
.canvas-note-editor-inline {
  gap: 12px;
  padding: 14px 16px 15px;
  background: rgba(255,255,255,0.70);
}
.canvas-note-editor-inline .canvas-note-editor-head {
  align-items: center;
  padding-bottom: 10px;
}
.canvas-note-editor-inline .canvas-note-editor-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hotspot-selected-inline-tip {
  gap: 7px;
}
.hotspot-tip-input-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}
.hotspot-tip-input-row .hotspot-note-limit {
  min-width: 48px;
  justify-self: end;
  text-align: right;
}
.hotspot-selected-inline-tip .hotspot-field-hint {
  font-size: .86rem;
}
.canvas-note-editor-fields-tip {
  grid-template-columns: 1fr;
}
.footer-stamp img,
.cp-stamp img {
  width: 24px;
}
@media (max-width: 720px) {
  .hotspot-canvas-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .hotspot-tip-input-row {
    grid-template-columns: 1fr;
  }
  .hotspot-tip-input-row .hotspot-note-limit {
    justify-self: start;
  }
}

/* rev58 legacy: starter pattern drawer. */
.drawer-layer[data-mode="templates"] .side-drawer {
  width: min(620px, 100%);
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.template-row {
  min-height: 138px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.72);
  color: var(--text);
  text-align: left;
}
.template-row:hover,
.template-row:focus-visible {
  outline: none;
  border-color: rgba(108,137,187,0.44);
  background: rgba(255,255,255,0.92);
}
.template-row-blank {
  grid-column: 1 / -1;
  min-height: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,244,236,0.86));
}
.template-row-kicker {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: .78rem;
  line-height: 1;
}
.template-row strong { font-weight: 400; }
.template-row span:last-child { color: var(--muted-strong); line-height: 1.36; }
@media (max-width: 720px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-row-blank { grid-column: auto; }
}

/* rev58 legacy: quality pass — image-first hotspot toolbar and steadier spacing contracts. */
.hotspot-canvas-toolbar {
  align-items: center;
  min-height: 38px;
}
.hotspot-canvas-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.hotspot-add-button {
  min-height: 32px;
  padding-inline: 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.hotspot-canvas-viewport-canvas {
  padding-top: 2px;
}
.builder-card[data-type="image-hotspot"] .builder-image-slot,
.builder-card[data-type="image-hotspot"] .canvas-preview-mount {
  width: min(100%, 880px);
}
.builder-card[data-type="image-hotspot"] .hotspot-canvas-card img {
  max-width: min(100%, 880px);
  max-height: 520px;
}
.canvas-note-editor-inline {
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(16,13,10,0.035);
}
.canvas-note-editor-inline .canvas-note-editor-head {
  gap: 16px;
}
.hotspot-selected-inline-tip .drawer-input {
  min-height: 46px;
}
.rail-note-card {
  padding: 15px 16px 16px;
  border-radius: 20px;
}
.rail-note-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.rail-note-clear {
  min-height: 38px;
  padding-inline: 14px;
}
.hotspot-step-card {
  padding: 15px;
}
.hotspot-inline-actions-primary {
  gap: 9px;
}
.hotspot-row-copy span {
  max-width: 218px;
}
@media (max-width: 720px) {
  .hotspot-canvas-toolbar {
    align-items: stretch;
  }
  .hotspot-canvas-tools {
    justify-content: space-between;
    width: 100%;
  }
  .hotspot-add-button {
    flex: 0 0 auto;
  }
}

/* rev58 legacy: visual QA and hotspot refinement pass. */
.hotspot-mode-panel-compact {
  gap: 10px;
  padding: 13px 14px;
}
.hotspot-card-eyebrow {
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--muted);
}
.hotspot-step-head-split {
  justify-content: space-between;
  align-items: center;
}
.hotspot-step-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hotspot-step-status,
.canvas-note-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(255,255,255,0.76);
  font-size: .84rem;
  white-space: nowrap;
}
.hotspot-step-status.is-ready,
.canvas-note-status.is-ready {
  border-color: rgba(111,153,104,.42);
  background: rgba(111,153,104,.09);
  color: #53724d;
}
.hotspot-step-status.is-pending,
.canvas-note-status.is-pending,
.canvas-note-status.is-caution {
  border-color: rgba(194,151,86,.38);
  background: rgba(194,151,86,.09);
  color: #7a6040;
}
.hotspot-step-card.is-ready {
  background: rgba(255,255,255,0.72);
}
.hotspot-step-card.is-pending {
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(250,247,241,0.82));
}
.canvas-note-status {
  min-height: 26px;
  font-size: .8rem;
}
.canvas-note-editor-inline.is-pending {
  border-color: rgba(194,151,86,.34);
}
.hotspot-canvas-card {
  overflow: visible;
}
.hotspot-canvas-card > img,
.hotspot-canvas-card > svg {
  border-radius: 21px;
}
.hotspot-dot-tooltip {
  z-index: 20;
}
.hotspot-row.is-active .hotspot-row-index,
.hotspot-dot.is-active span:first-child {
  font-weight: 400;
}
@media (max-width: 720px) {
  .hotspot-step-head-split,
  .canvas-note-editor-inline .canvas-note-editor-head {
    align-items: flex-start;
  }
  .hotspot-step-head-split {
    flex-direction: column;
  }
}

/* rev58 legacy: selected hotspot tray actions and unclipped tip overlays. */
.canvas-note-editor-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.canvas-note-editor-done {
  border-color: rgba(108,137,187,0.30);
  background: rgba(108,137,187,0.07);
}
.hotspot-canvas-viewport,
.hotspot-canvas-viewport-canvas,
.hotspot-canvas-card {
  overflow: visible;
}
.hotspot-canvas-card > img {
  border-radius: 21px;
  overflow: hidden;
}
.hotspot-dot-tooltip {
  z-index: 30;
}
@media (max-width: 720px) {
  .canvas-note-editor-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* Keep hotspot hover labels visible beyond the rounded image card. */
.hotspot-canvas-viewport {
  overflow: visible;
}

/* rev58: LMS proof and package-size confidence. */
.publish-size-note {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.66);
}
.publish-size-note strong {
  font-weight: 400;
}
.publish-size-note span {
  color: var(--muted-strong);
  font-size: .9rem;
  line-height: 1.35;
}
.publish-size-note.is-ready {
  border-color: rgba(111,153,104,.34);
  background: rgba(111,153,104,.07);
}
.publish-size-note.is-warning {
  border-color: rgba(194,151,86,.38);
  background: rgba(194,151,86,.08);
}
.publish-size-note.is-warning-strong {
  border-color: rgba(166,91,78,.34);
  background: rgba(166,91,78,.07);
}
.publish-size-note-empty {
  opacity: .86;
}
.hotspot-mode-help {
  max-width: 32ch;
}
.hotspot-empty-inline span {
  max-width: 28ch;
}
.canvas-note-editor-inline .canvas-note-editor-actions .button {
  min-width: 72px;
}
@media (max-width: 720px) {
  .canvas-note-editor-inline .canvas-note-editor-actions .button {
    min-width: 0;
  }
}

/* rev60 visibility contract */
[hidden],
.builder-card[hidden],
.preview-inline[hidden],
.drawer-layer[hidden],
.type-popover[hidden],
.toast[hidden],
.canvas-preview-mount[hidden] {
  display: none;
}
.preview-inline:not([hidden]) {
  display: grid;
  gap: 0;
}
.preview-runtime-frame {
  background: transparent;
}

/* rev60: publish clean — no always-visible checklist; optional aids stay quiet. */
.hotspot-step-status.is-neutral,
.canvas-note-status.is-neutral {
  border-color: rgba(216,207,195,0.82);
  background: rgba(255,255,255,0.62);
  color: var(--muted-strong);
}
.hotspot-step-card.is-optional {
  background: rgba(255,255,255,0.58);
}
.hotspot-optional-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.hotspot-optional-card > summary {
  padding: 14px;
  cursor: pointer;
  list-style: none;
}
.hotspot-optional-card > summary::-webkit-details-marker { display: none; }
.hotspot-optional-card .hotspot-alt-answer-field {
  padding: 0 14px 14px;
}
.drawer-field-label em {
  margin-left: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: .82rem;
}
.rail-meta-details summary,
.hotspot-meta-details summary {
  color: var(--muted-strong);
}
.hotspot-step-status-group {

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.hotspot-step-add {
  min-height: 30px;
  padding-inline: 11px;
  border-radius: 999px;
}


/* rev60: publish clean default; export stays as the advanced path. */
.publish-host-card {
  gap: 14px;
}
.publish-host-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.publish-card-hosted {
  border-color: rgba(72, 96, 66, 0.30);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(242,247,238,0.82));
}
.publish-card-hosted[disabled] {
  cursor: progress;
  opacity: .72;
}
.publish-host-note-band strong,
.publish-host-card .drawer-field-label {
  letter-spacing: .12em;
}
.publish-privacy-note,
.publish-host-empty,
.publish-error-note {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
}
.publish-privacy-note strong {
  font-weight: 400;
}
.publish-privacy-note span,
.publish-host-empty span {
  color: var(--muted-strong);
  line-height: 1.42;
}
.publish-error-note {
  border-color: rgba(174, 75, 65, 0.32);
  background: rgba(255, 244, 240, 0.82);
  color: #8a463d;
}
.publish-host-result {
  display: grid;
  gap: 12px;
}
.publish-self-host > summary {
  cursor: pointer;
}
.publish-advanced-nested {
  background: rgba(255,255,255,0.54);
}
@media (max-width: 720px) {
  .publish-host-head {
    display: grid;
  }
}
.publish-host-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* rev60: slimmer publish drawer with details moved into help bubbles. */
.publish-host-card-slim {
  gap: 16px;
}
.publish-slim-head,
.publish-title-row,
.publish-copy-grid {
  display: flex;
  align-items: center;
  gap: 10px;
}
.publish-slim-head {
  justify-content: space-between;
}
.publish-title-row h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.publish-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-strong);
  background: rgba(255,255,255,0.62);
  white-space: nowrap;
  font-size: .92rem;
}
.publish-status-pill.is-ready {
  border-color: rgba(111,153,104,.38);
  background: rgba(111,153,104,.08);
}
.publish-status-pill.is-pending {
  border-color: rgba(194,151,86,.34);
  background: rgba(194,151,86,.08);
}
.publish-primary-action {
  width: 100%;
  min-height: 52px;
}
.publish-copy-grid {
  flex-wrap: wrap;
}
.publish-copy-grid .button {
  flex: 1 1 120px;
}
.publish-host-result-slim {
  gap: 12px;
}
.publish-code-details-slim {
  border-top: 1px solid rgba(216,207,195,0.72);
  padding-top: 10px;
}
.publish-advanced-slim > summary {
  min-height: 36px;
}
.publish-card-compact {
  min-height: 72px;
  align-content: center;
  text-align: center;
}
.help-tip {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
  color: var(--muted-strong);
  font-size: .86rem;
  line-height: 1;
  cursor: help;
}
.help-tip:focus-visible {
  outline: none;
  border-color: var(--blue-line);
  box-shadow: 0 0 0 4px rgba(108,137,187,0.12);
}
.help-tip-bubble {
  position: absolute;
  z-index: 80;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, 72vw);
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.98);
  color: var(--muted-strong);
  box-shadow: 0 18px 38px rgba(16, 13, 10, 0.10);
  line-height: 1.38;
  text-align: left;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.help-tip:hover .help-tip-bubble,
.help-tip:focus .help-tip-bubble,
.help-tip:focus-within .help-tip-bubble {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 720px) {
  .publish-slim-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .publish-status-pill {
    white-space: normal;
  }
}

/* rev60: publish cleanup final pass. */
.publish-online-action {
  width: 100%;
  min-height: 52px;
}
.publish-issues {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(194,151,86,.34);
  border-radius: 16px;
  background: rgba(194,151,86,.08);
  color: var(--muted-strong);
}
.publish-issues span {
  line-height: 1.35;
}
.publish-grid-minimal .publish-card {
  min-height: 70px;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.publish-self-host > summary,
.publish-advanced-nested > summary {
  align-items: center;
}
.publish-code-details-slim summary {
  min-height: 36px;
}