@inkra/react 0.8.0 → 0.10.0

package/dist/styles.css

@@ -1,5 +1,7 @@
 @import "./tokens.css";
 
+@import "./assets/xiaolai.css";
+
 @font-face {
   font-family: "Trip Map Hand";
   font-style: normal;
@@ -129,13 +131,13 @@
 .inkra-pencil-text__source {
   color: inherit;
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
   font-kerning: none;
   font-variant-ligatures: none;
   letter-spacing: 0;
 }
 
 .inkra-pencil-text {
+  font-family: var(--inkra-font-hand);
   display: inline-block;
   max-width: 100%;
   min-width: 0;
@@ -216,7 +218,7 @@
   color: var(--inkra-on-accent, var(--inkra-accent-strong));
   cursor: pointer;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-weight: var(--inkra-weight-regular);
   justify-content: center;
   letter-spacing: var(--inkra-letter-spacing);
@@ -1412,6 +1414,17 @@
   width: var(--inkra-slider-thumb-size);
 }
 
+/* Radix insets its measured hit target by half a thumb at each endpoint.
+   Translate the whole target back so its visual center follows the track;
+   percentages use the actual thumb box and preserve its 44px hit area. */
+.inkra-slider[data-thumb-alignment="edge"] .inkra-slider__thumb {
+  translate: var(--inkra-slider-thumb-offset) 0;
+}
+
+.inkra-slider[data-thumb-alignment="edge"][data-orientation="vertical"] .inkra-slider__thumb {
+  translate: 0 var(--inkra-slider-thumb-offset);
+}
+
 .inkra-slider__thumb:focus-visible {
   outline: none;
 }
@@ -1458,6 +1471,60 @@
   }
 }
 
+.inkra-circular-slider {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--inkra-circular-slider-diameter);
+  height: var(--inkra-circular-slider-diameter);
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  vertical-align: middle;
+  outline: none;
+}
+.inkra-circular-slider[data-disabled] { cursor: not-allowed; opacity: .55; }
+.inkra-circular-slider[data-readonly] { cursor: default; }
+.inkra-circular-slider__arc { position: absolute; inset: 16px; pointer-events: none; }
+.inkra-circular-slider__track, .inkra-circular-slider__range { position: absolute; inset: 0; }
+.inkra-circular-slider__track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-circular-slider__range { color: var(--inkra-accent-strong); }
+/* ProgressRing shares the stable pencil texture; these scoped rules also support slider-only styles. */
+.inkra-circular-slider .inkra-progress__ring { color: inherit; }
+.inkra-circular-slider .inkra-progress__ring,
+.inkra-circular-slider .inkra-progress__ring-rotation,
+.inkra-circular-slider .inkra-progress__ring-direction,
+.inkra-circular-slider .inkra-progress__ring-ink,
+.inkra-circular-slider .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-circular-slider .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-circular-slider__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-slider-center-width); max-height: var(--inkra-circular-slider-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-circular-slider__center-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-slider-center-icon-size), 100%); height: var(--inkra-circular-slider-center-icon-size); }
+.inkra-circular-slider__center-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-circular-slider__center-content { width: 100%; min-width: 0; max-width: 100%; max-height: var(--inkra-circular-slider-center-height); overflow-wrap: anywhere; }
+.inkra-circular-slider__center-content > * { max-width: 100%; }
+.inkra-circular-slider__value { display: block; white-space: nowrap; max-width: 100%; pointer-events: none; text-align: center; font-size: var(--inkra-circular-slider-center-font-size); line-height: var(--inkra-circular-slider-center-line-height); }
+.inkra-circular-slider__thumb { position: absolute; transform: translate(-50%, -50%); width: var(--inkra-touch-target); height: var(--inkra-touch-target); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.inkra-circular-slider__thumb-surface { display: block !important; width: var(--inkra-circular-slider-thumb-size); height: var(--inkra-circular-slider-thumb-size); border-radius: 50%; }
+.inkra-circular-slider__focus-ring { --inkra-ink: var(--inkra-focus); position: absolute !important; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-circular-slider:focus-visible .inkra-circular-slider__focus-ring { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-circular-slider__track { color: GrayText; opacity: 1; }
+  .inkra-circular-slider__range { color: Highlight; }
+  .inkra-circular-slider__thumb-surface { border: 2px solid ButtonText; background: Canvas; }
+  .inkra-circular-slider:focus-visible .inkra-circular-slider__thumb-surface { outline: var(--inkra-focus-width) solid Highlight; outline-offset: var(--inkra-focus-offset); }
+  .inkra-circular-slider__focus-ring { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}
+
 .inkra-selection-control {
   align-items: center;
   color: var(--inkra-ink);
@@ -1723,6 +1790,56 @@
   }
 }
 
+/* Circular switches retain the native checkbox while sharing the dial's pencil geometry. */
+.inkra-switch--circular {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  align-content: start;
+  width: var(--inkra-circular-switch-diameter);
+  gap: 2px;
+}
+.inkra-switch--circular > .inkra-selection-control__input {
+  width: var(--inkra-circular-switch-diameter);
+  height: var(--inkra-circular-switch-diameter);
+  inset: 0 auto auto 0;
+  touch-action: manipulation;
+}
+.inkra-switch--circular > .inkra-selection-control__copy { width: 100%; text-align: center; }
+.inkra-switch[data-readonly="true"] { cursor: default; }
+.inkra-switch__circular { display: flex; align-items: center; justify-content: center; position: relative; width: var(--inkra-circular-switch-diameter); height: var(--inkra-circular-switch-diameter); pointer-events: none; user-select: none; }
+.inkra-switch__circular-arc { position: absolute; inset: 16px; transform: rotate(225deg); }
+.inkra-switch__circular-track, .inkra-switch__circular-range { position: absolute; inset: 0; }
+.inkra-switch__circular-track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-switch__circular-range { color: var(--inkra-accent-strong); }
+.inkra-switch__circular .inkra-progress__ring { color: inherit; }
+.inkra-switch__circular .inkra-progress__ring,
+.inkra-switch__circular .inkra-progress__ring-rotation,
+.inkra-switch__circular .inkra-progress__ring-direction,
+.inkra-switch__circular .inkra-progress__ring-ink,
+.inkra-switch__circular .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-switch__circular .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-switch__circular-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-switch-center-width); max-height: var(--inkra-circular-switch-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-switch__circular-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-switch-icon-size), 100%); height: var(--inkra-circular-switch-icon-size); }
+.inkra-switch__circular-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-switch__circular-content { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+.inkra-switch__circular-content > * { max-width: 100%; }
+.inkra-switch__circular-value { display: block; white-space: nowrap; max-width: 100%; text-align: center; font-size: var(--inkra-circular-switch-value-size); line-height: var(--inkra-circular-switch-value-line); }
+.inkra-switch__circular-focus { --inkra-ink: var(--inkra-focus); --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: 10px; opacity: 0; pointer-events: none; border-radius: 50%; }
+.inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular-focus { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-switch--circular > .inkra-selection-control__input { position: absolute; opacity: 0; z-index: 2; }
+  .inkra-switch__circular-track { color: GrayText; opacity: 1; }
+  .inkra-switch__circular-range { color: Highlight; }
+  .inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular { outline: var(--inkra-focus-width) solid Highlight; outline-offset: -10px; border-radius: 50%; }
+  .inkra-switch__circular-focus { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}
+
 .inkra-portal-theme-bridge {
   display: contents;
   font-family: var(--inkra-font-body);
@@ -2436,216 +2553,1009 @@
   flex: 1 1 auto;
   min-width: 0;
 }
-
-.inkra-select__item-surface > .inkra-pencil-surface__ink {
-  opacity: 0;
-  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+
+.inkra-select__item-surface > .inkra-pencil-surface__ink {
+  opacity: 0;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-select__item[data-highlighted] .inkra-select__item-surface,
+.inkra-select__item[data-selected] .inkra-select__item-surface,
+.inkra-select__item[data-state="checked"] .inkra-select__item-surface {
+  color: var(--inkra-selection-foreground);
+}
+
+.inkra-select__item[data-highlighted] .inkra-select__item-surface > .inkra-pencil-surface__ink,
+.inkra-select__item[data-selected] .inkra-select__item-surface > .inkra-pencil-surface__ink,
+.inkra-select__item[data-state="checked"] .inkra-select__item-surface > .inkra-pencil-surface__ink {
+  opacity: 1;
+}
+
+.inkra-select__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.inkra-select__item-indicator {
+  align-items: center;
+  display: inline-flex;
+  height: var(--inkra-icon-sm);
+  inset-inline-end: var(--inkra-space-3);
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--inkra-icon-sm);
+}
+
+.inkra-select__scroll-button {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  cursor: default;
+  display: flex;
+  height: var(--inkra-control-xs);
+  justify-content: center;
+}
+
+.inkra-select__separator {
+  color: var(--inkra-border);
+  height: 8px;
+  margin: 0 var(--inkra-space-2);
+}
+
+.inkra-select__separator > .inkra-pencil-line {
+  height: 8px;
+  width: 100%;
+}
+
+@keyframes inkra-select-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes inkra-select-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-select__content,
+  .inkra-select__content[data-ending-style],
+  .inkra-select__content[data-state="closed"] {
+    animation: none;
+  }
+
+  .inkra-select__trigger-icon,
+  .inkra-select__focus-ring,
+  .inkra-select-stepper__button .inkra-pencil-icon,
+  .inkra-select__item-surface > .inkra-pencil-surface__ink {
+    transition-duration: 0ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-select__trigger:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: var(--inkra-focus-offset);
+  }
+
+  .inkra-select__focus-ring {
+    display: none !important;
+  }
+
+  .inkra-select__trigger-surface,
+  .inkra-select__content-surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-select__trigger[data-invalid="true"] .inkra-select__trigger-surface {
+    border-color: Mark;
+  }
+
+  .inkra-select__item[data-highlighted] .inkra-select__item-surface,
+  .inkra-select__item[data-selected] .inkra-select__item-surface,
+  .inkra-select__item[data-state="checked"] .inkra-select__item-surface {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .inkra-select__item:focus-visible {
+    outline: var(--inkra-focus-width) solid CanvasText;
+    outline-offset: calc(-1 * var(--inkra-focus-offset));
+  }
+}
+
+@media print {
+  .inkra-select__content {
+    animation: none;
+  }
+}
+
+.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
+.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
+.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
+.inkra-tabs__list {
+  display: flex;
+  gap: var(--inkra-space-2);
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-padding-inline: var(--inkra-focus-offset);
+}
+.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
+.inkra-tabs__list[data-divided] { gap: 24px; }
+.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="vertical"] { inset-inline-start: -16px; top: 8px; width: 8px; height: calc(100% - 16px); }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="horizontal"] { inset-inline: 8px; top: -16px; width: calc(100% - 16px); height: 8px; }
+.inkra-tabs__trigger:first-child > .inkra-tabs__divider { display: none; }
+.inkra-tabs__list[data-align="center"] { justify-content: safe center; }
+.inkra-tabs__list[data-align="end"] { justify-content: safe end; }
+.inkra-tabs__list[data-full-width] { width: 100%; }
+.inkra-tabs__list[data-full-width] > .inkra-tabs__trigger { flex: 1 0 0; }
+.inkra-tabs__list[data-orientation="vertical"][data-full-width] > .inkra-tabs__trigger { flex: none; width: 100%; }
+.inkra-tabs__trigger {
+  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
+  min-height: var(--inkra-touch-target); min-width: var(--inkra-touch-target);
+  padding: var(--inkra-space-2) var(--inkra-tabs-padding); border: 0; gap: var(--inkra-space-2);
+  background: transparent; color: var(--inkra-ink-muted); font: inherit;
+  white-space: nowrap; cursor: pointer; border-radius: var(--inkra-radius-md);
+  font-size: var(--inkra-tabs-font-size); line-height: var(--inkra-line-ui);
+}
+.inkra-tabs[data-size="lg"] .inkra-tabs__trigger { min-height: 48px; }
+.inkra-tabs__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--inkra-tabs-icon-size); height: var(--inkra-tabs-icon-size); flex: none; pointer-events: none; }
+.inkra-tabs__icon > * { width: 100%; height: 100%; }
+.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
+.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
+.inkra-tabs__trigger:focus-visible { outline: 0; }
+.inkra-pencil-surface.inkra-tabs__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  position: absolute !important;
+  display: block !important;
+  inset: var(--inkra-focus-width);
+  pointer-events: none;
+  opacity: 0;
+  z-index: 2;
+}
+.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
+.inkra-tabs__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
+.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
+.inkra-tabs__label { position: relative; }
+.inkra-tabs__content { min-width: 0; }
+.inkra-tabs__content[hidden] { display: none !important; }
+.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
+.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
+.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
+.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
+.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
+.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
+.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
+.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
+.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
+.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
+.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
+.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
+@media (forced-colors: active) {
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+  .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
+  .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
+  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
+}
+@media print {
+  .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+}
+
+.inkra-guide__spotlight,
+.inkra-guide__backdrop {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-guide__backdrop {
+  background: var(--inkra-overlay);
+}
+
+.inkra-guide__spotlight {
+  box-shadow: 0 0 0 100vmax var(--inkra-overlay);
+  overflow: visible;
+}
+
+.inkra-guide__spotlight > .inkra-pencil-surface__ink,
+.inkra-guide__spotlight > .inkra-pencil-surface__border {
+  border-radius: var(--inkra-guide-highlight-radius, 8px);
+}
+
+.inkra-guide__content {
+  max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
+  max-width: min(24rem, calc(100dvw - var(--inkra-space-6)));
+  outline: 0;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: min(22rem, calc(100dvw - var(--inkra-space-6)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-guide__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-guide__skip-layer {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 2);
+}
+
+.inkra-guide__skip {
+  color: var(--inkra-ink-muted);
+  opacity: .72;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.inkra-guide__skip:is(:hover, :focus-visible) {
+  color: var(--inkra-ink);
+  opacity: 1;
+}
+
+.inkra-guide__skip[data-placement^="top"] {
+  inset-block-start: max(var(--inkra-space-4), env(safe-area-inset-top));
+}
+
+.inkra-guide__skip[data-placement^="bottom"] {
+  inset-block-end: max(var(--inkra-space-4), env(safe-area-inset-bottom));
+}
+
+.inkra-guide__skip[data-placement$="start"] {
+  inset-inline-start: max(var(--inkra-space-4), env(safe-area-inset-left));
+}
+
+.inkra-guide__skip[data-placement$="end"] {
+  inset-inline-end: max(var(--inkra-space-4), env(safe-area-inset-right));
+}
+
+.inkra-guide__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  width: 100%;
+}
+
+.inkra-guide__panel {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-space-4);
+  max-height: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-5);
+}
+
+.inkra-guide__header,
+.inkra-guide__footer,
+.inkra-guide__navigation {
+  align-items: center;
+  display: flex;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-guide__header {
+  align-items: flex-start;
+}
+
+.inkra-guide__heading {
+  display: grid;
+  flex: 1;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+}
+
+.inkra-guide__progress {
+  color: var(--inkra-ink-subtle);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-guide__title {
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-guide__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+}
+
+.inkra-guide__close {
+  flex: none;
+}
+
+.inkra-guide__footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.inkra-guide__footer > :empty {
+  display: none;
+}
+
+.inkra-guide__navigation {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.inkra-guide__footer .inkra-button {
+  max-width: 100%;
+}
+
+@media (max-width: 30rem) {
+  .inkra-guide__content {
+    max-height: calc(100dvh - var(--inkra-space-4));
+    max-width: calc(100dvw - var(--inkra-space-4));
+    width: calc(100dvw - var(--inkra-space-4));
+  }
+
+  .inkra-guide__panel {
+    padding: var(--inkra-space-4);
+  }
+
+  .inkra-guide__footer,
+  .inkra-guide__navigation {
+    width: 100%;
+  }
+
+  .inkra-guide__footer > .inkra-button,
+  .inkra-guide__navigation > .inkra-button {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-guide__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-guide__backdrop {
+    background: CanvasText;
+    opacity: 0.25;
+  }
+
+  .inkra-guide__spotlight {
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, CanvasText 25%, transparent);
+    outline: 2px solid Highlight;
+  }
+
+  .inkra-guide__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-guide__skip {
+    color: ButtonText;
+    opacity: 1;
+  }
+}
+
+.inkra-loading {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.inkra-loading[data-mode="inline"] {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+.inkra-loading[data-mode="region"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  overflow: hidden;
+}
+
+.inkra-loading[data-mode="fullscreen"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inset: 0;
+  min-block-size: 100dvh;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: max(var(--inkra-space-4), env(safe-area-inset-top)) max(var(--inkra-space-4), env(safe-area-inset-right)) max(var(--inkra-space-4), env(safe-area-inset-bottom)) max(var(--inkra-space-4), env(safe-area-inset-left));
+  position: fixed;
+  z-index: var(--inkra-z-modal, 30);
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) { pointer-events: none; }
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) :is(.inkra-loading__actions, .inkra-loading__tip-controls, .inkra-loading__slot, .inkra-loading__content-layer) { pointer-events: auto; }
+
+.inkra-loading__theme-anchor {
+  block-size: 0;
+  inline-size: 0;
+  inset: 0 auto auto 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+.inkra-loading__sr-status {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.inkra-loading__background,
+.inkra-loading__veil {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-loading[data-mode="fullscreen"] > :is(.inkra-loading__background, .inkra-loading__veil) {
+  position: fixed;
+}
+
+.inkra-loading__background { overflow: hidden; }
+.inkra-loading__background > :is(img, video, canvas, picture),
+.inkra-loading__background > picture > img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.inkra-loading__veil {
+  background: color-mix(in srgb, var(--inkra-paper) 86%, transparent);
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__background,
+.inkra-loading[data-mode="inline"] .inkra-loading__veil { display: none; }
+
+.inkra-loading__layout {
+  align-items: center;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  inline-size: 100%;
+  justify-items: center;
+  min-block-size: 0;
+  min-inline-size: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__layout {
+  grid-row: 3;
+}
+
+.inkra-loading__main {
+  align-items: center;
+  display: grid;
+  gap: var(--inkra-space-4);
+  inline-size: min(100%, 34rem);
+  justify-items: center;
+  min-inline-size: 0;
+  padding: var(--inkra-space-4);
+  text-align: center;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__main {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--inkra-space-2);
+  inline-size: auto;
+  justify-items: initial;
+  padding: 0;
+  text-align: start;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__copy { gap: 0; }
+.inkra-loading[data-mode="inline"] .inkra-loading__description,
+.inkra-loading[data-mode="inline"] .inkra-loading__tips,
+.inkra-loading[data-mode="inline"] .inkra-loading__stages { display: none; }
+.inkra-loading[data-mode="inline"] .inkra-loading__progress { inline-size: min(14rem, 45vw); }
+.inkra-loading[data-mode="inline"] .inkra-progress[data-shape="circular"] { inline-size: 32px; }
+.inkra-loading[data-mode="inline"] .inkra-progress__ring { --inkra-progress-diameter: 32px !important; }
+
+.inkra-loading__logo {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+}
+
+.inkra-loading__logo > :is(img, svg) { block-size: auto; max-block-size: 7rem; max-inline-size: min(16rem, 100%); }
+.inkra-loading__copy { display: grid; gap: var(--inkra-space-2); max-inline-size: 100%; }
+.inkra-loading__title { font-size: var(--inkra-text-2xl); line-height: var(--inkra-line-tight); overflow-wrap: anywhere; }
+.inkra-loading__description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-loading[data-mode="inline"] .inkra-loading__title { font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
+
+.inkra-loading__progress { inline-size: min(100%, 28rem); }
+.inkra-loading__animation-progress {
+  display: grid;
+  gap: var(--inkra-space-2);
+  inline-size: min(100%, 28rem);
+  justify-items: center;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation-progress {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+}
+.inkra-loading__animation-label {
+  line-height: var(--inkra-line-ui);
+  overflow-wrap: anywhere;
+}
+.inkra-loading__animation {
+  block-size: 48px;
+  color: var(--inkra-accent-strong);
+  flex: 0 0 auto;
+  inline-size: 48px;
+  position: relative;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation {
+  block-size: 32px;
+  inline-size: 32px;
+}
+.inkra-loading__animation-visual {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  inset: 0;
+  position: absolute;
+}
+.inkra-loading__animation-mark { position: absolute; }
+
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation {
+  animation: inkra-loading-orbit 1100ms linear infinite;
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark {
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 39.5833%;
+  transform: rotate(0deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(2) {
+  opacity: .68;
+  transform: rotate(120deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(3) {
+  opacity: .4;
+  transform: rotate(240deg) translateY(-175%);
+}
+
+.inkra-loading[data-animation="dots"] .inkra-loading__animation {
+  display: block;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark {
+  animation: inkra-loading-dot 900ms var(--inkra-ease) infinite;
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 8.3333%;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 120ms; inset-inline-start: 39.5833%; }
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 240ms; inset-inline-start: 70.8333%; }
+
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark {
+  animation: inkra-loading-pulse 1500ms var(--inkra-ease) infinite;
+  inset: 12.5%;
+}
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 300ms; }
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 600ms; }
+
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark {
+  animation: inkra-loading-trail 1050ms var(--inkra-ease) infinite;
+  block-size: 12.5%;
+  inline-size: 58.3333%;
+  inset-block-start: 25%;
+  inset-inline-start: 20.8333%;
+  transform-origin: center;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(2) {
+  animation-delay: 140ms;
+  inset-block-start: 43.75%;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(3) {
+  animation-delay: 280ms;
+  inset-block-start: 62.5%;
+}
+
+.inkra-loading__stages { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 28rem); text-align: start; }
+.inkra-loading__stage { align-items: start; display: grid; gap: var(--inkra-space-3); grid-template-columns: 36px minmax(0, 1fr); min-inline-size: 0; }
+.inkra-loading__stage-marker { align-items: center; block-size: 32px; display: flex; inline-size: 32px; justify-content: center; }
+.inkra-loading__stage[data-state="pending"] { color: var(--inkra-ink-muted); }
+.inkra-loading__stage[data-state="complete"] { color: var(--inkra-success-foreground); }
+.inkra-loading__stage[data-state="error"] { color: var(--inkra-danger-foreground); }
+.inkra-loading__stage-copy { display: grid; gap: var(--inkra-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
+.inkra-loading__stage-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
+
+.inkra-loading__tips { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 32rem); min-block-size: 2.5rem; place-items: center; }
+.inkra-loading__tip { line-height: var(--inkra-line-body); max-inline-size: 100%; overflow-wrap: anywhere; }
+.inkra-loading__tips[data-transition="fade"] .inkra-loading__tip { animation: inkra-loading-tip-fade var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tips[data-transition="slide"] .inkra-loading__tip { animation: inkra-loading-tip-slide var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tip-controls { align-items: center; display: flex; gap: var(--inkra-space-2); }
+.inkra-loading__tip-position { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 4ch; }
+
+.inkra-loading__content-layer { inline-size: 100%; min-inline-size: 0; }
+.inkra-loading__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: center; }
+
+.inkra-loading__slot {
+  max-block-size: calc(50dvh - var(--inkra-space-8));
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+.inkra-loading__slot[data-slot="top-start"] { align-self: start; grid-column: 1; grid-row: 1; justify-self: start; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="top-end"] { align-self: start; grid-column: 3; grid-row: 1; justify-self: end; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="center"] { align-self: center; grid-column: 2; grid-row: 2; justify-self: center; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-start"] { align-self: end; grid-column: 1; grid-row: 3; justify-self: start; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-center"] { align-self: end; grid-column: 2; grid-row: 3; justify-self: center; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-end"] { align-self: end; grid-column: 3; grid-row: 3; justify-self: end; margin-block-start: var(--inkra-space-4); }
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__slot[data-slot^="bottom-"] {
+  grid-row: 4;
+}
+
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="start"] { margin-inline-start: var(--inkra-space-4); }
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="end"] { margin-inline-end: var(--inkra-space-4); }
+
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__layout { align-items: end; }
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__main { padding-block-end: max(var(--inkra-space-8), 10dvh); }
+.inkra-loading[data-preset="intel"] .inkra-loading__main { justify-items: start; margin-inline-start: 0; text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__main { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(14rem, 1.2fr); text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__copy,
+.inkra-loading[data-preset="staged"] .inkra-loading__logo { justify-self: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: 2; grid-row: 1 / span 5; }
+.inkra-loading[data-preset="edge"] { align-items: start; min-block-size: auto; padding: 0; }
+.inkra-loading[data-preset="edge"] .inkra-loading__veil,
+.inkra-loading[data-preset="edge"] .inkra-loading__background { display: none; }
+.inkra-loading[data-preset="edge"] .inkra-loading__layout { justify-items: stretch; }
+.inkra-loading[data-preset="edge"] .inkra-loading__main { align-items: center; display: flex; inline-size: 100%; justify-content: space-between; padding: var(--inkra-space-2) var(--inkra-space-4); text-align: start; }
+.inkra-loading__edge-line { block-size: 8px; inset-block-end: 0; inset-inline: 0; pointer-events: none; position: absolute; }
+
+.inkra-loading__skeleton { display: grid; gap: var(--inkra-space-3); inline-size: min(100%, 36rem); }
+.inkra-loading__skeleton-grid { display: grid; gap: var(--inkra-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+@keyframes inkra-loading-tip-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes inkra-loading-tip-slide { from { opacity: 0; transform: translateY(var(--inkra-space-2)); } to { opacity: 1; transform: translateY(0); } }
+@keyframes inkra-loading-orbit { to { transform: rotate(360deg); } }
+@keyframes inkra-loading-dot { 0%, 70%, 100% { opacity: .36; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-45%); } }
+@keyframes inkra-loading-pulse { 0% { opacity: .9; transform: scale(.35); } 75%, 100% { opacity: 0; transform: scale(1); } }
+@keyframes inkra-loading-trail { 0%, 100% { opacity: .28; transform: scaleX(.45); } 50% { opacity: 1; transform: scaleX(1); } }
+
+@media (max-width: 40rem), (max-height: 32rem) {
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--inkra-space-2);
+  }
+  .inkra-loading[data-mode="fullscreen"] { padding: max(var(--inkra-space-2), env(safe-area-inset-top)) max(var(--inkra-space-2), env(safe-area-inset-right)) max(var(--inkra-space-2), env(safe-area-inset-bottom)) max(var(--inkra-space-2), env(safe-area-inset-left)); }
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) .inkra-loading__layout { flex: 1 0 auto; order: 4; }
+  .inkra-loading__main { gap: var(--inkra-space-3); padding: var(--inkra-space-3); }
+  .inkra-loading__title { font-size: var(--inkra-text-xl); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__main { grid-template-columns: minmax(0, 1fr); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: auto; grid-row: auto; }
+  .inkra-loading__slot { flex: none; margin-block: 0 !important; max-block-size: none; max-inline-size: min(100%, 28rem); overflow: visible; }
+  .inkra-loading__slot[data-slot="top-start"] { align-self: start; order: 1; }
+  .inkra-loading__slot[data-slot="top-end"] { align-self: end; order: 2; }
+  .inkra-loading__slot[data-slot="center"] { align-self: center; order: 3; }
+  .inkra-loading__slot[data-slot="bottom-start"] { align-self: start; order: 5; }
+  .inkra-loading__slot[data-slot="bottom-center"] { align-self: center; order: 6; }
+  .inkra-loading__slot[data-slot="bottom-end"] { align-self: end; order: 7; }
+  .inkra-loading__skeleton-grid { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-loading__veil { background: Canvas; opacity: .92; }
+  .inkra-loading[data-blocking] { border: 1px solid CanvasText; }
+  .inkra-loading__animation { color: CanvasText; }
+}
+
+@media print {
+  .inkra-loading[data-mode="fullscreen"] { min-block-size: auto; position: static; }
+  .inkra-loading__background, .inkra-loading__veil { display: none; }
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}
+
+.inkra-infinite-scroll {
+  --inkra-infinite-scroll-pull-distance: 0px;
+  --inkra-infinite-scroll-indicator-inline-offset: 0px;
+  --inkra-infinite-scroll-indicator-block-offset: 0px;
+  --inkra-infinite-scroll-indicator-viewport-inline-size: 100%;
+  --inkra-infinite-scroll-indicator-viewport-block-size: 100%;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(min-content, 1fr) auto;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  color: var(--inkra-ink);
+}
+
+.inkra-infinite-scroll__body {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr) auto;
+  grid-row: 2;
+  min-block-size: 0;
+  min-inline-size: 0;
+  transform: translate3d(0, 0, 0);
+  transition: transform var(--inkra-motion-slow) cubic-bezier(0.22, 1.45, 0.36, 1);
+}
+
+.inkra-infinite-scroll[data-pull-direction] > .inkra-infinite-scroll__body {
+  transition: none;
+}
+
+.inkra-infinite-scroll__content {
+  grid-column: 2;
+  grid-row: 1;
+  min-block-size: 100%;
+  min-inline-size: 100%;
+}
+
+.inkra-infinite-scroll[data-pull-direction="top"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, var(--inkra-infinite-scroll-pull-distance), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="bottom"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="left"] > .inkra-infinite-scroll__body {
+  transform: translate3d(var(--inkra-infinite-scroll-pull-distance), 0, 0);
+}
+.inkra-infinite-scroll[data-pull-direction="right"] > .inkra-infinite-scroll__body {
+  transform: translate3d(calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0, 0);
+}
+
+.inkra-infinite-scroll__indicator {
+  position: relative;
+  display: none;
+  min-block-size: 0;
+  min-inline-size: 0;
+  z-index: 1;
+}
+.inkra-infinite-scroll__indicator[data-active] { display: flex; }
+.inkra-infinite-scroll__indicator[data-direction="top"],
+.inkra-infinite-scroll__indicator[data-direction="bottom"] {
+  inline-size: 100%;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="top"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="bottom"] {
+  min-block-size: 52px;
+}
+.inkra-infinite-scroll__indicator[data-direction="left"],
+.inkra-infinite-scroll__indicator[data-direction="right"] {
+  align-self: stretch;
+  grid-row: 1;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="left"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="right"] {
+  min-inline-size: 112px;
+}
+.inkra-infinite-scroll__indicator[data-direction="top"] { grid-row: 1; }
+.inkra-infinite-scroll__indicator[data-direction="bottom"] { grid-row: 3; }
+.inkra-infinite-scroll__indicator[data-direction="left"] { grid-column: 1; }
+.inkra-infinite-scroll__indicator[data-direction="right"] { grid-column: 3; }
+
+/* Pull feedback reveals inside the elastic gap, without changing scroll layout. */
+.inkra-infinite-scroll__indicator[data-pulling] {
+  position: absolute;
+  grid-area: auto;
+  left: var(--inkra-pull-left, 0px);
+  top: var(--inkra-pull-top, 0px);
+  inline-size: var(--inkra-pull-width, 0px);
+  block-size: var(--inkra-pull-height, 0px);
+  min-inline-size: 0 !important;
+  min-block-size: 0 !important;
+  overflow: clip;
+  pointer-events: none;
+}
+.inkra-infinite-scroll__indicator[data-pulling] .inkra-infinite-scroll__indicator-surface {
+  padding: 0;
+  max-inline-size: none;
+  min-block-size: 0;
+}
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="right"] .inkra-infinite-scroll__loading-label {
+  display: none;
+}
+
+.inkra-infinite-scroll__indicator-surface {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--inkra-space-1) var(--inkra-space-2);
+}
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-surface,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  min-block-size: 100%;
+  max-inline-size: 144px;
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="top"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="bottom"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="left"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+.inkra-infinite-scroll__indicator-content > .inkra-progress { max-inline-size: 240px; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-content > .inkra-progress,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-content > .inkra-progress { min-inline-size: 96px; }
+.inkra-infinite-scroll__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--inkra-space-2);
+  min-inline-size: 0;
 }
+.inkra-infinite-scroll__loading > .inkra-progress { flex: 0 0 auto; }
+.inkra-infinite-scroll__loading-label { min-inline-size: 0; white-space: nowrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading { flex-wrap: wrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading-label { white-space: normal; }
 
-.inkra-select__item[data-highlighted] .inkra-select__item-surface,
-.inkra-select__item[data-selected] .inkra-select__item-surface,
-.inkra-select__item[data-state="checked"] .inkra-select__item-surface {
-  color: var(--inkra-selection-foreground);
+@media (prefers-reduced-motion: reduce) {
+  .inkra-infinite-scroll__body { transition-duration: 0ms; }
 }
 
-.inkra-select__item[data-highlighted] .inkra-select__item-surface > .inkra-pencil-surface__ink,
-.inkra-select__item[data-selected] .inkra-select__item-surface > .inkra-pencil-surface__ink,
-.inkra-select__item[data-state="checked"] .inkra-select__item-surface > .inkra-pencil-surface__ink {
-  opacity: 1;
+@media print {
+  .inkra-infinite-scroll { overflow: visible; }
+  .inkra-infinite-scroll__body { transform: none !important; }
 }
 
-.inkra-select__item[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
+.inkra-masonry {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-masonry-row-gap, 16px) var(--inkra-masonry-column-gap, 16px);
+  grid-template-columns: repeat(var(--inkra-masonry-columns, 1), minmax(0, 1fr));
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: clip;
+  overflow-clip-margin: 1px;
+  position: relative;
 }
 
-.inkra-select__item-indicator {
-  align-items: center;
-  display: inline-flex;
-  height: var(--inkra-icon-sm);
-  inset-inline-end: var(--inkra-space-3);
-  justify-content: center;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--inkra-icon-sm);
+.inkra-masonry[data-mode="adaptive"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--inkra-masonry-min-column-width, 240px)), 1fr));
 }
 
-.inkra-select__scroll-button {
-  align-items: center;
-  color: var(--inkra-ink-muted);
-  cursor: default;
-  display: flex;
-  height: var(--inkra-control-xs);
-  justify-content: center;
+.inkra-masonry[data-layout="ready"] {
+  display: block;
 }
 
-.inkra-select__separator {
-  color: var(--inkra-border);
-  height: 8px;
-  margin: 0 var(--inkra-space-2);
+.inkra-masonry__item {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
 }
 
-.inkra-select__separator > .inkra-pencil-line {
-  height: 8px;
-  width: 100%;
+.inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+  inset-block-start: 0;
+  left: 0;
+  position: absolute;
 }
 
-@keyframes inkra-select-content-in {
-  from {
-    opacity: 0;
-    transform: translateY(var(--inkra-space-1)) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+.inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+  transition: transform var(--inkra-motion-normal, 180ms) var(--inkra-ease, ease);
 }
 
-@keyframes inkra-select-content-out {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(var(--inkra-space-1)) scale(0.98);
-  }
+.inkra-masonry__item > * {
+  max-inline-size: 100%;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .inkra-select__content,
-  .inkra-select__content[data-ending-style],
-  .inkra-select__content[data-state="closed"] {
-    animation: none;
-  }
-
-  .inkra-select__trigger-icon,
-  .inkra-select__focus-ring,
-  .inkra-select-stepper__button .inkra-pencil-icon,
-  .inkra-select__item-surface > .inkra-pencil-surface__ink {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
     transition-duration: 0ms;
   }
 }
 
 @media (forced-colors: active) {
-  .inkra-select__trigger:focus-visible {
-    outline: var(--inkra-focus-width) solid Highlight;
-    outline-offset: var(--inkra-focus-offset);
-  }
-
-  .inkra-select__focus-ring {
-    display: none !important;
-  }
-
-  .inkra-select__trigger-surface,
-  .inkra-select__content-surface {
-    background: Canvas;
-    border: 1px solid CanvasText;
-  }
-
-  .inkra-select__trigger[data-invalid="true"] .inkra-select__trigger-surface {
-    border-color: Mark;
-  }
-
-  .inkra-select__item[data-highlighted] .inkra-select__item-surface,
-  .inkra-select__item[data-selected] .inkra-select__item-surface,
-  .inkra-select__item[data-state="checked"] .inkra-select__item-surface {
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .inkra-select__item:focus-visible {
-    outline: var(--inkra-focus-width) solid CanvasText;
-    outline-offset: calc(-1 * var(--inkra-focus-offset));
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
   }
 }
 
 @media print {
-  .inkra-select__content {
-    animation: none;
+  .inkra-masonry,
+  .inkra-masonry[data-layout="ready"] {
+    block-size: auto !important;
+    display: grid;
+    overflow: visible;
   }
-}
 
-.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
-.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
-.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
-.inkra-tabs__list {
-  display: flex;
-  gap: var(--inkra-space-2);
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-padding-inline: var(--inkra-focus-offset);
-}
-.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
-.inkra-tabs__list[data-divided] { gap: 24px; }
-.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
-.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="vertical"] { inset-inline-start: -16px; top: 8px; width: 8px; height: calc(100% - 16px); }
-.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="horizontal"] { inset-inline: 8px; top: -16px; width: calc(100% - 16px); height: 8px; }
-.inkra-tabs__trigger:first-child > .inkra-tabs__divider { display: none; }
-.inkra-tabs__list[data-align="center"] { justify-content: safe center; }
-.inkra-tabs__list[data-align="end"] { justify-content: safe end; }
-.inkra-tabs__list[data-full-width] { width: 100%; }
-.inkra-tabs__list[data-full-width] > .inkra-tabs__trigger { flex: 1 0 0; }
-.inkra-tabs__list[data-orientation="vertical"][data-full-width] > .inkra-tabs__trigger { flex: none; width: 100%; }
-.inkra-tabs__trigger {
-  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
-  min-height: var(--inkra-touch-target); min-width: var(--inkra-touch-target);
-  padding: var(--inkra-space-2) var(--inkra-tabs-padding); border: 0; gap: var(--inkra-space-2);
-  background: transparent; color: var(--inkra-ink-muted); font: inherit;
-  white-space: nowrap; cursor: pointer; border-radius: var(--inkra-radius-md);
-  font-size: var(--inkra-tabs-font-size); line-height: var(--inkra-line-ui);
-}
-.inkra-tabs[data-size="lg"] .inkra-tabs__trigger { min-height: 48px; }
-.inkra-tabs__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--inkra-tabs-icon-size); height: var(--inkra-tabs-icon-size); flex: none; pointer-events: none; }
-.inkra-tabs__icon > * { width: 100%; height: 100%; }
-.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
-.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
-.inkra-tabs__trigger:focus-visible { outline: 0; }
-.inkra-pencil-surface.inkra-tabs__focus-ring {
-  --inkra-accent-strong: var(--inkra-focus);
-  position: absolute !important;
-  display: block !important;
-  inset: var(--inkra-focus-width);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 2;
-}
-.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
-.inkra-tabs__content:focus-visible {
-  outline: var(--inkra-focus-width) solid var(--inkra-focus);
-  outline-offset: calc(-1 * var(--inkra-focus-width));
-}
-.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
-.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
-.inkra-tabs__label { position: relative; }
-.inkra-tabs__content { min-width: 0; }
-.inkra-tabs__content[hidden] { display: none !important; }
-.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
-.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
-.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
-.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
-.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
-.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
-.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
-.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
-.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
-.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
-.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
-.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
-.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
-@media (forced-colors: active) {
-  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
-  .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
-  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
-  .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
-  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
-}
-@media print {
-  .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
-  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+  .inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+    inline-size: auto !important;
+    position: static;
+    transform: none !important;
+    transition: none;
+  }
 }
 
 .inkra-tooltip__content {
@@ -3476,7 +4386,7 @@
 
 .inkra-slot__empty-mark {
   color: var(--inkra-ink-muted);
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: calc(var(--inkra-slot-size) * 0.4);
   line-height: 1;
 }
@@ -3941,7 +4851,53 @@
 
 .inkra-number-ticker__native-value {
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
+}
+
+.inkra-number-ticker__reels {
+  display: inline-flex;
+  align-items: baseline;
+  unicode-bidi: isolate;
+  line-height: var(--inkra-line-ui, 1.45);
+}
+
+.inkra-number-ticker__column {
+  display: inline-grid;
+  flex: none;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.inkra-number-ticker__column-inner {
+  display: grid;
+  min-width: 0;
+  height: 1lh;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__face {
+  grid-area: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__column[data-digit] .inkra-number-ticker__face {
+  width: 1ch;
+}
+
+.inkra-number-ticker__face > .inkra-pencil-text {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
+  .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
+  .inkra-number-ticker__column[data-departing] { display: none; }
+  .inkra-number-ticker__face[data-face="from"] { display: none; }
+  .inkra-number-ticker__face[data-face="to"] { transform: none !important; opacity: 1 !important; }
 }
 
 .inkra-number-ticker__prefix,
@@ -5719,6 +6675,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-image-viewer__body {
+  position: relative;
   display: grid;
   flex: 1 1 auto;
   min-block-size: var(--inkra-touch-target);
@@ -5866,6 +6823,24 @@ div.inkra-choice-grid > .inkra-radio-group {
   padding: var(--inkra-focus-offset);
   position: relative;
   scrollbar-gutter: auto;
+  pointer-events: auto;
+}
+
+.inkra-image-viewer__floating-tools {
+  position: absolute;
+  inset-inline: max(var(--inkra-space-3), env(safe-area-inset-left)) max(var(--inkra-space-3), env(safe-area-inset-right));
+  inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--inkra-touch-target);
+  pointer-events: none;
+  z-index: 6;
+}
+
+.inkra-image-viewer__floating-tools[data-position="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: max(var(--inkra-space-3), env(safe-area-inset-bottom));
+  padding-inline: 0;
 }
 
 .inkra-image-viewer__video-navigation {
@@ -5985,6 +6960,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 @media print {
   .inkra-image-viewer__close-control,
   .inkra-image-viewer__navigation,
+  .inkra-image-viewer__floating-tools,
   .inkra-image-viewer__bottom { display: none; }
 }
 
@@ -7012,26 +7988,38 @@ div.inkra-choice-grid > .inkra-radio-group {
 .inkra-inventory-grid__item, .inkra-inventory-grid__preview, .inkra-inventory-grid__cell, .inkra-inventory-grid__blocked { position: absolute; }
 .inkra-inventory-grid__item { outline: none; pointer-events: none; }
 .inkra-inventory-grid__cell { box-sizing: border-box; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; }
-.inkra-inventory-grid__cell-surface { position: absolute; inset: 2px; pointer-events: none; }
+.inkra-inventory-grid__shape { position: absolute; inset: 0 auto auto 0; pointer-events: none; color: var(--inkra-border-strong); }
+.inkra-inventory-grid__shape-fill, .inkra-inventory-grid__shape-wash { position: absolute; inset: 0; pointer-events: none; }
+.inkra-inventory-grid__shape-wash { opacity: .65; --inkra-selection-pigment: var(--inkra-accent-soft); }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] { background: var(--inkra-paper); border: 0; }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] + .inkra-inventory-grid__shape-fallback { display: block; }
+.inkra-inventory-grid__shape-edge { position: absolute; }
+.inkra-inventory-grid__shape-fallback { position: absolute; inset: 0; display: none; }
 .inkra-inventory-grid__item-content { position: relative; z-index: 1; padding: 4px; max-width: 100%; max-height: 100%; overflow: hidden; pointer-events: none; font-size: 13px; overflow-wrap: anywhere; text-align: center; }
-.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__cell-surface { color: var(--inkra-accent-strong); }
-.inkra-inventory-grid__cell-focus { position: absolute; inset: 3px; pointer-events: none; opacity: 0; color: var(--inkra-focus); }
-.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell-focus { opacity: 1; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape { color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape { color: var(--inkra-focus); --inkra-stroke-width: 2; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape-wash { opacity: 1; }
 .inkra-inventory-grid__item[data-dragging] { opacity: .28; }
 .inkra-inventory-grid__item[data-disabled] .inkra-inventory-grid__cell { cursor: default; touch-action: auto; }
 .inkra-inventory-grid__container[data-disabled], .inkra-inventory-grid[data-disabled] { opacity: .55; }
 .inkra-inventory-grid__preview { z-index: 2; pointer-events: none; color: var(--inkra-accent-strong); }
 .inkra-inventory-grid__preview[data-valid="false"] { color: var(--inkra-danger); }
-.inkra-inventory-grid__preview[data-valid="false"] .inkra-inventory-grid__cell { outline: 2px solid var(--inkra-danger); outline-offset: -4px; }
+.inkra-inventory-grid__preview .inkra-inventory-grid__shape { color: inherit; --inkra-stroke-width: 2; }
 .inkra-inventory-grid__preview .inkra-inventory-grid__cell, .inkra-inventory-grid__overlay .inkra-inventory-grid__cell { pointer-events: none; }
 .inkra-inventory-grid__overlay { position: relative; opacity: .8; pointer-events: none; color: var(--inkra-ink); }
 .inkra-inventory-grid__blocked { display: grid; place-items: center; color: var(--inkra-ink-muted); pointer-events: none; }
 .inkra-inventory-grid__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 @media (forced-colors: active) {
   .inkra-inventory-grid__board { border: 1px solid CanvasText; }
-  .inkra-inventory-grid__cell { border: 1px solid CanvasText; background: Canvas; }
-  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell { outline: 2px solid Highlight; outline-offset: -3px; }
-  .inkra-inventory-grid__preview .inkra-inventory-grid__cell { border: 3px solid Highlight; }
+  .inkra-inventory-grid__shape-fill { background: Canvas; }
+  .inkra-inventory-grid__shape-fallback { display: block; color: CanvasText; }
+  .inkra-inventory-grid__shape-edge { display: none; }
+  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape-fallback,
+  .inkra-inventory-grid__preview .inkra-inventory-grid__shape-fallback { color: Highlight; stroke-width: 3px; }
+}
+@media print {
+  .inkra-inventory-grid__shape-fallback { display: block; }
+  .inkra-inventory-grid__shape-edge { display: none; }
 }
 
 .inkra-sparkline { position: relative; display: inline-grid; gap: var(--inkra-space-1, 4px); max-inline-size: 100%; color: var(--inkra-ink); font-size: var(--inkra-text-sm); }
@@ -7964,7 +8952,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 .inkra-markdown__code-surface {
   background: transparent;
   color: var(--inkra-ink);
-  font-family: "Trip Map Hand", var(--inkra-font-hand);
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-text-md);
   font-weight: var(--inkra-weight-regular);
   line-height: 1.8;
@@ -8829,7 +9817,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   align-items: center;
   box-sizing: border-box;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-breadcrumb-item-font-size);
   gap: var(--inkra-breadcrumb-item-gap);
   justify-content: center;