#tr-light { position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); border: 0; background: var(--bg); color: var(--ink); }
#tr-light[open] { display: flex; flex-direction: column; gap: 8px; }
#tr-light::backdrop { background: var(--bg); }
.tr-light-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.tr-light-tools button { font: inherit; font-size: 14px; min-height: 44px; min-width: 44px; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; background: var(--solid); color: var(--teal-ink); box-shadow: var(--shadow); cursor: pointer; }
.tr-light-tools button[data-photo-close] { background: var(--teal); color: #fff; border-color: var(--teal); }
.tr-light-tools button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.tr-light-tools button:disabled { opacity: .4; }
.tr-light-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; border-radius: var(--r); touch-action: none; user-select: none; -webkit-user-select: none; }
.tr-light-stage img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; pointer-events: none; }
.tr-light-caption, .tr-light-hint { flex-shrink: 0; margin: 0; text-align: center; font-size: 12px; overflow-wrap: anywhere; }
.tr-light-caption { color: var(--teal-ink); font-size: 14px; font-weight: 600; }
.tr-light-hint { color: var(--muted); }