.image-lightbox { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; z-index: 10010; } .image-lightbox[hidden] { display: none !important; } .image-lightbox-backdrop { position: absolute; inset: 0; background: rgba(23, 33, 29, 0.56); backdrop-filter: blur(4px); } .image-lightbox-dialog { position: relative; z-index: 1; display: grid; gap: 10px; width: min(92vw, 1120px); max-height: calc(100vh - 48px); padding: 18px 18px 14px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 252, 245, 0.98); box-shadow: 0 32px 80px rgba(20, 30, 28, 0.35); } .image-lightbox-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(23, 33, 29, 0.08); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .image-lightbox-image { width: 100%; height: auto; max-height: calc(100vh - 132px); object-fit: contain; border-radius: 18px; background: white; } .image-lightbox-caption { margin: 0; text-align: center; color: var(--muted); font-size: 0.92rem; } .analysis-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; z-index: 10000; } .analysis-modal[hidden] { display: none !important; } .analysis-modal-backdrop { position: absolute; inset: 0; background: rgba(23, 33, 29, 0.56); backdrop-filter: blur(6px); } .analysis-modal-dialog { position: relative; z-index: 1; width: min(900px, calc(100vw - 48px)); max-height: calc(100vh - 48px); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 252, 245, 0.98); box-shadow: 0 32px 84px rgba(20, 30, 28, 0.34); overflow: hidden; } .analysis-modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(23, 33, 29, 0.08); color: var(--text); font-size: 1.55rem; line-height: 1; cursor: pointer; } .analysis-modal-content { overflow: auto; max-height: calc(100vh - 48px); padding: 28px 30px 28px; } .analysis-modal-label { margin: 0 0 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .analysis-markdown { color: var(--text); line-height: 1.75; } .analysis-markdown h1, .analysis-markdown h2, .analysis-markdown h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.15; } .analysis-markdown h1 { margin: 0 0 12px; font-size: 1.62rem; } .analysis-markdown h2 { margin: 28px 0 10px; font-size: 1.1rem; padding-top: 18px; border-top: 1px solid rgba(23, 33, 29, 0.08); } .analysis-markdown h2:first-child, .analysis-markdown h1+h2 { border-top: 0; padding-top: 0; } .analysis-markdown p { margin: 0 0 14px; } .analysis-markdown img { display: block; width: min(100%, 760px); margin: 18px auto 14px; border-radius: 18px; border: 1px solid rgba(23, 33, 29, 0.1); box-shadow: 0 12px 30px rgba(23, 33, 29, 0.08); cursor: zoom-in; transition: transform 160ms ease, box-shadow 160ms ease; } .analysis-markdown img:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(20, 30, 28, 0.14); } .analysis-markdown ul, .analysis-markdown ol { margin: 0 0 14px 1.2rem; padding: 0; } .analysis-markdown li+li { margin-top: 6px; } .analysis-markdown code { padding: 0.12rem 0.36rem; border-radius: 8px; background: rgba(23, 33, 29, 0.06); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.92em; }