:root {
  --primary-color: hsl(148, 72%, 42%);
  --secondary-color: hsl(225, 66%, 52%);
  --bg-color: hsl(148, 8%, 96%);
  --text-color: hsl(148, 10%, 10%);
  --text-muted: hsl(148, 6%, 42%);
  --border-color: rgba(0, 0, 0, 0.08);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
  --nav-height: 64px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
  --nav-bg: var(--bg-color);
  --btn-text: #ffffff;
  --wps-primary: hsl(148, 82%, 58%);
  --wps-primary-dark: hsl(148, 82%, 42%);
  --wps-secondary: hsl(225, 66%, 58%);
  --wps-text: hsl(148, 10%, 10%);
  --wps-bg: hsl(148, 8%, 96%);
  --wps-surface: #ffffff;
  --wps-muted: hsl(148, 6%, 45%);
  --wps-border: hsl(148, 8%, 88%);
  --dl-primary: hsl(148, 82%, 42%);
  --dl-primary-dark: hsl(148, 82%, 34%);
  --dl-secondary: hsl(225, 66%, 58%);
  --dl-bg: hsl(148, 8%, 96%);
  --dl-bg-dark: hsl(148, 10%, 8%);
  --dl-text: hsl(148, 10%, 10%);
  --dl-text-muted: hsl(148, 6%, 40%);
  --dl-text-light: hsl(148, 6%, 96%);
  --dl-surface: hsl(148, 6%, 100%);
  --dl-surface-dark: hsl(148, 8%, 12%);
  --dl-border: hsl(148, 8%, 88%);
  --dl-glow: hsla(148, 82%, 50%, 0.25);
  --feat-primary: hsl(148, 82%, 42%);
  --feat-primary-light: hsl(148, 82%, 58%);
  --feat-secondary: hsl(225, 66%, 58%);
  --feat-dark: hsl(148, 20%, 8%);
  --feat-dark-mid: hsl(148, 12%, 14%);
  --feat-dark-card: hsl(148, 10%, 11%);
  --feat-text-primary: hsl(0, 0%, 96%);
  --feat-text-secondary: hsl(148, 6%, 62%);
  --feat-text-muted: hsl(148, 4%, 45%);
  --feat-border: hsl(148, 8%, 18%);
  --feat-glow: hsla(148, 82%, 58%, 0.15);
  --sr-primary: hsl(148, 82%, 42%);
  --sr-primary-dark: hsl(148, 82%, 32%);
  --sr-secondary: hsl(225, 66%, 58%);
  --sr-bg: hsl(148, 8%, 96%);
  --sr-bg-dark: hsl(148, 10%, 8%);
  --sr-text: hsl(148, 10%, 10%);
  --sr-text-muted: hsl(148, 6%, 40%);
  --sr-text-light: hsl(148, 6%, 96%);
  --sr-card-bg: hsl(0, 0%, 100%);
  --sr-border: hsl(148, 10%, 88%);
  --sr-accent-warm: hsl(28, 90%, 55%);
  --sr-accent-red: hsl(4, 78%, 56%);
  --sr-surface-elevated: hsl(148, 8%, 99%);
  --gs-primary: hsl(148, 82%, 42%);
  --gs-primary-dark: hsl(148, 82%, 32%);
  --gs-secondary: hsl(225, 66%, 58%);
  --gs-bg: hsl(148, 8%, 96%);
  --gs-bg-dark: hsl(148, 10%, 8%);
  --gs-text: hsl(148, 10%, 10%);
  --gs-text-muted: hsl(148, 6%, 40%);
  --gs-text-light: hsl(148, 6%, 96%);
  --gs-border: hsl(148, 8%, 88%);
  --gs-card-bg: hsl(0, 0%, 100%);
  --gs-warm-accent: hsl(24, 90%, 55%);
  --gs-warm-glow: hsl(24, 90%, 55%, 0.12);
  --tpl-primary: hsl(148, 82%, 42%);
  --tpl-primary-light: hsl(148, 82%, 58%);
  --tpl-secondary: hsl(225, 66%, 58%);
  --tpl-bg: hsl(148, 8%, 96%);
  --tpl-bg-dark: hsl(148, 10%, 8%);
  --tpl-text: hsl(148, 10%, 10%);
  --tpl-text-muted: hsl(148, 6%, 40%);
  --tpl-text-light: hsl(148, 6%, 96%);
  --tpl-card-bg: #ffffff;
  --tpl-border: hsl(148, 8%, 88%);
  --tpl-warm-accent: hsl(24, 90%, 56%);
  --tpl-warm-deep: hsl(12, 78%, 52%);
  --cl-primary: hsl(148, 82%, 42%);
  --cl-primary-light: hsl(148, 82%, 58%);
  --cl-secondary: hsl(225, 66%, 58%);
  --cl-bg: hsl(148, 8%, 96%);
  --cl-bg-dark: hsl(148, 10%, 6%);
  --cl-text: hsl(148, 10%, 10%);
  --cl-text-muted: hsl(148, 6%, 40%);
  --cl-border: hsl(148, 8%, 88%);
  --cl-surface: hsl(0, 0%, 100%);
  --cl-surface-elevated: hsl(148, 6%, 98%);
  --cl-tag-new: hsl(148, 82%, 42%);
  --cl-tag-fix: hsl(25, 90%, 52%);
  --cl-tag-improve: hsl(225, 66%, 58%);
  --cl-tag-security: hsl(0, 72%, 52%);
  --cl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cl-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    main.index *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.index .strafe{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-text);
    overflow: hidden;
    }
    main.index .strafe::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 80% 60% at 50% 40%, hsla(148, 82%, 58%, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, hsla(225, 66%, 58%, 0.1) 0%, transparent 60%);
    z-index: 1;
    }
    main.index .loomBit{
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 80px 24px;
    text-align: center;
    }
    main.index .strafe h1{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    }
    main.index .strafe h1 span{
    color: var(--wps-primary);
    }
    main.index .plank8{
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: hsla(0, 0%, 100%, 0.65);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 48px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .sable{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.index .fizzle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    background: var(--wps-primary);
    color: var(--wps-text);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px hsla(148, 82%, 58%, 0.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .fizzle:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px hsla(148, 82%, 58%, 0.45);
    }
    main.index .yawnGap{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    background: transparent;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid hsla(0, 0%, 100%, 0.25);
    transition: border-color 0.2s, background 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .yawnGap:hover{
    border-color: hsla(0, 0%, 100%, 0.5);
    background: hsla(0, 0%, 100%, 0.05);
    }
    main.index .wispCore{
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 64px;
    flex-wrap: wrap;
    }
    main.index .rune{
    text-align: center;
    }
    main.index .hexPulse{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    }
    main.index .tremolo{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.45);
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .riptide{
    padding: 100px 24px;
    }
    main.index .pyre_ash{
    background: var(--wps-bg);
    }
    main.index .coven5{
    background: var(--wps-surface);
    }
    main.index .hushZone{
    background: var(--wps-text);
    }
    main.index .cragTop{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.index .nimbus9{
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wps-primary-dark);
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .dewClaw{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--wps-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    }
    main.index .jotLine{
    color: #fff;
    }
    main.index .duskVeil{
    font-size: 1.05rem;
    color: var(--wps-muted);
    line-height: 1.7;
    max-width: 560px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .quasar_fx{
    color: hsla(0, 0%, 100%, 0.55);
    }
    main.index .kudzu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 64px;
    }
    main.index .glintPop{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
    }
    main.index .galvanic{
    display: flex;
    flex-direction: column;
    gap: 24px;
    }
    main.index .galvanic h3{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wps-text);
    line-height: 1.3;
    }
    main.index .galvanic p{
    font-size: 1rem;
    color: var(--wps-muted);
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .fathomRig{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
    }
    main.index .latchPin{
    padding: 40px 32px;
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    transition: box-shadow 0.25s, transform 0.25s;
    }
    main.index .latchPin:hover{
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
    }
    main.index .ignite_v2{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(148, 82%, 58%, 0.12);
    margin-bottom: 24px;
    font-size: 1.4rem;
    }
    main.index .latchPin h3{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 12px;
    }
    main.index .latchPin p{
    font-size: 0.92rem;
    color: var(--wps-muted);
    line-height: 1.7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .moxie{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 64px;
    }
    main.index .ember_silk{
    padding: 36px 24px;
    text-align: center;
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    transition: border-color 0.2s, background 0.2s;
    }
    main.index .ember_silk:hover{
    border-color: hsla(148, 82%, 58%, 0.4);
    background: hsla(0, 0%, 100%, 0.03);
    }
    main.index .pixDuo{
    font-size: 2rem;
    margin-bottom: 16px;
    }
    main.index .ember_silk h3{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    }
    main.index .ember_silk p{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.45);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .prong{
    position: relative;
    padding: 120px 24px;
    text-align: center;
    overflow: hidden;
    }
    main.index .prong::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    url("static/img/index-interface-4.jpg") center/cover no-repeat;
    opacity: 0.08;
    }
    main.index .smelt{
    position: relative;
    z-index: 2;
    }
    main.index .prong h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    }
    main.index .prong p{
    font-size: 1.1rem;
    color: hsla(0, 0%, 100%, 0.6);
    margin-bottom: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .orbKnot{
    display: inline-block;
    font-size: 0.78rem;
    color: hsla(0, 0%, 100%, 0.4);
    margin-top: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .brackish{
    margin-top: 64px;
    }
    main.index .scald{
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 32px;
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    }
    main.index .chimera{
    width: 280px;
    height: 180px;
    object-fit: cover;
    flex-shrink: 0;
    }
    main.index .vinca h3{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 8px;
    }
    main.index .ax7{
    font-size: 0.82rem;
    color: var(--wps-muted);
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .vinca p{
    font-size: 0.95rem;
    color: var(--wps-muted);
    line-height: 1.7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .xenoMark{
    color: var(--wps-primary-dark);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.index .xenoMark:hover{
    border-bottom-color: var(--wps-primary-dark);
    }
    main.index .nectarBow{
    background: hsl(148, 10%, 8%);
    padding: 48px 24px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.06); color: #ffffff;}
    main.index .tundraHop{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.index .waxStem{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.7);
    }
    main.index .umbra{
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .opalShift{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.index .opalShift a{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.4);
    text-decoration: none;
    transition: color 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.index .opalShift a:hover{
    color: var(--wps-primary);
    }
    @media (max-width: 900px) {main.index .kudzu{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.index .fathomRig{
    grid-template-columns: 1fr;
    }
    main.index .moxie{
    grid-template-columns: repeat(2, 1fr);
    }
    main.index .wispCore{
    gap: 32px;
    }
    main.index .scald{
    flex-direction: column;
    }
    main.index .chimera{
    width: 100%;
    height: 200px;
    }}
    @media (max-width: 600px) {main.index .riptide{
    padding: 64px 16px;
    }
    main.index .moxie{
    grid-template-columns: 1fr;
    }
    main.index .sable{
    flex-direction: column;
    align-items: center;
    }
    main.index .fizzle, main.index .yawnGap{
    width: 100%;
    justify-content: center;
    }
    main.index .tundraHop{
    flex-direction: column;
    text-align: center;
    }
    main.index .opalShift{
    justify-content: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700&display=swap");
    main.download .wold{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dl-bg-dark);
    overflow: hidden;
    padding: 120px 24px 80px;
    }
    main.download .wold::before{
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, hsla(148, 82%, 50%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .wold::after{
    content: "";
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, hsla(225, 66%, 58%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .alpKit{
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    }
    main.download .zag_bolt{
    display: inline-block;
    padding: 6px 18px;
    background: hsla(148, 82%, 50%, 0.1);
    border: 1px solid hsla(148, 82%, 50%, 0.2);
    color: hsl(148, 82%, 58%);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 32px;
    }
    main.download .wold h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 900;
    color: var(--dl-text-light);
    line-height: 1.05;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    }
    main.download .wold h1 span{
    color: hsl(148, 82%, 58%);
    }
    main.download .blurSeed{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: hsl(148, 6%, 60%);
    max-width: 560px;
    margin: 0 auto 48px;
    }
    main.download .kelpTone{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    }
    main.download .etchFin{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 48px;
    background: var(--dl-primary);
    color: hsl(148, 10%, 4%);
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 0 0 0 var(--dl-glow), 0 4px 24px hsla(148, 82%, 40%, 0.3);
    letter-spacing: 0.01em;
    }
    main.download .etchFin:hover{
    background: var(--dl-primary-dark);
    box-shadow: 0 0 0 6px var(--dl-glow), 0 8px 32px hsla(148, 82%, 40%, 0.4);
    transform: translateY(-1px);
    }
    main.download .etchFin svg{
    width: 20px;
    height: 20px;
    fill: currentColor;
    }
    main.download .vexGlyph{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 50%);
    }
    main.download .vexGlyph strong{
    color: hsl(148, 6%, 70%);
    font-weight: 600;
    }
    main.download .pithCap{
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid hsla(148, 6%, 50%, 0.12);
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    }
    main.download .tarn_dye{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 45%);
    }
    main.download .tarn_dye strong{
    color: hsl(148, 6%, 70%);
    font-weight: 600;
    }
    main.download .cuspNode{
    padding: 100px 24px;
    background: var(--dl-bg);
    }
    main.download .sleetArm{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.download .novaSpin{
    text-align: center;
    margin-bottom: 64px;
    }
    main.download .novaSpin h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    }
    main.download .novaSpin p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: var(--dl-text-muted);
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto;
    }
    main.download .zinc3{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.download .clink9{
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    padding: 40px 28px 36px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    }
    main.download .clink9:hover{
    border-color: var(--dl-primary);
    box-shadow: 0 8px 40px hsla(148, 40%, 40%, 0.08);
    transform: translateY(-2px);
    }
    main.download .jag_wire{
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.download .jag_wire svg{
    width: 40px;
    height: 40px;
    fill: var(--dl-text);
    }
    main.download .clink9 h3{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 6px;
    }
    main.download .clink9 .mantis_q{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--dl-text-muted);
    margin: 0 0 4px;
    }
    main.download .clink9 .lurkBin{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: hsl(148, 6%, 55%);
    margin: 0 0 24px;
    }
    main.download .ratchet6{
    display: inline-block;
    padding: 12px 32px;
    background: var(--dl-text);
    color: var(--dl-bg);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.download .ratchet6:hover{
    background: hsl(148, 10%, 20%);
    transform: translateY(-1px); color: #ffffff;}
    main.download .oxbow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    }
    main.download .oxbow svg{
    width: 14px;
    height: 14px;
    fill: var(--dl-text-muted);
    }
    main.download .oxbow span{
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: var(--dl-text-muted);
    }
    main.download .xyst{
    padding: 80px 24px;
    background: var(--dl-bg-dark);
    }
    main.download .amberTip{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    }
    main.download .yarRow{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid hsla(148, 6%, 50%, 0.1);
    }
    main.download .upheld h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--dl-text-light);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    }
    main.download .upheld p{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: hsl(148, 6%, 55%);
    margin: 0 0 28px;
    }
    main.download .upheld a{
    color: hsl(148, 82%, 58%);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.download .upheld a:hover{
    border-bottom-color: hsl(148, 82%, 58%);
    }
    main.download .dl-steps{
    padding: 100px 24px;
    background: var(--dl-bg);
    }
    main.download .dl-steps-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    }
    main.download .dl-step{
    padding: 40px 32px;
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    position: relative;
    }
    main.download .dl-step-num{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 56px;
    font-weight: 900;
    color: hsla(148, 82%, 50%, 0.1);
    line-height: 1;
    margin-bottom: 20px;
    }
    main.download .dl-step h3{
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 10px;
    }
    main.download .dl-step p{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--dl-text-muted);
    margin: 0;
    }
    main.download .dl-requirements{
    padding: 100px 24px;
    background: var(--dl-bg-dark);
    }
    main.download .dl-req-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    }
    main.download .dl-req-block{
    padding: 40px;
    background: var(--dl-surface-dark);
    border: 1px solid hsla(148, 6%, 50%, 0.1);
    }
    main.download .dl-req-block h3{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dl-text-light);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid hsla(148, 6%, 50%, 0.1);
    }
    main.download .dl-req-list{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.download .dl-req-list li{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: hsl(148, 6%, 55%);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid hsla(148, 6%, 50%, 0.06);
    }
    main.download .dl-req-list li:last-child{
    border-bottom: none;
    }
    main.download .dl-req-list li span:first-child{
    color: hsl(148, 6%, 70%);
    font-weight: 500;
    }
    main.download .dl-security{
    padding: 80px 24px;
    background: var(--dl-bg);
    }
    main.download .dl-security-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    }
    main.download .dl-sec-card{
    padding: 36px 28px;
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    text-align: center;
    }
    main.download .dl-sec-icon{
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(148, 82%, 50%, 0.08);
    }
    main.download .dl-sec-icon svg{
    width: 22px;
    height: 22px;
    fill: var(--dl-primary);
    }
    main.download .dl-sec-card h3{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 8px;
    }
    main.download .dl-sec-card p{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dl-text-muted);
    margin: 0;
    }
    main.download .dl-cta-bottom{
    padding: 100px 24px;
    background: var(--dl-bg-dark);
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.download .dl-cta-bottom::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(148, 82%, 50%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .dl-cta-bottom h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    color: var(--dl-text-light);
    margin: 0 0 16px;
    position: relative;
    z-index: 2;
    }
    main.download .dl-cta-bottom p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: hsl(148, 6%, 55%);
    margin: 0 0 40px;
    position: relative;
    z-index: 2;
    }
    main.download .dl-cta-bottom .etchFin{
    position: relative;
    z-index: 2;
    }
    main.download .dl-cta-links{
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    }
    main.download .dl-cta-links a{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: hsl(148, 6%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-cta-links a:hover{
    color: hsl(148, 82%, 58%);
    }
    main.download .dl-footer{
    padding: 40px 24px;
    background: hsl(148, 10%, 5%);
    border-top: 1px solid hsla(148, 6%, 50%, 0.08); color: #ffffff;}
    main.download .dl-footer-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.download .dl-footer-brand{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: hsl(148, 6%, 60%);
    }
    main.download .dl-footer-copy{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 40%);
    }
    main.download .dl-footer-links{
    display: flex;
    gap: 24px;
    }
    main.download .dl-footer-links a{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 40%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-footer-links a:hover{
    color: hsl(148, 82%, 58%);
    }
    @media (max-width: 900px) {main.download .zinc3{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .amberTip{
    grid-template-columns: 1fr;
    }
    main.download .dl-req-grid{
    grid-template-columns: 1fr;
    }
    main.download .dl-security-inner{
    grid-template-columns: 1fr;
    }}
    @media (max-width: 640px) {main.download .wold{
    padding: 100px 20px 60px;
    min-height: 80vh;
    }
    main.download .zinc3{
    grid-template-columns: 1fr;
    }
    main.download .dl-steps-grid{
    grid-template-columns: 1fr;
    }
    main.download .pithCap{
    gap: 20px;
    }
    main.download .dl-footer-inner{
    flex-direction: column;
    text-align: center;
    }}
    main.download .driftMesh{
    width: 100%;
    background: var(--text-color, hsl(148, 10%, 10%));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 48px 24px 40px;
    box-sizing: border-box;
    }
    main.download .quillJab{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }
    main.download .dapple{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }
    main.download .grotto7{
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    }
    main.download .inkDab{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
    }
    main.download .hazeWrap{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.download .brineFog{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    flex: 0 0 auto;
    }
    main.download .brineFog:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.download .elkRun{
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
    }
    main.download .fluxOrb{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    margin: 8px 0 0;
    text-align: center;
    }
    @media (max-width: 640px) {main.download .driftMesh{
    padding: 36px 20px 32px;
    }
    main.download .hazeWrap{
    gap: 16px;
    }
    main.download .brineFog{
    font-size: 13px;
    }
    main.download .fluxOrb{
    font-size: 12px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");
    main.features *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.features .jolt_arc{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--feat-dark);
    overflow: hidden;
    padding: 120px 24px 80px;
    }
    main.features .jolt_arc::before{
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, hsla(148, 82%, 58%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .jolt_arc::after{
    content: "";
    position: absolute;
    bottom: -30%;
    right: -15%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, hsla(225, 66%, 58%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .gust{
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 1;
    }
    main.features .nix_cog{
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--feat-border);
    color: var(--feat-primary-light);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
    }
    main.features .jolt_arc h1{
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 7vw, 80px);
    font-weight: 800;
    color: var(--feat-text-primary);
    line-height: 1.05;
    margin-bottom: 32px;
    letter-spacing: -1px;
    }
    main.features .jolt_arc h1 .vat7{
    color: var(--feat-primary-light);
    }
    main.features .optic3{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--feat-text-secondary);
    max-width: 640px;
    margin: 0 auto 48px;
    }
    main.features .mirth{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .cruxFog{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: var(--feat-primary);
    color: hsl(148, 20%, 8%);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    letter-spacing: 0.3px;
    }
    main.features .cruxFog:hover{
    background: var(--feat-primary-light);
    transform: translateY(-2px);
    }
    main.features .iota{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: transparent;
    color: var(--feat-text-primary);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--feat-border);
    transition: border-color 0.2s, color 0.2s;
    }
    main.features .iota:hover{
    border-color: var(--feat-primary-light);
    color: var(--feat-primary-light);
    }
    main.features .zenithRay{
    background: var(--feat-dark);
    padding: 120px 24px;
    }
    main.features .hivePlex{
    max-width: 1200px;
    margin: 0 auto;
    }
    main.features .ossify{
    max-width: 680px;
    margin-bottom: 80px;
    }
    main.features .rusk_vim{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--feat-primary-light);
    margin-bottom: 20px;
    }
    main.features .ossify h2{
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--feat-text-primary);
    line-height: 1.1;
    margin-bottom: 20px;
    }
    main.features .ossify p{
    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--feat-text-secondary);
    }
    main.features .knack5{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    }
    main.features .ivyNook{
    background: var(--feat-dark-card);
    padding: 48px 36px;
    position: relative;
    transition: background 0.3s;
    }
    main.features .ivyNook:hover{
    background: hsl(148, 10%, 13%); color: #ffffff;}
    main.features .fawnLux{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: var(--feat-primary-light);
    }
    main.features .fawnLux svg{
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    }
    main.features .ivyNook h3{
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--feat-text-primary);
    margin-bottom: 14px;
    }
    main.features .ivyNook p{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--feat-text-muted);
    }
    main.features .lynxDot{
    background: var(--feat-dark);
    padding: 120px 24px;
    }
    main.features .yoke{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.features .yoke + .yoke{
    margin-top: 140px;
    }
    main.features .yoke:nth-child(even){
    direction: rtl;
    }
    main.features .yoke:nth-child(even) > *{
    direction: ltr;
    }
    main.features .elmSpur .husk9{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--feat-secondary);
    margin-bottom: 16px;
    }
    main.features .elmSpur h2{
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--feat-text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
    }
    main.features .elmSpur p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--feat-text-secondary);
    margin-bottom: 32px;
    }
    main.features .trellis{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    }
    main.features .trellis li{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: var(--feat-text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.features .trellis li::before{
    content: "";
    width: 6px;
    height: 6px;
    background: var(--feat-primary-light);
    flex-shrink: 0;
    }
    main.features .lumen_arc{
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    }
    main.features .lumen_arc img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.9);
    }
    main.features .xeno_dab{
    background: var(--feat-dark-card);
    padding: 100px 24px;
    }
    main.features .whimPod{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    }
    main.features .glacier{
    text-align: center;
    padding: 48px 24px;
    }
    main.features .bevel3{
    font-family: "Playfair Display", serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    color: var(--feat-primary-light);
    line-height: 1;
    margin-bottom: 12px;
    }
    main.features .nubCrest{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--feat-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    main.features .feat-ai-section{
    background: var(--feat-dark);
    padding: 120px 24px;
    position: relative;
    }
    main.features .feat-ai-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    }
    main.features .feat-ai-text h2{
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--feat-text-primary);
    line-height: 1.1;
    margin-bottom: 24px;
    }
    main.features .feat-ai-text p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--feat-text-secondary);
    margin-bottom: 36px;
    }
    main.features .feat-ai-features{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.features .feat-ai-feat{
    padding: 24px;
    background: var(--feat-dark-card);
    border: 1px solid var(--feat-border);
    }
    main.features .feat-ai-feat h4{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--feat-text-primary);
    margin-bottom: 8px;
    }
    main.features .feat-ai-feat p{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--feat-text-muted);
    margin-bottom: 0;
    }
    main.features .feat-ai-visual{
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    }
    main.features .feat-ai-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    main.features .feat-ai-visual::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(148, 82%, 58%, 0.1), hsla(225, 66%, 58%, 0.1));
    pointer-events: none;
    }
    main.features .feat-cta{
    background: var(--feat-dark);
    padding: 140px 24px;
    text-align: center;
    position: relative;
    }
    main.features .feat-cta::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--feat-primary-light));
    }
    main.features .feat-cta h2{
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--feat-text-primary);
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    }
    main.features .feat-cta p{
    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--feat-text-secondary);
    max-width: 520px;
    margin: 0 auto 44px;
    }
    main.features .feat-cta-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .feat-footer{
    background: var(--feat-dark-card);
    border-top: 1px solid var(--feat-border);
    padding: 48px 24px;
    }
    main.features .feat-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.features .feat-footer-brand{
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--feat-text-primary);
    }
    main.features .feat-footer-copy{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--feat-text-muted);
    }
    main.features .feat-footer-links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.features .feat-footer-links a{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--feat-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.features .feat-footer-links a:hover{
    color: var(--feat-primary-light);
    }
    main.features .frond_hue{
    color: var(--feat-primary-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.features .frond_hue:hover{
    border-bottom-color: var(--feat-primary-light);
    }
    @media (max-width: 1024px) {main.features .knack5{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .yoke{
    grid-template-columns: 1fr;
    gap: 48px;
    }
    main.features .yoke:nth-child(even){
    direction: ltr;
    }
    main.features .feat-ai-inner{
    grid-template-columns: 1fr;
    gap: 48px;
    }
    main.features .whimPod{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 640px) {main.features .knack5{
    grid-template-columns: 1fr;
    }
    main.features .ivyNook{
    padding: 36px 28px;
    }
    main.features .jolt_arc{
    padding: 100px 20px 60px;
    min-height: 80vh;
    }
    main.features .zenithRay{
    padding: 80px 20px;
    }
    main.features .lynxDot{
    padding: 80px 20px;
    }
    main.features .yoke + .yoke{
    margin-top: 80px;
    }
    main.features .whimPod{
    grid-template-columns: 1fr 1fr;
    }
    main.features .glacier{
    padding: 32px 16px;
    }
    main.features .feat-ai-features{
    grid-template-columns: 1fr;
    }
    main.features .feat-cta{
    padding: 100px 20px;
    }
    main.features .feat-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.features .feat-footer-links{
    justify-content: center;
    }}
    main.features .jibCut{
    background: var(--text-color, hsl(148, 10%, 10%));
    padding: 56px 24px 40px;
    border-top: 2px solid var(--primary-color, hsl(148, 72%, 42%));
    }
    main.features .pang{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    }
    main.features .phantom{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.features .dint_map{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    }
    main.features .gritPod{
    font-size: 14px;
    color: hsl(148, 12%, 56%);
    margin: 0;
    letter-spacing: 1px;
    }
    main.features .siltEdge{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    }
    main.features .krambit{
    font-size: 14px;
    color: hsl(148, 8%, 72%);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition, all 0.2s ease);
    border-bottom: 1px solid transparent;
    }
    main.features .krambit:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    border-bottom-color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.features .urnGlow{
    width: 1px;
    height: 14px;
    background: hsl(148, 6%, 28%);
    flex-shrink: 0; color: #ffffff;}
    main.features .quench{
    padding-top: 24px;
    border-top: 1px solid hsl(148, 6%, 20%);
    width: 100%;
    text-align: center;
    }
    main.features .meld7{
    font-size: 13px;
    color: hsl(148, 6%, 44%);
    margin: 0;
    letter-spacing: 0.3px;
    }
    @media (max-width: 640px) {main.features .jibCut{
    padding: 40px 16px 32px;
    }
    main.features .pang{
    gap: 24px;
    }
    main.features .siltEdge{
    flex-direction: column;
    gap: 4px;
    }
    main.features .urnGlow{
    display: none;
    }
    main.features .krambit{
    padding: 8px 16px;
    }
    main.features .dint_map{
    font-size: 20px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap");
    main.system-requirements *{ box-sizing: border-box; margin: 0; padding: 0; }
    main.system-requirements .prism{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--sr-bg-dark);
    }
    main.system-requirements .dune{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    filter: brightness(0.6);
    }
    main.system-requirements .vortex{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,26,18,0.85) 0%, rgba(10,26,18,0.6) 100%); color: #ffffff;}
    main.system-requirements .haze{
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 80px 24px 60px;
    }
    main.system-requirements .whirl{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-primary);
    border: 1px solid var(--sr-primary);
    padding: 6px 18px;
    margin-bottom: 28px;
    }
    main.system-requirements .prism h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 900;
    color: var(--sr-text-light);
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    }
    main.system-requirements .bloom{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    color: hsl(148, 8%, 72%);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 36px;
    }
    main.system-requirements .apex{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.system-requirements .husk{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    }
    main.system-requirements .knoll{
    background: var(--sr-primary);
    color: hsl(148, 10%, 6%);
    box-shadow: 0 4px 20px hsla(148, 82%, 42%, 0.35);
    }
    main.system-requirements .knoll:hover{
    background: var(--sr-primary-dark);
    box-shadow: 0 6px 28px hsla(148, 82%, 42%, 0.45);
    transform: translateY(-1px);
    }
    main.system-requirements .sigma{
    background: transparent;
    color: var(--sr-text-light);
    border: 2px solid hsl(148, 8%, 40%);
    }
    main.system-requirements .sigma:hover{
    border-color: var(--sr-primary);
    color: var(--sr-primary);
    }
    main.system-requirements .forge{
    padding: 80px 24px;
    }
    main.system-requirements .delta{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.system-requirements .quartz{
    background: var(--sr-bg);
    }
    main.system-requirements .realm{
    background: var(--sr-card-bg);
    }
    main.system-requirements .sr-section--dark{
    background: var(--sr-bg-dark);
    }
    main.system-requirements .raven{
    text-align: center;
    margin-bottom: 56px;
    }
    main.system-requirements .dusk{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-primary);
    margin-bottom: 14px;
    }
    main.system-requirements .coral{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--sr-text);
    line-height: 1.2;
    margin-bottom: 14px;
    }
    main.system-requirements .sr-section--dark .coral{
    color: var(--sr-text-light);
    }
    main.system-requirements .ember{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: var(--sr-text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
    }
    main.system-requirements .sr-section--dark .ember{
    color: hsl(148, 6%, 60%);
    }
    
    main.system-requirements .sr-tabs{
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 48px;
    background: hsl(148, 8%, 92%);
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    }
    main.system-requirements .sr-tab{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    background: transparent;
    border: none;
    color: var(--sr-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    }
    main.system-requirements .sr-tab--active{
    background: var(--sr-card-bg);
    color: var(--sr-text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    main.system-requirements .sr-tab:hover:not(.sr-tab--active){
    color: var(--sr-text);
    }
    
    main.system-requirements .nebula{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    }
    main.system-requirements .prism{
    background: var(--sr-card-bg);
    border: 1px solid var(--sr-border);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    main.system-requirements .prism:hover{
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    }
    main.system-requirements .glacier{
    padding: 28px 28px 20px;
    border-bottom: 1px solid var(--sr-border);
    display: flex;
    align-items: center;
    gap: 16px;
    }
    main.system-requirements .elbow{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    }
    main.system-requirements .vortex{ background: hsl(207, 80%, 94%); color: hsl(207, 80%, 45%); }
    main.system-requirements .vapor{ background: hsl(0, 0%, 92%); color: hsl(0, 0%, 20%); }
    main.system-requirements .phantom{ background: hsl(45, 90%, 90%); color: hsl(45, 90%, 35%); }
    main.system-requirements .fable{ background: hsl(148, 60%, 90%); color: hsl(148, 60%, 35%); }
    main.system-requirements .pulse{ background: hsl(0, 0%, 92%); color: hsl(0, 0%, 25%); }
    main.system-requirements .unity{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sr-text);
    }
    main.system-requirements .axiom{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--sr-text-muted);
    margin-top: 2px;
    }
    main.system-requirements .cobalt{
    padding: 24px 28px 28px;
    }
    main.system-requirements .bolt{
    width: 100%;
    border-collapse: collapse;
    }
    main.system-requirements .bolt th, main.system-requirements .bolt td{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 10px 0;
    text-align: left;
    border-bottom: 1px solid hsl(148, 8%, 94%);
    vertical-align: top;
    }
    main.system-requirements .bolt th{
    font-weight: 600;
    color: var(--sr-text);
    width: 110px;
    white-space: nowrap;
    }
    main.system-requirements .bolt td{
    color: var(--sr-text-muted);
    line-height: 1.5;
    }
    main.system-requirements .bolt tr:last-child th, main.system-requirements .bolt tr:last-child td{
    border-bottom: none;
    }
    main.system-requirements .torch{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: 0.04em;
    }
    main.system-requirements .depot{
    background: hsl(45, 90%, 90%);
    color: hsl(45, 90%, 28%);
    }
    main.system-requirements .falcon{
    background: hsl(148, 60%, 90%);
    color: hsl(148, 82%, 28%);
    }
    
    main.system-requirements .sr-compare-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    }
    main.system-requirements .sr-compare{
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    font-family: "Inter", sans-serif;
    }
    main.system-requirements .sr-compare thead th{
    font-size: 14px;
    font-weight: 700;
    color: var(--sr-text);
    padding: 16px 20px;
    text-align: left;
    background: hsl(148, 8%, 94%);
    border-bottom: 2px solid var(--sr-border);
    white-space: nowrap;
    }
    main.system-requirements .sr-compare tbody td{
    font-size: 14px;
    color: var(--sr-text-muted);
    padding: 14px 20px;
    border-bottom: 1px solid hsl(148, 8%, 95%);
    vertical-align: top;
    }
    main.system-requirements .sr-compare tbody tr:hover{
    background: hsl(148, 8%, 98%);
    }
    main.system-requirements .sr-compare tbody td:first-child{
    font-weight: 600;
    color: var(--sr-text);
    white-space: nowrap;
    }
    main.system-requirements .sr-check{
    color: var(--sr-primary);
    font-weight: 700;
    }
    
    main.system-requirements .sr-tips-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    }
    main.system-requirements .sr-tip{
    background: var(--sr-surface-elevated);
    border: 1px solid var(--sr-border);
    padding: 32px 28px;
    transition: box-shadow 0.2s;
    }
    main.system-requirements .sr-tip:hover{
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    }
    main.system-requirements .sr-tip__icon{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    background: hsl(148, 60%, 92%);
    color: var(--sr-primary-dark);
    }
    main.system-requirements .sr-tip__title{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sr-text);
    margin-bottom: 10px;
    }
    main.system-requirements .sr-tip__text{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--sr-text-muted);
    line-height: 1.65;
    }
    
    main.system-requirements .sr-faq-list{
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .sr-faq{
    border: 1px solid hsl(148, 8%, 25%);
    padding: 24px 28px;
    }
    main.system-requirements .sr-faq__q{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--sr-text-light);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    }
    main.system-requirements .sr-faq__q::before{
    content: "Q";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--sr-primary);
    color: hsl(148, 10%, 6%);
    font-size: 12px;
    font-weight: 800;
    }
    main.system-requirements .sr-faq__a{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: hsl(148, 6%, 60%);
    line-height: 1.7;
    padding-left: 38px;
    }
    main.system-requirements .sr-faq__a a{
    color: var(--sr-primary);
    text-decoration: none;
    }
    main.system-requirements .sr-faq__a a:hover{
    text-decoration: underline;
    }
    
    main.system-requirements .sr-cta{
    text-align: center;
    padding: 72px 24px;
    background: linear-gradient(135deg, hsl(148, 82%, 38%) 0%, hsl(148, 70%, 28%) 100%);
    }
    main.system-requirements .sr-cta__title{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: hsl(0, 0%, 100%);
    margin-bottom: 14px;
    }
    main.system-requirements .sr-cta__text{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: hsl(148, 30%, 88%);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.system-requirements .sr-btn--white{
    background: hsl(0, 0%, 100%);
    color: hsl(148, 82%, 28%);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    main.system-requirements .sr-btn--white:hover{
    background: hsl(0, 0%, 96%);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    }
    
    main.system-requirements .cobalt{
    background: hsl(148, 10%, 6%);
    padding: 48px 24px; color: #ffffff;}
    main.system-requirements .sr-footer__inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.system-requirements .sr-footer__brand{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--sr-text-light);
    }
    main.system-requirements .sr-footer__copy{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 45%);
    }
    main.system-requirements .sr-footer__links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.system-requirements .sr-footer__links a{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.system-requirements .sr-footer__links a:hover{
    color: var(--sr-primary);
    }
    
    @media (max-width: 768px) {main.system-requirements .haze{ padding: 60px 20px 48px; }
    main.system-requirements .forge{ padding: 56px 16px; }
    main.system-requirements .nebula{ grid-template-columns: 1fr; }
    main.system-requirements .sr-tips-grid{ grid-template-columns: 1fr; }
    main.system-requirements .sr-tabs{ flex-wrap: wrap; width: auto; margin-left: 16px; margin-right: 16px; }
    main.system-requirements .sr-tab{ padding: 8px 16px; font-size: 13px; }
    main.system-requirements .sr-footer__inner{ flex-direction: column; text-align: center; }
    main.system-requirements .sr-footer__links{ justify-content: center; }
    main.system-requirements .glacier{ padding: 20px; }
    main.system-requirements .cobalt{ padding: 20px; }
    main.system-requirements .apex{ flex-direction: column; align-items: center; }}
    @media (max-width: 480px) {main.system-requirements .bolt th{ width: 80px; font-size: 13px; }
    main.system-requirements .bolt td{ font-size: 13px; }}
    main.system-requirements .cobalt{
    background: var(--text-color, hsl(148, 10%, 10%));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 48px 24px 36px;
    margin-top: 0;
    }
    main.system-requirements .alder{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    }
    main.system-requirements .falcon{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.system-requirements .etch{
    font-family: "Georgia", "Noto Serif SC", serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    }
    main.system-requirements .jade{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
    }
    main.system-requirements .cedar{
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.system-requirements .drift{
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 16px;
    transition: color 0.2s ease;
    flex: 0 0 auto;
    }
    main.system-requirements .drift:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.system-requirements .glyph{
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.12);
    flex: 0 0 1px;
    }
    main.system-requirements .wren{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.01em;
    }
    @media (max-width: 640px) {main.system-requirements .cobalt{
    padding: 36px 16px 28px;
    }
    main.system-requirements .alder{
    gap: 20px;
    }
    main.system-requirements .cedar{
    gap: 4px;
    }
    main.system-requirements .drift{
    padding: 6px 10px;
    font-size: 13px;
    }
    main.system-requirements .wren{
    font-size: 12px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap");
    main.getting-started *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.getting-started .ridge{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    background: var(--gs-bg-dark);
    overflow: hidden;
    }
    main.getting-started .ridge::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("static/img/getting-started-overview-1.jpg") center/cover no-repeat;
    opacity: 0.18;
    filter: saturate(0.4);
    }
    main.getting-started .ridge::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, var(--gs-bg-dark), transparent);
    }
    main.getting-started .cedar{
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 32px 80px;
    width: 100%;
    }
    main.getting-started .flint{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-primary);
    border: 1.5px solid var(--gs-primary);
    padding: 6px 16px;
    margin-bottom: 32px;
    }
    main.getting-started .ridge h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 6vw, 80px);
    font-weight: 900;
    line-height: 1.05;
    color: var(--gs-text-light);
    max-width: 800px;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
    }
    main.getting-started .ridge h1 span{
    color: var(--gs-primary);
    }
    main.getting-started .etch{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: hsl(148, 6%, 65%);
    max-width: 560px;
    margin-bottom: 48px;
    }
    main.getting-started .bolt{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.getting-started .jade{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gs-bg-dark);
    background: var(--gs-primary);
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
    }
    main.getting-started .jade:hover{
    background: var(--gs-primary-dark);
    transform: translateY(-1px);
    }
    main.getting-started .crest{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gs-text-light);
    background: transparent;
    border: 2px solid hsl(148, 6%, 30%);
    padding: 14px 34px;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
    }
    main.getting-started .crest:hover{
    border-color: var(--gs-primary);
    color: var(--gs-primary);
    }
    main.getting-started .apex{
    position: relative;
    z-index: 2;
    display: flex;
    gap: 64px;
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid hsl(148, 6%, 20%);
    }
    main.getting-started .aurora{
    font-family: "Playfair Display", serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--gs-primary);
    }
    main.getting-started .clover{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: hsl(148, 6%, 50%);
    margin-top: 4px;
    }
    
    main.getting-started .umber{
    background: var(--gs-bg);
    padding: 120px 32px;
    }
    main.getting-started .wicker{
    max-width: 1200px;
    margin: 0 auto;
    }
    main.getting-started .basalt{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-primary);
    margin-bottom: 16px;
    }
    main.getting-started .raven{
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: var(--gs-text);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    }
    main.getting-started .latch{
    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--gs-text-muted);
    max-width: 600px;
    margin-bottom: 72px;
    }
    main.getting-started .yarn{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--gs-border);
    }
    main.getting-started .nimbus{
    background: var(--gs-card-bg);
    padding: 56px 40px;
    position: relative;
    transition: background 0.3s;
    }
    main.getting-started .nimbus:hover{
    background: hsl(148, 12%, 98%);
    }
    main.getting-started .brine{
    font-family: "Playfair Display", serif;
    font-size: 64px;
    font-weight: 900;
    color: hsl(148, 8%, 92%);
    line-height: 1;
    margin-bottom: 24px;
    }
    main.getting-started .nimbus:hover .brine{
    color: hsl(148, 40%, 85%);
    }
    main.getting-started .forge{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--gs-text);
    margin-bottom: 16px;
    }
    main.getting-started .drift{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gs-text-muted);
    }
    main.getting-started .slate{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gs-primary);
    text-decoration: none;
    margin-top: 20px;
    transition: gap 0.2s;
    }
    main.getting-started .slate:hover{
    gap: 10px;
    }
    main.getting-started .slate svg{
    width: 16px;
    height: 16px;
    }
    
    main.getting-started .alder{
    background: var(--gs-bg-dark);
    padding: 120px 32px;
    }
    main.getting-started .vivid{
    max-width: 1200px;
    margin: 0 auto;
    }
    main.getting-started .alder .raven{
    color: var(--gs-text-light);
    }
    main.getting-started .alder .latch{
    color: hsl(148, 6%, 55%);
    }
    main.getting-started .surge{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    }
    main.getting-started .opal{
    position: relative;
    overflow: hidden;
    background: hsl(148, 8%, 12%);
    display: flex;
    flex-direction: column; color: #ffffff;}
    main.getting-started .opal:first-child{
    grid-row: span 2;
    }
    main.getting-started .husk{
    position: relative;
    overflow: hidden;
    }
    main.getting-started .opal:first-child .husk{
    flex: 1;
    }
    main.getting-started .moss{
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
    filter: saturate(0.8);
    }
    main.getting-started .opal:hover .moss{
    transform: scale(1.04);
    }
    main.getting-started .glyph{
    padding: 32px;
    }
    main.getting-started .onyx{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-primary);
    margin-bottom: 12px;
    }
    main.getting-started .xenon{
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--gs-text-light);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    }
    main.getting-started .opal:nth-child(2) .xenon, main.getting-started .opal:nth-child(3) .xenon{
    font-size: 20px;
    }
    main.getting-started .plume{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: hsl(148, 6%, 55%);
    }
    main.getting-started .knoll{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 40%);
    margin-top: 16px;
    }
    
    main.getting-started .loom{
    background: var(--gs-bg);
    padding: 120px 32px;
    }
    main.getting-started .vale{
    max-width: 1200px;
    margin: 0 auto;
    }
    main.getting-started .gs-quicklook-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 72px;
    gap: 32px;
    flex-wrap: wrap;
    }
    main.getting-started .gs-quicklook-header .latch{
    margin-bottom: 0;
    }
    main.getting-started .gs-ql-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--gs-border);
    }
    main.getting-started .gs-ql-item{
    background: var(--gs-card-bg);
    padding: 56px 48px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    transition: background 0.3s;
    }
    main.getting-started .gs-ql-item:hover{
    background: hsl(148, 12%, 98%);
    }
    main.getting-started .gs-ql-icon{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: hsl(148, 60%, 94%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gs-primary-dark);
    }
    main.getting-started .gs-ql-icon svg{
    width: 24px;
    height: 24px;
    }
    main.getting-started .gs-ql-title{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gs-text);
    margin-bottom: 10px;
    }
    main.getting-started .gs-ql-text{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gs-text-muted);
    }
    
    main.getting-started .gs-showcase{
    position: relative;
    background: var(--gs-bg-dark);
    padding: 120px 32px;
    overflow: hidden;
    }
    main.getting-started .gs-showcase-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    }
    main.getting-started .gs-showcase-img{
    width: 100%;
    height: 480px;
    object-fit: cover;
    filter: saturate(0.85);
    }
    main.getting-started .gs-showcase .raven{
    color: var(--gs-text-light);
    }
    main.getting-started .gs-showcase .latch{
    color: hsl(148, 6%, 55%);
    margin-bottom: 40px;
    }
    main.getting-started .gs-checklist{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    }
    main.getting-started .gs-checklist li{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: hsl(148, 6%, 70%);
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.getting-started .gs-check-icon{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--gs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.getting-started .gs-check-icon svg{
    width: 12px;
    height: 12px;
    color: var(--gs-bg-dark);
    }
    
    main.getting-started .gs-faq{
    background: var(--gs-bg);
    padding: 120px 32px;
    }
    main.getting-started .gs-faq-inner{
    max-width: 800px;
    margin: 0 auto;
    }
    main.getting-started .gs-faq-list{
    margin-top: 64px;
    }
    main.getting-started .gs-faq-item{
    border-bottom: 1px solid var(--gs-border);
    }
    main.getting-started .gs-faq-q{
    width: 100%;
    background: none;
    border: none;
    padding: 28px 0;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--gs-text);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.2s;
    }
    main.getting-started .gs-faq-q:hover{
    color: var(--gs-primary-dark);
    }
    main.getting-started .gs-faq-q svg{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
    color: var(--gs-text-muted);
    }
    main.getting-started .gs-faq-item.active .gs-faq-q svg{
    transform: rotate(45deg);
    color: var(--gs-primary);
    }
    main.getting-started .gs-faq-a{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    }
    main.getting-started .gs-faq-item.active .gs-faq-a{
    max-height: 300px;
    padding-bottom: 28px;
    }
    main.getting-started .gs-faq-a p{
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--gs-text-muted);
    }
    main.getting-started .gs-faq-a a{
    color: var(--gs-primary-dark);
    text-decoration: none;
    font-weight: 500;
    }
    main.getting-started .gs-faq-a a:hover{
    text-decoration: underline;
    }
    
    main.getting-started .gs-cta{
    background: var(--gs-primary);
    padding: 100px 32px;
    text-align: center;
    }
    main.getting-started .gs-cta-inner{
    max-width: 640px;
    margin: 0 auto;
    }
    main.getting-started .gs-cta-title{
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--gs-bg-dark);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    }
    main.getting-started .gs-cta-desc{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: hsl(148, 60%, 18%);
    margin-bottom: 40px;
    }
    main.getting-started .gs-btn-dark{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gs-primary);
    background: var(--gs-bg-dark);
    padding: 18px 44px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    }
    main.getting-started .gs-btn-dark:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }
    
    main.getting-started .wren{
    background: var(--gs-bg-dark);
    border-top: 1px solid hsl(148, 6%, 16%);
    padding: 64px 32px;
    }
    main.getting-started .haze{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.getting-started .ivory{
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--gs-text-light);
    }
    main.getting-started .zinc{
    display: flex;
    gap: 32px;
    list-style: none;
    }
    main.getting-started .zinc a{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: hsl(148, 6%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.getting-started .zinc a:hover{
    color: var(--gs-primary);
    }
    main.getting-started .gs-footer-copy{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: hsl(148, 6%, 35%);
    width: 100%;
    text-align: center;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid hsl(148, 6%, 16%);
    }
    
    @media (max-width: 900px) {main.getting-started .yarn{
    grid-template-columns: 1fr;
    }
    main.getting-started .surge{
    grid-template-columns: 1fr;
    }
    main.getting-started .opal:first-child{
    grid-row: auto;
    }
    main.getting-started .gs-ql-grid{
    grid-template-columns: 1fr;
    }
    main.getting-started .gs-showcase-inner{
    grid-template-columns: 1fr;
    gap: 48px;
    }
    main.getting-started .apex{
    gap: 32px;
    flex-wrap: wrap;
    }
    main.getting-started .gs-quicklook-header{
    flex-direction: column;
    align-items: flex-start;
    }}
    @media (max-width: 600px) {main.getting-started .cedar{
    padding: 100px 20px 60px;
    }
    main.getting-started .nimbus{
    padding: 40px 24px;
    }
    main.getting-started .gs-ql-item{
    padding: 36px 24px;
    flex-direction: column;
    gap: 16px;
    }
    main.getting-started .glyph{
    padding: 24px;
    }
    main.getting-started .haze{
    flex-direction: column;
    text-align: center;
    }
    main.getting-started .zinc{
    justify-content: center;
    }}
    main.getting-started .wren{
    background: hsl(148, 10%, 8%);
    padding: 64px 24px 40px;
    margin-top: 120px;
    border-top: 2px solid var(--primary-color, hsl(148, 72%, 42%)); color: #ffffff;}
    main.getting-started .haze{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    }
    main.getting-started .ivory{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    }
    main.getting-started .cirrus{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    }
    main.getting-started .thorn{
    font-size: 14px;
    color: hsl(148, 8%, 52%);
    margin: 0;
    letter-spacing: 0.2px;
    }
    main.getting-started .zinc{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 0 0 auto;
    }
    main.getting-started .shard{
    font-size: 14px;
    color: hsl(148, 6%, 68%);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 4px 8px;
    flex: 0 0 auto;
    }
    main.getting-started .shard:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.getting-started .pike{
    width: 1px;
    height: 14px;
    background: hsl(148, 6%, 24%);
    flex: 0 0 1px; color: #ffffff;}
    main.getting-started .quill{
    padding-top: 28px;
    border-top: 1px solid hsl(148, 6%, 16%);
    width: 100%;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    }
    main.getting-started .dune{
    font-size: 13px;
    color: hsl(148, 4%, 40%);
    letter-spacing: 0.2px;
    flex: 0 0 auto;
    }
    @media (max-width: 640px) {main.getting-started .wren{
    padding: 48px 20px 32px;
    margin-top: 80px;
    }
    main.getting-started .haze{
    gap: 28px;
    }
    main.getting-started .zinc{
    gap: 8px;
    }
    main.getting-started .shard{
    font-size: 13px;
    padding: 4px 6px;
    }
    main.getting-started .cirrus{
    font-size: 20px;
    }
    main.getting-started .dune{
    font-size: 12px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap");
    main.templates *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.templates .orchid{
    position: relative;
    min-height: 92vh;
    background: var(--tpl-bg-dark);
    display: flex;
    align-items: center;
    overflow: hidden;
    }
    main.templates .orchid::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 80% 60% at 20% 80%, hsla(148, 82%, 42%, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, hsla(225, 66%, 58%, 0.1), transparent);
    pointer-events: none;
    }
    main.templates .crimson{
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    padding: 120px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    }
    main.templates .dewdrop h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 900;
    color: var(--tpl-text-light);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
    }
    main.templates .dewdrop h1 .lantern{
    color: var(--tpl-primary-light);
    }
    main.templates .ripple{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    color: hsla(148, 6%, 96%, 0.65);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 520px;
    }
    main.templates .quarry{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.templates .glacier{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: var(--tpl-primary);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    }
    main.templates .glacier:hover{
    background: hsl(148, 82%, 36%);
    transform: translateY(-1px);
    }
    main.templates .falcon{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: transparent;
    color: var(--tpl-text-light);
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid hsla(148, 6%, 96%, 0.25);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    }
    main.templates .falcon:hover{
    border-color: var(--tpl-primary-light);
    background: hsla(148, 82%, 58%, 0.06);
    }
    main.templates .tundra{
    position: relative;
    }
    main.templates .dusk{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: brightness(0.92) contrast(1.05);
    }
    main.templates .velvet{
    position: absolute;
    bottom: -20px;
    left: 32px;
    background: var(--tpl-warm-accent);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    }
    main.templates .obsidian{
    background: var(--tpl-bg-dark);
    border-top: 1px solid hsla(148, 6%, 96%, 0.08);
    }
    main.templates .basalt{
    max-width: 1320px;
    margin: 0 auto;
    padding: 64px 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    }
    main.templates .onyx{
    text-align: center;
    }
    main.templates .flint{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--tpl-primary-light);
    line-height: 1;
    margin-bottom: 8px;
    }
    main.templates .grove{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: hsla(148, 6%, 96%, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    }
    main.templates .haze{
    background: var(--tpl-bg);
    padding: 100px 48px;
    }
    main.templates .zenith{
    max-width: 1320px;
    margin: 0 auto;
    }
    main.templates .nutmeg{
    margin-bottom: 64px;
    }
    main.templates .nutmeg h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 800;
    color: var(--tpl-text);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    }
    main.templates .nutmeg p{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: var(--tpl-text-muted);
    line-height: 1.7;
    max-width: 560px;
    }
    main.templates .kelp{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--tpl-border);
    }
    main.templates .yarrow{
    background: var(--tpl-card-bg);
    padding: 48px 40px;
    transition: background 0.25s;
    cursor: pointer;
    position: relative;
    }
    main.templates .yarrow:hover{
    background: hsl(148, 12%, 98%);
    }
    main.templates .marble{
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    }
    main.templates .yarrow h3{
    font-family: "Inter", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tpl-text);
    margin-bottom: 12px;
    }
    main.templates .yarrow p{
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    color: var(--tpl-text-muted);
    line-height: 1.65;
    margin-bottom: 20px;
    }
    main.templates .indigo{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: var(--tpl-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    }
    main.templates .xylem{
    background: var(--tpl-bg-dark);
    padding: 100px 48px;
    }
    main.templates .ember{
    max-width: 1320px;
    margin: 0 auto;
    }
    main.templates .xylem .nutmeg h2{
    color: var(--tpl-text-light);
    }
    main.templates .xylem .nutmeg p{
    color: hsla(148, 6%, 96%, 0.55);
    }
    main.templates .aurora{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    }
    main.templates .vortex{
    position: relative;
    overflow: hidden;
    background: hsla(148, 6%, 96%, 0.04);
    border: 1px solid hsla(148, 6%, 96%, 0.08);
    transition: border-color 0.3s;
    }
    main.templates .vortex:hover{
    border-color: hsla(148, 82%, 58%, 0.25);
    }
    main.templates .vortex img{
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
    transition: filter 0.3s;
    }
    main.templates .vortex:hover img{
    filter: brightness(0.95);
    }
    main.templates .tpl-featured-info{
    padding: 28px 32px;
    }
    main.templates .tpl-featured-tag{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tpl-primary-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    }
    main.templates .tpl-featured-info h3{
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tpl-text-light);
    margin-bottom: 8px;
    }
    main.templates .tpl-featured-info p{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: hsla(148, 6%, 96%, 0.5);
    line-height: 1.6;
    }
    main.templates .tpl-featured-meta{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid hsla(148, 6%, 96%, 0.08);
    }
    main.templates .tpl-featured-meta span{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: hsla(148, 6%, 96%, 0.4);
    }
    main.templates .tpl-showcase{
    background: var(--tpl-bg);
    padding: 100px 48px;
    }
    main.templates .tpl-showcase-inner{
    max-width: 1320px;
    margin: 0 auto;
    }
    main.templates .tpl-showcase-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 64px;
    }
    main.templates .tpl-showcase-img{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    }
    main.templates .tpl-showcase-text h3{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--tpl-text);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    }
    main.templates .tpl-showcase-text p{
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    color: var(--tpl-text-muted);
    line-height: 1.75;
    margin-bottom: 32px;
    }
    main.templates .tpl-feature-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
    }
    main.templates .tpl-feature-list li{
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    color: var(--tpl-text);
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.templates .tpl-feature-list li::before{
    content: "→";
    color: var(--tpl-primary);
    font-weight: 700;
    flex-shrink: 0;
    }
    main.templates .tpl-popular{
    background: hsl(148, 10%, 6%);
    padding: 100px 48px; color: #ffffff;}
    main.templates .tpl-popular-inner{
    max-width: 1320px;
    margin: 0 auto;
    }
    main.templates .tpl-popular .nutmeg h2{
    color: var(--tpl-text-light);
    }
    main.templates .tpl-popular .nutmeg p{
    color: hsla(148, 6%, 96%, 0.5);
    }
    main.templates .tpl-popular-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: hsla(148, 6%, 96%, 0.06);
    }
    main.templates .tpl-popular-item{
    background: hsl(148, 10%, 6%);
    padding: 40px 32px;
    transition: background 0.25s; color: #ffffff;}
    main.templates .tpl-popular-item:hover{
    background: hsla(148, 6%, 96%, 0.03);
    }
    main.templates .tpl-popular-rank{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: hsla(148, 82%, 58%, 0.2);
    margin-bottom: 20px;
    line-height: 1;
    }
    main.templates .tpl-popular-item h3{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tpl-text-light);
    margin-bottom: 8px;
    }
    main.templates .tpl-popular-item p{
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: hsla(148, 6%, 96%, 0.45);
    line-height: 1.6;
    margin-bottom: 16px;
    }
    main.templates .tpl-popular-downloads{
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    color: var(--tpl-warm-accent);
    font-weight: 600;
    }
    main.templates .tpl-cta{
    background: var(--tpl-primary);
    padding: 100px 48px;
    text-align: center;
    }
    main.templates .tpl-cta-inner{
    max-width: 720px;
    margin: 0 auto;
    }
    main.templates .tpl-cta h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    }
    main.templates .tpl-cta p{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: hsla(0, 0%, 100%, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
    }
    main.templates .tpl-btn-dark{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 44px;
    background: var(--tpl-bg-dark);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    }
    main.templates .tpl-btn-dark:hover{
    background: hsl(148, 10%, 14%);
    transform: translateY(-1px); color: #ffffff;}
    main.templates .fennel{
    background: var(--tpl-bg-dark);
    border-top: 1px solid hsla(148, 6%, 96%, 0.06);
    padding: 64px 48px;
    }
    main.templates .quartz{
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 48px;
    }
    main.templates .prism{
    max-width: 320px;
    }
    main.templates .walnut{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--tpl-text-light);
    margin-bottom: 16px;
    }
    main.templates .prism p{
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: hsla(148, 6%, 96%, 0.4);
    line-height: 1.7;
    }
    main.templates .tpl-footer-links{
    display: flex;
    gap: 64px;
    }
    main.templates .nimbus h4{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: hsla(148, 6%, 96%, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
    }
    main.templates .nimbus a{
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: hsla(148, 6%, 96%, 0.45);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s;
    }
    main.templates .nimbus a:hover{
    color: var(--tpl-primary-light);
    }
    main.templates .cedar{
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 48px 0;
    border-top: 1px solid hsla(148, 6%, 96%, 0.06);
    margin-top: 0;
    }
    main.templates .tpl-footer-bottom-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    main.templates .tpl-copyright{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: hsla(148, 6%, 96%, 0.3);
    }
    main.templates .tpl-footer-legal{
    display: flex;
    gap: 24px;
    }
    main.templates .tpl-footer-legal a{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: hsla(148, 6%, 96%, 0.3);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.templates .tpl-footer-legal a:hover{
    color: hsla(148, 6%, 96%, 0.6);
    }
    @media (max-width: 1024px) {main.templates .crimson{
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 100px 32px 60px;
    }
    main.templates .basalt{
    grid-template-columns: repeat(2, 1fr);
    padding: 48px 32px;
    }
    main.templates .kelp{
    grid-template-columns: repeat(2, 1fr);
    }
    main.templates .aurora{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-showcase-layout{
    grid-template-columns: 1fr;
    gap: 48px;
    }
    main.templates .tpl-popular-list{
    grid-template-columns: repeat(2, 1fr);
    }
    main.templates .quartz{
    flex-direction: column;
    }}
    @media (max-width: 640px) {main.templates .crimson{
    padding: 80px 20px 48px;
    }
    main.templates .haze, main.templates .xylem, main.templates .tpl-showcase, main.templates .tpl-popular, main.templates .tpl-cta{
    padding: 64px 20px;
    }
    main.templates .basalt{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 20px;
    }
    main.templates .kelp{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-popular-list{
    grid-template-columns: 1fr;
    }
    main.templates .quarry{
    flex-direction: column;
    }
    main.templates .glacier, main.templates .falcon, main.templates .tpl-btn-dark{
    justify-content: center;
    width: 100%;
    }
    main.templates .fennel{
    padding: 48px 20px;
    }
    main.templates .tpl-footer-links{
    flex-direction: column;
    gap: 32px;
    }
    main.templates .cedar{
    padding: 24px 20px 0;
    }
    main.templates .tpl-footer-bottom-inner{
    flex-direction: column;
    gap: 16px;
    text-align: center;
    }}
    main.templates .fennel{
    background: hsl(148, 10%, 8%);
    padding: 80px 24px 40px;
    color: hsl(148, 6%, 68%);
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.templates .quartz{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.templates .cipher{
    display: flex;
    justify-content: space-between;
    gap: 64px;
    }
    main.templates .prism{
    flex: 0 0 280px;
    }
    main.templates .walnut{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 16px;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.templates .pebble{
    font-size: 14px;
    line-height: 1.7;
    color: hsl(148, 6%, 48%);
    margin: 0;
    }
    main.templates .alloy{
    display: flex;
    flex: 1 1 auto;
    gap: 56px;
    justify-content: flex-end;
    }
    main.templates .nimbus{
    flex: 0 0 auto;
    min-width: 120px;
    }
    main.templates .bastion{
    font-size: 13px;
    font-weight: 600;
    color: hsl(148, 6%, 56%);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .helix{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    main.templates .cobalt{
    margin-bottom: 12px;
    }
    main.templates .sapphire{
    font-size: 14px;
    color: hsl(148, 6%, 58%);
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: -apple-system, "Helvetica Neue", "PingFang SC", sans-serif;
    }
    main.templates .sapphire:hover{
    color: hsl(148, 72%, 52%);
    }
    main.templates .spruce{
    height: 1px;
    background: hsl(148, 6%, 18%);
    margin: 56px 0 32px; color: #ffffff;}
    main.templates .cedar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    }
    main.templates .timber{
    font-size: 13px;
    color: hsl(148, 6%, 40%);
    margin: 0;
    flex: 0 1 auto;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .phantom{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.templates .grotto{
    font-size: 13px;
    color: hsl(148, 6%, 46%);
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: -apple-system, "Helvetica Neue", "PingFang SC", sans-serif;
    }
    main.templates .grotto:hover{
    color: hsl(148, 72%, 52%);
    }
    main.templates .urchin{
    color: hsl(148, 6%, 28%);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 768px) {main.templates .fennel{
    padding: 56px 20px 32px;
    }
    main.templates .cipher{
    flex-direction: column;
    gap: 40px;
    }
    main.templates .prism{
    flex: 0 0 auto;
    }
    main.templates .alloy{
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    }
    main.templates .nimbus{
    flex: 0 0 calc(50% - 20px);
    min-width: 0;
    }
    main.templates .spruce{
    margin: 40px 0 24px;
    }
    main.templates .cedar{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap");
    main.changelog *, main.changelog *::before, main.changelog *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    main.changelog .etch{
    position: relative;
    padding: 120px 24px 80px;
    background: var(--cl-bg-dark);
    overflow: hidden;
    }
    main.changelog .etch::before{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(148, 82%, 58%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.changelog .etch::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(225, 66%, 58%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.changelog .fern{
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.changelog .quill{
    display: inline-block;
    font-family: var(--cl-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-primary-light);
    margin-bottom: 24px;
    }
    main.changelog .etch h1{
    font-family: var(--cl-serif);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    color: hsl(0, 0%, 100%);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    }
    main.changelog .wren{
    font-family: var(--cl-sans);
    font-size: 18px;
    line-height: 1.7;
    color: hsl(148, 6%, 60%);
    max-width: 640px;
    margin-bottom: 40px;
    }
    main.changelog .summit{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.changelog .inlet{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cl-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    background: var(--cl-primary);
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.changelog .inlet:hover{
    background: hsl(148, 82%, 36%);
    transform: translateY(-1px);
    }
    main.changelog .helm{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cl-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    background: transparent;
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    border: 2px solid hsl(148, 6%, 30%);
    transition: border-color 0.2s, color 0.2s;
    }
    main.changelog .helm:hover{
    border-color: var(--cl-primary-light);
    color: var(--cl-primary-light);
    }
    main.changelog .plume{
    display: flex;
    gap: 48px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid hsl(148, 6%, 16%);
    }
    main.changelog .cinder{
    font-family: var(--cl-serif);
    font-size: 36px;
    font-weight: 800;
    color: hsl(0, 0%, 100%);
    line-height: 1;
    }
    main.changelog .echo{
    font-family: var(--cl-sans);
    font-size: 13px;
    color: hsl(148, 6%, 50%);
    margin-top: 8px;
    }
    main.changelog .drift{
    padding: 100px 24px;
    background: var(--cl-bg);
    }
    main.changelog .vapor{
    max-width: 900px;
    margin: 0 auto;
    }
    main.changelog .mote{
    margin-bottom: 64px;
    }
    main.changelog .mote h2{
    font-family: var(--cl-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--cl-text);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    }
    main.changelog .mote p{
    font-family: var(--cl-sans);
    font-size: 16px;
    color: var(--cl-text-muted);
    line-height: 1.6;
    }
    main.changelog .pulse{
    display: flex;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    }
    main.changelog .nectar{
    font-family: var(--cl-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    background: var(--cl-surface);
    color: var(--cl-text-muted);
    border: 1px solid var(--cl-border);
    cursor: pointer;
    transition: all 0.2s;
    }
    main.changelog .nectar:hover{
    color: var(--cl-text);
    border-color: var(--cl-text);
    }
    main.changelog .nectar.shard{
    background: var(--cl-text);
    color: var(--cl-surface);
    border-color: var(--cl-text);
    }
    main.changelog .lumen{
    position: relative;
    padding-left: 40px;
    margin-bottom: 64px;
    }
    main.changelog .lumen::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: -64px;
    width: 2px;
    background: var(--cl-border);
    }
    main.changelog .lumen:last-child::before{
    bottom: 0;
    }
    main.changelog .lumen::after{
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: var(--cl-primary);
    border: 3px solid var(--cl-bg);
    }
    main.changelog .lumen.dune::after{
    width: 16px;
    height: 16px;
    left: -7px;
    top: 6px;
    box-shadow: 0 0 0 4px hsla(148, 82%, 42%, 0.2);
    }
    main.changelog .umbra{
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    }
    main.changelog .thorn{
    font-family: var(--cl-serif);
    font-size: 28px;
    font-weight: 800;
    color: var(--cl-text);
    letter-spacing: -0.01em;
    }
    main.changelog .orbit{
    font-family: var(--cl-sans);
    font-size: 14px;
    color: var(--cl-text-muted);
    font-weight: 500;
    }
    main.changelog .crux{
    display: inline-block;
    font-family: var(--cl-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    background: var(--cl-primary);
    color: hsl(0, 0%, 100%);
    }
    main.changelog .brine{
    font-family: var(--cl-sans);
    font-size: 15px;
    color: var(--cl-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    }
    main.changelog .mosaic{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.changelog .wisp{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--cl-sans);
    font-size: 15px;
    color: var(--cl-text);
    line-height: 1.6;
    padding: 16px 20px;
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    transition: border-color 0.2s;
    }
    main.changelog .wisp:hover{
    border-color: hsl(148, 8%, 76%);
    }
    main.changelog .ridgeline{
    display: inline-block;
    font-family: var(--cl-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    flex-shrink: 0;
    margin-top: 2px;
    }
    main.changelog .latch{
    background: hsla(148, 82%, 42%, 0.1);
    color: var(--cl-tag-new);
    }
    main.changelog .xeno{
    background: hsla(25, 90%, 52%, 0.1);
    color: var(--cl-tag-fix);
    }
    main.changelog .lattice{
    background: hsla(225, 66%, 58%, 0.1);
    color: var(--cl-tag-improve);
    }
    main.changelog .glyph{
    background: hsla(0, 72%, 52%, 0.1);
    color: #ffffff;
    }
    main.changelog .isle{
    padding: 80px 24px;
    background: var(--cl-surface);
    }
    main.changelog .vale{
    max-width: 900px;
    margin: 0 auto;
    }
    main.changelog .junco{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--cl-border);
    }
    main.changelog .nova{
    font-family: var(--cl-sans);
    font-size: 14px;
    color: var(--cl-text-muted);
    margin-top: 16px;
    text-align: center;
    }
    main.changelog .cl-cta-section{
    padding: 100px 24px;
    background: var(--cl-bg-dark);
    text-align: center;
    }
    main.changelog .cl-cta-inner{
    max-width: 600px;
    margin: 0 auto;
    }
    main.changelog .cl-cta-inner h2{
    font-family: var(--cl-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: hsl(0, 0%, 100%);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    }
    main.changelog .cl-cta-inner p{
    font-family: var(--cl-sans);
    font-size: 16px;
    color: hsl(148, 6%, 55%);
    line-height: 1.7;
    margin-bottom: 40px;
    }
    main.changelog .cl-cta-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.changelog .cl-footer{
    padding: 48px 24px;
    background: hsl(148, 10%, 4%);
    border-top: 1px solid hsl(148, 6%, 12%); color: #ffffff;}
    main.changelog .cl-footer-inner{
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.changelog .cl-footer-brand{
    font-family: var(--cl-serif);
    font-size: 18px;
    font-weight: 800;
    color: hsl(0, 0%, 100%);
    }
    main.changelog .cl-footer-copy{
    font-family: var(--cl-sans);
    font-size: 13px;
    color: hsl(148, 6%, 40%);
    }
    main.changelog .cl-footer-links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.changelog .cl-footer-links a{
    font-family: var(--cl-sans);
    font-size: 13px;
    color: hsl(148, 6%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.changelog .cl-footer-links a:hover{
    color: var(--cl-primary-light);
    }
    main.changelog .ivory{
    color: var(--cl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s;
    }
    main.changelog .ivory:hover{
    color: hsl(148, 82%, 36%);
    }
    @media (max-width: 768px) {main.changelog .etch{
    padding: 80px 20px 60px;
    }
    main.changelog .plume{
    gap: 32px;
    flex-wrap: wrap;
    }
    main.changelog .cinder{
    font-size: 28px;
    }
    main.changelog .lumen{
    padding-left: 28px;
    }
    main.changelog .umbra{
    flex-direction: column;
    gap: 8px;
    }
    main.changelog .wisp{
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    }
    main.changelog .cl-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.changelog .cl-footer-links{
    justify-content: center;
    }
    main.changelog .cl-cta-actions{
    flex-direction: column;
    align-items: center;
    }}
    main.changelog .opal{
    background: hsl(148, 10%, 8%);
    padding: 0;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.06); color: #ffffff;}
    main.changelog .husk{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 48px 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    }
    main.changelog .apex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 28px;
    }
    main.changelog .jolt{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.changelog .knoll{
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    }
    main.changelog .bloom{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.3px;
    }
    main.changelog .kite{
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    flex: 0 1 auto;
    }
    main.changelog .forge{
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 16px;
    transition: color 0.2s ease;
    white-space: nowrap;
    }
    main.changelog .forge:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.changelog .yarn{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.changelog .jade{
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.12);
    flex: 0 0 1px;
    }
    main.changelog .mirth{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 20px;
    }
    main.changelog .rune{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    flex: 1 1 auto;
    }
    main.changelog .grain{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: var(--primary-color, hsl(148, 72%, 42%));
    color: hsl(148, 10%, 8%);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 0 20px hsla(148, 72%, 42%, 0.25);
    flex: 0 0 auto;
    }
    main.changelog .grain:hover{
    background: hsl(148, 78%, 48%);
    box-shadow: 0 0 30px hsla(148, 72%, 42%, 0.4);
    transform: translateY(-1px);
    }
    @media (max-width: 680px) {main.changelog .husk{
    padding: 36px 20px 28px;
    gap: 28px;
    }
    main.changelog .apex{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }
    main.changelog .kite{
    gap: 0;
    }
    main.changelog .forge{
    padding: 6px 12px 6px 0;
    }
    main.changelog .jade{
    margin: 0 4px;
    }
    main.changelog .mirth{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    }
    main.changelog .grain{
    width: 100%;
    text-align: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Times New Roman", "Noto Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    }
    .fog_ray {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .crumble {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Georgia", "Times New Roman", serif;
    flex-shrink: 0;
    }
    .crumble:hover {
    color: var(--primary-color);
    }
    .vortex3 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    }
    .quilted {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .dawnLit {
    display: flex;
    align-items: center;
    gap: 6px;
    }
    .juniper {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    transition: var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    .juniper:hover {
    color: var(--text-color);
    }
    .kv9 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .kv9:hover {
    background: hsl(148, 72%, 36%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    }
    .kv9:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 900px) {.fog_ray {
    padding: 0 20px;
    }
    .vortex3 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .dawnLit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    }
    .juniper {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    }
    .kv9 {
    margin-top: 24px;
    height: 48px;
    font-size: 16px;
    text-align: center;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(2) {
    opacity: 0;
    }
    .vortex3[aria-expanded="true"] .quilted:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }}
    @media (max-width: 400px) {.fog_ray {
    padding: 0 16px;
    }}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap");
    main.faq .tundra{
    --faq-primary: hsl(148, 82%, 42%);
    --faq-primary-bright: hsl(148, 82%, 58%);
    --faq-secondary: hsl(225, 66%, 58%);
    --faq-dark: hsl(148, 20%, 8%);
    --faq-dark-surface: hsl(148, 12%, 12%);
    --faq-dark-card: hsl(148, 10%, 15%);
    --faq-dark-border: hsl(148, 8%, 22%);
    --faq-text-primary: hsl(148, 5%, 92%);
    --faq-text-secondary: hsl(148, 5%, 62%);
    --faq-text-muted: hsl(148, 5%, 45%);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-color);
    background-color: var(--primary-color);
    line-height: 1.6;
    }
    main.faq .tundra *, main.faq .tundra *::before, main.faq .tundra *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    main.faq .velvet{
    position: relative;
    padding: 100px 24px 80px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(170deg, var(--faq-dark) 0%, hsl(148, 15%, 11%) 50%, var(--faq-dark) 100%); color: #ffffff;}
    main.faq .velvet::before{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(148, 82%, 58%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.faq .velvet::after{
    content: "";
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(225, 66%, 58%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.faq .phantom{
    display: inline-block;
    padding: 6px 18px;
    background: hsla(148, 82%, 58%, 0.1);
    border: 1px solid hsla(148, 82%, 58%, 0.2);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 28px;
    }
    main.faq .velvet h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-color);
    max-width: 780px;
    margin: 0 auto 24px;
    letter-spacing: -0.02em;
    }
    main.faq .velvet h1 span{
    color: var(--text-color);
    }
    main.faq .grove{
    font-size: 17px;
    color: var(--text-color);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.7;
    }
    main.faq .falcon{
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    }
    main.faq .falcon input{
    width: 100%;
    padding: 16px 24px 16px 52px;
    background: var(--primary-color);
    border: 1px solid var(--faq-dark-border);
    color: var(--text-color);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    }
    main.faq .falcon input::placeholder{
    color: var(--text-color);
    }
    main.faq .falcon input:focus{
    border-color: var(--border-color);
    }
    main.faq .ivory{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-color);
    }
    main.faq .quartz{
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
    }
    main.faq .quartz h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-color);
    }
    main.faq .ember{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    }
    main.faq .onyx{
    background: var(--primary-color);
    border: 1px solid var(--faq-dark-border);
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.25s, transform 0.25s;
    cursor: pointer;
    }
    main.faq .onyx:hover{
    border-color: var(--border-color);
    transform: translateY(-3px);
    }
    main.faq .zenith{
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(148, 82%, 58%, 0.08);
    color: var(--text-color);
    }
    main.faq .zenith svg{
    width: 24px;
    height: 24px;
    }
    main.faq .onyx h3{
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
    }
    main.faq .onyx p{
    font-size: 13px;
    color: var(--text-color);
    }
    main.faq .dusk{
    padding: 0 24px 80px;
    max-width: 900px;
    margin: 0 auto;
    }
    main.faq .vortex{
    margin-bottom: 64px;
    }
    main.faq .vortex h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--faq-primary-bright);
    display: inline-block;
    }
    main.faq .vortex > p{
    color: var(--text-color);
    font-size: 14px;
    margin-bottom: 28px;
    margin-top: 8px;
    }
    main.faq .obsidian{
    border: 1px solid var(--faq-dark-border);
    background: var(--primary-color);
    margin-bottom: 8px;
    overflow: hidden;
    }
    main.faq .haze{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    transition: background 0.2s;
    gap: 16px;
    }
    main.faq .haze:hover{
    background: hsla(148, 82%, 58%, 0.03);
    }
    main.faq .haze h3{
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
    }
    main.faq .nimbus{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: transform 0.3s, color 0.3s;
    }
    main.faq .obsidian.jade .nimbus{
    transform: rotate(45deg);
    color: var(--text-color);
    }
    main.faq .sapphire{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    }
    main.faq .obsidian.jade .sapphire{
    max-height: 600px;
    }
    main.faq .pyre{
    padding: 0 24px 24px;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.8;
    }
    main.faq .pyre a{
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.faq .pyre a:hover{
    border-bottom-color: inherit;
    }
    main.faq .pyre ol, main.faq .pyre ul{
    padding-left: 20px;
    margin: 10px 0;
    }
    main.faq .pyre li{
    margin-bottom: 6px;
    }
    main.faq .pyre code{
    background: hsla(148, 82%, 58%, 0.08);
    padding: 2px 8px;
    font-size: 13px;
    color: var(--text-color);
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.faq .faq-visual-section{
    padding: 0 24px 80px;
    max-width: 900px;
    margin: 0 auto;
    }
    main.faq .faq-visual-card{
    position: relative;
    overflow: hidden;
    background: var(--primary-color);
    border: 1px solid var(--faq-dark-border);
    }
    main.faq .faq-visual-card img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    opacity: 0.6;
    }
    main.faq .faq-visual-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--faq-dark-card) 20%, transparent 80%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 36px;
    }
    main.faq .faq-visual-overlay h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    }
    main.faq .faq-visual-overlay p{
    font-size: 14px;
    color: var(--text-color);
    max-width: 500px;
    line-height: 1.7;
    }
    main.faq .faq-cta-section{
    padding: 80px 24px;
    text-align: center;
    background: linear-gradient(180deg, var(--faq-dark) 0%, hsl(148, 15%, 10%) 100%); color: #ffffff;}
    main.faq .faq-cta-section h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 14px;
    }
    main.faq .faq-cta-section p{
    font-size: 15px;
    color: var(--text-color);
    max-width: 500px;
    margin: 0 auto 36px;
    line-height: 1.7;
    }
    main.faq .faq-cta-buttons{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.faq .faq-btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--primary-color);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    }
    main.faq .faq-btn-primary:hover{
    background: hsl(148, 82%, 50%);
    transform: translateY(-1px);
    }
    main.faq .faq-btn-secondary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: transparent;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: 2px solid var(--faq-dark-border);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    }
    main.faq .faq-btn-secondary:hover{
    border-color: var(--border-color);
    background: hsla(148, 5%, 100%, 0.03);
    }
    main.faq .marble{
    padding: 48px 24px;
    border-top: 1px solid var(--faq-dark-border);
    max-width: 1100px;
    margin: 0 auto;
    }
    main.faq .flint{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.faq .crimson{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    }
    main.faq .aurora{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.faq .aurora a{
    font-size: 13px;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.faq .aurora a:hover{
    color: var(--text-color);
    }
    main.faq .faq-footer-copy{
    font-size: 13px;
    color: var(--text-color);
    width: 100%;
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--faq-dark-border);
    }
    @media (max-width: 768px) {main.faq .ember{
    grid-template-columns: repeat(2, 1fr);
    }
    main.faq .velvet{
    padding: 72px 20px 56px;
    }
    main.faq .haze{
    padding: 16px 18px;
    }
    main.faq .pyre{
    padding: 0 18px 20px;
    }
    main.faq .faq-visual-card img{
    height: 220px;
    }
    main.faq .faq-visual-overlay{
    padding: 24px 20px;
    }}
    @media (max-width: 480px) {main.faq .ember{
    grid-template-columns: 1fr;
    }
    main.faq .faq-cta-buttons{
    flex-direction: column;
    align-items: center;
    }
    main.faq .flint{
    flex-direction: column;
    text-align: center;
    }
    main.faq .aurora{
    justify-content: center;
    }}
    main.faq .marble{
    background: var(--text-color, hsl(148, 10%, 10%));
    padding: 0;
    margin-top: 80px;
    border-top: 3px solid var(--primary-color, hsl(148, 72%, 42%));
    }
    main.faq .flint{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 48px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    }
    main.faq .basalt{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    }
    main.faq .crimson{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.faq .oxide{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    }
    main.faq .glacier{
    font-size: 14px;
    color: hsl(148, 12%, 56%);
    margin: 0;
    letter-spacing: 0.01em;
    }
    main.faq .aurora{
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
    }
    main.faq .prism{
    color: hsl(0, 0%, 72%);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 16px;
    transition: var(--transition, all 0.2s ease);
    white-space: nowrap;
    }
    main.faq .prism:hover{
    color: var(--primary-color, hsl(148, 72%, 42%));
    }
    main.faq .cobalt{
    width: 1px;
    height: 14px;
    background: hsl(0, 0%, 28%);
    flex: 0 0 1px; color: #ffffff;}
    main.faq .kelp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid hsl(0, 0%, 18%);
    gap: 24px;
    }
    main.faq .nook{
    font-size: 13px;
    color: hsl(0, 0%, 44%);
    flex: 1 1 auto;
    }
    main.faq .cedar{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: var(--primary-color, hsl(148, 72%, 42%));
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm, 0px);
    transition: var(--transition, all 0.2s ease);
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: 0 2px 12px hsla(148, 72%, 42%, 0.35);
    }
    main.faq .cedar:hover{
    background: hsl(148, 72%, 36%);
    box-shadow: 0 4px 20px hsla(148, 72%, 42%, 0.5);
    transform: translateY(-1px);
    }
    @media (max-width: 680px) {main.faq .flint{
    padding: 36px 20px 24px;
    gap: 28px;
    }
    main.faq .basalt{
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    }
    main.faq .aurora{
    justify-content: flex-start;
    gap: 4px;
    }
    main.faq .prism{
    padding: 6px 12px 6px 0;
    }
    main.faq .cobalt{
    display: none;
    }
    main.faq .kelp{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }
    main.faq .cedar{
    width: 100%;
    text-align: center;
    }}

.cc-sec-area.active,
.cc-sec-area.cc-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}