/* A clearer studio around the existing Inkboard canvas and original mongoose rig. */
#top { box-shadow: 0 7px 24px #080f0830; z-index: 3; }
#top .logo { color: #f5f3e7; }
#title { font-weight: 650; }
#savestate { color: #a8c5a5; }
#top .tb.accent { box-shadow: 0 3px 14px #8bbf8150; }
.tool-label, .tool-group, .panel-name { display: none; }
#stage { background-size: 24px 24px; }
#tool-status {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  max-width: min(250px, 55%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 11px;
  border: 1px solid #79916b;
  border-radius: 10px;
  background: #233324e8;
  color: #e0edcf;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  pointer-events: none;
}
#stage:has(#hint:not([hidden])) #tool-status { display: none; }
.hint { width: min(430px, 88%); padding: 24px 28px; border-radius: 16px; }
.hint canvas { width: 56px; height: 56px; }
.hint p { margin: 7px 0; line-height: 1.5; }
.hint strong { display: block; margin-bottom: 3px; color: #f8f5e8; font-size: 22px; letter-spacing: -.025em; }
.hint .muted { color: #b8cdb2; font-size: 12px; }
#panel .card { border-color: #526348; background: #222d20; box-shadow: inset 0 1px #ffffff08; }
#panel .card h2 { color: #c8dac0; }
#panel .card h2 .muted { color: #e1e8d6; }
#zoombar { padding: 4px; border: 1px solid #53644b; border-radius: 10px; background: #1b291cdd; box-shadow: 0 7px 22px #09120b50; }
#zoombar .tb { min-width: 36px; border-color: #52664d; }
#zoombar #zoom-fit { min-width: 55px; }
#tools { scrollbar-color: #5c7354 transparent; scrollbar-width: thin; }
.tool { flex: none; }
.tool.on { box-shadow: 0 2px 14px #9cdd8850; }
@media (min-width: 1100px) {
  #tools { width: 94px; padding: 13px 7px; gap: 4px; }
  .tool { width: 70px; min-height: 57px; padding: 5px 3px; display: flex; flex-direction: column; gap: 3px; }
  .tool svg { width: 21px; height: 21px; }
  .tool-label { display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .015em; line-height: 1.2; }
  .tool-group { display: block; width: 100%; padding: 7px 7px 2px; color: #829e7b; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-align: center; }
  .tool-sep { width: 64px; margin: 7px 0 1px; }
}
@media (max-width: 820px) {
  #top .panel-toggle { display: inline-flex; align-items: center; gap: 5px; }
  .panel-name { display: inline; font-size: 11px; font-weight: 750; }
  #top .panel-toggle svg { width: 16px; height: 16px; }
  #tools { padding: 0 8px; scrollbar-width: none; }
  #tools::-webkit-scrollbar { display: none; }
  .tool { width: 44px; height: 44px; }
  #zoombar { bottom: 66px; }
}
@media (max-width: 600px) {
  .hint {
    top: 15px;
    left: 50%;
    width: calc(100% - 36px);
    max-width: 360px;
    padding: 13px 15px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;
    text-align: left;
  }
  .hint canvas { width: 42px; height: 42px; grid-row: 1 / span 2; }
  .hint p { margin: 0; font-size: 11px; line-height: 1.35; }
  .hint strong { font-size: 16px; line-height: 1.15; }
  .hint .muted { margin-top: 4px; font-size: 10px; }
  #tool-status { top: 9px; right: 10px; padding: 5px 8px; }
}
@media (max-width: 360px) {
  #top { gap: 5px; }
  #top .tb { padding: 5px 6px; font-size: 11.5px; }
  #top .tb.icon { min-width: 30px; padding: 5px; }
  #top .panel-toggle { gap: 3px; }
  .panel-name { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #top .tb.accent, .tool.on { box-shadow: none; }
}