/* Craft canvas */
.craft-canvas{position:relative;width:100%;height:min(100dvh,clamp(300px,52vw,610px));overflow:hidden;border-radius:14px;background:var(--craft-surface);isolation:isolate}
.craft-canvas__preview{width:100%;height:100%;border:0;display:block}
.craft-canvas__expand,.craft-canvas-dialog__close{display:grid;place-items:center;position:absolute;z-index:2;right:16px;top:16px;width:42px;height:42px;padding:0;border:0;border-radius:0;background:transparent;color:var(--craft-ink);cursor:pointer;text-decoration:none}
.craft-canvas__expand i,.craft-canvas-dialog__close i{font-size:22px}.craft-canvas__expand:focus-visible,.craft-canvas-dialog__close:focus-visible{outline:2px solid var(--craft-ink);outline-offset:3px}
.craft-canvas-slot{grid-column:2;position:relative;min-width:0;margin:0 0 var(--home-work-entry-gap)}
@media(max-width:600px){.craft-canvas{height:min(340px,100dvh);border-radius:10px}.craft-canvas__expand{right:10px;top:10px}}

.craft-canvas {
  --craft-surface: #f5f5f2;
  --craft-ink: #20221e;
}
body[data-contrast="dark"] .craft-canvas {
  --craft-surface: #171a18;
  --craft-ink: #f1f2ee;
}

.craft-canvas [hidden] { display: none; }
.craft-canvas-open { overflow: hidden; }
.craft-canvas.is-floating {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 10000;
  border-radius: 0;
}
/* The preview crops a viewport-sized grid. Its iframe never changes size
   when the surrounding frame opens or closes. */
.craft-canvas__preview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100dvh;
  transform: translate(-50%, -50%);
}


/* Keep the controls in the visible frame, independent of the grid crop. */
.craft-canvas__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--craft-ink) 20%, transparent);
  border-radius: 8px;
  background: var(--craft-surface);
  color: var(--craft-ink);
  font: 13px Inter, sans-serif;
}
.craft-canvas__zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}
.craft-canvas__zoom output { min-width: 42px; text-align: center; }


.craft-canvas.is-floating .craft-canvas-dialog__close {
  top: max(16px, calc(env(safe-area-inset-top) + 8px));
  right: max(16px, calc(env(safe-area-inset-right) + 8px));
}
.craft-canvas.is-floating .craft-canvas__zoom {
  right: max(16px, calc(env(safe-area-inset-right) + 8px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
}
.craft-canvas__zoom button[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
}