@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@400;700&family=IBM+Plex+Mono:wght@300;400&display=swap");
.chr {
  --chr-bg: #F2EBD9;
  --chr-bg-secondary: #EAE2CE;
  --chr-surface: #FAF6ED;
  --chr-text: #1B1612;
  --chr-text-secondary: #5C4A3A;
  --chr-text-muted: #8B7B6B;
  --chr-copper: #B87333;
  --chr-copper-light: #F0DCC8;
  --chr-copper-hover: #9E6229;
  --chr-copper-active: #8A5523;
  --chr-verdigris: #4A7C6F;
  --chr-verdigris-light: #D6E8E3;
  --chr-verdigris-hover: #3D675C;
  --chr-aurum: #C5973E;
  --chr-aurum-light: #F5ECD4;
  --chr-aurum-hover: #A98035;
  --chr-azurite: #2C5F8A;
  --chr-cinnabar: #C23B22;
  --chr-phosphor: #7EC8A0;
  --chr-aether: #9B8EC4;
  --chr-aether-light: #EDE8F5;
  --chr-ruled-line: #D4C9B5;
  --chr-border: #D4C9B5;
  --chr-border-subtle: #E4DBCB;
  --chr-font-display: 'Cormorant Garamond', Georgia, serif;
  --chr-font-body: 'EB Garamond', Georgia, serif;
  --chr-font-annotation: 'Caveat', cursive;
  --chr-font-mono: 'IBM Plex Mono', monospace;
  --chr-text-display: clamp(1.75rem, 4vw, 2.75rem);
  --chr-text-heading: clamp(1.25rem, 2.5vw, 1.75rem);
  --chr-text-subheading: clamp(1.0625rem, 2vw, 1.25rem);
  --chr-text-body: clamp(0.9375rem, 1.5vw, 1.0625rem);
  --chr-text-small: 0.8125rem;
  --chr-text-xs: 0.6875rem;
  --chr-leading-body: 1.7;
  --chr-leading-heading: 1.2;
  --chr-radius: 4px;
  --chr-radius-pill: 9999px;
  --chr-shadow: 0 2px 12px rgba(27, 22, 18, 0.1);
  --chr-shadow-lg: 0 8px 32px rgba(27, 22, 18, 0.15);
  --chr-shadow-sm: 0 1px 4px rgba(27, 22, 18, 0.08);
  --chr-transition: 300ms ease;
  --chr-ruled-bg: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--chr-ruled-line) 31px,
    var(--chr-ruled-line) 32px
  );
  background-color: var(--chr-bg);
  color: var(--chr-text);
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: var(--chr-leading-body);
}

.chr.dark, .dark .chr,
.chr[data-theme=dark], [data-theme=dark] .chr {
  --chr-bg: #0E0C0A;
  --chr-bg-secondary: #141210;
  --chr-surface: #1A1714;
  --chr-text: #D4C9B5;
  --chr-text-secondary: #9B8E7E;
  --chr-text-muted: #5C524A;
  --chr-copper: #D4894A;
  --chr-copper-light: #2A2018;
  --chr-copper-hover: #E09A5A;
  --chr-copper-active: #EAA868;
  --chr-verdigris: #5FA08F;
  --chr-verdigris-light: #1A2A26;
  --chr-verdigris-hover: #6FB0A0;
  --chr-aurum: #D4A84E;
  --chr-aurum-light: #2A2418;
  --chr-aurum-hover: #E0B860;
  --chr-azurite: #4A8ABF;
  --chr-cinnabar: #D4503A;
  --chr-phosphor: #8ED8B0;
  --chr-aether: #B0A3D4;
  --chr-aether-light: #1E1A28;
  --chr-ruled-line: #2A2520;
  --chr-border: #2A2520;
  --chr-border-subtle: #1E1B18;
  --chr-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --chr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --chr-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@keyframes chr-ink-draw {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes chr-flame-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes chr-transmute-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes chr-unfurl {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.chr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--chr-radius);
  background-color: var(--chr-copper);
  color: var(--chr-surface);
  font-family: var(--chr-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--chr-transition), color var(--chr-transition), border-color var(--chr-transition), box-shadow var(--chr-transition), transform var(--chr-transition);
  white-space: nowrap;
  user-select: none;
}
.chr-btn:hover {
  background-color: var(--chr-copper-hover);
  box-shadow: var(--chr-shadow-sm);
}
.chr-btn:active {
  background-color: var(--chr-copper-active);
  transform: translateY(1px);
}
.chr-btn:focus-visible {
  outline: 2px solid var(--chr-copper);
  outline-offset: 2px;
}
.chr-btn:disabled, .chr-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.chr-btn--outlined {
  background-color: transparent;
  color: var(--chr-copper);
  border-color: var(--chr-copper);
}
.chr-btn--outlined:hover {
  background-color: var(--chr-copper-light);
  box-shadow: none;
}
.chr-btn--outlined:active {
  background-color: var(--chr-copper-light);
}
.chr-btn--text {
  background-color: transparent;
  color: var(--chr-copper);
  border-color: transparent;
  padding-left: 12px;
  padding-right: 12px;
}
.chr-btn--text:hover {
  background-color: var(--chr-copper-light);
  box-shadow: none;
}
.chr-btn--text:active {
  background-color: var(--chr-copper-light);
}
.chr-btn--verdigris {
  background-color: var(--chr-verdigris);
}
.chr-btn--verdigris:hover {
  background-color: var(--chr-verdigris-hover);
}
.chr-btn--verdigris:focus-visible {
  outline-color: var(--chr-verdigris);
}
.chr-btn--aurum {
  background-color: var(--chr-aurum);
  color: var(--chr-text);
}
.chr-btn--aurum:hover {
  background-color: var(--chr-aurum-hover);
}
.chr-btn--aurum:focus-visible {
  outline-color: var(--chr-aurum);
}
.chr-btn--cinnabar {
  background-color: var(--chr-cinnabar);
}
.chr-btn--cinnabar:hover {
  background-color: #A83220;
}
.chr-btn--cinnabar:focus-visible {
  outline-color: var(--chr-cinnabar);
}
.chr-btn--aether {
  background-color: var(--chr-aether);
  color: #fff;
}
.chr-btn--aether:hover {
  background-color: #8A7DB5;
}
.chr-btn--aether:focus-visible {
  outline-color: var(--chr-aether);
}
.chr-btn--ghost {
  background-color: transparent;
  color: var(--chr-text-secondary);
  border-color: var(--chr-border);
}
.chr-btn--ghost:hover {
  background-color: var(--chr-border-subtle);
  color: var(--chr-text);
}
.chr-btn--sm {
  padding: 8px 18px;
  font-size: var(--chr-text-small);
}
.chr-btn--lg {
  padding: 16px 36px;
  font-size: 1.125rem;
}

.chr-card {
  position: relative;
  background-color: var(--chr-surface);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius);
  padding: 24px;
  transition: box-shadow var(--chr-transition), transform var(--chr-transition);
}
.chr-card__media {
  margin: -24px -24px 20px;
  border-radius: var(--chr-radius) var(--chr-radius) 0 0;
  overflow: hidden;
}
.chr-card__media img,
.chr-card__media video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.chr-card__title {
  font-family: var(--chr-font-display);
  font-weight: 700;
  font-size: var(--chr-text-heading);
  line-height: var(--chr-leading-heading);
  color: var(--chr-text);
  margin: 0 0 4px;
}
.chr-card__subtitle {
  font-family: var(--chr-font-annotation);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--chr-copper);
  margin: 0 0 16px;
  line-height: 1.3;
}
.chr-card__body {
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: var(--chr-leading-body);
  color: var(--chr-text-secondary);
  margin: 0 0 16px;
}
.chr-card__body:last-child {
  margin-bottom: 0;
}
.chr-card__meta {
  font-family: var(--chr-font-mono);
  font-weight: 300;
  font-size: var(--chr-text-xs);
  color: var(--chr-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.chr-card__meta span + span::before {
  content: " · ";
}
.chr-card__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--chr-border-subtle);
}
.chr-card__footer {
  margin: 20px -24px -24px;
  padding: 16px 24px;
  background-color: var(--chr-bg);
  border-top: 1px solid var(--chr-border-subtle);
  border-radius: 0 0 var(--chr-radius) var(--chr-radius);
  font-family: var(--chr-font-mono);
  font-size: var(--chr-text-small);
  color: var(--chr-text-muted);
}
.chr-card--elevated {
  box-shadow: var(--chr-shadow);
}
.chr-card--elevated:hover {
  box-shadow: var(--chr-shadow-lg);
  transform: translateY(-2px);
}
.chr-card--ruled {
  background-image: var(--chr-ruled-bg);
  background-position: 0 23px;
}
.chr-card--ruled .chr-card__body {
  line-height: 32px;
}
.chr-card--specimen {
  border-top: 3px solid var(--chr-copper);
  transform: rotate(0.5deg);
  box-shadow: var(--chr-shadow-sm);
}
.chr-card--specimen::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--chr-copper);
  border: 2px solid var(--chr-surface);
  box-shadow: 0 1px 3px rgba(27, 22, 18, 0.2);
}
.chr-card--specimen:hover {
  transform: rotate(0deg);
  box-shadow: var(--chr-shadow);
}
.chr-card--specimen .chr-card__meta {
  border-bottom: 1px dashed var(--chr-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.chr-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--chr-surface);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius);
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: var(--chr-leading-body);
  color: var(--chr-text);
  transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
  position: relative;
}
.chr-input::placeholder {
  color: var(--chr-text-muted);
  font-style: italic;
}
.chr-input:hover {
  border-color: var(--chr-copper-light);
}
.chr-input:focus {
  outline: none;
  border-color: var(--chr-copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.chr-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--chr-bg);
}

.chr-input-wrap {
  position: relative;
  display: block;
}
.chr-input-wrap .chr-input {
  border-bottom-color: var(--chr-border);
}
.chr-input-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--chr-copper);
  border-radius: 1px;
  transition: none;
}
.chr-input-wrap:focus-within::after {
  animation: chr-ink-draw 400ms ease-out forwards;
}

.chr-select {
  display: block;
  width: 100%;
  padding: 12px 40px 12px 16px;
  background-color: var(--chr-surface);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius);
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: var(--chr-leading-body);
  color: var(--chr-text);
  cursor: pointer;
  appearance: none;
  transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C4A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.chr-select:hover {
  border-color: var(--chr-copper-light);
}
.chr-select:focus {
  outline: none;
  border-color: var(--chr-copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.chr-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chr-textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  background-color: var(--chr-surface);
  background-image: var(--chr-ruled-bg);
  background-position: 0 11px;
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius);
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: 32px;
  color: var(--chr-text);
  resize: vertical;
  transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
}
.chr-textarea::placeholder {
  color: var(--chr-text-muted);
  font-style: italic;
}
.chr-textarea:hover {
  border-color: var(--chr-copper-light);
}
.chr-textarea:focus {
  outline: none;
  border-color: var(--chr-copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.chr-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  margin-bottom: 20px;
}
.chr-field__label {
  font-family: var(--chr-font-mono);
  font-weight: 400;
  font-size: var(--chr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chr-text-secondary);
  line-height: 1.4;
}
.chr-field__annotation {
  font-family: var(--chr-font-annotation);
  font-size: 0.9375rem;
  color: var(--chr-copper);
  line-height: 1.3;
  margin-top: 2px;
}
@media (min-width: 640px) {
  .chr-field__annotation {
    position: absolute;
    right: -180px;
    top: 24px;
    width: 160px;
    font-size: 0.875rem;
    transform: rotate(-1deg);
  }
}

.chr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--chr-radius);
  font-family: var(--chr-font-mono);
  font-weight: 400;
  font-size: var(--chr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  background-color: var(--chr-bg-secondary);
  color: var(--chr-text-secondary);
  border: 1px solid var(--chr-border-subtle);
}
.chr-badge--copper {
  background-color: var(--chr-copper-light);
  color: var(--chr-copper);
  border-color: var(--chr-copper-light);
}
.chr-badge--verdigris {
  background-color: var(--chr-verdigris-light);
  color: var(--chr-verdigris);
  border-color: var(--chr-verdigris-light);
}
.chr-badge--aurum {
  background-color: var(--chr-aurum-light);
  color: var(--chr-aurum);
  border-color: var(--chr-aurum-light);
}
.chr-badge--azurite {
  background-color: #DCE8F2;
  color: var(--chr-azurite);
  border-color: #DCE8F2;
}
.chr.dark .chr-badge--azurite, .dark .chr .chr-badge--azurite, .chr[data-theme=dark] .chr-badge--azurite, [data-theme=dark] .chr .chr-badge--azurite {
  background-color: #1A2230;
  border-color: #1A2230;
}
.chr-badge--cinnabar {
  background-color: #F5DDD9;
  color: var(--chr-cinnabar);
  border-color: #F5DDD9;
}
.chr.dark .chr-badge--cinnabar, .dark .chr .chr-badge--cinnabar, .chr[data-theme=dark] .chr-badge--cinnabar, [data-theme=dark] .chr .chr-badge--cinnabar {
  background-color: #2A1A18;
  border-color: #2A1A18;
}
.chr-badge--phosphor {
  background-color: #DCF0E5;
  color: #3A7A5A;
  border-color: #DCF0E5;
}
.chr.dark .chr-badge--phosphor, .dark .chr .chr-badge--phosphor, .chr[data-theme=dark] .chr-badge--phosphor, [data-theme=dark] .chr .chr-badge--phosphor {
  background-color: #1A2A22;
  color: var(--chr-phosphor);
  border-color: #1A2A22;
}
.chr-badge--aether {
  background-color: var(--chr-aether-light);
  color: var(--chr-aether);
  border-color: var(--chr-aether-light);
}
.chr-badge--outline {
  background-color: transparent;
  color: var(--chr-text-secondary);
  border-color: var(--chr-border);
}

.chr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--chr-copper);
  background-color: var(--chr-copper-light);
  color: var(--chr-copper);
  font-family: var(--chr-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.chr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.chr-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  border-width: 1.5px;
}
.chr-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.375rem;
  border-width: 2.5px;
}
.chr-avatar--xl {
  width: 80px;
  height: 80px;
  font-size: 1.75rem;
  border-width: 3px;
}

.chr-alert {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--chr-radius);
  border: 1px solid var(--chr-border);
  border-left: 3px solid var(--chr-copper);
  background-color: var(--chr-surface);
  font-family: var(--chr-font-body);
  font-size: var(--chr-text-body);
  line-height: var(--chr-leading-body);
  color: var(--chr-text-secondary);
}
.chr-alert strong, .chr-alert__title {
  display: block;
  font-weight: 600;
  color: var(--chr-text);
  margin-bottom: 4px;
}
.chr-alert--info {
  border-left-color: var(--chr-azurite);
  background-color: #F0F4F8;
}
.chr-alert--info strong,
.chr-alert--info .chr-alert__title {
  color: var(--chr-azurite);
}
.chr.dark .chr-alert--info, .dark .chr .chr-alert--info, .chr[data-theme=dark] .chr-alert--info, [data-theme=dark] .chr .chr-alert--info {
  background-color: #121A22;
}
.chr-alert--warning {
  border-left-color: var(--chr-aurum);
  background-color: var(--chr-aurum-light);
}
.chr-alert--warning strong,
.chr-alert--warning .chr-alert__title {
  color: var(--chr-aurum);
}
.chr.dark .chr-alert--warning, .dark .chr .chr-alert--warning, .chr[data-theme=dark] .chr-alert--warning, [data-theme=dark] .chr .chr-alert--warning {
  background-color: #1E1A12;
}
.chr-alert--error {
  border-left-color: var(--chr-cinnabar);
  background-color: #FDF2F0;
}
.chr-alert--error strong,
.chr-alert--error .chr-alert__title {
  color: var(--chr-cinnabar);
}
.chr.dark .chr-alert--error, .dark .chr .chr-alert--error, .chr[data-theme=dark] .chr-alert--error, [data-theme=dark] .chr .chr-alert--error {
  background-color: #221412;
}
.chr-alert--success {
  border-left-color: var(--chr-phosphor);
  background-color: #F0F8F4;
}
.chr-alert--success strong,
.chr-alert--success .chr-alert__title {
  color: #3A7A5A;
}
.chr.dark .chr-alert--success, .dark .chr .chr-alert--success, .chr[data-theme=dark] .chr-alert--success, [data-theme=dark] .chr .chr-alert--success {
  background-color: #121E18;
}
.chr.dark .chr-alert--success strong,
.chr.dark .chr-alert--success .chr-alert__title, .dark .chr .chr-alert--success strong,
.dark .chr .chr-alert--success .chr-alert__title, .chr[data-theme=dark] .chr-alert--success strong,
.chr[data-theme=dark] .chr-alert--success .chr-alert__title, [data-theme=dark] .chr .chr-alert--success strong,
[data-theme=dark] .chr .chr-alert--success .chr-alert__title {
  color: var(--chr-phosphor);
}
.chr-alert--aether {
  border-left-color: var(--chr-aether);
  background-color: var(--chr-aether-light);
}
.chr-alert--aether strong,
.chr-alert--aether .chr-alert__title {
  color: var(--chr-aether);
}
.chr.dark .chr-alert--aether, .dark .chr .chr-alert--aether, .chr[data-theme=dark] .chr-alert--aether, [data-theme=dark] .chr .chr-alert--aether {
  background-color: #16141E;
}

.chr-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.chr-icon--sm {
  width: 16px;
  height: 16px;
}
.chr-icon--lg {
  width: 32px;
  height: 32px;
}
.chr-icon--xl {
  width: 48px;
  height: 48px;
}
.chr-icon--fire {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5C10.5 8 6.5 13 4.5 19.5h15C17.5 13 13.5 8 12 3.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5C10.5 8 6.5 13 4.5 19.5h15C17.5 13 13.5 8 12 3.5z'/%3E%3C/svg%3E");
}
.chr-icon--water {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c1.5-5 5.5-10 7.5-16.5h-15C6.5 10.5 10.5 15.5 12 20.5z'/%3E%3Cpath d='M8.5 12c1-0.8 2.2-0.8 3.5 0s2.5 0.8 3.5 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c1.5-5 5.5-10 7.5-16.5h-15C6.5 10.5 10.5 15.5 12 20.5z'/%3E%3Cpath d='M8.5 12c1-0.8 2.2-0.8 3.5 0s2.5 0.8 3.5 0'/%3E%3C/svg%3E");
}
.chr-icon--earth {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5C10.5 8 6.5 13 4.5 19.5h15C17.5 13 13.5 8 12 3.5z'/%3E%3Cline x1='6.8' y1='14' x2='17.2' y2='14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5C10.5 8 6.5 13 4.5 19.5h15C17.5 13 13.5 8 12 3.5z'/%3E%3Cline x1='6.8' y1='14' x2='17.2' y2='14'/%3E%3C/svg%3E");
}
.chr-icon--air {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c1.5-5 5.5-10 7.5-16.5h-15C6.5 10.5 10.5 15.5 12 20.5z'/%3E%3Cline x1='6.8' y1='10' x2='17.2' y2='10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c1.5-5 5.5-10 7.5-16.5h-15C6.5 10.5 10.5 15.5 12 20.5z'/%3E%3Cline x1='6.8' y1='10' x2='17.2' y2='10'/%3E%3C/svg%3E");
}
.chr-icon--aether {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.chr-icon--search {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='20.5' y2='20.5'/%3E%3Cpath d='M10.5 7.5v6M8 10.5h5' opacity='0.5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='20.5' y2='20.5'/%3E%3Cpath d='M10.5 7.5v6M8 10.5h5' opacity='0.5'/%3E%3C/svg%3E");
}
.chr-icon--quill {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 2c-3 2-6 5-8 9-1 2-1.5 4-2 6l-1 3c0 0 1-1 2.5-1.5 1.5-0.5 3-0.5 3-0.5-0.5-2 0.5-5 2-7.5S19.5 4 20 2z'/%3E%3Cpath d='M10 17l-5 3.5'/%3E%3Cpath d='M12.5 11c-2 0.5-4 2-5.5 4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 2c-3 2-6 5-8 9-1 2-1.5 4-2 6l-1 3c0 0 1-1 2.5-1.5 1.5-0.5 3-0.5 3-0.5-0.5-2 0.5-5 2-7.5S19.5 4 20 2z'/%3E%3Cpath d='M10 17l-5 3.5'/%3E%3Cpath d='M12.5 11c-2 0.5-4 2-5.5 4'/%3E%3C/svg%3E");
}
.chr-icon--flask {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v6.5c0 0.5-0.2 1-0.5 1.3L4.5 17c-1.2 1.5-0.2 3.5 1.8 3.5h11.4c2 0 3-2 1.8-3.5L14.5 9.8c-0.3-0.3-0.5-0.8-0.5-1.3V2'/%3E%3Cpath d='M6.5 16.5c1.5-1 4-1 5.5 0s4 1 5.5 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v6.5c0 0.5-0.2 1-0.5 1.3L4.5 17c-1.2 1.5-0.2 3.5 1.8 3.5h11.4c2 0 3-2 1.8-3.5L14.5 9.8c-0.3-0.3-0.5-0.8-0.5-1.3V2'/%3E%3Cpath d='M6.5 16.5c1.5-1 4-1 5.5 0s4 1 5.5 0'/%3E%3C/svg%3E");
}
.chr-icon--compass {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0.5 0 1 0.5 1 1v2'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Cpath d='M12 6L7 21.5'/%3E%3Cpath d='M12 6l5 15.5'/%3E%3Cpath d='M8.5 16h7'/%3E%3Ccircle cx='7' cy='21.5' r='0.5' fill='black'/%3E%3Cpath d='M16 19c0.8 1.2 1 2.5 1 2.5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0.5 0 1 0.5 1 1v2'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Cpath d='M12 6L7 21.5'/%3E%3Cpath d='M12 6l5 15.5'/%3E%3Cpath d='M8.5 16h7'/%3E%3Ccircle cx='7' cy='21.5' r='0.5' fill='black'/%3E%3Cpath d='M16 19c0.8 1.2 1 2.5 1 2.5'/%3E%3C/svg%3E");
}
.chr-icon--tome {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4c2-1 5-1.5 10 1v15c-5-2-8-1.5-10-0.5V4z'/%3E%3Cpath d='M22 4c-2-1-5-1.5-10 1v15c5-2 8-1.5 10-0.5V4z'/%3E%3Cpath d='M5 7.5h4M5 10h3.5M5 12.5h4'/%3E%3Cpath d='M19 7.5h-4M19 10h-3.5M19 12.5h-4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4c2-1 5-1.5 10 1v15c-5-2-8-1.5-10-0.5V4z'/%3E%3Cpath d='M22 4c-2-1-5-1.5-10 1v15c5-2 8-1.5 10-0.5V4z'/%3E%3Cpath d='M5 7.5h4M5 10h3.5M5 12.5h4'/%3E%3Cpath d='M19 7.5h-4M19 10h-3.5M19 12.5h-4'/%3E%3C/svg%3E");
}
.chr-icon--scroll {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2c1.5 0 3 1 3 2.5S19.5 7 18 7H6c-1.5 0-3 1-3 2.5s1.5 2.5 3 2.5'/%3E%3Cpath d='M6 7h12v12c0 1.5-1.5 2.5-3 2.5s-3-1-3-2.5'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2c1.5 0 3 1 3 2.5S19.5 7 18 7H6c-1.5 0-3 1-3 2.5s1.5 2.5 3 2.5'/%3E%3Cpath d='M6 7h12v12c0 1.5-1.5 2.5-3 2.5s-3-1-3-2.5'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E");
}
.chr-icon--seal {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 6v2M12 16v2M6 12h2M16 12h2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 6v2M12 16v2M6 12h2M16 12h2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}
.chr-icon--key {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='4.5'/%3E%3Ccircle cx='8' cy='7' r='2'/%3E%3Cpath d='M11.5 10.5L20 19'/%3E%3Cpath d='M16 15l2.5 0'/%3E%3Cpath d='M18 17l2 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='4.5'/%3E%3Ccircle cx='8' cy='7' r='2'/%3E%3Cpath d='M11.5 10.5L20 19'/%3E%3Cpath d='M16 15l2.5 0'/%3E%3Cpath d='M18 17l2 0'/%3E%3C/svg%3E");
}
.chr-icon--eye {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c2-4 5.5-7 10-7s8 3 10 7c-2 4-5.5 7-10 7s-8-3-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3Cpath d='M12 2v3M4.5 4.5l2 2M19.5 4.5l-2 2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c2-4 5.5-7 10-7s8 3 10 7c-2 4-5.5 7-10 7s-8-3-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3Cpath d='M12 2v3M4.5 4.5l2 2M19.5 4.5l-2 2'/%3E%3C/svg%3E");
}
.chr-icon--hourglass {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14M5 21h14'/%3E%3Cpath d='M7 3c0 4 2 5.5 5 9-3 3.5-5 5-5 9'/%3E%3Cpath d='M17 3c0 4-2 5.5-5 9 3 3.5 5 5 5 9'/%3E%3Cpath d='M12 12v1'/%3E%3Ccircle cx='11' cy='17' r='0.4' fill='black'/%3E%3Ccircle cx='13' cy='18' r='0.4' fill='black'/%3E%3Ccircle cx='12' cy='19' r='0.4' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14M5 21h14'/%3E%3Cpath d='M7 3c0 4 2 5.5 5 9-3 3.5-5 5-5 9'/%3E%3Cpath d='M17 3c0 4-2 5.5-5 9 3 3.5 5 5 5 9'/%3E%3Cpath d='M12 12v1'/%3E%3Ccircle cx='11' cy='17' r='0.4' fill='black'/%3E%3Ccircle cx='13' cy='18' r='0.4' fill='black'/%3E%3Ccircle cx='12' cy='19' r='0.4' fill='black'/%3E%3C/svg%3E");
}
.chr-icon--mortar {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12c0 5 3 8 7 8s7-3 7-8H5z'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M15 4l-4 8'/%3E%3Ccircle cx='15.5' cy='3.5' r='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12c0 5 3 8 7 8s7-3 7-8H5z'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M15 4l-4 8'/%3E%3Ccircle cx='15.5' cy='3.5' r='1.2'/%3E%3C/svg%3E");
}
.chr-icon--star {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5L4.5 16h15L12 2.5z'/%3E%3Cpath d='M12 21.5L4.5 8h15L12 21.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5L4.5 16h15L12 2.5z'/%3E%3Cpath d='M12 21.5L4.5 8h15L12 21.5z'/%3E%3C/svg%3E");
}
.chr-icon--moon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14c-1.5 1.5-3.5 2.5-6 2.5C9 16.5 5 12.5 5 7.5c0-2 0.7-4 2-5.5C4 3.5 2 7 2 11c0 5.5 4.5 10 10 10 3.5 0 6.5-1.8 8-4.5z'/%3E%3Cpath d='M17 4l0.5 1.5L19 6l-1.5 0.5L17 8l-0.5-1.5L15 6l1.5-0.5L17 4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14c-1.5 1.5-3.5 2.5-6 2.5C9 16.5 5 12.5 5 7.5c0-2 0.7-4 2-5.5C4 3.5 2 7 2 11c0 5.5 4.5 10 10 10 3.5 0 6.5-1.8 8-4.5z'/%3E%3Cpath d='M17 4l0.5 1.5L19 6l-1.5 0.5L17 8l-0.5-1.5L15 6l1.5-0.5L17 4z'/%3E%3C/svg%3E");
}
.chr-icon--sun {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v3.5M12 18.5V22M2 12h3.5M18.5 12H22'/%3E%3Cpath d='M4.9 4.9c0.5 0.8 1.5 2 2.2 2.7M16.9 16.9c0.5 0.5 1.5 1.5 2.2 2.2M4.9 19.1c0.8-0.5 2-1.5 2.7-2.2M16.9 7.1c0.5-0.5 1.5-1.5 2.2-2.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v3.5M12 18.5V22M2 12h3.5M18.5 12H22'/%3E%3Cpath d='M4.9 4.9c0.5 0.8 1.5 2 2.2 2.7M16.9 16.9c0.5 0.5 1.5 1.5 2.2 2.2M4.9 19.1c0.8-0.5 2-1.5 2.7-2.2M16.9 7.1c0.5-0.5 1.5-1.5 2.2-2.2'/%3E%3C/svg%3E");
}
.chr-icon--compass-rose {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/%3E%3Cpath d='M12 7l-2.5 5L12 17l2.5-5L12 7z'/%3E%3Ctext x='11' y='5' font-size='3.5' fill='black' font-family='serif' stroke='none'>N%3C/text%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/%3E%3Cpath d='M12 7l-2.5 5L12 17l2.5-5L12 7z'/%3E%3Ctext x='11' y='5' font-size='3.5' fill='black' font-family='serif' stroke='none'>N%3C/text%3E%3C/svg%3E");
}
.chr-icon--ouroboros {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3C7 3 3 7 3 12s4 9 9 9 9-4 9-9c0-3.5-2-6.5-5-8'/%3E%3Cpath d='M16 4c-0.5 0.5-1.5 1-2 1s-1.5-1-1-2c0.3-0.5 1-1 1.8-0.8'/%3E%3Cpath d='M5.5 8c0.5-0.5 1-1 1.5-1.2'/%3E%3Ccircle cx='15.5' cy='5' r='0.5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3C7 3 3 7 3 12s4 9 9 9 9-4 9-9c0-3.5-2-6.5-5-8'/%3E%3Cpath d='M16 4c-0.5 0.5-1.5 1-2 1s-1.5-1-1-2c0.3-0.5 1-1 1.8-0.8'/%3E%3Cpath d='M5.5 8c0.5-0.5 1-1 1.5-1.2'/%3E%3Ccircle cx='15.5' cy='5' r='0.5' fill='black'/%3E%3C/svg%3E");
}
.chr-icon--ankh {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10c-3 0-5-2-5-4.5S9 1 12 1s5 2.5 5 4.5S15 10 12 10z'/%3E%3Cline x1='12' y1='10' x2='12' y2='22'/%3E%3Cline x1='7.5' y1='14' x2='16.5' y2='14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10c-3 0-5-2-5-4.5S9 1 12 1s5 2.5 5 4.5S15 10 12 10z'/%3E%3Cline x1='12' y1='10' x2='12' y2='22'/%3E%3Cline x1='7.5' y1='14' x2='16.5' y2='14'/%3E%3C/svg%3E");
}
.chr-icon--mercury {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='4.5'/%3E%3Cline x1='12' y1='15.5' x2='12' y2='22'/%3E%3Cline x1='9' y1='19.5' x2='15' y2='19.5'/%3E%3Cpath d='M8 7c-1-2-0.5-4 0.5-5'/%3E%3Cpath d='M16 7c1-2 0.5-4-0.5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='4.5'/%3E%3Cline x1='12' y1='15.5' x2='12' y2='22'/%3E%3Cline x1='9' y1='19.5' x2='15' y2='19.5'/%3E%3Cpath d='M8 7c-1-2-0.5-4 0.5-5'/%3E%3Cpath d='M16 7c1-2 0.5-4-0.5-5'/%3E%3C/svg%3E");
}
.chr-icon--transmute {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 4.5L5 17.5h14L12 4.5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 4.5L5 17.5h14L12 4.5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.chr-icon--flicker {
  animation: chr-flame-flicker 1.5s ease-in-out infinite;
}
.chr-icon--spin {
  animation: chr-transmute-spin 8s linear infinite;
}
.chr-icon--pulse {
  animation: chr-pulse 2s ease-in-out infinite;
}
.chr-icon--float {
  animation: chr-float 4s ease-in-out infinite;
}

@keyframes chr-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
@keyframes chr-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.chr-grimoire {
  position: relative;
  background: var(--chr-surface, #FAF6ED);
  border: 1px solid var(--chr-border, #D4C9B5);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(91, 60, 17, 0.08), 0 1px 3px rgba(91, 60, 17, 0.06), inset 0 0 40px rgba(210, 190, 150, 0.1);
  overflow: visible;
  padding: 0;
}
.chr-grimoire__bookmark {
  position: absolute;
  top: -5px;
  right: 20px;
  width: 30px;
  height: 50px;
  background: var(--chr-copper, #B87333);
  z-index: 2;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12);
}
.chr-grimoire__bookmark::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 15px solid var(--chr-copper, #B87333);
  border-right: 15px solid var(--chr-copper, #B87333);
  border-bottom: 8px solid transparent;
}
.chr-grimoire__bookmark--copper {
  background: var(--chr-copper, #B87333);
}
.chr-grimoire__bookmark--copper::after {
  border-left-color: var(--chr-copper, #B87333);
  border-right-color: var(--chr-copper, #B87333);
}
.chr-grimoire__bookmark--verdigris {
  background: var(--chr-verdigris, #4A7C6F);
}
.chr-grimoire__bookmark--verdigris::after {
  border-left-color: var(--chr-verdigris, #4A7C6F);
  border-right-color: var(--chr-verdigris, #4A7C6F);
}
.chr-grimoire__bookmark--aurum {
  background: var(--chr-aurum, #C5973E);
}
.chr-grimoire__bookmark--aurum::after {
  border-left-color: var(--chr-aurum, #C5973E);
  border-right-color: var(--chr-aurum, #C5973E);
}
.chr-grimoire__bookmark--cinnabar {
  background: var(--chr-cinnabar, #C23B22);
}
.chr-grimoire__bookmark--cinnabar::after {
  border-left-color: var(--chr-cinnabar, #C23B22);
  border-right-color: var(--chr-cinnabar, #C23B22);
}
.chr-grimoire__page {
  position: relative;
  padding: 24px 24px 24px 72px;
  min-height: 200px;
  background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(180, 165, 140, 0.3) 27px, rgba(180, 165, 140, 0.3) 28px);
  background-position: 0 16px;
}
.chr-grimoire__page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60px;
  bottom: 0;
  width: 2px;
  background: rgba(196, 168, 130, 0.5);
}
.chr-grimoire__title {
  font-family: var(--chr-font-display, "Cormorant Garamond", serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--chr-text, #1B1612);
  line-height: 1.3;
  margin: 0 0 12px 0;
  padding-bottom: 4px;
}
.chr-grimoire__annotation {
  position: absolute;
  left: 6px;
  width: 48px;
  font-family: var(--chr-font-script, "Caveat", cursive);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--chr-copper, #B87333);
  transform: rotate(-2deg);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.chr-grimoire__content {
  font-family: var(--chr-font-body, "EB Garamond", serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--chr-text, #1B1612);
  margin: 0 0 16px 0;
}
.chr-grimoire__content p {
  margin: 0 0 12px 0;
}
.chr-grimoire__diagram {
  border: 1.5px dashed var(--chr-border, #D4C9B5);
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  background: rgba(242, 235, 217, 0.5);
  text-align: center;
}
.chr-grimoire__diagram img,
.chr-grimoire__diagram svg {
  max-width: 100%;
  height: auto;
}
.chr-grimoire__footnote {
  font-family: var(--chr-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  color: var(--chr-text-muted, #8B7B6B);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid var(--chr-border, #D4C9B5);
  margin-top: 20px;
}

.chr.dark .chr-grimoire, .dark .chr .chr-grimoire,
.chr[data-theme=dark] .chr-grimoire, [data-theme=dark] .chr .chr-grimoire {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 40px rgba(210, 190, 150, 0.03), 0 0 24px rgba(184, 115, 51, 0.08);
}
.chr.dark .chr-grimoire__bookmark, .dark .chr .chr-grimoire__bookmark,
.chr[data-theme=dark] .chr-grimoire__bookmark, [data-theme=dark] .chr .chr-grimoire__bookmark {
  filter: brightness(1.15);
}
.chr.dark .chr-grimoire__diagram, .dark .chr .chr-grimoire__diagram,
.chr[data-theme=dark] .chr-grimoire__diagram, [data-theme=dark] .chr .chr-grimoire__diagram {
  background: rgba(26, 23, 20, 0.5);
}

.chr-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--chr-copper, #B87333);
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(91, 60, 17, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  transform: rotate(-5deg);
  cursor: default;
  flex-shrink: 0;
}
.chr-seal::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--chr-copper, #B87333) 0deg 8deg, transparent 8deg 16deg);
  z-index: -1;
  opacity: 0.6;
  mask-image: radial-gradient(circle, transparent 62%, black 63%);
  -webkit-mask-image: radial-gradient(circle, transparent 62%, black 63%);
}
.chr-seal::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.chr-seal__text {
  font-family: var(--chr-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chr-surface, #fff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
  z-index: 1;
}
.chr-seal--sm {
  width: 40px;
  height: 40px;
}
.chr-seal--sm::before {
  inset: -3px;
}
.chr-seal--sm::after {
  inset: 4px;
}
.chr-seal--sm .chr-seal__text {
  font-size: 0.45rem;
}
.chr-seal--lg {
  width: 96px;
  height: 96px;
}
.chr-seal--lg::before {
  inset: -6px;
}
.chr-seal--lg::after {
  inset: 10px;
}
.chr-seal--lg .chr-seal__text {
  font-size: 0.8rem;
}
.chr-seal--copper {
  background: var(--chr-copper, #B87333);
}
.chr-seal--copper::before {
  background: repeating-conic-gradient(var(--chr-copper, #B87333) 0deg 8deg, transparent 8deg 16deg);
}
.chr-seal--cinnabar {
  background: var(--chr-cinnabar, #C23B22);
}
.chr-seal--cinnabar::before {
  background: repeating-conic-gradient(var(--chr-cinnabar, #C23B22) 0deg 8deg, transparent 8deg 16deg);
}
.chr-seal--aurum {
  background: var(--chr-aurum, #C5973E);
}
.chr-seal--aurum::before {
  background: repeating-conic-gradient(var(--chr-aurum, #C5973E) 0deg 8deg, transparent 8deg 16deg);
}
.chr-seal--verdigris {
  background: var(--chr-verdigris, #4A7C6F);
}
.chr-seal--verdigris::before {
  background: repeating-conic-gradient(var(--chr-verdigris, #4A7C6F) 0deg 8deg, transparent 8deg 16deg);
}
.chr-seal--verified::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--chr-phosphor, #7EC8A0);
  border: 2px solid var(--chr-surface, #FAF6ED);
  inset: auto;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z'/%3E%3C/svg%3E");
  mask-size: 14px;
  -webkit-mask-size: 14px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.chr-seal--verified.chr-seal--sm::after {
  width: 14px;
  height: 14px;
  mask-size: 10px;
  -webkit-mask-size: 10px;
}
.chr-seal--verified.chr-seal--lg::after {
  width: 24px;
  height: 24px;
  mask-size: 18px;
  -webkit-mask-size: 18px;
}

.chr.dark .chr-seal, .dark .chr .chr-seal,
.chr[data-theme=dark] .chr-seal, [data-theme=dark] .chr .chr-seal {
  box-shadow: 0 2px 6px rgba(91, 60, 17, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 0 16px rgba(184, 115, 51, 0.2);
}

.chr-transmutation {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}
.chr-transmutation__circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed var(--chr-copper, #B87333);
}
.chr-transmutation__circle::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--chr-aurum, #C5973E);
  border-bottom-color: var(--chr-aurum, #C5973E);
}
.chr-transmutation__circle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, var(--chr-copper, #B87333) 3px, transparent 3px), radial-gradient(circle at 100% 50%, var(--chr-copper, #B87333) 3px, transparent 3px), radial-gradient(circle at 50% 100%, var(--chr-copper, #B87333) 3px, transparent 3px), radial-gradient(circle at 0% 50%, var(--chr-copper, #B87333) 3px, transparent 3px);
}
.chr-transmutation__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--chr-font-display, "Cormorant Garamond", serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--chr-text, #1B1612);
  line-height: 1.3;
}
.chr-transmutation__inner small {
  font-family: var(--chr-font-body, "EB Garamond", serif);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--chr-text-muted, #8B7B6B);
  margin-top: 4px;
}
.chr-transmutation--loading .chr-transmutation__circle {
  animation: chr-transmute-spin 20s linear infinite;
}
.chr-transmutation--loading .chr-transmutation__circle::before {
  animation: chr-transmute-spin 14s linear infinite reverse;
}
.chr-transmutation--loading .chr-transmutation__circle::after {
  animation: chr-transmute-spin 20s linear infinite;
}
.chr-transmutation--sm {
  width: 80px;
  height: 80px;
}
.chr-transmutation--sm .chr-transmutation__circle::before {
  inset: 6px;
}
.chr-transmutation--sm .chr-transmutation__inner {
  font-size: 0.875rem;
}
.chr-transmutation--sm .chr-transmutation__inner small {
  font-size: 0.6rem;
}
.chr-transmutation--lg {
  width: 300px;
  height: 300px;
}
.chr-transmutation--lg .chr-transmutation__circle {
  border-width: 3px;
}
.chr-transmutation--lg .chr-transmutation__circle::before {
  inset: 18px;
  border-width: 2px;
}
.chr-transmutation--lg .chr-transmutation__circle::after {
  inset: -6px;
  background: radial-gradient(circle at 50% 0%, var(--chr-copper, #B87333) 4px, transparent 4px), radial-gradient(circle at 100% 50%, var(--chr-copper, #B87333) 4px, transparent 4px), radial-gradient(circle at 50% 100%, var(--chr-copper, #B87333) 4px, transparent 4px), radial-gradient(circle at 0% 50%, var(--chr-copper, #B87333) 4px, transparent 4px);
}
.chr-transmutation--lg .chr-transmutation__inner {
  font-size: 2rem;
}
.chr-transmutation--lg .chr-transmutation__inner small {
  font-size: 0.875rem;
}

.chr.dark .chr-transmutation__circle, .dark .chr .chr-transmutation__circle,
.chr[data-theme=dark] .chr-transmutation__circle, [data-theme=dark] .chr .chr-transmutation__circle {
  box-shadow: 0 0 12px rgba(184, 115, 51, 0.15);
}

.chr-potion {
  --chr-potion-level: 50%;
  --chr-potion-color: var(--chr-copper, #B87333);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  height: 120px;
}
.chr-potion__flask {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chr-potion__flask::before {
  content: "";
  display: block;
  width: 28px;
  height: 20px;
  margin: 0 auto;
  border: 2px solid var(--chr-copper, #B87333);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--chr-surface, #FAF6ED);
  flex-shrink: 0;
}
.chr-potion__flask::after {
  content: "";
  display: block;
  flex: 1;
  width: 100%;
  border: 2px solid var(--chr-copper, #B87333);
  border-radius: 4px 4px 40% 40%;
  background: var(--chr-surface, #FAF6ED);
  position: relative;
}
.chr-potion__liquid {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: calc(var(--chr-potion-level) * 0.83);
  max-height: calc(100% - 24px);
  border-radius: 2px 2px 38% 38%;
  background: linear-gradient(to top, color-mix(in srgb, var(--chr-potion-color) 100%, black 20%), var(--chr-potion-color), color-mix(in srgb, var(--chr-potion-color) 100%, white 25%));
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.chr-potion__liquid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.chr-potion__bubbles {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: calc(var(--chr-potion-level) * 0.7);
  max-height: calc(100% - 30px);
  pointer-events: none;
  overflow: hidden;
}
.chr-potion__bubbles::before {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 30%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: chr-bubble-rise 2.5s ease-in infinite;
}
.chr-potion__bubbles::after {
  content: "";
  position: absolute;
  bottom: 5%;
  left: 55%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: chr-bubble-rise 3.2s ease-in infinite 0.8s;
}
.chr-potion__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--chr-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--chr-text, #1B1612);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  z-index: 2;
  white-space: nowrap;
}
.chr-potion--copper {
  --chr-potion-color: var(--chr-copper, #B87333);
}
.chr-potion--verdigris {
  --chr-potion-color: var(--chr-verdigris, #4A7C6F);
}
.chr-potion--azurite {
  --chr-potion-color: var(--chr-azurite, #2C5F8A);
}
.chr-potion--cinnabar {
  --chr-potion-color: var(--chr-cinnabar, #C23B22);
}
.chr-potion--phosphor {
  --chr-potion-color: var(--chr-phosphor, #7EC8A0);
}
.chr-potion--aether {
  --chr-potion-color: var(--chr-aether, #9B8EC4);
}
.chr-potion--sm {
  width: 36px;
  height: 60px;
}
.chr-potion--sm .chr-potion__flask::before {
  width: 16px;
  height: 12px;
}
.chr-potion--sm .chr-potion__label {
  font-size: 0.55rem;
}
.chr-potion--sm .chr-potion__bubbles::before {
  width: 3px;
  height: 3px;
}
.chr-potion--sm .chr-potion__bubbles::after {
  width: 2px;
  height: 2px;
}
.chr-potion--lg {
  width: 96px;
  height: 180px;
}
.chr-potion--lg .chr-potion__flask::before {
  width: 40px;
  height: 28px;
}
.chr-potion--lg .chr-potion__label {
  font-size: 0.9rem;
}
.chr-potion--lg .chr-potion__bubbles::before {
  width: 7px;
  height: 7px;
}
.chr-potion--lg .chr-potion__bubbles::after {
  width: 5px;
  height: 5px;
}

.chr.dark .chr-potion__flask::after, .dark .chr .chr-potion__flask::after,
.chr[data-theme=dark] .chr-potion__flask::after, [data-theme=dark] .chr .chr-potion__flask::after {
  box-shadow: 0 0 12px color-mix(in srgb, var(--chr-potion-color) 30%, transparent);
}
.chr.dark .chr-potion__liquid::before, .dark .chr .chr-potion__liquid::before,
.chr[data-theme=dark] .chr-potion__liquid::before, [data-theme=dark] .chr .chr-potion__liquid::before {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes chr-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px) scale(0.5);
    opacity: 0;
  }
}
.chr-scroll-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--chr-surface, #FAF6ED);
  border: 1px solid var(--chr-border, #D4C9B5);
  border-left: 3px solid var(--chr-azurite, #2C5F8A);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(91, 60, 17, 0.12), 0 2px 6px rgba(91, 60, 17, 0.08);
  padding: 16px 20px;
  z-index: 9999;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.chr-scroll-toast::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 12px;
  width: 16px;
  height: 10px;
  background: var(--chr-surface, #FAF6ED);
  border: 1px solid var(--chr-border, #D4C9B5);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  transform: scaleY(0.6);
  transform-origin: bottom;
}
.chr-scroll-toast--visible {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
  animation: chr-unfurl 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.chr-scroll-toast__header {
  font-family: var(--chr-font-display, "Cormorant Garamond", serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--chr-text, #1B1612);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.chr-scroll-toast__header .chr-icon {
  flex-shrink: 0;
}
.chr-scroll-toast__body {
  font-family: var(--chr-font-body, "EB Garamond", serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--chr-text-secondary, #5C4A3A);
  margin: 0 0 12px 0;
}
.chr-scroll-toast__body:last-child {
  margin-bottom: 0;
}
.chr-scroll-toast__action {
  display: inline-block;
  font-family: var(--chr-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chr-copper, #B87333);
  background: none;
  border: 1px solid var(--chr-copper, #B87333);
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.chr-scroll-toast__action:hover {
  background: var(--chr-copper, #B87333);
  color: var(--chr-surface, #fff);
}
.chr-scroll-toast--info {
  border-left-color: var(--chr-azurite, #2C5F8A);
}
.chr-scroll-toast--success {
  border-left-color: var(--chr-phosphor, #7EC8A0);
}
.chr-scroll-toast--warning {
  border-left-color: var(--chr-aurum, #C5973E);
}
.chr-scroll-toast--error {
  border-left-color: var(--chr-cinnabar, #C23B22);
}
.chr-scroll-toast:nth-child(2) {
  bottom: 104px;
}
.chr-scroll-toast:nth-child(3) {
  bottom: 184px;
}
.chr-scroll-toast:nth-child(4) {
  bottom: 264px;
}

.chr.dark .chr-scroll-toast, .dark .chr .chr-scroll-toast,
.chr[data-theme=dark] .chr-scroll-toast, [data-theme=dark] .chr .chr-scroll-toast {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(184, 115, 51, 0.06);
}

.chr-quill {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.chr-quill__input {
  width: 100%;
  padding: 14px 4px 8px;
  font-family: var(--chr-font-body, "EB Garamond", serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--chr-text, #1B1612);
  background: var(--chr-surface, #FAF6ED);
  border: none;
  border-bottom: 2px solid var(--chr-border, #D4C9B5);
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s ease;
  caret-color: var(--chr-copper, #B87333);
}
.chr-quill__input::placeholder {
  color: transparent;
}
.chr-quill__input[rows],
.chr-quill__input textarea.chr-quill__input {
  resize: vertical;
  min-height: 80px;
}
.chr-quill__label {
  position: absolute;
  top: 14px;
  left: 4px;
  font-family: var(--chr-font-script, "Caveat", cursive);
  font-size: 1.1rem;
  color: var(--chr-text-muted, #8B7B6B);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
.chr-quill::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--chr-copper, #B87333);
  transition: none;
}
.chr-quill:focus-within::after {
  animation: chr-ink-draw 400ms ease-out forwards;
}
.chr-quill:focus-within .chr-quill__label {
  transform: translateY(-22px) scale(0.75);
  color: var(--chr-copper, #B87333);
}
.chr-quill:focus-within .chr-quill__input {
  border-bottom-color: transparent;
}
.chr-quill .chr-quill__input:not(:placeholder-shown) ~ .chr-quill__label,
.chr-quill .chr-quill__input:not(:empty) ~ .chr-quill__label {
  transform: translateY(-22px) scale(0.75);
  color: var(--chr-text-secondary, #5C4A3A);
}
.chr-quill:focus-within .chr-quill__input:not(:placeholder-shown) ~ .chr-quill__label {
  color: var(--chr-copper, #B87333);
}
.chr-quill--mono .chr-quill__input {
  font-family: var(--chr-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.chr-quill--error .chr-quill__input {
  border-bottom-color: var(--chr-cinnabar, #C23B22);
}
.chr-quill--error::after {
  background: var(--chr-cinnabar, #C23B22);
}
.chr-quill--error .chr-quill__label {
  color: var(--chr-cinnabar, #C23B22);
}
.chr-quill--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.chr-quill--disabled .chr-quill__input {
  border-bottom-style: dashed;
}

.chr.dark .chr-quill:focus-within::after, .dark .chr .chr-quill:focus-within::after,
.chr[data-theme=dark] .chr-quill:focus-within::after, [data-theme=dark] .chr .chr-quill:focus-within::after {
  box-shadow: 0 0 8px rgba(184, 115, 51, 0.3);
}

.chr-constellation {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 0;
}
.chr-constellation__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.chr-constellation__node::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--chr-copper, #B87333);
  background: var(--chr-surface, #FAF6ED);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  z-index: 1;
}
.chr-constellation__node:hover::before {
  background: var(--chr-aurum, #C5973E);
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(197, 151, 62, 0.3);
}
.chr-constellation__node--active::before {
  background: var(--chr-copper, #B87333);
  box-shadow: 0 0 12px rgba(184, 115, 51, 0.4);
  animation: chr-constellation-pulse 2s ease-in-out infinite;
}
.chr-constellation__node--complete::before {
  background: var(--chr-verdigris, #4A7C6F);
  border-color: var(--chr-verdigris, #4A7C6F);
}
.chr-constellation__label {
  font-family: var(--chr-font-body, "EB Garamond", serif);
  font-size: 0.8rem;
  color: var(--chr-text-secondary, #5C4A3A);
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s ease;
  line-height: 1.3;
}
.chr-constellation__node:hover .chr-constellation__label {
  color: var(--chr-text, #1B1612);
}
.chr-constellation__node--active .chr-constellation__label {
  color: var(--chr-copper, #B87333);
  font-weight: 600;
}
.chr-constellation__node--complete .chr-constellation__label {
  color: var(--chr-verdigris, #4A7C6F);
}
.chr-constellation__line {
  flex: 1;
  height: 1px;
  min-width: 24px;
  background: var(--chr-border, #D4C9B5);
  align-self: flex-start;
  margin-top: 7px;
}
.chr-constellation__line--complete {
  background: var(--chr-verdigris, #4A7C6F);
}
.chr-constellation--vertical {
  flex-direction: column;
  align-items: flex-start;
}
.chr-constellation--vertical .chr-constellation__node {
  flex-direction: row;
  gap: 12px;
}
.chr-constellation--vertical .chr-constellation__label {
  text-align: left;
  white-space: normal;
}
.chr-constellation--vertical .chr-constellation__line {
  width: 1px;
  height: auto;
  min-height: 32px;
  min-width: unset;
  flex: unset;
  margin-top: 0;
  margin-left: 7px;
  align-self: stretch;
}

@keyframes chr-constellation-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(184, 115, 51, 0.3);
  }
  50% {
    box-shadow: 0 0 18px rgba(184, 115, 51, 0.5);
  }
}
.chr.dark .chr-constellation__node--active::before, .dark .chr .chr-constellation__node--active::before,
.chr[data-theme=dark] .chr-constellation__node--active::before, [data-theme=dark] .chr .chr-constellation__node--active::before {
  box-shadow: 0 0 16px rgba(184, 115, 51, 0.6);
  animation: chr-constellation-pulse-dark 2s ease-in-out infinite;
}
.chr.dark .chr-constellation__line, .dark .chr .chr-constellation__line,
.chr[data-theme=dark] .chr-constellation__line, [data-theme=dark] .chr .chr-constellation__line {
  background: var(--chr-border, #2A2520);
  opacity: 0.8;
}
.chr.dark .chr-constellation__line--complete, .dark .chr .chr-constellation__line--complete,
.chr[data-theme=dark] .chr-constellation__line--complete, [data-theme=dark] .chr .chr-constellation__line--complete {
  opacity: 1;
}

@keyframes chr-constellation-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 12px rgba(184, 115, 51, 0.5);
  }
  50% {
    box-shadow: 0 0 24px rgba(184, 115, 51, 0.7);
  }
}