/* Editor chrome only. Mount the dock beside, not inside, the canvas scroller. */
.studio-toolbelt-dock {
  position:absolute;
  inset-inline:0;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:7;
  display:flex;
  justify-content:center;
  padding-inline:8px;
  pointer-events:none;
  container-type:inline-size;
  container-name:studio-toolbelt-area;
}
.studio-toolbelt {
  box-sizing:border-box;
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;
  gap:6px;
  width:484px;
  max-width:100%;
  height:54px;
  padding:6px;
  border:1px solid #767675;
  border-radius:9px;
  background:#5a5a59;
  color:#fff;
  box-shadow:0 3px 11px #0002;
  pointer-events:auto;
  isolation:isolate;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:12px;
  line-height:1.3;
}
.studio-toolbelt,.studio-toolbelt * { box-sizing:border-box; }
.studio-toolbelt__group {
  display:flex;
  min-width:0;
  height:40px;
  align-items:center;
  border-radius:6px;
}
.studio-toolbelt :is(.studio-toolbelt__tool,.studio-toolbelt__chevron) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  line-height:1;
  font:inherit;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.studio-toolbelt .studio-toolbelt__tool { flex:1 1 auto; }
.studio-toolbelt .studio-toolbelt__chevron { flex:0 0 16px; width:16px; }
.studio-toolbelt .studio-toolbelt__tool.is-active { background:#89b5d3; }
.studio-toolbelt :is(.studio-toolbelt__tool,.studio-toolbelt__chevron):hover:not(:disabled) { background:#727271; }
.studio-toolbelt .studio-toolbelt__tool.is-active:hover { background:#97c1de; }
.studio-toolbelt__group.is-open .studio-toolbelt__chevron { background:#737372; }
.studio-toolbelt :is(button):focus-visible { outline:2px solid #fff; outline-offset:2px; }
.studio-toolbelt :is(.studio-toolbelt__tool,.studio-toolbelt__chevron):disabled { opacity:.5; cursor:not-allowed; }
.studio-toolbelt__icon {
  display:block;
  flex:none;
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask-image:var(--studio-belt-icon);
  mask-image:var(--studio-belt-icon);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.studio-toolbelt__group[data-tool-group=frame] .studio-toolbelt__icon { width:20px; height:23px; }
.studio-toolbelt__group[data-tool-group=text] .studio-toolbelt__icon { width:13px; height:19px; }
.studio-toolbelt__group[data-tool-group=shapes] .studio-toolbelt__icon { width:19px; height:19px; }
.studio-toolbelt__chevron-mark {
  display:block;
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
}
.studio-toolbelt__group.is-open .studio-toolbelt__chevron-mark { transform:translateY(2px) rotate(225deg); }
.studio-toolbelt-menu {
  position:absolute;
  inset-inline-start:0;
  bottom:calc(100% + 10px);
  z-index:1;
  width:min(270px,100%);
  max-height:min(390px,calc(100dvh - 180px));
  overflow:auto;
  overscroll-behavior:contain;
  padding:6px;
  border:1px solid #7a7a78;
  border-radius:8px;
  background:#454544;
  color:#fff;
  box-shadow:0 5px 22px #0003;
  text-align:left;
}
.studio-toolbelt-menu:is([data-studio-belt-menu=pen],[data-studio-belt-menu=text]) { inset-inline-start:50%; transform:translateX(-50%); }
.studio-toolbelt-menu:is([data-studio-belt-menu=comments],[data-studio-belt-menu=more]) { inset-inline-start:auto; inset-inline-end:0; }
.studio-toolbelt__menu-title { padding:8px 10px; color:#d0d0ce; font-size:10px; font-weight:600; letter-spacing:.03em; }
.studio-toolbelt .studio-toolbelt__menu-item {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:48px;
  margin:0;
  padding:8px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}
.studio-toolbelt .studio-toolbelt__menu-item:hover:not(:disabled),.studio-toolbelt .studio-toolbelt__menu-item.is-current { background:#626260; }
.studio-toolbelt .studio-toolbelt__menu-item:disabled { color:#aaa; cursor:not-allowed; }
.studio-toolbelt__menu-check { flex:0 0 12px; width:12px; color:#add2ed; font-size:14px; }
.studio-toolbelt__menu-copy { display:grid; gap:4px; min-width:0; }
.studio-toolbelt__menu-copy > span { font-weight:500; }
.studio-toolbelt__menu-copy small { font-size:10px; line-height:1.4; color:#d0d0ce; }
.studio-toolbelt__menu-item:disabled small { color:#aaa; }
.studio-toolbelt__shortcut {
  flex:none;
  min-width:20px;
  margin-inline-start:auto;
  padding:3px 4px;
  border:1px solid #898987;
  border-radius:4px;
  color:#e7e7e5;
  font:inherit;
  font-size:10px;
  line-height:1;
  text-align:center;
}
@media(max-width:700px) {
  /* Keep the editor's own grid from inheriting the top bars' min-content width. */
  .studio-editor .studio-editor-top { min-width:0; gap:6px; padding-inline:10px; }
  .studio-editor .studio-project-name { min-width:0; }
  .studio-editor .studio-project-name input { text-overflow:ellipsis; }
  .studio-editor .studio-editor-actions { flex:none; gap:3px; }
  .studio-editor .studio-editor-actions button { padding:7px 5px; }
  .studio-editor .studio-workspace-bar { min-width:0; padding-inline:8px; gap:4px; }
  .studio-editor .studio-tabs { gap:5px; }
  .studio-editor .studio-tabs button { padding-inline:3px; font-size:10px; }
  .studio-editor .studio-tools { gap:3px; }
  .studio-editor .studio-tools button { padding:7px 6px; font-size:10px; }
  .studio-toolbelt-dock { bottom:max(12px,env(safe-area-inset-bottom)); }
  .studio-toolbelt { gap:2px; padding:6px 4px; }
  .studio-toolbelt .studio-toolbelt__chevron { flex-basis:14px; width:14px; }
  .studio-toolbelt__icon { width:18px; height:18px; }
}
/* The canvas can be narrow even on desktop when both side panels are open. */
@container studio-toolbelt-area (max-width:380px) {
  .studio-toolbelt { gap:1px; padding-inline:4px; }
  .studio-toolbelt .studio-toolbelt__chevron { flex-basis:12px; width:12px; }
  .studio-toolbelt__icon { width:16px; height:16px; }
  .studio-toolbelt__group[data-tool-group=frame] .studio-toolbelt__icon { width:16px; height:19px; }
  .studio-toolbelt__group[data-tool-group=text] .studio-toolbelt__icon { width:11px; height:16px; }
  .studio-toolbelt__group[data-tool-group=shapes] .studio-toolbelt__icon { width:16px; height:16px; }
}
@container studio-toolbelt-area (max-width:270px) {
  .studio-toolbelt { grid-template-columns:repeat(4,minmax(0,1fr)); height:98px; gap:4px; }
  .studio-toolbelt .studio-toolbelt__chevron { flex-basis:16px; width:16px; }
  .studio-toolbelt__icon { width:18px; height:18px; }
}
@media(prefers-contrast:more) {
  .studio-toolbelt { border-color:#fff; }
  .studio-toolbelt .studio-toolbelt__tool.is-active { outline:2px solid #fff; outline-offset:-2px; }
}