dialog.drawing-viewer{
  position:fixed;inset:0;margin:auto;width:calc(100vw - 16px);height:calc(100dvh - 16px);
  max-width:none;max-height:none;padding:0;overflow:hidden;border:1px solid var(--rule);
}
.drawing-viewer[open]{display:flex;flex-direction:column}
.viewer-corner-close{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;padding:0;border:0;background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.viewer-corner-close:hover{color:var(--accent)}
.viewer-toolbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;flex-wrap:wrap;order:2;min-height:52px;padding:6px 12px;border-top:1px solid var(--rule)}
.viewer-toolbar h2:not(.sr-only){font-size:15px!important;letter-spacing:-.02em;min-width:0;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.viewer-toolbar button,.viewer-toolbar a{min-height:36px;padding:7px 11px;font-size:12px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);white-space:nowrap}
.viewer-toolbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.viewer-toolbar button:hover:enabled,.viewer-toolbar a:hover{border-color:var(--accent)}
.viewer-toolbar input{width:100px;accent-color:var(--accent)}
.viewer-toolbar output{font:11px var(--mono);min-width:42px;text-align:center}
.viewer-canvas{position:relative;flex:1;order:0;min-width:0;min-height:0;overflow:hidden;background:#fff;cursor:grab;touch-action:none;overscroll-behavior:contain;user-select:none}
.viewer-canvas.is-panning{cursor:grabbing}
.viewer-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.viewer-canvas img{position:absolute;left:0;top:0;display:block;max-width:none;object-fit:fill;transform-origin:0 0;user-select:none;pointer-events:none}
.drawing-viewer #dialog-note{flex-shrink:0;order:1;padding:5px 12px;font-size:10px;line-height:1.4;margin:0;border-top:1px solid var(--rule);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
  dialog.drawing-viewer{width:100vw;height:100dvh;border:0}
  .viewer-toolbar{gap:8px;padding:6px 8px;min-height:48px}
  .viewer-toolbar h2:not(.sr-only){flex-basis:100%;max-width:100%;text-align:center}
  .viewer-toolbar input{display:none}
  .viewer-toolbar button,.viewer-toolbar a{min-height:40px;padding:7px 10px}
}