: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; }
}