.sample-dialog {
  --reader-accent: #7c3aed;
  --reader-ink: #23202a;
  --reader-muted: #707887;
  --reader-line: #e7e5ed;
  --reader-tint: #faf8ff;
  box-sizing: border-box;
  width: min(960px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e0e3e9;
  border-radius: 14px;
  background: #fff;
  color: var(--reader-ink);
  box-shadow: 0 32px 96px #18142033, 0 8px 24px #18142014;
  letter-spacing: 0;
  container-type: inline-size;
}
.sample-dialog::backdrop { background: #18142080; backdrop-filter: blur(5px); }
.sample-dialog[open] { animation: reader-enter 180ms ease-out; }
.sample-dialog-shell { display: flex; flex-direction: column; height: min(88dvh, 960px); max-height: calc(100dvh - 50px); overflow: hidden; }
.sample-dialog-bar { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; min-height: 56px; padding: 8px 24px; border-bottom: 1px solid var(--reader-line); background: #fff; }
.sample-dialog-identity { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sample-dialog-brand { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; color: #25272b; }
.sample-dialog-label { font-size: 13px; font-weight: 600; color: #25272b; line-height: 1.5; margin-left: 4px; padding-left: 16px; border-left: 1px solid #dfe1e6; white-space: nowrap; }
.sample-dialog-close { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #656a73; cursor: pointer; font-size: 22px; line-height: 1; transition: color 150ms ease; }
.sample-dialog-close::before { content: ''; position: absolute; inset: -8px; }
.sample-dialog-close i { display: grid; place-items: center; font-style: normal; }
.sample-dialog-close svg { display: block; width: 20px; height: 20px; stroke-width: 1.8; transition: transform 160ms ease; }
.sample-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 44px 72px 56px; }
.sample-dialog-body .sample-heading-title { max-width: 680px; margin: 0 auto 36px; padding-bottom: 28px; border-bottom: 1px solid #eceaf0; font-size: 27px; line-height: 1.6; font-weight: 650; text-wrap: balance; }
.sample-dialog .sample-image img { width: 70cqw; max-width: 100%; }
.sample-dialog-footer { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: 8px 28px; border-top: 1px solid var(--reader-line); background: #fcfcfd; }
.sample-dialog-progress { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.sample-dialog-progress-label { color: var(--reader-muted); font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 86px; }
.sample-dialog-progress-track { flex: 1; width: auto; max-width: none; height: 5px; overflow: hidden; background: #e9e5ef; border-radius: 5px; }
.sample-dialog-progress-fill { display: block; height: 100%; background: var(--reader-accent); transform: scaleX(0); transform-origin: left; }
.sample-dialog-top { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #726780; cursor: pointer; }
.sample-dialog-top svg { width: 18px; height: 18px; }
.sample-dialog-top:disabled { color: #b5afbf; cursor: default; }
.sample-dialog-status { margin: 52px auto; max-width: 360px; text-align: center; font: 15px/1.8 -apple-system, BlinkMacSystemFont, sans-serif; color: var(--reader-muted); text-indent: 0; }
.sample-dialog-retry { display: block; min-height: 44px; margin: -28px auto 40px; padding: 10px 22px; border: 1px solid #c7b0dc; border-radius: 8px; background: #fff; color: var(--reader-accent); cursor: pointer; font: 14px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; }
.sample-dialog button:focus-visible, .sample-dialog .sample-table-scroll:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .sample-dialog-close:hover { color: var(--reader-accent); }
  .sample-dialog-close:hover svg { transform: rotate(90deg) scale(1.08); }
  .sample-dialog-top:hover:not(:disabled) { background: #f0eafa; color: var(--reader-accent); }
  .sample-dialog-retry:hover { background: #f5efff; }
}
.sample-dialog-close:active { color: #6323c1; }
.sample-dialog-close:active svg { transform: rotate(90deg) scale(.92); }
.sample-dialog-top:active:not(:disabled) { background: #e9dff6; }
@keyframes reader-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sample-dialog[open] { animation: none; } .sample-dialog-close, .sample-dialog-close svg { transition: none; } .sample-dialog-close:hover svg, .sample-dialog-close:active svg { transform: none; } }
@media (max-width: 600px) {
  .sample-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .sample-dialog-shell { height: 100%; max-height: 100dvh; }
  .sample-dialog-bar { min-height: 54px; gap: 10px; padding: max(7px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 7px max(16px, env(safe-area-inset-left)); }
  .sample-dialog-identity { gap: 8px; }
  .sample-dialog-brand { font-size: 15px; }
  .sample-dialog-label { margin-left: 2px; padding-left: 10px; font-size: 12px; }
  .sample-dialog-close { width: 28px; height: 28px; flex-basis: 28px; }
  .sample-dialog-body { padding: 28px max(22px, env(safe-area-inset-right)) 36px max(22px, env(safe-area-inset-left)); }
  .sample-dialog-body .sample-heading-title { font-size: 22px; padding-bottom: 24px; margin-bottom: 28px; }
  .sample-dialog-footer { gap: 12px; padding: 4px max(16px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}
@media (max-width: 359px) { .sample-dialog-bar { gap: 6px; } }