/* One presentation toolbar shared by the editor and the read-only drawing. */
.view-toolbar,.navigation-controls {
  --view-size:34px; --view-surface:oklch(23% 0 0 / .32); --view-solid:oklch(23.4% 0 0);
  --view-border:oklch(100% 0 0 / .13); --view-highlight:oklch(100% 0 0 / .11);
  --view-shadow:oklch(0% 0 0 / .22);
  --view-text:oklch(100% 0 0); --view-accent:oklch(79% .12 250);
  display:flex; flex-direction:column; gap:2px; padding:2px; border:1px solid var(--glass-border,var(--view-border));
  border-radius:var(--floating-radius,999px); background:var(--surface,var(--view-solid)); color:var(--view-text);
  box-shadow:var(--floating-shadow,0 4px 16px var(--view-shadow));
}
.view-toolbar { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); }
.navigation-controls { flex-direction:row; }
:root[data-theme="light"] .view-toolbar,:root[data-theme="light"] .navigation-controls {
  --view-surface:oklch(100% 0 0 / .28); --view-solid:oklch(100% 0 0);
  --view-border:oklch(100% 0 0 / .8); --view-highlight:oklch(100% 0 0 / .94);
  --view-shadow:oklch(25% .025 260 / .12);
  --view-text:oklch(0% 0 0); --view-accent:oklch(48% .19 255);
}
.view-toolbar button,.navigation-controls button {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--view-size); height:var(--view-size); min-height:var(--view-size);
  padding:0; border:0; border-radius:50%; background:transparent; color:inherit;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.view-toolbar button:first-child { color:var(--view-accent); }
.view-toolbar svg,.navigation-controls svg { display:block; width:24px; height:24px; }
.navigation-controls button[data-zoom] { touch-action:none; }
.navigation-controls button:disabled { opacity:.3; cursor:default; }
@supports (backdrop-filter:blur(22px)) or (-webkit-backdrop-filter:blur(22px)) {
  .view-toolbar,.navigation-controls { background:var(--glass-surface,var(--view-surface)); backdrop-filter:blur(22px) saturate(165%); -webkit-backdrop-filter:blur(22px) saturate(165%); }
}
@media (max-width:640px), (pointer:coarse) { .view-toolbar,.navigation-controls { --view-size:44px; } }
@media (max-width:640px) { .view-toolbar { right:max(12px,env(safe-area-inset-right)); } }
@media (max-height:480px) { .view-toolbar { flex-direction:row; } }
@media (hover:hover) and (pointer:fine) { .view-toolbar button:hover,.navigation-controls button:hover:not(:disabled) { background:var(--view-highlight); } }
@media (prefers-reduced-transparency:reduce) { .view-toolbar,.navigation-controls { background:var(--surface,var(--view-solid)); border-color:var(--border,var(--view-border)); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (forced-colors:active) { .view-toolbar,.navigation-controls { background:Canvas; border-color:ButtonText; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }.view-toolbar button,.navigation-controls button { color:ButtonText; } }