@jjlmoya/utils-games-development 1.65.0 → 1.67.0

package/src/tool/hitboxHurtboxAnimator/hitbox-hurtbox-animator.css

@@ -1,614 +1,614 @@
-:root {
-  --n-hha-ink: #241b31;
-  --n-hha-muted: #6f627c;
-  --n-hha-paper: #fffaf0;
-  --n-hha-panel: #fff;
-  --n-hha-stage: #15111f;
-  --n-hha-line: #d9cbd8;
-  --n-hha-glow: #f7dfa1;
-  --n-hha-coral: #ff4d6d;
-  --n-hha-mint: #2dd4bf;
-  --n-hha-violet: #8b5cf6;
-  --n-hha-amber: #f59e0b;
-  --n-hha-sky: #38bdf8;
-  --n-hha-pink: #f472b6;
-  --n-hha-white: #fff;
-  --n-hha-danger: #a61b3b;
-  --n-hha-focus: #6d28d9;
-  --n-hha-action: #241b31;
-  --n-hha-shadow: rgba(44, 27, 55, 0.16);
-  --n-hha-grid: rgba(255, 255, 255, 0.07);
-}
-
-.theme-dark {
-  --n-hha-ink: #f8ecff;
-  --n-hha-muted: #c8b9d1;
-  --n-hha-paper: #18121f;
-  --n-hha-panel: #241b2d;
-  --n-hha-stage: #0c0911;
-  --n-hha-line: #51425d;
-  --n-hha-glow: #7a6023;
-  --n-hha-white: #fff;
-  --n-hha-danger: #ff7693;
-  --n-hha-focus: #c4a5ff;
-  --n-hha-action: #5b21b6;
-  --n-hha-shadow: rgba(0, 0, 0, 0.38);
-  --n-hha-grid: rgba(255, 255, 255, 0.08);
-}
-
-.hha {
-  color: var(--n-hha-ink);
-  background: radial-gradient(circle at 50% 20%, var(--n-hha-panel), var(--n-hha-paper) 72%);
-  border: 1px solid var(--n-hha-line);
-  border-radius: 1.5rem;
-  box-shadow: 0 1.5rem 4rem var(--n-hha-shadow);
-  overflow: hidden;
-}
-
-.hha button,
-.hha input {
-  font: inherit;
-}
-
-.hha button,
-.hha label {
-  -webkit-tap-highlight-color: transparent;
-}
-
-.hha button:focus-visible,
-.hha input:focus-visible,
-.hha:focus-visible {
-  outline: 3px solid var(--n-hha-focus);
-  outline-offset: 3px;
-}
-
-.hha-intro {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  color: var(--n-hha-ink);
-  background: linear-gradient(90deg, var(--n-hha-glow), var(--n-hha-paper));
-  border-bottom: 1px solid var(--n-hha-line);
-}
-
-.hha-intro p,
-.hha-intro span,
-.hha-load p,
-.hha-export p,
-.hha-footer-line p {
-  margin: 0;
-}
-
-.hha-intro p {
-  max-width: 62ch;
-  font-weight: 700;
-}
-
-.hha-intro span {
-  font-size: 0.8rem;
-  color: var(--n-hha-muted);
-}
-
-.hha-load {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1.25rem;
-  border-bottom: 1px solid var(--n-hha-line);
-}
-
-.hha-load strong,
-.hha-export strong {
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
-}
-
-.hha-load p,
-.hha-export p,
-.hha-coordinate-note,
-.hha-no-selection {
-  color: var(--n-hha-muted);
-  font-size: 0.85rem;
-}
-
-.hha input[type="file"] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.hha-button,
-.hha-icon-button,
-.hha-mode-switch button,
-.hha-type-rack button,
-.hha-geometry button,
-.hha-inspector button {
-  color: var(--n-hha-ink);
-  background: var(--n-hha-panel);
-  border: 1px solid var(--n-hha-line);
-  border-radius: 0.65rem;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.hha-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.6rem;
-  padding: 0.55rem 0.9rem;
-}
-
-.hha-button-primary,
-.hha-play,
-.hha-mode-switch button.is-active {
-  color: var(--n-hha-white);
-  background: var(--n-hha-action);
-  border-color: var(--n-hha-action);
-}
-
-.hha-control-deck {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr auto;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--n-hha-line);
-}
-
-.hha-control-deck fieldset,
-.hha-pivot {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.65rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.hha-control-deck legend,
-.hha-pivot legend {
-  width: 100%;
-  margin-bottom: 0.45rem;
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-}
-
-.hha-control-deck label,
-.hha-fields label,
-.hha-pivot label {
-  display: grid;
-  gap: 0.3rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.hha input[type="number"],
-.hha input[type="text"] {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.6rem;
-  padding: 0.55rem 0.65rem;
-  color: var(--n-hha-ink);
-  background: var(--n-hha-panel);
-  border: 1px solid var(--n-hha-line);
-  border-radius: 0.55rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.hha-control-deck input[type="number"] {
-  width: 4.5rem;
-}
-
-.hha-transport,
-.hha-history {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.hha-icon-button {
-  display: grid;
-  place-items: center;
-  width: 2.6rem;
-  height: 2.6rem;
-}
-
-.hha-icon-button span {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-top: 2px solid currentcolor;
-  border-left: 2px solid currentcolor;
-  transform: rotate(-45deg);
-}
-
-.hha-icon-button.is-next span {
-  transform: rotate(135deg);
-}
-
-.hha-range {
-  min-width: 7rem;
-}
-
-.hha-control-deck .hha-check {
-  display: flex;
-  align-items: center;
-  min-height: 2.6rem;
-}
-
-.hha-workbench {
-  display: grid;
-  grid-template-columns: minmax(9rem, 0.7fr) minmax(20rem, 3fr) minmax(13rem, 1fr);
-  min-height: 34rem;
-}
-
-.hha-layers,
-.hha-inspector {
-  padding: 1rem;
-  background: var(--n-hha-panel);
-}
-
-.hha-layers {
-  border-right: 1px solid var(--n-hha-line);
-}
-
-.hha-inspector {
-  min-width: 0;
-  border-left: 1px solid var(--n-hha-line);
-}
-
-.hha h2 {
-  margin: 0 0 0.85rem;
-  font-size: 0.78rem;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-}
-
-.hha-mode-switch {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-bottom: 1rem;
-}
-
-.hha-mode-switch button {
-  min-height: 2.5rem;
-  border-radius: 0;
-}
-
-.hha-mode-switch button:first-child {
-  border-radius: 0.6rem 0 0 0.6rem;
-}
-
-.hha-mode-switch button:last-child {
-  border-radius: 0 0.6rem 0.6rem 0;
-}
-
-.hha-type-rack,
-.hha-geometry,
-.hha-copy-actions {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.hha-type-rack button,
-.hha-geometry button,
-.hha-copy-actions button {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  min-height: 2.55rem;
-  padding: 0.5rem 0.65rem;
-  text-align: left;
-}
-
-.hha-type-rack button i {
-  width: 0.7rem;
-  height: 0.7rem;
-  background: var(--n-hha-coral);
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.14);
-}
-
-.hha-type-rack button:nth-child(2) i { background: var(--n-hha-mint); }
-.hha-type-rack button:nth-child(3) i { background: var(--n-hha-violet); }
-.hha-type-rack button:nth-child(4) i { background: var(--n-hha-amber); }
-.hha-type-rack button:nth-child(5) i { background: var(--n-hha-sky); }
-.hha-type-rack button:nth-child(6) i { background: var(--n-hha-pink); }
-
-.hha-type-rack button.is-active,
-.hha-geometry button.is-active {
-  border-color: var(--n-hha-focus);
-  box-shadow: inset 0 0 0 1px var(--n-hha-focus);
-}
-
-.hha-geometry {
-  grid-template-columns: 1fr;
-  margin-top: 1rem;
-}
-
-.hha-geometry button {
-  justify-content: flex-start;
-  width: 100%;
-  font-size: 0.75rem;
-}
-
-.hha-geometry span {
-  width: 0.85rem;
-  height: 0.7rem;
-  border: 2px solid var(--n-hha-ink);
-}
-
-.hha-geometry button:last-child span {
-  border-radius: 50%;
-}
-
-.hha-stage-column {
-  min-width: 0;
-  padding: 1rem;
-  background: linear-gradient(135deg, var(--n-hha-paper), var(--n-hha-panel));
-}
-
-.hha-stage-header,
-.hha-timeline-wrap > strong {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.6rem;
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.hha-badges {
-  display: flex;
-  gap: 0.35rem;
-}
-
-.hha-badges b {
-  padding: 0.3rem 0.5rem;
-  color: var(--n-hha-muted);
-  background: var(--n-hha-panel);
-  border: 1px solid var(--n-hha-line);
-  border-radius: 2rem;
-  font-size: 0.75rem;
-}
-
-.hha-light-table {
-  position: relative;
-  display: grid;
-  place-items: center;
-  min-height: 26rem;
-  overflow: auto;
-  background-color: var(--n-hha-stage);
-  background-image: linear-gradient(45deg, var(--n-hha-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--n-hha-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--n-hha-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--n-hha-grid) 75%);
-  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
-  background-size: 16px 16px;
-  border: 0.5rem solid var(--n-hha-ink);
-  border-radius: 0.75rem;
-  box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.45), 0 0 0 1px var(--n-hha-line);
-}
-
-.hha-light-table::before,
-.hha-light-table::after {
-  position: absolute;
-  top: 50%;
-  width: 0.9rem;
-  height: 5rem;
-  background: repeating-linear-gradient(180deg, var(--n-hha-glow) 0 0.65rem, transparent 0.65rem 1.3rem);
-  content: "";
-  transform: translateY(-50%);
-}
-
-.hha-light-table::before { left: 0.55rem; }
-.hha-light-table::after { right: 0.55rem; }
-
-.hha canvas {
-  z-index: 1;
-  display: block;
-  max-width: calc(100% - 4rem);
-  max-height: 31rem;
-  cursor: crosshair;
-  image-rendering: pixelated;
-  box-shadow: 0 0 2rem rgba(247, 223, 161, 0.2);
-  touch-action: none;
-}
-
-.hha-empty-stage {
-  position: absolute;
-  z-index: 2;
-  display: grid;
-  place-items: center;
-  max-width: 24rem;
-  padding: 1.5rem;
-  color: var(--n-hha-white);
-  text-align: center;
-  pointer-events: none;
-}
-
-.hha-empty-stage span {
-  width: 4rem;
-  height: 4rem;
-  border: 2px solid var(--n-hha-coral);
-  border-radius: 0.6rem;
-  box-shadow: 1rem 0.7rem 0 -0.15rem var(--n-hha-mint), -0.8rem 0.9rem 0 -0.15rem var(--n-hha-violet);
-  transform: rotate(-4deg);
-}
-
-.hha.has-images .hha-empty-stage {
-  display: none;
-}
-
-.hha-timeline-wrap {
-  margin-top: 0.9rem;
-}
-
-.hha-timeline {
-  display: flex;
-  gap: 0.45rem;
-  padding: 0.5rem 0.2rem;
-  overflow-x: auto;
-}
-
-.hha-frame {
-  position: relative;
-  flex: 0 0 3.5rem;
-  min-height: 3.6rem;
-  color: var(--n-hha-ink);
-  background: var(--n-hha-panel);
-  border: 1px solid var(--n-hha-line);
-  border-radius: 0.5rem;
-  cursor: pointer;
-}
-
-.hha-frame.is-active {
-  border-color: var(--n-hha-focus);
-  box-shadow: 0 0 0 2px var(--n-hha-focus);
-  transform: translateY(-2px);
-}
-
-.hha-frame span { font-weight: 900; }
-
-.hha-frame b {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.35rem;
-  color: var(--n-hha-muted);
-  font-size: 0.75rem;
-}
-
-.hha-frame em {
-  position: absolute;
-  right: 0.3rem;
-  bottom: 0.3rem;
-  left: 0.3rem;
-  display: flex;
-  gap: 2px;
-}
-
-.hha-frame i {
-  height: 3px;
-  flex: 1;
-  background: var(--mark);
-  border-radius: 1rem;
-}
-
-.hha-fields {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 0.55rem;
-}
-
-.hha-wide {
-  grid-column: 1 / -1;
-}
-
-.hha-inspector button {
-  min-width: 0;
-  min-height: 2.5rem;
-  padding: 0.45rem;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.hha .hha-danger {
-  color: var(--n-hha-danger);
-  border-color: var(--n-hha-danger);
-}
-
-.hha-copy-actions {
-  margin-top: 1rem;
-}
-
-.hha-pivot {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-top: 1.2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--n-hha-line);
-}
-
-.hha-pivot legend {
-  grid-column: 1 / -1;
-}
-
-.hha-export {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1.2rem 1.25rem;
-  border-top: 1px solid var(--n-hha-line);
-}
-
-.hha-export > div:last-of-type {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-
-.hha-footer-line {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 1rem;
-  padding: 0.8rem 1.25rem;
-  color: var(--n-hha-muted);
-  background: var(--n-hha-paper);
-  border-top: 1px solid var(--n-hha-line);
-  font-size: 0.75rem;
-}
-
-.hha-footer-line [data-role="status"] {
-  color: var(--n-hha-ink);
-  font-weight: 800;
-}
-
-@media (max-width: 900px) {
-  .hha-control-deck { grid-template-columns: 1fr; }
-  .hha-workbench { grid-template-columns: 10rem minmax(18rem, 1fr); }
-  .hha-inspector {
-    grid-column: 1 / -1;
-    border-top: 1px solid var(--n-hha-line);
-    border-left: 0;
-  }
-  .hha-fields { grid-template-columns: repeat(5, 1fr); }
-  .hha-wide { grid-column: auto; }
-}
-
-@media (max-width: 640px) {
-  .hha-intro,
-  .hha-load,
-  .hha-export {
-    align-items: stretch;
-    flex-direction: column;
-  }
-  .hha-control-deck fieldset {
-    align-items: stretch;
-    flex-wrap: wrap;
-  }
-  .hha-workbench {
-    display: flex;
-    flex-direction: column;
-  }
-  .hha-layers {
-    border-right: 0;
-    border-bottom: 1px solid var(--n-hha-line);
-  }
-  .hha-type-rack { grid-template-columns: repeat(3, 1fr); }
-  .hha-light-table { min-height: 19rem; }
-  .hha-stage-column { padding: 0.75rem; }
-  .hha-fields { grid-template-columns: 1fr 1fr; }
-  .hha-wide { grid-column: 1 / -1; }
-  .hha-export > div:last-of-type { justify-content: stretch; }
-  .hha-export .hha-button { flex: 1 1 10rem; }
-  .hha-footer-line { grid-template-columns: 1fr; }
-}
+:root {
+  --n-hha-ink: #241b31;
+  --n-hha-muted: #6f627c;
+  --n-hha-paper: #fffaf0;
+  --n-hha-panel: #fff;
+  --n-hha-stage: #15111f;
+  --n-hha-line: #d9cbd8;
+  --n-hha-glow: #f7dfa1;
+  --n-hha-coral: #ff4d6d;
+  --n-hha-mint: #2dd4bf;
+  --n-hha-violet: #8b5cf6;
+  --n-hha-amber: #f59e0b;
+  --n-hha-sky: #38bdf8;
+  --n-hha-pink: #f472b6;
+  --n-hha-white: #fff;
+  --n-hha-danger: #a61b3b;
+  --n-hha-focus: #6d28d9;
+  --n-hha-action: #241b31;
+  --n-hha-shadow: rgba(44, 27, 55, 0.16);
+  --n-hha-grid: rgba(255, 255, 255, 0.07);
+}
+
+.theme-dark {
+  --n-hha-ink: #f8ecff;
+  --n-hha-muted: #c8b9d1;
+  --n-hha-paper: #18121f;
+  --n-hha-panel: #241b2d;
+  --n-hha-stage: #0c0911;
+  --n-hha-line: #51425d;
+  --n-hha-glow: #7a6023;
+  --n-hha-white: #fff;
+  --n-hha-danger: #ff7693;
+  --n-hha-focus: #c4a5ff;
+  --n-hha-action: #5b21b6;
+  --n-hha-shadow: rgba(0, 0, 0, 0.38);
+  --n-hha-grid: rgba(255, 255, 255, 0.08);
+}
+
+.hha {
+  color: var(--n-hha-ink);
+  background: radial-gradient(circle at 50% 20%, var(--n-hha-panel), var(--n-hha-paper) 72%);
+  border: 1px solid var(--n-hha-line);
+  border-radius: 1.5rem;
+  box-shadow: 0 1.5rem 4rem var(--n-hha-shadow);
+  overflow: hidden;
+}
+
+.hha button,
+.hha input {
+  font: inherit;
+}
+
+.hha button,
+.hha label {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.hha button:focus-visible,
+.hha input:focus-visible,
+.hha:focus-visible {
+  outline: 3px solid var(--n-hha-focus);
+  outline-offset: 3px;
+}
+
+.hha-intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  color: var(--n-hha-ink);
+  background: linear-gradient(90deg, var(--n-hha-glow), var(--n-hha-paper));
+  border-bottom: 1px solid var(--n-hha-line);
+}
+
+.hha-intro p,
+.hha-intro span,
+.hha-load p,
+.hha-export p,
+.hha-footer-line p {
+  margin: 0;
+}
+
+.hha-intro p {
+  max-width: 62ch;
+  font-weight: 700;
+}
+
+.hha-intro span {
+  font-size: 0.8rem;
+  color: var(--n-hha-muted);
+}
+
+.hha-load {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-bottom: 1px solid var(--n-hha-line);
+}
+
+.hha-load strong,
+.hha-export strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+}
+
+.hha-load p,
+.hha-export p,
+.hha-coordinate-note,
+.hha-no-selection {
+  color: var(--n-hha-muted);
+  font-size: 0.85rem;
+}
+
+.hha input[type="file"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hha-button,
+.hha-icon-button,
+.hha-mode-switch button,
+.hha-type-rack button,
+.hha-geometry button,
+.hha-inspector button {
+  color: var(--n-hha-ink);
+  background: var(--n-hha-panel);
+  border: 1px solid var(--n-hha-line);
+  border-radius: 0.65rem;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.hha-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.6rem;
+  padding: 0.55rem 0.9rem;
+}
+
+.hha-button-primary,
+.hha-play,
+.hha-mode-switch button.is-active {
+  color: var(--n-hha-white);
+  background: var(--n-hha-action);
+  border-color: var(--n-hha-action);
+}
+
+.hha-control-deck {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr auto;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--n-hha-line);
+}
+
+.hha-control-deck fieldset,
+.hha-pivot {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.65rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.hha-control-deck legend,
+.hha-pivot legend {
+  width: 100%;
+  margin-bottom: 0.45rem;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.hha-control-deck label,
+.hha-fields label,
+.hha-pivot label {
+  display: grid;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.hha input[type="number"],
+.hha input[type="text"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.6rem;
+  padding: 0.55rem 0.65rem;
+  color: var(--n-hha-ink);
+  background: var(--n-hha-panel);
+  border: 1px solid var(--n-hha-line);
+  border-radius: 0.55rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.hha-control-deck input[type="number"] {
+  width: 4.5rem;
+}
+
+.hha-transport,
+.hha-history {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.hha-icon-button {
+  display: grid;
+  place-items: center;
+  width: 2.6rem;
+  height: 2.6rem;
+}
+
+.hha-icon-button span {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-top: 2px solid currentcolor;
+  border-left: 2px solid currentcolor;
+  transform: rotate(-45deg);
+}
+
+.hha-icon-button.is-next span {
+  transform: rotate(135deg);
+}
+
+.hha-range {
+  min-width: 7rem;
+}
+
+.hha-control-deck .hha-check {
+  display: flex;
+  align-items: center;
+  min-height: 2.6rem;
+}
+
+.hha-workbench {
+  display: grid;
+  grid-template-columns: minmax(9rem, 0.7fr) minmax(20rem, 3fr) minmax(13rem, 1fr);
+  min-height: 34rem;
+}
+
+.hha-layers,
+.hha-inspector {
+  padding: 1rem;
+  background: var(--n-hha-panel);
+}
+
+.hha-layers {
+  border-right: 1px solid var(--n-hha-line);
+}
+
+.hha-inspector {
+  min-width: 0;
+  border-left: 1px solid var(--n-hha-line);
+}
+
+.hha h2 {
+  margin: 0 0 0.85rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.hha-mode-switch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 1rem;
+}
+
+.hha-mode-switch button {
+  min-height: 2.5rem;
+  border-radius: 0;
+}
+
+.hha-mode-switch button:first-child {
+  border-radius: 0.6rem 0 0 0.6rem;
+}
+
+.hha-mode-switch button:last-child {
+  border-radius: 0 0.6rem 0.6rem 0;
+}
+
+.hha-type-rack,
+.hha-geometry,
+.hha-copy-actions {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.hha-type-rack button,
+.hha-geometry button,
+.hha-copy-actions button {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2.55rem;
+  padding: 0.5rem 0.65rem;
+  text-align: left;
+}
+
+.hha-type-rack button i {
+  width: 0.7rem;
+  height: 0.7rem;
+  background: var(--n-hha-coral);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.14);
+}
+
+.hha-type-rack button:nth-child(2) i { background: var(--n-hha-mint); }
+.hha-type-rack button:nth-child(3) i { background: var(--n-hha-violet); }
+.hha-type-rack button:nth-child(4) i { background: var(--n-hha-amber); }
+.hha-type-rack button:nth-child(5) i { background: var(--n-hha-sky); }
+.hha-type-rack button:nth-child(6) i { background: var(--n-hha-pink); }
+
+.hha-type-rack button.is-active,
+.hha-geometry button.is-active {
+  border-color: var(--n-hha-focus);
+  box-shadow: inset 0 0 0 1px var(--n-hha-focus);
+}
+
+.hha-geometry {
+  grid-template-columns: 1fr;
+  margin-top: 1rem;
+}
+
+.hha-geometry button {
+  justify-content: flex-start;
+  width: 100%;
+  font-size: 0.75rem;
+}
+
+.hha-geometry span {
+  width: 0.85rem;
+  height: 0.7rem;
+  border: 2px solid var(--n-hha-ink);
+}
+
+.hha-geometry button:last-child span {
+  border-radius: 50%;
+}
+
+.hha-stage-column {
+  min-width: 0;
+  padding: 1rem;
+  background: linear-gradient(135deg, var(--n-hha-paper), var(--n-hha-panel));
+}
+
+.hha-stage-header,
+.hha-timeline-wrap > strong {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hha-badges {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.hha-badges b {
+  padding: 0.3rem 0.5rem;
+  color: var(--n-hha-muted);
+  background: var(--n-hha-panel);
+  border: 1px solid var(--n-hha-line);
+  border-radius: 2rem;
+  font-size: 0.75rem;
+}
+
+.hha-light-table {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 26rem;
+  overflow: auto;
+  background-color: var(--n-hha-stage);
+  background-image: linear-gradient(45deg, var(--n-hha-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--n-hha-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--n-hha-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--n-hha-grid) 75%);
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  background-size: 16px 16px;
+  border: 0.5rem solid var(--n-hha-ink);
+  border-radius: 0.75rem;
+  box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.45), 0 0 0 1px var(--n-hha-line);
+}
+
+.hha-light-table::before,
+.hha-light-table::after {
+  position: absolute;
+  top: 50%;
+  width: 0.9rem;
+  height: 5rem;
+  background: repeating-linear-gradient(180deg, var(--n-hha-glow) 0 0.65rem, transparent 0.65rem 1.3rem);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.hha-light-table::before { left: 0.55rem; }
+.hha-light-table::after { right: 0.55rem; }
+
+.hha canvas {
+  z-index: 1;
+  display: block;
+  max-width: calc(100% - 4rem);
+  max-height: 31rem;
+  cursor: crosshair;
+  image-rendering: pixelated;
+  box-shadow: 0 0 2rem rgba(247, 223, 161, 0.2);
+  touch-action: none;
+}
+
+.hha-empty-stage {
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  max-width: 24rem;
+  padding: 1.5rem;
+  color: var(--n-hha-white);
+  text-align: center;
+  pointer-events: none;
+}
+
+.hha-empty-stage span {
+  width: 4rem;
+  height: 4rem;
+  border: 2px solid var(--n-hha-coral);
+  border-radius: 0.6rem;
+  box-shadow: 1rem 0.7rem 0 -0.15rem var(--n-hha-mint), -0.8rem 0.9rem 0 -0.15rem var(--n-hha-violet);
+  transform: rotate(-4deg);
+}
+
+.hha.has-images .hha-empty-stage {
+  display: none;
+}
+
+.hha-timeline-wrap {
+  margin-top: 0.9rem;
+}
+
+.hha-timeline {
+  display: flex;
+  gap: 0.45rem;
+  padding: 0.5rem 0.2rem;
+  overflow-x: auto;
+}
+
+.hha-frame {
+  position: relative;
+  flex: 0 0 3.5rem;
+  min-height: 3.6rem;
+  color: var(--n-hha-ink);
+  background: var(--n-hha-panel);
+  border: 1px solid var(--n-hha-line);
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.hha-frame.is-active {
+  border-color: var(--n-hha-focus);
+  box-shadow: 0 0 0 2px var(--n-hha-focus);
+  transform: translateY(-2px);
+}
+
+.hha-frame span { font-weight: 900; }
+
+.hha-frame b {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.35rem;
+  color: var(--n-hha-muted);
+  font-size: 0.75rem;
+}
+
+.hha-frame em {
+  position: absolute;
+  right: 0.3rem;
+  bottom: 0.3rem;
+  left: 0.3rem;
+  display: flex;
+  gap: 2px;
+}
+
+.hha-frame i {
+  height: 3px;
+  flex: 1;
+  background: var(--mark);
+  border-radius: 1rem;
+}
+
+.hha-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0.55rem;
+}
+
+.hha-wide {
+  grid-column: 1 / -1;
+}
+
+.hha-inspector button {
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.45rem;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.hha .hha-danger {
+  color: var(--n-hha-danger);
+  border-color: var(--n-hha-danger);
+}
+
+.hha-copy-actions {
+  margin-top: 1rem;
+}
+
+.hha-pivot {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 1.2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--n-hha-line);
+}
+
+.hha-pivot legend {
+  grid-column: 1 / -1;
+}
+
+.hha-export {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.2rem 1.25rem;
+  border-top: 1px solid var(--n-hha-line);
+}
+
+.hha-export > div:last-of-type {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.hha-footer-line {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 1rem;
+  padding: 0.8rem 1.25rem;
+  color: var(--n-hha-muted);
+  background: var(--n-hha-paper);
+  border-top: 1px solid var(--n-hha-line);
+  font-size: 0.75rem;
+}
+
+.hha-footer-line [data-role="status"] {
+  color: var(--n-hha-ink);
+  font-weight: 800;
+}
+
+@media (max-width: 900px) {
+  .hha-control-deck { grid-template-columns: 1fr; }
+  .hha-workbench { grid-template-columns: 10rem minmax(18rem, 1fr); }
+  .hha-inspector {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--n-hha-line);
+    border-left: 0;
+  }
+  .hha-fields { grid-template-columns: repeat(5, 1fr); }
+  .hha-wide { grid-column: auto; }
+}
+
+@media (max-width: 640px) {
+  .hha-intro,
+  .hha-load,
+  .hha-export {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .hha-control-deck fieldset {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+  .hha-workbench {
+    display: flex;
+    flex-direction: column;
+  }
+  .hha-layers {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-hha-line);
+  }
+  .hha-type-rack { grid-template-columns: repeat(3, 1fr); }
+  .hha-light-table { min-height: 19rem; }
+  .hha-stage-column { padding: 0.75rem; }
+  .hha-fields { grid-template-columns: 1fr 1fr; }
+  .hha-wide { grid-column: 1 / -1; }
+  .hha-export > div:last-of-type { justify-content: stretch; }
+  .hha-export .hha-button { flex: 1 1 10rem; }
+  .hha-footer-line { grid-template-columns: 1fr; }
+}