:root {
  --primary-color: hsl(184, 65%, 42%);
  --secondary-color: hsl(336, 50%, 50%);
  --bg-color: hsl(184, 7%, 96%);
  --text-color: hsl(184, 10%, 10%);
  --text-muted: hsl(184, 6%, 44%);
  --border-color: rgba(0, 0, 0, 0.08);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --nav-height: 64px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
  --nav-bg: var(--bg-color);
  --btn-text: #ffffff;
  --rc-primary: hsl(184, 70%, 57%);
  --rc-primary-dark: hsl(184, 70%, 42%);
  --rc-accent: hsl(336, 56%, 57%);
  --rc-text: hsl(184, 10%, 10%);
  --rc-text-secondary: hsl(184, 8%, 40%);
  --rc-bg: hsl(184, 7%, 96%);
  --rc-bg-alt: hsl(184, 7%, 92%);
  --rc-surface: #ffffff;
  --rc-border: hsl(184, 7%, 88%);
  --rc-code-bg: hsl(184, 10%, 14%);
  --page-primary: hsl(184, 70%, 57%);
  --page-primary-dark: hsl(184, 70%, 42%);
  --page-secondary: hsl(336, 56%, 57%);
  --page-text: hsl(184, 10%, 10%);
  --page-bg: hsl(184, 7%, 96%);
  --page-surface: #ffffff;
  --page-border: hsl(184, 10%, 88%);
  --page-muted: hsl(184, 8%, 46%);
  --page-code-bg: hsl(184, 10%, 94%);
}

*,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.index *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.index .dapple{
    background: var(--rc-code-bg);
    color: #fff;
    padding: 100px 24px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.index .dapple::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, hsla(184, 70%, 57%, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, hsla(336, 56%, 57%, 0.06) 0%, transparent 60%);
    pointer-events: none;
    }
    main.index .fathom{
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.index .dapple h1{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 20px;
    }
    main.index .dapple h1 span{
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    color: hsla(184, 50%, 70%, 0.9);
    margin-top: 12px;
    line-height: 1.5;
    }
    main.index .nectarVine{
    font-size: 16px;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.6);
    max-width: 540px;
    margin: 0 auto 40px;
    }
    main.index .xenon{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.index .glintPop{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--rc-primary);
    color: var(--rc-code-bg);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
    }
    main.index .glintPop:hover{
    background: var(--rc-primary-dark);
    transform: translateY(-1px);
    }
    main.index .smelt{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: hsla(0, 0%, 100%, 0.8);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
    }
    main.index .smelt:hover{
    border-color: hsla(0, 0%, 100%, 0.4);
    color: #fff;
    }
    main.index .prismArc{
    display: inline-block;
    margin-top: 24px;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.35);
    }
    main.index .yarrow{
    padding: 80px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.index .umbra_glow{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.index .waspNest{
    font-size: 32px;
    font-weight: 700;
    color: var(--rc-text);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    }
    main.index .iridium{
    font-size: 15px;
    color: var(--rc-text-secondary);
    line-height: 1.6;
    margin-bottom: 48px;
    max-width: 560px;
    }
    main.index .iridium.mirth_fox{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }
    main.index .waspNest.mirth_fox{
    text-align: center;
    }
    main.index .velvet{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rc-border);
    border: 1px solid var(--rc-border);
    }
    main.index .lacquer{
    background: var(--rc-surface);
    padding: 40px 32px;
    }
    main.index .lumina{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--rc-primary-dark);
    }
    main.index .lumina svg{
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
    }
    main.index .lacquer h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--rc-text);
    margin-bottom: 10px;
    }
    main.index .lacquer p{
    font-size: 14px;
    line-height: 1.65;
    color: var(--rc-text-secondary);
    }
    main.index .aplomb{
    background: var(--rc-bg);
    }
    main.index .jotForm{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.index .brindle{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rc-border);
    }
    main.index .novella h2{
    font-size: 28px;
    font-weight: 700;
    color: var(--rc-text);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    }
    main.index .novella p{
    font-size: 15px;
    line-height: 1.7;
    color: var(--rc-text-secondary);
    margin-bottom: 16px;
    }
    main.index .novella a{
    color: var(--rc-primary-dark);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.index .novella a:hover{
    border-bottom-color: var(--rc-primary-dark);
    }
    main.index .pixDuo{
    background: var(--rc-surface);
    }
    main.index .ember_silk{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.index .kelpie{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rc-border);
    order: 2;
    }
    main.index .cragTop{
    order: 1;
    }
    main.index .cragTop h2{
    font-size: 28px;
    font-weight: 700;
    color: var(--rc-text);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    }
    main.index .cragTop p{
    font-size: 15px;
    line-height: 1.7;
    color: var(--rc-text-secondary);
    margin-bottom: 16px;
    }
    main.index .cragTop a{
    color: var(--rc-primary-dark);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.index .cragTop a:hover{
    border-bottom-color: var(--rc-primary-dark);
    }
    main.index .tundra7{
    background: var(--rc-code-bg);
    padding: 64px 24px;
    }
    main.index .halcyon{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
    }
    main.index .quasar h3{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--rc-primary);
    letter-spacing: -1px;
    margin-bottom: 6px;
    }
    main.index .quasar p{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    }
    main.index .riftZone{
    background: var(--rc-bg);
    }
    main.index .husk{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    }
    main.index .jamb3{
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    padding: 36px 28px;
    position: relative;
    }
    main.index .obsidian{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--rc-bg-alt);
    line-height: 1;
    margin-bottom: 16px;
    }
    main.index .jamb3 h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--rc-text);
    margin-bottom: 10px;
    }
    main.index .jamb3 p{
    font-size: 14px;
    line-height: 1.65;
    color: var(--rc-text-secondary);
    }
    main.index .sable{
    margin-top: 48px;
    text-align: center;
    }
    main.index .sable img{
    max-width: 680px;
    width: 100%;
    border: 1px solid var(--rc-border);
    }
    main.index .rune{
    background: var(--rc-surface);
    text-align: center;
    padding: 80px 24px;
    }
    main.index .rune h2{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--rc-text);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    }
    main.index .rune p{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--rc-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
    }
    main.index .rune .glintPop{
    padding: 16px 40px;
    font-size: 16px;
    }
    main.index .kindling{
    background: var(--rc-code-bg);
    padding: 48px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.index .effigy{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    }
    main.index .moxie5{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    }
    main.index .cask_oil{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.35);
    line-height: 1.6;
    }
    main.index .zinc4{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    }
    main.index .zinc4 a{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.index .zinc4 a:hover{
    color: var(--rc-primary);
    }
    @media (max-width: 768px) {main.index .dapple{
    padding: 72px 20px 60px;
    }
    main.index .dapple h1{
    font-size: 36px;
    }
    main.index .dapple h1 span{
    font-size: 17px;
    }
    main.index .velvet{
    grid-template-columns: 1fr;
    }
    main.index .jotForm, main.index .ember_silk{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.index .kelpie{
    order: 0;
    }
    main.index .cragTop{
    order: 0;
    }
    main.index .halcyon{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    }
    main.index .husk{
    grid-template-columns: 1fr;
    }
    main.index .yarrow{
    padding: 56px 20px;
    }
    main.index .effigy{
    flex-direction: column;
    gap: 20px;
    }}
    @media (max-width: 480px) {main.index .dapple h1{
    font-size: 28px;
    }
    main.index .xenon{
    flex-direction: column;
    align-items: center;
    }
    main.index .glintPop, main.index .smelt{
    width: 100%;
    justify-content: center;
    }
    main.index .halcyon{
    grid-template-columns: 1fr 1fr;
    }
    main.index .waspNest{
    font-size: 24px;
    }
    main.index .novella h2, main.index .cragTop h2{
    font-size: 22px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.download .elixir{
    position: relative;
    padding: 80px 24px 64px;
    text-align: center;
    background: linear-gradient(180deg, hsl(184, 12%, 12%) 0%, hsl(184, 10%, 18%) 100%);
    color: #fff;
    overflow: hidden;
    }
    main.download .elixir::before{
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(184, 70%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .elixir h1{
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    position: relative;
    }
    main.download .nibs{
    font-size: 1.1rem;
    color: hsla(184, 20%, 80%, 0.85);
    margin: 0 0 40px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.download .xeric{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    }
    main.download .upwelling{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 8%);
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.download .upwelling:hover{
    background: hsl(184, 70%, 50%);
    transform: translateY(-1px);
    }
    main.download .upwelling svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    }
    main.download .vivid_elm{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: hsla(184, 20%, 100%, 0.08);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    border: 1px solid hsla(184, 20%, 100%, 0.15);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.download .vivid_elm:hover{
    background: hsla(184, 20%, 100%, 0.14);
    }
    main.download .haiku5{
    margin-top: 24px;
    font-size: 0.82rem;
    color: hsla(184, 20%, 80%, 0.55);
    position: relative;
    }
    main.download .zinger{
    padding: 72px 24px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.download .parlance{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.download .parlance h2{
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 12px;
    }
    main.download .knack{
    text-align: center;
    color: hsl(184, 6%, 45%);
    margin: 0 0 48px;
    font-size: 0.95rem;
    }
    main.download .quahog{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.download .lozenge{
    background: #fff;
    border: 1px solid hsl(184, 8%, 90%);
    border-radius: 4px;
    padding: 36px 24px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.download .lozenge:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 16px hsla(184, 70%, 57%, 0.08);
    }
    main.download .gumption{
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(184, 70%, 57%, 0.08);
    border-radius: 4px;
    }
    main.download .gumption svg{
    width: 24px;
    height: 24px;
    color: hsl(184, 70%, 45%);
    }
    main.download .lozenge h3{
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 6px;
    }
    main.download .aq7blend{
    font-size: 0.8rem;
    color: hsl(184, 6%, 55%);
    margin: 0 0 8px;
    }
    main.download .inkblot{
    font-size: 0.78rem;
    color: hsl(184, 6%, 62%);
    margin: 0 0 24px;
    }
    main.download .whisk{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 0;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 8%);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.download .whisk:hover{
    background: hsl(184, 70%, 50%);
    }
    main.download .whisk svg{
    width: 16px;
    height: 16px;
    }
    main.download .frond{
    padding: 72px 24px;
    background: hsl(184, 8%, 93%);
    }
    main.download .vellum3{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    }
    main.download .xylem h2{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 24px;
    }
    main.download .deft_arc{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.download .deft_arc li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid hsl(184, 8%, 88%);
    font-size: 0.92rem;
    color: hsl(184, 6%, 30%);
    line-height: 1.5;
    }
    main.download .deft_arc li:last-child{
    border-bottom: none;
    }
    main.download .yoke{
    min-width: 100px;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    flex-shrink: 0;
    }
    main.download .jetsam h2{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 24px;
    }
    main.download .opaque{
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.download .wren_call{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid hsl(184, 8%, 90%);
    }
    main.download .trellis{
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(160, 60%, 45%, 0.1);
    border-radius: 4px;
    flex-shrink: 0;
    }
    main.download .trellis svg{
    width: 18px;
    height: 18px;
    color: hsl(160, 60%, 38%);
    }
    main.download .taffeta h3{
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 4px;
    }
    main.download .taffeta p{
    font-size: 0.84rem;
    color: hsl(184, 6%, 45%);
    margin: 0;
    line-height: 1.5;
    }
    main.download .dl-banner{
    position: relative;
    padding: 64px 24px;
    background: hsl(184, 12%, 12%);
    overflow: hidden; color: #ffffff;}
    main.download .dl-banner-inner{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    }
    main.download .dl-banner-text h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    }
    main.download .dl-banner-text p{
    font-size: 0.95rem;
    color: hsla(184, 20%, 80%, 0.75);
    margin: 0 0 24px;
    line-height: 1.6;
    }
    main.download .dl-banner-links{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.download .dl-banner-links a{
    color: hsl(184, 70%, 57%);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-banner-links a:hover{
    color: hsl(184, 70%, 65%);
    }
    main.download .dl-banner-img{
    border-radius: 4px;
    overflow: hidden;
    }
    main.download .dl-banner-img img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    }
    main.download .dl-versions{
    padding: 72px 24px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.download .dl-versions-inner{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.download .dl-versions-inner h2{
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 40px;
    }
    main.download .dl-ver-table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid hsl(184, 8%, 90%);
    border-radius: 4px;
    overflow: hidden;
    }
    main.download .dl-ver-table thead{
    background: hsl(184, 8%, 95%);
    }
    main.download .dl-ver-table th{
    padding: 14px 20px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 600;
    color: hsl(184, 6%, 40%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    main.download .dl-ver-table td{
    padding: 16px 20px;
    font-size: 0.9rem;
    color: hsl(184, 6%, 30%);
    border-top: 1px solid hsl(184, 8%, 93%);
    }
    main.download .dl-ver-table .dl-tag-latest{
    display: inline-block;
    padding: 2px 8px;
    background: hsla(184, 70%, 57%, 0.12);
    color: hsl(184, 70%, 40%);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 3px;
    margin-left: 8px;
    }
    main.download .dl-ver-table .dl-tbl-link{
    color: hsl(184, 70%, 45%);
    text-decoration: none;
    font-weight: 500;
    }
    main.download .dl-ver-table .dl-tbl-link:hover{
    color: hsl(184, 70%, 35%);
    }
    main.download .dl-faq{
    padding: 72px 24px;
    background: hsl(184, 8%, 93%);
    }
    main.download .dl-faq-inner{
    max-width: 720px;
    margin: 0 auto;
    }
    main.download .dl-faq-inner h2{
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 40px;
    }
    main.download .dl-faq-item{
    border-bottom: 1px solid hsl(184, 8%, 88%);
    padding: 20px 0;
    }
    main.download .dl-faq-item:first-of-type{
    border-top: 1px solid hsl(184, 8%, 88%);
    }
    main.download .dl-faq-q{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 10px;
    cursor: default;
    }
    main.download .dl-faq-a{
    font-size: 0.88rem;
    color: hsl(184, 6%, 40%);
    margin: 0;
    line-height: 1.65;
    }
    main.download .dl-faq-a a{
    color: hsl(184, 70%, 45%);
    text-decoration: none;
    }
    main.download .dl-faq-a a:hover{
    color: hsl(184, 70%, 35%);
    }
    main.download .dl-footer{
    padding: 40px 24px;
    background: hsl(184, 12%, 10%);
    text-align: center; color: #ffffff;}
    main.download .dl-footer-brand{
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(184, 70%, 57%);
    margin: 0 0 8px;
    }
    main.download .dl-footer-copy{
    font-size: 0.8rem;
    color: hsla(184, 10%, 60%, 0.6);
    margin: 0 0 16px;
    }
    main.download .dl-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    }
    main.download .dl-footer-links a{
    font-size: 0.8rem;
    color: hsla(184, 10%, 60%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-footer-links a:hover{
    color: hsla(184, 10%, 60%, 0.85);
    }
    @media (max-width: 900px) {main.download .quahog{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .vellum3{
    grid-template-columns: 1fr;
    }
    main.download .dl-banner-inner{
    grid-template-columns: 1fr;
    }
    main.download .dl-banner-img{
    order: -1;
    }}
    @media (max-width: 560px) {main.download .elixir{
    padding: 60px 20px 48px;
    }
    main.download .elixir h1{
    font-size: 1.8rem;
    }
    main.download .quahog{
    grid-template-columns: 1fr;
    }
    main.download .xeric{
    flex-direction: column;
    align-items: center;
    }
    main.download .upwelling, main.download .vivid_elm{
    width: 100%;
    justify-content: center;
    }
    main.download .dl-ver-table{
    font-size: 0.82rem;
    }
    main.download .dl-ver-table th, main.download .dl-ver-table td{
    padding: 12px 12px;
    }}
    main.download .ratchet9{
    background: hsl(184, 10%, 10%);
    padding: 48px 24px 32px;
    margin-top: 0; color: #ffffff;}
    main.download .ridgePole{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    }
    main.download .quill{
    flex: 1;
    }
    main.download .murkFin{
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    }
    main.download .coypu{
    margin: 8px 0 0;
    font-size: 14px;
    color: hsl(184, 8%, 52%);
    line-height: 1.5;
    }
    main.download .plinth{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.download .urchin{
    font-size: 14px;
    color: hsl(184, 8%, 62%);
    text-decoration: none;
    transition: color 0.2s ease;
    }
    main.download .urchin:hover{
    color: var(--primary-color, hsl(184, 65%, 42%));
    }
    main.download .squab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid hsl(184, 8%, 18%);
    }
    main.download .sluice{
    font-size: 13px;
    color: hsl(184, 6%, 44%);
    }
    main.download .bramble{
    display: flex;
    gap: 16px;
    }
    main.download .oxbow{
    color: hsl(184, 8%, 48%);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    }
    main.download .oxbow:hover{
    color: var(--primary-color, hsl(184, 65%, 42%));
    }
    @media (max-width: 640px) {main.download .ratchet9{
    padding: 36px 16px 24px;
    }
    main.download .ridgePole{
    gap: 24px;
    }
    main.download .plinth{
    flex-direction: column;
    gap: 14px;
    }
    main.download .squab{
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    }
    main.download .bramble{
    order: -1;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.features *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.features .opal_rim{
    padding: 96px 24px 72px;
    background: linear-gradient(175deg, hsl(184, 20%, 12%) 0%, hsl(200, 18%, 18%) 100%);
    color: #fff;
    text-align: center;
    }
    main.features .jarPeg{
    max-width: 800px;
    margin: 0 auto;
    }
    main.features .opal_rim h1{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    color: hsl(184, 15%, 75%);
    margin-bottom: 24px;
    }
    main.features .cob9{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: #fff;
    }
    main.features .cob9 span{
    color: var(--page-primary);
    }
    main.features .haze{
    font-size: 1.125rem;
    line-height: 1.7;
    color: hsl(184, 10%, 68%);
    max-width: 620px;
    margin: 0 auto 36px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .umber{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .lug{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--page-primary);
    color: hsl(184, 20%, 10%);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    }
    main.features .lug:hover{
    background: var(--page-primary-dark);
    transform: translateY(-1px);
    }
    main.features .latch5{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: hsl(184, 30%, 75%);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    border: 1px solid hsl(184, 15%, 30%);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    }
    main.features .latch5:hover{
    border-color: var(--page-primary);
    color: var(--page-primary);
    }
    main.features .rasp{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: hsl(184, 15%, 25%);
    max-width: 640px;
    margin: 56px auto 0; color: #ffffff;}
    main.features .yawl{
    background: hsl(184, 18%, 15%);
    padding: 24px 16px;
    text-align: center; color: #ffffff;}
    main.features .xyst{
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--page-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .quench{
    font-size: 0.8rem;
    color: hsl(184, 10%, 55%);
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .heft9{
    padding: 80px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .mortar{
    background: var(--page-surface);
    }
    main.features .kiln{
    background: hsl(184, 18%, 12%);
    color: #fff;
    }
    main.features .jib{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.features .vial{
    text-align: center;
    margin-bottom: 56px;
    }
    main.features .zeal{
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--page-primary);
    margin-bottom: 12px;
    }
    main.features .vial h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    }
    main.features .kiln .vial h2{
    color: #fff;
    }
    main.features .vial p{
    font-size: 1rem;
    color: var(--page-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
    }
    main.features .kiln .vial p{
    color: hsl(184, 10%, 60%);
    }
    main.features .grotto{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--page-border);
    border: 1px solid var(--page-border);
    }
    main.features .zenith3{
    background: var(--page-surface);
    padding: 40px 28px;
    }
    main.features .talon7{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(184, 30%, 94%);
    margin-bottom: 20px;
    }
    main.features .talon7 svg{
    width: 20px;
    height: 20px;
    stroke: var(--page-primary-dark);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    }
    main.features .zenith3 h3{
    font-size: 1rem;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    margin-bottom: 10px;
    }
    main.features .zenith3 p{
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--page-muted);
    }
    main.features .woad{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.features .bevel_cut{
    direction: rtl;
    }
    main.features .bevel_cut > *{
    direction: ltr;
    }
    main.features .scrim{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 1px solid var(--page-border);
    }
    main.features .pivot h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    }
    main.features .pivot p{
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--page-muted);
    margin-bottom: 24px;
    }
    main.features .kettle{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    }
    main.features .kettle li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--page-text, #1a1a1a);
    line-height: 1.5;
    }
    main.features .kettle li::before{
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: hsl(184, 30%, 94%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2330b5b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    }
    main.features .floe{
    color: var(--page-primary-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s;
    }
    main.features .floe:hover{
    color: var(--page-primary);
    }
    main.features .feat-compare{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    }
    main.features .feat-compare thead{
    background: hsl(184, 18%, 15%); color: #ffffff;}
    main.features .feat-compare th{
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid var(--page-primary);
    }
    main.features .feat-compare th:not(:first-child){
    text-align: center;
    }
    main.features .feat-compare td{
    padding: 14px 20px;
    border-bottom: 1px solid hsl(184, 15%, 22%);
    color: hsl(184, 10%, 70%);
    }
    main.features .feat-compare td:not(:first-child){
    text-align: center;
    }
    main.features .feat-compare tbody tr:hover{
    background: hsl(184, 15%, 14%); color: #ffffff;}
    main.features .feat-compare .check-yes{
    color: var(--page-primary);
    font-weight: 700;
    font-size: 1.1rem;
    }
    main.features .feat-compare .check-no{
    color: hsl(184, 10%, 35%);
    }
    main.features .impel{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    }
    main.features .inlay{
    text-align: center;
    padding: 32px 16px;
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    position: relative;
    }
    main.features .cleat{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--page-primary);
    color: hsl(184, 20%, 10%);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 16px;
    }
    main.features .inlay h3{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    margin-bottom: 8px;
    }
    main.features .inlay p{
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--page-muted);
    }
    main.features .feat-cta-section{
    padding: 80px 24px;
    background: linear-gradient(175deg, hsl(184, 20%, 12%) 0%, hsl(200, 18%, 16%) 100%);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #ffffff;}
    main.features .feat-cta-section h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    }
    main.features .feat-cta-section p{
    font-size: 1rem;
    color: hsl(184, 10%, 60%);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.features .feat-cta-section .lug{
    padding: 16px 40px;
    font-size: 1rem;
    }
    main.features .feat-footer{
    padding: 40px 24px;
    background: hsl(184, 18%, 8%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #ffffff;}
    main.features .feat-footer-inner{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.features .feat-footer-brand{
    font-size: 1rem;
    font-weight: 700;
    color: hsl(184, 10%, 50%);
    letter-spacing: -0.01em;
    }
    main.features .feat-footer-copy{
    font-size: 0.8rem;
    color: hsl(184, 8%, 38%);
    }
    main.features .feat-footer-links{
    display: flex;
    gap: 24px;
    }
    main.features .feat-footer-links a{
    font-size: 0.8rem;
    color: hsl(184, 8%, 45%);
    text-decoration: none;
    transition: color 0.15s;
    }
    main.features .feat-footer-links a:hover{
    color: var(--page-primary);
    }
    @media (max-width: 768px) {main.features .opal_rim{
    padding: 72px 20px 56px;
    }
    main.features .rasp{
    grid-template-columns: repeat(3, 1fr);
    }
    main.features .grotto{
    grid-template-columns: 1fr;
    }
    main.features .woad{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.features .bevel_cut{
    direction: ltr;
    }
    main.features .impel{
    grid-template-columns: 1fr 1fr;
    }
    main.features .feat-compare{
    font-size: 0.8rem;
    }
    main.features .feat-compare th, main.features .feat-compare td{
    padding: 10px 12px;
    }
    main.features .feat-footer-inner{
    flex-direction: column;
    text-align: center;
    }}
    @media (max-width: 480px) {main.features .impel{
    grid-template-columns: 1fr;
    }
    main.features .rasp{
    grid-template-columns: 1fr;
    }
    main.features .umber{
    flex-direction: column;
    align-items: center;
    }}
    main.features .gnarl{
    background: hsl(184, 10%, 12%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 40px 24px; color: #ffffff;}
    main.features .eddy{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.features .duskMote{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    }
    main.features .yurt{
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    }
    main.features .nudge{
    font-size: 13px;
    color: hsl(184, 6%, 52%);
    line-height: 1.4;
    }
    main.features .dross{
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 0 auto;
    }
    main.features .fen_ash{
    font-size: 13px;
    color: hsl(184, 6%, 52%);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.4;
    }
    main.features .fen_ash:hover{
    color: var(--primary-color, hsl(184, 65%, 42%));
    }
    @media (max-width: 640px) {main.features .eddy{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    }
    main.features .duskMote{
    flex-direction: column;
    gap: 8px;
    flex: 1 1 100%;
    }
    main.features .dross{
    gap: 20px;
    flex: 1 1 100%;
    justify-content: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.guide .shard{
    padding: 80px 24px 60px;
    background: linear-gradient(170deg, hsl(184, 12%, 12%) 0%, hsl(184, 15%, 18%) 100%);
    color: #fff;
    text-align: center;
    }
    main.guide .pyre{
    max-width: 720px;
    margin: 0 auto;
    }
    main.guide .ember{
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: hsl(184, 70%, 57%);
    border: 1px solid hsl(184, 70%, 57%, 0.3);
    padding: 4px 14px;
    margin-bottom: 24px;
    font-weight: 600;
    }
    main.guide .shard h1{
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
    color: #fff;
    }
    main.guide .shard h1 span{
    color: hsl(184, 70%, 57%);
    }
    main.guide .opal{
    font-size: 16px;
    line-height: 1.7;
    color: hsl(184, 10%, 70%);
    margin: 0 0 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    }
    main.guide .quirk{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.guide .pike{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 12%, 8%);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.guide .pike:hover{
    background: hsl(184, 70%, 50%);
    transform: translateY(-1px);
    }
    main.guide .raven{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: hsl(184, 10%, 80%);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid hsl(184, 10%, 30%);
    transition: border-color 0.2s, color 0.2s;
    }
    main.guide .raven:hover{
    border-color: hsl(184, 70%, 57%);
    color: #fff;
    }
    main.guide .drift{
    padding: 56px 24px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.guide .tuft5{
    max-width: 800px;
    margin: 0 auto;
    }
    main.guide .drift h2{
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 28px;
    letter-spacing: -0.3px;
    }
    main.guide .vortex{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    }
    main.guide .nebula{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid hsl(184, 10%, 90%);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.guide .nebula:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 12px hsl(184, 70%, 57%, 0.08);
    }
    main.guide .quartz{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(184, 70%, 57%, 0.1);
    color: hsl(184, 70%, 42%);
    font-size: 13px;
    font-weight: 700;
    }
    main.guide .zinc{
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, hsl(184, 10%, 10%));
    line-height: 1.4;
    }
    main.guide .rusk{
    padding: 0 24px 64px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.guide .nib{
    max-width: 800px;
    margin: 0 auto;
    }
    main.guide .wren{
    padding: 48px 0;
    border-top: 1px solid hsl(184, 10%, 88%);
    }
    main.guide .wren:first-child{
    border-top: none;
    }
    main.guide .glyph{
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    }
    main.guide .basalt{
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: hsl(184, 70%, 42%);
    padding: 3px 10px;
    background: hsl(184, 70%, 57%, 0.1);
    }
    main.guide .wren h2{
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0;
    letter-spacing: -0.3px;
    }
    main.guide .wren h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 15%));
    margin: 28px 0 12px;
    }
    main.guide .oxlip{
    font-size: 15px;
    line-height: 1.75;
    color: hsl(184, 8%, 35%);
    margin: 0 0 16px;
    }
    main.guide .falcon{
    margin: 24px 0;
    border: 1px solid hsl(184, 10%, 88%);
    overflow: hidden;
    background: #fff;
    }
    main.guide .falcon img{
    display: block;
    width: 100%;
    height: auto;
    }
    main.guide .forge{
    padding: 10px 16px;
    font-size: 12px;
    color: hsl(184, 8%, 50%);
    background: hsl(184, 5%, 97%);
    border-top: 1px solid hsl(184, 10%, 90%);
    }
    main.guide .cedar{
    list-style: none;
    padding: 0;
    margin: 16px 0;
    }
    main.guide .cedar li{
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 15px;
    line-height: 1.65;
    color: hsl(184, 8%, 30%);
    }
    main.guide .cedar li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 2px;
    background: hsl(184, 70%, 57%);
    }
    main.guide .etch{
    padding: 16px 20px;
    background: hsl(184, 70%, 57%, 0.06);
    border-left: 3px solid hsl(184, 70%, 57%);
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    color: hsl(184, 10%, 25%);
    }
    main.guide .etch strong{
    color: hsl(184, 70%, 35%);
    }
    main.guide .cirrus{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 16px 0;
    }
    main.guide .apex{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: hsl(184, 8%, 30%);
    }
    main.guide .apex::before{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    }
    main.guide .apex.phantom::before{
    background: #22c55e;
    }
    main.guide .apex.swale::before{
    background: #f59e0b;
    }
    main.guide .apex.dune::before{
    background: #ef4444;
    }
    main.guide .flint{
    padding: 64px 24px;
    background: linear-gradient(170deg, hsl(184, 12%, 12%) 0%, hsl(184, 15%, 18%) 100%);
    text-align: center; color: #ffffff;}
    main.guide .crest{
    max-width: 560px;
    margin: 0 auto;
    }
    main.guide .crest h2{
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.3px;
    }
    main.guide .crest p{
    font-size: 15px;
    line-height: 1.7;
    color: hsl(184, 10%, 65%);
    margin: 0 0 28px;
    }
    main.guide .alder{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.guide .vale{
    padding: 56px 24px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.guide .cobalt{
    max-width: 800px;
    margin: 0 auto;
    }
    main.guide .cobalt h2{
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 24px;
    }
    main.guide .surge{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    }
    main.guide .glacier{
    padding: 20px;
    background: #fff;
    border: 1px solid hsl(184, 10%, 88%);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.guide .glacier:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 12px hsl(184, 70%, 57%, 0.08);
    }
    main.guide .mote_spin{
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin-bottom: 6px;
    }
    main.guide .haze{
    font-size: 13px;
    line-height: 1.6;
    color: hsl(184, 8%, 50%);
    }
    main.guide .dusk{
    padding: 32px 24px;
    background: hsl(184, 12%, 10%);
    text-align: center; color: #ffffff;}
    main.guide .husk{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    }
    main.guide .bolt{
    font-size: 16px;
    font-weight: 700;
    color: hsl(184, 70%, 57%);
    letter-spacing: -0.3px;
    }
    main.guide .loom{
    font-size: 13px;
    color: hsl(184, 8%, 45%);
    }
    main.guide .prism{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.guide .prism a{
    font-size: 13px;
    color: hsl(184, 8%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.guide .prism a:hover{
    color: hsl(184, 70%, 57%);
    }
    @media (max-width: 600px) {main.guide .shard{
    padding: 56px 20px 44px;
    }
    main.guide .drift, main.guide .rusk, main.guide .vale{
    padding-left: 16px;
    padding-right: 16px;
    }
    main.guide .glyph{
    flex-direction: column;
    gap: 8px;
    }
    main.guide .cirrus{
    flex-direction: column;
    gap: 10px;
    }
    main.guide .flint{
    padding: 48px 20px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.system-requirements .ridge{
    position: relative;
    padding: 80px 24px 64px;
    background: hsl(184, 10%, 8%);
    overflow: hidden; color: #ffffff;}
    main.system-requirements .ridge::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(184, 70%, 57%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.system-requirements .vivid{
    max-width: 800px;
    margin: 0 auto;
    }
    main.system-requirements .ridge h1{
    font-size: 2rem;
    font-weight: 700;
    color: hsl(184, 5%, 95%);
    line-height: 1.35;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    }
    main.system-requirements .ridge h1 span{
    color: hsl(184, 70%, 57%);
    }
    main.system-requirements .jade{
    font-size: 1.05rem;
    color: hsl(184, 5%, 60%);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 640px;
    }
    main.system-requirements .delta{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: hsl(184, 5%, 50%);
    }
    main.system-requirements .alloy{
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.system-requirements .alloy svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    }
    main.system-requirements .nimbus{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.system-requirements .jewel{
    padding: 64px 0;
    }
    main.system-requirements .jewel + .jewel{
    border-top: 1px solid hsl(184, 7%, 90%);
    }
    main.system-requirements .notch{
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .pulse{
    font-size: 0.95rem;
    color: hsl(184, 5%, 45%);
    margin: 0 0 36px;
    line-height: 1.6;
    }
    main.system-requirements .orbit{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    }
    main.system-requirements .vapor{
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(184, 7%, 90%);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.15s ease;
    }
    main.system-requirements .vapor:hover{
    border-color: hsl(184, 70%, 57%);
    }
    main.system-requirements .inlet{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(184, 30%, 95%);
    color: hsl(184, 70%, 40%);
    }
    main.system-requirements .inlet svg{
    width: 20px;
    height: 20px;
    }
    main.system-requirements .clamp{
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(184, 5%, 45%);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
    }
    main.system-requirements .karma{
    font-size: 0.95rem;
    color: var(--text-color, hsl(184, 10%, 10%));
    line-height: 1.55;
    margin: 0;
    }
    main.system-requirements .whirl{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    }
    main.system-requirements .thorn{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 560px;
    }
    main.system-requirements .thorn thead{
    background: hsl(184, 10%, 8%); color: #ffffff;}
    main.system-requirements .thorn th{
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    color: hsl(184, 5%, 90%);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    }
    main.system-requirements .thorn tbody tr{
    border-bottom: 1px solid hsl(184, 7%, 91%);
    transition: background 0.1s ease;
    }
    main.system-requirements .thorn tbody tr:hover{
    background: hsl(184, 15%, 97%);
    }
    main.system-requirements .thorn td{
    padding: 14px 20px;
    color: var(--text-color, hsl(184, 10%, 10%));
    line-height: 1.5;
    }
    main.system-requirements .thorn .unity{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    }
    main.system-requirements .oxide{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    }
    main.system-requirements .frost{
    background: hsl(152, 60%, 42%);
    }
    main.system-requirements .realm{
    background: hsl(40, 80%, 52%);
    }
    main.system-requirements .axiom{
    background: hsl(0, 55%, 55%);
    }
    main.system-requirements .yarn{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    }
    main.system-requirements .plume{
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(184, 7%, 90%);
    padding: 20px 16px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    letter-spacing: 0.02em;
    transition: border-color 0.15s ease, background 0.15s ease;
    }
    main.system-requirements .plume:hover{
    border-color: hsl(184, 70%, 57%);
    background: hsl(184, 30%, 97%);
    }
    main.system-requirements .umber{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    }
    main.system-requirements .moss{
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(184, 7%, 90%);
    padding: 24px;
    transition: border-color 0.15s ease;
    }
    main.system-requirements .moss:hover{
    border-color: hsl(184, 70%, 57%);
    }
    main.system-requirements .moss h3{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 8px;
    }
    main.system-requirements .moss p{
    font-size: 0.85rem;
    color: hsl(184, 5%, 45%);
    line-height: 1.6;
    margin: 0;
    }
    main.system-requirements .knoll{
    padding: 64px 0;
    background: hsl(184, 10%, 8%); color: #ffffff;}
    main.system-requirements .latch{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.system-requirements .weld h2{
    font-size: 1.35rem;
    font-weight: 700;
    color: hsl(184, 5%, 95%);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .weld p{
    font-size: 0.95rem;
    color: hsl(184, 5%, 60%);
    line-height: 1.7;
    margin: 0 0 28px;
    }
    main.system-requirements .weld a.mirth{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 8%);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
    }
    main.system-requirements .weld a.mirth:hover{
    background: hsl(184, 70%, 50%);
    }
    main.system-requirements .weld a.mirth svg{
    width: 16px;
    height: 16px;
    }
    main.system-requirements .torch{
    position: relative;
    }
    main.system-requirements .torch img{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid hsla(184, 70%, 57%, 0.15);
    }
    main.system-requirements .grain{
    padding: 64px 0;
    }
    main.system-requirements .lunar{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.system-requirements .quill{
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 24px;
    }
    main.system-requirements .epoch{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .epoch li{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: hsl(184, 5%, 35%);
    line-height: 1.6;
    }
    main.system-requirements .epoch li::before{
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: hsl(184, 70%, 57%);
    margin-top: 8px;
    }
    main.system-requirements .epoch a{
    color: hsl(184, 70%, 40%);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
    }
    main.system-requirements .epoch a:hover{
    border-color: hsl(184, 70%, 40%);
    }
    main.system-requirements .sigma{
    padding: 48px 0;
    background: hsl(184, 7%, 93%);
    }
    main.system-requirements .birch{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.system-requirements .sigma p{
    font-size: 0.95rem;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0;
    font-weight: 500;
    }
    main.system-requirements .slate{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    }
    main.system-requirements .slate a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    }
    main.system-requirements .slate a.helix{
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 8%);
    }
    main.system-requirements .slate a.helix:hover{
    background: hsl(184, 70%, 50%);
    }
    main.system-requirements .slate a.bloom{
    background: transparent;
    color: var(--text-color, hsl(184, 10%, 10%));
    border: 1.5px solid hsl(184, 7%, 80%);
    }
    main.system-requirements .slate a.bloom:hover{
    border-color: hsl(184, 70%, 57%);
    color: hsl(184, 70%, 40%);
    }
    main.system-requirements .xenon{
    padding: 40px 24px;
    background: hsl(184, 10%, 8%);
    text-align: center; color: #ffffff;}
    main.system-requirements .ivory{
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(184, 70%, 57%);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .sr-footer-tagline{
    font-size: 0.8rem;
    color: hsl(184, 5%, 45%);
    margin: 0 0 20px;
    }
    main.system-requirements .sr-footer-links{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    }
    main.system-requirements .sr-footer-links a{
    font-size: 0.8rem;
    color: hsl(184, 5%, 55%);
    text-decoration: none;
    transition: color 0.15s ease;
    }
    main.system-requirements .sr-footer-links a:hover{
    color: hsl(184, 70%, 57%);
    }
    main.system-requirements .sr-footer-copy{
    font-size: 0.75rem;
    color: hsl(184, 5%, 35%);
    margin: 0;
    }
    @media (max-width: 768px) {main.system-requirements .ridge{
    padding: 56px 20px 48px;
    }
    main.system-requirements .ridge h1{
    font-size: 1.55rem;
    }
    main.system-requirements .jewel{
    padding: 48px 0;
    }
    main.system-requirements .orbit{
    grid-template-columns: 1fr;
    }
    main.system-requirements .latch{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.system-requirements .torch{
    order: -1;
    }
    main.system-requirements .birch{
    flex-direction: column;
    text-align: center;
    }
    main.system-requirements .umber{
    grid-template-columns: 1fr;
    }
    main.system-requirements .yarn{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }}
    @media (max-width: 480px) {main.system-requirements .ridge h1{
    font-size: 1.3rem;
    }
    main.system-requirements .delta{
    flex-direction: column;
    gap: 10px;
    }
    main.system-requirements .notch{
    font-size: 1.15rem;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.tips .coral{
    padding: 80px 24px 64px;
    text-align: center;
    background: linear-gradient(180deg, hsl(184, 12%, 12%) 0%, hsl(184, 10%, 18%) 100%);
    color: #fff;
    }
    main.tips .coral h1{
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 auto 16px;
    max-width: 720px;
    color: #fff;
    }
    main.tips .coral h1 span{
    color: hsl(184, 70%, 57%);
    }
    main.tips .crimson{
    font-size: 1.05rem;
    line-height: 1.7;
    color: hsl(184, 10%, 68%);
    max-width: 600px;
    margin: 0 auto 32px;
    }
    main.tips .nimbus{
    display: inline-block;
    padding: 12px 32px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 12%, 8%);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.tips .nimbus:hover{
    background: hsl(184, 70%, 48%);
    transform: translateY(-1px);
    }
    main.tips .fable{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.tips .cobalt{
    padding: 72px 0;
    border-bottom: 1px solid hsl(184, 7%, 90%);
    }
    main.tips .cobalt:last-of-type{
    border-bottom: none;
    }
    main.tips .cobalt h2{
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 12px;
    }
    main.tips .cobalt h2 .grove{
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 12%, 8%);
    margin-right: 12px;
    vertical-align: middle;
    }
    main.tips .obsidian{
    font-size: 1rem;
    line-height: 1.75;
    color: hsl(184, 8%, 40%);
    margin: 0 0 32px;
    max-width: 720px;
    }
    main.tips .dusk{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    }
    main.tips .zenith{
    background: #fff;
    border: 1px solid hsl(184, 7%, 90%);
    padding: 28px 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.tips .zenith:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 12px hsla(184, 70%, 57%, 0.08);
    }
    main.tips .zenith h3{
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 10px;
    }
    main.tips .zenith p{
    font-size: 0.9rem;
    line-height: 1.7;
    color: hsl(184, 8%, 40%);
    margin: 0;
    }
    main.tips .quartz{
    overflow-x: auto;
    }
    main.tips .phantom{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    }
    main.tips .phantom th{
    text-align: left;
    padding: 14px 16px;
    background: hsl(184, 10%, 96%);
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    border-bottom: 2px solid hsl(184, 7%, 88%);
    }
    main.tips .phantom td{
    padding: 14px 16px;
    border-bottom: 1px solid hsl(184, 7%, 92%);
    color: hsl(184, 8%, 30%);
    line-height: 1.6;
    }
    main.tips .onyx{
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 8px;
    }
    main.tips .elbow{ background: hsl(140, 60%, 45%); }
    main.tips .basalt{ background: hsl(30, 80%, 55%); }
    main.tips .velvet{ background: hsl(0, 65%, 50%); color: #ffffff;}
    main.tips .depot{
    margin: 40px 0 0;
    }
    main.tips .depot img{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid hsl(184, 7%, 90%);
    }
    main.tips .flint{
    font-size: 0.8rem;
    color: hsl(184, 8%, 55%);
    margin-top: 8px;
    }
    main.tips .cedar{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    }
    main.tips .cedar li{
    font-size: 0.92rem;
    line-height: 1.6;
    color: hsl(184, 8%, 30%);
    padding: 16px 20px;
    background: #fff;
    border: 1px solid hsl(184, 7%, 90%);
    position: relative;
    padding-left: 44px;
    }
    main.tips .cedar li::before{
    content: "✓";
    position: absolute;
    left: 18px;
    top: 16px;
    color: hsl(184, 70%, 45%);
    font-weight: 700;
    font-size: 0.95rem;
    }
    main.tips .falcon{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    }
    main.tips .vortex h3{
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 10px;
    }
    main.tips .vortex p{
    font-size: 0.9rem;
    line-height: 1.7;
    color: hsl(184, 8%, 40%);
    margin: 0 0 20px;
    }
    main.tips .ember img{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid hsl(184, 7%, 90%);
    }
    main.tips .sapphire{
    padding: 64px 24px;
    text-align: center;
    background: hsl(184, 10%, 96%);
    }
    main.tips .sapphire p{
    font-size: 1.1rem;
    color: hsl(184, 8%, 30%);
    margin: 0 0 24px;
    line-height: 1.6;
    }
    main.tips .sapphire a{
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, hsl(184, 70%, 50%), hsl(184, 70%, 42%));
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
    }
    main.tips .sapphire a:hover{
    opacity: 0.9;
    transform: translateY(-1px);
    }
    main.tips .prism{
    color: hsl(184, 70%, 40%);
    text-decoration: underline;
    text-underline-offset: 3px;
    }
    main.tips .prism:hover{
    color: hsl(184, 70%, 30%);
    }
    main.tips .glacier{
    padding: 40px 24px;
    text-align: center;
    border-top: 1px solid hsl(184, 7%, 90%);
    background: hsl(184, 12%, 12%); color: #ffffff;}
    main.tips .marble{
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(184, 70%, 57%);
    margin: 0 0 6px;
    }
    main.tips .tundra{
    font-size: 0.82rem;
    color: hsl(184, 10%, 50%);
    margin: 0 0 12px;
    }
    main.tips .aurora{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    }
    main.tips .aurora a{
    font-size: 0.82rem;
    color: hsl(184, 10%, 55%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.tips .aurora a:hover{
    color: hsl(184, 70%, 57%);
    }
    @media (max-width: 700px) {main.tips .coral{ padding: 56px 20px 48px; }
    main.tips .coral h1{ font-size: 1.6rem; }
    main.tips .dusk{ grid-template-columns: 1fr; }
    main.tips .cedar{ grid-template-columns: 1fr; }
    main.tips .falcon{ grid-template-columns: 1fr; }
    main.tips .cobalt{ padding: 48px 0; }
    main.tips .fable{ padding: 0 16px; }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.changelog .epoch{
    padding: 80px 24px 60px;
    text-align: center;
    background: linear-gradient(180deg, hsl(184, 15%, 8%) 0%, hsl(184, 12%, 14%) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    }
    main.changelog .epoch::before{
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(184, 70%, 57%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.changelog .epoch h1{
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
    color: #fff;
    position: relative;
    }
    main.changelog .epoch h1 span{
    color: hsl(184, 70%, 57%);
    }
    main.changelog .axiom{
    font-size: 1.05rem;
    line-height: 1.7;
    color: hsl(184, 10%, 65%);
    max-width: 640px;
    margin: 0 auto 28px;
    position: relative;
    }
    main.changelog .jade{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    }
    main.changelog .pulse{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 6%);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    }
    main.changelog .pulse:hover{
    background: hsl(184, 70%, 50%);
    transform: translateY(-1px);
    }
    main.changelog .helix{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: hsl(184, 70%, 57%);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid hsl(184, 70%, 57%, 0.35);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    }
    main.changelog .helix:hover{
    border-color: hsl(184, 70%, 57%);
    background: hsla(184, 70%, 57%, 0.06);
    }
    main.changelog .orbit{
    max-width: 820px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    }
    main.changelog .opal{
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid hsl(184, 10%, 88%);
    }
    main.changelog .nexus{
    margin-bottom: 48px;
    position: relative;
    }
    main.changelog .wren{
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    }
    main.changelog .shard{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    font-variant-numeric: tabular-nums;
    }
    main.changelog .ridgeline{
    font-size: 0.85rem;
    color: hsl(184, 10%, 50%);
    font-variant-numeric: tabular-nums;
    }
    main.changelog .haze{
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 10%, 6%);
    }
    main.changelog .jovial{
    background: hsl(184, 15%, 88%);
    color: hsl(184, 10%, 35%);
    }
    main.changelog .lattice{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.changelog .lattice li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid hsl(184, 10%, 93%);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-color, hsl(184, 10%, 10%));
    }
    main.changelog .lattice li:last-child{
    border-bottom: none;
    }
    main.changelog .summit{
    flex-shrink: 0;
    display: inline-block;
    width: 52px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    }
    main.changelog .plume{
    background: hsl(160, 55%, 92%);
    color: hsl(160, 60%, 30%);
    }
    main.changelog .ivory{
    background: hsl(336, 45%, 92%);
    color: hsl(336, 56%, 40%);
    }
    main.changelog .lumen{
    background: hsl(220, 50%, 92%);
    color: hsl(220, 55%, 38%);
    }
    main.changelog .nectar{
    background: hsl(270, 40%, 92%);
    color: hsl(270, 45%, 40%);
    }
    main.changelog .crest{
    height: 1px;
    background: hsl(184, 10%, 90%);
    border: none;
    margin: 0 0 48px;
    }
    main.changelog .inlet{
    margin: 0 auto 60px;
    max-width: 820px;
    padding: 0 24px;
    }
    main.changelog .umbra{
    position: relative;
    overflow: hidden;
    background: hsl(184, 15%, 8%); color: #ffffff;}
    main.changelog .mosaic{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    opacity: 0.35;
    }
    main.changelog .quiver{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    }
    main.changelog .quiver h2{
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    }
    main.changelog .quiver p{
    font-size: 0.9rem;
    color: hsl(184, 10%, 70%);
    margin: 0 0 20px;
    }
    main.changelog .glyph{
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px 60px;
    }
    main.changelog .rune{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    }
    main.changelog .bloom{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    border: 1px solid hsl(184, 10%, 90%);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.changelog .bloom:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 12px hsla(184, 70%, 57%, 0.08);
    }
    main.changelog .timber{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(184, 70%, 57%, 0.1);
    color: hsl(184, 70%, 45%);
    }
    main.changelog .timber svg{
    width: 18px;
    height: 18px;
    }
    main.changelog .delta{
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    }
    main.changelog .karma{
    border-top: 1px solid hsl(184, 10%, 90%);
    padding: 32px 24px;
    text-align: center;
    }
    main.changelog .vapor{
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin-bottom: 4px;
    }
    main.changelog .kelp{
    font-size: 0.8rem;
    color: hsl(184, 10%, 50%);
    margin: 0;
    }
    main.changelog .monolith{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 12px;
    }
    main.changelog .monolith a{
    font-size: 0.8rem;
    color: hsl(184, 10%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.changelog .monolith a:hover{
    color: hsl(184, 70%, 45%);
    }
    @media (max-width: 640px) {main.changelog .epoch{
    padding: 60px 20px 44px;
    }
    main.changelog .epoch h1{
    font-size: 1.6rem;
    }
    main.changelog .axiom{
    font-size: 0.95rem;
    }
    main.changelog .orbit{
    padding: 40px 20px 24px;
    }
    main.changelog .rune{
    grid-template-columns: 1fr;
    }
    main.changelog .wren{
    flex-direction: column;
    gap: 6px;
    }
    main.changelog .mosaic{
    height: 160px;
    }
    main.changelog .quiver h2{
    font-size: 1.1rem;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    .dawnLit {
    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);
    }
    .quilted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    .blotch {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    }
    .blotch:hover {
    color: var(--primary-color);
    }
    .kv9 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .fog_ray {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-color);
    transition: var(--transition);
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 32px;
    }
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    }
    .vortex3 {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .vortex3:hover {
    color: var(--text-color);
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 550;
    color: var(--btn-text);
    background: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    }
    .crumble:hover {
    background: hsl(184, 65%, 36%);
    box-shadow: var(--shadow-sm);
    }
    @media (max-width: 860px) {.kv9 {
    display: flex;
    }
    .zephyr {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    }
    .zephyr.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    }
    .juniper {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    }
    .vortex3 {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex3:last-child {
    border-bottom: none;
    }
    .crumble {
    margin-top: 16px;
    width: 100%;
    height: 42px;
    font-size: 15px;
    }}
    main.faq .mirth{
    padding: 80px 24px 60px;
    text-align: center;
    background: linear-gradient(180deg, hsl(184, 15%, 12%) 0%, hsl(184, 12%, 18%) 100%);
    color: #fff;
    }
    main.faq .mirth h1{
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 auto 16px;
    max-width: 720px;
    line-height: 1.35;
    }
    main.faq .mirth p{
    font-size: 1.05rem;
    color: hsl(184, 10%, 70%);
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.6;
    }
    main.faq .hollow{
    max-width: 480px;
    width: 100%;
    border-radius: 6px;
    margin-top: 12px;
    }
    main.faq .grain{
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    }
    main.faq .grain input{
    width: 100%;
    padding: 14px 18px 14px 44px;
    border: 1px solid hsl(184, 10%, 30%);
    border-radius: 6px;
    background: hsl(184, 10%, 14%);
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    }
    main.faq .grain input::placeholder{
    color: hsl(184, 10%, 50%);
    }
    main.faq .grain input:focus{
    border-color: hsl(184, 70%, 57%);
    }
    main.faq .grain svg{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(184, 10%, 50%);
    }
    main.faq .kite{
    padding: 56px 24px;
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.faq .dune{
    max-width: 900px;
    margin: 0 auto;
    }
    main.faq .kite h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 32px;
    text-align: center;
    letter-spacing: -0.01em;
    }
    main.faq .xeno{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    }
    main.faq .urchin{
    background: #fff;
    border: 1px solid hsl(184, 10%, 88%);
    border-radius: 6px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.faq .urchin:hover{
    border-color: hsl(184, 70%, 57%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    main.faq .forge{
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(184, 70%, 95%);
    border-radius: 6px;
    color: hsl(184, 70%, 40%);
    }
    main.faq .urchin h3{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 6px;
    }
    main.faq .urchin p{
    font-size: 0.82rem;
    color: hsl(184, 10%, 45%);
    margin: 0;
    line-height: 1.5;
    }
    main.faq .etch{
    padding: 56px 24px;
    background: #fff;
    }
    main.faq .etch:nth-child(even){
    background: var(--bg-color, hsl(184, 7%, 96%));
    }
    main.faq .vivid{
    max-width: 760px;
    margin: 0 auto;
    }
    main.faq .etch h2{
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(184, 10%, 10%));
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 2px solid hsl(184, 70%, 57%);
    display: inline-block;
    }
    main.faq .cipher{
    border: 1px solid hsl(184, 10%, 88%);
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
    }
    main.faq .etch:nth-child(even) .cipher{
    background: #fff;
    }
    main.faq .cipher summary{
    padding: 18px 48px 18px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(184, 10%, 10%));
    cursor: pointer;
    list-style: none;
    position: relative;
    line-height: 1.5;
    transition: background 0.15s;
    }
    main.faq .cipher summary::-webkit-details-marker{
    display: none;
    }
    main.faq .cipher summary::after{
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 400;
    color: hsl(184, 10%, 50%);
    transition: transform 0.2s;
    }
    main.faq .cipher[open] summary::after{
    content: "−";
    }
    main.faq .cipher summary:hover{
    background: hsl(184, 7%, 97%);
    }
    main.faq .totem{
    padding: 0 20px 18px;
    font-size: 0.9rem;
    color: hsl(184, 10%, 30%);
    line-height: 1.7;
    }
    main.faq .totem a{
    color: hsl(184, 70%, 40%);
    text-decoration: none;
    border-bottom: 1px solid hsl(184, 70%, 80%);
    transition: border-color 0.2s;
    }
    main.faq .totem a:hover{
    border-color: hsl(184, 70%, 40%);
    }
    main.faq .yarn{
    padding: 64px 24px;
    text-align: center;
    background: linear-gradient(180deg, hsl(184, 12%, 18%) 0%, hsl(184, 15%, 12%) 100%);
    color: #fff;
    }
    main.faq .yarn h2{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    }
    main.faq .yarn p{
    color: hsl(184, 10%, 65%);
    font-size: 0.95rem;
    margin: 0 0 28px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.faq .alcove{
    display: inline-block;
    padding: 14px 36px;
    background: hsl(184, 70%, 57%);
    color: hsl(184, 15%, 8%);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.faq .alcove:hover{
    background: hsl(184, 70%, 50%);
    }
    main.faq .wander{
    padding: 36px 24px;
    background: hsl(184, 15%, 8%);
    color: hsl(184, 10%, 50%);
    text-align: center;
    font-size: 0.82rem;
    }
    main.faq .briar{
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    }
    main.faq .lantern{
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    }
    main.faq .ignite{
    display: flex;
    gap: 20px;
    }
    main.faq .ignite a{
    color: hsl(184, 10%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.faq .ignite a:hover{
    color: hsl(184, 70%, 57%);
    }
    @media (max-width: 768px) {main.faq .mirth{ padding: 56px 20px 40px; }
    main.faq .mirth h1{ font-size: 1.5rem; }
    main.faq .xeno{ grid-template-columns: repeat(2, 1fr); }
    main.faq .etch{ padding: 40px 20px; }
    main.faq .briar{ flex-direction: column; text-align: center; }}
    @media (max-width: 480px) {main.faq .xeno{ grid-template-columns: 1fr; }
    main.faq .mirth h1{ font-size: 1.3rem; }}

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