.codex-preview { position: relative; display: grid; min-height: 420px; place-items: center; overflow: auto; background: #e7d6b9; }
.codex-preview canvas { display: block; max-width: 100%; height: auto !important; box-shadow: 0 12px 28px rgba(57,39,22,.21); }
.preview-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 25px; color: #604935; background: rgba(246,239,223,.87); font: 600 13px/1.5 "Avenir Next", "Segoe UI", sans-serif; text-align: center; }
.preview-status.is-hidden { display: none; }
.source-page { min-height: 100vh; }
.source-viewer-page { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 46px 0 70px; }
.source-viewer-page h1 { margin: 0 0 22px; font-size: clamp(32px, 5vw, 58px); letter-spacing: -.045em; }
.source-back { display: inline-block; margin-bottom: 45px; color: var(--cyan-deep); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.source-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 19px; }
.source-actions button, .source-actions a { min-height: 38px; padding: 0 13px; border: 1px solid rgba(102,68,37,.42); color: #574431; background: rgba(255,255,255,.54); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.source-actions a { margin-left: auto; color: var(--cyan-deep); }
.source-actions button:disabled { cursor: not-allowed; opacity: .42; }
.source-canvas { min-height: 620px; padding: 18px; border: 1px solid rgba(181,133,77,.7); }
@media (max-width: 600px) { .codex-preview { min-height: 330px; }.source-viewer-page { width: calc(100% - 28px); padding-top: 27px; }.source-back { margin-bottom: 31px; }.source-actions { gap: 8px; }.source-actions a { width: 100%; margin-left: 0; text-align: center; }.source-canvas { min-height: 420px; padding: 9px; } }