.ann { display: grid; grid-template: "top top" auto "side stage" 1fr / 330px 1fr; height: 100dvh; }
.ann-side { grid-area: side; }
.ann-stage { grid-area: stage; }
.ann-side { display: flex; flex-direction: column; gap: 10px; overflow: auto; margin: 12px 0 12px 12px; }
.ann-file { text-align: center; cursor: pointer; }
.ann-fields { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; }
.ann-keys { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.ann-keys li { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.ann-keys li b { width: 22px; flex: none; font: 500 11px var(--mono); color: var(--muted); text-align: right; }
.ann-keys li:hover { background: rgba(217,163,92,.08); }
.ann-keys li.on { background: rgba(217,163,92,.18); color: var(--accent); }
.ann-keys li.on b { color: var(--accent); }
.ann-stage { position: relative; overflow: hidden; margin: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d0c0a; }
.ann-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ann-stage canvas.grab { cursor: grabbing; }
@media (max-width: 760px) {
  .ann { grid-template: "top" auto "stage" 60dvh "side" auto / 1fr; height: auto; }
  .ann-side { margin: 0 12px 12px; }
}