:root {
  --color-canvas-white: #ffffff;
  --color-graphite-ink: #3a3a3e;
  --color-deep-carbon: #090b11;
  --color-muted-ink: #6b6b70;
  --color-ash-veil: #b5b0b0;
  --color-hairline-soft: #e4e2e2;
  --color-paper: #faf8f5;
  --color-apricot-wash: #ffcf9e;
  --color-iris-mist: #babfff;
  --color-fuchsia-bloom: #e3a2ef;
  --color-polar-blue: #bfe0f7;

  --color-cta-bg: #3a3a3e;
  --color-cta-bg-hover: #090b11;
  --color-cta-text: #ffffff;
  --color-ghost-bg: #ffffff;
  --color-ghost-border: #3a3a3e;
  --color-ghost-text: #3a3a3e;
  --color-disabled-bg: #e4e2e2;
  --color-disabled-text: #8e8e93;

  --color-error: #b42318;
  --color-error-bg: #fdecea;
  --color-success: #1f7a4d;
  --color-success-bg: #e8f5ee;
  --color-warning: #8a5a00;
  --color-warning-bg: #fff4dc;
  --color-info: #1f5f8b;
  --color-info-bg: #e9f4fc;
  --color-focus: #090b11;

  --category-writing: #ffcf9e;
  --category-writing-soft: #fff4e8;
  --category-language: #babfff;
  --category-language-soft: #f1f2ff;

  --level-active: #3a3a3e;
  --level-inactive: #e4e2e2;
  --level-segment-width: 18px;
  --level-segment-height: 4px;
  --level-segment-gap: 3px;

  --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-instrument-serif: 'Instrument Serif', Georgia, "Times New Roman", serif;
  --font-ja: 'Noto Sans JP', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-instrument-sans);
  --font-heading: var(--font-instrument-serif);

  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.12px;
  --text-small: 14px;
  --leading-small: 1.5;
  --tracking-small: -0.14px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: -0.16px;
  --text-lead: clamp(18px, 2vw, 24px);
  --leading-lead: 1.5;
  --tracking-lead: -0.24px;
  --text-subheading: clamp(20px, 2.4vw, 28px);
  --leading-subheading: 1.3;
  --tracking-subheading: -0.28px;
  --text-heading: clamp(30px, 4.5vw, 48px);
  --leading-heading: 1.15;
  --tracking-heading: -0.54px;
  --text-display: clamp(36px, 6vw, 54px);
  --leading-display: 1.05;
  --tracking-display: -1.62px;
  --text-price: clamp(22px, 2.6vw, 28px);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-90: 90px;

  --page-max-width: 1200px;
  --reading-max-width: 720px;
  --form-max-width: 480px;
  --page-gutter: clamp(16px, 4vw, 32px);
  --section-gap: clamp(56px, 8vw, 90px);
  --card-padding: clamp(16px, 2vw, 24px);
  --grid-gap: clamp(12px, 2vw, 24px);
  --element-gap: 8px;
  --header-height: 72px;

  --control-height: 48px;
  --control-height-sm: 36px;
  --control-padding-x: 20px;
  --control-border: 1px solid var(--color-graphite-ink);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
  --touch-target: 44px;

  --border-hairline: 1px solid var(--color-graphite-ink);
  --border-soft: 1px solid var(--color-hairline-soft);

  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-buttons: 0px;
  --radius-inputs: 0px;

  --shadow-none: none;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --surface-canvas: #ffffff;
  --surface-paper: #faf8f5;
  --surface-ash-band: #b5b0b0;
  --surface-polar-blue-field: #bfe0f7;
  --surface-apricot-field: #ffcf9e;
  --surface-iris-field: #babfff;
  --surface-fuchsia-field: #e3a2ef;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite-ink);
  background-color: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

html:lang(ja) body {
  font-family: var(--font-ja);
}

body.is-locked {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--spacing-16);
  font-weight: var(--font-weight-regular);
  color: var(--color-graphite-ink);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3 {
  font-family: var(--font-ja);
  font-weight: var(--font-weight-medium);
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

h4 {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  letter-spacing: -0.2px;
}

h5 {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h6 {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
}

p {
  margin: 0 0 var(--spacing-16);
}

ul,
ol {
  margin: 0 0 var(--spacing-16);
  padding-left: var(--spacing-24);
}

li + li {
  margin-top: var(--spacing-4);
}

a {
  color: var(--color-graphite-ink);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-deep-carbon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--text-small);
}

hr {
  height: 0;
  margin: var(--spacing-32) 0;
  border: 0;
  border-top: var(--border-soft);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--spacing-12) var(--spacing-16);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-soft);
}

th {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

blockquote {
  margin: 0 0 var(--spacing-24);
  padding-left: var(--spacing-24);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  border-left: var(--border-hairline);
}

::selection {
  color: var(--color-deep-carbon);
  background-color: var(--color-apricot-wash);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

label {
  display: block;
  margin-bottom: var(--spacing-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-body);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--control-border);
  border-radius: var(--radius-inputs);
  appearance: none;
  transition: border-color var(--transition-fast);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

select {
  padding-right: var(--spacing-48);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-graphite-ink) 50%), linear-gradient(135deg, var(--color-graphite-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted-ink);
  opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--color-disabled-text);
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-graphite-ink);
}

.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-error);
}

.invalid-feedback,
.field-error {
  display: block;
  margin-top: var(--spacing-8);
  font-size: var(--text-small);
  color: var(--color-error);
}

.container {
  width: 100%;
  max-width: calc(var(--page-max-width) + var(--page-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.container--reading {
  max-width: calc(var(--reading-max-width) + var(--page-gutter) * 2);
}

.container--form {
  max-width: calc(var(--form-max-width) + var(--page-gutter) * 2);
}

.section {
  padding: var(--section-gap) 0;
}

.section--paper {
  background-color: var(--surface-paper);
}

.section--blue {
  background-color: var(--surface-polar-blue-field);
}

.section--writing {
  background-color: var(--category-writing-soft);
}

.section--language {
  background-color: var(--category-language-soft);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
}

.muted {
  color: var(--color-muted-ink);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

.price {
  font-size: var(--text-price);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--control-height);
  padding: 0 var(--control-padding-x);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-cta-text);
  background-color: var(--color-cta-bg);
  border: 1px solid var(--color-cta-bg);
  border-radius: var(--radius-buttons);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover {
  color: var(--color-cta-text);
  text-decoration: none;
  background-color: var(--color-cta-bg-hover);
  border-color: var(--color-cta-bg-hover);
}

.btn--ghost {
  color: var(--color-ghost-text);
  background-color: var(--color-ghost-bg);
  border-color: var(--color-ghost-border);
}

.btn--ghost:hover {
  color: var(--color-cta-text);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--spacing-16);
  font-size: var(--text-small);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn:disabled,
.btn.is-disabled {
  color: var(--color-disabled-text);
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-graphite-ink);
  background-color: var(--color-hairline-soft);
  border-radius: var(--radius-tags);
}

.badge--writing {
  background-color: var(--category-writing);
}

.badge--language {
  background-color: var(--category-language);
}

.badge--featured {
  color: var(--color-deep-carbon);
  background-color: var(--color-fuchsia-bloom);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  border-radius: var(--radius-cards);
  transition: border-color var(--transition-fast);
}

.card:hover {
  border-color: var(--color-graphite-ink);
}

.card--writing {
  border-top: 4px solid var(--category-writing);
}

.card--language {
  border-top: 4px solid var(--category-language);
}

.level {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.level__bars {
  display: inline-flex;
  gap: var(--level-segment-gap);
}

.level__bars span {
  width: var(--level-segment-width);
  height: var(--level-segment-height);
  background-color: var(--level-inactive);
}

.level__bars span.is-on {
  background-color: var(--level-active);
}

.alert {
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  border-left: 4px solid currentColor;
  border-radius: 0;
}

.alert--error {
  color: var(--color-error);
  background-color: var(--color-error-bg);
}

.alert--success {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.alert--warning {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.alert--info {
  color: var(--color-info);
  background-color: var(--color-info-bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-gutter);
  overflow: hidden;
  text-align: center;
  background-color: var(--surface-canvas);
}

#preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--color-hairline-soft) 35px, var(--color-hairline-soft) 36px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  opacity: 0;
  animation: pre-paper 0.6s ease forwards;
}

#preloader::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(24px, 12vw, 160px);
  width: 1px;
  background-color: var(--color-fuchsia-bloom);
  transform: scaleY(0);
  transform-origin: top;
  animation: pre-margin 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

.pre__core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
}

.pre__name {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: var(--color-graphite-ink);
}

.pre__char {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.35em);
  animation: pre-char 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 45ms + 0.15s);
}

.pre__caret {
  display: inline-block;
  width: 2px;
  height: 0.8em;
  margin: 0 0 0.08em 0.08em;
  background-color: var(--color-graphite-ink);
  animation: pre-caret 0.9s steps(1) infinite;
}

.pre__rule {
  position: relative;
  display: flex;
  width: min(260px, 70%);
  height: 2px;
  margin: var(--spacing-24) 0 var(--spacing-16);
}

.pre__stroke {
  flex: 1;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
}

.pre__stroke--writing {
  background-color: var(--category-writing);
  animation: pre-stroke 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards;
}

.pre__stroke--language {
  background-color: var(--category-language);
  animation: pre-stroke 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards;
}

.pre__nib {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background-color: var(--color-graphite-ink);
  opacity: 0;
  animation: pre-nib 1.8s ease-in-out 1.45s infinite;
}

.pre__topic {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-muted-ink);
  opacity: 0;
  transform: translateY(6px);
  animation: pre-rise 0.5s ease 1.1s forwards;
}

@keyframes pre-paper {
  to {
    opacity: 1;
  }
}

@keyframes pre-margin {
  to {
    transform: scaleY(1);
  }
}

@keyframes pre-char {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes pre-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes pre-stroke {
  to {
    transform: scaleX(1);
  }
}

@keyframes pre-nib {
  0% {
    left: 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 6px);
    opacity: 0;
  }
}

@keyframes pre-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575px) {
  .pre__name {
    font-size: clamp(34px, 11vw, 44px);
  }

  #preloader::after {
    display: none;
  }
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hd {
  --hd-pad: clamp(16px, 3vw, 48px);
  --hd-dark: var(--color-deep-carbon);
  --hd-soft: rgba(255, 255, 255, 0.72);
  --hd-line: rgba(255, 255, 255, 0.16);
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
}

.hd__top {
  position: relative;
  z-index: 3;
  max-height: 48px;
  background-color: var(--surface-paper);
  border-bottom: var(--border-soft);
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.hd.is-scrolled .hd__top {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-bottom-width: 0;
}

.hd__top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 44px;
  padding: 6px var(--hd-pad);
  font-size: 13px;
}

.hd__contact {
  min-width: 0;
}

.hd__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-graphite-ink);
}

.hd__mail i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  background-color: var(--category-writing);
  transition: background-color var(--transition-fast), transform var(--transition-base);
}

.hd__mail:hover {
  text-decoration: none;
}

.hd__mail:hover i {
  background-color: var(--category-language);
  transform: rotate(-8deg);
}

.hd__mail span {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size var(--transition-base);
}

.hd__mail:hover span {
  background-size: 100% 1px;
}

.hd__utils {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.hd__rule {
  width: 1px;
  height: 18px;
  margin: 0 var(--spacing-4);
  background-color: var(--color-ash-veil);
}

.hd__auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--spacing-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.hd__auth:hover {
  text-decoration: none;
  border-color: var(--color-graphite-ink);
}

.hd__auth--join {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.hd__auth--join:hover {
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  border-color: var(--color-deep-carbon);
}

.hd__auth--out {
  color: var(--color-muted-ink);
}

.hd__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--category-language);
}

.hd__initial--lg {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--font-weight-regular);
}

.pick {
  position: relative;
}

.pick__field {
  display: inline-flex;
  align-items: stretch;
  min-height: 30px;
  padding: 0;
  font-size: 13px;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-fast);
}

.pick__field:hover,
.pick.is-open .pick__field {
  border-color: var(--color-graphite-ink);
}

.pick__label {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: var(--color-muted-ink);
  border-right: var(--border-soft);
}

.pick__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  font-weight: var(--font-weight-medium);
}

.pick__sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-hairline-soft);
}

.pick__chev {
  align-self: center;
  margin-right: 8px;
  font-size: 9px;
  transition: transform var(--transition-base);
}

.pick.is-open .pick__chev {
  transform: rotate(180deg);
}

.pick__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
}

.pick.is-open .pick__menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.pick__menu li {
  margin: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pick.is-open .pick__menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--i) * 40ms + 60ms);
}

.pick__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-graphite-ink);
  transition: background-color var(--transition-fast), padding-left var(--transition-base);
}

.pick__opt::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background-color: var(--color-graphite-ink);
  transform: scaleY(0);
  transition: transform var(--transition-base);
}

.pick__opt:hover {
  padding-left: 16px;
  text-decoration: none;
  background-color: var(--surface-paper);
}

.pick__opt.is-active {
  font-weight: var(--font-weight-medium);
}

.pick__opt.is-active::before,
.pick__opt:hover::before {
  transform: scaleY(1);
}

.pick__code {
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  color: var(--color-muted-ink);
}

.hd__main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  min-height: 76px;
  padding: 0 var(--hd-pad);
  color: var(--color-canvas-white);
  background-color: var(--hd-dark);
}

.hd__brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  transition: opacity var(--transition-fast);
}

.hd__brand:hover {
  opacity: 0.85;
}

.hd__brand img {
  width: auto;
  height: 42px;
}

.hd__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hd__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd__links > li {
  margin: 0;
}

.hd__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 0 var(--spacing-16);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--hd-soft);
  background: none;
  border: 0;
  transition: color var(--transition-fast);
}

.hd__link::before,
.hd__link::after {
  content: "";
  position: absolute;
  bottom: 22px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hd__link::before {
  left: var(--spacing-16);
  right: 50%;
  background-color: var(--category-writing);
}

.hd__link::after {
  left: 50%;
  right: var(--spacing-16);
  background-color: var(--category-language);
  transition-delay: 0.08s;
}

.hd__link:hover,
.hd__link.is-active {
  color: var(--color-canvas-white);
  text-decoration: none;
}

.hd__link:hover::before,
.hd__link:hover::after,
.hd__link.is-active::before,
.hd__link.is-active::after {
  transform: scaleX(1);
}

.hd__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-left: auto;
}

.hd__credits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 var(--spacing-12);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-canvas-white);
  border: 1px solid var(--hd-line);
  transition: border-color var(--transition-fast);
}

.hd__credits i {
  color: var(--category-writing);
}

.hd__credits:hover {
  color: var(--color-canvas-white);
  text-decoration: none;
  border-color: var(--color-canvas-white);
}

.hd__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 6px 0 var(--spacing-16);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--hd-dark);
  background-color: var(--color-canvas-white);
  border: 1px solid var(--color-canvas-white);
  overflow: hidden;
  isolation: isolate;
}

.hd__cart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--category-writing);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hd__cart:hover::before,
.hd__cart[aria-expanded="true"]::before {
  transform: translateY(0);
}

.hd__cart > .fa-shopping-bag {
  transition: transform 0.3s ease;
}

.hd__cart:hover > .fa-shopping-bag {
  transform: rotate(-10deg) scale(1.08);
}

.hd__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-canvas-white);
  background-color: var(--hd-dark);
  animation: hd-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both;
}

.hd__count.is-empty {
  color: var(--color-muted-ink);
  background-color: var(--color-hairline-soft);
  animation: none;
}

.hd__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 42px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--hd-line);
  transition: border-color var(--transition-fast);
}

.hd__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-canvas-white);
  transition: width var(--transition-base);
}

.hd__burger span:nth-child(2) {
  width: 70%;
}

.hd__burger:hover {
  border-color: var(--color-canvas-white);
}

.hd__burger:hover span:nth-child(2) {
  width: 100%;
}

.hd__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--category-writing), var(--category-language));
  transform: scaleX(var(--hd-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 950;
  background-color: rgba(9, 11, 17, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.veil.is-open {
  opacity: 1;
}

.sheet {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: var(--color-canvas-white);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), visibility 0s linear 0.5s;
}

.sheet.is-open {
  visibility: visible;
  transform: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.sheet--cart {
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(440px, calc(100% - 24px));
  border: var(--border-hairline);
  transform: translateX(calc(100% + 24px));
}

.sheet--cart::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.sheet--cart.is-open::before {
  transform: scaleX(1);
}

.sheet--menu {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 88vw);
  border-right: var(--border-hairline);
  transform: translateX(-100%);
}

.sheet__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  border-bottom: var(--border-soft);
}

.sheet__eyebrow {
  margin: 0 0 4px;
  font-size: var(--text-caption);
  color: var(--color-muted-ink);
}

.sheet__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.sheet__qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  background-color: var(--category-writing);
}

.sheet__close {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: var(--border-hairline);
  transition: background-color var(--transition-fast);
}

.sheet__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  margin: -0.75px 0 0 -9px;
  background-color: var(--color-graphite-ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--transition-fast);
}

.sheet__close span:first-child {
  transform: rotate(45deg);
}

.sheet__close span:last-child {
  transform: rotate(-45deg);
}

.sheet__close:hover {
  background-color: var(--color-graphite-ink);
}

.sheet__close:hover span {
  background-color: var(--color-canvas-white);
}

.sheet__close:hover span:first-child {
  transform: rotate(135deg);
}

.sheet__close:hover span:last-child {
  transform: rotate(45deg);
}

.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-24);
  overscroll-behavior: contain;
}

.sheet__foot {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  background-color: var(--surface-paper);
  border-top: var(--border-soft);
}

.bag__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bag__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--spacing-16);
  align-items: start;
  margin: 0;
  padding: var(--spacing-16) 0;
  border-bottom: var(--border-soft);
  opacity: 0;
  transform: translateX(24px);
}

.bag__item:first-child {
  padding-top: 0;
}

.sheet.is-open .bag__item {
  animation: bag-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 70ms + 0.2s);
}

.bag__img {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background-color: var(--surface-paper);
  border: var(--border-soft);
}

.bag__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bag__item:hover .bag__img img {
  transform: scale(1.06);
}

.bag__img--credits {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background-color: var(--category-writing-soft);
}

.bag__info {
  min-width: 0;
}

.bag__level {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  background-color: var(--category-language);
}

.bag__name {
  margin: 0 0 4px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.bag__meta {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.bag__price {
  margin: 6px 0 0;
  font-weight: var(--font-weight-semibold);
}

.bag__remove {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: var(--border-soft);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform 0.35s ease;
}

.bag__remove span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background-color: var(--color-graphite-ink);
}

.bag__remove span:first-child {
  transform: rotate(45deg);
}

.bag__remove span:last-child {
  transform: rotate(-45deg);
}

.bag__remove:hover {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  transform: rotate(90deg);
}

.bag__remove:hover span {
  background-color: var(--color-error);
}

.bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--spacing-32) var(--spacing-8);
  text-align: center;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--color-hairline-soft) 31px, var(--color-hairline-soft) 32px);
}

.bag__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--spacing-24);
  font-size: 26px;
  background-color: var(--category-writing);
  animation: bag-float 3s ease-in-out infinite;
}

.bag__head {
  margin: 0 0 var(--spacing-8);
  padding: 0 var(--spacing-8);
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.15;
  background-color: var(--color-canvas-white);
}

.bag__text {
  max-width: 300px;
  margin: 0 0 var(--spacing-24);
  padding: 0 var(--spacing-8);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
  background-color: var(--color-canvas-white);
}

.bag__sum {
  margin: 0 0 var(--spacing-8);
}

.bag__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.bag__row dt {
  font-weight: var(--font-weight-medium);
}

.bag__row dd {
  margin: 0;
}

.bag__row--muted {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.bag__total {
  font-size: var(--text-price);
  font-weight: var(--font-weight-semibold);
}

.bag__total small {
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-ink);
}

.bag__continue {
  justify-self: center;
  margin-top: 4px;
  padding: 6px;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bag__continue:hover {
  color: var(--color-graphite-ink);
}

.menu__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-16);
  color: var(--color-graphite-ink);
  background-color: var(--category-language-soft);
}

.menu__user:hover {
  text-decoration: none;
}

.menu__name {
  display: block;
  font-weight: var(--font-weight-medium);
}

.menu__credits {
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.menu__list {
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

.menu__list > li {
  margin: 0;
  border-bottom: var(--border-soft);
  opacity: 0;
  transform: translateX(-16px);
}

.sheet.is-open .menu__list > li {
  animation: menu-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 60ms + 0.15s);
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16) 0;
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.1;
  color: var(--color-graphite-ink);
  cursor: pointer;
  list-style: none;
  transition: padding-left var(--transition-base);
}

.menu__link::-webkit-details-marker {
  display: none;
}

.menu__link:hover {
  padding-left: 8px;
  text-decoration: none;
}

.menu__link.is-active {
  padding-left: 14px;
  box-shadow: inset 3px 0 0 var(--category-writing);
}

.menu__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--spacing-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.menu__label {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--spacing-16);
}

.menu__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--spacing-12);
  font-size: var(--text-small);
  color: var(--color-graphite-ink);
  border: var(--border-soft);
  transition: border-color var(--transition-fast);
}

.menu__chip:hover {
  text-decoration: none;
  border-color: var(--color-graphite-ink);
}

.menu__chip.is-active {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.menu__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--spacing-8);
  font-size: var(--text-small);
}

@keyframes hd-pop {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bag-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes menu-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bag-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-6px) rotate(-4deg);
  }
}

@media (max-width: 1199.98px) {
  .hd__nav {
    display: none;
  }

  .hd__burger {
    display: flex;
  }
}

@media (max-width: 767.98px) {
  .hd__top {
    display: none;
  }

  .hd__main {
    gap: var(--spacing-12);
    min-height: 64px;
  }

  .hd__brand img {
    height: 34px;
  }

  .hd__credits {
    display: none;
  }
}

@media (max-width: 479.98px) {
  .hd__cart-label {
    display: none;
  }

  .hd__cart {
    padding-left: 12px;
  }

  .bag__item {
    grid-template-columns: 56px 1fr auto;
    gap: var(--spacing-12);
  }

  .bag__img {
    width: 56px;
    height: 56px;
  }
}

.ft {
  --ft-soft: rgba(255, 255, 255, 0.66);
  --ft-line: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-48) clamp(16px, 3vw, 48px) 0;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
}

.ft::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.ft a {
  color: inherit;
}

.ft [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.ft [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.ft__news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16) var(--spacing-32);
  padding: var(--spacing-16) var(--spacing-24);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ft-line);
}

.ft__news-copy {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.ft__news-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  animation: ft-plane 3.2s ease-in-out infinite;
}

.ft__news-tag {
  margin: 0 0 2px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--ft-soft);
}

.ft__news-title {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--color-canvas-white);
}

.ft__news-line {
  margin: 0;
  font-size: var(--text-small);
  color: var(--ft-soft);
}

.ft__news-act {
  position: relative;
  flex: 1 1 380px;
  max-width: 480px;
}

.ft__form {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color var(--transition-fast), opacity 0.3s ease, transform 0.3s ease;
}

.ft__form:focus-within {
  border-color: var(--color-canvas-white);
}

.ft__field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.ft__field i {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--ft-soft);
  pointer-events: none;
}

.ft .ft__input {
  min-height: 46px;
  padding-left: 40px;
  color: var(--color-canvas-white);
  background-color: transparent;
  border: 0;
}

.ft .ft__input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.ft .ft__input:focus-visible {
  outline: none;
}

.ft__send {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 0 var(--spacing-16);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: 0;
  overflow: hidden;
  isolation: isolate;
}

.ft__send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--category-writing);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ft__send:hover::before {
  transform: scaleX(1);
}

.ft__send i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ft__send:hover i {
  transform: translateX(4px);
}

.ft__news-act.is-bad .ft__form {
  border-color: #ff8a80;
  animation: ft-shake 0.4s ease;
}

.ft__bad {
  margin: 6px 0 0;
  font-size: var(--text-small);
  color: #ffb4ab;
}

.ft__ok {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: var(--spacing-8) 0 0;
  padding: 10px var(--spacing-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-left: 4px solid var(--color-success);
  animation: ft-ok 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ft__ok-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--color-canvas-white);
  background-color: var(--color-success);
  animation: hd-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both;
}

.ft__main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--spacing-32) clamp(24px, 3vw, 48px);
  padding: var(--spacing-60) 0 var(--spacing-48);
}

.ft__logo {
  display: inline-block;
  margin-bottom: var(--spacing-16);
  transition: opacity var(--transition-fast);
}

.ft__logo:hover {
  opacity: 0.85;
}

.ft__logo img {
  width: auto;
  height: 44px;
}

.ft__about {
  max-width: 320px;
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-small);
  color: var(--ft-soft);
}

.ft__levels {
  display: flex;
  gap: var(--level-segment-gap);
}

.ft__levels span {
  width: 32px;
  height: 4px;
  background-color: var(--ft-line);
}

.ft__brand.is-in .ft__levels span {
  animation: ft-level 0.4s ease forwards;
}

.ft__brand.is-in .ft__levels span:nth-child(1) {
  animation-delay: 0.5s;
}

.ft__brand.is-in .ft__levels span:nth-child(2) {
  animation-delay: 0.65s;
}

.ft__brand.is-in .ft__levels span:nth-child(3) {
  animation-delay: 0.8s;
}

.ft__brand.is-in .ft__levels span:nth-child(4) {
  animation-delay: 0.95s;
}

.ft__label {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--ft-soft);
}

.ft__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft__links li {
  margin: 0;
}

.ft__links li + li {
  margin-top: 10px;
}

.ft__link {
  --mark: var(--category-writing);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-small);
  transition: color var(--transition-fast);
}

.ft__links--policies .ft__link {
  --mark: var(--category-language);
}

.ft__link::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background-color var(--transition-base), border-color var(--transition-base), transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ft__link span {
  padding: 1px 4px;
  margin: 0 -4px;
  background-image: linear-gradient(var(--mark), var(--mark));
  background-position: 0 100%;
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}

.ft__link:hover {
  text-decoration: none;
}

.ft__link:hover::before {
  background-color: var(--mark);
  border-color: var(--mark);
  transform: rotate(45deg) scale(1.2);
}

.ft__link:hover span {
  color: var(--color-graphite-ink);
  background-size: 100% 100%;
}

.ft__facts {
  margin: 0;
}

.ft__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.ft__fact + .ft__fact {
  margin-top: var(--spacing-16);
}

.ft__well {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  border: 1px solid var(--ft-line);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.ft__fact:hover .ft__well {
  color: var(--color-graphite-ink);
  background-color: var(--category-language);
  border-color: var(--category-language);
}

.ft__fact dt {
  font-size: var(--text-caption);
  color: var(--ft-soft);
}

.ft__fact dd {
  margin: 0;
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.ft__fact dd a:hover {
  text-decoration: underline;
}

.ft__mark {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-top: var(--spacing-24);
  font-family: var(--font-heading);
  font-size: clamp(44px, 13vw, 200px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  border-top: 1px solid var(--ft-line);
  padding-bottom: 0.06em;
  overflow: hidden;
  user-select: none;
}

.ft .ft__mark[data-reveal] {
  opacity: 1;
  transform: none;
}

.ft__mark span {
  display: inline-block;
  transform: translateY(40%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s ease, color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
  transition-delay: calc(var(--i) * 50ms);
}

.ft__mark.is-in span {
  transform: none;
  opacity: 1;
}

.ft__mark span:hover {
  color: var(--category-writing);
  -webkit-text-stroke-color: var(--category-writing);
  transition-delay: 0s;
}

.ft__mark span:nth-child(even):hover {
  color: var(--category-language);
  -webkit-text-stroke-color: var(--category-language);
}

.ft__end {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-24);
  margin: 0 calc(clamp(16px, 3vw, 48px) * -1);
  padding: var(--spacing-16) clamp(16px, 3vw, 48px);
  background-color: var(--color-deep-carbon);
  border-top: 1px solid var(--ft-line);
}

.ft__copy {
  margin: 0;
  font-size: var(--text-small);
  color: var(--ft-soft);
}

.ft__copy a {
  color: var(--color-canvas-white);
}

.ft__copy a:hover {
  text-decoration: underline;
}

.ft__pay {
  display: inline-flex;
  padding: 6px 10px;
  background-color: var(--color-canvas-white);
}

.ft__pay img {
  width: auto;
  height: 22px;
}

.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 15px;
  color: var(--color-graphite-ink);
  background: linear-gradient(var(--color-canvas-white), var(--color-canvas-white)) padding-box, conic-gradient(var(--color-graphite-ink) var(--p, 0%), var(--color-hairline-soft) 0) border-box;
  border: 3px solid transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.totop.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.totop i {
  transition: transform var(--transition-base);
}

.totop:hover i {
  transform: translateY(-3px);
}

@keyframes ft-plane {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(2px, -4px) rotate(-6deg);
  }
}

@keyframes ft-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

@keyframes ft-ok {
  0% {
    opacity: 0;
    transform: scale(0.96);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-level {
  to {
    background-color: var(--category-writing);
  }
}

@media (max-width: 1199.98px) {
  .ft__main {
    grid-template-columns: repeat(3, 1fr);
  }

  .ft__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .ft__main {
    grid-template-columns: repeat(2, 1fr);
    padding-top: var(--spacing-48);
  }

  .ft__news {
    padding: var(--spacing-16);
  }

  .ft__news-act {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 479.98px) {
  .ft__main {
    grid-template-columns: 1fr;
  }

  .ft__send span {
    display: none;
  }

  .ft__send {
    width: 48px;
    justify-content: center;
  }

  .ft__end {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border-top: var(--border-hairline);
  animation: ck-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both;
}

.ck::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: ck-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}

.ck__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16) var(--spacing-32);
  padding: var(--spacing-16) clamp(16px, 3vw, 48px);
}

.ck__copy {
  flex: 1 1 420px;
  min-width: 0;
}

.ck__title {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.ck__intro {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.ck__intro a {
  color: var(--color-graphite-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ck__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.ck__btn {
  margin: 0;
}

.ck__btn__link,
.ck__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--spacing-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  border: var(--border-hairline);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.ck__btn__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ck__btn__link:hover::before {
  transform: scaleX(1);
}

.ck__btn--soft .ck__btn__link {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
}

.ck__btn--soft .ck__btn__link::before {
  background-color: var(--category-language);
}

.ck__btn--main .ck__btn__link {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.ck__btn--main .ck__btn__link::before {
  background-color: var(--color-deep-carbon);
}

.ck__more {
  color: var(--color-graphite-ink);
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ck__more:hover {
  border-color: var(--color-hairline-soft);
}

.ck__chev,
.ck__plus {
  font-size: 10px;
  transition: transform var(--transition-base);
}

.ck__more[aria-expanded="true"] .ck__chev {
  transform: rotate(180deg);
}

.ck__details[aria-expanded="true"] .ck__plus {
  transform: rotate(45deg);
}

.ck__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ck__panel.is-open {
  grid-template-rows: 1fr;
}

.ck__panel-in {
  min-height: 0;
  overflow: hidden;
}

#ck-consent-prefs .ck__panel-in {
  max-height: 60vh;
  overflow-y: auto;
}

.ck__prefs {
  padding: var(--spacing-24) clamp(16px, 3vw, 48px);
  background-color: var(--surface-paper);
  border-bottom: var(--border-soft);
}

.ck__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-12);
}

.ck__cat {
  padding: var(--spacing-16);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: border-color var(--transition-fast);
}

.ck.is-open .ck__cat {
  animation: ck-card 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 70ms + 0.1s);
}

.ck__cat:hover {
  border-color: var(--color-graphite-ink);
}

.ck__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-8);
  cursor: pointer;
}

.ck__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.ck__lock {
  font-size: 11px;
  color: var(--color-muted-ink);
}

.ck__info {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.ck__details {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background: none;
  border: 0;
}

.ck__list {
  margin: var(--spacing-8) 0 0;
  padding: 0;
  list-style: none;
}

.ck__item {
  margin: 0;
  padding: var(--spacing-8) 0;
  border-top: var(--border-soft);
}

.ck__item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.ck__cookie {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.ck__dur {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 11px;
  background-color: var(--color-hairline-soft);
}

.ck__desc {
  margin: 4px 0 0;
  font-size: var(--text-caption);
  color: var(--color-muted-ink);
}

.ck__save {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-16);
}

input.swt {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  background-color: var(--color-hairline-soft);
  border: var(--border-hairline);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

input.swt::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background-color: var(--color-graphite-ink);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background-color var(--transition-base);
}

input.swt:checked {
  background-color: var(--category-writing);
}

input.swt:checked::after {
  transform: translateX(20px);
}

input.swt:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@keyframes ck-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@keyframes ck-line {
  to {
    transform: scaleX(1);
  }
}

@keyframes ck-card {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .ck__acts {
    width: 100%;
  }

  .ck__btn {
    flex: 1 1 0;
  }

  .ck__btn__link {
    width: 100%;
    padding: 0 var(--spacing-8);
  }

  .ck__more {
    order: 3;
    width: 100%;
  }

  .ck__save .btn {
    width: 100%;
  }
}

.bn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: clamp(300px, 30vw, 560px);
  padding: var(--spacing-32) clamp(16px, 4vw, 64px);
  overflow: hidden;
  background-color: var(--color-deep-carbon);
  isolation: isolate;
}

.bn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: bn-line 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.bn--compact {
  min-height: clamp(220px, 20vw, 400px);
}

.bn__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 35% 18%;
  transform-origin: 36% 30%;
  animation: bn-zoom 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bn__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9, 11, 17, 0.25) 0%, rgba(9, 11, 17, 0) 22%, rgba(9, 11, 17, 0) 46%, rgba(9, 11, 17, 0.55) 100%);
}

.bn__icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bn__icon {
  --tone: var(--category-writing);
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.4vw, 56px);
  height: clamp(40px, 3.4vw, 56px);
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--color-graphite-ink);
  background-color: rgba(255, 255, 255, 0.94);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--tone);
  opacity: 0;
  animation: bn-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, bn-float 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms + 0.6s), calc(var(--i) * -0.8s);
}

.bn__icon--language {
  --tone: var(--category-language);
}

.bn__icon::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background-color: var(--tone);
}

.bn__inner {
  position: relative;
  z-index: 2;
  width: min(520px, 42%);
  padding: clamp(20px, 2.4vw, 36px);
  color: var(--color-graphite-ink);
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateX(32px);
  animation: bn-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}

.bn__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleY(0);
  transform-origin: top;
  animation: bn-bar 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s forwards;
}

.bn__nav {
  margin-bottom: var(--spacing-16);
}

.bn__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bn__crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  opacity: 0;
  transform: translateX(12px);
  animation: bn-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 80ms + 0.6s);
}

.bn__link,
.bn__current {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--spacing-12);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.bn__link {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.bn__link:hover {
  color: var(--color-graphite-ink);
  text-decoration: none;
  background-color: var(--category-writing);
  border-color: var(--color-graphite-ink);
}

.bn__current {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.bn__sep {
  width: 14px;
  height: 1px;
  background-color: var(--color-graphite-ink);
}

.bn__title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--color-deep-carbon);
  opacity: 0;
  transform: translateY(12px);
  animation: bn-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s forwards;
}

.bn__title span {
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background-image: linear-gradient(transparent 60%, var(--category-writing) 60%, var(--category-writing) 92%, transparent 92%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: bn-mark 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}

.bn__levels {
  display: flex;
  gap: var(--level-segment-gap);
}

.bn__levels span {
  width: 32px;
  height: 4px;
  background-color: var(--level-inactive);
  animation: bn-level 0.4s ease forwards;
}

.bn__levels span:nth-child(1) {
  animation-delay: 1.4s;
}

.bn__levels span:nth-child(2) {
  animation-delay: 1.55s;
}

.bn__levels span:nth-child(3) {
  animation-delay: 1.7s;
}

.bn__levels span:nth-child(4) {
  animation-delay: 1.85s;
}

@keyframes bn-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes bn-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bn-bar {
  to {
    transform: scaleY(1);
  }
}

@keyframes bn-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes bn-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(-4deg);
  }
}

@keyframes bn-mark {
  to {
    background-size: 100% 100%;
  }
}

@keyframes bn-level {
  to {
    background-color: var(--level-active);
  }
}

@keyframes bn-line {
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 1199.98px) {
  .bn__inner {
    width: min(460px, 46%);
  }

  .bn__icon:nth-child(4),
  .bn__icon:nth-child(5) {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .bn {
    align-items: flex-end;
    justify-content: center;
    min-height: 420px;
    padding: var(--spacing-24) var(--spacing-16);
  }

  .bn--compact {
    min-height: 320px;
  }

  .bn__photo {
    object-position: 34% 10%;
  }

  .bn__shade {
    background: linear-gradient(180deg, rgba(9, 11, 17, 0) 35%, rgba(9, 11, 17, 0.55) 100%);
  }

  .bn__inner {
    width: 100%;
    transform: translateY(24px);
  }

  .bn__icon:nth-child(3),
  .bn__icon:nth-child(6) {
    display: none;
  }

  .bn__icon:nth-child(1) {
    top: 10%;
    left: 6%;
  }

  .bn__icon:nth-child(2) {
    top: 10%;
    left: auto;
    right: 6%;
  }
}

.notes {
  position: fixed;
  top: var(--notes-top, 96px);
  left: 16px;
  z-index: 890;
  display: grid;
  gap: var(--spacing-8);
  width: min(420px, calc(100% - 32px));
  transition: top 0.3s ease;
}

.note {
  --tone: #6fe3a5;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  min-height: 64px;
  padding: var(--spacing-16) var(--spacing-12) var(--spacing-16) var(--spacing-24);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(255, 255, 255, 0.05) 23px, rgba(255, 255, 255, 0.05) 24px);
  isolation: isolate;
  animation: note-in 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both;
  transition: transform var(--transition-base);
}

.note--error {
  --tone: #ff8a80;
}

.note:hover {
  transform: translateX(4px);
}

.note::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: var(--tone);
  animation: note-wipe 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.1s forwards;
}

.note::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: note-line 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.note__dot {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: var(--tone);
  transform: rotate(45deg);
}

.note__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--tone);
  animation: note-pulse 1.8s ease-out 1s infinite;
}

.note__body {
  flex: 1;
  min-width: 0;
}

.note__msg {
  margin: 0;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-canvas-white);
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateX(12px);
  animation: note-text 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s forwards;
}

.note__close {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform 0.35s ease;
}

.note__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background-color: var(--color-canvas-white);
  transition: background-color var(--transition-fast);
}

.note__close span:first-child {
  transform: rotate(45deg);
}

.note__close span:last-child {
  transform: rotate(-45deg);
}

.note__close:hover {
  background-color: var(--tone);
  border-color: var(--tone);
  transform: rotate(90deg);
}

.note__close:hover span {
  background-color: var(--color-deep-carbon);
}

.note.is-hiding {
  animation: note-out 0.4s cubic-bezier(0.6, 0, 0.8, 0.2) forwards;
}

@keyframes note-in {
  0% {
    opacity: 0;
    transform: translateX(calc(-100% - 24px));
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes note-wipe {
  0% {
    width: 100%;
  }
  100% {
    width: 6px;
  }
}

@keyframes note-line {
  to {
    transform: scaleX(1);
  }
}

@keyframes note-pulse {
  0% {
    opacity: 1;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes note-text {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes note-out {
  to {
    opacity: 0;
    transform: translateX(calc(-100% - 24px));
  }
}

.auth {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.auth__card {
  position: relative;
  width: 100%;
  max-width: var(--form-max-width);
  padding: clamp(24px, 4vw, 40px);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.auth__card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.auth__head {
  margin-bottom: var(--spacing-24);
  text-align: center;
}

.auth__levels {
  display: inline-flex;
  gap: var(--level-segment-gap);
  margin-bottom: var(--spacing-16);
}

.auth__levels span {
  width: 28px;
  height: 4px;
  background-color: var(--level-inactive);
  animation: auth-level 0.4s ease forwards;
}

.auth__levels span:nth-child(1) {
  animation-delay: 0.6s;
}

.auth__levels span:nth-child(2) {
  animation-delay: 0.75s;
}

.auth__levels span:nth-child(3) {
  animation-delay: 0.9s;
}

.auth__levels span:nth-child(4) {
  animation-delay: 1.05s;
}

.auth__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.6px;
}

.auth__lead {
  max-width: 380px;
  margin: 0 auto;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.auth__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--spacing-24);
  padding: 4px;
  border: var(--border-soft);
}

.auth__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.auth__tab:hover {
  color: var(--color-graphite-ink);
  text-decoration: none;
  background-color: var(--surface-paper);
}

.auth__tab.is-active {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.auth__msg {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  border-left: 4px solid currentColor;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth__msg i {
  margin-top: 3px;
}

.auth__msg--error {
  color: var(--color-error);
  background-color: var(--color-error-bg);
}

.auth__msg--ok {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.auth__form {
  display: grid;
  gap: var(--spacing-16);
}

.fld {
  min-width: 0;
}

.fld__label {
  margin-bottom: var(--spacing-8);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
}

.fld__box {
  position: relative;
  display: flex;
  align-items: center;
}

.fld__box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.fld__box:focus-within::after {
  transform: scaleX(1);
}

.fld__icon {
  position: absolute;
  left: 16px;
  z-index: 1;
  font-size: 14px;
  color: var(--color-muted-ink);
  pointer-events: none;
  transition: color var(--transition-fast), transform var(--transition-base);
}

.fld__box:focus-within .fld__icon {
  color: var(--color-graphite-ink);
  transform: scale(1.1);
}

.fld__input.fld__input {
  padding-left: 44px;
  border-color: var(--color-ash-veil);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.fld__input.fld__input:hover {
  border-color: var(--color-graphite-ink);
}

.fld__input.fld__input:focus {
  outline: none;
  border-color: var(--color-graphite-ink);
  background-color: var(--surface-paper);
}

.fld__box:has(.fld__eye) .fld__input {
  padding-right: 52px;
}

.fld__input.is-invalid {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.fld__eye {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 14px;
  color: var(--color-muted-ink);
  background: none;
  border: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.fld__eye:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-hairline-soft);
}

.fld__eye[aria-pressed="true"] {
  color: var(--color-graphite-ink);
}

.fld__err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-error);
  animation: auth-shake 0.35s ease;
}

.fld__err i {
  margin-top: 3px;
  font-size: 12px;
}

.cap {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-8);
  width: 100%;
}

.cap .fld__box {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.cap .fld__input.fld__input {
  width: 100%;
  min-height: var(--control-height);
}

.cap__img {
  order: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding: 0 4px;
  overflow: hidden;
  background-color: var(--surface-paper);
  border: 1px dashed var(--color-ash-veil);
  transition: border-color var(--transition-fast);
}

.cap__img:hover {
  border-color: var(--color-graphite-ink);
}

.cap__img img {
  display: block;
  width: auto !important;
  max-width: none;
  height: 40px !important;
  cursor: pointer;
}

.cap.is-invalid .fld__input {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.auth__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-16);
}

.auth__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

.auth__check input[type="checkbox"] {
  position: relative;
  width: 18px;
  height: 18px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.auth__check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--color-canvas-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.auth__check input[type="checkbox"]:checked {
  background-color: var(--color-graphite-ink);
}

.auth__check input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.auth__link {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.auth__link:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.auth__submit {
  position: relative;
  margin-top: var(--spacing-8);
  overflow: hidden;
  isolation: isolate;
}

.auth__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth__submit::after {
  content: "\2192";
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--transition-base);
}

.auth__submit:hover::before {
  transform: scaleX(1);
}

.auth__submit:hover::after {
  transform: translateX(6px);
}

.auth__foot {
  margin: var(--spacing-24) 0 0;
  padding-top: var(--spacing-16);
  font-size: var(--text-small);
  text-align: center;
  color: var(--color-muted-ink);
  border-top: var(--border-soft);
}

.auth__foot a {
  margin-left: 4px;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-image: linear-gradient(var(--category-language), var(--category-language));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.auth__foot a:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes auth-stack {
  to {
    box-shadow: 10px 10px 0 -1px var(--category-writing), 10px 10px 0 0 var(--color-graphite-ink);
  }
}

@keyframes auth-line {
  to {
    transform: scaleX(1);
  }
}

@keyframes auth-level {
  to {
    background-color: var(--level-active);
  }
}

@keyframes auth-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-4px);
  }
  70% {
    transform: translateX(4px);
  }
}

@media (max-width: 479.98px) {
  .auth__card {
    animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .auth__opts {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cx {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  width: 100%;
  max-width: 1160px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.cx::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  z-index: 3;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.cx__side {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  isolation: isolate;
}

.cx__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 12%;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cx__side:hover .cx__photo {
  transform: scale(1.04);
}

.cx__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 11, 17, 0) 30%, rgba(9, 11, 17, 0.6) 58%, rgba(9, 11, 17, 0.92) 100%);
}

.cx__tile {
  --tone: var(--category-writing);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 18px;
  color: var(--color-graphite-ink);
  background-color: rgba(255, 255, 255, 0.94);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--tone);
  opacity: 0;
  animation: bn-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, bn-float 5s ease-in-out infinite;
}

.cx__tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background-color: var(--tone);
}

.cx__tile--writing {
  top: 8%;
  left: 7%;
  animation-delay: 0.8s, 0s;
}

.cx__tile--language {
  --tone: var(--category-language);
  top: 16%;
  right: 8%;
  animation-delay: 1s, -2.5s;
}

.cx__info {
  position: relative;
  width: 100%;
}

.cx__eyebrow {
  display: inline-block;
  margin: 0 0 var(--spacing-12);
  padding: 3px 10px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
}

.cx__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--color-canvas-white);
}

.cx__text {
  max-width: 400px;
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.78);
}

.cx__list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateY(12px);
  animation: bn-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 100ms + 0.9s);
  transition: background-color var(--transition-base), border-color var(--transition-base), translate var(--transition-base);
}

.cx__row:hover {
  translate: 6px 0;
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.cx__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.cx__icon--language {
  background-color: var(--category-language);
}

.cx__row:hover .cx__icon {
  transform: rotate(-8deg) scale(1.08);
}

.cx__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cx__label {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.7);
}

.cx__value {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-canvas-white);
  overflow-wrap: anywhere;
}

a.cx__value:hover {
  color: var(--color-canvas-white);
  text-decoration: underline;
}

.cx__main {
  padding: clamp(24px, 4vw, 48px);
}

.auth--contact .auth__head {
  text-align: left;
}

.auth--contact .auth__lead {
  max-width: none;
  margin: 0;
}

.fld__box--area {
  align-items: flex-start;
}

.fld__box--area .fld__icon {
  top: 16px;
}

.fld__area.fld__area {
  min-height: 140px;
  resize: vertical;
}

@media (max-width: 991.98px) {
  .cx {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .cx__side {
    min-height: 480px;
  }

  .cx__photo {
    object-position: 50% 8%;
  }
}

@media (max-width: 479.98px) {
  .cx {
    animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .cx__side {
    min-height: 460px;
  }
}

.co {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto var(--spacing-48);
  padding: 0;
  list-style: none;
}

.steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.steps__item:nth-child(3) {
  animation-delay: 0.15s;
}

.steps__item:nth-child(5) {
  animation-delay: 0.3s;
}

.steps__no {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted-ink);
  background-color: var(--color-canvas-white);
  border: 1px solid var(--color-ash-veil);
}

.steps__label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
  white-space: nowrap;
}

.steps__item.is-done .steps__no {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.steps__item.is-active .steps__no {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--color-graphite-ink);
}

.steps__item.is-active .steps__no::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-graphite-ink);
  animation: note-pulse 1.8s ease-out infinite;
}

.steps__item.is-done .steps__label,
.steps__item.is-active .steps__label {
  color: var(--color-graphite-ink);
}

.steps__line {
  position: relative;
  flex: 1;
  height: 2px;
  margin: 0 var(--spacing-12) 26px;
  background-color: var(--color-hairline-soft);
  list-style: none;
}

.steps__line.is-done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--category-writing), var(--category-language));
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  max-width: 1160px;
  margin: 0 auto;
}

.co__main {
  display: grid;
  gap: var(--spacing-24);
}

.co__panel {
  position: relative;
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base);
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 100ms + 0.1s);
}

.co__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 4px;
  background: linear-gradient(180deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.co__panel:focus-within {
  border-color: var(--color-graphite-ink);
}

.co__panel:focus-within::before {
  transform: scaleY(1);
}

.co__panel-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: var(--border-soft);
}

.co__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.co__panel:nth-child(even) .co__num {
  background-color: var(--category-language);
}

.co__panel:focus-within .co__num {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.co__panel-title {
  flex: 1;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.co__panel-icon {
  font-size: 18px;
  color: var(--color-ash-veil);
  transition: color var(--transition-base), transform var(--transition-base);
}

.co__panel:focus-within .co__panel-icon {
  color: var(--color-graphite-ink);
  transform: rotate(-8deg);
}

.co__panel-body {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
}

.co__req {
  color: var(--color-error);
}

.fld__select.fld__select {
  padding-right: 44px;
  background-image: none;
  cursor: pointer;
}

.fld__caret {
  position: absolute;
  right: 16px;
  font-size: 11px;
  color: var(--color-muted-ink);
  pointer-events: none;
  transition: transform var(--transition-base);
}

.fld__box:focus-within .fld__caret {
  color: var(--color-graphite-ink);
  transform: rotate(180deg);
}

.agree {
  display: grid;
  gap: var(--spacing-8);
}

.agree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  font-weight: var(--font-weight-regular);
  border: var(--border-soft);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.agree__row:hover {
  border-color: var(--color-graphite-ink);
}

.agree__row:has(input:checked) {
  background-color: var(--category-writing-soft);
  border-color: var(--color-graphite-ink);
}

.agree__row input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.agree__row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--color-canvas-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.agree__row input[type="checkbox"]:checked {
  background-color: var(--color-graphite-ink);
}

.agree__row input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.agree__row input.is-invalid {
  border-color: var(--color-error);
}

.agree__text {
  font-size: var(--text-small);
  line-height: 1.5;
}

.agree__text a {
  display: inline-block;
  font-weight: var(--font-weight-medium);
  background-image: linear-gradient(var(--category-language), var(--category-language));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.agree__text a:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.co__facts {
  padding: var(--spacing-16);
  background-color: var(--category-language-soft);
  border-left: 4px solid var(--category-language);
}

.co__facts-title {
  margin: 0 0 var(--spacing-8);
  font-weight: var(--font-weight-semibold);
}

.co__facts-list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.co__facts-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin: 0;
  font-size: var(--text-small);
}

.co__facts-list i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
}

.co__rail {
  position: sticky;
  top: 96px;
}

.sum {
  position: relative;
  padding: var(--spacing-24);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
  box-shadow: 0 0 0 0 var(--category-writing);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

.sum::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.sum__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sum__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  animation: bag-float 3s ease-in-out infinite;
}

.sum__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-canvas-white);
}

.sum__rows {
  display: grid;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  padding: 0;
  list-style: none;
}

.sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sum__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--text-small);
}

.sum__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--color-graphite-ink);
  background-color: var(--category-language);
}

.sum__price {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
  padding: var(--spacing-16) 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.sum__total span {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.sum__total strong {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 40px);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--category-writing);
}

.co__bill {
  margin: 0 0 var(--spacing-16);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

.co__bill-img {
  display: inline-block;
  width: auto;
  height: 22px;
  margin-left: 4px;
  vertical-align: middle;
}

.sum__pay.sum__pay {
  position: relative;
  min-height: 52px;
  margin-bottom: var(--spacing-8);
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--category-writing);
  overflow: hidden;
  isolation: isolate;
}

.sum__pay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-canvas-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sum__pay.sum__pay:hover {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--color-canvas-white);
}

.sum__pay:hover::before {
  transform: scaleX(1);
}

.sum__more.sum__more {
  color: var(--color-canvas-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.sum__more.sum__more:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border-color: var(--color-canvas-white);
}

.sum__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-16) 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.sum__trust i {
  margin-top: 3px;
  color: var(--category-language);
}

.sum__methods {
  display: block;
  width: auto;
  max-width: 170px;
  height: auto;
  margin: 0 auto;
  padding: 5px 8px;
  background-color: var(--color-canvas-white);
}

@media (max-width: 991.98px) {
  .co__grid {
    grid-template-columns: 1fr;
  }

  .co__rail {
    position: static;
  }
}

@media (max-width: 479.98px) {
  .steps__no {
    width: 38px;
    height: 38px;
  }

  .steps__line {
    margin: 0 6px 26px;
  }

  .co__panel-head,
  .co__panel-body {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

.ct {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.ct__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "head foot"
    "list foot";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: var(--spacing-16) clamp(20px, 3vw, 40px);
  max-width: 1160px;
  margin: 0 auto;
}

.ct__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ct__head-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 17px;
  background-color: var(--category-writing);
  box-shadow: 4px 4px 0 var(--color-graphite-ink);
}

.ct__head-text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--spacing-12);
  min-width: 0;
}

.ct__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.ct__count {
  padding: 2px 10px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-language);
}

.ct__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.ct__more:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.ct__more i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ct__more:hover i {
  transform: translateX(4px);
}

.ct__list {
  grid-area: list;
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-12);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base), translate var(--transition-base);
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms + 0.15s);
}

.line::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 4px;
  background: linear-gradient(180deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.line:hover {
  translate: 4px 0;
  border-color: var(--color-graphite-ink);
}

.line:hover::before {
  transform: scaleY(1);
}

.line__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  font-size: 26px;
  color: var(--color-graphite-ink);
  background-color: var(--category-language-soft);
  border: var(--border-soft);
}

.line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.line:hover .line__media img {
  transform: scale(1.08);
}

.line__media--credits {
  background-color: var(--category-writing-soft);
}

.line__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.line__body .badge {
  background-color: var(--category-writing);
}

.line__title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-graphite-ink);
  overflow-wrap: anywhere;
}

a.line__title:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.line__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted-ink);
}

.line__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.line__price i {
  font-size: 13px;
  color: var(--color-muted-ink);
}

.line__unit {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-ink);
}

.line__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--color-muted-ink);
  border: var(--border-soft);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform 0.35s ease;
}

.line__drop:hover {
  color: var(--color-error);
  text-decoration: none;
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  transform: rotate(-8deg);
}

.ct__foot {
  grid-area: foot;
  position: sticky;
  top: 96px;
  padding: var(--spacing-24);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

.ct__foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.ct__caption {
  margin: 0 0 var(--spacing-16);
  padding-bottom: var(--spacing-16);
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ct__stats {
  display: grid;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
}

.ct__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ct__stat dt {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.ct__stat dd {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.ct__stat dd i {
  font-size: 12px;
  color: var(--category-writing);
}

.ct__stat--after {
  background-color: rgba(186, 191, 255, 0.14);
  border-color: rgba(186, 191, 255, 0.4);
}

.ct__unit {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.66);
}

.ct__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
  padding: var(--spacing-16) 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.ct__total span {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.ct__total strong {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--category-writing);
}

.ct__meter {
  margin-bottom: var(--spacing-16);
}

.ct__meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-8);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.ct__meter-top strong {
  font-size: 18px;
  color: var(--color-canvas-white);
}

.ct__meter-bar {
  height: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.12);
}

.ct__meter-bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--category-writing) 0, var(--category-writing) calc(25% - 3px), transparent calc(25% - 3px), transparent 25%);
  background-size: 100% 100%;
  transform-origin: left;
  animation: ct-fill 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both;
}

.ct__meter.is-short .ct__meter-bar span {
  background: #ff8a80;
}

.ct__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  padding: var(--spacing-12);
  font-size: 13px;
  color: var(--color-deep-carbon);
  background-color: #ffd6d1;
  border-left: 4px solid var(--color-error);
}

.ct__alert i {
  margin-top: 3px;
  color: var(--color-error);
}

.ct__acts,
.ct__band {
  display: grid;
  gap: var(--spacing-8);
}

.ct__band .ct__stats {
  margin-bottom: 0;
}

.ct__go.ct__go {
  position: relative;
  width: 100%;
  min-height: 52px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--category-writing);
  overflow: hidden;
  isolation: isolate;
}

.ct__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-canvas-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct__go.ct__go:hover {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--color-canvas-white);
}

.ct__go:hover::before {
  transform: scaleX(1);
}

.ct__go i {
  transition: transform var(--transition-base);
}

.ct__go:hover i {
  transform: translateX(4px);
}

.ct__foot .btn--ghost {
  width: 100%;
  color: var(--color-canvas-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.ct__foot .btn--ghost:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border-color: var(--color-canvas-white);
}

.ct__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12) var(--spacing-24);
  max-width: 1160px;
  margin: var(--spacing-32) auto 0;
  font-size: 13px;
  color: var(--color-muted-ink);
}

.ct__trust p {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
}

.ct__trust img {
  width: auto;
  max-width: 170px;
  height: auto;
  padding: 5px 8px;
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
}

.ct__empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  text-align: center;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.ct__empty::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.ct__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--spacing-24);
  font-size: 28px;
  background-color: var(--category-writing);
  border: var(--border-hairline);
  box-shadow: 6px 6px 0 var(--category-language);
  animation: bag-float 3s ease-in-out infinite;
}

.ct__empty-title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.ct__empty-text {
  max-width: 420px;
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.ct__balance {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-16);
  font-size: var(--text-small);
  background-color: var(--category-language-soft);
  border: var(--border-soft);
}

.ct__balance strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct__empty-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
}

@keyframes ct-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 991.98px) {
  .ct__sheet {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "list"
      "foot";
  }

  .ct__foot {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .line {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "media body drop"
      "media price drop";
    row-gap: 4px;
  }

  .line__media {
    grid-area: media;
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  .line__body {
    grid-area: body;
  }

  .line__price {
    grid-area: price;
    font-size: 16px;
  }

  .line__drop {
    grid-area: drop;
  }

  .line__title {
    font-size: 18px;
  }

  .ct__head {
    padding: var(--spacing-12) var(--spacing-16);
  }

  .ct__empty-acts .btn {
    width: 100%;
  }
}

.rz {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.steps__item.is-failed .steps__no {
  color: var(--color-canvas-white);
  background-color: var(--color-error);
  border-color: var(--color-error);
  animation: rz-shake 0.5s ease 0.6s;
}

.steps__item.is-failed .steps__label {
  color: var(--color-error);
}

.rz__card {
  --tone: var(--color-success);
  --tone-bg: var(--color-success-bg);
  --stack: var(--category-writing);
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--stack), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, rz-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.rz__card--fail {
  --tone: var(--color-error);
  --tone-bg: var(--color-error-bg);
  --stack: #ffd6d1;
}

.rz__card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.rz__card--fail::after {
  background: var(--color-error);
}

.rz__levels {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
  display: flex;
  gap: var(--level-segment-gap);
}

.rz__levels span {
  width: 20px;
  height: 4px;
  background-color: var(--level-inactive);
}

.rz__card--ok .rz__levels span {
  animation: auth-level 0.4s ease forwards;
}

.rz__card--ok .rz__levels span:nth-child(1) {
  animation-delay: 0.9s;
}

.rz__card--ok .rz__levels span:nth-child(2) {
  animation-delay: 1.05s;
}

.rz__card--ok .rz__levels span:nth-child(3) {
  animation-delay: 1.2s;
}

.rz__card--ok .rz__levels span:nth-child(4) {
  animation-delay: 1.35s;
}

.rz__card--fail .rz__levels span:nth-child(-n+2) {
  animation: auth-level 0.4s ease 0.9s forwards;
}

.rz__card--fail .rz__levels span:nth-child(2) {
  background-color: var(--level-inactive);
  animation: rz-level-fail 0.4s ease 1.05s forwards;
}

.rz__top {
  margin-bottom: var(--spacing-32);
  text-align: center;
}

.rz__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: var(--spacing-24);
  font-size: 34px;
  color: var(--color-canvas-white);
  background-color: var(--tone);
  animation: rz-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s both;
}

.rz__mark::before,
.rz__mark::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--tone);
  opacity: 0;
  animation: note-pulse 2s ease-out 1s infinite;
}

.rz__mark::after {
  animation-delay: 2s;
}

.rz__card--fail .rz__mark i {
  animation: rz-shake 0.5s ease 0.9s;
}

.rz__title {
  margin: 0 0 var(--spacing-12);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.8px;
}

.rz__lead {
  max-width: 540px;
  margin: 0 auto;
  color: var(--color-muted-ink);
}

.rz__receipt {
  position: relative;
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-24);
  background-color: var(--surface-paper);
  border: 1px dashed var(--color-ash-veil);
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}

.rz__receipt::before,
.rz__receipt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-color: var(--color-canvas-white);
  border: 1px dashed var(--color-ash-veil);
  border-radius: 50%;
}

.rz__receipt::before {
  left: -11px;
  clip-path: inset(0 0 0 50%);
}

.rz__receipt::after {
  right: -11px;
  clip-path: inset(0 50% 0 0);
}

.rz__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  text-align: center;
  border-bottom: 1px dashed var(--color-ash-veil);
}

.rz__amount > span:first-child {
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.rz__amount strong {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: -1px;
}

.rz__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.rz__pill--paid {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.rz__pill--wait {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.rz__rows {
  display: grid;
  margin: 0;
}

.rz__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-16);
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-soft);
}

.rz__row:last-child {
  border-bottom: 0;
}

.rz__row dt {
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.rz__row dd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
  margin: 0;
  font-weight: var(--font-weight-medium);
  text-align: right;
  overflow-wrap: anywhere;
}

.rz__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.rz__copy:hover {
  border-color: var(--color-graphite-ink);
}

.rz__copy.is-done {
  color: var(--color-success);
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
}

.rz__coin {
  color: var(--color-muted-ink);
}

.rz__note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-12);
  font-size: 13px;
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-left: 4px solid var(--color-warning);
}

.rz__note i {
  margin-top: 3px;
}

.rz__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8) var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.rz__acts .btn:not(.btn--ghost) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rz__acts .btn:not(.btn--ghost)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rz__acts .btn:not(.btn--ghost):hover::before {
  transform: scaleX(1);
}

.rz__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.rz__home:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.rz__section {
  padding-top: var(--spacing-24);
  border-top: var(--border-soft);
}

.rz__head {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
}

.rz__flow {
  position: relative;
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rz__flow::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 1px;
  background-color: var(--color-ash-veil);
}

.rz__flow li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.6;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rz__flow li:nth-child(1) {
  animation-delay: 0.7s;
}

.rz__flow li:nth-child(2) {
  animation-delay: 0.8s;
}

.rz__flow li:nth-child(3) {
  animation-delay: 0.9s;
}

.rz__flow li > span:last-child {
  padding-top: 7px;
}

.rz__flow a {
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rz__dot {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-writing);
  border: var(--border-hairline);
}

.rz__flow li:nth-child(even) .rz__dot {
  background-color: var(--category-language);
}

.rz__help {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
  padding: var(--spacing-16) var(--spacing-24);
  background-color: var(--category-language-soft);
  border-left: 4px solid var(--category-language);
}

.rz__help-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: bag-float 3s ease-in-out infinite;
}

.rz__help-title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
}

.rz__help-text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-graphite-ink);
}

.rz__help-text a {
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes rz-stack {
  to {
    box-shadow: 10px 10px 0 -1px var(--stack), 10px 10px 0 0 var(--color-graphite-ink);
  }
}

@keyframes rz-pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rz-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes rz-level-fail {
  to {
    background-color: var(--color-error);
  }
}

@media (max-width: 575.98px) {
  .rz__card {
    animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .rz__levels {
    display: none;
  }

  .rz__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .rz__row dd {
    justify-content: flex-start;
    text-align: left;
  }

  .rz__acts .btn {
    width: 100%;
  }
}

.tp {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.tp__wrap {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  max-width: 1160px;
  margin: 0 auto;
}

.tp__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tp__levels {
  display: flex;
  gap: var(--level-segment-gap);
  margin-bottom: var(--spacing-16);
}

.tp__levels span {
  width: 28px;
  height: 4px;
  background-color: var(--level-inactive);
  animation: auth-level 0.4s ease forwards;
}

.tp__levels span:nth-child(1) {
  animation-delay: 0.4s;
}

.tp__levels span:nth-child(2) {
  animation-delay: 0.55s;
}

.tp__levels span:nth-child(3) {
  animation-delay: 0.7s;
}

.tp__levels span:nth-child(4) {
  animation-delay: 0.85s;
}

.tp__title {
  margin: 0 0 var(--spacing-12);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
}

.tp__lead {
  max-width: 480px;
  margin: 0;
  color: var(--color-muted-ink);
}

.tp__facts {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp__fact {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base), translate var(--transition-base);
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 90ms + 0.2s);
}

.tp__fact:hover {
  translate: -4px 0;
  border-color: var(--color-graphite-ink);
}

.tp__fact-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  background-color: var(--category-writing);
}

.tp__fact-icon--alt {
  background-color: var(--category-language);
}

.tp__fact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tp__fact-text small {
  font-size: var(--text-caption);
  color: var(--color-muted-ink);
}

.tp__fact-text strong {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.tp-form {
  margin: 0;
}

.tp-calc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.tp-calc::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.tp-calc__input {
  padding: clamp(24px, 4vw, 44px);
}

.tp-calc__kicker {
  display: inline-block;
  margin: 0 0 var(--spacing-12);
  padding: 3px 10px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-writing);
}

.tp-calc__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.tp-calc__text {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.tp__label {
  display: block;
  margin-bottom: var(--spacing-8);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.tp-amount {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: var(--spacing-24);
  border: var(--border-hairline);
  transition: background-color var(--transition-fast);
}

.tp-amount::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-amount:focus-within {
  background-color: var(--surface-paper);
}

.tp-amount:focus-within::after {
  transform: scaleX(1);
}

.tp-amount__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 var(--spacing-12);
  font-family: var(--font-heading);
  font-size: 26px;
  background-color: var(--category-writing-soft);
  border-right: var(--border-hairline);
}

.tp .tp-amount__input {
  flex: 1;
  min-width: 0;
  min-height: 64px;
  padding: 0 var(--spacing-16);
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px);
  background-color: transparent;
  border: 0;
  -moz-appearance: textfield;
}

.tp .tp-amount__input:focus-visible {
  outline: none;
}

.tp .tp-amount__input::placeholder {
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.tp-amount__input::-webkit-outer-spin-button,
.tp-amount__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tp-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}

.tp-quick__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--spacing-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.tp-quick__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--category-writing-soft);
  transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-quick__btn small {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.tp-quick__btn:hover {
  border-color: var(--color-graphite-ink);
}

.tp-quick__btn:hover::before {
  transform: none;
}

.tp-quick__btn.is-active {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.tp-quick__btn.is-active::before {
  display: none;
}

.tp-quick__btn.is-active small {
  color: var(--category-writing);
}

.tp-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  background-color: var(--category-language-soft);
  border-left: 4px solid var(--category-language);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.tp-hint i {
  margin-top: 3px;
}

.tp-hint.is-top {
  background-color: var(--category-writing-soft);
  border-left-color: var(--category-writing);
}

.tp-result {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
}

.tp-result__label {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.tp-result__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
  padding-bottom: var(--spacing-24);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.tp-result__total strong {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--category-writing);
}

.tp-result__total span {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.tp-result__total.is-pulse strong {
  animation: tp-pulse 0.4s ease;
}

.tp-bill {
  width: 100%;
  margin-bottom: var(--spacing-24);
  border-collapse: collapse;
}

.tp-bill th,
.tp-bill td {
  padding: var(--spacing-12) 0;
  font-size: var(--text-small);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tp-bill th {
  font-weight: var(--font-weight-regular);
  text-align: left;
  color: rgba(255, 255, 255, 0.72);
}

.tp-bill td {
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.tp-bill tr:last-child td {
  color: var(--category-language);
}

.tp-submit.tp-submit {
  position: relative;
  min-height: 52px;
  margin-top: auto;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--category-writing);
  overflow: hidden;
  isolation: isolate;
}

.tp-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-canvas-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-submit.tp-submit:hover {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--color-canvas-white);
}

.tp-submit:hover::before {
  transform: scaleX(1);
}

.tp-submit i {
  transition: transform var(--transition-base);
}

.tp-submit:hover i {
  transform: translateX(4px);
}

.tp-submit:disabled {
  opacity: 0.7;
}

.tp-result__secure {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-16) 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.tp-result__secure i {
  margin-top: 3px;
  color: var(--category-language);
}

.tp-table {
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

.tp-table__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-24);
  padding: var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.tp-table__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}

.tp-table__text {
  max-width: 460px;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.tp-table__scroll {
  overflow-x: auto;
}

.tp-tiers {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.tp-tiers thead th {
  padding: var(--spacing-12) var(--spacing-24);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--color-muted-ink);
  background-color: var(--surface-paper);
  border-bottom: var(--border-soft);
}

.tp-tier th,
.tp-tier td {
  position: relative;
  padding: var(--spacing-16) var(--spacing-24);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-soft);
  transition: background-color var(--transition-base);
}

.tp-tier:last-child th,
.tp-tier:last-child td {
  border-bottom: 0;
}

.tp-tier th:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background-color: var(--category-writing);
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-tier:hover th,
.tp-tier:hover td {
  background-color: var(--surface-paper);
}

.tp-tier__name {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  font-weight: var(--font-weight-semibold);
}

.tp-tier__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  background-color: var(--category-language-soft);
  border: var(--border-soft);
  transition: background-color var(--transition-base);
}

.tp-tier__range {
  font-size: var(--text-small);
  color: var(--color-muted-ink);
  white-space: nowrap;
}

.tp-tier__mult {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.tp-tier__state {
  text-align: right !important;
  white-space: nowrap;
}

.tp-tier__best,
.tp-tier__match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.tp-tier__best {
  background-color: var(--color-fuchsia-bloom);
}

.tp-tier__match {
  display: none;
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  animation: rz-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.tp-tier.is-reached .tp-tier__icon {
  background-color: var(--category-writing);
}

.tp-tier.is-match th,
.tp-tier.is-match td {
  background-color: var(--category-writing-soft);
}

.tp-tier.is-match th:first-child::before {
  transform: scaleY(1);
}

.tp-tier.is-match .tp-tier__match {
  display: inline-flex;
}

.tp-tier.is-match .tp-tier__best {
  display: none;
}

@keyframes tp-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 991.98px) {
  .tp__intro,
  .tp-calc {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .tp-calc {
    animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .tp-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tp-tier th,
  .tp-tier td,
  .tp-tiers thead th {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

.ct__list--wide .line {
  grid-template-columns: 144px minmax(0, 1fr) auto auto;
}

.ct__list--wide .line__media {
  width: 144px;
  height: 90px;
}

@media (max-width: 575.98px) {
  .ct__list--wide .line {
    grid-template-columns: 104px minmax(0, 1fr) auto;
  }

  .ct__list--wide .line__media {
    width: 104px;
    height: 66px;
  }
}

.pg {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.pg__doc {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.pg__tools {
  position: sticky;
  top: 72px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-24);
  padding: var(--spacing-12) clamp(20px, 5vw, 56px);
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-hairline);
}

.pg__tools::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.pg__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  background-color: var(--surface-paper);
  border: var(--border-soft);
}

.pg__acts {
  display: flex;
  gap: var(--spacing-8);
}

.pg__act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 var(--spacing-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pg__act::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--category-language);
  transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pg__act:hover::before {
  transform: none;
}

.pg__act--main {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.pg__act--main::before {
  background-color: var(--color-deep-carbon);
}

.pg__act.is-done {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
}

.pg__act.is-done::before {
  display: none;
}

.pg__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-graphite-ink);
  transform: scaleX(0);
  transform-origin: left;
}

.pg__print-title {
  display: none;
}

.pg__prose {
  padding: clamp(24px, 5vw, 56px);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-graphite-ink);
  overflow-wrap: break-word;
}

.pg__prose > :first-child {
  margin-top: 0;
}

.pg__prose > :last-child {
  margin-bottom: 0;
}

.pg__prose h1,
.pg__prose h2 {
  position: relative;
  margin: var(--spacing-48) 0 var(--spacing-16);
  padding-top: var(--spacing-24);
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: var(--font-weight-regular);
  line-height: 1.15;
  letter-spacing: -0.5px;
  border-top: var(--border-soft);
  scroll-margin-top: 140px;
}

.pg__prose h1::before,
.pg__prose h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.pg__prose h3 {
  margin: var(--spacing-32) 0 var(--spacing-12);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.pg__prose h4,
.pg__prose h5,
.pg__prose h6 {
  margin: var(--spacing-24) 0 var(--spacing-8);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.pg__prose p {
  margin: 0 0 var(--spacing-16);
}

.pg__prose a {
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.pg__prose a:hover {
  background-size: 100% 100%;
}

.pg__prose strong,
.pg__prose b {
  font-weight: var(--font-weight-semibold);
}

.pg__prose ul,
.pg__prose ol {
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

.pg__prose li {
  position: relative;
  margin: 0;
  padding: 6px 0 6px 32px;
}

.pg__prose li + li {
  margin-top: 0;
}

.pg__prose ul > li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--category-writing);
  transform: rotate(45deg);
}

.pg__prose ol {
  counter-reset: pg-item;
}

.pg__prose ol > li {
  counter-increment: pg-item;
}

.pg__prose ol > li::before {
  content: counter(pg-item);
  position: absolute;
  top: 8px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  background-color: var(--category-language);
}

.pg__prose li > ul,
.pg__prose li > ol {
  margin: 4px 0 0;
}

.pg__prose blockquote {
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-16) var(--spacing-24);
  font-family: var(--font-body);
  font-size: 16px;
  background-color: var(--category-language-soft);
  border-left: 4px solid var(--category-language);
}

.pg__prose hr {
  margin: var(--spacing-32) 0;
  border: 0;
  border-top: var(--border-soft);
}

.pg__prose img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pg__table {
  margin: 0 0 var(--spacing-24);
  overflow-x: auto;
}

.pg__table table {
  width: 100%;
  min-width: 480px;
  margin: 0 !important;
  border-collapse: collapse;
}

.pg__prose th,
.pg__prose td {
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}

.pg__prose thead th {
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 575.98px) {
  .pg__doc {
    animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .pg__tools {
    top: 64px;
  }

  .pg__acts {
    width: 100%;
  }

  .pg__act {
    flex: 1;
    justify-content: center;
  }
}

@media print {
  #preloader,
  .hd,
  .ft,
  .bn,
  .totop,
  .ck,
  .notes,
  .veil,
  .sheet,
  .pg__tools {
    display: none !important;
  }

  body {
    background: none;
  }

  .pg {
    padding: 0;
    background: none;
  }

  .pg__doc {
    max-width: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }

  .pg__print-title {
    display: block;
    margin: 0 0 16px;
    font-size: 28px;
  }

  .pg__prose {
    padding: 0;
    font-size: 12pt;
  }

  .pg__prose h2 {
    break-after: avoid;
  }

  .pg__prose a {
    background: none;
    text-decoration: underline;
  }

  .pg__table table {
    min-width: 0;
  }
}

.pg__tools {
  transition: top 0.3s ease;
}

.lib {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.lib__wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.lib__bar {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-8);
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--border-hairline);
  transition: top 0.3s ease;
}

.lib__search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  margin: 0;
}

.lib__search i {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--color-muted-ink);
  pointer-events: none;
}

.lib .lib__q {
  min-height: 44px;
  padding-left: 40px;
  border-color: var(--color-hairline-soft);
}

.lib .lib__q:focus {
  outline: none;
  border-color: var(--color-graphite-ink);
  background-color: var(--surface-paper);
}

.lib__drop {
  position: relative;
}

.lib__tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--spacing-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-fast);
}

.lib__tool:hover,
.lib__drop.is-open .lib__tool {
  border-color: var(--color-graphite-ink);
}

.lib__chev {
  font-size: 10px;
  transition: transform var(--transition-base);
}

.lib__drop.is-open .lib__chev {
  transform: rotate(180deg);
}

.lib__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 220px;
  padding: 6px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
}

.lib__drop.is-open .lib__menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.lib__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  width: 100%;
  padding: 10px 12px;
  font-size: var(--text-small);
  text-align: left;
  color: var(--color-graphite-ink);
  background: none;
  border: 0;
  transition: background-color var(--transition-fast), padding-left var(--transition-base);
}

.lib__opt:hover {
  padding-left: 16px;
  background-color: var(--surface-paper);
}

.lib__tick {
  font-size: 11px;
  opacity: 0;
}

.lib__opt.is-active {
  font-weight: var(--font-weight-semibold);
}

.lib__opt.is-active .lib__tick {
  opacity: 1;
}

.lib__views {
  display: flex;
  border: var(--border-soft);
}

.lib__view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  font-size: 14px;
  color: var(--color-muted-ink);
  background-color: var(--color-canvas-white);
  border: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.lib__view:hover {
  color: var(--color-graphite-ink);
}

.lib__view.is-active {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.lib__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mat {
  --tone: var(--category-writing);
  --tone-soft: var(--category-writing-soft);
  margin: 0;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 0.2s);
}

.mat--language {
  --tone: var(--category-language);
  --tone-soft: var(--category-language-soft);
}

.mat__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), translate var(--transition-base);
}

.mat__link:hover {
  text-decoration: none;
  translate: 0 -4px;
  border-color: var(--color-graphite-ink);
  box-shadow: 6px 6px 0 var(--tone);
}

.mat__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--tone-soft);
  border-bottom: var(--border-soft);
}

.mat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mat__link:hover .mat__media img {
  transform: scale(1.06);
}

.mat__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 40px;
  color: var(--color-graphite-ink);
}

.mat__cat {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 21;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--tone);
  border: 1px solid var(--color-graphite-ink);
}

.mat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
}

.mat__title {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.mat__desc {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-muted-ink);
}

.mat__levels {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-top: 4px;
}

.mat__meter {
  display: flex;
  gap: 3px;
}

.mat__meter span {
  width: 20px;
  height: 4px;
  background-color: var(--level-inactive);
  transition: background-color 0.3s ease;
  transition-delay: calc(var(--b) * 60ms);
}

.mat__link:hover .mat__meter span {
  background-color: var(--color-graphite-ink);
}

.mat__lv {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.mat__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: auto;
  padding-top: var(--spacing-16);
  border-top: var(--border-soft);
}

.mat__price {
  display: flex;
  flex-direction: column;
}

.mat__price small {
  font-size: 12px;
  color: var(--color-muted-ink);
}

.mat__price strong {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
}

.mat__price em {
  font-size: 13px;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-ink);
}

.mat__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 14px;
  border: var(--border-hairline);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.mat__link:hover .mat__go {
  background-color: var(--tone);
  transform: rotate(-45deg);
}

.lib__grid.is-list {
  grid-template-columns: 1fr;
}

.lib__grid.is-list .mat__link {
  flex-direction: row;
}

.lib__grid.is-list .mat__media {
  flex: 0 0 min(320px, 38%);
  aspect-ratio: auto;
  min-height: 200px;
  border-right: var(--border-soft);
  border-bottom: 0;
}

.lib__none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-48) var(--spacing-24);
  text-align: center;
  color: var(--color-muted-ink);
  background-color: var(--color-canvas-white);
  border: 1px dashed var(--color-ash-veil);
}

.lib__none-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  color: var(--color-graphite-ink);
  background-color: var(--category-language);
}

.lib__none p {
  margin: 0;
}

.lib__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--spacing-32);
}

.lib__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

a.lib__page:hover {
  text-decoration: none;
  border-color: var(--color-graphite-ink);
  background-color: var(--category-writing-soft);
}

.lib__page.is-current {
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
  border-color: var(--color-graphite-ink);
}

.lib__page.is-off {
  opacity: 0.4;
}

.lib__promo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-24);
  margin-top: var(--spacing-48);
  padding: var(--spacing-24) clamp(20px, 3vw, 40px);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
}

.lib__promo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.lib__promo:hover {
  color: var(--color-canvas-white);
  text-decoration: none;
}

.lib__promo-tiles {
  display: flex;
}

.lib__promo-tiles span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -8px;
  font-size: 18px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border: 2px solid var(--color-deep-carbon);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.lib__promo-tiles span:first-child {
  margin-left: 0;
}

.lib__promo-tiles span:nth-child(2) {
  background-color: var(--category-language);
}

.lib__promo-tiles span:nth-child(3) {
  background-color: var(--color-canvas-white);
}

.lib__promo:hover .lib__promo-tiles span:nth-child(1) {
  transform: translateY(-6px) rotate(-6deg);
}

.lib__promo:hover .lib__promo-tiles span:nth-child(2) {
  transform: translateY(-3px);
}

.lib__promo:hover .lib__promo-tiles span:nth-child(3) {
  transform: translateY(-6px) rotate(6deg);
}

.lib__promo-text {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lib__promo-text strong {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
}

.lib__promo-text span {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.74);
}

.lib__promo-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--spacing-24);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  transition: background-color var(--transition-base);
}

.lib__promo:hover .lib__promo-go {
  background-color: var(--color-canvas-white);
}

.lib__promo-go i {
  transition: transform var(--transition-base);
}

.lib__promo:hover .lib__promo-go i {
  transform: translateX(4px);
}

.pd {
  --tone: var(--category-writing);
  --tone-soft: var(--category-writing-soft);
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.pd--language {
  --tone: var(--category-language);
  --tone-soft: var(--category-language-soft);
}

.pd__wrap {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
}

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.pd-gallery {
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pd-gallery__stage {
  aspect-ratio: 4 / 3;
  background-color: var(--tone-soft);
  border: var(--border-hairline);
  box-shadow: 0 0 0 0 var(--tone);
  animation: pd-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.pd-gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pd-gallery__stage img.is-swap {
  opacity: 0;
  transform: scale(1.03);
}

.pd-gallery__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 56px;
}

.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.pd-thumb {
  aspect-ratio: 16 / 10;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  outline: 1px solid var(--color-hairline-soft);
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.7;
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-thumb:hover {
  opacity: 1;
}

.pd-thumb.is-active {
  border-color: var(--color-graphite-ink);
  opacity: 1;
}

.pd-info {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.pd-info::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.pd-info__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-16);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--tone);
  border: 1px solid var(--color-graphite-ink);
  transition: box-shadow var(--transition-base);
}

.pd-info__cat:hover {
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--color-graphite-ink);
}

.pd-info__title {
  margin: 0 0 var(--spacing-12);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -1px;
}

.pd-info__lede {
  margin: 0 0 var(--spacing-24);
  color: var(--color-muted-ink);
}

.pd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
}

.pd-stat {
  padding: var(--spacing-12);
  background-color: var(--surface-paper);
  border: var(--border-soft);
}

.pd-stat dt {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-muted-ink);
}

.pd-stat dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.1;
}

.pd-stat dd small {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted-ink);
}

.pd-stat__text.pd-stat__text {
  font-size: 20px;
}

.pd-info__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
}

.pd-info__go {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pd-info__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pd-info__go:hover::before {
  transform: scaleX(1);
}

.pd-info__go i {
  animation: pd-nudge 1.6s ease-in-out infinite;
}

.pd-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--spacing-12);
  font-size: 13px;
  color: var(--color-muted-ink);
  border: var(--border-soft);
}

.pd-wallet i {
  color: var(--color-graphite-ink);
}

.pd-wallet strong {
  font-size: 16px;
  color: var(--color-graphite-ink);
}

.pd-wallet--solid {
  color: rgba(255, 255, 255, 0.72);
  background-color: var(--color-deep-carbon);
  border-color: var(--color-deep-carbon);
}

.pd-wallet--solid i,
.pd-wallet--solid strong {
  color: var(--category-writing);
}

.pd-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.pd-overview--solo {
  grid-template-columns: 1fr;
}

.pd-about,
.pd-path {
  padding: clamp(24px, 3vw, 36px);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
}

.pd-label {
  position: relative;
  margin: 0 0 var(--spacing-16);
  padding-bottom: var(--spacing-12);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  border-bottom: var(--border-soft);
}

.pd-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.pd-prose {
  line-height: 1.75;
}

.pd-path {
  position: sticky;
  top: 100px;
}

.pd-path__list {
  position: relative;
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-path__list::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 29px;
  width: 1px;
  background-color: var(--color-ash-veil);
}

.pd-path__list li {
  margin: 0;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 80ms + 0.3s);
}

.pd-path__item {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: 1px solid transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pd-path__item:hover {
  text-decoration: none;
  background-color: var(--tone-soft);
  border-color: var(--color-graphite-ink);
}

.pd-path__dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--tone);
  border: var(--border-hairline);
}

.pd-path__name {
  font-weight: var(--font-weight-medium);
}

.pd-path__price {
  font-size: 13px;
  color: var(--color-muted-ink);
  white-space: nowrap;
}

.pd-levels__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.pd-levels__eyebrow {
  display: inline-block;
  margin-bottom: var(--spacing-8);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--tone);
}

.pd-levels__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}

.pd-levels__hint {
  margin: 0;
  color: var(--color-muted-ink);
}

.pd-levels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.lvl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color var(--transition-base), box-shadow var(--transition-base);
  transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s;
  scroll-margin-top: 140px;
}

.lvl.is-in {
  opacity: 1;
  transform: none;
}

.lvl:hover {
  border-color: var(--color-graphite-ink);
  box-shadow: 6px 6px 0 var(--tone);
}

.lvl.is-flash {
  animation: pd-flash 1.2s ease;
}

.lvl__top {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.lvl__rank {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-family: var(--font-heading);
  font-size: 24px;
  background-color: var(--tone);
  border: var(--border-hairline);
}

.lvl__tier {
  display: block;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.lvl__name {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.lvl__meter {
  display: flex;
  gap: 3px;
}

.lvl__meter span {
  flex: 1;
  height: 5px;
  background-color: var(--level-inactive);
}

.lvl__meter span.is-on {
  background-color: var(--color-graphite-ink);
}

.lvl__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: var(--spacing-12) 0;
  border-top: 1px dashed var(--color-ash-veil);
  border-bottom: 1px dashed var(--color-ash-veil);
}

.lvl__price strong {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.lvl__price small {
  font-size: 13px;
  color: var(--color-muted-ink);
}

.lvl__bal p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
}

.lvl__bal p i {
  margin-top: 3px;
}

.lvl__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  background-color: var(--color-hairline-soft);
}

.lvl__bar span {
  display: block;
  height: 100%;
}

.lvl__bal.is-ok .lvl__bar span {
  background-color: var(--color-success);
}

.lvl__bal.is-ok p {
  color: var(--color-success);
}

.lvl__bal.is-short .lvl__bar span {
  background-color: var(--color-error);
}

.lvl__bal.is-short p {
  color: var(--color-error);
}

.lvl__more {
  border: var(--border-soft);
}

.lvl__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: 10px var(--spacing-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transition-fast);
}

.lvl__more summary::-webkit-details-marker {
  display: none;
}

.lvl__more summary:hover {
  background-color: var(--surface-paper);
}

.lvl__more summary i {
  font-size: 11px;
  transition: transform var(--transition-base);
}

.lvl__more[open] summary {
  border-bottom: var(--border-soft);
}

.lvl__more[open] summary i {
  transform: rotate(45deg);
}

.lvl__points {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12);
  list-style: none;
}

.lvl__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin: 0;
}

.lvl__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  background-color: var(--tone-soft);
  border: var(--border-soft);
}

.lvl__points h4 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

.lvl__points p {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted-ink);
}

.lvl__acts {
  display: grid;
  gap: var(--spacing-8);
  margin-top: auto;
}

.cd-form {
  margin: 0;
}

.cd-form__submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cd-form__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cd-form__submit:hover::before {
  transform: scaleX(1);
}

.cd-form__submit:disabled {
  opacity: 0.7;
}

.pd-levels__note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 0;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  background-color: var(--category-language-soft);
  border-left: 4px solid var(--category-language);
}

.pd-levels__note i {
  margin-top: 3px;
}

@keyframes pd-stack {
  to {
    box-shadow: 10px 10px 0 var(--tone);
  }
}

@keyframes pd-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@keyframes pd-flash {
  0%,
  100% {
    background-color: var(--color-canvas-white);
  }
  30% {
    background-color: var(--tone-soft);
  }
}

@media (max-width: 991.98px) {
  .pd-hero,
  .pd-overview {
    grid-template-columns: 1fr;
  }

  .pd-path {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .lib__grid.is-list .mat__link {
    flex-direction: column;
  }

  .lib__grid.is-list .mat__media {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-right: 0;
    border-bottom: var(--border-soft);
  }

  .lib__views {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .lib__search {
    flex-basis: 100%;
  }

  .lib__drop,
  .lib__tool {
    width: 100%;
  }

  .lib__menu {
    left: 0;
    right: 0;
  }

  .pd-gallery__stage {
    animation: none;
  }
}

.dash {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  padding: var(--section-gap) max(var(--page-gutter), calc((100% - 1200px) / 2));
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.dash__side {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--spacing-12);
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dash-me {
  position: relative;
  padding: var(--spacing-24);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
}

.dash-me::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.dash-me__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-16);
  font-family: var(--font-heading);
  font-size: 32px;
  background-color: var(--category-writing);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--category-language);
  animation: rz-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s both;
}

.dash-me__greet {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.dash-me__name {
  margin: 2px 0 var(--spacing-12);
  font-size: 28px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dash-me__line {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-muted-ink);
  overflow-wrap: anywhere;
}

.dash-me__line i {
  width: 14px;
  color: var(--color-graphite-ink);
}

.dash-nav {
  display: grid;
  gap: 6px;
  padding: 6px;
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
}

.dash-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  padding: 10px var(--spacing-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  text-align: left;
  color: var(--color-graphite-ink);
  background: none;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color var(--transition-fast);
}

.dash-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-graphite-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dash-tab:hover {
  border-color: var(--color-hairline-soft);
}

.dash-tab.is-active {
  color: var(--color-canvas-white);
}

.dash-tab.is-active::before {
  transform: scaleX(1);
}

.dash-tab__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing-soft);
  border: var(--border-soft);
}

.dash-tab:nth-child(2) .dash-tab__icon {
  background-color: var(--category-language-soft);
}

.dash-tab.is-active .dash-tab__icon {
  background-color: var(--category-writing);
  border-color: var(--category-writing);
}

.dash-tab__text {
  flex: 1;
}

.dash-tab__count {
  min-width: 28px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-graphite-ink);
  background-color: var(--color-hairline-soft);
}

.dash-tab.is-active .dash-tab__count {
  background-color: var(--category-language);
}

.dash-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.dash-out:hover {
  color: var(--color-error);
  text-decoration: none;
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
}

.dash__main {
  display: grid;
  gap: var(--spacing-24);
  min-width: 0;
}

.dash-wallet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label coins"
    "value coins"
    "acts stats";
  align-items: end;
  gap: var(--spacing-8) var(--spacing-24);
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.dash-wallet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: auth-line 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.dash-wallet__coins {
  grid-area: coins;
  align-self: start;
  display: flex;
}

.dash-wallet__coins span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -8px;
  font-size: 18px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border: 2px solid var(--color-deep-carbon);
  animation: bn-float 5s ease-in-out infinite;
}

.dash-wallet__coins span:first-child {
  margin-left: 0;
}

.dash-wallet__coins span:nth-child(2) {
  background-color: var(--category-language);
  animation-delay: -1.5s;
}

.dash-wallet__coins span:nth-child(3) {
  background-color: var(--color-canvas-white);
  animation-delay: -3s;
}

.dash-wallet__label {
  grid-area: label;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

.dash-wallet__value {
  grid-area: value;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(52px, 7vw, 84px);
  line-height: 1;
  color: var(--category-writing);
}

.dash-wallet__acts {
  grid-area: acts;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.dash-wallet__acts .btn:not(.btn--ghost) {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--category-writing);
}

.dash-wallet__acts .btn:not(.btn--ghost):hover {
  background-color: var(--color-canvas-white);
  border-color: var(--color-canvas-white);
}

.dash-wallet__acts .btn--ghost {
  color: var(--color-canvas-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.dash-wallet__acts .btn--ghost:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border-color: var(--color-canvas-white);
}

.dash-wallet__stats {
  grid-area: stats;
  display: flex;
  gap: var(--spacing-8);
  margin: 0;
}

.dash-wallet__stats > div {
  min-width: 110px;
  padding: var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.dash-wallet__stats dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.dash-wallet__stats dd {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
}

.dash-panel {
  padding: clamp(20px, 3vw, 32px);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dash-panel__title {
  position: relative;
  margin: 0 0 var(--spacing-24);
  padding-bottom: var(--spacing-12);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  border-bottom: var(--border-soft);
}

.dash-panel__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.dash-feed {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-tx {
  --tone: var(--color-success);
  --tone-bg: var(--color-success-bg);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto 40px;
  align-items: center;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--border-soft);
  transition: border-color var(--transition-base), translate var(--transition-base);
  animation: auth-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}

.dash-tx--err {
  --tone: var(--color-error);
  --tone-bg: var(--color-error-bg);
}

.dash-tx--wait {
  --tone: var(--color-warning);
  --tone-bg: var(--color-warning-bg);
}

.dash-tx:hover {
  translate: 4px 0;
  border-color: var(--color-graphite-ink);
}

.dash-tx__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 15px;
  color: var(--tone);
  background-color: var(--tone-bg);
  border: 1px solid var(--tone);
}

.dash-tx__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dash-tx__no {
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.dash-tx__date {
  font-size: 13px;
  color: var(--color-muted-ink);
}

.dash-tx__credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-language-soft);
  white-space: nowrap;
}

.dash-tx__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dash-tx__amount {
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.dash-tx__state {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--tone);
}

.dash-tx__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 13px;
  border: var(--border-hairline);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.dash-tx__go:hover {
  text-decoration: none;
  background-color: var(--category-writing);
  transform: rotate(-45deg);
}

.dash-lib {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-mat {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: var(--border-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), translate var(--transition-base);
  animation: auth-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}

.dash-mat:hover {
  translate: 0 -4px;
  border-color: var(--color-graphite-ink);
  box-shadow: 6px 6px 0 var(--category-writing);
}

.dash-mat__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  font-size: 36px;
  background-color: var(--category-writing-soft);
  border-bottom: var(--border-soft);
}

.dash-mat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.dash-mat:hover .dash-mat__media img {
  transform: scale(1.06);
}

.dash-mat__state {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 21;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  border: 1px solid currentColor;
}

.dash-mat__state.is-ok {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.dash-mat__state.is-wait {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.dash-mat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
}

.dash-mat__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dash-mat__tags .badge {
  background-color: var(--category-writing);
}

.dash-mat__cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted-ink);
}

.dash-mat__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.dash-mat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--spacing-12);
  margin: 0;
  font-size: 12px;
  color: var(--color-muted-ink);
}

.dash-mat__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--spacing-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.dash-mat__go:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.dash-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-48) var(--spacing-24);
  text-align: center;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--color-hairline-soft) 31px, var(--color-hairline-soft) 32px);
  border: 1px dashed var(--color-ash-veil);
}

.dash-blank__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 24px;
  background-color: var(--category-writing);
  border: var(--border-hairline);
  animation: bag-float 3s ease-in-out infinite;
}

.dash-blank p {
  max-width: 380px;
  margin: 0;
  padding: 0 var(--spacing-8);
  color: var(--color-muted-ink);
  background-color: var(--color-canvas-white);
}

.dash-pwd {
  width: 100%;
  max-width: none;
}

.dash-pwd .auth__form {
  width: 100%;
}

.rcp {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.rcp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  max-width: 1100px;
  margin: 0 auto;
}

.rcp-doc {
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 0 0 0 -1px var(--category-writing), 0 0 0 0 var(--color-graphite-ink);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-stack 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.rcp-doc__band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: clamp(20px, 3vw, 32px);
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
}

.rcp-doc__band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.rcp-doc__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--spacing-8);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
}

.rcp-doc__no {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.rcp-doc__date {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.rcp-doc__sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.rcp-doc__sum span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.rcp-doc__sum strong {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--category-writing);
}

.rcp-doc__sum small {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.rcp-doc__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-8);
  padding: var(--spacing-16) clamp(20px, 3vw, 32px);
  border-bottom: var(--border-soft);
}

.rcp-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-12);
  background-color: var(--surface-paper);
  border: var(--border-soft);
}

.rcp-chip small {
  font-size: 12px;
  color: var(--color-muted-ink);
}

.rcp-chip__val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.rcp-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  border: 1px solid currentColor;
}

.rcp-pill.is-ok {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.rcp-pill.is-err {
  color: var(--color-error);
  background-color: var(--color-error-bg);
}

.rcp-pill.is-wait {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.rcp-doc__part {
  padding: clamp(20px, 3vw, 32px);
  border-bottom: var(--border-soft);
}

.rcp-doc__part:last-child {
  border-bottom: 0;
}

.rcp-doc__title {
  margin: 0 0 var(--spacing-16);
  font-size: 24px;
  line-height: 1.15;
}

.rcp-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rcp-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-soft);
}

.rcp-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  background-color: var(--category-language-soft);
  border: var(--border-soft);
}

.rcp-item__icon.is-credits {
  background-color: var(--category-writing-soft);
}

.rcp-item__text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--spacing-8);
  min-width: 0;
}

.rcp-item__title {
  font-weight: var(--font-weight-medium);
}

.rcp-item__text .badge {
  background-color: var(--category-writing);
}

.rcp-item__credits {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.rcp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: 1px dashed var(--color-ash-veil);
}

.rcp-total span {
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.rcp-total strong {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.rcp-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
  margin: 0;
}

.rcp-info > div {
  padding: var(--spacing-12);
  background-color: var(--surface-paper);
  border: var(--border-soft);
}

.rcp-info__wide {
  grid-column: 1 / -1;
}

.rcp-info dt {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-muted-ink);
}

.rcp-info dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.rcp-side {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

.rcp-side__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 22px;
  background-color: var(--category-writing);
  border: var(--border-hairline);
  box-shadow: 4px 4px 0 var(--category-language);
  animation: bag-float 3s ease-in-out infinite;
}

.rcp-side__no {
  margin: var(--spacing-8) 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.rcp-side__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--spacing-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.rcp-side__back i {
  transition: transform var(--transition-base);
}

.rcp-side__back:hover {
  text-decoration: none;
}

.rcp-side__back:hover i {
  transform: translateX(-4px);
}

@media (max-width: 991.98px) {
  .dash,
  .rcp__grid {
    grid-template-columns: 1fr;
  }

  .dash__side,
  .rcp-side {
    position: static;
  }

  .dash-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-tab {
    justify-content: center;
  }

  .dash-tab__text {
    flex: none;
  }
}

@media (max-width: 767.98px) {
  .dash-wallet {
    grid-template-columns: 1fr;
    grid-template-areas:
      "coins"
      "label"
      "value"
      "stats"
      "acts";
  }

  .dash-tx {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-areas:
      "icon main go"
      "icon credits go"
      "icon end go";
    row-gap: 4px;
  }

  .dash-tx__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
  }

  .dash-tx__main {
    grid-area: main;
  }

  .dash-tx__credits {
    grid-area: credits;
    justify-self: start;
  }

  .dash-tx__end {
    grid-area: end;
    align-items: flex-start;
  }

  .dash-tx__go {
    grid-area: go;
  }

  .rcp-info {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479.98px) {
  .dash-nav {
    grid-template-columns: 1fr;
  }

  .dash-tab {
    justify-content: flex-start;
  }

  .dash-tab__text {
    flex: 1;
  }

  .dash-wallet__stats > div {
    flex: 1;
    min-width: 0;
  }
}

@media print {
  .rcp {
    padding: 0;
    background: none;
  }

  .rcp__grid {
    display: block;
  }

  .rcp-side,
  .rz__copy {
    display: none !important;
  }

  .rcp-doc {
    border: 0;
    box-shadow: none;
    animation: none;
  }

  .rcp-doc__band {
    color: #000;
    background: none;
    border-bottom: 2px solid #000;
  }

  .rcp-doc__band::after {
    display: none;
  }

  .rcp-doc__date,
  .rcp-doc__sum span,
  .rcp-doc__sum small {
    color: #444;
  }

  .rcp-doc__sum strong {
    color: #000;
  }
}

.au {
  padding: var(--section-gap) var(--page-gutter);
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
  overflow: hidden;
}

.au__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}

.au-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--spacing-16);
  min-height: clamp(420px, 44vw, 600px);
  padding: 0 18px 18px 0;
}

.au-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--category-writing-soft);
  border: var(--border-hairline);
  clip-path: inset(0 100% 0 0);
  animation: au-wipe 0.9s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.au-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  animation: au-settle 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.au-shot:hover img {
  transform: scale(1.05);
}

.au-shot--tall {
  grid-row: 1 / 3;
  grid-column: 1;
  box-shadow: 10px 10px 0 var(--category-writing);
  animation-delay: 0.1s;
}

.au-shot--tall img {
  object-position: 50% 20%;
  animation-delay: 0.1s;
}

.au-shot--square {
  grid-row: 1;
  grid-column: 2;
  box-shadow: 10px 10px 0 var(--category-language);
  animation-delay: 0.3s;
}

.au-shot--square img {
  object-position: 55% 30%;
  animation-delay: 0.3s;
}

.au-shot--wide {
  grid-row: 2;
  grid-column: 2;
  box-shadow: 10px 10px 0 var(--category-writing);
  animation-delay: 0.5s;
}

.au-shot--wide img {
  object-position: 26% 40%;
  animation-delay: 0.5s;
}

.au-tile {
  --tone: var(--category-writing);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--tone);
  opacity: 0;
  animation: bn-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, bn-float 5s ease-in-out infinite;
}

.au-tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background-color: var(--tone);
}

.au-tile--writing {
  top: -18px;
  left: 44%;
  animation-delay: 1s, 0s;
}

.au-tile--language {
  --tone: var(--category-language);
  top: 46%;
  right: -6px;
  animation-delay: 1.15s, -2.5s;
}

.au-badge {
  position: absolute;
  left: -14px;
  bottom: 12%;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px var(--spacing-12);
  max-width: 230px;
  padding: var(--spacing-16);
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  opacity: 0;
  transform: translateY(16px);
  animation: bn-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}

.au-badge strong {
  grid-row: 1 / 3;
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: var(--font-weight-regular);
  line-height: 0.9;
  color: var(--category-writing);
}

.au-badge > span:first-of-type {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

.au-badge__bars {
  display: flex;
  gap: 3px;
}

.au-badge__bars span {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.18);
  animation: au-bar 0.4s ease forwards;
}

.au-badge__bars span:nth-child(1) {
  animation-delay: 1.6s;
}

.au-badge__bars span:nth-child(2) {
  animation-delay: 1.75s;
}

.au-badge__bars span:nth-child(3) {
  animation-delay: 1.9s;
}

.au-badge__bars span:nth-child(4) {
  animation-delay: 2.05s;
}

.au-copy {
  animation: auth-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

.au-copy__tag {
  display: inline-block;
  margin-bottom: var(--spacing-16);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-writing);
  border: 1px solid var(--color-graphite-ink);
}

.au-copy__title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -1.2px;
}

.au-copy__lead {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
}

.au-copy__text {
  margin: 0 0 var(--spacing-24);
  color: var(--color-muted-ink);
}

.au-points {
  display: grid;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-32);
  padding: 0;
  list-style: none;
}

.au-points li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base), translate var(--transition-base);
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 90ms + 0.5s);
}

.au-points li:hover {
  translate: 6px 0;
  border-color: var(--color-graphite-ink);
}

.au-points__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  background-color: var(--category-writing);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.au-points__icon--alt {
  background-color: var(--category-language);
}

.au-points li:hover .au-points__icon {
  transform: rotate(-8deg) scale(1.08);
}

.au-copy__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.au-copy__go {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.au-copy__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.au-copy__go:hover::before {
  transform: scaleX(1);
}

.au-copy__go i {
  transition: transform var(--transition-base);
}

.au-copy__go:hover i {
  transform: translateX(4px);
}

@keyframes au-wipe {
  to {
    clip-path: inset(0 -20px -20px 0);
  }
}

@keyframes au-settle {
  to {
    transform: scale(1);
  }
}

@keyframes au-bar {
  to {
    background-color: var(--category-writing);
  }
}

@media (max-width: 991.98px) {
  .au__wrap {
    grid-template-columns: 1fr;
  }

  .au-collage {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .au-collage {
    min-height: 380px;
    gap: var(--spacing-8);
    padding: 0 10px 10px 0;
  }

  .au-shot--tall,
  .au-shot--square,
  .au-shot--wide {
    box-shadow: 6px 6px 0 var(--category-writing);
  }

  .au-shot--square {
    box-shadow: 6px 6px 0 var(--category-language);
  }

  .au-tile {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .au-badge {
    left: 0;
    bottom: 6%;
    max-width: 190px;
    padding: var(--spacing-12);
  }

  .au-badge strong {
    font-size: 44px;
  }
}

[data-rise].is-wait {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-rise].is-wait.is-in {
  opacity: 1;
  transform: none;
}

.hm-go {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hm-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-deep-carbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-go:hover::before {
  transform: scaleX(1);
}

.hm-go i {
  transition: transform var(--transition-base);
}

.hm-go:hover i {
  transform: translateX(4px);
}

.hm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16) var(--spacing-32);
  margin-bottom: var(--spacing-32);
}

.hm-head__tag {
  display: inline-block;
  margin-bottom: var(--spacing-12);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  background-color: var(--category-writing);
  border: 1px solid var(--color-graphite-ink);
}

.hm-head__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
}

.hm-head__text {
  max-width: 560px;
  margin: 0;
  color: var(--color-muted-ink);
}

.hm-pick,
.hm-how,
.hm-credits {
  padding: var(--section-gap) max(var(--page-gutter), calc((100% - 1200px) / 2));
}

.hm-pick {
  background-color: var(--surface-paper);
  border-top: var(--border-hairline);
}

.hm-how {
  background-color: var(--color-canvas-white);
  border-top: var(--border-hairline);
}

.hm-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
}

.hm-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-step {
  position: relative;
  margin: 0;
  padding: var(--spacing-24);
  background-color: var(--surface-paper);
  border: var(--border-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hm-step:hover {
  border-color: var(--color-graphite-ink);
  box-shadow: 6px 6px 0 var(--category-writing);
}

.hm-step:nth-child(even):hover {
  box-shadow: 6px 6px 0 var(--category-language);
}

.hm-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-16);
  font-size: 18px;
  background-color: var(--category-writing);
  border: var(--border-hairline);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.hm-step:nth-child(even) .hm-step__icon {
  background-color: var(--category-language);
}

.hm-step:hover .hm-step__icon {
  transform: rotate(-8deg);
}

.hm-step__num {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-24);
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ash-veil);
}

.hm-step__title {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.hm-step__text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted-ink);
}

.hm-why {
  position: sticky;
  top: 100px;
  padding: clamp(24px, 3vw, 32px);
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
}

.hm-why .hm-head__tag {
  color: var(--color-graphite-ink);
  border-color: var(--category-writing);
}

.hm-why__title {
  margin: 0 0 var(--spacing-24);
  font-size: 30px;
  line-height: 1.1;
  color: var(--color-canvas-white);
}

.hm-why__list {
  display: grid;
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-why__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin: 0;
}

.hm-why__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
}

.hm-why__list li:nth-child(even) .hm-why__icon {
  background-color: var(--category-language);
}

.hm-why__list strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-body);
}

.hm-why__list span span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.hm-credits {
  background-color: var(--surface-paper);
  border-top: var(--border-hairline);
}

.hm-credits__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 48px);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 10px 10px 0 var(--category-writing);
}

.hm-credits__copy .hm-head__text {
  margin-bottom: var(--spacing-24);
}

.hm-end {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin-top: var(--spacing-48);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(255, 255, 255, 0.04) 31px, rgba(255, 255, 255, 0.04) 32px);
}

.hm-end::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
}

.hm-end .hm-head__tag {
  color: var(--color-graphite-ink);
  border-color: var(--category-writing);
}

.hm-end__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--color-canvas-white);
}

.hm-end__text {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
}

.hm-end__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.hm-end .hm-go {
  color: var(--color-graphite-ink);
  background-color: var(--category-writing);
  border-color: var(--category-writing);
}

.hm-end .hm-go::before {
  background-color: var(--color-canvas-white);
}

.hm-end .hm-go:hover {
  color: var(--color-graphite-ink);
}

.hm-end .btn--ghost {
  color: var(--color-canvas-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.hm-end .btn--ghost:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border-color: var(--color-canvas-white);
}

@media (max-width: 991.98px) {
  .hm-how__grid,
  .hm-credits__box {
    grid-template-columns: 1fr;
  }

  .hm-why {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .hm-chain {
    grid-template-columns: 1fr;
  }

  .hm-passes {
    grid-template-columns: 1fr;
  }

}

.hm-story {
  padding: var(--section-gap) max(var(--page-gutter), calc((100% - 1200px) / 2));
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
  border-top: var(--border-hairline);
  overflow: hidden;
}

.hm-story__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.hm-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--spacing-16);
  min-height: clamp(420px, 44vw, 580px);
  padding: 0 14px 14px 0;
}

.hm-mosaic__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: var(--border-hairline);
}

.hm-mosaic__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-mosaic__shot:hover img {
  transform: scale(1.06);
}

.hm-mosaic__shot--a {
  grid-column: 1;
  grid-row: 1;
  box-shadow: 10px 10px 0 var(--category-writing);
}

.hm-mosaic__shot--a img {
  object-position: 70% 30%;
}

.hm-mosaic__shot--b {
  grid-column: 2;
  grid-row: 1 / 3;
  box-shadow: 10px 10px 0 var(--category-language);
}

.hm-mosaic__shot--b img {
  object-position: 50% 45%;
}

.hm-mosaic__shot--c {
  grid-column: 1;
  grid-row: 2;
  box-shadow: 10px 10px 0 var(--category-writing);
}

.hm-mosaic__shot--c img {
  object-position: 60% 35%;
}

.hm-mosaic__tile {
  --tone: var(--category-writing);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--tone);
  animation: bn-float 5s ease-in-out infinite;
}

.hm-mosaic__tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background-color: var(--tone);
}

.hm-mosaic__tile--writing {
  top: 46%;
  left: 52%;
}

.hm-mosaic__tile--language {
  --tone: var(--category-language);
  top: -14px;
  right: 12%;
  animation-delay: -2.5s;
}

.hm-story__list {
  display: grid;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 var(--spacing-32);
  padding: 0;
  list-style: none;
}

.hm-story__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-canvas-white);
  border: var(--border-soft);
  transition: border-color var(--transition-base), translate var(--transition-base);
}

.hm-story__list li:hover {
  translate: 6px 0;
  border-color: var(--color-graphite-ink);
}

.hm-story__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  background-color: var(--category-writing);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.hm-story__icon--alt {
  background-color: var(--category-language);
}

.hm-story__list li:hover .hm-story__icon {
  transform: rotate(-8deg) scale(1.08);
}

@media (max-width: 991.98px) {
  .hm-story__in {
    grid-template-columns: 1fr;
  }

  .hm-mosaic {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .hm-mosaic {
    min-height: 380px;
    gap: var(--spacing-8);
    padding: 0 8px 8px 0;
  }

  .hm-mosaic__shot--a,
  .hm-mosaic__shot--b,
  .hm-mosaic__shot--c {
    box-shadow: 5px 5px 0 var(--category-writing);
  }

  .hm-mosaic__tile {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

.hm-hero {
  position: relative;
  padding: clamp(48px, 7vw, 88px) var(--page-gutter);
  overflow: hidden;
  background-color: var(--surface-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--color-hairline-soft) 39px, var(--color-hairline-soft) 40px);
}

.hm-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--category-writing) 50%, var(--category-language) 50%);
  transform: scaleX(0);
  transform-origin: left;
  animation: bn-line 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.hm-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
}

.hm-hero__copy > * {
  opacity: 0;
  transform: translateY(20px);
  animation: bn-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hm-hero__copy > :nth-child(1) {
  animation-delay: 0.2s;
}

.hm-hero__copy > :nth-child(2) {
  animation-delay: 0.35s;
}

.hm-hero__copy > :nth-child(3) {
  animation-delay: 0.5s;
}

.hm-hero__copy > :nth-child(4) {
  animation-delay: 0.65s;
}

.hm-hero__tag {
  display: inline-block;
  margin-bottom: var(--spacing-24);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-canvas-white);
  background-color: var(--color-graphite-ink);
}

.hm-hero__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--spacing-24);
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -2px;
}

.hm-hero__mark {
  align-self: flex-start;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  background-image: linear-gradient(transparent 62%, var(--category-writing) 62%, var(--category-writing) 92%, transparent 92%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  animation: bn-mark 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s forwards;
}

.hm-hero__lead {
  max-width: 500px;
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-muted-ink);
}

.hm-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.hm-hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1.1fr 1fr;
  gap: var(--spacing-16);
  min-height: clamp(440px, 46vw, 620px);
  padding: 0 14px 14px 0;
}

.hm-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-deep-carbon);
  border: var(--border-hairline);
  clip-path: inset(0 100% 0 0);
  animation: au-wipe 0.9s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.hm-frame img,
.hm-frame__video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.12);
  animation: au-settle 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-frame:hover img {
  transform: scale(1.05);
}

.hm-frame--video {
  grid-column: 1;
  grid-row: 1;
  box-shadow: 12px 12px 0 var(--category-writing);
  animation-delay: 0.15s;
}

.hm-frame--video .hm-frame__video {
  object-position: 50% 40%;
  animation-delay: 0.15s;
}

.hm-frame--wide {
  grid-column: 1;
  grid-row: 2;
  box-shadow: 10px 10px 0 var(--category-language);
  animation-delay: 0.35s;
}

.hm-frame--wide img {
  object-position: 70% 30%;
  animation-delay: 0.35s;
}

.hm-frame--tall {
  grid-column: 2;
  grid-row: 1 / 3;
  box-shadow: 10px 10px 0 var(--category-writing);
  animation-delay: 0.55s;
}

.hm-frame--tall img {
  object-position: 50% 30%;
  animation-delay: 0.55s;
}

.hm-hero__toggle {
  position: absolute;
  right: var(--spacing-12);
  bottom: var(--spacing-12);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  color: var(--color-canvas-white);
  background-color: rgba(9, 11, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.hm-hero__toggle:hover {
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
}

.hm-chip {
  --tone: var(--category-writing);
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  box-shadow: 5px 5px 0 var(--tone);
  opacity: 0;
  animation: bn-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, bn-float 5s ease-in-out infinite;
}

.hm-chip i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  background-color: var(--tone);
}

.hm-chip--language {
  --tone: var(--category-language);
  top: -16px;
  left: 18px;
  animation-delay: 1s, 0s;
}

.hm-chip--writing {
  top: 50%;
  right: -10px;
  animation-delay: 1.15s, -2.5s;
}

.hm-lvls {
  position: absolute;
  left: -18px;
  bottom: 18%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 13px;
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  opacity: 0;
  transform: translateY(16px);
  animation: bn-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.3s forwards;
}

.hm-lvls__bars {
  display: flex;
  gap: 3px;
}

.hm-lvls__bars span {
  width: 30px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  animation: au-bar 0.4s ease forwards;
}

.hm-lvls__bars span:nth-child(1) {
  animation-delay: 1.7s;
}

.hm-lvls__bars span:nth-child(2) {
  animation-delay: 1.85s;
}

.hm-lvls__bars span:nth-child(3) {
  animation-delay: 2s;
}

.hm-lvls__bars span:nth-child(4) {
  animation-delay: 2.15s;
}

@media (max-width: 991.98px) {
  .hm-hero__in {
    grid-template-columns: 1fr;
  }

  .hm-hero__art {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .hm-hero__art {
    min-height: 400px;
    gap: var(--spacing-8);
    padding: 0 8px 8px 0;
  }

  .hm-frame--video,
  .hm-frame--wide,
  .hm-frame--tall {
    box-shadow: 5px 5px 0 var(--category-writing);
  }

  .hm-chip {
    padding: 8px 12px;
    font-size: 13px;
  }

  .hm-chip--writing {
    right: 0;
  }

  .hm-lvls {
    left: 0;
    bottom: 6%;
  }
}

.hm-passes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-pass {
  --tone: var(--category-writing);
  --cut-bg: var(--color-canvas-white);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-16);
  color: var(--color-graphite-ink);
  background-color: var(--surface-paper);
  border: var(--border-hairline);
  transition: box-shadow var(--transition-base), translate var(--transition-base);
}

.hm-pass:nth-child(even) {
  --tone: var(--category-language);
}

.hm-pass:hover {
  translate: 0 -4px;
  box-shadow: 6px 6px 0 var(--tone);
}

.hm-pass.is-top {
  color: var(--color-canvas-white);
  background-color: var(--color-deep-carbon);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(255, 255, 255, 0.05) 23px, rgba(255, 255, 255, 0.05) 24px);
  border-color: var(--color-deep-carbon);
}

.hm-pass__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.hm-pass__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--color-graphite-ink);
  background-color: var(--tone);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.hm-pass:hover .hm-pass__icon {
  transform: rotate(-10deg) scale(1.08);
}

.hm-pass__name {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.hm-pass__best {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-graphite-ink);
  background-color: var(--color-fuchsia-bloom);
}

.hm-pass__mult {
  font-family: var(--font-heading);
  font-size: clamp(44px, 5vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 0.9;
  letter-spacing: -1px;
}

.hm-pass.is-top .hm-pass__mult {
  color: var(--category-writing);
}

.hm-pass__cut {
  position: relative;
  display: block;
  margin: 0 calc(var(--spacing-16) * -1);
  border-top: 1px dashed var(--color-ash-veil);
}

.hm-pass__cut::before,
.hm-pass__cut::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  border-radius: 50%;
}

.hm-pass__cut::before {
  left: -9px;
  clip-path: inset(0 0 0 50%);
}

.hm-pass__cut::after {
  right: -9px;
  clip-path: inset(0 50% 0 0);
}

.hm-pass.is-top .hm-pass__cut {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.hm-pass.is-top .hm-pass__cut::before,
.hm-pass.is-top .hm-pass__cut::after {
  border-color: var(--color-deep-carbon);
}

.hm-pass__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.hm-pass__range {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.hm-pass.is-top .hm-pass__range {
  color: rgba(255, 255, 255, 0.75);
}

.hm-pass__meter {
  display: flex;
  gap: 3px;
}

.hm-pass__meter span {
  width: 14px;
  height: 5px;
  background-color: var(--level-inactive);
}

.hm-pass__meter span.is-on {
  background-color: var(--color-graphite-ink);
}

.hm-pass.is-top .hm-pass__meter span.is-on {
  background-color: var(--category-writing);
}

.hm-rail__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.hm-rail__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 14px;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  overflow: hidden;
  isolation: isolate;
  position: relative;
  transition: color 0.3s ease, opacity var(--transition-fast);
}

.hm-rail__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-graphite-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-rail__arrow:hover:not(:disabled) {
  color: var(--color-canvas-white);
}

.hm-rail__arrow:hover:not(:disabled)::before {
  transform: none;
}

.hm-rail__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.hm-rail__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: var(--spacing-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  background-image: linear-gradient(var(--category-writing), var(--category-writing));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.hm-rail__all:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.hm-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--grid-gap) * 3) / 4);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0 0 var(--spacing-16);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.hm-rail::-webkit-scrollbar {
  display: none;
}

.hm-rail.is-grab {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.hm-card {
  --tone: var(--category-writing);
  --tone-soft: var(--category-writing-soft);
  margin: 0;
  padding: 0 10px 10px 0;
  scroll-snap-align: start;
  animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 80ms + 0.1s);
}

.hm-card--language {
  --tone: var(--category-language);
  --tone-soft: var(--category-language-soft);
}

.hm-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-graphite-ink);
  background-color: var(--color-canvas-white);
  border: var(--border-hairline);
  transition: box-shadow var(--transition-base), translate var(--transition-base);
}

.hm-card__link:hover {
  text-decoration: none;
  translate: 0 -4px;
  box-shadow: 8px 8px 0 var(--tone);
}

.hm-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--tone-soft);
  border-bottom: var(--border-hairline);
}

.hm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-card__link:hover .hm-card__media img {
  transform: scale(1.07);
}

.hm-card__cat {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 21;
  max-width: calc(100% - 72px);
  padding: 3px 10px;
  overflow: hidden;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-graphite-ink);
  background-color: var(--tone);
  border: 1px solid var(--color-graphite-ink);
}

.hm-card__num {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-12);
  z-index: 21;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1;
  color: var(--color-canvas-white);
  text-shadow: 0 1px 8px rgba(9, 11, 17, 0.5);
}

.hm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-16);
}

.hm-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.hm-card__lv {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-ink);
}

.hm-card__lv .mat__meter span {
  width: 16px;
}

.hm-card__link:hover .hm-card__lv .mat__meter span {
  background-color: var(--color-graphite-ink);
}

.hm-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-top: auto;
  padding-top: var(--spacing-12);
  border-top: 1px dashed var(--color-ash-veil);
}

.hm-card__price {
  display: flex;
  flex-direction: column;
}

.hm-card__price small {
  font-size: 11px;
  color: var(--color-muted-ink);
}

.hm-card__price strong {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.hm-card__price em {
  font-size: 12px;
  font-style: normal;
  color: var(--color-muted-ink);
}

.hm-card__go {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 13px;
  border: var(--border-hairline);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.hm-card__link:hover .hm-card__go {
  background-color: var(--tone);
  transform: rotate(-45deg);
}

.hm-rail__bar {
  position: relative;
  height: 3px;
  margin-top: var(--spacing-16);
  overflow: hidden;
  background-color: var(--color-hairline-soft);
}

.hm-rail__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  background: linear-gradient(90deg, var(--category-writing), var(--category-language));
  transition: transform 0.15s linear;
}

@media (max-width: 1199.98px) {
  .hm-rail {
    grid-auto-columns: calc((100% - var(--grid-gap) * 2) / 3);
  }
}

@media (max-width: 767.98px) {
  .hm-rail {
    grid-auto-columns: calc((100% - var(--grid-gap)) / 1.6);
  }
}

@media (max-width: 479.98px) {
  .hm-rail {
    grid-auto-columns: 82%;
  }

  .hm-rail__all {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}