:root {--card-bg: #fff;--card-fg: #0f172a;--muted: #475569;--ring: #d9a54f;--accent-2: #7c3aed;--border: #d19429;--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);--suttle-bg: rgba(21, 21, 23, 0.80);--bg: #f8fafc;--card-w: 320px;}:root {--gap: 1.5rem;--side-w: 320px;}@media (prefers-color-scheme: dark) {:root {--card-bg: #0b1220;--card-fg: #e5e7eb;--muted: #94a3b8;--ring: #e5b661;--accent: #d19429;--accent-2: #a78bfa;--border: #1f2937;--shadow: 0 10px 30px rgba(0,0,0,0.35);--bg: #0b1020;}}.cards {--gap: 1.5rem;display: grid;grid-template-columns: repeat(auto-fit, minmax(var(--card-w), var(--card-w)));gap: var(--gap);width: 100%;max-width: calc(3 * var(--card-w) + 2 * var(--gap));margin-inline: auto;justify-content: center;align-items: stretch;justify-items: stretch;}.card {display: grid;height: 100%;row-gap: 1rem;grid-template-rows: auto 1fr auto;padding: 1.25rem;border: 2px solid var(--border);border-radius: 1.25rem;background:linear-gradient(180deg, var(--accent-weak), transparent 42%),var(--card-bg);color: var(--card-fg);box-shadow: var(--shadow);transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;position: relative;isolation: isolate;margin-inline: 0;width: 100%;}.card:hover {transform: translateY(-2px);box-shadow: 0 16px 40px rgba(2, 6, 23, 0.12);border-color: color-mix(in oklab, var(--border), var(--accent) 22%);}.card__header {display: flex;align-items: center;justify-content: space-between;gap: .75rem;}.card__title {color: var(--accent);margin: 0;font-size: 1.5rem;line-height: 1.2;letter-spacing: .2px;overflow-wrap: anywhere;hyphens: auto;}.card__badge {display: inline-block;padding: .25rem .5rem;border-radius: 999px;font-size: .75rem;line-height: 1;background: var(--accent-weak);color: var(--accent);border: 1px solid color-mix(in oklab, var(--accent), #000 8%);white-space: nowrap;}.card__body {display: flex;flex-direction: column;gap: 1rem;min-height: 0;color: var(--bg);}.card__desc {margin: 0;color: white;line-height: 1.6;overflow-wrap: anywhere;hyphens: auto;}.card__desc--clamp {display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}.card__price {display: flex;align-items: baseline;gap: .35rem;margin-top: auto;}.price__currency { font-size: 1rem; opacity: .9; translate: 0 -2px; color: var(--accent-2); }.price__amount   { font-size: clamp(1.75rem, 2.2vw + 1.2rem, 2.5rem); font-weight: 800; letter-spacing: .2px; color: var(--accent-2); }.price__period   { color: var(--muted); font-size: .95rem; }.card__btn {margin-top: auto;appearance: none;border: 0;border-radius: .875rem;padding: .8rem 1rem;font-weight: 600;cursor: pointer;background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--accent), #fff 10%), var(--accent));color: white;box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, outline-color .15s ease;}.card__btn:hover { transform: translateY(-1px); }.card__btn:active { transform: translateY(0); filter: brightness(.95); }.card__btn:focus-visible {outline: 3px solid color-mix(in oklab, var(--ring), #fff 10%);outline-offset: 3px;box-shadow: 0 0 0 6px color-mix(in oklab, var(--ring), transparent 70%);}.card-selected {border: 3px solid lime;}.hint { margin-top: 1rem; color: var(--muted); font-size: .9rem; text-align: center; }.nav {display: flex;justify-content: center;align-items: center;gap: 1rem;margin-block: 1rem 0;}.nav__icon { width: 1.1rem; height: 1.1rem; }.card2 {display: flex;flex-direction: column;gap: 1rem;max-height: 50%;padding: 1.25rem;border: 2px solid var(--border);border-radius: 1.25rem;background:linear-gradient(180deg, var(--accent-weak), transparent 42%),var(--card-bg);color: var(--card-fg);box-shadow: var(--shadow);transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;position: relative;isolation: isolate;margin-inline: 0;}.sidecard {position: fixed;right: 2.5rem;width: var(--side-w);max-height: calc(100dvh - 2rem);overflow: auto;z-index: 10;background:linear-gradient(180deg, var(--accent-weak), transparent 42%),var(--card-bg);}@media (max-width: 1719px) {.sidecard {position: static;}}.cards { justify-items: stretch; }.card  { width: 100%; }@media (max-width: 900px) {.layout { padding-right: 0; }.sidecard {position: static;width: 100%;max-height: none;margin-top: var(--gap);}}.sidebar-title {text-decoration: underline 1px!important;}