/* Generated by tools/build_card_styles.php. Edit canonical sources, not this file. */

/* Source: /uikit-runtime/css/tokens.css */
:root {
  color-scheme: dark;

  --bg-void: #070b10;
  --bg-deep: #0b141c;
  --bg-ink: #111923;
  --bg-smoke: #18232c;
  --bg-ember: #2f2419;

  --surface-glass: rgba(11, 20, 28, 0.54);
  --surface-glass-strong: rgba(14, 24, 33, 0.68);
  --surface-glass-soft: rgba(13, 23, 31, 0.34);
  --surface-warm: rgba(42, 33, 24, 0.26);
  --surface-field: rgba(7, 11, 16, 0.28);

  --glass-line: rgba(218, 231, 236, 0.16);
  --glass-line-soft: rgba(218, 231, 236, 0.08);
  --glass-line-strong: rgba(229, 238, 241, 0.26);
  --glass-highlight: rgba(174, 205, 218, 0.14);
  --glass-shadow: rgba(0, 0, 0, 0.42);

  --text-main: #e7e1d5;
  --text-soft: #b9b8b0;
  --text-muted: #7f8583;
  --text-dim: #535e60;
  --text-inverse: #15120d;

  --accent-amber: #d6a85f;
  --accent-amber-light: #efcf91;
  --accent-amber-soft: rgba(214, 168, 95, 0.28);
  --accent-amber-faint: rgba(214, 168, 95, 0.12);
  --accent-brass: #a77b45;

  --state-success: #86a995;
  --state-warning: #c5955b;
  --state-danger: #b56b62;
  --state-info: #8aa4b8;
  --state-crisis: #d7a77d;

  --font-display: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-regular: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.625rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-hero: 3.55rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-glass: 0 22px 70px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 14px 44px rgba(0, 0, 0, 0.28);
  --shadow-amber: 0 0 42px rgba(214, 168, 95, 0.18);
  --shadow-inner-line: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-ritual: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast: 180ms;
  --dur-default: 320ms;
  --dur-slow: 560ms;
  --dur-ritual: 1100ms;

  --product-content-max: 1320px;
  --product-content-gutter: 32px;
  --product-content-width: min(var(--product-content-max), calc(100% - (var(--product-content-gutter) * 2)));
  --ritual-table-min-height: 620px;
  --ritual-table-bottom-gap: 24px;
}

/* Shared page gutter: headers, content containers and public footers. */
@media (max-width:760px) {
  :root { --product-content-gutter:16px; }
}

/* Source: /uikit-runtime/css/components/scrollbars.css */
/* One scrollbar contract for UIKit and product surfaces. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 11, 16, 0.88);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(214, 168, 95, 0.5), rgba(138, 164, 184, 0.26));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(239, 207, 145, 0.68), rgba(174, 205, 218, 0.38));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 168, 95, 0.5) rgba(174, 205, 218, 0.08);
  }
}

/* Source: /uikit-runtime/css/components/icons.css */
.ritual-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: inherit;
  font-size: 0;
  font-style: normal;
  line-height: 0;
}

.ritual-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ritual-icon--sm { width: 18px; height: 18px; }
.ritual-icon--lg { width: 32px; height: 32px; }
.ritual-icon--xl { width: 44px; height: 44px; }
.ritual-icon--plain { border: 0; background: transparent; box-shadow: none; }
.currency-star-art { filter:drop-shadow(0 0 1px rgba(239,194,100,.18)); }
.currency-star-art--quiet { filter:none; }
.currency-star-glint { animation:currency-star-glimmer 3.6s ease-in-out infinite; }
@keyframes currency-star-glimmer { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .currency-star-glint { animation:none; } }

.ritual-result-card__more-mark.ritual-icon::before,
.ritual-result-card__more-mark.ritual-icon::after,
.information-disclosure summary:has(> .ritual-icon)::after {
  content: none;
}

/* Source: /uikit-runtime/css/components/product-header.css */
.product-topbar { position: sticky; isolation: isolate; top: 0; z-index: 50; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; min-height: 72px; padding: 0 calc((100% - var(--product-content-width)) / 2); border-bottom: 1px solid var(--glass-line-soft); background: rgba(7,11,16,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.product-brand { grid-column: 1; width: 168px; height: 36px; display: flex; align-items: center; }
.product-brand [data-qantaro-static-logo] { width: 100%; height: 100%; }
.product-nav { grid-column: 2; justify-self: center; display: flex; gap: 6px; color: var(--text-soft); font-size: .88rem; }
.product-nav__auth, .product-topbar__auth { display: contents; }
.product-nav a, .product-topbar a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-default); }
.product-nav button.product-nav__link { appearance: none; color: inherit; background-color: transparent; font: inherit; cursor: pointer; }
.product-nav__link { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 27px; border: 1px solid transparent; border-radius: var(--radius-xs); transition: color 220ms var(--ease-default), border-color 260ms var(--ease-default), background 320ms var(--ease-default), box-shadow 320ms var(--ease-default); }
.product-nav__link::before { position: absolute; z-index: 2; top: 50%; left: 11px; color: var(--accent-amber-light); content: "\2726"; font-size: .58rem; line-height: 1; opacity: 0; filter: drop-shadow(0 0 0 rgba(214,168,95,0)); transform: translateY(-50%) scale(.18) rotate(-16deg); transform-origin: 50% 50%; transition: opacity 480ms var(--ease-default), transform 620ms var(--ease-default), filter 520ms var(--ease-default); }
.product-nav__link::after { position: absolute; z-index: 1; top: 50%; left: 14px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,239,204,.25), rgba(214,168,95,.09) 36%, rgba(104,169,206,.035) 58%, transparent 74%); content: ""; opacity: 0; filter: blur(1px); transform: translate(-50%,-50%) scale(.25); transition: opacity 520ms var(--ease-default), transform 680ms var(--ease-default); }
.product-nav__link:hover, .product-nav__link:focus-visible { color: var(--text-main); border-color: rgba(174,205,218,.1); background: radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104,169,206,.09), transparent 70%), rgba(255,255,255,.018); box-shadow: inset 0 1px rgba(214,229,237,.06); }
.product-nav__link--primary { color: var(--text-main); }
.product-nav__link.is-active { color: #f0e9dc; border-color: rgba(174,205,218,.16); background: radial-gradient(ellipse 100% 140% at 0% 0%, rgba(104,169,206,.16), transparent 64%), radial-gradient(ellipse 92% 130% at 100% 100%, rgba(214,168,95,.13), transparent 70%), linear-gradient(180deg, rgba(31,47,56,.44), rgba(12,20,25,.52)); box-shadow: inset 0 1px rgba(222,239,246,.11), 0 0 24px rgba(104,169,206,.055), 0 0 22px rgba(214,168,95,.045); }
.product-nav__link.is-active::before { opacity: .88; filter: drop-shadow(0 0 6px rgba(214,168,95,.5)); transform: translateY(-50%) scale(1) rotate(0); animation: product-nav-star-ignite 900ms cubic-bezier(.2,.76,.28,1) both, product-nav-star-twinkle 5.6s 900ms ease-in-out infinite; }
.product-nav__link.is-active::after { opacity: .74; transform: translate(-50%,-50%) scale(1); animation: product-nav-star-bloom 1.15s cubic-bezier(.18,.72,.22,1) both, product-nav-star-halo 6.4s 1.15s ease-in-out infinite; }
.product-nav__link.is-active:hover, .product-nav__link.is-active:focus-visible { border-color: rgba(203,229,239,.24); background: radial-gradient(ellipse 100% 140% at 0% 0%, rgba(126,187,215,.22), transparent 66%), radial-gradient(ellipse 92% 130% at 100% 100%, rgba(239,207,145,.17), transparent 72%), linear-gradient(180deg, rgba(37,54,63,.5), rgba(12,21,26,.56)); box-shadow: inset 0 1px rgba(235,248,252,.15), 0 0 30px rgba(104,169,206,.09), 0 0 28px rgba(214,168,95,.07); }
.product-topbar__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.product-nav__toggle { width: 42px; height: 42px; display: none; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-xs); color: var(--text-soft); background: rgba(12,21,28,.66); cursor: pointer; }
.product-nav__toggle:hover, .product-nav__toggle:focus-visible, .product-topbar.is-menu-open .product-nav__toggle { color: var(--accent-amber-light); border-color: rgba(214,168,95,.3); background: rgba(214,168,95,.07); }
.product-nav__toggle .ritual-icon { width: 19px; height: 19px; display: inline-flex; }
.product-nav__toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.product-topbar form { margin: 0; }

@keyframes product-nav-star-ignite {
  0% { filter: drop-shadow(0 0 0 rgba(214,168,95,0)); transform: translateY(-50%) scale(.16) rotate(-18deg); }
  42% { filter: drop-shadow(0 0 11px rgba(255,225,166,.86)) drop-shadow(0 0 18px rgba(104,169,206,.3)); transform: translateY(-50%) scale(1.48) rotate(7deg); }
  68% { transform: translateY(-50%) scale(.84) rotate(-3deg); }
  100% { filter: drop-shadow(0 0 6px rgba(214,168,95,.5)); transform: translateY(-50%) scale(1) rotate(0); }
}

@keyframes product-nav-star-twinkle {
  0%, 100% { color: var(--accent-amber-light); filter: drop-shadow(0 0 5px rgba(214,168,95,.46)); }
  13% { color: rgba(226,190,126,.88); filter: drop-shadow(0 0 3px rgba(214,168,95,.3)); }
  29% { color: rgba(255,231,181,.98); filter: drop-shadow(0 0 8px rgba(255,225,166,.68)); }
  47% { color: rgba(239,207,145,.9); filter: drop-shadow(0 0 5px rgba(214,168,95,.42)); }
  71% { color: rgba(204,231,237,.96); filter: drop-shadow(0 0 7px rgba(183,222,231,.4)); }
  86% { color: rgba(232,198,137,.9); filter: drop-shadow(0 0 4px rgba(214,168,95,.34)); }
}

@keyframes product-nav-star-bloom {
  0% { transform: translate(-50%,-50%) scale(.15); }
  38% { transform: translate(-50%,-50%) scale(1.55); }
  100% { transform: translate(-50%,-50%) scale(1); }
}

@keyframes product-nav-star-halo {
  0%, 100% { transform: translate(-50%,-50%) scale(.88); }
  34% { transform: translate(-50%,-50%) scale(1.08); }
  61% { transform: translate(-50%,-50%) scale(.82); }
  79% { transform: translate(-50%,-50%) scale(1); }
}

@media (max-width: 1080px) {
  .product-topbar { grid-template-columns: 160px 1fr auto; }
  .product-nav { position: absolute; top: calc(100% + 8px); right: calc((100% - var(--product-content-width)) / 2); width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 9px; border: 1px solid rgba(174,205,218,.16); border-radius: var(--radius-md); background: rgba(7,13,19,.97); box-shadow: 0 22px 60px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.985); transform-origin: top right; transition: opacity 180ms var(--ease-default), transform 220ms var(--ease-default), visibility 0s 220ms; }
  .product-topbar.is-menu-open .product-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .product-nav__link { width: 100%; min-height: 44px; padding-right: 12px; padding-left: 27px; }
  .product-nav__toggle { display: grid; }
}

@media (max-width: 760px) {
  .product-topbar { min-height: 64px; grid-template-columns: 140px 1fr; }
  .product-brand { width: 132px; }
  .product-topbar__actions { grid-column: 2; justify-self: end; }
  .product-topbar__actions .btn--quiet, .product-topbar__actions .icon-link, .product-topbar__actions form { display: none; }
  .product-topbar__actions .btn--primary { min-height: 38px; padding: 0 12px; font-size: .78rem; }
  .product-topbar__actions .account-menu, .product-topbar__actions .account-menu form { display: block; }
  .product-topbar[data-authenticated="false"] .product-topbar__actions .btn--quiet { display: inline-flex; }
}

@media (max-width: 520px) {
  .product-topbar { grid-template-columns: 140px 1fr; }
  .product-brand { width: 132px; }
  .product-topbar[data-authenticated="true"] .product-topbar__actions > .btn--primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-nav__link::before,
  .product-nav__link::after { animation: none !important; transition-duration: 160ms; }
  .product-nav__link.is-active::before { opacity: .9; filter: drop-shadow(0 0 6px rgba(214,168,95,.5)); transform: translateY(-50%) scale(1); }
  .product-nav__link.is-active::after { opacity: .62; transform: translate(-50%,-50%) scale(1); }
}

/* Source: /uikit-runtime/css/components/locale-navigation.css */
.language-menu { position: relative; flex: 0 0 auto; color: var(--text-muted); }
.language-menu__trigger { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-pill); color: var(--text-soft); background: rgba(12,21,28,.76); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.14); cursor: pointer; transition: color var(--dur-fast) var(--ease-default), border-color var(--dur-fast) var(--ease-default), background var(--dur-fast) var(--ease-default), box-shadow var(--dur-fast) var(--ease-default); }
.language-menu__trigger:hover, .language-menu__trigger:focus-visible, .language-menu.is-open .language-menu__trigger { color: var(--text-main); border-color: rgba(214,168,95,.25); background: rgba(18,29,36,.9); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.18); }
.language-menu__trigger:focus-visible { outline: 2px solid rgba(214,168,95,.68); outline-offset: 2px; }
.language-menu__code { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(214,168,95,.2); border-radius: 50%; color: #f4ead9; background: radial-gradient(circle at 35% 28%, rgba(214,168,95,.16), transparent 58%), rgba(255,255,255,.025); font-size: .65rem; font-weight: 720; letter-spacing: .07em; }
.language-menu__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: .84rem; }
.language-menu__chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-default); }
.language-menu.is-open .language-menu__chevron { transform: rotate(180deg); }
.language-menu__panel { position: absolute; z-index: 42; top: calc(100% + 10px); right: 0; width: min(244px, calc(100vw - 28px)); padding: 6px 6px 4px; border: 1px solid rgba(205,226,234,.2); border-radius: 12px; background: radial-gradient(circle at 18% 0%, rgba(177,211,222,.11), transparent 48%), linear-gradient(155deg, rgba(9,23,31,.97), rgba(3,12,18,.95)); -webkit-backdrop-filter: blur(36px) saturate(135%) contrast(110%); backdrop-filter: blur(36px) saturate(135%) contrast(110%); box-shadow: inset 0 1px rgba(242,249,251,.085), inset 0 -18px 30px rgba(0,5,9,.14), 0 22px 54px rgba(0,0,0,.42); transform-origin: top right; transition: opacity var(--dur-fast) var(--ease-default), transform var(--dur-fast) var(--ease-default), visibility var(--dur-fast) linear; }
.language-menu:not(.is-open) .language-menu__panel { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.985); }
.language-menu__title { margin: 0; padding: 5px 6px 2px; color: var(--text-muted); font-size: .625rem; font-weight: 680; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.language-menu__items { display: grid; gap: 2px; }
.language-menu__item { min-height: 40px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: 9px; color: var(--text-soft); text-decoration: none; font-size: .84rem; transition: color var(--dur-fast) var(--ease-default), border-color var(--dur-fast) var(--ease-default), background var(--dur-fast) var(--ease-default); }
.language-menu__item:hover, .language-menu__item:focus-visible { color: var(--text-main); border-color: rgba(214,168,95,.16); background: rgba(214,168,95,.055); outline: 0; }
.language-menu__item[aria-current="page"] { color: #f4ead9; background: linear-gradient(90deg, rgba(214,168,95,.1), rgba(214,168,95,.025)); }
.language-menu__item-code { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(174,205,218,.13); border-radius: 50%; color: var(--accent-amber-light); background: rgba(255,255,255,.02); font-size: .62rem; font-weight: 720; letter-spacing: .07em; }
.language-menu__item small { color: var(--text-muted); font-size: .65rem; }
.language-menu--footer .language-menu__panel { top: auto; bottom: calc(100% + 10px); transform-origin: bottom right; }
.language-menu--footer:not(.is-open) .language-menu__panel { transform: translateY(6px) scale(.985); }

@media (max-width: 760px) {
  .language-menu--header .language-menu__trigger { width: 44px; padding: 4px; }
  .language-menu--header .language-menu__name, .language-menu--header .language-menu__chevron { display: none; }
  .language-menu--footer .language-menu__panel { right: auto; left: 0; transform-origin: bottom left; }
}

@media (prefers-reduced-motion: reduce) {
  .language-menu__trigger, .language-menu__chevron, .language-menu__panel, .language-menu__item { transition: none; }
}

/* Source: /uikit-runtime/css/components/public-footer.css */
.qantaro-footer {
  --qantaro-footer-divider-extension: calc(var(--product-content-gutter) * 2);
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid rgba(205, 226, 234, .075);
  color: #a3abae;
  background: linear-gradient(180deg, rgba(10, 20, 27, .54), rgba(5, 12, 17, .42));
  -webkit-backdrop-filter: blur(32px) saturate(145%) contrast(108%);
  backdrop-filter: blur(32px) saturate(145%) contrast(108%);
  box-shadow: inset 0 1px rgba(238, 248, 251, .035), 0 -14px 42px rgba(0, 0, 0, .16);
  font-size: .8125rem;
}

.qantaro-footer__inner { width: var(--product-content-width); margin-inline: auto; display: grid; gap: 38px; padding-block: 18px 24px; }
.qantaro-footer__main { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; }
.qantaro-footer__identity { display: flex; align-items: center; gap: 14px; color: var(--text-soft); }
.qantaro-footer__mark { display: grid; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; place-items: center; border: 0; color: inherit; background: none; cursor: pointer; }
.qantaro-footer__mark img { width: 30px; height: 30px; }
.qantaro-footer__connect { display: flex; align-items: center; gap: 28px; }
.qantaro-footer__contact { white-space: nowrap; }
.qantaro-footer__bottom { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px 32px; }
.qantaro-footer__bottom::before { content: ""; position: absolute; top: -20px; left: 50%; width: calc(100% + var(--qantaro-footer-divider-extension)); height: 1px; background: linear-gradient(90deg, transparent 0, rgba(176, 207, 219, .11) 8%, rgba(176, 207, 219, .19) 28%, rgba(214, 168, 95, .26) 50%, rgba(176, 207, 219, .19) 72%, rgba(176, 207, 219, .11) 92%, transparent 100%); box-shadow: 0 0 12px rgba(143, 190, 208, .08), 0 0 18px rgba(214, 168, 95, .045); transform: translateX(-50%); }
.qantaro-footer__copyright { color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.qantaro-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; align-items: center; font-size: .75rem; }
.qantaro-footer__links a { display: inline-flex; align-items: center; min-height: 32px; }
.qantaro-footer a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-default); }
.qantaro-footer a:not(.qantaro-footer__mark),
.qantaro-footer .analytics-settings-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.qantaro-footer a:hover { color: var(--accent-amber-light); }
.qantaro-footer a:focus-visible, .qantaro-footer__mark:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 5px; border-radius: 4px; }

.qantaro-footer__socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; margin: 0; padding: 0; list-style: none; }
.qantaro-footer__social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-soft); font-size: .8125rem; line-height: 1.4; }
.qantaro-footer__social-badge { position: relative; isolation: isolate; display: grid; width: 42px; height: 42px; place-items: center; overflow: visible; border: 1px solid rgba(205, 174, 117, .25); border-radius: 12px; background: linear-gradient(145deg, rgba(29, 48, 59, .96), rgba(9, 18, 24, .98)); box-shadow: inset 0 1px 0 rgba(255, 244, 219, .1), inset 0 -8px 16px rgba(1, 7, 11, .22), 0 7px 18px rgba(0, 0, 0, .16); transition: border-color var(--dur-fast) var(--ease-default), box-shadow var(--dur-fast) var(--ease-default), filter var(--dur-fast) var(--ease-default); }
.qantaro-footer__social-badge::before { content: ""; position: absolute; z-index: -1; inset: 4px; border: 1px solid rgba(255, 244, 219, .055); border-radius: 8px; background: radial-gradient(circle at 35% 25%, rgba(255, 244, 219, .075), transparent 58%); }
.qantaro-footer__social-badge::after { content: "\2726"; position: absolute; z-index: 2; top: -3px; right: -10px; color: var(--accent-amber-light); font-size: .58rem; line-height: 1; opacity: 0; filter: drop-shadow(0 0 0 rgba(214, 168, 95, 0)); transform: translateY(-50%) scale(.18) rotate(-16deg); transform-origin: 50% 50%; }
.qantaro-footer__social-badge img { display: block; width: 22px; height: 22px; }
.qantaro-footer__social-link:hover .qantaro-footer__social-badge, .qantaro-footer__social-link:focus-visible .qantaro-footer__social-badge { border-color: rgba(222, 180, 96, .65); box-shadow: inset 0 1px 0 rgba(255, 244, 219, .14), inset 0 -8px 16px rgba(1, 7, 11, .18), 0 0 22px rgba(210, 164, 82, .13); filter: brightness(1.08); }
.qantaro-footer__social-link:hover .qantaro-footer__social-badge::after, .qantaro-footer__social-link:focus-visible .qantaro-footer__social-badge::after { opacity: .88; animation: qantaro-footer-star-ignite 900ms cubic-bezier(.2, .76, .28, 1) both, qantaro-footer-star-twinkle 5.6s 900ms ease-in-out infinite; }
.qantaro-footer__social-upcoming, .qantaro-footer__social-link--upcoming { display: none; }

@keyframes qantaro-footer-star-ignite { 0% { filter: drop-shadow(0 0 0 rgba(214, 168, 95, 0)); transform: translateY(-50%) scale(.16) rotate(-18deg); } 42% { filter: drop-shadow(0 0 11px rgba(255, 225, 166, .86)) drop-shadow(0 0 18px rgba(104, 169, 206, .3)); transform: translateY(-50%) scale(1.48) rotate(7deg); } 68% { transform: translateY(-50%) scale(.84) rotate(-3deg); } 100% { filter: drop-shadow(0 0 6px rgba(214, 168, 95, .5)); transform: translateY(-50%) scale(1) rotate(0); } }
@keyframes qantaro-footer-star-twinkle { 0%, 100% { color: var(--accent-amber-light); filter: drop-shadow(0 0 5px rgba(214, 168, 95, .46)); } 29% { color: rgba(255, 231, 181, .98); filter: drop-shadow(0 0 8px rgba(255, 225, 166, .68)); } 71% { color: rgba(204, 231, 237, .96); filter: drop-shadow(0 0 7px rgba(183, 222, 231, .4)); } }

@media (max-width: 1000px) {
  .qantaro-footer__main { gap: 24px; }
  .qantaro-footer__connect { gap: 20px; }
  .qantaro-footer__socials { flex-wrap: nowrap; gap: 16px; }
  .qantaro-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; }
  .qantaro-footer__links { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
}

@media (max-width: 700px) {
  .qantaro-footer__inner { gap: 36px; padding-block: 18px 20px; }
  .qantaro-footer__main { align-items: flex-start; flex-direction: column; gap: 20px; }
  .qantaro-footer__connect { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
  .qantaro-footer__bottom { gap: 16px; }
  .qantaro-footer__bottom::before { top: -19px; }
  .qantaro-footer__links { gap: 4px 20px; }
  .qantaro-footer__copyright { font-size: .6875rem; }
  .qantaro-footer__socials { justify-content: flex-start; }
  .qantaro-footer .language-menu--footer .language-menu__panel { right: 0; left: auto; transform-origin: bottom right; }
}

@media (prefers-reduced-motion: reduce) {
  .qantaro-footer__social-link, .qantaro-footer__social-badge, .qantaro-footer__social-badge::after { animation: none !important; transition: none !important; }
}

/* Source: /uikit-runtime/css/components/translation-bridge.css */
.translation-bridge { position: relative; isolation: isolate; width: 100%; min-height: 390px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .68fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(174,205,218,.16); border-radius: 18px; background: radial-gradient(circle at 82% 22%, rgba(104,169,206,.13), transparent 32%), radial-gradient(circle at 4% 100%, rgba(214,168,95,.1), transparent 36%), linear-gradient(145deg, rgba(20,31,39,.9), rgba(8,14,20,.94)); box-shadow: inset 0 1px rgba(235,248,252,.055), 0 32px 90px rgba(0,0,0,.24); }
.translation-bridge::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(174,205,218,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(174,205,218,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(110deg, rgba(0,0,0,.68), transparent 72%); content: ""; }
.translation-bridge > :not(.ambient-sparks) { position: relative; z-index: 2; }
.translation-bridge > .ambient-sparks { z-index: 1; border-radius: inherit; opacity: .5; }
.translation-bridge__copy { align-self: center; max-width: 650px; padding: clamp(32px, 5vw, 60px); padding-right: clamp(24px, 3vw, 46px); }
.translation-bridge__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; color: var(--accent-amber-light); font-size: .7rem; font-weight: 680; letter-spacing: .12em; text-transform: uppercase; }
.translation-bridge__eyebrow::before { content: "\2726"; color: var(--accent-amber-light); font-size: .9rem; line-height: 1; text-shadow: 0 0 12px rgba(214,168,95,.56); }
.translation-bridge h1 { max-width: 620px; margin: 0; color: var(--text-main); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.85rem); font-weight: 450; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.translation-bridge__description { max-width: 600px; margin: 20px 0 0; color: var(--text-soft); font-size: clamp(.94rem, 1.2vw, 1.05rem); line-height: 1.65; }
.translation-bridge__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 27px; }
.translation-bridge__actions .btn { min-height: 48px; }
.translation-bridge__note { margin: 12px 0 0; color: var(--text-muted); font-size: .74rem; line-height: 1.5; }
.translation-bridge__visual { position: relative; min-height: 390px; border-left: 1px solid rgba(174,205,218,.1); background: radial-gradient(circle at 50% 45%, rgba(153,205,224,.095), transparent 40%); }
.translation-bridge__orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(174,205,218,.13); border-radius: 50%; transform: translate(-50%,-50%); }
.translation-bridge__orbit--outer { width: 310px; height: 310px; box-shadow: inset 0 0 54px rgba(104,169,206,.025); }
.translation-bridge__orbit--inner { width: 214px; height: 214px; border-color: rgba(214,168,95,.13); }
.translation-bridge__page { position: absolute; top: 50%; width: 144px; height: 194px; display: flex; flex-direction: column; padding: 21px 19px; border: 1px solid rgba(174,205,218,.17); border-radius: 12px; background: linear-gradient(155deg, rgba(25,38,47,.94), rgba(10,17,23,.96)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 24px 46px rgba(0,0,0,.3); }
.translation-bridge__page small { color: var(--text-muted); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.translation-bridge__page strong { margin-top: auto; color: var(--text-main); font-family: var(--font-display); font-size: 2.2rem; font-weight: 450; }
.translation-bridge__page i { height: 1px; margin-top: 9px; display: block; background: rgba(174,205,218,.13); }
.translation-bridge__page--source { left: calc(50% - 116px); border-color: rgba(214,168,95,.3); transform: translateY(-56%) rotate(-5deg); box-shadow: inset 0 1px rgba(255,243,218,.08), 0 25px 55px rgba(0,0,0,.34), 0 0 34px rgba(214,168,95,.075); }
.translation-bridge__page--target { left: calc(50% - 25px); opacity: .62; transform: translateY(-43%) rotate(5deg); }
.translation-bridge__page--target::after { position: absolute; inset: 7px; border: 1px dashed rgba(174,205,218,.17); border-radius: 8px; content: ""; }
.translation-bridge__thread { position: absolute; top: 50%; left: 50%; width: 188px; height: 1px; background: linear-gradient(90deg, transparent, rgba(214,168,95,.65), rgba(174,205,218,.36), transparent); box-shadow: 0 0 15px rgba(214,168,95,.24); transform: translate(-50%,-50%) rotate(-28deg); }
.translation-bridge__visual img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 900px) {
  .translation-bridge { grid-template-columns: 1fr; }
  .translation-bridge__copy { max-width: none; padding: 40px 32px 34px; }
  .translation-bridge__visual { min-height: 290px; border-top: 1px solid rgba(174,205,218,.1); border-left: 0; }
  .translation-bridge__orbit--outer { width: 260px; height: 260px; }
}

@media (max-width: 560px) {
  .translation-bridge { min-height: 0; }
  .translation-bridge__copy { padding: 31px 20px 27px; }
  .translation-bridge h1 { font-size: clamp(2rem, 10.5vw, 2.85rem); line-height: 1.02; }
  .translation-bridge__description { margin-top: 17px; }
  .translation-bridge__actions { align-items: stretch; flex-direction: column; margin-top: 24px; }
  .translation-bridge__actions .btn { width: 100%; }
  .translation-bridge__visual { min-height: 250px; }
  .translation-bridge__page { width: 126px; height: 170px; padding: 18px 16px; }
  .translation-bridge__page--source { left: calc(50% - 100px); }
  .translation-bridge__page--target { left: calc(50% - 19px); }
}

@media (prefers-reduced-motion: reduce) {
  .translation-bridge *, .translation-bridge *::before, .translation-bridge *::after { animation: none !important; }
}

/* Source: /uikit-runtime/css/components/language-suggestion.css */
.language-suggestion {
  position: fixed;
  z-index: 120;
  right: max(36px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  width: min(473px, calc(100vw - 72px));
  min-height: 184px;
  overflow: visible;
  color: #f7f2e8;
  border: 1px solid rgba(174, 205, 218, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 20%, rgba(56, 136, 159, .2), transparent 34%),
    linear-gradient(145deg, rgba(15, 27, 35, .985), rgba(7, 13, 19, .99));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .045);
  opacity: 0;
  transform: translate3d(calc(100% + 72px), 0, 0);
  transform-origin: right bottom;
  transition: opacity 260ms ease, transform 620ms cubic-bezier(.18, .76, .2, 1), border-color 180ms ease, box-shadow 180ms ease;
  isolation: isolate;
}

.language-suggestion[hidden] {
  display: none !important;
}

.language-suggestion.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.language-suggestion.is-dismissing {
  opacity: 0;
  transform: translate3d(10px, 8px, 0) scale(.99);
  pointer-events: none;
}

.language-suggestion::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 38%);
  pointer-events: none;
}

.language-suggestion__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 20px;
}

.language-suggestion__eyebrow {
  margin: 0 0 9px;
  color: #8fc3d0;
  font: 600 11px/1.25 var(--font-sans, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.language-suggestion h2 {
  max-width: none;
  margin: 0;
  color: inherit;
  font: 500 21px/1.15 var(--font-display, Georgia, serif);
  letter-spacing: -.015em;
  white-space: nowrap;
}

.language-suggestion__copy:lang(en) h2 {
  font-size: 17px;
}

.language-suggestion p {
  max-width: 330px;
  margin: 8px 0 14px;
  color: rgba(229, 235, 235, .72);
  font: 400 14px/1.5 var(--font-sans, system-ui, sans-serif);
}

.language-suggestion .language-suggestion__action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 15px 9px 17px;
  color: #10161a;
  border: 1px solid rgba(255, 230, 169, .72);
  border-radius: 12px;
  background: linear-gradient(135deg, #e2c887, #c8a85f);
  box-shadow: 0 10px 26px rgba(185, 145, 61, .16), inset 0 1px rgba(255, 255, 255, .42);
  font: 650 13px/1.2 var(--font-sans, system-ui, sans-serif);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.language-suggestion .language-suggestion__action:hover,
.language-suggestion .language-suggestion__action:focus-visible {
  color: #090d10;
  border-color: rgba(255, 239, 196, .95);
  background: linear-gradient(135deg, #ecd699, #d5b66e);
  box-shadow: 0 12px 30px rgba(185, 145, 61, .23), inset 0 1px rgba(255, 255, 255, .52);
}

.language-suggestion__action:focus-visible,
.language-suggestion__dismiss:focus-visible {
  outline: 2px solid #9fd6e2;
  outline-offset: 3px;
}

.language-suggestion__action .ritual-icon {
  width: 17px;
  height: 17px;
  color: inherit;
}

.language-suggestion__art {
  position: relative;
  min-width: 0;
  overflow: visible;
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background: transparent;
}

.language-suggestion__art::after {
  display: none;
}

.language-suggestion__art img {
  position: absolute;
  z-index: 1;
  width: 126px;
  max-width: none;
  height: auto;
  right: 28px;
  top: 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .44));
}

.language-suggestion__art .familiar-magic-stage__ornament {
  z-index: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 round 0 18px 18px 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .68) 24%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .68) 24%, #000 46%);
}

.language-suggestion__art .familiar-magic-stage__ornament::before {
  inset: 10% 0 4%;
  filter: blur(14px);
}

.language-suggestion__dismiss {
  position: absolute;
  z-index: 3;
  top: -1px;
  right: -1px;
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0;
  place-items: center;
  --modal-close-ring: rgba(148, 190, 207, .28);
  color: var(--text-soft, rgba(229, 235, 235, .72));
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(214, 168, 95, .1), transparent 70%),
    rgba(7, 16, 24, .54);
  box-shadow:
    inset 0 0 0 1px var(--modal-close-ring),
    inset 0 1px rgba(239, 211, 161, .08);
  cursor: pointer;
  transform: translate(50%, -50%);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.language-suggestion__dismiss:hover {
  --modal-close-ring: rgba(183, 224, 239, .48);
  color: var(--text-main, #f7f2e8);
  background:
    radial-gradient(circle at 35% 28%, rgba(166, 220, 239, .16), transparent 64%),
    rgba(8, 24, 34, .86);
  box-shadow:
    0 0 22px rgba(105, 190, 222, .12),
    inset 0 0 0 1px var(--modal-close-ring),
    inset 0 1px rgba(225, 246, 253, .1);
}

.language-suggestion__dismiss > .ritual-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

@media (max-width: 620px) {
  .language-suggestion {
    right: max(28px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) 120px;
    width: min(473px, calc(100vw - 56px));
    min-height: 184px;
  }

  .language-suggestion__copy {
    padding: 23px 14px 22px 20px;
  }

  .language-suggestion h2 {
    font-size: 20px;
  }

  .language-suggestion p {
    margin: 9px 0 16px;
    font-size: 13px;
  }

  .language-suggestion__art img {
    width: 106px;
    height: auto;
    right: 18px;
    top: 4px;
  }
}

@media (max-width: 460px) {
  .language-suggestion {
    grid-template-columns: 1fr;
  }

  .language-suggestion__copy {
    padding-right: 54px;
  }

  .language-suggestion__dismiss {
    top: 12px;
    right: 12px;
    transform: none;
  }

  .language-suggestion h2 {
    white-space: normal;
  }

  .language-suggestion__art {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-suggestion,
  .language-suggestion__action,
  .language-suggestion__dismiss {
    transition: none;
  }

  .language-suggestion {
    transform: none;
  }
}

/* Source: /uikit-runtime/css/components/information-subnav.css */
.information-subnav-lab {
  display: grid;
  gap: 18px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--glass-line-soft);
}

.information-subnav-lab__intro { max-width: 760px; }
.information-subnav-lab__intro h2 { margin: 0 0 8px; font-size: 1.3rem; }
.information-subnav-lab__intro p { margin: 0; color: var(--text-soft); line-height: 1.58; }
.information-subnav-lab__grid { display: grid; gap: 16px; }
.information-subnav-option { min-width: 0; display: grid; gap: 8px; }
.information-subnav-option__label { margin: 0; color: var(--text-muted); font: 600 .66rem/1.4 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }

.information-subnav-preview {
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(174, 205, 218, .13);
  border-radius: var(--radius-md);
  background: rgba(6, 12, 18, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 20px 44px rgba(0, 0, 0, .18);
}
.information-subnav-preview .product-topbar { position: relative; top: auto; z-index: 8; padding-inline: 18px; }
.information-subnav-preview .product-brand { pointer-events: none; }
.information-subnav-preview .product-topbar__actions { min-width: 42px; }
.information-subnav-preview .product-nav__toggle { pointer-events: none; }
.information-subnav-preview--overlay-demo { min-height: 350px; }
.information-subnav-preview > .page-context-layout { width: auto; margin: 0; padding: 14px 18px; }
.information-subnav-preview > .page-context-layout .page-context-nav { margin: 0; }

.information-subnav-preview__primary {
  min-height: 58px;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(174, 205, 218, .1);
  color: var(--text-soft);
}
.information-subnav-preview__brand { color: var(--accent-amber-light); font: 500 .86rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.information-subnav-preview__primary nav { justify-self: center; display: flex; gap: 22px; font-size: .76rem; }
.information-subnav-preview__primary nav span[aria-current="page"] { color: var(--accent-amber-light); }
.information-subnav-preview__account { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(214, 168, 95, .25); border-radius: 50%; color: var(--accent-amber-light); font: .68rem var(--font-mono); background: rgba(214, 168, 95, .055); }
.information-subnav {
  --subnav-accent: rgba(214, 168, 95, .68);
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 0 18px;
}
.information-subnav__identity { min-width: 0; display: grid; gap: 2px; }
.information-subnav__identity span { color: var(--text-muted); font-size: .61rem; line-height: 1.3; letter-spacing: .055em; text-transform: uppercase; }
.information-subnav__identity strong { color: var(--text-main); font-size: .84rem; font-weight: 570; line-height: 1.35; }
.information-subnav__links { min-width: 0; justify-self: end; display: flex; align-items: stretch; gap: 3px; margin: 0; padding: 0; list-style: none; }
.information-subnav__links a {
  position: relative;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  outline: 0;
  transition: color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}
.information-subnav__links a:hover,
.information-subnav__links a:focus-visible { color: var(--text-main); background: rgba(255, 255, 255, .035); }
.information-subnav__links a:focus-visible { box-shadow: 0 0 0 2px rgba(239, 207, 145, .46); }
.information-subnav__links a[aria-current="page"] { color: var(--accent-amber-light); background: rgba(214, 168, 95, .075); }
.information-subnav__toggle {
  min-height: 36px;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid rgba(174, 205, 218, .15);
  border-radius: var(--radius-xs);
  color: var(--text-main);
  background: rgba(10, 20, 27, .6);
  cursor: pointer;
  font: inherit;
}
.information-subnav__toggle::after { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-default) var(--ease-default); }
.information-subnav.is-open .information-subnav__toggle::after { transform: rotate(225deg) translate(-1px, -1px); }

.information-subnav--service { background: linear-gradient(90deg, rgba(10, 24, 33, .72), rgba(8, 16, 22, .6) 58%, rgba(28, 22, 16, .48)); }
.information-subnav--service { grid-template-columns: minmax(0, 1fr) auto; }
.information-subnav--service .information-subnav__identity { display: none; }
.information-subnav--service::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(100, 164, 188, .14), rgba(214, 168, 95, .26), transparent 86%); content: ""; }

.information-subnav--line { min-height: 48px; background: rgba(7, 14, 20, .72); }
.information-subnav--line .information-subnav__identity { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
.information-subnav--line .information-subnav__links a { border-radius: 0; background: transparent; }
.information-subnav--line .information-subnav__links a::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 1px; opacity: 0; background: var(--subnav-accent); box-shadow: 0 0 12px rgba(214, 168, 95, .38); content: ""; transition: opacity var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-subnav--line .information-subnav__links a:hover::after,
.information-subnav--line .information-subnav__links a:focus-visible::after,
.information-subnav--line .information-subnav__links a[aria-current="page"]::after { opacity: 1; }

.information-subnav--focus { margin: 7px; min-height: 48px; border: 1px solid rgba(174, 205, 218, .1); border-radius: var(--radius-sm); background: radial-gradient(ellipse 42% 120% at 100% 0%, rgba(214, 168, 95, .095), transparent 72%), rgba(9, 18, 24, .72); }
.information-subnav--focus .information-subnav__identity { grid-template-columns: auto auto; align-items: center; gap: 10px; }
.information-subnav--focus .information-subnav__identity::before { width: 7px; height: 7px; grid-row: 1 / 3; border: 1px solid rgba(239, 207, 145, .55); border-radius: 50%; background: rgba(214, 168, 95, .14); box-shadow: 0 0 12px rgba(214, 168, 95, .17); content: ""; }
.information-subnav--focus .information-subnav__links a[aria-current="page"] { box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 0 18px rgba(214, 168, 95, .055); }

.information-local-nav-saved { display: grid; gap: 8px; margin-top: 2px; padding: 14px; border: 1px dashed rgba(174, 205, 218, .14); border-radius: var(--radius-sm); }
.information-local-nav-saved > span { color: var(--text-muted); font: 600 .64rem/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }

.information-nav-dropdown { position: relative; }
.information-nav-dropdown__trigger { font: inherit; cursor: pointer; }
.information-nav-dropdown__panel { position: absolute; z-index: 30; top: 100%; left: 50%; width: min(520px, calc(100vw - 32px)); padding-top: 9px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -9px) scale(.985); transform-origin: 50% 0; transition: opacity 240ms var(--ease-default), transform 360ms var(--ease-default), visibility 0s 360ms; }
.information-nav-dropdown:hover .information-nav-dropdown__panel,
.information-nav-dropdown:focus-within .information-nav-dropdown__panel,
.information-nav-dropdown.is-open .information-nav-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.information-nav-dropdown__surface { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 9px; border: 1px solid rgba(174, 205, 218, .17); border-radius: var(--radius-md); background: radial-gradient(ellipse 80% 115% at 0% 0%, rgba(104,169,206,.13), transparent 66%), radial-gradient(ellipse 82% 110% at 100% 100%, rgba(214,168,95,.11), transparent 70%), linear-gradient(120deg, rgba(9,21,29,.98), rgba(12,17,20,.98)); box-shadow: 0 25px 65px rgba(0, 0, 0, .5), inset 0 1px rgba(222,239,246,.08); backdrop-filter: blur(22px) saturate(118%); }
.information-nav-dropdown__surface::before { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(183,222,231,.035), transparent 34%, transparent 67%, rgba(239,207,145,.035)); content: ""; }
.information-nav-dropdown__panel a { position: relative; min-width: 0; display: grid; gap: 4px; padding: 13px; overflow: hidden; border: 1px solid rgba(174,205,218,.055); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; background: linear-gradient(180deg, rgba(174,205,218,.035), rgba(5,13,18,.25)); transition: color 220ms var(--ease-default), border-color 280ms var(--ease-default), background 320ms var(--ease-default), box-shadow 320ms var(--ease-default); }
.information-nav-dropdown__panel a:hover,
.information-nav-dropdown__panel a:focus-visible { border-color: rgba(174,205,218,.22); background: radial-gradient(ellipse 100% 120% at 0% 0%, rgba(104,169,206,.13), transparent 68%), radial-gradient(ellipse 92% 110% at 100% 100%, rgba(214,168,95,.1), transparent 72%), rgba(11,20,25,.62); box-shadow: inset 0 1px rgba(222,239,246,.08), 0 0 26px rgba(104,169,206,.055); }
.information-nav-dropdown__panel a strong { font-size: .78rem; font-weight: 580; }
.information-nav-dropdown__panel a small { color: var(--text-muted); font-size: .66rem; line-height: 1.4; }

.information-nav-mega { position: absolute; z-index: 29; top: 100%; right: 0; left: 0; padding: 10px max(18px, calc((100% - 1120px) / 2)); border-top: 1px solid rgba(174, 205, 218, .1); background: radial-gradient(ellipse 55% 130% at 0% 0%, rgba(104,169,206,.11), transparent 70%), radial-gradient(ellipse 48% 120% at 100% 100%, rgba(214,168,95,.09), transparent 72%), rgba(7,14,20,.975); box-shadow: 0 24px 58px rgba(0, 0, 0, .38); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transform-origin: 50% 0; transition: opacity 260ms var(--ease-default), transform 380ms var(--ease-default), visibility 0s 380ms; }
.product-topbar:has(.information-nav-mega-trigger:hover) .information-nav-mega,
.product-topbar:has(.information-nav-mega-trigger:focus-visible) .information-nav-mega,
.information-nav-mega:hover,
.information-nav-mega:focus-within,
.product-topbar.is-information-mega-open .information-nav-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.information-nav-mega__inner { display: grid; grid-template-columns: .62fr 1.38fr; gap: 18px; padding: 14px; border: 1px solid rgba(174, 205, 218, .13); border-radius: var(--radius-sm); background: linear-gradient(110deg, rgba(10,25,34,.78), rgba(19,22,21,.68)); box-shadow: inset 0 1px rgba(222,239,246,.075); }
.information-nav-mega__intro { display: grid; align-content: start; gap: 5px; }
.information-nav-mega__intro strong { color: var(--text-main); font-size: .95rem; }
.information-nav-mega__intro span { color: var(--text-muted); font-size: .72rem; line-height: 1.5; }
.information-nav-mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.information-nav-mega__links a { position: relative; display: grid; align-content: start; gap: 4px; min-height: 62px; padding: 10px 12px; overflow: hidden; border: 1px solid rgba(174,205,218,.07); border-radius: var(--radius-xs); color: var(--text-soft); font-size: .72rem; text-decoration: none; background: linear-gradient(180deg, rgba(174,205,218,.035), rgba(4,11,16,.22)); transition: color 220ms var(--ease-default), border-color 280ms var(--ease-default), background 320ms var(--ease-default), box-shadow 320ms var(--ease-default); }
.information-nav-mega__links strong { color: var(--text-main); font-size: .74rem; font-weight: 580; }
.information-nav-mega__links small { color: var(--text-muted); font-size: .63rem; line-height: 1.4; }
.information-nav-mega__links a:hover,
.information-nav-mega__links a:focus-visible { color: var(--text-main); border-color: rgba(174,205,218,.2); background: radial-gradient(ellipse 100% 120% at 0% 0%, rgba(104,169,206,.13), transparent 68%), radial-gradient(ellipse 90% 100% at 100% 100%, rgba(214,168,95,.09), transparent 72%), rgba(8,17,22,.62); box-shadow: inset 0 1px rgba(222,239,246,.08), 0 0 24px rgba(104,169,206,.05); }

@media (max-width: 760px) {
  .information-subnav-preview__primary { min-height: 54px; grid-template-columns: 118px 1fr auto; padding-inline: 14px; }
  .information-subnav-preview--overlay-demo { min-height: 0; }
  .information-subnav-preview__primary nav { display: none; }
  .information-subnav { min-height: 54px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-inline: 14px; }
  .information-subnav__toggle { display: inline-flex; }
  .information-subnav__links {
    position: absolute;
    z-index: 20;
    top: calc(100% + 7px);
    right: 10px;
    left: 10px;
    display: grid;
    gap: 3px;
    padding: 7px;
    border: 1px solid rgba(174, 205, 218, .16);
    border-radius: var(--radius-sm);
    background: rgba(7, 14, 20, .97);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity var(--dur-fast) var(--ease-default), transform var(--dur-default) var(--ease-default), visibility 0s var(--dur-default);
  }
  .information-subnav.is-open .information-subnav__links { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .information-subnav__links a { width: 100%; min-height: 42px; padding-inline: 12px; border-radius: var(--radius-xs); }
  .information-subnav--line .information-subnav__identity { grid-auto-flow: row; gap: 2px; }
  .information-subnav--line .information-subnav__links a::after { display: none; }
  .information-subnav--focus { margin: 6px; }
}

@media (max-width: 1080px) {
  .product-nav .information-nav-dropdown { width: 100%; display: grid; }
  .product-nav .information-nav-dropdown__trigger { width: 100%; justify-content: flex-start; }
  .product-nav .information-nav-dropdown__panel { position: static; width: 100%; max-height: 0; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: max-height 360ms var(--ease-default), opacity 240ms var(--ease-default), visibility 0s 360ms; }
  .product-topbar.is-menu-open .product-nav .information-nav-dropdown__panel { max-height: 520px; padding-top: 4px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .product-nav .information-nav-dropdown__surface { grid-template-columns: 1fr; padding: 5px; border-radius: var(--radius-sm); box-shadow: inset 0 1px rgba(222,239,246,.07); }
  .product-nav .information-nav-dropdown__panel a { padding: 10px 11px; }
  .information-nav-mega { position: static; padding: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; }
  .information-nav-mega__inner, .information-nav-mega__links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .information-subnav__links,
  .information-subnav__toggle::after { transition: none; }
  .information-nav-dropdown__panel, .information-nav-mega { transition: none; }
}

/* Source: /uikit-runtime/css/brand/qantaro-logo-stable.css */
:root {
  --qantaro-bg-start: #040811;
  --qantaro-bg-middle: #07111b;
  --qantaro-bg-end: #11100d;
  --qantaro-gold: #f6c97c;
  --qantaro-border: rgba(255, 255, 255, 0.08);
  --qantaro-radius: 28px;
}

.qantaro-static-logo__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qantaro-static-logo__svg--star {
  overflow: visible;
}

.qantaro-logo__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qantaro-static-logo__base {
  fill: var(--qantaro-static-fill);
  filter: var(--qantaro-static-base-filter);
}

.qantaro-static-logo__word {
  fill: var(--qantaro-static-fill);
  filter: var(--qantaro-static-word-filter);
}

.qantaro-static-logo .qantaro-logo__star-base,
.qantaro-static-logo .qantaro-logo__star-flash {
  fill: var(--qantaro-static-fill);
}

.qantaro-static-logo .qantaro-logo__star-base {
  filter: var(--qantaro-static-star-filter);
  animation: qantaro-star-opacity 5.4s ease-in-out infinite;
}

.qantaro-static-logo .qantaro-logo__star-flash {
  opacity: 0;
  filter: var(--qantaro-static-pulse-filter);
  pointer-events: none;
}

[data-qantaro-logo] {
  min-height: 320px;
}

.qantaro-logo {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --qantaro-height: 100%;

  position: relative;
  width: 100%;
  height: var(--qantaro-height);
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid var(--qantaro-border);
  border-radius: var(--qantaro-radius);

  background:
    radial-gradient(
      circle at var(--mouse-x) var(--mouse-y),
      rgba(246, 201, 124, 0.12),
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 90%,
      rgba(92, 124, 146, 0.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 84% 8%,
      rgba(246, 201, 124, 0.08),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      var(--qantaro-bg-start) 0%,
      var(--qantaro-bg-middle) 54%,
      var(--qantaro-bg-end) 100%
    );

  box-shadow:
    0 18px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.qantaro-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at var(--mouse-x) var(--mouse-y),
      rgba(255, 255, 255, 0.075),
      transparent 18%
    ),
    linear-gradient(
      130deg,
      rgba(255, 255, 255, 0.03),
      transparent 35%,
      rgba(246, 201, 124, 0.04)
    );

  mix-blend-mode: screen;
  opacity: 0.82;
}

.qantaro-logo__parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.qantaro-logo__canvas,
.qantaro-logo__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qantaro-logo__canvas {
  z-index: 0;
  display: block;
}

.qantaro-logo__scene {
  z-index: 1;
  overflow: visible;
  transform-origin: center;
  transform-style: flat;
}

.qantaro-logo__word-surface { display: none; pointer-events: none; }
.qantaro-logo[data-variant="word"] .qantaro-logo__word-surface[data-ready="true"] { display: block; }

.qantaro-logo__variant {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: center;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    visibility 0s linear 280ms;
}

.qantaro-logo[data-variant="mark"] .qantaro-logo__variant--mark,
.qantaro-logo[data-variant="word"] .qantaro-logo__variant--word {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.qantaro-logo__base {
  fill: var(--qantaro-fill);
  filter: var(--qantaro-base-glow);
}

.qantaro-logo__word {
  fill: var(--qantaro-fill);
  filter: var(--qantaro-word-glow);
}

.qantaro-logo__star-base,
.qantaro-logo__star-flash {
  fill: var(--qantaro-star-fill);
}

.qantaro-logo__star-base {
  filter: var(--qantaro-star-glow);
  animation: qantaro-star-opacity 5.4s ease-in-out infinite;
}

.qantaro-logo__star-flash {
  opacity: 0;
  filter: var(--qantaro-pulse-glow);
  pointer-events: none;
}

/*
  В idle-состоянии звёзды больше НЕ масштабируются.
  Меняется только прозрачность, поэтому нет неприятного "подрагивания".
*/
@keyframes qantaro-star-opacity {
  0%,
  100% {
    opacity: 0.76;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qantaro-logo__star-base {
    animation: none;
    opacity: 0.9;
  }

  .qantaro-logo__variant,
  .qantaro-logo__scene {
    transition: none;
    transform: none !important;
  }
}

/* Source: /uikit-runtime/css/components/typography.css */
﻿.token-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--glass-line-soft);
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--accent-amber);
  font: 600 0.72rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.token-row:last-child {
  border-bottom: 0;
}

.swatch {
  height: 46px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(174, 205, 218, 0.1);
}

.token-row code,
.code-pill {
  color: var(--accent-amber-light);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.token-row p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--text-regular);
  line-height: 1.45;
}

.type-sample {
  display: grid;
  gap: var(--space-5);
}

.type-sample__hero {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.15vw, var(--text-hero));
  font-weight: 480;
  line-height: 1.02;
}

.type-sample__screen-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.55vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
}

.type-sample__section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 520;
  line-height: 1.2;
}

.type-sample__guardian {
  max-width: 740px;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent-amber-soft);
  color: var(--text-main);
  font-size: var(--text-regular);
  line-height: 1.68;
}

.type-sample__reading {
  max-width: 740px;
  color: var(--text-soft);
  font-size: var(--text-regular);
  line-height: 1.7;
}

.type-scale {
  display: grid;
  gap: var(--space-3);
}

.type-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) minmax(120px, 0.22fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background: rgba(174, 205, 218, 0.024);
}

.type-row__name {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.type-row__sample {
  color: var(--text-main);
  line-height: 1.25;
}

.type-row__meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-align: right;
}

.type-row--body .type-row__sample {
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.6;
}

.type-row--page-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 520;
  line-height: 1.14;
}

.type-row--toolbar-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 520;
  line-height: 1.18;
}

.type-row--brand-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 520;
  line-height: 1.22;
}

.type-row--mood-title .type-row__sample {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.55vw, 2.7rem);
  font-weight: 470;
  line-height: 1.08;
}

.type-row--screen-title .type-row__sample {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.55vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
}

.type-row--section-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 520;
  line-height: 1.2;
}

.type-row--card-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 520;
  line-height: 1.28;
}

.type-row--system-title .type-row__sample {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 540;
  line-height: 1.24;
}

.type-row--list-title .type-row__sample {
  font-size: var(--text-sm);
  font-weight: 540;
  line-height: 1.32;
}

.type-row--regular .type-row__sample {
  color: var(--text-soft);
  font-size: var(--text-regular);
  line-height: 1.62;
}

.type-row--secondary .type-row__sample {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.type-row--control .type-row__sample {
  color: var(--text-main);
  font-size: var(--text-base);
  line-height: 1.35;
}

.type-row--field-label .type-row__sample {
  color: var(--text-soft);
  font-size: var(--text-regular);
  line-height: 1.35;
}

.type-row--hint .type-row__sample {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.type-row--caption .type-row__sample {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.type-row--meta-label .type-row__sample {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.type-row--micro .type-row__sample {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.45;
}

.type-row--hash .type-row__sample {
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: clamp(var(--text-sm), 2vw, var(--text-lg));
  line-height: 1.35;
}

.type-sample__body {
  max-width: 680px;
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.68;
}

.type-sample__mono {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
}

/* Source: /uikit-runtime/css/components/buttons.css */
.button-row,
.chip-row,
.state-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Shared information control: tooltip, details and help-dialog triggers. */
.help-button {
  --help-light: 239, 207, 145;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--help-size, 24px);
  height: var(--help-size, 24px);
  min-width: var(--help-size, 24px);
  min-height: var(--help-size, 24px);
  padding: 0;
  border: 1px solid var(--glass-line-soft);
  border-radius: 50%;
  color: rgb(var(--help-light));
  background: radial-gradient(ellipse 90% 120% at 100% 0%, rgba(var(--help-light), .12), transparent 70%), rgba(7, 16, 24, .4);
  box-shadow: inset 0 1px 0 rgba(var(--help-light), .08);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}
.help-button--cold { --help-light: 174, 205, 218; }
.help-button--reference { --help-size:20px;font:500 11px/1 var(--font-body);font-variant-numeric:tabular-nums;text-decoration:none; }
.help-button::-webkit-details-marker { display: none; }
.help-button > .ritual-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 14px; height: 14px; color: inherit; }
.help-button > .ritual-icon svg { width: 100%; height: 100%; }
.help-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 92% 70% at 16% 0%, rgba(174,205,218,.08), transparent 64%), linear-gradient(180deg, rgba(239,231,214,.09), transparent 44%); opacity: 0; transition: opacity var(--dur-default) var(--ease-default); }
.help-button:hover::before,
.help-button:focus-visible::before { opacity: .58; }
.help-button:hover,
.help-button:focus-visible { border-color: rgba(var(--help-light), .42); box-shadow: inset 0 1px 0 rgba(239,231,214,.13), 0 0 24px rgba(var(--help-light), .1); }
.help-button:focus-visible { outline: 1px solid rgba(var(--help-light), .6); outline-offset: 3px; }
.help-button:active { border-color: rgba(var(--help-light), .3); box-shadow: inset 0 2px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05); }
.help-button:active::before { opacity: .18; }
@media (prefers-reduced-motion: reduce) { .help-button, .help-button::before { transition: none; } }

.btn {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  transition:
    border-color var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default),
    color var(--dur-default) var(--ease-default),
    box-shadow var(--dur-default) var(--ease-default);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 70% at 16% 0%, rgba(174, 205, 218, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(239, 231, 214, 0.09), transparent 44%);
  opacity: 0;
  transition: opacity var(--dur-default) var(--ease-default);
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover::before,
.btn.is-hover::before {
  opacity: 0.58;
}

.btn:active {
  border-color: rgba(214, 168, 95, 0.3);
  box-shadow:
    inset 0 2px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(214, 168, 95, 0.06);
}

.btn.is-pressed {
  border-color: rgba(214, 168, 95, 0.3);
  box-shadow:
    inset 0 2px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(214, 168, 95, 0.06);
}

.btn.is-pressed::before {
  opacity: 0.18;
}

.btn:focus-visible,
.btn.is-focus {
  outline: 0;
  box-shadow:
    0 0 0 1px rgba(239, 207, 145, 0.38),
    0 0 0 5px rgba(214, 168, 95, 0.1),
    inset 0 1px 0 rgba(239, 211, 161, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.24);
}

.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.btn--primary {
  color: var(--text-main);
  border-color: rgba(214, 168, 95, 0.36);
  background:
    radial-gradient(ellipse 96% 120% at 100% -20%, rgba(239, 207, 145, 0.26), transparent 62%),
    radial-gradient(ellipse 80% 110% at -18% 100%, rgba(92, 139, 164, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(89, 65, 36, 0.68), rgba(36, 32, 26, 0.7) 48%, rgba(13, 18, 21, 0.66));
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(214, 168, 95, 0.12),
    inset 0 1px 0 rgba(239, 211, 161, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(126%);
}

.btn--primary:hover,
.btn--primary.is-hover {
  color: #f3eadb;
  border-color: rgba(239, 207, 145, 0.54);
  background:
    radial-gradient(ellipse 96% 120% at 100% -20%, rgba(239, 207, 145, 0.34), transparent 64%),
    radial-gradient(ellipse 80% 110% at -18% 100%, rgba(92, 139, 164, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(104, 75, 40, 0.74), rgba(43, 36, 28, 0.72) 48%, rgba(14, 19, 22, 0.68));
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.32),
    0 0 46px rgba(214, 168, 95, 0.2),
    inset 0 1px 0 rgba(255, 230, 186, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

.btn--primary-cold {
  color: #edf6fb;
  border-color: rgba(174, 205, 218, 0.34);
  background:
    radial-gradient(ellipse 92% 120% at 0% -18%, rgba(126, 173, 204, 0.28), transparent 64%),
    radial-gradient(ellipse 78% 96% at 100% 100%, rgba(214, 168, 95, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(48, 70, 84, 0.68), rgba(20, 33, 43, 0.72) 48%, rgba(8, 16, 23, 0.7));
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(104, 169, 206, 0.16),
    inset 0 1px 0 rgba(222, 239, 246, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(126%);
}

.btn--primary-cold:hover,
.btn--primary-cold.is-hover {
  color: #f5fbff;
  border-color: rgba(203, 229, 239, 0.48);
  background:
    radial-gradient(ellipse 92% 120% at 0% -18%, rgba(142, 194, 226, 0.36), transparent 66%),
    radial-gradient(ellipse 78% 96% at 100% 100%, rgba(214, 168, 95, 0.085), transparent 72%),
    linear-gradient(180deg, rgba(56, 79, 94, 0.74), rgba(22, 37, 48, 0.74) 48%, rgba(8, 17, 24, 0.72));
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.32),
    0 0 46px rgba(104, 169, 206, 0.24),
    inset 0 1px 0 rgba(235, 248, 252, 0.27),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

.btn--secondary {
  color: var(--text-main);
  border-color: rgba(214, 168, 95, 0.25);
  background:
    radial-gradient(ellipse 88% 90% at 100% 0%, rgba(214, 168, 95, 0.12), transparent 68%),
    radial-gradient(ellipse 76% 86% at 0% 100%, rgba(92, 139, 164, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(37, 43, 43, 0.46), rgba(13, 19, 23, 0.48));
  box-shadow:
    inset 0 1px 0 rgba(239, 211, 161, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.btn--secondary:hover,
.btn--secondary.is-hover {
  color: #efe7d8;
  border-color: rgba(214, 168, 95, 0.44);
  background:
    radial-gradient(ellipse 88% 90% at 100% 0%, rgba(214, 168, 95, 0.17), transparent 70%),
    radial-gradient(ellipse 76% 86% at 0% 100%, rgba(104, 169, 206, 0.09), transparent 72%),
    linear-gradient(180deg, rgba(47, 50, 45, 0.52), rgba(15, 22, 26, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(239, 211, 161, 0.14),
    0 0 32px rgba(214, 168, 95, 0.09),
    0 12px 30px rgba(0, 0, 0, 0.2);
}

.btn--amber-muted {
  color: var(--text-main);
  border-color: rgba(214, 168, 95, 0.32);
  background:
    radial-gradient(ellipse 92% 120% at 100% 0%, rgba(214, 168, 95, 0.2), transparent 66%),
    radial-gradient(ellipse 80% 100% at 0% 100%, rgba(104, 169, 206, 0.06), transparent 72%),
    linear-gradient(180deg, rgba(64, 52, 38, 0.48), rgba(17, 21, 22, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(239, 211, 161, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 12px 34px rgba(0, 0, 0, 0.2),
    0 0 26px rgba(214, 168, 95, 0.08);
}

.btn--amber-muted:hover,
.btn--amber-muted.is-hover {
  border-color: rgba(239, 207, 145, 0.48);
  background:
    radial-gradient(ellipse 92% 120% at 100% 0%, rgba(239, 207, 145, 0.26), transparent 68%),
    radial-gradient(ellipse 80% 100% at 0% 100%, rgba(104, 169, 206, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(76, 58, 39, 0.54), rgba(18, 22, 22, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 186, 0.19),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 34px rgba(214, 168, 95, 0.12);
}

.btn--cold {
  color: var(--text-soft);
  border-color: rgba(174, 205, 218, 0.2);
  background:
    radial-gradient(ellipse 90% 110% at 0% 0%, rgba(104, 169, 206, 0.14), transparent 68%),
    radial-gradient(ellipse 90% 100% at 100% 100%, rgba(214, 168, 95, 0.055), transparent 74%),
    linear-gradient(180deg, rgba(35, 50, 58, 0.5), rgba(8, 16, 22, 0.56));
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 12px 32px rgba(0, 0, 0, 0.18),
    0 0 26px rgba(104, 169, 206, 0.07);
}

.btn--cold:hover,
.btn--cold.is-hover {
  color: var(--text-main);
  border-color: rgba(174, 205, 218, 0.32);
  background:
    radial-gradient(ellipse 90% 110% at 0% 0%, rgba(104, 169, 206, 0.2), transparent 70%),
    radial-gradient(ellipse 90% 100% at 100% 100%, rgba(214, 168, 95, 0.07), transparent 74%),
    linear-gradient(180deg, rgba(42, 58, 64, 0.56), rgba(8, 17, 23, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 14px 38px rgba(0, 0, 0, 0.2),
    0 0 36px rgba(104, 169, 206, 0.11);
}

.btn--ghost {
  color: var(--text-soft);
  border-color: rgba(174, 205, 218, 0.12);
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, rgba(104, 169, 206, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.045), rgba(174, 205, 218, 0.012)),
    rgba(7, 16, 24, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(174, 205, 218, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.14);
}

.btn--ghost:hover,
.btn--ghost.is-hover {
  color: var(--text-main);
  border-color: rgba(174, 205, 218, 0.22);
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, rgba(104, 169, 206, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.07), rgba(174, 205, 218, 0.018)),
    rgba(7, 16, 24, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(174, 205, 218, 0.13),
    0 0 30px rgba(104, 169, 206, 0.07),
    0 10px 26px rgba(0, 0, 0, 0.16);
}

.btn--quiet {
  min-height: 44px;
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}

.btn--quiet:hover,
.btn--quiet.is-hover {
  color: var(--text-soft);
  border-color: var(--glass-line-soft);
  background:
    linear-gradient(180deg, rgba(174, 205, 218, 0.04), rgba(174, 205, 218, 0.012)),
    rgba(174, 205, 218, 0.025);
  box-shadow: inset 0 1px 0 rgba(174, 205, 218, 0.08);
}

.btn--danger {
  color: #f6ded8;
  border-color: rgba(226, 132, 118, 0.62);
  background:
    radial-gradient(ellipse 90% 100% at 100% 0%, rgba(226, 132, 118, 0.25), transparent 66%),
    radial-gradient(ellipse 72% 90% at 0% 100%, rgba(210, 112, 98, 0.1), transparent 72%),
    radial-gradient(ellipse 80% 100% at 0% 100%, rgba(104, 169, 206, 0.04), transparent 72%),
    rgba(181, 74, 64, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 211, 204, 0.14),
    0 0 34px rgba(210, 112, 98, 0.16),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.btn--danger:hover,
.btn--danger.is-hover {
  color: #fff0ec;
  border-color: rgba(236, 158, 146, 0.78);
  background:
    radial-gradient(ellipse 90% 100% at 100% 0%, rgba(236, 158, 146, 0.32), transparent 66%),
    radial-gradient(ellipse 72% 90% at 0% 100%, rgba(210, 112, 98, 0.14), transparent 72%),
    radial-gradient(ellipse 80% 100% at 0% 100%, rgba(104, 169, 206, 0.055), transparent 72%),
    rgba(181, 74, 64, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 211, 204, 0.18),
    0 0 46px rgba(210, 112, 98, 0.26),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.btn--large {
  min-height: 56px;
  padding: 0 var(--space-6);
  border-radius: calc(var(--radius-md) + 2px);
}

.btn--small {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-regular);
}

.btn--wide {
  width: 100%;
}

.btn--icon {
  width: 48px;
  min-width: 48px;
  padding: 0;
}

.btn--icon.btn--small {
  width: 40px;
  min-width: 40px;
}

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.72;
  animation: spin 900ms linear infinite;
}

.btn.is-loading {
  pointer-events: none;
  color: var(--text-main);
  border-color: rgba(174, 205, 218, 0.18);
  background:
    radial-gradient(ellipse 90% 100% at 100% 0%, rgba(214, 168, 95, 0.09), transparent 68%),
    radial-gradient(ellipse 86% 100% at 0% 100%, rgba(104, 169, 206, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(35, 45, 50, 0.5), rgba(10, 17, 22, 0.52));
}

.icon-mark {
  width: 19px;
  height: 19px;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.15em;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--icon .icon-mark {
  width: 22px;
  height: 22px;
  stroke-width: 2.05;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(174, 205, 218, 0.04), transparent),
    rgba(7, 11, 16, 0.32);
  box-shadow: inset 0 1px 0 rgba(174, 205, 218, 0.08);
}

.segmented-control .btn {
  min-height: 40px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}

.segmented-control .btn.is-active {
  color: var(--text-main);
  border-color: rgba(174, 205, 218, 0.16);
  background:
    radial-gradient(ellipse 82% 100% at 0% 0%, rgba(104, 169, 206, 0.11), transparent 70%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.12), rgba(174, 205, 218, 0.035));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(174, 205, 218, 0.14);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.slider-control {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(174, 205, 218, 0.14);
  border-radius: 50%;
  color: var(--text-soft);
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.1), transparent 66%),
    rgba(7, 16, 24, 0.58);
  box-shadow: inset 0 1px 0 rgba(239, 231, 214, 0.1), 0 10px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  transition: color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}
.slider-control:hover,
.slider-control:focus-visible {
  outline: 0;
  color: var(--accent-amber-light);
  border-color: rgba(239, 207, 145, 0.42);
  background:
    radial-gradient(circle at 50% 42%, rgba(239, 207, 145, 0.18), transparent 64%),
    rgba(8, 17, 25, 0.72);
  box-shadow: 0 0 24px rgba(214, 168, 95, 0.18), inset 0 1px 0 rgba(239, 231, 214, 0.14);
}
.slider-control svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Source: /uikit-runtime/css/components/interaction-sparks.css */
.interaction-spark-field {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.interaction-spark {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 50%;
  background: var(--spark-color, rgba(239, 207, 145, 0.96));
  box-shadow:
    0 0 5px var(--spark-color, rgba(239, 207, 145, 0.9)),
    0 0 14px var(--spark-glow, rgba(214, 168, 95, 0.55));
  animation: interaction-spark-burst 620ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes interaction-spark-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .interaction-spark-field { display: none; }
}

/* Source: /uikit-runtime/css/components/tooltip.css */
.tooltip-anchor {
  position: relative;
}

.tooltip-bubble {
  position: absolute;
  z-index: 9000;
  left: 50%;
  bottom: calc(100% + var(--space-3));
  width: min(260px, calc(100vw - var(--space-8)));
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.14);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background:
    radial-gradient(ellipse 100% 120% at 100% 0%, rgba(214, 168, 95, 0.08), transparent 70%),
    rgba(12, 20, 27, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity var(--dur-default) var(--ease-default),
    transform var(--dur-default) var(--ease-default);
}

.tooltip-bubble::after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(174, 205, 218, 0.14);
  border-bottom: 1px solid rgba(174, 205, 218, 0.14);
  background: rgba(12, 20, 27, 0.96);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.tooltip-bubble strong {
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: 540;
}

.tooltip-bubble span {
  white-space: pre-line;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.tooltip-anchor:hover .tooltip-bubble,
.tooltip-anchor:focus-within .tooltip-bubble,
.tooltip-anchor.is-visible .tooltip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tooltip-anchor--right .tooltip-bubble {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--space-3));
  transform: translateY(-50%) translateX(-4px);
}

.tooltip-anchor--right:hover .tooltip-bubble,
.tooltip-anchor--right:focus-within .tooltip-bubble,
.tooltip-anchor--right.is-visible .tooltip-bubble {
  transform: translateY(-50%) translateX(0);
}

.tooltip-anchor--right .tooltip-bubble::after {
  top: 50%;
  bottom: auto;
  left: -6px;
  border: 0;
  border-bottom: 1px solid rgba(174, 205, 218, 0.14);
  border-left: 1px solid rgba(174, 205, 218, 0.14);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 760px) {
  .tooltip-anchor--right .tooltip-bubble {
    top: calc(100% + var(--space-3));
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-4px);
  }

  .tooltip-anchor--right:hover .tooltip-bubble,
  .tooltip-anchor--right:focus-within .tooltip-bubble,
  .tooltip-anchor--right.is-visible .tooltip-bubble {
    transform: translateY(0);
  }

  .tooltip-anchor--right .tooltip-bubble::after {
    top: -6px;
    right: 16px;
    bottom: auto;
    left: auto;
    border: 0;
    border-top: 1px solid rgba(174, 205, 218, 0.14);
    border-left: 1px solid rgba(174, 205, 218, 0.14);
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-bubble { transition: none; }
}
.tooltip-bubble.floating-tooltip { position:fixed; z-index:11000; box-sizing:border-box; bottom:auto; margin:0; transform:none; }
.tooltip-bubble.floating-tooltip.is-visible { opacity:1; }
.tooltip-bubble.floating-tooltip[hidden] { display:none; }
.tooltip-bubble.floating-tooltip::after { left:var(--tooltip-arrow,50%); }
.tooltip-bubble.floating-tooltip.is-below::after { top:-6px; bottom:auto; transform:translateX(-50%) rotate(225deg); }

/* Source: /uikit-runtime/css/components/card-surface.css */
:root {
  --qantaro-card-radius: var(--arcana-radius, 8px);
  --qantaro-card-shadow: 0 18px 32px rgba(0, 0, 0, 0.5);
}

.qantaro-card-surface {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--qantaro-card-radius);
  isolation: isolate;
  transform-style: preserve-3d;
  -webkit-user-drag: none;
}

.qantaro-card-surface > img,
.qantaro-card-surface > picture,
.qantaro-card-surface > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
}

.qantaro-card-surface--tilt {
  --qantaro-surface-tilt-x: 0deg;
  --qantaro-surface-tilt-y: 0deg;
  box-shadow: var(--qantaro-card-shadow);
  transform: perspective(700px) rotateX(var(--qantaro-surface-tilt-x)) rotateY(var(--qantaro-surface-tilt-y));
  transform-origin: center;
  transition: transform 180ms ease-out, box-shadow 240ms ease, filter 220ms ease, outline-color 220ms ease;
}

.qantaro-card-surface[data-card-render-profile="carousel"] {
  --qantaro-card-shadow:
    12px 22px 28px -10px rgba(0, 0, 0, 0.88),
    0 14px 22px -10px rgba(0, 0, 0, 0.76);
  contain: layout style;
  backface-visibility: hidden;
  transform:
    perspective(700px)
    rotateX(var(--qantaro-surface-tilt-x))
    rotateY(calc(var(--deck-perspective-tilt, 0deg) + var(--qantaro-surface-tilt-y)));
}

@media (prefers-reduced-motion: reduce) {
  .qantaro-card-surface--tilt { transition: none; transform: none; }
}

/* Source: /uikit-runtime/css/components/profile-menu.css */
.account-menu {
  position: relative;
  flex: 0 0 auto;
}

.account-menu__trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 5px;
  border: 1px solid rgba(174, 205, 218, .13);
  border-radius: var(--radius-pill);
  color: var(--text-main);
  background: linear-gradient(135deg, rgba(27, 42, 52, .72), rgba(8, 14, 20, .86));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-default), background var(--dur-fast) var(--ease-default);
}

.account-menu__trigger:hover,
.account-menu__trigger:focus-visible,
.account-menu.is-open .account-menu__trigger {
  border-color: rgba(239, 207, 145, .38);
  background: linear-gradient(135deg, rgba(44, 48, 45, .82), rgba(12, 18, 23, .92));
}

.account-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(239, 207, 145, .34);
  border-radius: 50%;
  background: #07101a;
  box-shadow: 0 0 18px rgba(214, 168, 95, .1);
}

.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar--large { width: 104px; height: 104px; border-width: 2px; }
.account-menu__label { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.account-menu__chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--dur-fast) var(--ease-default); }
.account-menu.is-open .account-menu__chevron { transform: rotate(180deg); }

.account-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(310px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(174, 205, 218, .16);
  border-radius: var(--radius-md);
  background: rgba(7, 13, 19, .97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(22px);
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transform-origin: top right;
  transition: opacity 180ms var(--ease-default), transform 220ms var(--ease-default), visibility 0s;
}

.account-menu:not(.is-open) .account-menu__panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px) scale(.985);
  transition-delay: 0s, 0s, 220ms;
}
.account-menu__identity { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--glass-line-soft); }
.account-menu__identity .account-avatar { width: 42px; height: 42px; }
.account-menu__identity strong, .account-menu__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__identity strong { font-size: .9rem; }
.account-menu__identity small { color: var(--text-muted); font-size: .72rem; }
.account-menu__items { display: grid; gap: 3px; padding-top: 7px; }
.account-menu__item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-soft);
  background: transparent;
  font: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
}
.account-menu__item:hover, .account-menu__item:focus-visible { color: var(--accent-amber-light); border-color: rgba(214, 168, 95, .16); background: rgba(214, 168, 95, .055); }
.account-menu__item .ritual-icon { color: var(--accent-amber); }
.account-menu .ritual-icon,
.profile-avatar-editor .ritual-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; }
.account-menu .ritual-icon svg,
.profile-avatar-editor .ritual-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.account-menu__item--admin { color: var(--accent-cyan-soft, #9dcbd6); }
.account-menu__logout { margin: 0; padding-top: 5px; border-top: 1px solid var(--glass-line-soft); }

@media (max-width: 760px) {
  .account-menu__trigger { width: 44px; padding: 4px; }
  .account-menu__label, .account-menu__chevron { display: none; }
}

/* Source: /uikit-runtime/css/components/page-context-nav.css */
.page-context-layout {
  grid-column: 1 / -1;
  width: var(--product-content-width);
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto var(--space-8);
}

.product-section > .page-context-layout {
  width: 100%;
  margin-inline: 0;
}

.page-context-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
}

.page-context-nav__back {
  flex: 0 0 auto;
  color: var(--text-soft);
  transition: color var(--dur-fast) var(--ease-default), border-color var(--dur-fast) var(--ease-default), background var(--dur-fast) var(--ease-default), box-shadow var(--dur-fast) var(--ease-default);
}

.page-context-nav__back:hover {
  color: var(--text-main);
  border-color: rgba(214, 168, 95, 0.34);
  background: rgba(214, 168, 95, 0.07);
  box-shadow: 0 0 18px rgba(214, 168, 95, 0.08);
}

.page-context-nav__back .icon-mark {
  color: var(--accent-amber-light);
}

.page-context-nav__breadcrumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.page-context-nav__breadcrumbs li {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.page-context-nav__breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: rgba(239, 207, 145, 0.42);
}

.page-context-nav__breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-default);
}

.page-context-nav__breadcrumbs a:hover {
  color: var(--text-main);
}

.page-context-nav__breadcrumbs [aria-current="page"] {
  max-width: min(44vw, 420px);
  overflow: hidden;
  color: var(--accent-amber-light);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .page-context-layout {
    width: calc(100% - 32px);
    margin-bottom: var(--space-6);
  }

  .product-section > .page-context-layout {
    width: 100%;
  }

  .page-context-nav {
    align-items: center;
    gap: var(--space-3);
  }

  .page-context-nav__back {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .page-context-nav__back > span:not(.icon-mark) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .page-context-nav__breadcrumbs li:nth-child(2):not(:last-child) {
    display: none;
  }

  .page-context-nav__breadcrumbs [aria-current="page"] {
    max-width: calc(100vw - 145px);
  }
}

/* Source: /uikit-runtime/css/components/composition.css */
.section-band {
  width: 100%;
  border-block: 1px solid var(--glass-line-soft);
  background: rgba(9, 16, 22, 0.58);
}

.section-band__inner,
.content-section {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
}

.action-banner {
  --banner-x-far: 0px;
  --banner-y-far: 0px;
  --banner-x-near: 0px;
  --banner-y-near: 0px;
  --banner-tilt-x: 0deg;
  --banner-tilt-y: 0deg;
  --banner-left-bloom: 0deg;
  --banner-right-bloom: 0deg;
  --banner-shadow-x: 0px;
  --banner-shadow-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 32%);
  align-items: center;
  gap: clamp(36px, 6vw, 92px);
  min-height: 300px;
  overflow: hidden;
  padding: clamp(40px, 5vw, 68px) clamp(34px, 6vw, 84px);
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(105deg, rgba(15, 27, 35, 0.98) 0%, rgba(9, 17, 23, 0.98) 55%, rgba(25, 22, 17, 0.98) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.055), inset 0 -1px rgba(214, 168, 95, 0.15);
}

.action-banner::before,
.action-banner::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.action-banner::before {
  inset: 0;
  background: radial-gradient(circle at 82% 46%, rgba(214, 168, 95, 0.2), transparent 32%), linear-gradient(115deg, transparent 34%, rgba(214, 168, 95, 0.035) 66%, rgba(214, 168, 95, 0.09));
}

.action-banner::after {
  inset: 0;
  opacity: 0.54;
  background-image: radial-gradient(circle at 7% 24%, rgba(239, 207, 145, 0.78) 0 1px, transparent 1.6px), radial-gradient(circle at 44% 78%, rgba(174, 205, 218, 0.62) 0 1px, transparent 1.6px), radial-gradient(circle at 79% 16%, rgba(239, 207, 145, 0.7) 0 1px, transparent 1.6px), radial-gradient(circle at 94% 72%, rgba(174, 205, 218, 0.45) 0 1px, transparent 1.6px);
}

.action-banner__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.ambient-sparks {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}

.ambient-sparks canvas { display: block; width: 100%; height: 100%; }
.ambient-sparks--static i { animation: none !important; opacity: .6; will-change: auto !important; }

.ambient-sparks i {
  position: absolute;
  top: var(--spark-y);
  left: var(--spark-x);
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 50%;
  opacity: 0;
  background: rgba(239, 207, 145, 0.94);
  box-shadow: 0 0 5px rgba(239, 207, 145, 0.92), 0 0 14px rgba(214, 168, 95, 0.48);
  animation: action-banner-spark var(--spark-duration) ease-in-out var(--spark-delay) infinite;
  animation-play-state: paused;
  backface-visibility: hidden;
}

.ambient-sparks i:nth-child(4n) {
  background: rgba(183, 222, 231, 0.9);
  box-shadow: 0 0 6px rgba(183, 222, 231, 0.82), 0 0 16px rgba(83, 177, 192, 0.34);
}

.is-in-view > .ambient-sparks i {
  animation-play-state: running;
  will-change: transform, opacity;
}

.ambient-sparks[data-motion-tier="economy"] i {
  animation-duration: calc(var(--spark-duration) * 1.65);
}

.ambient-sparks[data-motion-tier="off"] {
  display: none;
}

.cinematic-card-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
  min-height: clamp(390px, 42vw, 470px);
  overflow: hidden;
  padding: clamp(34px, 4vw, 48px);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 76% 44%, rgba(214, 168, 95, 0.18), transparent 31%),
    radial-gradient(circle at 12% 22%, rgba(88, 155, 184, 0.13), transparent 36%),
    linear-gradient(105deg, rgba(10, 24, 34, 0.96), rgba(6, 13, 19, 0.98) 54%, rgba(27, 22, 17, 0.96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px rgba(214, 168, 95, 0.12);
}

.cinematic-card-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 21, 31, 0.38), transparent 48%, rgba(92, 60, 29, 0.08));
  content: "";
}

.cinematic-card-hero__content,
.cinematic-card-hero__visual,
.cinematic-card-hero > .hero__content {
  position: relative;
  z-index: 2;
}

.cinematic-card-hero__content {
  display: grid;
  gap: 14px;
  max-width: 670px;
}

.cinematic-card-hero__content h3 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(1.65rem, 2.5vw, 2.1rem);
  line-height: 1.13;
  text-wrap: balance;
}

.cinematic-card-hero__content > p {
  max-width: 610px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.62;
}

.cinematic-card-hero__content .btn {
  width: max-content;
  margin-top: 8px;
}

.cinematic-card-hero__visual {
  min-height: 300px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 12px;
  padding-block: 4px;
  perspective: 1300px;
}

.cinematic-card-hero__visual .tarot-live-card {
  grid-row: 1;
  width: clamp(205px, 22vw, 250px);
}

.cinematic-card-hero__hint {
  position: relative;
  grid-row: 2;
  z-index: 5;
  margin: 0;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.75rem;
}

.cinematic-card-hero__hint span {
  color: var(--accent-amber-light);
}

.action-banner__content h2,
.action-banner__content h3 {
  max-width: 720px;
  margin: 9px 0 14px;
  text-wrap: balance;
}

.action-banner__content > p:last-of-type {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--text-soft);
}

.action-banner__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 24px 0 0;
  padding: 0;
  color: var(--text-soft);
  list-style: none;
}

.action-banner__facts li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.action-banner__facts li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-amber-light);
  box-shadow: 0 0 12px rgba(239, 196, 118, 0.72);
  content: "";
}

.action-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 28px;
}

.action-banner__visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 220px;
  perspective: 900px;
}

.action-banner__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(112px, 10vw, 154px);
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  transform-style: preserve-3d;
  scale: 1;
  will-change: transform, box-shadow;
  transition: scale 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
  transform: translate(-50%, -50%);
}

.action-banner__card:nth-child(1) {
  z-index: 1;
  box-shadow: calc(7px + var(--banner-shadow-x)) calc(21px + var(--banner-shadow-y)) 38px rgba(0, 0, 0, 0.48), 0 0 26px rgba(214, 168, 95, 0.06);
  transform: translate(calc(-50% - 54px), calc(-50% + 11px)) translate3d(var(--banner-x-far), var(--banner-y-far), 0) rotate(calc(-9deg + var(--banner-left-bloom))) rotateX(var(--banner-tilt-x)) rotateY(var(--banner-tilt-y));
}

.action-banner__card:nth-child(2) {
  z-index: 3;
  box-shadow: calc(0px + var(--banner-shadow-x)) calc(27px + var(--banner-shadow-y)) 45px rgba(0, 0, 0, 0.56), 0 0 34px rgba(214, 168, 95, 0.11);
  transform: translate(-50%, calc(-50% - 6px)) translate3d(var(--banner-x-near), var(--banner-y-near), 18px) rotateX(var(--banner-tilt-x)) rotateY(var(--banner-tilt-y));
}

.action-banner__card:nth-child(3) {
  z-index: 2;
  box-shadow: calc(-7px + var(--banner-shadow-x)) calc(21px + var(--banner-shadow-y)) 38px rgba(0, 0, 0, 0.48), 0 0 26px rgba(214, 168, 95, 0.06);
  transform: translate(calc(-50% + 54px), calc(-50% + 11px)) translate3d(var(--banner-x-far), var(--banner-y-far), 0) rotate(calc(9deg + var(--banner-right-bloom))) rotateX(var(--banner-tilt-x)) rotateY(var(--banner-tilt-y));
}

.action-banner.is-interacting .action-banner__card:nth-child(2) {
  scale: 1.018;
  filter: saturate(1.06) brightness(1.025);
}

.action-banner--compact {
  min-height: 264px;
  padding-block: clamp(34px, 4vw, 52px);
}

.action-banner--compact .action-banner__card {
  width: clamp(100px, 8vw, 132px);
}

.empty-state.action-banner {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 0;
  padding-block: 54px;
  text-align: center;
}

.empty-state.action-banner .action-banner__actions {
  justify-content: center;
  margin-top: 4px;
}

.boundary-owner + .boundary-owner {
  border-top: 0;
}

@keyframes action-banner-spark {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.25);
  }
  16% {
    opacity: 0.28;
  }
  42% {
    opacity: 0.95;
    transform: translate3d(0, -8px, 0) scale(1);
  }
  68% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--spark-drift-x), var(--spark-drift-y), 0) scale(0.35);
  }
}

@media (max-width: 760px) {
  .section-band__inner,
  .content-section {
    width: min(100% - 32px, 1320px);
  }

  .action-banner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 22px 28px;
  }

  .action-banner::before {
    background: radial-gradient(circle at 70% 72%, rgba(214, 168, 95, 0.2), transparent 44%), linear-gradient(155deg, transparent 25%, rgba(214, 168, 95, 0.04) 68%, rgba(214, 168, 95, 0.075));
  }

  .action-banner__visual {
    min-height: 180px;
  }

  .action-banner__card,
  .action-banner--compact .action-banner__card {
    width: 104px;
  }

  .action-banner__actions .btn {
    width: 100%;
  }

  .action-banner__facts {
    display: grid;
    gap: 9px;
  }

  .cinematic-card-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding: 30px 22px 26px;
  }

  .cinematic-card-hero__visual {
    min-height: 310px;
  }

  .cinematic-card-hero__content .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-sparks i {
    display: none;
  }

  .action-banner__card {
    transition: none;
  }
}

.motion-page-hidden *, .motion-page-hidden *::before, .motion-page-hidden *::after { animation-play-state: paused !important; }

/* Source: /uikit-runtime/css/components/forms.css */
.field-stack {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.field--stable {
  align-content: start;
}

.field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.field label,
.field__label {
  color: var(--text-soft);
  font-size: var(--text-regular);
  font-weight: 520;
}

.field__optional,
.field__counter {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
}

.field__control,
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: none;
}

.select-wrap > .select-wrap__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--space-4);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font: inherit;
  font-size: var(--text-regular);
  background:
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.06), transparent 66%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.045), rgba(174, 205, 218, 0.012)),
    var(--surface-field);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.12);
  outline: 0;
  transition:
    border-color var(--dur-default) var(--ease-default),
    box-shadow var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default),
    color var(--dur-default) var(--ease-default);
}

.field-shell {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  color: var(--text-main);
  background:
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.06), transparent 66%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.045), rgba(174, 205, 218, 0.012)),
    var(--surface-field);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.12);
  transition:
    border-color var(--dur-default) var(--ease-default),
    box-shadow var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default);
}

.field-shell--large {
  min-height: 56px;
}

.field-shell--compact {
  min-height: 44px;
}

.field-shell__icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-shell__addon {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.field-shell__value {
  min-width: 0;
  color: var(--text-main);
  font-size: var(--text-regular);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-shell .input,
.field-shell .select {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  caret-color: var(--accent-amber-light);
  appearance: none;
  background: transparent;
  box-shadow: none;
  outline: 0;
  line-height: 1.3;
}

.field-shell .input::selection {
  color: var(--text-main);
  background: rgba(174, 205, 218, 0.16);
}

.field-shell .input:focus,
.field-shell .select:focus {
  box-shadow: none;
}

.field-shell:focus-within,
.field.is-focus .field-shell {
  border-color: rgba(214, 168, 95, 0.56);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(214, 168, 95, 0.09), transparent 66%),
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.08), transparent 66%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.055), rgba(174, 205, 218, 0.016)),
    var(--surface-field);
  box-shadow:
    0 0 0 4px rgba(214, 168, 95, 0.09),
    inset 0 1px 0 rgba(239, 211, 161, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

.field--cold .field-shell:focus-within,
.field--cold.is-focus .field-shell {
  border-color: rgba(174, 205, 218, 0.42);
  box-shadow:
    0 0 0 4px rgba(104, 169, 206, 0.1),
    inset 0 1px 0 rgba(222, 239, 246, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

.field.is-error .field-shell {
  border-color: rgba(181, 107, 98, 0.62);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(181, 107, 98, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(181, 107, 98, 0.05), rgba(174, 205, 218, 0.012)),
    var(--surface-field);
  box-shadow:
    0 0 0 4px rgba(181, 107, 98, 0.1),
    inset 0 1px 0 rgba(240, 213, 207, 0.1);
}

.select {
  appearance: none;
  padding-right: var(--space-10);
  color-scheme: dark;
}

.input--compact {
  min-height: 44px;
  font-size: var(--text-regular);
}

.input--large {
  min-height: 56px;
  font-size: var(--text-base);
}

.input[type="date"],
.input[type="time"] {
  color-scheme: dark;
}

.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.textarea {
  min-height: 136px;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  resize: vertical;
  line-height: 1.58;
}

.textarea--compact {
  min-height: 104px;
}

.textarea--tall {
  min-height: 184px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
}

.input:focus,
.textarea:focus,
.select:focus,
.field.is-focus .input,
.field.is-focus .textarea,
.field.is-focus .select {
  border-color: rgba(214, 168, 95, 0.56);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(214, 168, 95, 0.09), transparent 66%),
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.08), transparent 66%),
    linear-gradient(180deg, rgba(174, 205, 218, 0.055), rgba(174, 205, 218, 0.016)),
    var(--surface-field);
  box-shadow:
    0 0 0 4px rgba(214, 168, 95, 0.09),
    inset 0 1px 0 rgba(239, 211, 161, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

.field--cold.is-focus .input,
.field--cold.is-focus .textarea,
.field--cold.is-focus .select,
.field--cold .input:focus,
.field--cold .textarea:focus,
.field--cold .select:focus {
  border-color: rgba(174, 205, 218, 0.42);
  box-shadow:
    0 0 0 4px rgba(104, 169, 206, 0.1),
    inset 0 1px 0 rgba(222, 239, 246, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

.field.is-filled .input,
.field.is-filled .textarea,
.field.is-filled .select {
  border-color: rgba(174, 205, 218, 0.22);
  color: var(--text-main);
}

.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select {
  border-color: rgba(181, 107, 98, 0.52);
  box-shadow:
    0 0 0 4px rgba(181, 107, 98, 0.09),
    inset 0 1px 0 rgba(240, 213, 207, 0.08);
}

.field.is-success .input,
.field.is-success .textarea,
.field.is-success .select {
  border-color: rgba(134, 169, 149, 0.44);
  box-shadow:
    0 0 0 4px rgba(134, 169, 149, 0.08),
    inset 0 1px 0 rgba(214, 229, 237, 0.08);
}

.field.is-disabled {
  opacity: 0.56;
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  border-color: rgba(218, 231, 236, 0.08);
  background: rgba(174, 205, 218, 0.018);
}

.field-shell .input,
.field-shell .select,
.field-shell .input:focus,
.field-shell .select:focus,
.field.is-error .field-shell .input,
.field.is-error .field-shell .select,
.field.is-success .field-shell .input,
.field.is-success .field-shell .select {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.field__hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.field__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.field__message {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.field.is-error .field__message,
.field__message--danger {
  color: #e0a096;
  font-weight: 520;
}

.field.is-success .field__message,
.field__message--success {
  color: var(--state-success);
}

.field-note {
  padding: var(--space-4);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  font-size: var(--text-regular);
  line-height: 1.58;
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.075), transparent 70%),
    rgba(7, 16, 24, 0.28);
}

.custom-select {
  position: relative;
  display: grid;
}

.custom-select__button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  background:
    radial-gradient(ellipse 88% 120% at 100% 0%, rgba(214, 168, 95, 0.065), transparent 68%),
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.07), transparent 66%),
    var(--surface-field);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.12);
  transition:
    border-color var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default),
    box-shadow var(--dur-default) var(--ease-default);
}

.custom-select__button:hover,
.custom-select__button:focus-visible {
  outline: 0;
  border-color: rgba(174, 205, 218, 0.28);
  background:
    radial-gradient(ellipse 88% 120% at 100% 0%, rgba(214, 168, 95, 0.08), transparent 68%),
    radial-gradient(ellipse 88% 120% at 0% 0%, rgba(104, 169, 206, 0.095), transparent 66%),
    var(--surface-field);
  box-shadow:
    0 0 0 4px rgba(104, 169, 206, 0.075),
    inset 0 1px 0 rgba(214, 229, 237, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

.custom-select__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-default) var(--ease-default);
}

.custom-select__button > .ritual-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.custom-select.is-open .custom-select__button {
  border-color: rgba(214, 168, 95, 0.48);
  box-shadow:
    0 0 0 4px rgba(214, 168, 95, 0.08),
    inset 0 1px 0 rgba(239, 211, 161, 0.1);
}

.custom-select.is-open .custom-select__button svg {
  transform: rotate(180deg);
}

.custom-select__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  display: none;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(218, 231, 236, 0.12);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 90% 130% at 100% 0%, rgba(214, 168, 95, 0.075), transparent 70%),
    rgba(10, 18, 24, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.custom-select.is-open .custom-select__menu {
  display: grid;
}

.custom-select__option {
  min-height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-regular);
  text-align: left;
  background: transparent;
  transition:
    color var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default);
}

.custom-select__option:hover,
.custom-select__option:focus-visible {
  color: var(--text-main);
  outline: 0;
  background: rgba(174, 205, 218, 0.055);
}

.custom-select__option.is-selected {
  color: var(--text-main);
  background:
    linear-gradient(90deg, rgba(214, 168, 95, 0.13), rgba(174, 205, 218, 0.035)),
    rgba(174, 205, 218, 0.025);
}


/* Source: /uikit-runtime/css/components/familiar-backdrop.css */
.familiar-backdrop-kit {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.familiar-backdrop-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: var(--space-4);
  align-items: start;
}

.familiar-magic-stage {
  --familiar-bloom-cold: rgba(84, 164, 196, .2);
  --familiar-bloom-warm: rgba(214, 168, 95, .14);
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: clamp(400px, 42vw, 520px);
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(142, 190, 208, .17);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(8, 26, 38, .98), rgba(6, 14, 23, .99) 55%, rgba(22, 18, 24, .98));
  box-shadow: inset 0 1px rgba(229, 242, 247, .045), 0 24px 64px rgba(0, 0, 0, .22);
}

.familiar-magic-stage[data-familiar-palette="amber"] {
  --familiar-bloom-cold: rgba(108, 143, 163, .11);
  --familiar-bloom-warm: rgba(224, 167, 78, .17);
}

.familiar-magic-stage[data-familiar-palette="ice"] {
  --familiar-bloom-cold: rgba(92, 184, 221, .2);
  --familiar-bloom-warm: rgba(177, 211, 224, .07);
}

.familiar-backdrop-lab > .familiar-magic-stage {
  max-width: 460px;
  justify-self: center;
}

.familiar-magic-stage::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.familiar-magic-stage::after {
  top: calc(var(--familiar-shadow-y, 90%) - 7px);
  left: var(--familiar-shadow-left, 30%);
  width: var(--familiar-shadow-width, 40%);
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 42%, transparent 76%);
  filter: blur(5px);
}

.familiar-magic-stage__ornament {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: block;
  width: min(88%, 560px);
  height: min(94%, 500px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.familiar-magic-stage__ornament::before {
  position: absolute;
  z-index: 0;
  inset: 8% 7% 5%;
  border-radius: 46%;
  background:
    radial-gradient(ellipse 58% 64% at 48% 46%, var(--familiar-bloom-cold), transparent 72%),
    radial-gradient(ellipse 54% 42% at 56% 76%, var(--familiar-bloom-warm), transparent 76%);
  filter: blur(18px);
  content: "";
  pointer-events: none;
}

.familiar-magic-stage__ornament canvas,
.familiar-magic-stage__twinkles {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.familiar-magic-stage__twinkles {
  z-index: 2;
}

.familiar-magic-stage__twinkles i {
  position: absolute;
  top: var(--twinkle-y);
  left: var(--twinkle-x);
  width: var(--twinkle-size);
  aspect-ratio: 1;
  opacity: .34;
  transform: translate(-50%, -50%) scale(.76);
  background: transparent;
  filter: drop-shadow(0 0 4px rgba(244, 217, 155, .44)) drop-shadow(0 0 10px rgba(119, 195, 225, .12));
}

.familiar-magic-stage__twinkles i::before,
.familiar-magic-stage__twinkles i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  content: "";
}

.familiar-magic-stage__twinkles i::before {
  clip-path: polygon(50% 0, 57% 39%, 76% 16%, 63% 42%, 100% 50%, 63% 58%, 76% 84%, 57% 61%, 50% 100%, 43% 61%, 24% 84%, 37% 58%, 0 50%, 37% 42%, 24% 16%, 43% 39%);
  background: linear-gradient(145deg, #fffdf5, #f0c875 58%, #a8def0);
}

.familiar-magic-stage__twinkles i::after {
  width: 250%;
  height: 250%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 241, 207, .72), transparent) center / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(223, 243, 250, .62), transparent) center / 1px 72% no-repeat;
}

.familiar-magic-stage__ornament.has-familiar-twinkle .familiar-magic-stage__twinkles i {
  animation: familiar-star-twinkle var(--twinkle-duration) var(--twinkle-delay) ease-in-out infinite;
  animation-play-state: paused;
}

.familiar-magic-stage.is-familiar-visible .familiar-magic-stage__ornament.has-familiar-twinkle .familiar-magic-stage__twinkles i {
  animation-play-state: running;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.familiar-magic-stage[data-familiar-performance="economy"] .familiar-magic-stage__twinkles i {
  animation-duration: calc(var(--twinkle-duration) * 1.8);
}

.familiar-magic-stage__subject {
  position: absolute;
  z-index: 3;
  top: 16px;
  bottom: 16px;
  left: 50%;
  display: block;
  width: auto;
  height: calc(100% - 32px);
  max-width: 76%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .48)) drop-shadow(0 0 20px rgba(126, 190, 214, .07));
  pointer-events: none;
}

.familiar-magic-stage__caption {
  position: absolute;
  z-index: 4;
  left: var(--space-5);
  bottom: var(--space-5);
  display: grid;
  gap: 4px;
  max-width: 240px;
  padding: 11px 14px;
  border: 1px solid rgba(145, 201, 221, .16);
  border-radius: 12px;
  color: var(--text-muted);
  background: rgba(5, 15, 22, .62);
  box-shadow: inset 0 1px rgba(231, 245, 249, .035);
  backdrop-filter: blur(12px);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.familiar-magic-stage__caption strong {
  color: var(--text-main);
  font-size: var(--text-sm);
}

.familiar-magic-stage__ornament.is-familiar-ignited::before {
  animation: familiar-bloom-ignite 780ms ease-out both;
}

.familiar-magic-stage__ornament.is-familiar-ignited .familiar-magic-stage__twinkles i {
  animation: familiar-star-ignite 840ms var(--twinkle-delay) ease-out both;
}

.familiar-backdrop-controls {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, rgba(11, 29, 39, .88), rgba(6, 15, 21, .94));
  box-shadow: inset 0 1px rgba(229, 241, 246, .035);
}

.familiar-backdrop-controls__intro {
  display: grid;
  gap: 6px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(133, 187, 206, .12);
}

.familiar-backdrop-controls__intro h3,
.familiar-backdrop-controls__intro p {
  margin: 0;
}

.familiar-backdrop-controls__intro h3 {
  font-size: var(--text-lg);
}

.familiar-backdrop-controls__intro p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.familiar-backdrop-field {
  display: grid;
  gap: 7px;
}

.familiar-backdrop-field > span,
.familiar-backdrop-toggle > span {
  color: var(--text-soft);
  font-size: var(--text-xs);
}

.familiar-backdrop-field select,
.familiar-backdrop-field input[type="range"] {
  width: 100%;
}

.familiar-backdrop-field select {
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(142, 196, 215, .2);
  border-radius: 10px;
  color: var(--text-main);
  background: rgba(4, 14, 20, .72);
}

.familiar-backdrop-field__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.familiar-backdrop-field__label output {
  color: var(--accent-ice);
  font: var(--text-xs)/1 var(--font-mono);
}

.familiar-backdrop-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(142, 196, 215, .14);
  border-radius: 10px;
  background: rgba(4, 14, 20, .42);
}

.familiar-backdrop-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-amber);
}

.familiar-backdrop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.familiar-backdrop-actions .btn {
  width: 100%;
  min-width: 0;
  padding-inline: 12px;
}

.familiar-backdrop-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  gap: var(--space-4);
  justify-content: center;
}

.familiar-backdrop-example {
  display: grid;
  gap: var(--space-3);
}

.familiar-backdrop-example .familiar-magic-stage {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
}

.familiar-backdrop-example .familiar-magic-stage__subject {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: auto;
  height: calc(100% - 28px);
  max-width: calc(100% - 36px);
  transform: translateX(-50%);
}

.familiar-backdrop-example .familiar-magic-stage__ornament {
  width: 94%;
  height: 96%;
}

.familiar-backdrop-example h3,
.familiar-backdrop-example p {
  margin: 0;
}

.familiar-backdrop-example h3 {
  font-size: var(--text-lg);
}

.familiar-backdrop-example p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.familiar-backdrop-contract {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.familiar-backdrop-contract li {
  display: grid;
  gap: 7px;
  padding: var(--space-4);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-lg);
  background: rgba(7, 18, 25, .62);
}

.familiar-backdrop-contract span {
  color: var(--accent-amber-light);
  font: 600 var(--text-xs)/1 var(--font-mono);
}

.familiar-backdrop-contract strong {
  font-size: var(--text-sm);
}

.familiar-backdrop-contract p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@keyframes familiar-bloom-ignite {
  0% { opacity: .55; filter: blur(18px); }
  36% { opacity: 1; filter: blur(8px); }
  100% { opacity: 1; filter: blur(18px); }
}

@keyframes familiar-star-twinkle {
  0%, 100% { opacity: .2; transform: translate3d(-50%, -50%, 0) scale(.68); }
  31% { opacity: .32; transform: translate3d(-50%, -50%, 0) scale(.74); }
  47% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.08); }
  61% { opacity: .46; transform: translate3d(-50%, -50%, 0) scale(.83); }
  79% { opacity: .26; transform: translate3d(-50%, -50%, 0) scale(.7); }
}

@keyframes familiar-star-ignite {
  0% { opacity: .2; transform: translate(-50%, -50%) scale(.72); }
  34% { opacity: 1; transform: translate(-50%, -50%) scale(1.22); filter: drop-shadow(0 0 9px rgba(244, 217, 155, .68)); }
  100% { opacity: .24; transform: translate(-50%, -50%) scale(.74); }
}

@media (max-width: 980px) {
  .familiar-backdrop-lab {
    grid-template-columns: 1fr;
  }

  .familiar-backdrop-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .familiar-backdrop-controls__intro,
  .familiar-backdrop-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .familiar-magic-stage {
    height: 370px;
  }

  .familiar-magic-stage__subject {
    top: 12px;
    bottom: 12px;
    height: calc(100% - 24px);
    max-width: 84%;
  }

  .familiar-magic-stage__ornament {
    width: min(94%, 400px);
    height: 94%;
  }

  .familiar-magic-stage__caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .familiar-backdrop-controls,
  .familiar-backdrop-examples,
  .familiar-backdrop-contract {
    grid-template-columns: 1fr;
  }

  .familiar-backdrop-example .familiar-magic-stage {
    height: auto;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .familiar-magic-stage__ornament::before,
  .familiar-magic-stage__twinkles i {
    animation: none !important;
  }
}

/* Source: /uikit-runtime/css/components/card-library-page.css */

/* Source: /uikit-runtime/css/components/card-group-palette.css */
:is(.card-library-group, .card-dossier__example) {
  --card-library-accent: 126, 190, 214;
  --card-library-warm: 214, 168, 95;
}

:is(.card-library-group, .card-dossier__example)[data-group="major"] {
  --spark-tones: warm violet;
  --card-library-accent: 205, 166, 104;
  --card-library-warm: 139, 113, 184;
}

:is(.card-library-group, .card-dossier__example)[data-group="cups"] {
  --spark-tones: cold blue;
  --card-library-accent: 92, 170, 207;
  --card-library-warm: 116, 139, 194;
}

:is(.card-library-group, .card-dossier__example)[data-group="wands"] {
  --spark-tones: warm red;
  --card-library-accent: 219, 139, 77;
  --card-library-warm: 190, 87, 65;
}

:is(.card-library-group, .card-dossier__example)[data-group="swords"] {
  --spark-tones: cyan cold;
  --card-library-accent: 154, 194, 214;
  --card-library-warm: 117, 139, 163;
}

:is(.card-library-group, .card-dossier__example)[data-group="pentacles"] {
  --spark-tones: green warm;
  --card-library-accent: 151, 178, 119;
  --card-library-warm: 187, 151, 84;
}


.card-library-page {
  --card-library-columns: 4;
  --card-library-section-gap: clamp(20px, 2.4vw, 28px);
  position: relative;
  isolation: isolate;
}

.card-library-page__sky {
  --cosmic-x: 50%;
  --cosmic-y: 42%;
  --glow-alpha: 1;
  position: fixed;
  z-index: 0;
  inset: 72px 0 0;
  width: 100vw;
  height: calc(100svh - 72px);
  overflow: hidden;
  pointer-events: none;
}

.card-library-page__sky::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at var(--cosmic-x) var(--cosmic-y), rgba(231, 193, 126, calc(.105 * var(--glow-alpha))), transparent 19%),
    radial-gradient(ellipse 52% 44% at 12% 28%, rgba(71, 136, 166, .055), transparent 72%),
    radial-gradient(ellipse 48% 42% at 88% 66%, rgba(185, 139, 78, .045), transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  content: "";
}

.card-library-page__starfield {
  z-index: 0;
  opacity: .58;
}

.card-library-page > :not(.card-library-page__sky) {
  position: relative;
  z-index: 1;
}

.card-library-heading {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  margin-bottom: var(--space-4);
}

.card-library-heading > div {
  max-width: 760px;
}

.card-library-heading .card-library-heading__edition {
  margin: 7px 0 11px;
  color: rgba(214, 168, 95, .82);
  font: 560 var(--text-xs)/1.4 var(--font-mono);
  letter-spacing: .055em;
}

.card-library-heading p:last-child {
  margin-top: 0;
  color: var(--text-soft);
}

.card-library-controls {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.65fr) auto;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--card-library-section-gap);
  padding: var(--space-4);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background: rgba(7, 16, 22, .66);
}

.card-library-reset {
  min-height: 46px;
  align-self: end;
  white-space: nowrap;
}

.card-library-search-field,
.card-library-filter-field {
  gap: var(--space-1);
}

.card-library-search-control {
  position: relative;
}

.card-library-search-control .input {
  width: 100%;
  min-height: 46px;
  padding-right: 52px;
}

.card-library-search-indicator {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(126, 190, 214, .2);
  border-radius: var(--radius-sm);
  color: var(--accent-ice);
  background: rgba(126, 190, 214, .07);
  box-shadow: inset 0 1px rgba(225, 240, 246, .045);
  pointer-events: none;
}

.card-library-search-indicator .ritual-icon,
.card-library-filter__icon {
  width: 18px;
  height: 18px;
}

.card-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-library-filters .btn {
  min-height: 46px;
  gap: 9px;
  padding-inline: 16px;
}

.card-library-filter__icon {
  color: var(--accent-amber-light);
}

.card-library-filters .btn--ghost .card-library-filter__icon {
  color: var(--text-muted);
}

.card-library-filters .btn:is(:hover, :focus-visible, .is-active) .card-library-filter__icon {
  color: currentColor;
}

.card-library-groups {
  display: grid;
  gap: clamp(38px, 5vw, 60px);
}

.card-library-group {
  display: grid;
  gap: var(--card-library-section-gap);
}

.card-library-group[hidden],
.card-library-tile-shell[hidden] {
  display: none;
}

.card-library-group__header {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--card-library-accent), .22);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 8% 12%, rgba(var(--card-library-accent), .13), transparent 34%),
    radial-gradient(circle at 94% 90%, rgba(var(--card-library-warm), .09), transparent 36%),
    linear-gradient(132deg, rgba(11, 29, 38, .94), rgba(6, 15, 21, .96));
  box-shadow: inset 0 1px rgba(228, 241, 246, .045), 0 20px 48px rgba(0, 0, 0, .12);
}

.card-library-group__header::after {
  content: none;
}

.card-library-group__header > :not(.ambient-sparks) {
  position: relative;
  z-index: 2;
}

.card-library-group__header > .ambient-sparks {
  z-index: 1;
  border-radius: inherit;
  opacity: .48;
}

.card-library-group__title-row {
  display: flex;
  grid-column: 1 / -1;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(var(--card-library-accent), .13);
}

.card-library-group__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  padding: 15px 20px 18px;
}

.card-library-group__identity {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.card-library-group__mark {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  color: rgb(var(--card-library-accent));
  filter: drop-shadow(0 0 10px rgba(var(--card-library-accent), .2));
}

.card-library-group__mark .ritual-icon {
  width: 22px;
  height: 22px;
}

.card-library-group__eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(var(--card-library-accent), .88);
  font: 600 var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}

.card-library-group__header h2 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--text-xl);
}

.card-library-group__lead {
  max-width: 680px;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.card-library-group__guide {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
  justify-self: stretch;
  min-height: 68px;
  padding: 11px 11px 11px 14px;
  border: 1px solid rgba(var(--card-library-accent), .2);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--card-library-warm), .075), transparent 46%),
    rgba(5, 14, 19, .5);
  box-shadow: inset 0 1px rgba(229, 242, 247, .035), 0 12px 28px rgba(0, 0, 0, .1);
}

.card-library-group__guide .information-nav-link__copy {
  gap: 4px;
}

.card-library-group__guide strong {
  color: var(--text-main);
  font-size: var(--text-sm);
  font-weight: 580;
  line-height: 1.35;
}

.card-library-group__guide small {
  color: var(--text-soft);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.card-library-group__guide .information-nav-arrow {
  border: 1px solid rgba(var(--card-library-accent), .22);
  color: rgb(var(--card-library-accent));
  background: rgba(var(--card-library-accent), .06);
}

.card-library-group__guide .ritual-icon {
  width: 15px;
  height: 15px;
  color: rgb(var(--card-library-accent));
}

.card-library-group__guide:is(:hover, :focus-visible) {
  outline: 0;
  color: var(--text-main);
  border-color: rgba(var(--card-library-accent), .62);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--card-library-warm), .14), transparent 48%),
    rgba(8, 19, 25, .76);
  box-shadow: inset 0 1px rgba(239, 225, 196, .07), 0 0 0 3px rgba(var(--card-library-accent), .055), 0 18px 38px rgba(0, 0, 0, .2);
}

.card-library-group__guide:is(:hover, :focus-visible) .information-nav-arrow {
  border-color: rgba(var(--card-library-accent), .58);
  color: var(--text-main);
  background: rgba(var(--card-library-accent), .13);
  box-shadow: 0 0 0 5px rgba(var(--card-library-accent), .05), 0 0 22px rgba(var(--card-library-accent), .13);
}

.product-card-grid.card-library-group__grid {
  display: grid;
  grid-template-columns: repeat(var(--card-library-columns), minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 24px) clamp(12px, 1.35vw, 18px);
  align-items: stretch;
}

.card-library-tile-shell {
  min-width: 0;
}

.card-library-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: auto 1fr;
  border: 1px solid rgba(var(--card-library-accent), .16);
  border-radius: var(--radius-md);
  color: inherit;
  background:
    radial-gradient(ellipse 110% 58% at 50% 0%, rgba(var(--card-library-accent), .18), transparent 70%),
    radial-gradient(ellipse 84% 46% at 96% 100%, rgba(var(--card-library-warm), .075), transparent 72%),
    linear-gradient(155deg, rgba(var(--card-library-accent), .065), rgba(7, 17, 23, .96) 52%, rgba(var(--card-library-warm), .025));
  box-shadow: inset 0 1px rgba(225, 240, 246, .035), 0 18px 42px rgba(0, 0, 0, .13);
  cursor: pointer;
  transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}

.card-library-tile:is(:hover, :focus-within) {
  outline: 0;
  border-color: rgba(var(--card-library-accent), .42);
  background:
    radial-gradient(ellipse 110% 60% at 50% 0%, rgba(var(--card-library-accent), .235), transparent 72%),
    radial-gradient(ellipse 86% 48% at 96% 100%, rgba(var(--card-library-warm), .105), transparent 72%),
    linear-gradient(155deg, rgba(var(--card-library-accent), .085), rgba(7, 17, 23, .975) 52%, rgba(var(--card-library-warm), .04));
  box-shadow: inset 0 1px rgba(225, 240, 246, .055), 0 24px 52px rgba(0, 0, 0, .22), 0 0 22px rgba(var(--card-library-accent), .055);
}

.card-library-tile:has(.card-library-tile__title-link:focus-visible) {
  box-shadow: 0 0 0 2px rgba(5, 13, 18, .95), 0 0 0 4px rgba(var(--card-library-accent), .54), 0 24px 52px rgba(0, 0, 0, .22);
}

.card-library-tile__visual {
  display: grid;
  min-width: 0;
  padding: 10px;
  place-items: center;
  perspective: 1200px;
  cursor: pointer;
}

.card-library-tile__visual .product-tarot-card {
  width: 100%;
  max-width: none;
  cursor: pointer;
}

.card-library-tile__visual .tarot-live-card__caption {
  display: none;
}

.card-library-tile__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 13px 13px 0;
  border-top: 1px solid rgba(var(--card-library-accent), .12);
}

.card-library-tile__meta {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--card-library-accent), .82);
  font: 560 var(--text-2xs)/1.35 var(--font-mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.card-library-tile__type {
  display: inline-flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
}

.card-library-tile__type .ritual-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.card-library-tile__number,
.card-library-tile__court {
  flex: 0 0 auto;
  color: rgba(226, 190, 122, .78);
}

.card-library-page .card-library-tile__title-link.information-route-link {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 10px -13px 0;
  padding: 10px 10px 10px 13px;
  border: 0;
  border-top: 1px solid rgba(var(--card-library-accent), .13);
  border-radius: 0;
  color: inherit;
  background: linear-gradient(90deg, rgba(var(--card-library-accent), .04), rgba(8, 17, 23, .14) 72%, rgba(var(--card-library-warm), .03));
  box-shadow: inset 0 1px rgba(var(--card-library-accent), .1);
  overflow: visible;
  text-decoration: none;
  transition: color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}

.card-library-page .card-library-tile__title-link.information-route-link::before {
  display: none;
}

.card-library-page .card-library-tile__title-link.information-route-link::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: var(--radius-md);
}

.card-library-tile__title-link h3 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1.32;
}

.card-library-tile__title-link .information-route-link__copy {
  gap: 2px;
}

.card-library-tile__english {
  display: block;
  margin-top: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.card-library-tile__title-link .information-route-link__arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(var(--card-library-accent), .2);
  border-radius: 50%;
  color: rgb(var(--card-library-accent));
  background: rgba(var(--card-library-accent), .055);
  transition: color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default);
}

.card-library-tile__title-link .ritual-icon {
  width: 14px;
  height: 14px;
}

.card-library-page .card-library-tile:is(:hover, :focus-within) .card-library-tile__title-link.information-route-link {
  outline: 0;
  color: var(--text-main);
  border-top-color: rgba(var(--card-library-accent), .36);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--card-library-warm), .13), transparent 48%),
    linear-gradient(90deg, rgba(var(--card-library-accent), .075), rgba(10, 20, 27, .46));
  box-shadow: inset 0 1px rgba(var(--card-library-accent), .18);
}

.card-library-tile:is(:hover, :focus-within) .card-library-tile__title-link .information-route-link__arrow {
  border-color: rgba(var(--card-library-accent), .46);
  color: rgb(var(--card-library-accent));
  background: rgba(var(--card-library-accent), .12);
  box-shadow: 0 0 16px rgba(var(--card-library-accent), .12), inset 0 1px rgba(235, 246, 249, .06);
}

.card-library-empty {
  margin: 0;
  padding: clamp(54px, 8vw, 86px) var(--space-5);
  border: 1px dashed var(--glass-line);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 1120px) {
  .card-library-page {
    --card-library-columns: 3;
  }

  .card-library-controls {
    grid-template-columns: 1fr;
  }

  .card-library-reset {
    justify-self: start;
  }
}

@media (max-width: 860px) {
  .card-library-group__body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card-library-group__guide {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .card-library-page {
    --card-library-columns: 2;
  }

  .card-library-controls {
    padding: var(--space-3);
  }

  .card-library-filters .btn {
    flex: 1 1 auto;
    padding-inline: 12px;
  }

  .card-library-reset {
    width: 100%;
  }

  .card-library-group__title-row {
    padding: 15px 16px;
  }

  .card-library-group__body {
    padding: 14px 16px 16px;
  }

  .card-library-group__title-row {
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .product-card-grid.card-library-group__grid {
    gap: 16px 10px;
  }

  .card-library-tile__visual {
    padding: 8px;
  }

  .card-library-tile__copy {
    padding: 11px 11px 0;
  }

  .card-library-tile__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .card-library-tile__title-link h3 {
    font-size: var(--text-sm);
  }

  .card-library-page .card-library-tile__title-link.information-route-link {
    margin: 9px -11px 0;
    padding: 9px 8px 9px 11px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .card-library-tile,
  .card-library-group__guide,
  .card-library-tile__title-link,
  .card-library-tile__title-link .information-route-link__arrow {
    transition: none;
  }

  .card-library-page__sky::before {
    background:
      radial-gradient(ellipse 52% 44% at 12% 28%, rgba(71, 136, 166, .055), transparent 72%),
      radial-gradient(ellipse 48% 42% at 88% 66%, rgba(185, 139, 78, .045), transparent 72%);
  }
}

/* Source: /uikit-runtime/css/components/surfaces.css */
.glass-panel {
  --panel-cool: rgba(102, 139, 154, 0.11);
  --panel-warm: rgba(214, 168, 95, 0.05);
  --panel-top: rgba(174, 205, 218, 0.04);
  --panel-border: rgba(174, 205, 218, 0.16);
  --panel-edge: rgba(174, 205, 218, 0.1);
  --panel-warm-edge: rgba(214, 168, 95, 0.045);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(174, 205, 218, 0.032), transparent 17%),
    linear-gradient(116deg, rgba(122, 145, 154, 0.035), transparent 32%),
    linear-gradient(180deg, var(--surface-glass), rgba(6, 11, 16, 0.5));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(174, 205, 218, 0.025),
    inset 0 1px 0 rgba(174, 205, 218, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px) saturate(112%);
}

.glass-panel::before,
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-panel::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 112% 92% at -22% -18%, var(--panel-cool), rgba(102, 139, 154, 0.025) 38%, transparent 70%),
    radial-gradient(ellipse 86% 70% at 108% 0%, var(--panel-warm), transparent 62%),
    linear-gradient(180deg, var(--panel-top), transparent 13%);
}

.glass-panel::after {
  box-shadow:
    inset 1px 0 0 var(--panel-edge),
    inset -1px 0 0 var(--panel-warm-edge),
    inset 0 1px 0 rgba(174, 205, 218, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44);
}

.glass-panel--warm {
  --panel-cool: rgba(102, 139, 154, 0.06);
  --panel-warm: rgba(214, 168, 95, 0.16);
  --panel-top: rgba(214, 168, 95, 0.035);
  --panel-border: rgba(214, 168, 95, 0.18);
  --panel-edge: rgba(174, 205, 218, 0.08);
  --panel-warm-edge: rgba(214, 168, 95, 0.1);
  background:
    radial-gradient(ellipse 92% 70% at 104% -12%, rgba(214, 168, 95, 0.11), transparent 66%),
    radial-gradient(ellipse 72% 74% at -16% 4%, rgba(102, 139, 154, 0.055), transparent 68%),
    linear-gradient(180deg, var(--surface-warm), rgba(10, 13, 14, 0.54));
}

.glass-panel--quiet {
  --panel-cool: rgba(102, 139, 154, 0.07);
  --panel-warm: rgba(214, 168, 95, 0.025);
  --panel-border: rgba(174, 205, 218, 0.12);
  background:
    linear-gradient(145deg, rgba(174, 205, 218, 0.045), transparent 35%),
    rgba(12, 20, 27, 0.48);
}

.glass-panel--tone-ice {
  --panel-cool: rgba(104, 169, 206, 0.38);
  --panel-warm: rgba(214, 168, 95, 0.018);
  --panel-top: rgba(214, 229, 237, 0.09);
  --panel-border: rgba(194, 222, 232, 0.3);
  --panel-edge: rgba(214, 229, 237, 0.24);
  --panel-warm-edge: rgba(214, 168, 95, 0.035);
  background:
    radial-gradient(ellipse 105% 90% at -12% -16%, rgba(104, 169, 206, 0.28), transparent 70%),
    radial-gradient(ellipse 70% 76% at 20% 108%, rgba(55, 91, 111, 0.18), transparent 74%),
    linear-gradient(145deg, rgba(25, 48, 64, 0.7), rgba(7, 16, 24, 0.5));
}

.glass-panel--tone-blue {
  --panel-cool: rgba(92, 139, 164, 0.26);
  --panel-warm: rgba(214, 168, 95, 0.006);
  --panel-top: rgba(174, 205, 218, 0.06);
  --panel-border: rgba(174, 205, 218, 0.2);
  --panel-edge: rgba(174, 205, 218, 0.18);
  --panel-warm-edge: rgba(214, 168, 95, 0.018);
  background:
    radial-gradient(ellipse 96% 78% at -18% -12%, rgba(92, 139, 164, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 22, 33, 0.64), rgba(5, 11, 17, 0.52));
}

.glass-panel--tone-cold {
  --panel-cool: rgba(102, 150, 170, 0.18);
  --panel-warm: rgba(214, 168, 95, 0.015);
  --panel-top: rgba(174, 205, 218, 0.048);
  --panel-border: rgba(174, 205, 218, 0.18);
  --panel-edge: rgba(174, 205, 218, 0.14);
}

.glass-panel--tone-mixed {
  --panel-cool: rgba(102, 139, 154, 0.12);
  --panel-warm: rgba(214, 168, 95, 0.09);
  --panel-border: rgba(174, 205, 218, 0.15);
  --panel-warm-edge: rgba(214, 168, 95, 0.07);
}

.glass-panel--tone-cross {
  --panel-cool: rgba(92, 139, 164, 0.19);
  --panel-warm: rgba(214, 168, 95, 0.15);
  --panel-top: rgba(174, 205, 218, 0.042);
  --panel-border: rgba(187, 202, 202, 0.16);
  --panel-edge: rgba(174, 205, 218, 0.14);
  --panel-warm-edge: rgba(214, 168, 95, 0.1);
  background:
    radial-gradient(ellipse 78% 78% at -14% -12%, rgba(92, 139, 164, 0.11), transparent 70%),
    radial-gradient(ellipse 82% 72% at 112% 0%, rgba(214, 168, 95, 0.11), transparent 68%),
    linear-gradient(180deg, rgba(12, 18, 23, 0.62), rgba(7, 12, 16, 0.54));
}

.glass-panel--tone-warm {
  --panel-cool: rgba(92, 139, 164, 0.105);
  --panel-warm: rgba(214, 168, 95, 0.19);
  --panel-top: rgba(214, 168, 95, 0.052);
  --panel-border: rgba(214, 168, 95, 0.17);
  --panel-edge: rgba(174, 205, 218, 0.095);
  --panel-warm-edge: rgba(214, 168, 95, 0.125);
  background:
    radial-gradient(ellipse 84% 74% at 110% -8%, rgba(214, 168, 95, 0.145), transparent 70%),
    radial-gradient(ellipse 84% 82% at -20% -8%, rgba(92, 139, 164, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(23, 23, 21, 0.58), rgba(7, 11, 14, 0.55));
}

.glass-panel--tone-amber {
  --panel-cool: rgba(102, 139, 154, 0.045);
  --panel-warm: rgba(214, 168, 95, 0.2);
  --panel-top: rgba(214, 168, 95, 0.045);
  --panel-border: rgba(214, 168, 95, 0.2);
  --panel-edge: rgba(174, 205, 218, 0.07);
  --panel-warm-edge: rgba(214, 168, 95, 0.13);
  background:
    radial-gradient(ellipse 94% 82% at 106% -14%, rgba(214, 168, 95, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 82% at -16% 2%, rgba(102, 139, 154, 0.04), transparent 70%),
    linear-gradient(180deg, rgba(33, 27, 19, 0.48), rgba(8, 10, 11, 0.58));
}

.glass-panel--tone-ember {
  --panel-cool: rgba(102, 139, 154, 0.02);
  --panel-warm: rgba(231, 173, 86, 0.28);
  --panel-top: rgba(231, 173, 86, 0.07);
  --panel-border: rgba(214, 168, 95, 0.24);
  --panel-edge: rgba(174, 205, 218, 0.055);
  --panel-warm-edge: rgba(214, 168, 95, 0.18);
  background:
    radial-gradient(ellipse 100% 86% at 108% -10%, rgba(231, 173, 86, 0.22), transparent 72%),
    radial-gradient(ellipse 76% 82% at 10% 108%, rgba(118, 72, 35, 0.09), transparent 74%),
    linear-gradient(180deg, rgba(45, 34, 22, 0.52), rgba(9, 9, 10, 0.6));
}

.glass-panel--frost-soft,
.glass-panel--frost-deep,
.glass-panel--frost-warm {
  background:
    linear-gradient(180deg, rgba(220, 236, 240, 0.064), transparent 24%),
    radial-gradient(ellipse 116% 88% at -18% -16%, var(--panel-cool), transparent 72%),
    radial-gradient(ellipse 92% 78% at 110% -10%, var(--panel-warm), transparent 70%),
    linear-gradient(180deg, rgba(30, 43, 50, 0.5), rgba(7, 11, 14, 0.43));
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(174, 205, 218, 0.035),
    inset 0 1px 0 rgba(221, 239, 242, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(26px) saturate(124%);
}

.glass-panel--frost-soft {
  --panel-border: rgba(190, 217, 224, 0.2);
  --panel-edge: rgba(190, 217, 224, 0.17);
}

.glass-panel--frost-deep {
  --panel-border: rgba(174, 205, 218, 0.24);
  --panel-edge: rgba(196, 222, 228, 0.2);
  background:
    linear-gradient(180deg, rgba(220, 236, 240, 0.09), transparent 28%),
    radial-gradient(ellipse 120% 88% at -18% -18%, rgba(120, 157, 172, 0.24), transparent 72%),
    radial-gradient(ellipse 72% 68% at 104% 0%, var(--panel-warm), transparent 70%),
    linear-gradient(180deg, rgba(41, 55, 62, 0.56), rgba(8, 13, 17, 0.46));
  backdrop-filter: blur(30px) saturate(132%);
}

.glass-panel--frost-warm {
  --panel-border: rgba(214, 168, 95, 0.22);
  --panel-warm-edge: rgba(214, 168, 95, 0.16);
  background:
    linear-gradient(180deg, rgba(239, 211, 161, 0.07), transparent 24%),
    radial-gradient(ellipse 96% 76% at 110% -12%, rgba(214, 168, 95, 0.22), transparent 70%),
    radial-gradient(ellipse 90% 82% at -18% -12%, rgba(114, 151, 166, 0.105), transparent 72%),
    linear-gradient(180deg, rgba(40, 35, 27, 0.52), rgba(8, 10, 11, 0.48));
  backdrop-filter: blur(28px) saturate(128%);
}

.glass-panel--technical {
  --panel-cool: rgba(214, 229, 237, 0.18);
  --panel-warm: rgba(208, 160, 98, 0.16);
  --panel-top: rgba(214, 229, 237, 0.06);
  --panel-border: rgba(214, 229, 237, 0.17);
  --panel-edge: rgba(214, 229, 237, 0.14);
  --panel-warm-edge: rgba(208, 160, 98, 0.11);
  background:
    radial-gradient(ellipse 86% 78% at 14% -10%, rgba(104, 169, 206, 0.2), transparent 68%),
    radial-gradient(ellipse 78% 72% at 96% 0%, rgba(208, 160, 98, 0.14), transparent 66%),
    linear-gradient(145deg, rgba(25, 48, 64, 0.62), rgba(7, 16, 24, 0.56));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(214, 229, 237, 0.03),
    inset 0 1px 0 rgba(240, 237, 230, 0.14),
    inset 0 -72px 120px rgba(7, 16, 24, 0.22);
  backdrop-filter: blur(28px) saturate(132%);
}

.glass-panel__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
}

.glass-panel__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 52% at -10% -8%, rgba(174, 205, 218, 0.045), transparent 68%),
    linear-gradient(90deg, rgba(174, 205, 218, 0.016), transparent 18%, transparent 84%, rgba(214, 168, 95, 0.024));
  opacity: 0.52;
}


/* Source: /uikit-runtime/css/components/classic-card-frame.css */
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] {
  container-type: inline-size;
  --classic-paper-grain: url('/assets/images/tarot/classic-paper-grain.svg?v=3');
  --classic-color-muted-filter: saturate(.955) contrast(.985) brightness(1.005);
  --classic-color-filter: none;
  --classic-frame-inset: round(nearest, calc(100cqw * 6 / 292), 1px);
  --classic-ink-width: max(1px, round(nearest, calc(100cqw * 1.95 / 292), 1px));
}
.tarot-live-card[data-card-face-frame="classic-paper"] .tarot-live-card__face--front {
  background: #f2eee4;
}
/* Keep art away from the outer edge; a half-stroke overlap under the ink
   prevents antialiasing seams between the independently composited layers. */
.tarot-live-card[data-card-face-frame="classic-paper"] .tarot-live-card__face--front .catalog-card-fallback {
  inset: calc(var(--classic-frame-inset) + var(--classic-ink-width) / 2);
  overflow: hidden;
  border-radius: var(--arcana-inner-radius);
}
.tarot-live-card[data-card-face-frame="classic-paper"] .tarot-live-card__face--front img {
  filter: var(--classic-color-filter, none);
  object-fit: cover;
}
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__foil-layer {
  padding: calc(var(--classic-frame-inset) + 1px);
  background:
    var(--classic-paper-grain) center / 100% 100% no-repeat,
    radial-gradient(ellipse at 0 8%, #9c896d66, transparent 24%),
    radial-gradient(ellipse at 100% 94%, #95816955, transparent 23%),
    radial-gradient(ellipse at 72% 0, #c0ad8738, transparent 32%),
    linear-gradient(105deg, #ded7c7, #f2eee4 18%, #f6f2e9 53%, #e6dece 100%);
  background-blend-mode: soft-light, multiply, multiply, multiply, normal;
  box-shadow: inset 0 0 2px 1px #75654c66, inset 0 0 0 1px #fff9ec99;
}
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__face--front::after,
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__overlay--front .tarot-live-card__glare-layer {
  /* One broad, neutral reflection over ink and paper. No varnish stripe,
     coloured sheen, moving grain or screen blend that washes out the print. */
  z-index: 9;
  --paper-light-strength: 1.3;
  background: radial-gradient(ellipse 90% 85% at var(--paper-light-x, 36.152%) var(--paper-light-y, 29.998%),
    rgba(255, 253, 247, calc(var(--paper-light-opacity, .0408) * var(--paper-light-strength))) 0%,
    rgba(255, 253, 247, calc(var(--paper-light-opacity, .0408) * var(--paper-light-strength) * .7)) 32%,
    rgba(255, 253, 247, calc(var(--paper-light-opacity, .0408) * var(--paper-light-strength) * .2)) 68%,
    transparent 100%);
  mix-blend-mode: normal;
  opacity: 1;
}
/* Pixel-aligned CSS borders keep both ink edges equally weighted as the card scales. */
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__overlay--front .tarot-live-card__overlay-print::before {
  content: '';
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  inset: var(--classic-frame-inset);
  border: solid #1a1713;
  border-width: var(--classic-ink-width);
  border-radius: var(--arcana-inner-radius);
  pointer-events: none;
}
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__overlay--front .tarot-live-card__overlay-print::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: var(--arcana-radius);
  background: var(--classic-paper-grain) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
}
.tarot-live-card[data-card-face-frame][data-card-face-frame="classic-paper"] .tarot-live-card__face--front::before { content:none; }

/* Source: /uikit-runtime/css/components/card-webgl.css */
/* The image is projected in WebGL; canonical frame/lettering/light stay above it.
   No transform on this canvas or an intermediate wrapper. The real imgs remain
   in the server HTML and become visible immediately if rendering is unavailable. */
.tarot-live-card > .tarot-card-art-canvas {
  display:none;position:absolute;left:-20%;top:-20%;width:140%;height:140%;max-width:none;
  transform:none!important;pointer-events:none;
}
.tarot-live-card.has-webgl-art > .tarot-card-art-canvas {display:block}
.tarot-live-card.webgl-art-enabled .catalog-card-fallback,
.tarot-live-card.webgl-art-enabled .catalog-card-layer {transition:none!important}
.tarot-live-card.has-webgl-art .tarot-live-card__face {background:transparent!important;box-shadow:none!important}
.tarot-live-card.has-webgl-art .tarot-live-card__face > .catalog-card-fallback,
.tarot-live-card.has-webgl-art .tarot-live-card__face > .catalog-card-layer {opacity:0!important;transition:none!important}
.tarot-live-card.has-webgl-art .tarot-live-card__core-layer {visibility:hidden}

/* Source: /uikit-runtime/css/components/card-lettering.css */
:root { --card-title-width-ratio:.066; --card-title-line-height:1.22; }

@font-face {
  font-family: 'Quantaro Card Serif';
  src: url("/uikit-runtime/assets/fonts/card-studies/NotoSerif-cyrillic.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Quantaro Card Serif';
  src: url("/uikit-runtime/assets/fonts/card-studies/NotoSerif-latin.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quantaro Card Sans';
  src: url("/uikit-runtime/assets/fonts/card-studies/Manrope.ttf") format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

.tarot-live-card[data-card-edition='qantaro-rws-base'] {
  --card-lettering-font: 'Quantaro Card Sans', system-ui, sans-serif;
}

/* Opt in when the surrounding layout does not already name the card. */
.tarot-live-card[data-card-lettering='soft'] { container-type: inline-size; }
.tarot-live-card[data-card-lettering='soft'] .card-lettering {
  position: absolute; inset: 0; z-index: auto; pointer-events: none;
  color: #fff9ee; font-family: var(--card-lettering-font, 'Quantaro Card Serif'), Georgia, serif; font-weight: 500;
}
.tarot-live-card[data-card-lettering='soft'] .card-lettering::before {
  /* Bleed underneath the foil; only the physical face clips this wash. */
  content: ''; position: absolute; inset: 0; z-index: 4;
  border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, transparent 70%, #07101b40 79%, #06101bd9 100%);
}
.tarot-live-card[data-card-lettering='soft'] .card-lettering:has(.card-lettering__number:not([hidden]))::before {
  background: linear-gradient(180deg, #060e187a, transparent 17%, transparent 70%, #07101b40 79%, #06101bd9 100%);
}
.tarot-live-card[data-card-lettering='soft'] .card-lettering__number {
  position: absolute; top: 4.1%; left: 8%; right: 8%; z-index: 8; transform: translateZ(0);
  font: 500 5.2cqi/1.2 var(--card-lettering-font, 'Quantaro Card Serif'), Georgia, serif;
  letter-spacing: .12em; text-align: center; text-shadow: 0 1px 0 #06101e;
}
.tarot-live-card[data-card-lettering='soft'] .card-lettering__title {
  position: absolute; bottom: 4.6%; left: 8%; right: 8%; margin: 0; z-index: 8;
  font: 500 calc(100cqi * var(--card-title-width-ratio))/var(--card-title-line-height) var(--card-lettering-font, 'Quantaro Card Serif'), Georgia, serif;
  letter-spacing: .025em; text-transform: none; text-align: center; text-wrap: balance;
  text-shadow: 0 1px 0 #0008;
  transform: translate3d(var(--card-title-x, 0px), var(--card-title-y, 0px), 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: auto;
}
.card-lettering__number[hidden] { display: none; }

/* Keep glyphs on flat composited planes while the shared card surface tilts. */
.tarot-live-card[data-card-lettering='soft'] .card-lettering__title,
.tarot-live-card[data-card-lettering='soft'] .card-lettering__number {
  transform-style: flat;
  text-rendering: geometricPrecision;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@font-face {
  font-family:'Quantaro Card Golos';
  src:url("/uikit-runtime/assets/fonts/card-studies/GolosText.ttf") format('truetype');
  font-weight:400 900;
  font-display:swap;
}
.tarot-live-card[data-card-lettering-font="noto"] { --card-lettering-font:'Quantaro Card Serif'; }
.tarot-live-card[data-card-lettering-font="manrope"] { --card-lettering-font:'Quantaro Card Sans'; }
.tarot-live-card[data-card-lettering-font="golos"] { --card-lettering-font:'Quantaro Card Golos'; }
.tarot-live-card[data-card-lettering='soft'] .has-lettering-raster {
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.card-lettering__raster {
  position:absolute; left:-2px; top:-2px; pointer-events:none;
  max-width:none; display:block;
}

/* Source: /uikit-runtime/css/blocks/cards.css */



.kit-section--cards {
  --card-line: rgba(174, 205, 218, 0.12);
  --card-line-strong: rgba(239, 207, 145, 0.28);
  --card-cold: rgba(104, 169, 206, 0.12);
  --card-warm: rgba(214, 168, 95, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.kit-section--cards .section-head {
  order: 0;
}

.kit-section--cards > :not(.section-head) {
  order: 10;
}

.kit-section--cards .card-mechanics-panel {
  order: 1;
}

.kit-section--cards .card-hero-panel {
  order: 2;
}

.kit-section--cards .cards-layout--primary {
  order: 3;
}

.kit-section--cards .card-spread-panel {
  order: 4;
}

.kit-section--cards > .glass-panel + .glass-panel,
.kit-section--cards > .glass-panel + .cards-layout,
.kit-section--cards > .cards-layout + .glass-panel,
.kit-section--cards > .cards-layout + .cards-layout {
  margin-top: 0;
}

.kit-section--cards .glass-panel {
  overflow: hidden;
}

.kit-section--cards .glass-panel__inner {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
}

.card-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
}

.card-panel-head--stack {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.card-panel-head h3 {
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 2.1vw, var(--text-3xl));
  font-weight: 560;
  line-height: 1.14;
  letter-spacing: 0;
}

.card-panel-head p {
  max-width: 780px;
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.62;
}

.card-context-card,
.card-reading-panel,
.card-callout,
.card-state-card,
.card-spread-status,
.spread-slot,
.deck-card,
.card-rule,
.card-pill {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  background:
    radial-gradient(ellipse 110% 120% at 0% 0%, rgba(104, 169, 206, 0.075), transparent 72%),
    radial-gradient(ellipse 92% 120% at 100% 0%, rgba(214, 168, 95, 0.052), transparent 74%),
    rgba(7, 16, 24, 0.32);
  box-shadow: inset 0 1px 0 rgba(239, 231, 214, 0.055);
}

.card-context-card,
.card-spread-status {
  min-width: 230px;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-color: rgba(239, 207, 145, 0.18);
  border-radius: var(--radius-md);
  justify-items: end;
  text-align: right;
}

.card-context-card span,
.card-context-card em,
.card-spread-status span,
.card-callout span,
.card-rule span {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-context-card strong,
.card-spread-status strong {
  color: var(--text-main);
  font-size: var(--text-sm);
  font-weight: 650;
}

.card-context-card em {
  color: var(--text-muted);
}

.card-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
  gap: var(--space-5);
  align-items: stretch;
}

.mechanic-card-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  overflow: visible;
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  margin: 0;
}

.kit-section--cards .card-mechanics-panel,
.kit-section--cards .card-mechanics-panel .glass-panel__inner {
  overflow: visible;
}

.tarot-live-card {
  --arcana-radius: 5% / 3.4%;
  --arcana-inner-radius: 3.8% / 2.55%;
  --card-body-half-depth: 0.9px;
  /* Wide landing reference (3840px viewport): 292px card, 6px visible foil.
     Percent padding follows card width; the 1px bleed below only cancels its inset. */
  --card-face-frame-reference-width: 292;
  --card-face-frame-reference-border: 6;
  --card-face-frame-width: calc(100% * var(--card-face-frame-reference-border) / var(--card-face-frame-reference-width));
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 3 / 4.45;
  justify-self: center;
  perspective: 1200px;
  transform-style: preserve-3d;
  contain: layout style;
  isolation: isolate;
  will-change: transform;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* A tilt-only card is visual content; do not imply a click action. */
.tarot-live-card[role="img"] {
  cursor: default;
}

:is(
  [data-tarot-card],
  [data-qantaro-card],
  [data-deck-position],
  [data-library-card],
  [data-card-interactive],
  .deck-card,
  button.arcana-card--image,
  .spread-slot
) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

:is(
  [data-tarot-card],
  [data-qantaro-card],
  [data-deck-position],
  [data-library-card],
  [data-card-interactive],
  .deck-card,
  button.arcana-card--image,
  .spread-slot
) img {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.tarot-live-card:focus {
  outline: none;
}

.tarot-live-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% 4% 0;
  border-radius: var(--arcana-radius);
  background: rgba(0, 0, 0, 0.82);
  filter: blur(var(--shadow-blur, 28px));
  opacity: var(--shadow-opacity, 0.52);
  transform:
    translate3d(var(--shadow-x, 0px), var(--shadow-y, 34px), -1px)
    rotate(var(--shadow-rotate, 0deg))
    skewX(var(--shadow-skew, 0deg))
    scale(var(--shadow-scale-x, 0.94), var(--shadow-scale-y, 0.98));
  transform-origin: center;
  will-change: transform, filter, opacity;
  pointer-events: none;
}

.tarot-live-card__inner {
  overflow: hidden;
  border-radius: var(--arcana-radius);
  position: relative;
  width: 100%;
  height: 100%;
  transform:
    translate3d(0, var(--lift, 0px), 0)
    rotateX(var(--tilt-x, 0deg))
    rotateY(calc(var(--tilt-y, 0deg) + var(--flip-angle, 0deg)));
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter 160ms var(--ease-default);
}

.tarot-live-card.is-flipping .tarot-live-card__inner {
  transition:
    transform 912ms cubic-bezier(0.22, 0.9, 0.18, 1),
    filter 240ms var(--ease-default);
}

.tarot-live-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(174, 205, 218, 0.16);
  border-radius: var(--arcana-radius);
  background: rgba(5, 12, 18, 0.72);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 18px var(--shadow-blur, 92px) rgba(0, 0, 0, 0.28),
    calc(var(--shadow-x, 0px) * -0.18) -8px 42px rgba(214, 168, 95, 0.08),
    inset 0 1px 0 rgba(239, 231, 214, 0.09);
}

.tarot-live-card__face::after,
.tarot-live-card__glare-layer {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    radial-gradient(
      ellipse 92% 76% at var(--surface-glare-x, 50%) var(--surface-glare-y, 50%),
      rgba(239, 231, 214, var(--surface-glare-opacity, 0.1)) 0%,
      rgba(104, 169, 206, 0.04) 38%,
      transparent 78%
    ),
    linear-gradient(120deg, transparent 18%, rgba(239, 231, 214, 0.035) 48%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0.34;
  pointer-events: none;
}

.tarot-live-card[data-surface-mode="gloss"] .tarot-live-card__face::after,
.tarot-live-card[data-surface-mode="gloss"] .tarot-live-card__glare-layer {
  background:
    linear-gradient(
      var(--surface-glare-angle, 118deg),
      transparent calc(var(--surface-light-stop, 46%) - 34%),
      rgba(255, 246, 219, 0.018) calc(var(--surface-light-stop, 46%) - 18%),
      rgba(255, 246, 219, var(--surface-glare-opacity, 0.18)) var(--surface-light-stop, 46%),
      rgba(104, 169, 206, 0.07) calc(var(--surface-light-stop, 46%) + 12%),
      transparent calc(var(--surface-light-stop, 46%) + 36%)
    ),
    radial-gradient(
      ellipse 86% 62% at var(--surface-glare-x, 50%) var(--surface-glare-y, 50%),
      rgba(239, 231, 214, var(--surface-glare-soft-opacity, 0.14)) 0%,
      rgba(104, 169, 206, 0.08) 42%,
      transparent 82%
    );
  opacity: 0.62;
}

/* Decorated faces share one outer clip; the foil replaces the plain outline. */
.tarot-live-card:is([data-card-face-frame="qantaro-gold-foil"],[data-card-face-frame="classic-paper"]) .tarot-live-card__face--front {
  border: 0;
}

/* Foil and varnish share the same light band in the same face coordinates. */
.tarot-live-card:is([data-card-face-frame="qantaro-gold-foil"],[data-card-face-frame="classic-paper"]) .tarot-live-card__face--front::before,
.tarot-live-card:is([data-card-face-frame="qantaro-gold-foil"],[data-card-face-frame="classic-paper"]) .tarot-live-card__foil-layer {
  content: "";
  position: absolute;
  z-index: 6;
  /* Bleed past the face clip so two antialiased curves cannot expose the art. */
  inset: -1px;
  box-sizing: border-box;
  padding: calc(var(--card-face-frame-width) + 1px);
  border-radius: var(--arcana-radius);
  background:
    url("/uikit-runtime/assets/textures/foil-grain.svg?v=20260911-satin1") center / 256px 384px repeat,
    linear-gradient(
      var(--surface-glare-angle, 118deg),
      #875619 calc(var(--surface-light-stop, 46%) - 36%),
      #be882b calc(var(--surface-light-stop, 46%) - 18%),
      #e3b951 calc(var(--surface-light-stop, 46%) - 8%),
      #f5db91 var(--surface-light-stop, 46%),
      #e6bf5e calc(var(--surface-light-stop, 46%) + 8%),
      #bd8c35 calc(var(--surface-light-stop, 46%) + 18%),
      #82531b calc(var(--surface-light-stop, 46%) + 36%)
    );
  background-blend-mode: soft-light, normal;
  /* Relief belongs to the same masked foil, not a second rounded outline. */
  box-shadow: inset 0 1.5px 1px rgba(48, 27, 8, 0.35),
    inset 0 -1.5px 1px rgba(255, 235, 174, 0.28);
  opacity: 1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* One far-side silhouette per face avoids overlapping antialiased outlines. */
.tarot-live-card__core-layer {
  position: absolute;
  inset: 0.25px;
  border-radius: var(--arcana-radius);
  background: #b3a48d;
  transform: rotateY(var(--card-core-turn)) translateZ(calc(-1 * var(--card-body-half-depth) + 0.03px));
  pointer-events: none;
  backface-visibility: hidden;
}

/* Runtime interpolates the flip angle separately from live pointer tilt. */
.tarot-live-card[data-qantaro-card-mounted="true"].is-flipping .tarot-live-card__inner {
  transition: filter 240ms var(--ease-default);
}

/* Leave a transparent sampling margin around transformed surfaces. */
.tarot-live-card__face,
.tarot-live-card__core-layer {
  outline: 1px solid transparent;
}

/* Do not blur the artwork or spread its pixels beyond the face boundary. */
.tarot-live-card__face {
  filter: none;
  transform-style: flat;
}

.tarot-live-card__foil-layer { display: none; }
.tarot-live-card:is([data-card-face-frame="qantaro-gold-foil"],[data-card-face-frame="classic-paper"]) .tarot-live-card__foil-layer { display: block; }

/* Independent stationary print plane: it shares tilt/flip, never artwork travel. */
.tarot-live-card__overlay {
  position: absolute; inset: 0;
  pointer-events: none; backface-visibility: hidden; transform-style: flat;
  transform: rotateY(0deg) translateZ(calc(var(--card-body-half-depth) + 0.04px));
}
.tarot-live-card__overlay--back {
  transform: rotateY(180deg) translateZ(calc(var(--card-body-half-depth) + 0.04px));
}
/* Shared rounded clipping for stationary print layers. */
.tarot-live-card__overlay-print {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--arcana-radius);
}
/* Keep the open face clipped; release the 3D parent before either flip and
   while the back is visible. Runtime removes is-flipping at animation end. */
.tarot-live-card.is-flipped .tarot-live-card__inner,
.tarot-live-card.is-flipping .tarot-live-card__inner {
  overflow: visible;
}
.tarot-live-card[data-card-overlays] .tarot-live-card__face::before,
.tarot-live-card[data-card-overlays] .tarot-live-card__face::after {
  content: none;
}

/* The card owns a single ground shadow. Face shadows can intersect adjacent
   composited tiles while scrolling and leave straight clipping seams. */
.tarot-live-card .tarot-live-card__inner .tarot-live-card__face.qantaro-card-surface {
  box-shadow: none;
}

.tarot-live-card__foil-impression {
  display: none;
}

.tarot-live-card__face--back {
  display: grid;
  place-items: center;
  border-color: rgba(239, 207, 145, 0.22);
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.16), transparent 18%),
    radial-gradient(ellipse 62% 78% at 50% 50%, rgba(104, 169, 206, 0.12), transparent 72%),
    linear-gradient(145deg, rgba(12, 26, 37, 0.92), rgba(5, 12, 18, 0.96));
}

.tarot-live-card[data-card-cover] .tarot-live-card__face--back {
  border: 0;
  box-shadow:
    0 18px var(--shadow-blur, 92px) rgba(0, 0, 0, 0.28),
    calc(var(--shadow-x, 0px) * -0.18) -8px 42px rgba(214, 168, 95, 0.08);
}

.tarot-live-card__face--front {
  transform: rotateY(0deg) translateZ(var(--card-body-half-depth));
}

.tarot-live-card[data-card-cover] .tarot-live-card__face--front {
  border: 0;
  box-shadow:
    0 18px var(--shadow-blur, 92px) rgba(0, 0, 0, 0.28),
    calc(var(--shadow-x, 0px) * -0.18) -8px 42px rgba(214, 168, 95, 0.08);
}

.tarot-live-card__face--back {
  transform: rotateY(180deg) translateZ(var(--card-body-half-depth));
}

.tarot-live-card.is-flipped {
  --flip-angle: 180deg;
}

.tarot-back-layer {
  position: absolute;
  pointer-events: none;
  transform:
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    );
  will-change: transform;
}

.tarot-back-layer--image {
  inset: -4%;
  overflow: hidden;
}

.tarot-back-layer--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.tarot-back-layer--image-base {
  --depth: 0.04;
  filter: saturate(0.94) contrast(1.03) brightness(0.9);
  transform: scale(1.03)
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    );
}

.tarot-back-layer--image-ornament {
  --depth: 0.18;
  inset: -5%;
  mix-blend-mode: screen;
  opacity: 0.82;
  filter: saturate(1.03) contrast(1.04) brightness(0.98);
}

.tarot-back-layer--image-light {
  --depth: 0.34;
  inset: 0;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

.tarot-back-layer[data-parallax-bounds="contain"] {
  left: var(--bounded-layer-left, 0);
  top: var(--bounded-layer-top, 0);
  right: auto;
  bottom: auto;
  width: var(--bounded-layer-width, 100%);
  height: var(--bounded-layer-height, 100%);
  transform:
    translate3d(
      var(--bounded-layer-x, calc(var(--layer-x, 0px) * var(--depth, 0))),
      var(--bounded-layer-y, calc(var(--layer-y, 0px) * var(--depth, 0))),
      0
    );
}

.tarot-back-layer--field {
  --depth: 0.04;
  inset: -5%;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.16), transparent 18%),
    radial-gradient(ellipse 62% 78% at 50% 50%, rgba(104, 169, 206, 0.12), transparent 72%),
    linear-gradient(145deg, rgba(12, 26, 37, 0.92), rgba(5, 12, 18, 0.96));
}

.tarot-back-layer--orbit {
  --depth: 0.16;
  inset: 12%;
  border: 1px solid rgba(239, 207, 145, 0.14);
  border-radius: 50%;
  box-shadow:
    inset 0 0 48px rgba(104, 169, 206, 0.08),
    0 0 48px rgba(214, 168, 95, 0.08);
}

.tarot-back-layer--mark {
  --depth: 0.28;
  left: 33%;
  top: 33%;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(239, 207, 145, 0.42);
  transform:
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    )
    rotate(45deg);
  background: rgba(214, 168, 95, 0.08);
  box-shadow: 0 0 42px rgba(214, 168, 95, 0.14);
}

.tarot-back-layer--glow {
  --depth: -0.18;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 207, 145, 0.16), transparent 58%);
  mix-blend-mode: screen;
}

.tarot-back-layer--frame {
  --depth: 0;
  inset: 10px;
  border: 1px solid rgba(239, 207, 145, 0.28);
  border-radius: var(--arcana-inner-radius);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.42);
}

.tarot-live-card[data-card-cover] .tarot-back-layer--frame {
  display: none;
}

.tarot-layer {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  transform:
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    );
  will-change: transform;
}

.tarot-layer--image {
  overflow: hidden;
}

.tarot-layer--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.tarot-layer--fool-base {
  --depth: 0.03;
  filter: saturate(0.92) contrast(1.02) brightness(0.9);
  transform: scale(1.04)
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    );
}

.tarot-layer--fool-shadow {
  --depth: 0.1;
  mix-blend-mode: normal;
  opacity: 0.95;
}

.tarot-layer--fool-mid {
  --depth: 0.18;
  opacity: 0.96;
}

.tarot-layer--fool-main {
  --depth: 0.26;
  opacity: 0.98;
  filter: saturate(1.02) contrast(1.02);
}

.tarot-layer--fool-light {
  --depth: 0.34;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

.tarot-layer--bg {
  --depth: 0.05;
  background:
    linear-gradient(180deg, rgba(2, 6, 10, 0.08), rgba(2, 6, 10, 0.64)),
    url("/uikit-runtime/assets/cards/card-wanderer-v1.webp") center / cover no-repeat;
  filter: saturate(0.88) brightness(0.68) blur(2px);
  transform: scale(1.08)
    translate3d(
      calc(var(--layer-x, 0px) * var(--depth, 0)),
      calc(var(--layer-y, 0px) * var(--depth, 0)),
      0
    );
}

.tarot-layer--far {
  --depth: 0.14;
  background:
    radial-gradient(ellipse 72% 42% at 50% 18%, rgba(104, 169, 206, 0.22), transparent 68%),
    radial-gradient(ellipse 82% 38% at 50% 72%, rgba(3, 10, 15, 0.6), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.tarot-layer--mid {
  --depth: 0.24;
  inset: 8%;
  border: 1px solid rgba(239, 207, 145, 0.13);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow:
    inset 0 0 34px rgba(214, 168, 95, 0.05),
    0 0 52px rgba(104, 169, 206, 0.08);
}

.tarot-layer--main {
  --depth: 0.1;
  background:
    linear-gradient(180deg, transparent 58%, rgba(2, 6, 10, 0.72)),
    url("/uikit-runtime/assets/cards/card-wanderer-v1.webp") center / cover no-repeat;
  filter: contrast(1.03) brightness(0.96);
}

.tarot-layer--glow {
  --depth: -0.28;
  background:
    radial-gradient(circle at 50% 56%, rgba(239, 207, 145, 0.22), transparent 18%),
    radial-gradient(ellipse 60% 42% at 50% 28%, rgba(104, 169, 206, 0.22), transparent 64%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.tarot-layer--frame {
  --depth: 0;
  inset: 10px;
  border: 1px solid rgba(239, 207, 145, 0.34);
  border-radius: var(--arcana-inner-radius);
  box-shadow:
    inset 0 0 0 8px rgba(2, 6, 10, 0.14),
    inset 0 0 50px rgba(0, 0, 0, 0.42);
}

.tarot-live-card[data-card-cover] .tarot-layer--frame {
  display: none;
}

.catalog-card-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  transition: opacity 360ms var(--ease-default);
}

.catalog-card-fallback img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.catalog-card-layer {
  z-index: 1;
  overflow: visible;
  opacity: 0;
  mix-blend-mode: var(--catalog-blend, normal);
  transform: translate3d(var(--catalog-layer-x, 0px), var(--catalog-layer-y, 0px), 0);
  transition: opacity 360ms var(--ease-default);
}

.catalog-card-layer picture,
.catalog-card-layer img {
  width: 100%;
  height: 100%;
  display: block;
}

.catalog-card-layer img {
  object-fit: fill;
}

.catalog-card-layer[data-layout-mode="full-canvas"] {
  inset: 0;
}

.catalog-card-layer[data-layout-mode="full-canvas"][data-bounds="contain"],
.catalog-card-layer[data-layout-mode="full-canvas"][data-bounds="cover"] {
  left: calc(var(--catalog-travel-x, 0%) * -1);
  top: calc(var(--catalog-travel-y, 0%) * -1);
  right: auto;
  bottom: auto;
  width: calc(100% + var(--catalog-travel-x-double, 0%));
  height: calc(100% + var(--catalog-travel-y-double, 0%));
}

.catalog-card-layer[data-layout-mode="placed"] {
  left: calc(var(--catalog-anchor-x, 0%) + var(--catalog-offset-x, 0%));
  top: calc(var(--catalog-anchor-y, 0%) + var(--catalog-offset-y, 0%));
  right: auto;
  bottom: auto;
  width: var(--catalog-width, 100%);
  height: var(--catalog-height, auto);
  aspect-ratio: var(--catalog-aspect, auto);
  transform:
    translate3d(
      calc(var(--catalog-layer-x, 0px) - var(--catalog-pivot-x, 0%)),
      calc(var(--catalog-layer-y, 0px) - var(--catalog-pivot-y, 0%)),
      0
    );
}

.catalog-card-layer[data-layout-mode="placed"][data-bounds="contain"][data-bounds-strategy="cover-canvas"] {
  left: calc(var(--catalog-anchor-x, 0%) + var(--catalog-offset-x, 0%) - var(--catalog-travel-x, 0%));
  top: calc(var(--catalog-anchor-y, 0%) + var(--catalog-offset-y, 0%) - var(--catalog-travel-y, 0%));
  width: calc(var(--catalog-width, 100%) + var(--catalog-travel-x-double, 0%));
  height: calc(var(--catalog-height, 100%) + var(--catalog-travel-y-double, 0%));
}

.catalog-card-layer[data-layout-mode="placed"][data-bounds="contain"][data-bounds-strategy="virtual-canvas"] {
  left: var(--catalog-virtual-left, var(--catalog-offset-x, 0%));
  top: var(--catalog-virtual-top, var(--catalog-offset-y, 0%));
  width: var(--catalog-virtual-width, var(--catalog-width, 100%));
  height: var(--catalog-virtual-height, var(--catalog-height, 100%));
}

.tarot-live-card__face.is-catalog-ready .catalog-card-layer {
  opacity: var(--catalog-opacity, 1);
}

.tarot-live-card__face.is-catalog-ready .catalog-card-fallback {
  opacity: 0;
}

.tarot-live-card.is-card-loading {
  cursor: wait;
}

.tarot-live-card__face.is-catalog-static .catalog-card-fallback {
  opacity: 1;
}

.tarot-live-card[data-card-back-manifest] .tarot-back-layer--glow {
  display: none;
}

.tarot-live-card__caption {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(2, 7, 11, 0.82));
}

.tarot-live-card__caption em {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tarot-live-card__caption strong {
  color: var(--text-main);
  font-size: var(--text-xl);
  font-weight: 620;
}

.mechanic-card-meta {
  display: grid;
  gap: var(--space-4);
}

.card-control-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.card-range-control {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-md);
  background: rgba(2, 8, 13, 0.38);
}

.card-range-control span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-main);
  font-size: var(--text-sm);
  font-weight: 620;
}

.card-range-control output {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.card-range-control input {
  width: 100%;
  accent-color: var(--accent-amber);
}

.card-segment-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  padding: 4px;
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-md);
  background: rgba(2, 8, 13, 0.4);
}

.card-segment-control button {
  min-height: 36px;
  border: 0;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 620;
  cursor: pointer;
}

.card-segment-control button.is-active {
  color: var(--text-main);
  background: linear-gradient(180deg, rgba(239, 207, 145, 0.18), rgba(104, 169, 206, 0.08));
  box-shadow: inset 0 0 0 1px rgba(239, 207, 145, 0.22);
}

.mechanic-card-meta h4 {
  max-width: 620px;
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: 560;
  line-height: 1.14;
}

.mechanic-layer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.mechanic-layer-list span {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-md);
  background: rgba(7, 16, 24, 0.28);
}

.mechanic-layer-list i,
.mechanic-layer-list em {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
}

.mechanic-layer-list strong {
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: 650;
}

.mechanic-layer-list em {
  color: var(--text-muted);
}

.mechanic-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-layer-bounds-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 17, 0.38);
}

.card-layer-bounds-panel__head {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1.35fr);
  gap: var(--space-4);
  align-items: start;
}

.card-layer-bounds-panel__head strong {
  display: block;
  margin-top: 6px;
  color: var(--text-main);
  font-size: var(--text-sm);
}

.card-layer-bounds-panel__head p {
  max-width: 620px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.card-layer-bounds-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.card-layer-bounds-group {
  min-width: 0;
}

.card-layer-bounds-group > strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.card-layer-bounds-list {
  display: grid;
  gap: 7px;
}

.card-layer-control-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 0.9fr);
  gap: 8px;
  align-items: stretch;
}

.card-layer-bound-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: rgba(3, 9, 14, 0.62);
  text-align: left;
  cursor: pointer;
}

.card-layer-travel-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "range range";
  gap: 4px 8px;
  align-content: center;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-md);
  background: rgba(3, 9, 14, 0.42);
}

.card-layer-travel-control > span {
  grid-area: label;
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.card-layer-travel-control output {
  grid-area: value;
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.card-layer-travel-control input {
  grid-area: range;
  width: 100%;
  accent-color: var(--accent-amber);
}

.card-layer-bound-toggle:hover,
.card-layer-bound-toggle.is-active {
  border-color: rgba(214, 168, 95, 0.46);
  color: var(--text-main);
}

.card-layer-bound-toggle.is-active {
  background: rgba(214, 168, 95, 0.07);
  box-shadow: inset 0 0 24px rgba(214, 168, 95, 0.035);
}

.card-layer-bound-toggle i {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
}

.card-layer-bound-toggle span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.card-layer-bound-toggle strong,
.card-layer-bound-toggle em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-layer-bound-toggle strong {
  font-size: var(--text-xs);
}

.card-layer-bound-toggle em,
.card-layer-bounds-loading {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-style: normal;
}

.card-cover-picker {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(174, 205, 218, 0.11);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 90% 110% at 0% 0%, rgba(104, 169, 206, 0.07), transparent 72%),
    rgba(2, 8, 13, 0.34);
}

.card-cover-picker__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.card-cover-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background:
    radial-gradient(ellipse 120% 120% at 0% 0%, rgba(214, 168, 95, 0.06), transparent 70%),
    rgba(7, 16, 24, 0.34);
  cursor: pointer;
  text-align: left;
}

.card-cover-option.is-active {
  border-color: rgba(239, 207, 145, 0.36);
  box-shadow:
    0 0 30px rgba(214, 168, 95, 0.1),
    inset 0 1px 0 rgba(239, 231, 214, 0.08);
}

.card-cover-option:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.card-cover-option strong,
.card-cover-option em {
  display: block;
}

.card-cover-option strong {
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: 650;
}

.card-cover-option em {
  margin-top: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-cover-option__thumb {
  position: relative;
  width: 44px;
  aspect-ratio: 3 / 4.45;
  overflow: hidden;
  border: 1px solid rgba(239, 207, 145, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.12), transparent 24%),
    rgba(5, 12, 18, 0.82);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.card-cover-option__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-cover-option__thumb img:nth-child(2),
.card-cover-option__thumb img:nth-child(3) {
  mix-blend-mode: screen;
}

.card-cover-option__thumb--empty::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(239, 207, 145, 0.18);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .tarot-live-card,
  .tarot-layer {
    transform: none !important;
    transition-duration: 1ms;
  }
  /* Reduce motion without exposing the front of a closed card. */
  .tarot-live-card__inner {
    transform: rotateY(var(--flip-angle, 0deg)) !important;
    transition-duration: 1ms;
  }
}

.card-stage {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 190px));
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-7);
  border: 1px solid rgba(174, 205, 218, 0.12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 62% 62% at 50% 50%, rgba(104, 169, 206, 0.09), transparent 74%),
    linear-gradient(180deg, rgba(7, 16, 24, 0.2), rgba(5, 12, 18, 0.72));
}

.card-stage__halo {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(239, 207, 145, 0.16), transparent);
  opacity: 0.7;
  pointer-events: none;
  box-shadow: 0 0 46px rgba(104, 169, 206, 0.08);
}

.card-stage .arcana-card {
  max-width: 190px;
}

.card-stage .arcana-card.is-active {
  transform:
    perspective(900px)
    rotateX(var(--card-tilt-x, 0deg))
    rotateY(var(--card-tilt-y, 0deg))
    translate3d(0, calc(var(--card-lift, 0px) - 8px), 0);
}

.arcana-card {
  --arcana-radius: 5% / 3.4%;
  --arcana-inner-radius: 3.8% / 2.55%;
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4.45;
  min-width: 0;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(174, 205, 218, 0.14);
  border-radius: var(--arcana-radius);
  color: var(--text-main);
  cursor: pointer;
  background: rgba(5, 12, 18, 0.62);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(239, 231, 214, 0.08);
}

.arcana-card--image {
  background: rgba(5, 12, 18, 0.72);
  transform:
    perspective(900px)
    rotateX(var(--card-tilt-x, 0deg))
    rotateY(var(--card-tilt-y, 0deg))
    translate3d(0, var(--card-lift, 0px), 0);
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    var(--card-shadow-x, 0px) var(--card-shadow-y, 20px) var(--card-shadow-blur, 42px) rgba(0, 0, 0, var(--card-shadow-opacity, 0.38)),
    inset 0 1px 0 rgba(239, 231, 214, 0.08);
}

.arcana-card::before,
.arcana-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 10px;
  border: 1px solid rgba(239, 207, 145, 0.22);
  border-radius: var(--arcana-inner-radius);
  pointer-events: none;
}

.arcana-card::after {
  inset: 18px;
  border-color: rgba(174, 205, 218, 0.08);
}

.arcana-card--image::after {
  inset: -10%;
  border: 0;
  background:
    radial-gradient(
      ellipse 92% 76% at var(--card-glare-x, 50%) var(--card-glare-y, 51%),
      rgba(239, 231, 214, 0.09) 0%,
      rgba(104, 169, 206, 0.035) 38%,
      transparent 78%
    ),
    linear-gradient(120deg, transparent 18%, rgba(239, 231, 214, 0.03) 48%, transparent 78%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.34;
}

.arcana-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04) brightness(0.92);
}

.arcana-card--image::before {
  z-index: 2;
  box-shadow:
    inset 0 0 0 8px rgba(2, 6, 10, 0.14),
    inset 0 0 50px rgba(0, 0, 0, 0.42);
}

.arcana-card--image .arcana-card__label {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 3px;
  padding: var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(2, 7, 11, 0.78));
}

.arcana-card__label em {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: 0.12em;
}

.arcana-card__label strong {
  color: var(--text-main);
  font-size: var(--text-xl);
  font-weight: 620;
}

.arcana-card--back {
  align-items: center;
  justify-items: center;
  border-color: rgba(239, 207, 145, 0.18);
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.16), transparent 18%),
    radial-gradient(ellipse 62% 78% at 50% 50%, rgba(104, 169, 206, 0.12), transparent 72%),
    linear-gradient(145deg, rgba(12, 26, 37, 0.88), rgba(5, 12, 18, 0.94));
}

.arcana-card--back .arcana-card__back-mark {
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 207, 145, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 42px rgba(214, 168, 95, 0.1),
    inset 0 0 24px rgba(104, 169, 206, 0.08);
}

.arcana-card--back .arcana-card__back-mark i {
  width: 42%;
  aspect-ratio: 1;
  display: block;
  border: 1px solid rgba(239, 207, 145, 0.45);
  transform: rotate(45deg);
  background: rgba(214, 168, 95, 0.08);
}

.arcana-card--muted {
  opacity: 0.58;
}

.arcana-card.is-active,
.arcana-card:hover,
.arcana-card:focus-visible {
  outline: 0;
  border-color: rgba(239, 207, 145, 0.42);
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.46),
    0 0 42px rgba(214, 168, 95, 0.14),
    inset 0 1px 0 rgba(239, 231, 214, 0.12);
  filter: brightness(1.04);
}

.card-reading-panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}

.card-reading-panel h4 {
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: 560;
  line-height: 1.12;
}

.card-reading-panel p {
  color: var(--text-soft);
  line-height: 1.58;
}

.card-reading-meta {
  display: grid;
  gap: var(--space-2);
}

.card-reading-meta span {
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-reading-meta .ritual-icon {
  color: var(--accent-amber);
}

.card-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  cursor: pointer;
}

.card-pill.is-active,
.card-pill:hover,
.card-pill:focus-visible {
  outline: 0;
  color: var(--accent-amber-light);
  border-color: rgba(239, 207, 145, 0.32);
  box-shadow: 0 0 22px rgba(214, 168, 95, 0.1);
}

.cards-layout {
  display: grid;
  gap: var(--space-5);
}

.cards-layout--primary {
  grid-template-columns: minmax(460px, 1fr) minmax(400px, 0.86fr);
}

.cards-layout--secondary {
  grid-template-columns: minmax(480px, 1.08fr) minmax(420px, 0.92fr);
}

.card-system-panel {
  align-content: start;
}

.card-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.arcana-card--anatomy {
  max-width: 260px;
}

.card-callouts {
  display: grid;
  gap: var(--space-3);
}

.card-callout,
.card-rule {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.card-callout.is-active {
  border-color: rgba(239, 207, 145, 0.26);
}

.card-callout strong,
.card-rule strong,
.card-state-card strong,
.deck-card strong,
.spread-slot strong {
  color: var(--text-main);
  font-size: var(--text-regular);
  font-weight: 650;
}

.card-callout p,
.card-rule p {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.card-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.card-state-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
}

.card-state-card .arcana-mini {
  grid-row: 1 / 3;
}

.card-state-card em {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-style: normal;
}

.card-state-card.is-active,
.card-state-card:hover,
.card-state-card:focus-visible {
  outline: 0;
  border-color: rgba(239, 207, 145, 0.26);
  background:
    radial-gradient(ellipse 110% 120% at 0% 0%, rgba(214, 168, 95, 0.08), transparent 72%),
    rgba(7, 16, 24, 0.38);
}

.card-state-card:disabled {
  cursor: not-allowed;
  color: var(--text-dim);
  opacity: 0.62;
}

.arcana-mini {
  width: 42px;
  height: 62px;
  display: block;
  border: 1px solid rgba(174, 205, 218, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 168, 95, 0.18), transparent 22%),
    linear-gradient(145deg, rgba(12, 26, 37, 0.9), rgba(5, 12, 18, 0.96));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.arcana-mini--active {
  border-color: rgba(239, 207, 145, 0.54);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(214, 168, 95, 0.2);
}

.arcana-mini--revealed {
  border-color: rgba(174, 205, 218, 0.28);
  background:
    radial-gradient(circle at 50% 34%, rgba(174, 205, 218, 0.28), transparent 30%),
    radial-gradient(circle at 50% 70%, rgba(214, 168, 95, 0.22), transparent 30%),
    linear-gradient(180deg, #172431, #070d13);
}

.arcana-mini--locked {
  filter: grayscale(0.7);
  opacity: 0.58;
}

.spread-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.spread-slot {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  align-content: start;
  min-height: 520px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
  cursor: pointer;
  text-align: center;
}

.spread-slot .arcana-card {
  width: min(100%, 250px);
  cursor: inherit;
}

.spread-slot__index {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
}

.spread-slot em,
.deck-card em {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-style: normal;
}

.spread-slot.is-active,
.spread-slot:hover,
.spread-slot:focus-visible {
  outline: 0;
  border-color: rgba(239, 207, 145, 0.28);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.26),
    0 0 30px rgba(214, 168, 95, 0.08);
}

.deck-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.deck-gallery > .deck-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
  transform:
    perspective(900px)
    rotateX(var(--card-tilt-x, 0deg))
    rotateY(var(--card-tilt-y, 0deg))
    translate3d(0, var(--card-lift, 0px), 0);
  transform-style: preserve-3d;
  will-change: transform;
}

.deck-gallery > .deck-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(239, 207, 145, 0.14);
  border-radius: var(--arcana-radius);
  filter: saturate(0.94) contrast(1.04) brightness(0.92);
  box-shadow:
    var(--card-shadow-x, 0px) var(--card-shadow-y, 16px) var(--card-shadow-blur, 34px) rgba(0, 0, 0, var(--card-shadow-opacity, 0.34)),
    inset 0 1px 0 rgba(239, 231, 214, 0.08);
}

.deck-gallery > .deck-card span {
  display: grid;
  gap: 3px;
}

.deck-gallery > .deck-card.is-active,
.deck-gallery > .deck-card:hover,
.deck-gallery > .deck-card:focus-visible {
  outline: 0;
  border-color: rgba(239, 207, 145, 0.26);
  filter: brightness(1.04);
}

.card-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.card-rule {
  min-height: 142px;
}

.kit-section--cards h2,
.kit-section--cards h3,
.kit-section--cards h4,
.kit-section--cards p,
.kit-section--cards strong,
.kit-section--cards em,
.kit-section--cards span,
.kit-section--cards button {
  overflow-wrap: anywhere;
}

@media (max-width: 1320px) {
  .card-hero-grid,
  .mechanic-card-grid,
  .cards-layout--primary,
  .cards-layout--secondary {
    grid-template-columns: 1fr;
  }

  .spread-board {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
}

@media (max-width: 760px) {
  .kit-section--cards .glass-panel__inner {
    padding: var(--space-5);
  }

  .card-control-panel {
    grid-template-columns: 1fr;
  }

  .card-segment-control {
    width: 100%;
  }

  .card-layer-control-row {
    grid-template-columns: 1fr;
  }

  .card-panel-head,
  .mechanic-card-grid,
  .mechanic-layer-list,
  .card-layer-bounds-panel__head,
  .card-layer-bounds-groups,
  .card-anatomy-grid,
  .card-state-grid,
  .card-rule-grid,
  .card-cover-picker__list,
  .deck-gallery {
    grid-template-columns: 1fr;
  }

  .card-context-card,
  .card-spread-status {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .card-stage {
    min-height: auto;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .tarot-live-card {
    max-width: 280px;
  }

  .arcana-card__label {
    padding: var(--space-2);
  }

  .arcana-card__label strong {
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spread-board {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .spread-slot {
    min-height: auto;
  }

  .spread-slot .arcana-card {
    max-width: 220px;
  }
}

.kit-shell[data-viewport="mobile"] .card-hero-grid,
.kit-shell[data-viewport="mobile"] .mechanic-card-grid,
.kit-shell[data-viewport="mobile"] .cards-layout--primary,
.kit-shell[data-viewport="mobile"] .cards-layout--secondary,
.kit-shell[data-viewport="mobile"] .card-panel-head,
.kit-shell[data-viewport="mobile"] .mechanic-layer-list,
.kit-shell[data-viewport="mobile"] .card-layer-bounds-panel__head,
.kit-shell[data-viewport="mobile"] .card-layer-bounds-groups,
.kit-shell[data-viewport="mobile"] .card-anatomy-grid,
.kit-shell[data-viewport="mobile"] .card-state-grid,
.kit-shell[data-viewport="mobile"] .card-rule-grid,
.kit-shell[data-viewport="mobile"] .card-cover-picker__list,
.kit-shell[data-viewport="mobile"] .deck-gallery {
  grid-template-columns: 1fr;
}

.kit-shell[data-viewport="mobile"] .kit-section--cards .glass-panel__inner {
  padding: var(--space-5);
}

.kit-shell[data-viewport="mobile"] .card-layer-control-row {
  grid-template-columns: 1fr;
}

.kit-shell[data-viewport="mobile"] .card-context-card,
.kit-shell[data-viewport="mobile"] .card-spread-status {
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.kit-shell[data-viewport="mobile"] .card-stage {
  min-height: auto;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
}

.kit-shell[data-viewport="mobile"] .tarot-live-card {
  max-width: 280px;
}

.kit-shell[data-viewport="mobile"] .arcana-card__label {
  padding: var(--space-2);
}

.kit-shell[data-viewport="mobile"] .arcana-card__label strong {
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kit-shell[data-viewport="mobile"] .spread-board {
  grid-template-columns: 1fr;
  overflow: visible;
}

.kit-shell[data-viewport="mobile"] .spread-slot {
  min-height: auto;
}

.kit-shell[data-viewport="mobile"] .spread-slot .arcana-card {
  max-width: 220px;
}

/* Source: /uikit-runtime/css/components/route-loader.css */
.route-loader {
  position: fixed;
  z-index: 90;
  top: var(--route-loader-top, 71px);
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.route-loader span {
  display: block;
  width: clamp(110px, 14vw, 210px);
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(214,168,95,.38) 18%, var(--accent-amber-light) 54%, rgba(239,207,145,.42) 82%, transparent);
  filter: drop-shadow(0 0 7px rgba(239,207,145,.5));
  transform: translate3d(-120%, 0, 0);
  will-change: transform;
}
.is-navigating .route-loader { opacity: 1; }
.is-navigating .route-loader span { animation: route-loader-pass 900ms cubic-bezier(.4,0,.2,1) infinite; }

@keyframes route-loader-pass {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(calc(100vw + 120%), 0, 0); }
}


.is-navigating.is-navigation-ready .route-loader { opacity: 0; }
.is-page-leaving main { opacity: 0; transition: opacity 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .route-loader, .is-page-leaving main { transition: none; }
  .is-navigating .route-loader span { animation: none; transform: none; }
}

/* Source: /assets/app.css */


/* Source: /uikit-runtime/css/components/legal-documents.css */
.legal-modal { --legal-padding: 32px; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; color: var(--text-main); background: rgba(12,25,33,.96); border: 1px solid var(--glass-line); border-radius: var(--prelaunch-panel-radius, 18px); overflow-wrap: anywhere; }
.legal-modal[open] { display: flex; flex-direction: column; }
.legal-modal-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px var(--legal-padding); border-bottom: 1px solid var(--glass-line); background: linear-gradient(115deg, rgba(29, 52, 64, .55), rgba(23, 26, 28, .5)); box-shadow: inset 0 1px rgba(226, 243, 249, .06); }
.legal-modal-header > div { min-width: 0; }
.legal-modal-header .modal__close { position: static; flex: 0 0 auto; }
.legal-modal-header .eyebrow { margin: 0; }
.legal-modal-header h2 { margin: 8px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.65rem); line-height: 1.25; }
.legal-modal-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px var(--legal-padding); }
.legal-modal-content > :first-child { margin-top: 0; }
.legal-modal > .prelaunch-document__actions { flex: 0 0 auto; margin: 0; padding: 16px var(--legal-padding); background: rgba(4, 13, 19, .55); }
.legal-modal .prelaunch-document__actions .btn { min-width: 0; min-height: 44px; padding: 10px 16px; font-size: .82rem; line-height: 1.4; }
.legal-modal-content p { color: var(--text-soft); }
.legal-modal-content h2 { margin-top: 32px; }
.legal-modal-content .notice { color: var(--accent-amber-light); }
body:has(.legal-modal[open]) { overflow: hidden; }
.legal-modal .prelaunch-document__modal-close { display: inline-flex; }
@media(max-width:760px) {
.legal-modal { --legal-padding: 22px; width: min(760px, calc(100% - 20px)); max-height: calc(100dvh - 20px); }
.legal-modal-header { padding-block: 20px; gap: 12px; }
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg-void); scrollbar-gutter: stable; overflow-y: scroll; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-void); color: var(--text-main); font: 400 16px/1.65 var(--font-body); letter-spacing: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: 0; }
h1 { font-size: clamp(1.75rem, 2.6vw, 2rem); font-weight: 550; }
h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 560; }
h3 { font-size: 1.08rem; font-weight: 620; }
[hidden] { display: none !important; }

.product-atmosphere { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: #070c12; }
.product-atmosphere::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,29,41,.42), transparent 45%, rgba(50,34,21,.18)); opacity: .65; }
.product-atmosphere canvas { width: 100%; height: 100%; opacity: .55; }
.product-main { min-height: 0; flex: 1 0 auto; }
.product-section { width: var(--product-content-width); margin-inline: auto; }
.landing { --home-section-gap: var(--space-12); }
.landing .landing-hero-scene + .ritual-overview { margin-top: var(--home-section-gap); }
.landing .feature-band,
.landing .spread-showcase { padding-block: var(--home-section-gap) 0; }
.landing .home-practice-insights,
.landing .lunar-home { margin-top: var(--home-section-gap); }
.landing .lunar-home + .seal-story { margin-top: var(--home-section-gap); }
.landing .faq-showcase-shell { padding-top: var(--home-section-gap); }
.landing .final-cta { margin-block: var(--home-section-gap); }
.landing .learning-map-shell { padding-bottom: var(--home-section-gap); }
.landing .explore-hub-shell--home { margin-bottom: var(--home-section-gap); }

@media (max-width: 760px) {
  .landing { --home-section-gap: 36px; }
}
.section-heading { width: 100%; max-width: none; margin-bottom: 38px; }
.section-heading h1:last-child { margin-bottom: 0; }
.section-heading > p:last-child { max-width: 760px; color: var(--text-soft); font-size: 1.05rem; }

.settings-list .settings-danger { border-color: rgba(214,104,94,.26); }
.dashboard .access-overview { margin-top: 34px; }
.spread-result:not(:has(.signifier-result)) { grid-template-columns: 1fr; }
.drawn-result:has(article:only-child) { grid-template-columns: minmax(220px, 360px); justify-content: center; }
.ai-reading { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--glass-line); }
.timezone-setting small { display: block; margin-bottom: 18px; color: var(--accent-amber-light); }
.auth-secondary-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.text-link { appearance: none; padding: 0; border: 0; background: none; color: var(--accent-amber-light); cursor: pointer; }
.text-link:disabled { color: var(--text-muted); cursor: default; }
.form-notice { padding: 12px 14px; border: 1px solid rgba(214,168,95,.28); border-radius: var(--radius-xs); background: rgba(78,59,27,.24); color: var(--accent-amber-light); }
.proof-details { margin: 24px 0; padding: 16px 0; border-block: 1px solid var(--glass-line-soft); color: var(--text-soft); }
.proof-details summary { color: var(--text-main); cursor: pointer; }
.proof-details code { overflow-wrap: anywhere; color: var(--accent-amber-light); }
.icon-link { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--text-soft); }
.icon-link:hover { border-color: var(--glass-line); }
.status-label { display: inline-flex; color: var(--accent-amber-light); font: 600 .68rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.hero { grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); margin-top: 42px; }
.hero__content { max-width: 640px; }
.hero h1 { margin-bottom: 22px; max-width: 620px; }
.hero__lead { max-width: 610px; color: var(--text-soft); font-size: 1.08rem; }
.hero__value { max-width: 590px; margin: 16px 0 0; color: var(--text-main); font-size: .94rem; line-height: 1.65; }
.hero__actions { display: flex; gap: 12px; margin: 30px 0 25px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 0; margin: 0; list-style: none; color: var(--text-muted); font-size: .78rem; }
.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-amber-light); box-shadow: 0 0 10px var(--accent-amber); }
.hero__aside { margin: 14px 0 0; color: var(--text-muted); font-size: .78rem; }
.hero-card-stage { min-height: 390px; }
.hero-card-stage .product-tarot-card { width: 238px; }
.hero-card-stage__hint { width: 100%; color: var(--text-muted); text-align: center; font-size: .75rem; }
.hero-card-stage__hint span { display: block; color: var(--accent-amber-light); }
.hero + .ritual-overview { margin-top: 64px; }

.ritual-overview { padding: 64px 32px 42px; border: 1px solid var(--glass-line); border-radius: var(--radius-md); background: rgba(12,19,25,.5); }
.ritual-timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.ritual-timeline li { position: relative; min-height: 190px; padding: 18px 22px; border-left: 1px solid var(--glass-line-soft); }
.ritual-timeline li:first-child { border-left: 0; }
.ritual-timeline li::after { content: ""; position: absolute; top: 38px; left: 70px; width: calc(100% - 82px); height: 1px; background: rgba(214,168,95,.24); }
.ritual-timeline li:last-child::after { display: none; }
.ritual-timeline > li > span { color: var(--accent-amber); font: .72rem var(--font-mono); }
.ritual-timeline i { width: 42px; height: 42px; display: grid; place-items: center; margin: 11px 0 20px; border: 1px solid rgba(214,168,95,.36); border-radius: 50%; color: var(--accent-amber-light); font-style: normal; }
.ritual-timeline h3 { margin-bottom: 8px; }.ritual-timeline p { color: var(--text-soft); font-size: .86rem; line-height: 1.55; }

.feature-band, .spread-showcase { padding-block: 72px 20px; }
.feature-band__intro { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: end; margin-bottom: 42px; }.feature-band__intro .eyebrow { align-self: start; }.feature-band__intro h2 { max-width: 700px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); }
.feature-grid article { position: relative; min-height: 240px; padding: 30px 26px; border-left: 1px solid var(--glass-line-soft); }.feature-grid article:first-child { border-left: 0; }
.feature-grid i { display: block; margin-bottom: 46px; color: var(--accent-amber); font-size: 1.8rem; font-style: normal; }.feature-grid p { color: var(--text-soft); font-size: .9rem; }.feature-grid .help-button { position: absolute; top: 24px; right: 20px; }
.feature-band__promise { max-width: 820px; margin: 26px 0 0; color: var(--text-soft); font-size: 1rem; }
.spread-grid { display: grid; grid-template-columns: .8fr 1.3fr .8fr; gap: 16px; }
.spread-option { min-height: 350px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--glass-line); border-radius: var(--radius-sm); background: rgba(11,18,24,.5); }
.spread-option > strong { display: block; margin: 42px 0 15px; color: var(--accent-amber-light); font: 400 3.2rem/1 var(--font-display); }.spread-option p { color: var(--text-soft); }.spread-option small { display: block; margin: auto 0 18px; color: var(--text-muted); }.spread-option .btn { width: 100%; }.spread-option--active { border-color: rgba(214,168,95,.55); background: rgba(32,27,20,.42); box-shadow: var(--shadow-amber); }.spread-option--preview { opacity: .64; }
.seal-story { margin-top: 72px; }.seal-story__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: stretch; padding-block: 28px 22px; }
.seal-story__visual { display: grid; place-items: center; min-height: 0; }.seal-story .seal-emblem { width: min(100%, 384px); }.seal-story__copy > p { color: var(--text-soft); }.seal-story__copy ul { padding-left: 20px; color: var(--text-soft); }.seal-story__copy li { margin: 8px 0; }
.preview-catalog > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--glass-line); }.preview-catalog article { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 22px; border-right: 1px solid var(--glass-line-soft); }.preview-catalog span { color: var(--text-muted); font-size: .76rem; }.preview-catalog em { color: var(--accent-amber); font: normal .68rem var(--font-mono); text-transform: uppercase; }
.final-cta { margin-block: 72px 48px; }.final-cta h2 { margin-bottom: 10px; }.final-cta p:last-child { margin-bottom: 0; color: var(--text-soft); }

.centered-page { min-height: calc(100vh - 72px); display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 24px 24px 48px; }.centered-page > :not(.page-context-layout) { align-self: center; }.auth-panel, .state-panel { width: min(520px, 100%); padding: 42px; }.auth-panel h1 { font-size: 2.3rem; }.auth-panel > p { color: var(--text-soft); }.stack-form { display: grid; gap: 18px; margin-top: 28px; }.consent { min-height: auto; }.form-error { min-height: 22px; margin: 0; color: #d99a91 !important; font-size: .82rem; }.auth-note { margin: 22px 0 0; font-size: .78rem; }.mail-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(214,168,95,.38); border-radius: 50%; color: var(--accent-amber-light); }.code-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin: 28px 0 16px; }.code-form label { min-width: 0; }.code-form input { letter-spacing: .35em; font: 1.4rem var(--font-mono); }.code-form .form-error { grid-column: 1/-1; }.dev-hint { padding: 8px 10px; border: 1px dashed var(--glass-line); border-radius: 6px; font: .75rem var(--font-mono); }.text-link { color: var(--accent-amber-light); font-size: .84rem; }

.dashboard { padding-block: 72px 110px; }.dashboard-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; }.dashboard-heading h1 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 10px; }.dashboard-heading p:last-child { color: var(--text-soft); }.usage-strip { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 28px; padding: 22px 26px; border: 1px solid var(--glass-line); border-radius: var(--radius-sm); background: rgba(11,19,25,.55); }.usage-strip span, .usage-strip small { color: var(--text-muted); }.usage-strip strong { display: block; font-size: 1.3rem; }.usage-meter { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }.usage-meter i { display: block; width: var(--usage); height: 100%; background: var(--accent-amber); }.history-section { margin-top: 72px; }.history-section > header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--glass-line); }.history-section > header span { color: var(--text-muted); }.empty-state { padding: 70px 20px; text-align: center; }.empty-state i { display: block; color: var(--accent-amber); font-size: 2rem; font-style: normal; }.empty-state p { color: var(--text-soft); }.reading-list { display: grid; }.reading-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--glass-line-soft); }.reading-row:hover { background: rgba(255,255,255,.025); }.reading-row__cards { display: flex; }.reading-row__cards img { width: 46px; aspect-ratio: 2/3; object-fit: cover; margin-right: -10px; border: 1px solid rgba(239,207,145,.24); border-radius: 4px; }.reading-row time { color: var(--text-muted); font-size: .73rem; }.reading-row h3 { margin: 4px 0; }.reading-row p { margin: 0; color: var(--text-soft); font-size: .84rem; }.preview-catalog { margin-top: 90px; }.preview-catalog > header { margin-bottom: 24px; }

.ritual-page { width: min(1380px, calc(100% - 48px)); min-height: clamp(600px, calc(100svh - 260px), 710px); margin: 0 auto 24px; display: grid; grid-template-columns: 250px 1fr; border: 1px solid var(--glass-line); border-radius: var(--radius-md); overflow: hidden; background: rgba(8,14,19,.64); }.ritual-sidebar { padding: 32px 26px; border-right: 1px solid var(--glass-line); background: rgba(8,14,19,.62); }.ritual-sidebar ol { display: grid; gap: 20px; padding: 18px 0 0; margin: 0; list-style: none; counter-reset: ritual; }.ritual-sidebar li { color: var(--text-dim); font-size: .84rem; }.ritual-sidebar li::before { counter-increment: ritual; content: "0" counter(ritual); display: inline-block; width: 32px; color: var(--text-dim); font: .65rem var(--font-mono); }.ritual-sidebar li.is-active { color: var(--text-main); }.ritual-sidebar li.is-active::before { color: var(--accent-amber); }.ritual-sidebar__proof { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--glass-line-soft); color: var(--text-muted); font-size: .75rem; }.ritual-sidebar__proof span { color: var(--accent-amber); }.ritual-stage { position: relative; min-height: 0; padding: 28px 48px 48px; overflow: hidden; }.ritual-stage__header { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font: .7rem var(--font-mono); }.guardian-presence { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; transform: translate(-50%,-50%); opacity: .08; pointer-events: none; }.guardian-presence i { position: absolute; inset: 12%; border: 1px solid var(--accent-amber); border-radius: 50%; animation: presence 14s linear infinite; }.guardian-presence i:nth-child(2) { inset: 28%; animation-direction: reverse; }.guardian-presence i:nth-child(3) { inset: 42%; }.ritual-scene { position: relative; z-index: 1; width: min(820px,100%); min-height: clamp(500px, calc(100svh - 370px), 600px); margin: 10px auto 0; display: grid; align-content: center; }.guardian-message { max-width: 680px; margin-bottom: 28px; }.guardian-message__voice { color: var(--accent-amber); font: .69rem var(--font-mono); text-transform: uppercase; }.guardian-message h1 { max-width: 680px; margin: 12px 0 14px; font-size: clamp(2rem,4vw,3rem); }.guardian-message p { max-width: 650px; color: var(--text-soft); font-size: 1.04rem; }.ritual-control { max-width: 680px; }.ritual-control .textarea { min-height: 120px; resize: vertical; }.ritual-control__actions { display: flex; gap: 10px; margin-top: 18px; }.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.choice-button { min-height: 76px; padding: 14px 16px; color: var(--text-main); text-align: left; cursor: pointer; }.choice-button:hover { border-color: rgba(214,168,95,.45); }.choice-button strong { position: relative; z-index: 1; display: block; }.choice-button small { position: relative; z-index: 1; color: var(--text-muted); }.choice-button[disabled] { opacity: .45; cursor: not-allowed; }.scene-loading { text-align: center; color: var(--text-muted); }.scene-loading span { width: 18px; height: 18px; display: inline-block; border: 1px solid var(--accent-amber); border-radius: 50%; animation: pulse 1.4s ease infinite; }.signifier-scene { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: center; }.signifier-live-card .product-tarot-card { width: 100%; }.focus-scene, .fingerprint-scene { text-align: center; }.focus-orb { width: 150px; height: 150px; display: grid; place-items: center; margin: 0 auto 28px; border: 1px solid rgba(214,168,95,.35); border-radius: 50%; box-shadow: 0 0 50px rgba(214,168,95,.12); color: var(--accent-amber-light); font: 2rem var(--font-mono); animation: breathe 3s ease-in-out infinite; }.fingerprint-mark { position: relative; width: 210px; height: 210px; margin: 0 auto 30px; border: 1px solid rgba(214,168,95,.4); border-radius: 50%; animation: fingerprint-spin 9s linear infinite; }.fingerprint-mark::before,.fingerprint-mark::after { content:""; position:absolute; border:1px solid rgba(214,168,95,.25); border-radius:50%; }.fingerprint-mark::before{inset:18%}.fingerprint-mark::after{inset:36%}.fingerprint-code { color: var(--accent-amber); font: .72rem var(--font-mono); }.deck-picker h1 { text-align: center; }.deck-picker > p { color: var(--text-soft); text-align: center; }.deck-fan { height: 370px; display: flex; align-items: center; overflow-x: auto; padding: 45px max(20px,calc(50% - 300px)); scrollbar-width: thin; scroll-snap-type: x proximity; }.deck-card { flex: 0 0 128px; aspect-ratio: 2/3; margin-left: -56px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; scroll-snap-align: center; transition: transform 260ms var(--ease-ritual), margin 260ms; }.deck-card:first-child { margin-left: 0; }.deck-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 30px rgba(0,0,0,.45); }.deck-card:hover { transform: translateY(-24px) rotate(1deg); }.deck-card.is-selected { margin-right: 42px; transform: translateY(-38px); }.deck-picker__footer { display: flex; justify-content: center; align-items: center; gap: 18px; }.selection-count { color: var(--text-muted); font: .78rem var(--font-mono); }

.reading-page { padding-block: 70px 110px; }.reading-loading { min-height: calc(100vh - 220px); display: grid; place-items: center; align-content: center; text-align: center; }.reading-loading h1 { font-size: 2.5rem; }.reading-loading > p:last-child { color: var(--text-soft); }.fingerprint-loader { position: relative; width: 150px; height: 150px; margin-bottom: 30px; border: 1px solid rgba(214,168,95,.35); border-radius: 50%; animation: fingerprint-spin 5s linear infinite; }.fingerprint-loader span { position: absolute; inset: 18%; border: 1px solid rgba(214,168,95,.24); border-radius: 50%; }.fingerprint-loader span:nth-child(2){inset:33%}.fingerprint-loader span:nth-child(3){inset:47%}.reading-heading { display: flex; justify-content: space-between; gap: 30px; align-items: start; margin-bottom: 60px; }.reading-heading h1 { margin-bottom: 10px; }.reading-heading p:last-child { color: var(--text-soft); max-width: 740px; }.spread-result { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }.signifier-result { padding-right: 28px; border-right: 1px solid var(--glass-line); }.signifier-result > span, .drawn-result article > span { color: var(--accent-amber); font: .68rem var(--font-mono); text-transform: uppercase; }.result-card { width: 100%; margin: 16px 0 18px; }.result-card .product-tarot-card { width: 100%; }.product-tarot-card.is-reversed .catalog-card-fallback img { transform: rotate(180deg); }.signifier-result p, .drawn-result p { color: var(--text-soft); font-size: .88rem; }.drawn-result { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.drawn-result article h2 { font-size: 1.28rem; margin-bottom: 3px; }.drawn-result article em { color: var(--text-muted); font-size: .72rem; font-style: normal; }.interpretation { width: min(820px,100%); margin: 100px auto 0; }.interpretation > p { color: var(--text-soft); font-size: 1.04rem; }.interpretation h3 { margin-top: 38px; }.freedom-note { display: flex; gap: 16px; margin-top: 34px; padding: 22px; border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); }.freedom-note span { color: var(--accent-amber); }.freedom-note p { margin: 0; color: var(--text-soft); }.reading-seal { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center; margin-top: 100px; padding: 42px 52px; }.seal-emblem--result { width: 230px; }.seal-actions { display: flex; flex-wrap: wrap; gap: 10px; }.public-seal { min-height: calc(100vh - 72px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; padding-block: 70px; }.public-seal__artifact { display: grid; place-items: center; gap: 10px; color: var(--text-muted); font: .72rem var(--font-mono); }.public-seal__artifact strong { color: var(--accent-amber); }.public-seal__content h1 { font-size: clamp(2rem,3.5vw,3.2rem); }.public-seal dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 32px 0; background: var(--glass-line-soft); }.public-seal dl div { padding: 16px; background: #0a1117; }.public-seal dt { color: var(--text-muted); font-size: .7rem; }.public-seal dd { margin: 3px 0 0; }.public-card-row { display: flex; gap: 14px; margin: 30px 0; }.public-card-row figure { width: 140px; margin: 0; }.public-card-runtime .product-tarot-card { width: 100%; }.public-card-row figcaption { margin-top: 8px; font-size: .75rem; }

.settings-page, .legal-page { padding-block: 72px 110px; }.settings-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.settings-list article { min-height: 210px; padding: 26px; border: 1px solid var(--glass-line); border-radius: var(--radius-sm); }.settings-list article p { color: var(--text-soft); }.settings-list article span { color: var(--state-success); }.settings-list .is-preview { opacity: .62; }.settings-list em { color: var(--accent-amber); font: normal .68rem var(--font-mono); }.legal-page { max-width: 900px; }.legal-page__header { max-width: 720px; padding-bottom: 30px; border-bottom: 1px solid var(--glass-line); }.legal-page__header h1 { margin-bottom: 0; font-size: clamp(2rem, 3.4vw, 3.15rem); }.legal-page__content { max-width: 720px; padding-block: 34px 58px; }.legal-page__content p { color: var(--text-soft); font-size: 1.02rem; }.legal-page__documents { padding-top: 24px; border-top: 1px solid var(--glass-line); }.legal-page__documents > p { margin-bottom: 13px; color: var(--text-muted); font: .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }.legal-page__documents > div { display: flex; flex-wrap: wrap; gap: 8px; }.legal-page__documents a[aria-current="page"] { pointer-events: none; }

.legal-index { padding-block: 72px 110px; }.legal-index .section-heading { max-width: 760px; }.legal-index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.legal-index__grid article { min-height: 300px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }.legal-index__grid article > span { color: var(--accent-amber); font: .7rem var(--font-mono); }.legal-index__grid h2 { margin: 42px 0 12px; font-size: 1.35rem; }.legal-index__grid p { flex: 1; color: var(--text-soft); }.legal-index__grid .btn { margin-top: 20px; }
.legal-page__actions { display: flex; justify-content: flex-end; margin-top: 24px; }.legal-page__actions .btn { min-width: 150px; }
.ritual-route { padding-top: 24px; }.ritual-route .ritual-page { margin-top: 0; }
.legal-page { padding-block: 36px 32px; }.legal-page__header { padding-bottom: 20px; }.legal-page__content { padding-block: 22px 24px; }.legal-page__content p:last-child { margin-bottom: 0; }.legal-page__documents { padding-top: 18px; }
.legal-index .section-heading h1 { font-size: clamp(2rem, 3.4vw, 3.15rem); }
.centered-page { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; align-items: stretch; justify-content: stretch; }
.centered-page > :not(.page-context-layout) { min-width: 0; max-width: 100%; }

/* Shared page composition: one grid, one owner for every visual boundary. */
.dashboard,
.reading-page,
.settings-page,
.legal-page,
.legal-index,
.card-library-page,
.card-page,
.ritual-catalog-page { padding-top: 24px; }
.ritual-catalog-page { padding-bottom: 96px; }
.ritual-catalog-page > .page-context-layout { margin-bottom: 48px; }
.ritual-route { padding-top: 24px; }
.ritual-route > .page-context-layout { margin-bottom: 20px; }
.public-seal > .page-context-layout { align-self: end; margin-bottom: 0; }
.history-section > header { margin-bottom: 22px; border-bottom: 0; }
.history-section .empty-state { margin-top: 0; }
.reading-list { border-top: 1px solid var(--glass-line); }

.toggle-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--glass-line-soft); }.toggle-row:last-of-type { margin-bottom: 22px; }
::view-transition-group(root) { animation-duration: .34s; }
::view-transition-old(root) { animation: page-out .16s ease both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: page-in .34s var(--ease-ritual) both; mix-blend-mode: normal; }
#productMain { view-transition-name: none; }

@keyframes page-out { to { opacity:0; } } @keyframes page-in { from { opacity:0; } } @keyframes toast-in { from { opacity:0; transform:translateY(8px); } } @keyframes pulse { 50% { transform:scale(1.35); opacity:.35; } } @keyframes breathe { 50% { transform:scale(1.08); box-shadow:0 0 80px rgba(214,168,95,.2); } } @keyframes presence { to { transform:rotate(360deg); } } @keyframes fingerprint-spin { to { transform:rotate(360deg); } } @keyframes seal-float { 50% { transform:translateY(-8px) rotate(2deg); } }

@media (min-width: 761px) {
  .ritual-page { min-height: clamp(600px, calc(100svh - 270px), 710px); }
  .ritual-scene { min-height: clamp(500px, calc(100svh - 400px), 600px); }
}
.ritual-scene > .deck-picker,
.daily-ritual-scene > .deck-picker { width: 100%; min-width: 0; overflow: hidden; }
.deck-picker .deck-fan { width: 100%; max-width: 100%; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr .8fr; gap: 30px; }.hero-card-stage { min-height: 520px; }.hero-card-stage .product-tarot-card { width:245px; }.ritual-timeline { grid-template-columns: repeat(2,1fr); }.ritual-timeline li { border:0; border-top:1px solid var(--glass-line-soft); }.ritual-timeline li::after{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.spread-result{grid-template-columns:190px 1fr}.drawn-result{gap:15px}.ritual-page{grid-template-columns:190px 1fr}.ritual-stage{padding-inline:30px}.signifier-scene{grid-template-columns:210px 1fr}
}
@media (max-width: 760px) {
  .product-main{min-height:calc(100vh - 64px)}.hero{min-height:auto;grid-template-columns:1fr;padding-block:54px;gap:24px}.hero h1{font-size:2.55rem}.hero__lead{font-size:.98rem}.hero__actions{flex-direction:column;align-items:stretch}.hero-card-stage{min-height:480px;border-left:0;border-top:1px solid var(--glass-line-soft)}.hero-card-stage .product-tarot-card{width:225px}.ritual-overview{padding:34px 18px}.ritual-timeline{grid-template-columns:1fr}.ritual-timeline li{min-height:130px;padding-inline:8px}.feature-band,.spread-showcase{padding-top:80px}.feature-band__intro{display:block}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:190px;border-left:0;border-top:1px solid var(--glass-line-soft)}.feature-grid i{margin-bottom:25px}.spread-grid{grid-template-columns:1fr}.spread-option{min-height:240px}.spread-option>strong{margin-top:30px}.spread-option--active{order:-1}.seal-story{grid-template-columns:1fr;gap:30px;margin-top:80px;padding:48px 20px}.seal-story__visual{min-height:280px}.seal-story .seal-emblem{width:230px}.preview-catalog>div{grid-template-columns:1fr}.final-cta{display:block}.final-cta .btn{margin-top:20px;width:100%}.auth-panel{padding:30px 22px}.code-form{grid-template-columns:1fr}.dashboard{padding-top:48px}.dashboard-heading{display:block}.dashboard-heading .btn{margin-top:18px}.usage-strip{grid-template-columns:1fr;gap:12px}.reading-row{grid-template-columns:105px 1fr}.reading-row>.status-label{display:none}.reading-heading{display:block;margin-bottom:44px}.ritual-page{width:100%;min-height:calc(100vh - 64px);margin:0;grid-template-columns:1fr;border:0;border-radius:0}.ritual-sidebar{display:none}.ritual-stage{min-height:calc(100vh - 64px);padding:20px 18px}.ritual-scene{min-height:calc(100vh - 140px)}.choice-grid{grid-template-columns:1fr}.signifier-scene{grid-template-columns:1fr;text-align:center}.signifier-live-card{width:180px;margin:auto}.deck-fan{height:330px;padding-inline:calc(50% - 90px)}.deck-card{flex-basis:112px;margin-left:-62px}.spread-result{grid-template-columns:1fr}.signifier-result{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:0 0 30px;border-right:0;border-bottom:1px solid var(--glass-line)}.signifier-result>span{grid-column:1/-1}.signifier-result .result-card{grid-row:2/5;margin:0}.drawn-result{grid-template-columns:1fr}.drawn-result article{display:grid;grid-template-columns:120px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--glass-line-soft)}.drawn-result article>span{grid-column:1/-1}.drawn-result .result-card{grid-row:2/6;margin:0}.reading-seal{grid-template-columns:1fr;padding:34px 22px}.seal-emblem--result{width:180px}.public-seal{grid-template-columns:1fr;gap:30px}.settings-list{grid-template-columns:1fr}.public-card-row{overflow-x:auto}.product-atmosphere::before{display:none}
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }.guardian-presence{display:none}
}

@media (max-width: 1080px) {
  .hero-card-stage { min-height: 370px; }
  .hero-card-stage .product-tarot-card { width: 220px; }
}

@media (max-width: 760px) {
  .hero { margin-top: 24px; padding-block: 34px 28px; }
  .hero h1 { font-size: 2.25rem; }
  .hero-card-stage { min-height: 350px; border: 0; }
  .hero-card-stage .product-tarot-card { width: 205px; }
  .hero + .ritual-overview { margin-top: 48px; }
  .feature-band, .spread-showcase { padding-top: 48px; }
  .seal-story { margin-top: 48px; }
  .seal-story__inner { padding-block: 40px; }
  .final-cta { margin-block: 48px 36px; }
}

.ritual-stage__tools { display: flex; align-items: center; gap: .65rem; }

@media (max-width: 760px) {
  .product-main { min-height: 0; }
  .legal-index__grid { grid-template-columns: 1fr; }
  .legal-index__grid article { min-height: 240px; }
  .dashboard,
  .reading-page,
  .settings-page,
  .legal-page,
  .legal-index,
  .card-library-page,
  .card-page,
  .ritual-catalog-page,
  .ritual-route { padding-top: 18px; }
  .ritual-route > .page-context-layout { margin-bottom: 18px; }
  .public-seal > .page-context-layout { margin-bottom: 12px; }
  .seal-story { display: block; margin-top: 80px; padding: 0; }
  .seal-story__inner { grid-template-columns: 1fr; gap: 24px; padding-block: 28px 22px; }
  .seal-story__visual { min-height: 230px; }
  .seal-story .seal-emblem { width: min(230px, 100%); }
  .final-cta { display: grid; padding: 34px 22px; }
}

/* Product page typography and spacing follow the compact UIKit scale. */
.product-main h1 {
  max-width: none;
  font-size: clamp(1.75rem, 2.6vw, 2rem);
  line-height: 1.14;
}

.product-main .legal-index .section-heading h1 {
  font-size: clamp(1.75rem, 2.6vw, 2rem);
}

.dashboard,
.reading-page,
.settings-page,
.legal-page,
.legal-index,
.card-library-page,
.card-page,
.ritual-catalog-page {
  padding-block: 24px 48px;
}

.ritual-catalog-page > .page-context-layout {
  margin-bottom: 32px;
}

.public-seal {
  min-height: 0;
  padding-block: 24px 48px;
}

.centered-page {
  min-height: max(520px, calc(100svh - 162px));
  padding-inline: 0;
}

.centered-page > .auth-panel,
.centered-page > .state-panel {
  width: min(520px, calc(100% - 48px));
}

@media (max-width: 760px) {
  .dashboard,
  .reading-page,
  .settings-page,
  .legal-page,
  .legal-index,
  .card-library-page,
  .card-page,
  .ritual-catalog-page {
    padding-block: 18px 32px;
  }

  .ritual-catalog-page > .page-context-layout {
    margin-bottom: 24px;
  }

  .public-seal {
    padding-block: 18px 32px;
  }

  .centered-page {
    min-height: 0;
    padding-bottom: 32px;
  }

  .centered-page > .auth-panel,
  .centered-page > .state-panel {
    width: min(520px, calc(100% - 32px));
  }
}

/* Source: /assets/admin-entry.css */
.admin-entry {
  width: min(1040px, calc(100% - 48px));
  min-height: max(520px, calc(100svh - 230px));
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding-block: 48px 64px;
}

.admin-entry__panel {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: var(--glass-line-soft);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.admin-entry__intro,
.admin-entry__state {
  min-width: 0;
  padding: clamp(32px, 5vw, 56px);
  background: rgba(8, 14, 20, .93);
}

.admin-entry__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
  background:
    radial-gradient(circle at 20% 12%, rgba(214, 168, 95, .13), transparent 17rem),
    linear-gradient(145deg, rgba(20, 26, 31, .96), rgba(9, 15, 21, .94));
}

.admin-entry__intro::after {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(214, 168, 95, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(214, 168, 95, .025), 0 0 0 36px rgba(214, 168, 95, .012);
  content: "";
  pointer-events: none;
}

.admin-entry__intro .eyebrow { margin-bottom: 13px; }
.admin-entry__intro h1 {
  max-width: 420px;
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 4.3vw, 3.75rem);
  letter-spacing: -.04em;
}
.admin-entry__intro p:last-child {
  max-width: 410px;
  margin-bottom: 0;
  color: var(--text-soft);
}

.admin-entry__mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 168, 95, .28);
  border-radius: 50%;
  color: var(--accent-amber-light);
  background: rgba(214, 168, 95, .055);
}
.admin-entry__mark .ritual-icon { width: 24px; height: 24px; }

.admin-entry__state {
  display: grid;
  align-content: center;
}

.admin-entry__state-card {
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(20, 31, 39, .78), rgba(10, 17, 23, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
}

.admin-entry__state-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border: 1px solid rgba(174, 205, 218, .2);
  border-radius: 50%;
  color: var(--text-soft);
  background: rgba(174, 205, 218, .045);
}
.admin-entry__state-icon .ritual-icon { width: 19px; height: 19px; }
.admin-entry__state-card[data-state="ready"] .admin-entry__state-icon { border-color: rgba(134, 169, 149, .28); color: #a6d4ba; background: rgba(118, 181, 151, .07); }
.admin-entry__state-card[data-state="verify"] .admin-entry__state-icon { border-color: rgba(214, 168, 95, .3); color: var(--accent-amber-light); background: rgba(214, 168, 95, .07); }

.admin-entry__state-card h2 {
  margin-bottom: 11px;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
}
.admin-entry__state-card > p {
  margin-bottom: 26px;
  color: var(--text-soft);
}
.admin-entry__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-entry__actions .btn { min-width: 170px; }

@media (max-width: 760px) {
  .admin-entry {
    width: min(100% - 32px, 560px);
    min-height: 0;
    padding-block: 24px 40px;
  }
  .admin-entry__panel { grid-template-columns: 1fr; }
  .admin-entry__intro,
  .admin-entry__state { padding: 28px 24px; }
  .admin-entry__intro { gap: 38px; }
  .admin-entry__intro::after { right: 28px; bottom: 25px; width: 58px; height: 58px; }
  .admin-entry__intro h1 { font-size: clamp(2rem, 11vw, 2.7rem); }
  .admin-entry__state-card { padding: 24px 20px; }
  .admin-entry__actions { display: grid; }
  .admin-entry__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-entry *, .admin-entry *::before, .admin-entry *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Source: /uikit-runtime/css/components/card-motion.css */
.tarot-live-card {
  --lift: 0px;
}

.deck-picker:not(.deck-picker--carousel) .deck-card {
  transition:
    filter 220ms var(--ease-default),
    margin 300ms var(--ease-ritual),
    transform 340ms var(--ease-ritual);
}

.deck-picker:not(.deck-picker--carousel) .deck-card img {
  transition: box-shadow 220ms var(--ease-default), filter 220ms var(--ease-default);
}

.deck-picker:not(.deck-picker--carousel) .deck-card:hover {
  z-index: 2;
  transform: none;
  filter: brightness(1.055);
}

.deck-picker:not(.deck-picker--carousel) .deck-card:hover img {
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(214, 168, 95, 0.22);
}

.deck-picker:not(.deck-picker--carousel) .deck-card.is-selected {
  z-index: 3;
  transform: translateY(-28px);
}

@media (prefers-reduced-motion: reduce) {
  .deck-picker:not(.deck-picker--carousel) .deck-card,
  .deck-picker:not(.deck-picker--carousel) .deck-card img {
    transition: none;
  }
}

/* Source: /uikit-runtime/css/components/modal.css */
.modal,
.modal-layer {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  overflow-y: auto;
  isolation: isolate;
}

.modal[hidden] {
  display: none;
}

.modal-layer {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 220ms var(--ease-default),
    visibility 220ms var(--ease-default);
}

.modal-layer.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.modal__backdrop,
.modal-layer::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  border: 0;
}

.modal-layer::before {
  content: "";
}

.modal__backdrop {
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: default;
}

.modal__dialog,
.modal > section,
.modal-preview--floating {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - clamp(32px, 6vw, 64px));
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(26px, 4vw, 40px);
  overflow-y: auto;
  border: 1px solid rgba(174, 205, 218, 0.16);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
  background:
    radial-gradient(ellipse 86% 110% at 100% 0%, rgba(214, 168, 95, 0.105), transparent 70%),
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.09), transparent 70%),
    rgba(12, 20, 27, 0.96);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(214, 229, 237, 0.09),
    inset 0 0 0 1px rgba(239, 231, 214, 0.025);
}

.modal__dialog::before,
.modal > section::before,
.modal-preview--floating::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(239, 231, 214, 0.04), transparent 26%, transparent 76%, rgba(214, 168, 95, 0.035));
}

.modal__dialog--wide,
.card-preview-modal > section {
  width: min(1080px, 100%);
}

.modal__dialog--danger {
  border-color: rgba(226, 132, 118, 0.46);
  background:
    radial-gradient(ellipse 86% 110% at 100% 0%, rgba(226, 132, 118, 0.18), transparent 70%),
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.06), transparent 70%),
    rgba(15, 18, 22, 0.97);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.58),
    0 0 38px rgba(210, 92, 82, 0.06),
    inset 0 1px 0 rgba(255, 211, 204, 0.1);
}

.modal__dialog > .eyebrow,
.modal > section > .eyebrow {
  padding-right: 50px;
  margin: 0;
}

.modal__dialog h2,
.modal > section h2,
.modal-preview--floating h3 {
  max-width: calc(100% - 42px);
  margin: 0;
  color: var(--text-main);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 560;
  line-height: 1.18;
}

.modal__dialog p,
.modal > section p,
.modal-preview--floating p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.65;
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.has-open-modal {
  overflow: hidden;
}

.modal:not([hidden]) > section,
.modal-layer.is-open > .modal-preview--floating {
  animation: qantaro-modal-in 320ms cubic-bezier(0.22, 0.9, 0.18, 1) both;
}

@keyframes qantaro-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@media (max-width: 760px) {
  .modal,
  .modal-layer {
    align-items: end;
    padding: 10px;
  }

  .modal__dialog,
  .modal > section,
  .modal-preview--floating {
    width: 100%;
    max-height: calc(100svh - 20px);
    padding: 28px 20px 22px;
    border-radius: var(--radius-lg);
  }

  .modal__actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal:not([hidden]) > section,
  .modal-layer.is-open > .modal-preview--floating {
    animation: none;
  }
}

/* Source: /uikit-runtime/css/components/modal-backdrop.css */
/* Canonical viewport treatment for every modal and native dialog. */
:root {
  --modal-backdrop-color: rgba(2, 7, 11, 0.74);
  --modal-backdrop-filter: blur(8px);
}

dialog::backdrop,
.modal__backdrop,
.modal-layer::before {
  background: var(--modal-backdrop-color);
  -webkit-backdrop-filter: var(--modal-backdrop-filter);
  backdrop-filter: var(--modal-backdrop-filter);
}

/* Source: /uikit-runtime/css/components/modal-close.css */
/* Canonical close control for modals, dialogs, popovers and dismissible notices. */
.modal__close,
.modal-preview__close,
.toast__close {
  --modal-close-size: 38px;
  --modal-close-ring: rgba(148, 190, 207, 0.28);
  width: var(--modal-close-size);
  min-width: var(--modal-close-size);
  max-width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-height: var(--modal-close-size);
  max-height: var(--modal-close-size);
  box-sizing: border-box;
  display: grid;
  flex: 0 0 var(--modal-close-size);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--text-soft, #c6ced1);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(214, 168, 95, 0.12), transparent 70%),
    rgba(7, 16, 24, 0.54);
  box-shadow:
    inset 0 0 0 1px var(--modal-close-ring),
    inset 0 1px 0 rgba(239, 211, 161, 0.08);
  cursor: pointer;
  transition:
    color var(--dur-default, 180ms) var(--ease-default, ease),
    background var(--dur-default, 180ms) var(--ease-default, ease),
    box-shadow var(--dur-default, 180ms) var(--ease-default, ease);
}

.modal__close,
.modal-preview__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
}

.toast__close {
  --modal-close-size: 30px;
}

.modal__close:hover,
.modal__close:focus-visible,
.modal-preview__close:hover,
.modal-preview__close:focus-visible,
.toast__close:hover,
.toast__close:focus-visible {
  outline: 0;
  --modal-close-ring: rgba(239, 207, 145, 0.46);
  color: var(--accent-amber-light, #efd091);
  background:
    radial-gradient(circle at 35% 28%, rgba(214, 168, 95, 0.2), transparent 64%),
    rgba(8, 24, 34, 0.88);
  box-shadow:
    0 0 24px rgba(214, 168, 95, 0.14),
    inset 0 0 0 1px var(--modal-close-ring),
    inset 0 1px 0 rgba(239, 211, 161, 0.12);
}

.modal__close > .ritual-icon,
.modal-preview__close > .ritual-icon,
.toast__close > .ritual-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

@media (max-width: 640px) {
  .modal__close,
  .modal-preview__close {
    top: 12px;
    right: 12px;
  }
}

/* Source: /uikit-runtime/css/components/toast.css */
.toast-region {
  position: fixed;
  z-index: 11000;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.09), transparent 70%), rgba(7, 16, 24, 0.94);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(239, 231, 214, 0.06);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  pointer-events: auto;
}
.toast__icon { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(104, 169, 206, 0.34); border-radius: 50%; color: #9fbed0; background: rgba(7, 16, 24, 0.54); box-shadow: inset 0 1px 0 rgba(239, 211, 161, 0.08); }
.toast__icon .ritual-icon { width: 15px; height: 15px; }

.toast__body { min-width: 0; }
.toast strong { display: block; color: var(--text-main); font-size: var(--text-xs); font-weight: 560; }
.toast strong[hidden] { display: none; }
.toast p { margin: 3px 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.45; overflow-wrap: anywhere; }
.toast strong[hidden] + p { margin-top: 0; }
.toast--success .toast__icon { border-color: rgba(141, 185, 161, 0.34); color: #a7d6bb; }
.toast--warning .toast__icon { border-color: rgba(214, 168, 95, 0.42); color: var(--accent-amber-light); }
.toast--danger .toast__icon { border-color: rgba(210, 112, 98, 0.5); color: #eca59a; }
.toast-live { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 220ms var(--ease-default), transform 260ms var(--ease-default); }
.toast-live.is-visible { opacity: 1; transform: none; }
@media (max-width: 560px) { .toast-region { right: 16px; bottom: 16px; left: 16px; width: auto; } }

/* Source: /uikit-runtime/css/components/information-center.css */
.information-page {
  --information-column: 740px;
  container-type: inline-size;
  width: var(--product-content-width, min(1320px, calc(100% - 48px)));
  margin: 0 auto;
  padding: 24px 0 64px;
}

.information-page > .page-context-layout { width: 100%; margin-bottom: 18px; }
.information-local-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 30px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-sm);
  background: rgba(8, 15, 21, .58);
}
.information-local-nav a {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--text-xs, .78rem);
  white-space: nowrap;
}
.information-local-nav a:hover,
.information-local-nav a:focus-visible { color: var(--text-main); background: rgba(255, 255, 255, .035); }
.information-local-nav a[aria-current="page"] { color: var(--text-main); background: rgba(214, 168, 95, .12); }

.information-heading { max-width: 760px; margin: 0 0 30px; }
.information-heading h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 2.6vw, 2rem); line-height: 1.14; text-wrap: balance; }
.information-heading > p { margin: 0; color: var(--text-soft); font-size: 1rem; line-height: 1.62; }

.information-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(10, 26, 36, .88), rgba(10, 14, 20, .78) 55%, rgba(45, 31, 18, .38));
  box-shadow: var(--shadow-deep);
}
.information-hero--spark {
  background:
    radial-gradient(ellipse 58% 130% at 100% 40%, rgba(214, 168, 95, .14), transparent 66%),
    radial-gradient(ellipse 48% 110% at 0% 12%, rgba(80, 151, 181, .11), transparent 72%),
    linear-gradient(135deg, rgba(10, 26, 36, .9), rgba(10, 14, 20, .8) 55%, rgba(45, 31, 18, .4));
}
.information-hero--spark::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 22%, rgba(174, 205, 218, .035) 48%, rgba(214, 168, 95, .055) 74%, transparent);
  content: "";
}
.information-hero__copy { position: relative; z-index: 2; align-self: center; }
.information-hero h1 { max-width: 680px; margin: 0 0 14px; font-size: clamp(1.75rem, 2.6vw, 2rem); line-height: 1.14; text-wrap: balance; }
.information-hero__lead { max-width: 660px; margin: 0; color: var(--text-soft); font-size: 1rem; line-height: 1.65; }
.information-hero__copy .btn { margin-top: 20px; }
.information-illustration { position: relative; z-index: 2; height: 170px; min-height: 0; margin: 0; border-radius: var(--radius-sm); overflow: hidden; isolation: isolate; }
.information-illustration::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 12, 18, .2), transparent 42%), linear-gradient(0deg, rgba(6, 12, 18, .18), transparent 45%); pointer-events: none; }
.information-illustration img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }

.information-atmosphere-lab { display: grid; gap: 16px; margin-top: 34px; }
.information-atmosphere-lab > header { max-width: 720px; }
.information-atmosphere-lab > header h2 { margin: 0 0 7px; font-size: 1.3rem; }
.information-atmosphere-lab > header p { margin: 0; color: var(--text-soft); line-height: 1.55; }
.information-atmosphere-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.information-atmosphere {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 152px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 38px rgba(0, 0, 0, .16);
}
.information-atmosphere > span,
.information-atmosphere > strong { position: relative; z-index: 2; }
.information-atmosphere > span { color: var(--accent-amber-light); font: 600 .65rem/1.4 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; }
.information-atmosphere > strong { max-width: 300px; color: var(--text-main); font-size: .9rem; font-weight: 560; line-height: 1.42; }
.information-atmosphere--glow { background: radial-gradient(ellipse 72% 130% at 100% 42%, rgba(214, 168, 95, .18), transparent 68%), radial-gradient(ellipse 65% 120% at 0% 0%, rgba(80, 151, 181, .13), transparent 72%), linear-gradient(135deg, rgba(10, 26, 36, .94), rgba(9, 14, 20, .92) 58%, rgba(42, 30, 19, .56)); }
.information-atmosphere--veil { background: linear-gradient(118deg, rgba(77, 147, 176, .13), transparent 38%, rgba(214, 168, 95, .13) 72%, transparent), radial-gradient(circle at 72% 20%, rgba(239, 207, 145, .09), transparent 34%), rgba(8, 17, 23, .92); }
.information-atmosphere--horizon { background: radial-gradient(ellipse 90% 22% at 50% 58%, rgba(214, 168, 95, .15), transparent 72%), linear-gradient(180deg, rgba(8, 22, 31, .96), rgba(8, 14, 20, .94) 58%, rgba(31, 24, 17, .7)); }

.information-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, var(--information-column)) minmax(300px, 1fr); gap: clamp(28px, 3vw, 44px); align-items: start; margin-top: 42px; }
.information-prose { width: 100%; max-width: var(--information-column); color: var(--text-soft); font-size: 1rem; line-height: 1.7; }
.information-prose > :first-child { margin-top: 0; }
.information-prose h2 { margin: 44px 0 14px; color: var(--text-main); font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; }
.information-prose h3 { margin: 28px 0 10px; color: var(--text-main); font-size: 1.16rem; }
.information-prose p, .information-prose li { max-width: var(--information-column); }
.information-prose p { margin: 0 0 16px; }
.information-prose strong { color: var(--text-main); font-weight: 600; }
.information-prose a { color: var(--accent-amber-light); text-decoration: underline; text-decoration-color: rgba(239, 207, 145, .38); text-underline-offset: .18em; }
.information-prose a:hover { text-decoration-color: currentColor; }
.information-prose code { padding: .15em .38em; border-radius: 5px; color: var(--accent-amber-light); background: rgba(214, 168, 95, .08); font-family: var(--font-mono); font-size: .86em; }
.information-prose ol, .information-prose ul { display: grid; gap: 10px; margin: 18px 0; padding-left: 1.35rem; }
.information-prose > ol { counter-reset: info-step; list-style: none; padding: 0; }
.information-prose > ol > li { position: relative; min-height: 0; padding: 14px 16px 14px 54px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-sm); background: rgba(11, 22, 29, .46); }
.information-prose > ol > li::before { counter-increment: info-step; content: counter(info-step, decimal-leading-zero); position: absolute; left: 17px; top: 18px; width: 22px; color: var(--text-muted); font: 600 .7rem/1 var(--font-mono); text-align: center; }
.information-prose > ol > li strong { display: block; margin-bottom: 4px; color: var(--text-main); line-height: 1.35; }
.information-prose > ol > li strong + br { display: none; }

.information-prose .information-disclosure { margin: 0 0 8px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-sm); background: rgba(10, 20, 27, .46); }
.information-prose .information-disclosure summary { position: relative; padding: 15px 46px 15px 17px; cursor: pointer; color: var(--text-main); font-weight: 560; line-height: 1.4; list-style: none; }
.information-prose .information-disclosure summary::-webkit-details-marker { display: none; }
.information-prose .information-disclosure summary::after { content: none; }
.information-prose .information-disclosure summary > .ritual-icon { position: absolute; top: 50%; right: 17px; width: 17px; height: 17px; color: var(--text-muted); transform: translateY(-50%); transition: transform var(--dur-default) var(--ease-default), color var(--dur-default) var(--ease-default); }
.information-prose .information-disclosure[open] summary > .ritual-icon { color: var(--accent-amber-light); transform: translateY(-50%) rotate(180deg); }
.information-prose .information-disclosure > div { padding: 0 17px 16px; color: var(--text-soft); }
.information-prose .information-disclosure > div p { margin: 0; }
.information-prose .information-disclosure + .information-disclosure { margin-top: 8px; }

.information-aside { min-width: 0; position: sticky; top: 92px; }

/* Shared visual contract for every contextual page link. */
.information-nav-link,
.information-route-link { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(174, 205, 218, .12); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; background: radial-gradient(circle at 100% 0, rgba(214, 168, 95, .055), transparent 42%), rgba(6, 14, 20, .58); box-shadow: inset 0 1px 0 rgba(229, 238, 241, .025), 0 12px 28px rgba(0, 0, 0, .12); outline: 0; transition: color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-nav-link::before,
.information-route-link::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 22%, rgba(239, 207, 145, .075) 48%, transparent 74%); background-size: 220% 100%; background-position: 100% 0; transition: opacity var(--dur-default) var(--ease-default), background-position 720ms var(--ease-default); }
.information-nav-link:hover,
.information-nav-link:focus-visible,
.information-route-link:hover,
.information-route-link:focus-visible { color: var(--text-main); border-color: rgba(214, 168, 95, .42); background: radial-gradient(circle at 100% 0, rgba(214, 168, 95, .13), transparent 46%), rgba(10, 20, 27, .76); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .08), 0 0 0 3px rgba(214, 168, 95, .055), 0 18px 42px rgba(0, 0, 0, .24), 0 0 30px rgba(214, 168, 95, .06); }
.information-nav-link:hover::before,
.information-nav-link:focus-visible::before,
.information-route-link:hover::before,
.information-route-link:focus-visible::before { opacity: 1; background-position: 0 0; }
.information-nav-link__copy,
.information-route-link__copy { position: relative; z-index: 1; min-width: 0; display: grid; align-content: start; gap: 6px; }
.information-nav-arrow,
.information-route-link__arrow { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; align-self: center; border: 1px solid rgba(214, 168, 95, .24); border-radius: 50%; color: var(--accent-amber-light); background: rgba(214, 168, 95, .055); box-shadow: 0 0 0 0 rgba(214, 168, 95, 0), inset 0 1px 0 rgba(255, 255, 255, .03); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default), color var(--dur-default) var(--ease-default); }
.information-nav-arrow::before,
.information-route-link__arrow .ritual-icon { width: 16px; height: 16px; }
.information-nav-arrow .ritual-icon,
.information-route-link__arrow .ritual-icon { display: grid; place-items: center; }
.information-nav-link:hover .information-nav-arrow,
.information-nav-link:focus-visible .information-nav-arrow,
.information-route-link:hover .information-route-link__arrow,
.information-route-link:focus-visible .information-route-link__arrow,
.information-route-link__arrow--control:is(:hover,:focus-visible) { outline:0;color: #fff0c9; border-color: rgba(239, 207, 145, .58); background: rgba(214, 168, 95, .13); box-shadow: 0 0 0 5px rgba(214, 168, 95, .055), 0 0 24px rgba(214, 168, 95, .15); }

/* Editorial links can form a continuous feed inside a shared panel. */
.information-route-link.information-route-link--feed { border:0; border-radius:0; background:none; box-shadow:none; }
.information-route-link--feed + .information-route-link--feed { border-top:1px solid var(--glass-line-soft); }
.information-route-link.information-route-link--feed:is(:hover,:focus-visible) { background:radial-gradient(circle at 100% 0,rgba(214,168,95,.13),transparent 46%),rgba(10,20,27,.36); box-shadow:inset 0 1px 0 rgba(239,225,196,.08); }
@media(prefers-reduced-motion:reduce) { .information-route-link--feed,.information-route-link--feed::before,.information-route-link--feed .information-route-link__arrow { transition:none; } }

/* Contextual topic navigation alternatives: composition changes, interaction does not. */
.information-topic-lab { display: grid; gap: 18px; margin-top: 48px; }
.information-topic-lab__heading { max-width: 680px; }
.information-topic-lab__heading h2 { margin: 0 0 8px; font-size: 1.45rem; }
.information-topic-lab__heading p { margin: 0; color: var(--text-soft); line-height: 1.58; }
.information-topic-lab__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.information-topic-option { min-width: 0; display: grid; gap: 10px; }
.information-topic-option__label { margin: 0; color: var(--text-muted); font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.information-topic-sample,
.information-topic-panel { min-width: 0; padding: 16px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-md); background: radial-gradient(circle at 12% 8%, rgba(214, 168, 95, .055), transparent 32%), linear-gradient(145deg, rgba(12, 24, 31, .7), rgba(7, 14, 20, .58)); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .04), 0 18px 42px rgba(0, 0, 0, .16); }
.information-topic-panel { width: 100%; box-sizing: border-box; }
.information-topic-nav { min-width: 0; display: grid; gap: 9px; }
.information-topic-nav__head { display: grid; gap: 4px; margin-bottom: 5px; }
.information-topic-nav__head h2,
.information-topic-nav__head h3 { margin: 0; color: var(--text-main); font-size: 1rem; font-weight: 580; line-height: 1.35; }
.information-topic-nav__head p { margin: 0; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
.information-topic-link { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: start; gap: 12px; padding: 14px; }
.information-topic-link .information-nav-arrow { grid-column: 2; grid-row: 1; }
.information-topic-link strong { color: var(--text-main); font-size: .9rem; font-weight: 580; line-height: 1.38; }
.information-topic-link small { color: var(--text-soft); font-size: .72rem; line-height: 1.48; }
.information-topic-link__eyebrow { color: var(--text-muted); font-size: .62rem; line-height: 1.35; letter-spacing: .045em; text-transform: uppercase; }
.information-topic-nav__group { overflow: hidden; border: 1px solid rgba(174, 205, 218, .12); border-radius: var(--radius-sm); background: rgba(6, 14, 20, .38); box-shadow: 0 12px 28px rgba(0, 0, 0, .1); }
.information-topic-nav--grouped .information-topic-link { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.information-topic-nav--grouped .information-topic-link + .information-topic-link { border-top: 1px solid rgba(174, 205, 218, .12); }
.information-topic-nav--grouped .information-topic-link:hover,
.information-topic-nav--grouped .information-topic-link:focus-visible { background: radial-gradient(circle at 100% 0, rgba(214, 168, 95, .13), transparent 46%), rgba(10, 20, 27, .76); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .06); }
.information-topic-link--primary { padding-block: 16px; }
.information-topic-link--support { padding-block: 12px; background: rgba(8, 17, 23, .44); }
.information-topic-link--support .information-nav-arrow { width: 30px; height: 30px; }

/* Alternative topic navigation family: clean material-led compositions. */
.information-topic-experiments { display: grid; gap: 18px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--glass-line-soft); }
.information-alt-sample { min-width: 0; overflow: hidden; border: 1px solid rgba(187, 202, 202, .15); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 rgba(239, 231, 214, .055), 0 18px 42px rgba(0, 0, 0, .16); }
.information-alt-nav { min-width: 0; display: grid; align-content: start; gap: 15px; padding: 18px; }
.information-alt-head { display: grid; gap: 5px; }
.information-alt-head span { color: var(--text-muted); font-size: .64rem; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
.information-alt-head strong { color: var(--text-main); font-size: 1rem; font-weight: 580; line-height: 1.35; }
.information-alt-list { display: grid; gap: 8px; }
.information-alt-link { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 13px 12px; overflow: hidden; border: 1px solid rgba(174, 205, 218, .11); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; outline: 0; background: rgba(7, 15, 21, .42); box-shadow: inset 0 1px 0 rgba(239, 231, 214, .025); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-alt-link::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 22%, rgba(239, 207, 145, .07) 50%, transparent 76%); background-size: 220% 100%; background-position: 100% 0; transition: opacity var(--dur-default) var(--ease-default), background-position 700ms var(--ease-default); }
.information-alt-link:hover,
.information-alt-link:focus-visible { border-color: rgba(214, 168, 95, .34); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .07), 0 12px 30px rgba(0, 0, 0, .2), 0 0 22px rgba(214, 168, 95, .045); }
.information-alt-link:hover::before,
.information-alt-link:focus-visible::before { opacity: 1; background-position: 0 0; }
.information-alt-link__copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 5px; }
.information-alt-link__copy strong { color: var(--text-main); font-size: .88rem; font-weight: 580; line-height: 1.38; }
.information-alt-link__copy small { color: var(--text-muted); font-size: .69rem; line-height: 1.45; }
.information-alt-cue { position: relative; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; color: rgba(239, 207, 145, .7); transition: color var(--dur-default) var(--ease-default), filter var(--dur-default) var(--ease-default); }
.information-alt-cue .ritual-icon { width: 15px; height: 15px; }
.information-alt-link:hover .information-alt-cue,
.information-alt-link:focus-visible .information-alt-cue { color: #fff0c9; filter: drop-shadow(0 0 7px rgba(239, 207, 145, .42)); }
.information-alt-link--cold { background: radial-gradient(ellipse 92% 120% at 0% 0%, rgba(104, 169, 206, .105), transparent 70%), rgba(7, 15, 21, .45); }
.information-alt-link--cold:hover,
.information-alt-link--cold:focus-visible { background: radial-gradient(ellipse 92% 120% at 0% 0%, rgba(104, 169, 206, .16), transparent 70%), rgba(9, 19, 26, .72); }
.information-alt-link--warm { background: radial-gradient(ellipse 92% 120% at 100% 0%, rgba(214, 168, 95, .11), transparent 70%), rgba(7, 15, 21, .45); }
.information-alt-link--warm:hover,
.information-alt-link--warm:focus-visible { background: radial-gradient(ellipse 92% 120% at 100% 0%, rgba(214, 168, 95, .17), transparent 70%), rgba(11, 20, 25, .72); }

.information-alt-sample--spectrum { background: radial-gradient(ellipse 95% 105% at -12% -10%, rgba(92, 139, 164, .16), transparent 70%), radial-gradient(ellipse 92% 100% at 112% 0%, rgba(214, 168, 95, .13), transparent 69%), linear-gradient(180deg, rgba(12, 18, 23, .68), rgba(7, 12, 16, .58)); }
.information-alt-sample--split { background: linear-gradient(90deg, rgba(92, 139, 164, .075), transparent 48%, rgba(214, 168, 95, .075)), linear-gradient(180deg, rgba(10, 20, 27, .72), rgba(6, 13, 18, .58)); }
.information-alt-link__kind { position: relative; z-index: 1; grid-column: 1 / -1; color: rgba(239, 207, 145, .67); font-size: .61rem; line-height: 1.4; letter-spacing: .045em; text-transform: uppercase; }
.information-alt-actions { display: grid; gap: 8px; }
.information-alt-action { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 48px; overflow: hidden; border: 1px solid rgba(174, 205, 218, .12); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; outline: 0; background: rgba(7, 15, 21, .46); box-shadow: inset 0 1px 0 rgba(239, 231, 214, .025); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-alt-action::before { content: ""; position: absolute; inset: 0 48px 0 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent, rgba(239, 207, 145, .07), transparent); background-size: 220% 100%; background-position: 100% 0; transition: opacity var(--dur-default) var(--ease-default), background-position 700ms var(--ease-default); }
.information-alt-action:hover,
.information-alt-action:focus-visible { border-color: rgba(214, 168, 95, .36); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .07), 0 12px 30px rgba(0, 0, 0, .2); }
.information-alt-action:hover::before,
.information-alt-action:focus-visible::before { opacity: 1; background-position: 0 0; }
.information-alt-action--cold { background: radial-gradient(ellipse 92% 120% at 0% 0%, rgba(104, 169, 206, .11), transparent 70%), rgba(7, 15, 21, .46); }
.information-alt-action--warm { background: radial-gradient(ellipse 92% 120% at 100% 0%, rgba(214, 168, 95, .11), transparent 70%), rgba(7, 15, 21, .46); }
.information-alt-action__copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 5px; padding: 13px 14px; }
.information-alt-action__copy strong { font-size: .88rem; font-weight: 580; line-height: 1.38; }
.information-alt-action__copy small { color: var(--text-muted); font-size: .69rem; line-height: 1.45; }
.information-alt-action__button { position: relative; z-index: 1; display: grid; place-items: center; border-left: 1px solid rgba(174, 205, 218, .12); background: linear-gradient(180deg, rgba(174, 205, 218, .045), rgba(214, 168, 95, .035)); transition: background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-alt-action__button .information-alt-cue { align-self: center; justify-self: center; }
.information-alt-action:hover .information-alt-action__button,
.information-alt-action:focus-visible .information-alt-action__button { background: radial-gradient(circle, rgba(214, 168, 95, .14), transparent 72%), rgba(12, 23, 29, .72); box-shadow: inset 1px 0 0 rgba(239, 207, 145, .12), -8px 0 22px rgba(214, 168, 95, .04); }
.information-alt-action:hover .information-alt-cue,
.information-alt-action:focus-visible .information-alt-cue { color: #fff0c9; filter: drop-shadow(0 0 7px rgba(239, 207, 145, .42)); }

/* Continuous feed variant: the parent surface owns the frame. */
.information-alt-action.information-alt-action--feed { border:0; border-radius:0; background:none; box-shadow:none; }
.information-alt-action--feed + .information-alt-action--feed { border-top:1px solid var(--glass-line-soft); }
.information-alt-action--feed .information-alt-action__button { border:0; background:none; box-shadow:none; }
.information-alt-action--feed:is(:hover,:focus-visible) { background:rgba(174,205,218,.035); box-shadow:none; }
.information-alt-action--feed:is(:hover,:focus-visible) .information-alt-action__button { background:none; box-shadow:none; color:var(--accent-amber-light); }

.information-alt-sample--bands { background: radial-gradient(ellipse 100% 110% at 0% 100%, rgba(104, 169, 206, .1), transparent 72%), radial-gradient(ellipse 90% 100% at 100% 0%, rgba(214, 168, 95, .1), transparent 70%), linear-gradient(180deg, rgba(10, 20, 27, .7), rgba(6, 13, 18, .58)); }
.information-alt-bands { display: grid; gap: 9px; }
.information-alt-band { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 14px 13px 14px 16px; overflow: hidden; border: 1px solid rgba(174, 205, 218, .12); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; outline: 0; background: rgba(7, 15, 21, .4); box-shadow: inset 0 1px 0 rgba(239, 231, 214, .03); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.information-alt-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7; transition: opacity var(--dur-default) var(--ease-default), filter var(--dur-default) var(--ease-default); }
.information-alt-band--cold::before { background: linear-gradient(90deg, rgba(104, 169, 206, .13), transparent 74%); }
.information-alt-band--warm::before { background: linear-gradient(90deg, rgba(214, 168, 95, .12), transparent 74%); }
.information-alt-band:hover,
.information-alt-band:focus-visible { border-color: rgba(214, 168, 95, .36); background: rgba(10, 21, 28, .7); box-shadow: inset 0 1px 0 rgba(239, 225, 196, .07), 0 12px 30px rgba(0, 0, 0, .2), 0 0 22px rgba(214, 168, 95, .04); }
.information-alt-band:hover::before,
.information-alt-band:focus-visible::before { opacity: 1; filter: brightness(1.22); }
.information-alt-band__copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 5px; }
.information-alt-band__copy strong { font-size: .88rem; font-weight: 580; line-height: 1.38; }
.information-alt-band__copy small { color: var(--text-muted); font-size: .69rem; line-height: 1.45; }
.information-alt-band:hover .information-alt-cue,
.information-alt-band:focus-visible .information-alt-cue { color: #fff0c9; filter: drop-shadow(0 0 7px rgba(239, 207, 145, .42)); }

.information-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.information-card { min-height: 168px; height: 100%; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-sm); background: linear-gradient(145deg, rgba(13, 27, 35, .66), rgba(8, 15, 21, .54)); }
.information-card h2, .information-card h3 { margin: 0 0 10px; color: var(--text-main); font-size: 1.15rem; line-height: 1.32; }
.information-card p { margin: 0 0 18px; color: var(--text-soft); line-height: 1.58; }
.information-card .btn, .information-card .text-link { margin-top: auto; align-self: flex-start; }
.information-card .text-link { color: var(--accent-amber-light); text-decoration: underline; text-decoration-color: rgba(239, 207, 145, .32); text-underline-offset: .2em; }
.information-card__meta { order: -1; margin-bottom: 9px; color: var(--text-muted); font-size: .69rem; line-height: 1.4; }

.information-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; max-width: 720px; margin-top: 22px; }
.information-search .field { min-width: 0; }
.information-search .btn { min-height: 52px; align-self: end; }
.information-faq { display: grid; gap: 8px; margin-top: 30px; }
.information-faq details { border: 1px solid var(--glass-line-soft); border-radius: var(--radius-sm); background: rgba(10, 20, 27, .46); }
.information-faq summary { padding: 16px 48px 16px 18px; cursor: pointer; color: var(--text-main); font-weight: 560; line-height: 1.4; }
.information-faq details > div { max-width: 760px; padding: 0 18px 18px; color: var(--text-soft); line-height: 1.65; }
.information-faq details > div p { margin: 0 0 12px; }
.information-faq details > div p:last-child { margin-bottom: 0; }


.information-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1.58fr);
  gap: clamp(22px, 3.5vw, 46px);
  margin-top: 48px;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 7% 18%, rgba(214, 168, 95, .09), transparent 27%),
    radial-gradient(circle at 88% 80%, rgba(104, 169, 206, .075), transparent 31%),
    linear-gradient(135deg, rgba(12, 24, 31, .74), rgba(7, 14, 20, .6));
  box-shadow: inset 0 1px 0 rgba(239, 225, 196, .035), 0 20px 50px rgba(0, 0, 0, .16);
  isolation: isolate;
}
.information-next::before,
.information-next::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(239, 207, 145, .62);
  box-shadow: 72px 38px 0 rgba(174, 205, 218, .24), 156px -3px 0 rgba(239, 207, 145, .22), 248px 62px 0 rgba(174, 205, 218, .2);
  animation: information-glimmer 5.6s ease-in-out infinite alternate;
}
.information-next::before { top: 18px; left: 34%; }
.information-next::after { right: 9%; bottom: 24px; opacity: .48; animation-delay: -2.8s; }
.information-next__intro { position: relative; z-index: 1; align-self: center; display: grid; gap: 8px; }
.information-next h2 { margin: 0 0 8px; font-size: 1.18rem; font-weight: 580; }
.information-next__intro p { max-width: 250px; margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.information-next__intro h2 { margin: 0; }
.information-next__links { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; gap: 10px; }
.information-route-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-rows: auto;
  gap: 9px 14px;
  align-items: start;
  padding: 17px;
}
.information-route-link * { text-decoration: none; }
.information-route-link__meta { color: var(--text-muted); font-size: .68rem; line-height: 1.35; letter-spacing: .045em; text-transform: uppercase; }
.information-route-link strong { color: var(--text-main); font-size: 1rem; font-weight: 580; line-height: 1.35; }
.information-route-link p { margin: 0; color: var(--text-soft); font-size: .82rem; line-height: 1.5; }
.information-route-link > .information-nav-arrow,
.information-route-link__arrow { grid-column: 2; grid-row: 1; }

@keyframes information-glimmer {
  0%, 32% { opacity: .24; filter: brightness(.86); }
  68%, 100% { opacity: .72; filter: brightness(1.18); }
}

/* InformationRouteNav alternatives: kept together in UIKit until one becomes canonical. */
.information-route-lab { display: grid; gap: 18px; margin-top: 48px; }
.information-route-lab__heading { max-width: 680px; }
.information-route-lab__heading h2 { margin: 0 0 8px; font-size: 1.45rem; }
.information-route-lab__heading p { margin: 0; color: var(--text-soft); line-height: 1.58; }
.information-route-option { display: grid; gap: 10px; }
.information-route-option__label { margin: 0; color: var(--text-muted); font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.information-route-link--compact { grid-template-rows: auto; padding: 14px 15px; }
.information-route-link--compact .information-route-link__copy { align-self: center; }
.information-route-link--compact .information-route-link__arrow { grid-row: 1; }

.information-route-nav--minimal { position: relative; padding-top: 17px; border-top: 1px solid var(--glass-line); }
.information-route-nav--minimal::before { content: ""; position: absolute; top: -1px; left: 0; width: 92px; height: 1px; background: linear-gradient(90deg, var(--accent-amber), transparent); box-shadow: 0 0 12px rgba(214, 168, 95, .2); }
.information-route-nav--minimal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.information-route-nav--minimal__head h3 { margin: 0; font-size: 1rem; font-weight: 580; }
.information-route-nav--minimal__head span { color: var(--text-muted); font-size: .74rem; }
.information-route-nav--minimal .information-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.information-route-nav--editorial {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1.62fr);
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(12, 24, 31, .7), rgba(7, 14, 20, .56));
  box-shadow: inset 0 1px 0 rgba(239, 225, 196, .035), 0 18px 42px rgba(0, 0, 0, .14);
}
.information-route-nav--editorial__head { align-self: center; padding-left: 16px; border-left: 2px solid rgba(214, 168, 95, .4); }
.information-route-nav--editorial__head h3 { margin: 0 0 7px; font-size: 1.16rem; }
.information-route-nav--editorial__head p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.information-route-nav--editorial .information-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.information-route-nav--illustrated {
  position: relative;
  min-height: 212px;
  display: grid;
  grid-template-columns: minmax(220px, .64fr) minmax(0, 1.36fr);
  overflow: hidden;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background: rgba(7, 15, 21, .7);
  box-shadow: inset 0 1px 0 rgba(239, 225, 196, .035), 0 20px 48px rgba(0, 0, 0, .17);
}
.information-route-nav--illustrated__visual { position: relative; min-height: 212px; margin: 0; overflow: hidden; }
.information-route-nav--illustrated__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 13, 19, .12), rgba(6, 13, 19, .78) 92%), linear-gradient(0deg, rgba(6, 13, 19, .32), transparent 60%); }
.information-route-nav--illustrated__visual img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78) brightness(.7); }
.information-route-nav--illustrated__body { display: grid; align-content: center; gap: 14px; padding: 22px 24px 22px 4px; }
.information-route-nav--illustrated__head h3 { margin: 0 0 6px; font-size: 1.14rem; }
.information-route-nav--illustrated__head p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.information-route-nav--illustrated .information-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .information-route-nav--editorial { grid-template-columns: 1fr; gap: 16px; }
  .information-route-nav--editorial__head { max-width: 560px; }
  .information-route-nav--illustrated { grid-template-columns: 180px minmax(0, 1fr); }
  .information-route-nav--illustrated .information-next__links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .information-route-lab { margin-top: 38px; }
  .information-route-nav--minimal__head { display: grid; gap: 4px; }
  .information-route-nav--minimal .information-next__links,
  .information-route-nav--editorial .information-next__links { grid-template-columns: 1fr; }
  .information-route-nav--editorial { padding: 16px; }
  .information-route-nav--illustrated { grid-template-columns: 1fr; }
  .information-route-nav--illustrated__visual { height: 112px; min-height: 0; }
  .information-route-nav--illustrated__visual::after { background: linear-gradient(0deg, rgba(6, 13, 19, .82), rgba(6, 13, 19, .12)); }
  .information-route-nav--illustrated__body { padding: 0 16px 16px; }
}
.information-page .state-panel { min-height: 0; padding: 20px; }
.information-page .state-panel h2 { margin: 0 0 8px; font-size: 1.2rem; }
.information-page .state-panel p { margin: 0; color: var(--text-soft); }

.support-panel { min-width: 0; max-width: 800px; box-sizing: border-box; padding: 22px; border: 1px solid var(--glass-line-soft); border-radius: var(--radius-md); background: radial-gradient(ellipse 72% 90% at 0 0, rgba(104, 169, 206, .055), transparent 72%), radial-gradient(ellipse 62% 86% at 100% 100%, rgba(214, 168, 95, .04), transparent 72%), rgba(10, 20, 27, .4); box-shadow: inset 0 1px 0 rgba(214, 229, 237, .045); }
.support-form { min-width: 0; display: grid; gap: 15px; }
.support-form .bot-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.support-form__row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.support-form__row > :only-child { grid-column: 1 / -1; }
.support-form .input, .support-form .select, .support-form .textarea { width: 100%; }
.support-form .textarea { min-height: 122px; }
.support-form__file { padding: 14px; border: 1px dashed var(--glass-line); border-radius: var(--radius-sm); background: linear-gradient(100deg, rgba(104, 169, 206, .035), rgba(214, 168, 95, .025)); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.support-form__file:hover, .support-form__file:focus-within { border-color: rgba(174, 205, 218, .27); background: linear-gradient(100deg, rgba(104, 169, 206, .055), rgba(214, 168, 95, .04)); box-shadow: 0 0 0 4px rgba(104, 169, 206, .055); }
.support-form__file input { width: 100%; max-width: 100%; color: var(--text-soft); font: inherit; font-size: var(--text-small); }
.support-form__file input::file-selector-button { min-height: 34px; margin-right: 12px; padding: 0 14px; border: 1px solid rgba(214, 168, 95, .22); border-radius: var(--radius-sm); color: var(--text-main); cursor: pointer; font: inherit; background: linear-gradient(135deg, rgba(104, 169, 206, .08), rgba(214, 168, 95, .09)); transition: border-color var(--dur-default) var(--ease-default), background var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default); }
.support-form__file input::file-selector-button:hover { border-color: rgba(214, 168, 95, .42); background: linear-gradient(135deg, rgba(104, 169, 206, .12), rgba(214, 168, 95, .14)); box-shadow: 0 7px 20px rgba(0, 0, 0, .16); }
.support-form__file small { display: block; margin-top: 8px; color: var(--text-muted); }
.support-form > .btn { justify-self: start; }
.support-warning { margin: 0; padding: 13px 15px; border-left: 2px solid rgba(214, 168, 95, .56); background: rgba(214, 168, 95, .05); color: var(--text-soft); font-size: .88rem; line-height: 1.55; }
.support-notice, .support-error { max-width: 800px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid rgba(214, 168, 95, .32); border-radius: var(--radius-sm); background: rgba(214, 168, 95, .07); color: var(--text-main); }
.support-error { border-color: rgba(205, 105, 91, .46); background: rgba(205, 105, 91, .07); }

@media (max-width: 900px) {
  .information-hero { grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr); }
  .information-layout { grid-template-columns: 1fr; }
  .information-aside { position: static; }
  .information-grid { grid-template-columns: repeat(2, 1fr); }
  .information-topic-lab__grid { grid-template-columns: 1fr; }
  .information-atmosphere-grid { grid-template-columns: 1fr; }
  .information-next { grid-template-columns: 1fr; gap: 18px; }
  .information-next__intro { grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; }
  .information-next__intro p { max-width: 620px; }
}

@media (max-width: 640px) {
  .information-topic-lab { margin-top: 38px; }
  .information-topic-experiments { margin-top: 38px; padding-top: 24px; }
  .information-alt-sample { min-height: 0; }
  .information-page { width: min(100% - 32px, 1320px); padding: 18px 0 48px; }
  .information-page > .page-context-layout { margin-bottom: 14px; }
  .information-local-nav { margin: 0 -16px 24px; padding-inline: 16px; border-inline: 0; border-radius: 0; scroll-snap-type: x mandatory; }
  .information-local-nav a { scroll-snap-align: start; }
  .information-heading { margin-bottom: 24px; }
  .information-hero { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .information-illustration { display: none; }
  .information-layout { margin-top: 30px; }
  .information-prose h2 { margin-top: 34px; }
  .information-grid { grid-template-columns: 1fr; }
  .information-card { min-height: 0; }
  .support-panel { padding: 18px; }
  .support-form__row { grid-template-columns: 1fr; }
  .information-search { grid-template-columns: 1fr; }
  .information-search .btn { width: 100%; }
  .information-next { margin-top: 38px; padding: 16px; }
  .information-next__links { grid-template-columns: 1fr; }
  .information-route-link { padding: 15px; }
}

@container (max-width: 700px) {
  .information-topic-lab__grid { grid-template-columns: 1fr; }
  .information-alt-sample { min-height: 0; }
  .information-next { grid-template-columns: 1fr; gap: 18px; }
  .information-next__intro { grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; }
  .information-next__intro p { max-width: 620px; }
  .information-next__links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .information-page * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Source: /uikit-runtime/css/components/standard-page-layout.css */
/*
 * Canonical product-page rhythm.
 *
 * The rituals catalog is the visual reference: every regular product page starts
 * at the same distance from the persistent header, keeps the same breadcrumb-to-
 * content gap, and finishes with the same 48px gap that separates catalog
 * pagination from the footer. Page-specific components own their internal
 * composition, not the outer page rhythm.
 */
.product-main {
  --standard-page-top: 24px;
  --standard-page-end-gap: 48px;
  --standard-page-context-gap: 32px;
}

.product-main > :where(.product-section:not(.public-seal), .information-page, .ritual-route) {
  padding-top: var(--standard-page-top);
}

.product-main > :where(.product-section:not(.public-seal), .information-page, .ritual-route) {
  padding-bottom: var(--standard-page-end-gap);
}

.product-main > :where(.product-section:not(.public-seal), .information-page, .ritual-route) > .page-context-layout {
  margin-bottom: var(--standard-page-context-gap);
}

@media (max-width: 760px) {
  .product-main {
    --standard-page-top: 18px;
    --standard-page-end-gap: 32px;
    --standard-page-context-gap: 24px;
  }
}

/* Source: /assets/home-sky.css */
/* Persistent atmosphere shared by the product and prelaunch shells. */
body:has(> .home-sky) { isolation: isolate; }

.home-sky {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 85% at 0% 0%, rgba(74, 143, 174, .12), transparent 72%),
    radial-gradient(ellipse 80% 85% at 100% 100%, rgba(214, 168, 95, .13), transparent 72%),
    linear-gradient(to bottom right, #06131d 0%, #050b11 50%, #1b140e 100%);
}

/* One continuous field, blended below the stationary texture and stars. */
.home-sky__aurora {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Very low-opacity neutral noise dithers dark transitions after blending. */
.home-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/home-sky-grain.svg") repeat;
  background-size: 192px 192px;
  opacity: .018;
  pointer-events: none;
}

/* Trial finish: remove the modifier to restore the smooth sky. */
.home-sky--matte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/home-sky-grain.svg") repeat;
  background-size: 192px 192px;
  mix-blend-mode: soft-light;
  opacity: .22;
  pointer-events: none;
}

[data-page="home"] > .landing-hero-scene {
  background: transparent;
}

[data-page="home"] > .landing-hero-scene::before,
[data-page="home"] > .landing-hero-scene::after {
  content: none;
}

.home-sky > .cosmic-scene__starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.site-firefly { --firefly-x: 50%; --firefly-y: 42%; position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; opacity: 1; mix-blend-mode: screen; }
.site-firefly::before, .site-firefly::after { content: ""; position: absolute; left: var(--firefly-x); top: var(--firefly-y); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform, opacity, filter; }
.site-firefly::before { width: 370px; background: radial-gradient(circle, rgba(255,253,238,.16) 0, rgba(255,229,173,.1) 10%, rgba(246,201,124,.065) 29%, rgba(126,177,194,.038) 52%, transparent 78%); animation: site-lumos-breathe 4.8s ease-in-out infinite; }
.site-firefly::after { width: 350px; background: radial-gradient(circle, rgba(255,253,238,.1) 0, rgba(255,229,173,.075) 18%, rgba(246,201,124,.045) 40%, rgba(126,177,194,.024) 60%, transparent 78%); animation: site-lumos-wave 3.9s cubic-bezier(.2,.62,.3,1) infinite; }
@keyframes site-lumos-breathe { 0%, 100% { opacity: .8; filter: blur(13px) brightness(.94); transform: translate(-50%, -50%) scale(.98); } 52% { opacity: .94; filter: blur(14px) brightness(1.03); transform: translate(-50%, -50%) scale(1.025); } }
@keyframes site-lumos-wave { 0% { opacity: .52; filter: blur(12px) brightness(1.08); transform: translate(-50%, -50%) scale(.18); } 24% { opacity: .4; } 68% { opacity: .14; } 100% { opacity: 0; filter: blur(16px) brightness(.9); transform: translate(-50%, -50%) scale(1.55); } }

.site-firefly.is-paused::before, .site-firefly.is-paused::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .site-firefly::before, .site-firefly::after { animation: none; will-change: auto; }
  .site-firefly::after { opacity: 0; }
}

/* Cursor light has no role when no mouse is available. */
.site-firefly[hidden] { display: none; }
.site-firefly[hidden]::before, .site-firefly[hidden]::after { animation: none; will-change: auto; }
@media not all and (any-hover: hover), not all and (any-pointer: fine) {
  .site-firefly { display: none; }
  .site-firefly::before, .site-firefly::after { animation: none; will-change: auto; }
}

/* Source: /assets/analytics-consent.css */
.analytics-consent {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: start;
  padding: max(28px, env(safe-area-inset-bottom)) max(36px, env(safe-area-inset-right));
  color: var(--text-main, #eef1ed);
  pointer-events: none;
}
.analytics-consent[hidden] { display: none; }
.analytics-consent__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  overflow: hidden;
  width: min(460px, calc(100vw - 72px));
  padding: 16px 18px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid rgba(205,226,234,.18);
  border-radius: 18px;
  background: radial-gradient(circle at 76% 20%, rgba(56,136,159,.16), transparent 38%), linear-gradient(145deg, rgba(15,27,35,.985), rgba(7,13,19,.99));
  box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.045);
  pointer-events: auto;
}
.analytics-consent__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background-image: radial-gradient(circle at 8% 28%, rgba(239,207,145,.55) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 22%, rgba(184,220,235,.42) 0 1px, transparent 1.5px), radial-gradient(circle at 62% 78%, rgba(239,207,145,.34) 0 1px, transparent 1.5px);
}
.analytics-consent__accent {
  position: absolute;
  top: 0;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(104,169,206,.5), rgba(239,207,145,.7), transparent);
  box-shadow: 0 0 18px rgba(214,168,95,.14);
}
.analytics-consent__copy { max-width: 510px; }
.analytics-consent__eyebrow {
  margin: 0 0 8px;
  color: var(--accent-amber, #d6a85f);
  font: 600 .7rem/1.4 var(--font-mono, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.analytics-consent__copy h2,
.analytics-preferences h2 {
  margin: 0;
  color: var(--text-main, #eef1ed);
  font: 600 clamp(1.25rem,2.4vw,1.48rem)/1.15 var(--font-display, Georgia, serif);
  text-wrap: balance;
}
.analytics-consent__copy > p:last-child,
.analytics-preferences__lead {
  margin: 9px 0 0;
  color: var(--text-soft, #b5bdbe);
  font-size: .84rem;
  line-height: 1.55;
}
.analytics-consent__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-self: stretch;
  gap: 10px;
}
.analytics-consent__actions--single { grid-template-columns: 1fr; }
.analytics-consent__actions .btn { min-height: 44px; padding-inline: 16px; font-size: .82rem; white-space: normal; }
.analytics-consent__actions .btn--secondary { color: var(--text-soft, #b5bdbe); }
.analytics-consent__meta {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(205,226,234,.11);
  color: var(--text-muted, #929c9e);
  font-size: .73rem;
}
.analytics-consent__meta > a,
.analytics-consent__details > summary,
.analytics-settings-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(205,226,234,.3);
  text-underline-offset: 4px;
  transition: color var(--dur-default,180ms) ease, text-decoration-color var(--dur-default,180ms) ease;
}
.analytics-consent__meta > a {
  position: absolute;
  top: 13px;
  right: 0;
  white-space: nowrap;
}
.analytics-consent__meta > a:hover,
.analytics-consent__details > summary:hover,
.analytics-settings-link:hover { color: var(--text-main,#eef1ed); text-decoration-color: rgba(239,207,145,.58); }
.analytics-consent__details { flex: 1 1 auto; min-width: 0; }
.analytics-consent__details > summary { width: max-content; max-width: calc(100% - 170px); cursor: pointer; list-style: none; white-space: nowrap; }
.analytics-consent__details > summary::-webkit-details-marker { display: none; }
.analytics-consent__details > summary::after { content: " +"; color: var(--accent-amber,#d6a85f); }
.analytics-consent__details[open] > summary::after { content: " \2212"; }
.analytics-consent__details .analytics-preferences__form { margin-top: 13px; }
.analytics-settings-link { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.analytics-preferences {
  width: min(640px,calc(100% - 32px));
  padding: clamp(24px,4vw,36px);
  border: 1px solid rgba(205,226,234,.19);
  border-radius: 18px;
  background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(214,168,95,.08), transparent 66%), linear-gradient(145deg, rgba(12,24,32,.99), rgba(8,15,21,.99));
  color: var(--text-main,#eef1ed);
  box-shadow: 0 34px 110px rgba(0,0,0,.68), inset 0 1px 0 rgba(235,246,250,.07);
}
.analytics-preferences:not([open]) { display: none; }
.analytics-preferences__lead { margin-bottom: 22px; }
.analytics-preferences__form { display: grid; gap: 18px; }
.analytics-preferences__form > .btn {
  justify-self: end;
  min-width: 0;
  min-height: 44px;
  padding-inline: 16px;
  font-size: .82rem;
}
.analytics-preferences__options { display: grid; gap: 10px; }
.analytics-preferences__option {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 15px 16px;
  border: 1px solid rgba(205,226,234,.14);
  border-radius: 12px;
  background: rgba(5,13,18,.44);
  cursor: pointer;
}
.analytics-preferences__option--required { cursor: default; }
.analytics-preferences__option input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-amber,#d6a85f); }
.analytics-preferences__option input:disabled { opacity: .72; }
.analytics-preferences__option span { display: grid; gap: 4px; }
.analytics-preferences__option strong { color: var(--text-main,#eef1ed); font-size: .9rem; font-weight: 600; }
.analytics-preferences__option small { color: var(--text-muted,#929c9e); font-size: .78rem; line-height: 1.45; }
.analytics-preferences__option em { color: var(--accent-amber-light,#efcf91); font: 500 .67rem/1.4 var(--font-mono,monospace); font-style: normal; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.analytics-consent :focus-visible,
.analytics-settings-link:focus-visible,
.analytics-preferences :focus-visible { outline: 2px solid var(--accent-cold,#91d6e4); outline-offset: 3px; }
@media (max-width: 780px) {
  .analytics-consent { padding: 12px; }
  .analytics-consent__card { width: 100%; gap: 10px; padding: 14px 16px; }
  .analytics-consent__actions { grid-template-columns: 1fr; width: 100%; }
  .analytics-consent__actions .btn { width: 100%; }
  .analytics-consent__details > summary { max-width: calc(100% - 155px); }
  .analytics-preferences__option { grid-template-columns: auto minmax(0,1fr); }
  .analytics-preferences__option em { grid-column: 2; text-align: left; }
  .analytics-preferences__form > .btn { width: 100%; justify-self: stretch; }
}
@media (max-height: 640px) { .analytics-consent { align-items: start; overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) {
  .analytics-consent__meta > a,
  .analytics-consent__details > summary,
  .analytics-settings-link { transition: none; }
}

/* Compact initial notice; the existing detailed preferences retain their full layout. */
.analytics-consent__copy h2 { font-size:1rem; line-height:1.3; }
.analytics-consent__copy > p:last-child { font-size:.8rem; line-height:1.45; margin-top:6px; }
.analytics-consent__copy .analytics-consent__eyebrow { display:none; }
.analytics-consent__meta { padding-top:9px; }

/* Source: /assets/page-text.css */
/* Rich text owns only its inner flow; the surrounding component owns geometry. */
.page-text { line-height:inherit; overflow-wrap:anywhere; margin-block:1em }
.page-text > p { margin:0 0 1em }
.page-text > :last-child { margin-bottom:0 }
.page-text ul,.page-text ol,.faq-showcase__answer ul,.faq-showcase__answer ol { padding-inline-start:1.4em; margin-block:1em }
.page-text li,.faq-showcase__answer li { margin-block:.35em }
.page-text a,.faq-showcase__answer a { color:inherit; text-decoration:underline; text-underline-offset:.18em }
.page-text a:focus-visible,.faq-showcase__answer a:focus-visible { outline:2px solid currentColor;outline-offset:3px }
.page-text strong,.faq-showcase__answer strong { font-weight:600 }
.page-text em,.faq-showcase__answer em { font-style:italic }
.faq-showcase__intro > .page-text,.ritual-flow .page-text { margin:0 }

/* Source: /uikit-runtime/css/components/card-dossier.css */


/* Source: /uikit-runtime/css/components/card-caption.css */
/* Scale above a 180px card; smaller cards retain the readable base sizes. */
.card-caption { --caption-size:calc(180px * var(--card-title-width-ratio,.066) * var(--caption-scale,1)); --caption-detail-size:calc(var(--caption-size) * .8666667); display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:clamp(10px,5cqi,14px); text-align:center; font:400 var(--caption-size)/1.45 var(--font-body); color:var(--text-soft); min-width:0; }
.card-caption__title { font:500 1em/var(--card-title-line-height,1.22) var(--font-body); letter-spacing:.025em; color:var(--text-main); }
.card-caption__title,.card-caption__translation { display:block; min-width:0; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.card-caption__translation { font-size:var(--caption-detail-size); color:var(--text-muted); }
.card-caption__meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6em; font-size:var(--caption-detail-size); color:#b5c6cf; }
.card-caption__rank { color:#d7bd8d; font-variant-numeric:tabular-nums; }
.card-caption__suit,.card-caption__orientation { display:inline-flex; align-items:center; gap:.35em; }
.card-caption .ritual-icon { font-size:inherit; width:1.15em; height:1.15em; flex-shrink:0; color:inherit; }
.card-caption__orientation { font-size:var(--caption-detail-size); color:var(--text-soft); }
.card-caption__orientation .ritual-icon { width:18px; height:18px; }
.card-caption[data-orientation="reversed"] .card-caption__orientation { color:#d7bd8d; }
.card-caption--catalog { align-items:flex-start; text-align:left; border-top:1px solid rgba(174,205,218,.16); margin-top:.75em; padding-top:.65em; }
.card-caption--catalog .card-caption__meta { justify-content:flex-start; }
.card-caption--compact { display:grid; grid-template-columns:minmax(0,1fr) auto; text-align:left; align-items:start; gap:.35em .65em; }
.card-caption--compact .card-caption__title,.card-caption--compact .card-caption__translation { grid-column:1 / -1; }
.card-caption--compact .card-caption__meta { justify-content:flex-start; }
.card-caption--compact .card-caption__orientation { justify-self:end; }

.card-caption [data-tooltip-text] { cursor:help; }
.card-caption [data-tooltip-text]:focus-visible { outline:1px solid var(--accent-amber-light); outline-offset:3px; border-radius:3px; }

@container (width < 180px) {
 .card-caption { gap:5px; }
 .card-caption--compact { grid-template-columns:minmax(0,1fr); }
 .card-caption--compact .card-caption__orientation { justify-self:start; }
 .card-caption__meta { gap:4px 8px; }
}

.card-caption--compact-suit { align-items:stretch; text-align:left; gap:5px; padding-top:10px; }
.card-caption__heading { display:flex; align-items:center; gap:7px; min-width:0; }
.card-caption__heading .card-caption__title { flex:1; }
.card-caption__heading .card-caption__leading { width:21px; height:21px; color:#b5c6cf; }
.card-caption__heading .card-caption__orientation { margin-left:auto; flex:none; }
.card-caption__details { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; font-size:var(--caption-detail-size); line-height:1.5; color:#d7bd8d; }
.card-caption__dot { color:var(--text-muted); }

.card-caption__suit-symbol { display:inline-flex; align-items:center; flex-shrink:0; }
.card-caption__leading .ritual-icon { width:100%; height:100%; }

/* Visible left bounds of the canonical 24-unit artwork, including its stroke. */
.card-caption--compact-suit:has(.card-caption__leading [data-icon="arcana-major"]) { --caption-icon-left:2.4; }
.card-caption--compact-suit:has(.card-caption__leading [data-icon="suit-cups"]) { --caption-icon-left:5.4; }
.card-caption--compact-suit:has(.card-caption__leading [data-icon="suit-wands"]) { --caption-icon-left:7.5; }
.card-caption--compact-suit:has(.card-caption__leading [data-icon="suit-swords"]) { --caption-icon-left:6.4; }
.card-caption--compact-suit:has(.card-caption__leading [data-icon="suit-pentacles"]) { --caption-icon-left:2.4; }
.card-caption--compact-suit:has(.card-caption__leading) .card-caption__details { padding-inline-start:calc(21px * var(--caption-icon-left,0) / 24); }

.card-caption--compact-suit[data-upright-hidden="true"] { text-align:center; }
.card-caption--compact-suit[data-upright-hidden="true"] .card-caption__heading { width:fit-content; max-width:100%; margin-inline:auto; }
.card-caption--compact-suit[data-upright-hidden="true"] .card-caption__details { justify-content:center; padding-inline-start:0; }

/* Production captions follow their card container; the study can set an explicit scale. */
.card-caption[hidden] { display:none; }
.card-caption[data-caption-responsive="true"] { --caption-size:max(11.88px,6.6cqi); }
.card-caption--pending .card-caption__heading { min-block-size:21px; }
.card-caption--compact-suit .card-caption__title { overflow:visible; text-overflow:clip; }
@container (width < 180px) {
 .card-caption[data-caption-responsive="true"] { text-align:center; }
 .card-caption[data-caption-responsive="true"] .card-caption__leading,
 .card-caption[data-caption-responsive="true"] .card-caption__orientation { display:none; }
 .card-caption[data-caption-responsive="true"] .card-caption__details { justify-content:center; padding-inline-start:0; }
}


/* Source: /uikit-runtime/css/components/chips.css */
.chip {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--text-regular);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.055), transparent 70%),
    rgba(174, 205, 218, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.055),
    0 10px 26px rgba(0, 0, 0, 0.1);
  transition:
    border-color var(--dur-default) var(--ease-default),
    background var(--dur-default) var(--ease-default),
    color var(--dur-default) var(--ease-default),
    box-shadow var(--dur-default) var(--ease-default);
}

button.chip {
  cursor: pointer;
}

.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 90% at 100% 0%, rgba(214, 168, 95, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(239, 231, 214, 0.05), transparent 48%);
  opacity: 0;
  transition: opacity var(--dur-default) var(--ease-default);
}

.chip > * {
  position: relative;
  z-index: 1;
}

button.chip:hover,
.chip.is-hover {
  color: var(--text-main);
  border-color: rgba(174, 205, 218, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 237, 0.08),
    0 0 28px rgba(104, 169, 206, 0.075),
    0 10px 26px rgba(0, 0, 0, 0.12);
}

button.chip:hover::before,
.chip.is-hover::before {
  opacity: 1;
}

button.chip:focus-visible {
  outline: 0;
  border-color: rgba(239, 207, 145, 0.48);
  box-shadow:
    0 0 0 4px rgba(214, 168, 95, 0.1),
    inset 0 1px 0 rgba(239, 211, 161, 0.1);
}

.chip.is-selected {
  color: var(--text-main);
  border-color: rgba(214, 168, 95, 0.34);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(214, 168, 95, 0.16), transparent 70%),
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(104, 169, 206, 0.06), transparent 70%),
    rgba(214, 168, 95, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(239, 211, 161, 0.1),
    0 0 28px rgba(214, 168, 95, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

.chip--choice {
  font-weight: 520;
}

.chip--filter {
  padding-right: var(--space-2);
}

.chip__count {
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  background: rgba(7, 16, 24, 0.34);
}

.chip--keyword {
  min-height:28px;
  padding:5px 9px;
  color:var(--accent-amber-light);
  font:500 .75rem/1.4 var(--font-body);
  white-space:normal;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(214,229,237,.055);
}

.chip--status {
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.chip--success {
  color: var(--state-success);
  border-color: rgba(134, 169, 149, 0.26);
}

.chip--info {
  color: var(--state-info);
  border-color: rgba(138, 164, 184, 0.28);
}

.chip--warning {
  color: var(--state-warning);
  border-color: rgba(197, 149, 91, 0.3);
}

.chip--danger {
  color: #d58d83;
  border-color: rgba(181, 107, 98, 0.3);
}

.chip--neutral {
  color: var(--text-muted);
}

.chip--meta {
  min-height: 38px;
  border-radius: var(--radius-md);
  color: var(--accent-amber-light);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  background:
    linear-gradient(90deg, rgba(214, 168, 95, 0.055), rgba(104, 169, 206, 0.035)),
    rgba(7, 16, 24, 0.34);
}

.chip--removable {
  padding-right: var(--space-2);
}

.chip__remove {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(174, 205, 218, 0.1);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1;
  background: rgba(7, 16, 24, 0.34);
}

.chip--compact {
  min-height: 34px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.chip--large {
  min-height: 52px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

.chip--disabled,
.chip:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.card-dossier { position:relative;margin-block:48px; }
.card-dossier__intro { margin-bottom:clamp(22px,3vw,30px); }
.card-dossier__intro .eyebrow { margin:0 0 10px; }
.prelaunch .card-dossier__intro h2 { margin:0;font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-.02em; }
.card-dossier__example { position:relative;isolation:isolate;overflow:clip;border:1px solid rgba(var(--card-library-accent),.22);border-radius:18px;background:radial-gradient(circle at 8% 12%,rgba(var(--card-library-accent),.13),transparent 34%),radial-gradient(circle at 94% 90%,rgba(var(--card-library-warm),.09),transparent 36%),linear-gradient(125deg,rgba(10,18,28,.42),rgba(5,13,22,.46));-webkit-backdrop-filter:blur(2px) saturate(108%);backdrop-filter:blur(2px) saturate(108%);box-shadow:inset 0 1px rgba(255,245,220,.04),0 24px 64px rgba(0,0,0,.2); }
.card-dossier__example > .ambient-sparks { z-index:1;opacity:.85;pointer-events:none; }
.card-dossier__header,.card-dossier__workspace,.card-dossier__footer { position:relative;z-index:2; }
.card-dossier__header { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:16px 16px 16px clamp(28px,3.5vw,46px);border-bottom:1px solid var(--glass-line-soft);background:rgba(4,10,18,.16); }
.card-dossier__heading { min-width:0; }
.card-dossier__help { flex:0 0 auto;max-width:65%; }
.card-dossier__header .card-dossier__title { margin:0;color:var(--text-main);font:500 17px/1.65 var(--font-body); }
.card-dossier__header .card-dossier__subtitle { margin:2px 0 0;color:var(--text-muted);font:400 14px/1.5 var(--font-body); }
.card-dossier__workspace { display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.5fr); }
.card-dossier__card-column { min-width:0;padding:clamp(28px,3.5vw,46px);border-right:1px solid rgba(174,205,218,.1); }
.card-dossier__card-stage { position:sticky;top:20px;display:flex;flex-direction:column;align-items:center;gap:22px;margin:0; }
.card-dossier__card-art { position:relative;isolation:isolate;width:min(100%,310px,calc((100dvh - 198px) * .6667));flex-shrink:0; }
.card-dossier__card-art::before { content:"";position:absolute;z-index:-1;top:50%;left:50%;width:130%;aspect-ratio:1;border:1px solid rgba(214,168,95,.12);border-radius:50%;background:radial-gradient(ellipse at 50% 42%,rgba(89,151,184,.16),transparent 68%),radial-gradient(ellipse at 50% 65%,rgba(214,168,95,.1),transparent 55%);transform:translate(-50%,-50%);box-shadow:0 0 0 20px rgba(104,169,206,.025),0 0 70px rgba(214,168,95,.06);pointer-events:none; }
.card-dossier__card-art .tarot-live-card { width:100%; }
.card-dossier__card-stage figcaption:not(.card-caption) { position:relative;display:grid;justify-items:center;gap:4px;text-align:center; }
.card-dossier__arcana { position:relative;display:flex;align-items:center;gap:7px; }
.card-dossier__arcana .ritual-icon { width:19px;height:19px;color:var(--accent-amber); }
.card-dossier__arcana,.card-dossier__card-stage figcaption small { color:var(--text-soft);font:500 .8rem/1.5 var(--font-body);letter-spacing:.02em; }
.card-dossier__reading { min-width:0;padding:clamp(28px,3.5vw,46px); }
[data-dossier-caption] { container-type:inline-size; }
/* Match the enhanced layout before modules arrive; without scripting all text stays readable. */
@media (scripting:enabled) {
 .card-dossier:not([data-dossier-ready]) [data-dossier-orientation="reversed"],
 .card-dossier:not([data-dossier-ready]) [data-dossier-panel]:not(:first-child) { display:none; }
 .card-dossier:not([data-dossier-ready]) [data-dossier-help] { width:24px;height:24px;overflow:hidden;visibility:hidden; }
 .card-dossier:not([data-dossier-ready]) [data-dossier-help] > * { display:none; }
 .card-dossier:not([data-dossier-ready]) .card-dossier__art-switch[hidden],
 .card-dossier:not([data-dossier-ready]) [data-dossier-orientation-controls][hidden] { display:grid!important;visibility:hidden; }
}
.card-dossier__question .eyebrow { margin:0 0 10px;color:#9ebfcd;font-size:.68rem; }
.card-dossier__question h3 { margin:0;color:var(--text-main);font:500 clamp(1.15rem,1.8vw,1.5rem)/1.45 var(--font-display);text-wrap:balance; }
.card-dossier__keywords { display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 0 20px;padding:12px 0;border-block:1px solid rgba(174,205,218,.14); }
.card-dossier__keywords > span { color:var(--text-muted);font:.75rem/1.6 var(--font-body); }
.card-dossier__keywords > p { margin:0!important;color:#d7bd8d;font:500 .8rem/1.6 var(--font-body); }
.card-dossier__keyword-list { display:flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%;margin:0;padding:0;list-style:none; }
.card-dossier__keyword-lead { display:flex;align-items:center;gap:8px;min-width:0;max-width:100%; }
.card-dossier__keyword-label { flex-shrink:0;color:var(--text-muted);font:.75rem/1.6 var(--font-body);white-space:nowrap; }
.card-dossier__keyword-lead .chip { min-width:0;white-space:normal;overflow-wrap:anywhere; }
.card-dossier--library .card-dossier__keywords { align-items:center; }
.card-dossier__question { margin-bottom:24px; }
.card-dossier__tabs { display:flex;flex-wrap:wrap;gap:6px;padding-bottom:18px;border-bottom:1px solid rgba(174,205,218,.14); }
.card-dossier__tabs :is(button,a) { display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:8px 10px;border:1px solid transparent;border-radius:8px;color:#a8bac1;background:transparent;font:600 .75rem/1.3 var(--font-body);cursor:pointer;transition:color .18s,background .18s,border-color .18s; }
.card-dossier__tabs .ritual-icon { width:19px;height:19px;flex:0 0 19px; }
.card-dossier__tabs :is(button,a):hover { color:var(--text-main);border-color:rgba(174,205,218,.2);background:rgba(58,92,105,.12); }
.card-dossier__tabs :is(button,a)[aria-selected=true] { color:#f0cf91;border-color:rgba(214,168,95,.4);background:rgba(214,168,95,.09);box-shadow:inset 0 1px rgba(255,240,200,.04); }
.card-dossier__tabs :is(button,a):focus-visible,.card-dossier__panels section:focus-visible { outline:2px solid #dcb873;outline-offset:4px; }
.card-dossier__panels { padding-top:22px; }
.card-dossier__panels [hidden] { display:none; }
.card-dossier__hint { margin:0 0 22px!important;color:#9eb6c0;font-size:.85rem;line-height:1.65; }
.card-dossier__panels .page-text { color:var(--text-soft);font-size:.94rem;line-height:1.75; }
.card-dossier__panels .page-text strong { color:var(--text-main);font-weight:600; }
.card-dossier__panels .page-text p { margin:0 0 16px; }
.card-dossier__panels .page-text p:last-child { margin-bottom:0; }
.card-dossier__reflection { width:fit-content;max-width:100%;margin-block:16px;padding:12px;border-left:2px solid rgba(214,168,95,.65);background:linear-gradient(90deg,rgba(214,168,95,.07),transparent); }
.prelaunch .card-dossier__reflection .eyebrow { display:block;margin:0 0 6px;font:500 .7rem/1.5 var(--font-body);letter-spacing:.03em; }
.card-dossier__reflection .page-text { margin:0;color:var(--text-soft);font:400 .94rem/1.75 var(--font-body); }
.card-dossier__reflection .page-text strong { color:inherit;font-weight:400; }
.card-dossier__panels .card-dossier__domain-example .card-dossier__example-label { margin:0 0 8px;color:var(--text-muted);font:500 .8rem/1.5 var(--font-body); }
.card-dossier__panels .card-dossier__domain-example .page-text { font:inherit; }
.card-dossier__binary-question { margin:0 0 14px!important;color:var(--text-soft);font:400 .94rem/1.75 var(--font-body); }
.card-dossier__binary { padding:12px 16px;margin-block:16px;border:1px solid rgba(214,168,95,.2);border-radius:12px;background:radial-gradient(ellipse at 0 0,rgba(214,168,95,.12),transparent 75%); }
.card-dossier__binary > strong { color:var(--accent-amber);font:500 1.1rem/1.4 var(--font-body); }
.card-dossier__binary--signal { --answer-light:214,168,95;background:radial-gradient(ellipse at 0 0,rgba(var(--answer-light),.13),transparent 75%);border-color:rgba(var(--answer-light),.25); }
.card-dossier__binary[data-answer-family="no"] { --answer-light:133,188,211; }
.card-dossier__binary[data-answer-family="context"] { --answer-light:184,166,215; }
.card-dossier__binary--signal .card-dossier__binary > strong { color:rgb(var(--answer-light)); }
.card-dossier__binary-signals { display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;min-width:0; }
.card-dossier__binary-signal { display:grid;align-content:start;gap:9px;text-align:center;color:var(--text-muted);font:400 .82rem/1.4 var(--font-body); }
.card-dossier__binary-light { height:6px;border:1px solid var(--glass-line);border-radius:999px;background:rgba(174,205,218,.06); }
.card-dossier__binary-signal.is-current { color:rgb(var(--answer-light)); }
.card-dossier__binary-signal.is-current .card-dossier__binary-light { border-color:rgba(var(--answer-light),.6);background:linear-gradient(90deg,rgba(var(--answer-light),.3),rgba(var(--answer-light),.95) 50%,rgba(var(--answer-light),.3));box-shadow:0 0 14px rgba(var(--answer-light),.22),inset 0 1px rgba(255,255,255,.35); }

.card-dossier__scale { position:relative;height:8px;margin:14px 0 10px;border-radius:999px;background:linear-gradient(90deg,rgba(116,166,188,.6),rgba(180,205,211,.28) 48%,rgba(218,169,91,.7));box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }
.card-dossier__scale > span { position:absolute;top:50%;left:80%;width:14px;aspect-ratio:1;border:2px solid rgba(237,244,240,.92);border-radius:50%;background:#d9b36d;box-shadow:0 0 0 4px rgba(217,179,109,.14),0 0 20px rgba(203,222,226,.3);transform:translate(-50%,-50%); }
.card-dossier__scale-labels { display:flex;justify-content:space-between;gap:8px;color:var(--text-muted);font-size:.7rem; }
.card-dossier__footer { --interpretation-footer-pad:clamp(24px,3.5vw,46px);border-top:1px solid rgba(174,205,218,.14);background:rgba(4,10,18,.16); }
 .card-dossier__footer summary { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:20px var(--interpretation-footer-pad);color:#b6d2de;cursor:pointer;list-style:none;transition:background-color 180ms ease,color 180ms ease; }
.card-dossier__footer summary::-webkit-details-marker { display:none; }
.card-dossier__footer summary:hover { color:var(--text-main);background:rgba(35,63,75,.25); }
.card-dossier__footer summary:focus-visible { outline:2px solid #dcb873;outline-offset:-4px; }
.card-dossier__footer summary > .ritual-icon { width:18px;height:18px;flex:0 0 18px;transition:rotate 180ms ease; }
.card-dossier__footer details[open] > summary { border-bottom:1px solid rgba(174,205,218,.14);background:rgba(20,45,57,.12); }
.card-dossier__footer details[open] > summary > .ritual-icon { rotate:180deg; }
.card-dossier__footer [data-disclosure-reveal] { overflow:hidden; }
.card-dossier__footer [data-disclosure-reveal] > .page-text { padding:20px var(--interpretation-footer-pad); }
.card-dossier__footer h3 { display:flex;align-items:center;gap:10px;margin:0;color:inherit;font:500 .9rem/1.5 var(--font-display); }
.card-dossier__footer h3 .ritual-icon { width:22px;height:22px;flex:0 0 22px;color:#bfa879; }
.card-dossier__footer .page-text { color:var(--text-muted);font-size:.82rem;line-height:1.7; }
.card-dossier__footer .page-text p { margin:0; }
.card-dossier__footer .page-text ul { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:0;padding:0;list-style:none; }
.card-dossier__footer .page-text li { margin:0;padding:0 0 0 12px;border-left:1px solid rgba(174,205,218,.18); }
.card-dossier__footer .page-text strong { display:block;margin-bottom:3px;color:var(--text-soft);font-weight:500; }
@media(max-width:1050px) {
 .card-dossier__workspace { grid-template-columns:minmax(250px,.75fr) minmax(0,1fr); }
 .card-dossier__reading { padding:28px; }
 .card-dossier__card-column { padding:28px; }
}
@media(max-width:800px) {
 .card-dossier__workspace { grid-template-columns:1fr; }
 .card-dossier__card-column { border-right:0;border-bottom:1px solid rgba(174,205,218,.12);padding:32px 24px 26px; }
 .card-dossier__card-stage { position:relative;top:auto;gap:18px; }
 .card-dossier__card-art { width:min(64vw,280px); }
 .card-dossier__reading { padding:26px 22px; }
 .card-dossier__footer { --interpretation-footer-pad:22px; }
 .card-dossier__footer .page-text ul { grid-template-columns:1fr; }
}
@media(max-width:430px) {
 .card-dossier__tabs { gap:4px; }
 .card-dossier__tabs :is(button,a) { padding:8px;font-size:.72rem; }
 .card-dossier__scale-labels { font-size:.65rem; }
}
@media(prefers-reduced-motion:reduce) { .card-dossier__tabs :is(button,a) { transition:none; } }
.card-dossier__topics { display:grid;gap:8px; }
.card-dossier__topics details,.card-dossier__source-list { border:1px solid rgba(174,205,218,.14);border-radius:12px;background:rgba(6,15,24,.16); }
.card-dossier__topics summary,.card-dossier__source-list > summary { box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:12px 16px;border-bottom:1px solid transparent;border-radius:11px;color:var(--text-soft);font:500 .88rem/1.5 var(--font-body);cursor:pointer;list-style:none; }
.card-dossier__topics summary::-webkit-details-marker { display:none; }
.card-dossier__topics summary:hover,.card-dossier__source-list > summary:hover { color:#f0cf91;background:rgba(214,168,95,.035); }
.card-dossier__topics summary:focus-visible,.card-dossier__source-list > summary:focus-visible { outline:2px solid #dcb873;outline-offset:3px;border-radius:12px; }
.card-dossier__topics summary .ritual-icon { width:18px;height:18px;flex:0 0 18px;transition:transform .25s; }
.card-dossier__topics details[open] > summary,.card-dossier__footer .card-dossier__source-list[open] > summary { color:#f0cf91;background:rgba(214,168,95,.035);border-bottom-color:rgba(174,205,218,.14);border-radius:11px 11px 0 0; }
.card-dossier__topics details[open] > summary > .ritual-icon[data-icon="chevron-down"] { transform:rotate(180deg); }
.card-dossier__topics [data-disclosure-reveal] { overflow:hidden; }
.card-dossier__topics [data-disclosure-reveal] > .page-text { margin:0;padding:16px;font-size:.88rem; }
.card-dossier__topics .page-text > :first-child { margin-top:0; }
.card-dossier__topics .page-text > :last-child { margin-bottom:0; }
@media(prefers-reduced-motion:reduce) { .card-dossier__topics summary .ritual-icon { transition:none; } }

@media(prefers-reduced-motion:reduce) { .card-dossier__footer summary,.card-dossier__footer summary > .ritual-icon { transition:none; } }

.card-dossier__panels :is([data-dossier-panel="reflection"],[data-dossier-panel="binary"]) > .page-text { margin:0; }
.card-dossier__panels :is([data-dossier-panel="reflection"],[data-dossier-panel="binary"]) > .card-dossier__hint { margin-bottom:16px!important; }


.card-dossier__panels [data-dossier-panel="guardian"] .page-text p:has(> strong:only-child) { margin:20px 0 6px; }
.card-dossier__panels [data-dossier-panel="guardian"] .page-text p > strong:only-child { color:#d7bd8d;font-weight:500; }
.card-dossier__panels [data-dossier-panel="guardian"] .page-text p:has(> em:only-child) { margin:18px 0 0;padding:12px 0 0;border-top:1px solid rgba(174,205,218,.14); }
.card-dossier__panels [data-dossier-panel="guardian"] .page-text p > em:only-child { font-style:normal;color:var(--text-soft); }

.card-dossier__card-stage [hidden] { display:none!important; }
.card-dossier__card-art img[data-dossier-art="classic"] { object-fit:cover;background:transparent; }
.card-dossier__card-stage figcaption:not(.card-caption) { gap:10px;width:100%; }
.card-dossier__art-switch,.card-dossier__orientation { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);width:min(100%,310px);gap:4px;padding:3px;border:1px solid rgba(174,205,218,.18);border-radius:8px;background:rgba(5,13,22,.4); }
.card-dossier__art-switch button,.card-dossier__orientation button { display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 9px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text-muted);font:400 .75rem/1.4 var(--font-body);cursor:pointer; }
.card-dossier__art-switch button[aria-pressed="true"],.card-dossier__orientation button[aria-pressed="true"] { color:#f0cf91;border-color:rgba(214,168,95,.35);background:rgba(214,168,95,.09); }
.card-dossier__art-switch button:hover,.card-dossier__orientation button:hover { color:var(--text-main); }
.card-dossier__art-switch button:focus-visible,.card-dossier__orientation button:focus-visible { outline:2px solid #dcb873;outline-offset:2px; }
.card-dossier__art-error { max-width:28ch;color:var(--text-soft);font-size:.75rem; }

/* Classic print: the existing stationary overlay owns both paper and grain. */
.card-reference { display:inline-block;margin-inline:.12em;line-height:0;vertical-align:.35em; }
.card-reference > .help-button { vertical-align:baseline; }
.card-reference-notes { margin-top:28px;padding-top:20px;border-top:1px solid var(--glass-line-soft);color:var(--text-muted);font:400 .8125rem/1.6 var(--font-body); }
.card-reference-notes__return { appearance:none;padding:0;border:0;background:none;color:var(--text-soft);font:500 1em/1.6 var(--font-body);text-align:start;text-decoration:underline;text-decoration-color:var(--glass-line);text-underline-offset:.2em;cursor:pointer; }
.card-reference-notes__return:hover { color:var(--accent-amber); }
.card-reference-notes__return:focus-visible { outline:2px solid var(--accent-amber);outline-offset:3px; }
.card-reference-notes strong { color:var(--text-soft);font-weight:500; }
.card-reference-notes__heading { margin:0 0 12px;color:var(--text-soft);font:500 .875rem/1.5 var(--font-body); }


.card-dossier__guardian-answer { position:relative;isolation:isolate;overflow:clip;padding:clamp(18px,2.2vw,28px);border:1px solid transparent;border-radius:12px;background:linear-gradient(135deg,rgba(8,19,29,.93),rgba(11,17,24,.94)) padding-box,linear-gradient(125deg,rgba(118,183,211,.48),rgba(174,205,218,.12) 46%,rgba(214,168,95,.5)) border-box;box-shadow:inset 0 1px rgba(255,242,211,.04),0 12px 32px rgba(0,0,0,.12); }
.card-dossier__guardian-answer::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 100% 0,rgba(214,168,95,.1),transparent 55%),radial-gradient(ellipse at 0 100%,rgba(104,169,206,.08),transparent 55%); }
.card-dossier__guardian-answer > .ambient-sparks { z-index:0;opacity:.45;pointer-events:none; }
.card-dossier__guardian-heading,.card-dossier__guardian-answer > .page-text { position:relative;z-index:1; }
.card-dossier__guardian-heading { display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(214,168,95,.18);color:#d7bd8d; }
.card-dossier__guardian-heading .ritual-icon { width:22px;height:22px;flex:0 0 22px; }
.card-dossier__guardian-heading h3 { margin:0;font:500 .94rem/1.5 var(--font-body); }
.card-dossier__panels .card-dossier__guardian-answer > .page-text { margin:0;padding:0;border:0;background:none;font:400 .94rem/1.75 var(--font-body); }

/* Library uses the same composition, with content-driven sections and SSR fallback. */
.card-dossier--library { margin-block:24px 0; }
.card-dossier__tabs a { text-decoration:none; }
.card-dossier--library .card-dossier__workspace { grid-template-columns:minmax(240px,1fr) minmax(0,min(60%,45.75rem)); }
.card-dossier--library .card-dossier__card-stage { top:110px; }
.card-dossier__card-display { width:min(100%,360px,calc((100dvh - 198px) * .6667)); }
.card-dossier__card-display:has(.card-dossier__quick-nav) { width:min(calc(100% - 48px),360px,calc((100dvh - 198px) * .6667)); }
.card-dossier--library .card-dossier__card-column { --dossier-column-pad:clamp(28px,3.5vw,46px); }
.card-dossier--library .card-dossier__card-stage { container-type:inline-size; }
/* cqw is the stage width; include column padding to bisect the full side gaps. */
.card-dossier__quick-nav .card-dossier__quick-link { position:absolute;z-index:5;top:50%;width:clamp(24px,16.1%,34px);min-width:0;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);text-decoration:none; }
.card-dossier__quick-link.is-previous { left:calc(25% - 25cqw - var(--dossier-column-pad) / 2); }
.card-dossier__quick-link.is-next { left:calc(75% + 25cqw + var(--dossier-column-pad) / 2); }
.card-dossier__quick-link .ritual-icon { width:47%;height:47%; }
.card-dossier__quick-link .ritual-icon svg { width:100%;height:100%;stroke-width:1.2; }
.card-dossier__quick-link::after { content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%); }
@media(max-width:1050px) { .card-dossier--library .card-dossier__card-column { --dossier-column-pad:28px; } }
@media(max-width:820px) { .card-dossier--library .card-dossier__card-column { --dossier-column-pad:24px; } }
.card-dossier__neighbors { position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:space-between;gap:16px;padding:24px clamp(24px,3.5vw,46px);border-top:1px solid var(--glass-line-soft); }
.card-dossier__neighbor { --neighbor-arrow:clamp(28px,3.4vw,34px);--neighbor-image:clamp(36px,4.8vw,48px);display:grid;grid-template-columns:var(--neighbor-arrow) var(--neighbor-image) minmax(0,1fr);align-items:center;gap:clamp(8px,1.6vw,16px);padding:clamp(10px,1.6vw,16px);border-radius:12px; }
.card-dossier__neighbor .information-route-link__arrow { grid-column:1;grid-row:1;width:var(--neighbor-arrow);height:var(--neighbor-arrow); }
.card-dossier__neighbor-image { grid-column:2;grid-row:1; }
.card-dossier__neighbor .information-route-link__copy { grid-column:3;grid-row:1; }
.card-dossier__neighbor.is-next { grid-column:2;grid-template-columns:minmax(0,1fr) var(--neighbor-image) var(--neighbor-arrow);text-align:right; }
.card-dossier__neighbor.is-next .information-route-link__arrow { grid-column:3;grid-row:1; }
.card-dossier__neighbor.is-next .card-dossier__neighbor-image { grid-column:2;grid-row:1; }
.card-dossier__neighbor.is-next .information-route-link__copy { grid-column:1;grid-row:1; }
.card-dossier__neighbor-image { position:relative;width:var(--neighbor-image);height:auto;aspect-ratio:2 / 3;object-fit:cover;border-radius:var(--arcana-radius,5% / 3.4%); }
.card-dossier__neighbor-label { color:var(--text-muted);font:400 .75rem/1.4 var(--font-body); }
.card-dossier__neighbor strong { color:var(--text-main);font:500 clamp(.875rem,1.6vw,1rem)/1.4 var(--font-body);overflow-wrap:anywhere; }
@media(max-width:820px) {
 .card-dossier--library .card-dossier__card-display:has(.card-dossier__quick-nav) { width:min(190px,calc(100% - 68px)); }
 .card-dossier__quick-nav { --quick-control-size:clamp(24px,calc(100cqw - 220px),34px); }
 .card-dossier__quick-nav .card-dossier__quick-link { width:var(--quick-control-size); }
 .card-dossier__quick-link.is-previous { left:calc(-1 * var(--dossier-stage-gap) - 10px - var(--quick-control-size) / 2); }
 .card-dossier__quick-link.is-next { left:calc(100% + var(--dossier-stage-gap) + 10px + var(--quick-control-size) / 2); }
 .card-dossier__neighbors { gap:10px;padding:20px 16px; }
}
@media(max-width:540px) {
 .card-dossier__neighbors { grid-template-columns:minmax(0,1fr); }
 .card-dossier__neighbor.is-next { grid-column:1;grid-row:1; }
 .card-dossier__neighbor.is-previous { grid-row:2; }
}
@media(prefers-reduced-motion:reduce) {
 .card-dossier__neighbor,.card-dossier__neighbor::before,.card-dossier__neighbor .information-route-link__arrow { transition:none; }
}
.card-dossier__card-display .card-dossier__card-art { width:100%; }
.card-dossier__summary { margin:0 0 16px;font:400 1rem/1.65 var(--font-body);color:var(--text-main); }
.card-dossier__narrative { margin:0 0 24px;font-size:var(--dossier-text-size,1rem); }
.card-dossier__basic-title { margin:0 0 8px;font:600 var(--dossier-text-size,1rem)/1.5 var(--font-body); }
.card-dossier__reading-inner { --dossier-reading-measure:40rem;--dossier-text-size:1rem;--dossier-note-size:.8125rem;--dossier-heading-size:1rem;max-inline-size:var(--dossier-reading-measure);margin-inline:auto;font:400 var(--dossier-text-size)/1.75 var(--font-body); }
.card-dossier--library .card-dossier__summary,.card-dossier--library .card-dossier__panels,.card-dossier--library .card-dossier__topics .page-text { font-size:var(--dossier-text-size); }
.card-dossier--library .card-reference-notes { font-size:var(--dossier-note-size); }
.card-dossier--library .card-dossier__topics summary { font-size:var(--dossier-heading-size);font-weight:500;line-height:1.5; }
.card-dossier--library .card-dossier__notice { font-size:var(--dossier-note-size); }
.card-dossier__orientation { width:max-content;max-width:100%;grid-template-columns:auto auto;box-sizing:border-box; }
.card-dossier__orientation .ritual-icon { width:16px;height:16px;flex:0 0 16px; }
.card-dossier [hidden] { display:none!important; }
.card-dossier__panels h2 { margin:0 0 14px;font:500 1.25rem/1.4 var(--font-display); }
.card-dossier__panels h3,.card-dossier__section-heading { margin:20px 0 10px;font:500 1rem/1.5 var(--font-display); }
.card-dossier__notice { margin:0 0 20px;color:var(--text-muted);font-size:.85rem;line-height:1.65; }
.card-dossier__header .card-dossier__notice { margin:0;color:#9eb6c0; }
.card-dossier__symbols { margin:0;padding:0;list-style:none; }
.card-dossier__symbols li { padding:14px 0;border-bottom:1px solid var(--glass-line); }
.card-dossier__symbols li:first-child { padding-top:0; }
.card-dossier__symbols li:last-child { border-bottom:0; }
.card-dossier__symbols strong { display:block;margin-bottom:5px;color:var(--text-main);font-weight:500; }
.card-dossier__panels .page-text .card-dossier__color-list { display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding-left:1.25em;list-style:disc; }
.card-dossier__color-list li { padding-left:.2em; }
.card-dossier__color-list li::marker { color:var(--text-muted); }
.card-dossier__color-list strong { display:block;margin-bottom:4px;color:var(--text-main);font-weight:500; }
.card-dossier__color-list p { margin:0; }
.card-dossier__domain-nav { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px; }
.card-dossier__domain-nav a { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--glass-line);border-radius:8px;color:var(--text-soft);font:500 .8rem/1.4 var(--font-body);text-decoration:none; }
.card-dossier__domain-nav a:hover,.card-dossier__domain-nav [aria-selected=true] { color:var(--accent-amber);background:rgba(214,168,95,.08);border-color:rgba(214,168,95,.35); }
.card-dossier__domain-nav a:focus-visible { outline:2px solid var(--accent-amber);outline-offset:3px; }
.card-dossier__insights { display:grid;gap:16px;margin:18px 0; }
.card-dossier__insights dt { margin-bottom:4px;color:var(--text-main);font-weight:500; }
.card-dossier__insights dd { margin:0; }
.card-dossier__reflection { margin:20px 0 0;padding:14px 16px;border-left:2px solid var(--accent-amber);background:rgba(214,168,95,.06); }
.card-dossier__tradition { display:block;color:var(--text-muted);font-size:.8rem;margin-bottom:8px; }
@media (max-width:820px) {
 .card-dossier__header { padding:16px 16px 16px 24px; }
 .card-dossier--library .card-dossier__workspace { grid-template-columns:1fr; }
 .card-dossier--library .card-dossier__card-column { border-right:0;border-bottom:1px solid var(--glass-line);padding:24px; }
 .card-dossier--library .card-dossier__card-display { width:190px; }
 .card-dossier--library .card-dossier__card-stage { --dossier-stage-gap:14px;position:static;gap:var(--dossier-stage-gap); }
 .card-dossier--library .card-dossier__reading { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { .card-dossier * { scroll-behavior:auto; } }

.card-dossier__panels { color:var(--text-soft);font:400 1rem/1.75 var(--font-body); }
.card-dossier__panels p { margin:0 0 16px; }
.card-dossier-demo { display:block;width:100%;height:1000px;border:0;border-radius:18px;background:transparent; }
.card-dossier-preview { padding:16px;max-width:1400px;margin:auto; }
.card-dossier-preview .card-dossier { margin:0; }

.card-dossier__panels .card-dossier__orientation-note { display:flex;align-items:baseline;gap:8px;margin:0 0 16px;color:var(--text-muted);font:400 .8rem/1.65 var(--font-body); }
.card-dossier__panels .card-dossier__orientation-note p { margin:0;color:inherit;font:inherit; }
.card-dossier--library .card-dossier__orientation-note { font-size:var(--dossier-note-size); }
.card-dossier__orientation-note p > span { display:inline;color:inherit;font:inherit;white-space:nowrap; }
.card-dossier__orientation-note .ritual-icon { display:inline-block;width:1em;height:1em;font:inherit;color:inherit;vertical-align:-.15em; }
.card-dossier__orientation-note p .ritual-icon { margin-right:.25em; }
.card-dossier__orientation-note .card-dossier__note-info { flex:0 0 1.1em;width:1.1em;height:1.1em;align-self:flex-start;margin-top:.275em; }

.card-dossier__domain-nav .ritual-icon { flex:0 0 20px;width:20px;height:20px; }

.card-dossier__panels .card-dossier__pair-positions { color:var(--text-muted);font-size:.8rem;line-height:1.65;margin:0 0 16px; }
.card-dossier__pair-orientation { white-space:nowrap; }
.card-dossier__pair-orientation .ritual-icon { display:inline-block;width:1em;height:1em;font:inherit;vertical-align:-.15em;color:inherit; }
.card-dossier__pair-plus { margin-inline:.35em; }
.card-dossier__example-copy { display:grid;gap:16px;margin:0; }
.card-dossier__example-copy dt { margin:0 0 4px;color:var(--text-muted);font-size:.8rem; }
.card-dossier__example-copy dd { margin:0; }

.card-dossier__detail-label { display:flex;align-items:center;gap:10px;min-width:0; }
.card-dossier__detail-label > .ritual-icon { color:var(--accent-amber); }

.card-dossier__panels .card-dossier__detail-footer { margin:0;padding:12px 16px;border-top:1px solid var(--glass-line-soft); }

.card-dossier__walkthrough { list-style:none;counter-reset:reading-step;margin:0;padding:0; }
.card-dossier__walkthrough > li { position:relative;counter-increment:reading-step;padding:0 0 22px 42px; }
.card-dossier__walkthrough > li::before { content:counter(reading-step);position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--glass-line);border-radius:50%;color:var(--text-muted);font:400 .75rem/1 var(--font-body); }
.card-dossier__walkthrough > li:not(:last-child)::after { content:"";position:absolute;left:13px;top:26px;bottom:0;width:1px;background:var(--glass-line); }
.card-dossier__walkthrough > li:last-child { padding-bottom:0; }
.card-dossier__panels .card-dossier__walkthrough .card-dossier__step-heading { margin:0 0 4px;color:var(--text-main);font:500 .88rem/26px var(--font-body); }
.card-dossier__walkthrough p,.card-dossier__walkthrough .page-text { font-size:.88rem;line-height:1.75; }
.card-dossier__walkthrough .page-text { margin:0; }
.card-dossier__walkthrough p:last-child { margin-bottom:0; }

/* Structural headings describe existing panels without adding visual duplicates. */
.card-dossier .card-dossier__structural-heading { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.card-dossier__topics summary > .card-dossier__detail-heading { margin:0;font:inherit;color:inherit;min-width:0; }
.card-dossier__editorial-footer { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px 32px;padding:16px var(--interpretation-footer-pad);color:var(--text-muted);font:.78rem/1.6 var(--font-body); }
.card-dossier__editorial-footer p { margin:0; }
.card-dossier__editorial-footer .card-dossier__source-list { grid-column:1;grid-row:1;min-width:0;width:100%;max-width:calc(100ch + 42px);font:400 .8125rem/1.6 var(--font-body); }
.card-dossier__editorial-footer .card-dossier__source-list > summary { min-height:46px;font-size:.8rem; }
.card-dossier__reference-panel { padding:20px; }
.card-dossier__reference-panel .card-dossier__reference-list > li + li { padding-top:16px;border-top:1px solid var(--glass-line-soft); }
.card-dossier__source-list strong { color:var(--text-soft);font-weight:500; }
.card-dossier__reference-works { list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;color:var(--text-muted); }
.card-dossier__reference-works > li { padding-inline-start:0; }
.card-dossier__source-list .card-dossier__reference-list { row-gap:16px; }
.card-dossier__reference-list { margin:0;padding-inline-start:1.5em;display:grid;gap:8px; }
.card-dossier__reference-list li { padding-inline-start:.2em;overflow-wrap:anywhere; }
.card-dossier__reference-list li::marker { color:var(--accent-amber);font-variant-numeric:tabular-nums; }
.card-dossier__editorial-credit { grid-column:2;grid-row:1;text-align:right;display:grid;justify-items:end;gap:3px; }
.card-dossier__credit-name { color:var(--text-soft);font-weight:500;white-space:nowrap; }
.card-dossier__editorial-footer a { text-decoration:underline;text-decoration-color:rgba(174,205,218,.4);text-underline-offset:3px;transition:color 180ms ease,text-decoration-color 180ms ease; }
.card-dossier__editorial-footer a:hover { color:var(--accent-amber);text-decoration-color:currentColor; }
.card-dossier__editorial-footer a:focus-visible { outline:2px solid var(--accent-amber);outline-offset:3px;border-radius:2px; }
.card-dossier__editorial-kind { display:flex;align-items:center;gap:6px; }
.card-dossier__editorial-kind .ritual-icon { width:15px;height:15px;flex:0 0 15px;color:var(--text-muted); }
@media(max-width:600px) {
 .card-dossier__reference-panel { padding:16px 14px; }
 .card-dossier__editorial-footer { grid-template-columns:minmax(0,1fr);gap:16px; }
 .card-dossier__editorial-credit { grid-column:1;grid-row:auto; }
}

.card-dossier__originals { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font:400 .75rem/1.5 var(--font-body); }
.card-dossier__originals a { color:var(--text-muted);text-underline-offset:.2em; }
.card-dossier__originals a:hover { color:var(--accent-amber); }
.card-dossier__originals a:focus-visible { outline:2px solid var(--accent-amber);outline-offset:3px; }
@media (scripting:enabled) {
 .card-dossier__originals { min-height:18px; }
 .card-dossier__original-edition { display:none; }
}

.card-dossier__jump { display:none; }
.card-dossier__tabs { scroll-margin-top:90px; }
.card-dossier details[id],.card-dossier [data-dossier-panel],.card-dossier [data-dossier-domain],.card-dossier [data-dossier-orientation][id] { scroll-margin-top:90px; }
@media (max-width:820px) { .card-dossier__jump { display:block; margin:16px 24px 0; width:fit-content; } }

/* The landing example retains its decorative edge lights independently of the library. */
.card-dossier--landing .card-dossier__example::before,
.card-dossier--landing .card-dossier__example::after { content:"";position:absolute;z-index:3;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--card-library-accent),.7) 35%,rgba(var(--card-library-warm),.65) 65%,transparent);pointer-events:none; }
.card-dossier--landing .card-dossier__example::before { top:0; }
.card-dossier--landing .card-dossier__example::after { bottom:0; }
