:root {
  --primary-color: hsl(248, 69%, 57%);
  --secondary-color: hsl(344, 55%, 57%);
  --bg-color: hsl(248, 6%, 97%);
  --text-color: hsl(248, 10%, 8%);
  --text-muted: hsl(248, 8%, 46%);
  --border-color: hsla(248, 20%, 20%, 0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 4px hsla(248, 30%, 10%, 0.06);
  --shadow-md: 0 4px 16px hsla(248, 30%, 10%, 0.1);
  --shadow-lg: 0 12px 40px hsla(248, 30%, 10%, 0.14);
  --nav-height: 64px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
  --nav-bg: var(--bg-color);
  --nav-border: var(--border-color);
  --wps-primary: hsl(248, 69%, 57%);
  --wps-primary-dark: hsl(248, 69%, 45%);
  --wps-secondary: hsl(344, 55%, 57%);
  --wps-secondary-dark: hsl(344, 55%, 47%);
  --wps-text: hsl(248, 10%, 8%);
  --wps-text-muted: hsl(248, 8%, 40%);
  --wps-bg: hsl(248, 6%, 97%);
  --wps-bg-dark: hsl(248, 12%, 10%);
  --wps-bg-card: hsl(248, 8%, 100%);
  --wps-surface: hsl(248, 8%, 93%);
  --wps-gradient: linear-gradient(135deg, var(--wps-primary), var(--wps-secondary));
  --dl-primary: hsl(248, 69%, 57%);
  --dl-primary-dark: hsl(248, 69%, 47%);
  --dl-accent: hsl(344, 55%, 57%);
  --dl-accent-dark: hsl(344, 55%, 47%);
  --dl-text: hsl(248, 10%, 8%);
  --dl-text-muted: hsl(248, 8%, 40%);
  --dl-bg: hsl(248, 6%, 97%);
  --dl-bg-dark: hsl(248, 12%, 12%);
  --dl-bg-card: hsl(248, 8%, 100%);
  --dl-border: hsl(248, 8%, 88%);
  --dl-surface: hsl(248, 10%, 16%);
  --wps-muted: hsl(248, 6%, 46%);
  --wps-border: hsl(248, 8%, 88%);
  --wps-gradient-warm: linear-gradient(135deg, hsl(248, 69%, 57%), hsl(344, 55%, 57%));
  --wps-gradient-subtle: linear-gradient(180deg, hsl(248, 6%, 97%) 0%, hsl(248, 10%, 93%) 100%);
  --sr-primary: hsl(248, 69%, 57%);
  --sr-primary-dark: hsl(248, 69%, 47%);
  --sr-accent: hsl(344, 55%, 57%);
  --sr-accent-dark: hsl(344, 55%, 47%);
  --sr-text: hsl(248, 10%, 8%);
  --sr-text-light: hsl(248, 8%, 40%);
  --sr-bg: hsl(248, 6%, 97%);
  --sr-bg-dark: hsl(248, 20%, 12%);
  --sr-card-bg: #ffffff;
  --sr-border: hsl(248, 10%, 88%);
  --sr-success: hsl(152, 55%, 42%);
  --sr-warning: hsl(38, 90%, 50%);
  --ig-primary: hsl(248, 69%, 57%);
  --ig-primary-dark: hsl(248, 69%, 45%);
  --ig-secondary: hsl(344, 55%, 57%);
  --ig-text: hsl(248, 10%, 8%);
  --ig-bg: hsl(248, 6%, 97%);
  --ig-surface: #ffffff;
  --ig-border: hsl(248, 10%, 88%);
  --ig-muted: hsl(248, 8%, 45%);
  --ig-step-bg: hsl(248, 30%, 96%);
  --ig-warning-bg: hsl(40, 90%, 95%);
  --ig-warning-border: hsl(40, 80%, 60%);
  --ig-success-bg: hsl(150, 50%, 95%);
  --ig-success-border: hsl(150, 50%, 45%);
  --ig-code-bg: hsl(248, 15%, 12%);
  --gs-primary: hsl(248, 69%, 57%);
  --gs-primary-dark: hsl(248, 69%, 47%);
  --gs-secondary: hsl(344, 55%, 57%);
  --gs-secondary-dark: hsl(344, 55%, 47%);
  --gs-text: hsl(248, 10%, 8%);
  --gs-text-muted: hsl(248, 8%, 40%);
  --gs-bg: hsl(248, 6%, 97%);
  --gs-bg-card: #ffffff;
  --gs-bg-dark: hsl(248, 20%, 12%);
  --gs-border: hsl(248, 10%, 88%);
  --gs-step-size: 56px;
}

*,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.index .fathom{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-bg-dark);
    overflow: hidden;
    padding: 80px 24px 60px;
    }
    main.index .fathom::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 80% 60% at 20% 80%, hsla(248, 69%, 57%, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, hsla(344, 55%, 57%, 0.12), transparent);
    pointer-events: none;
    }
    main.index .fathom::after{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: var(--wps-gradient);
    opacity: 0.06;
    filter: blur(80px);
    pointer-events: none;
    }
    main.index .novella{
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.index .bramble{
    color: #fff;
    }
    main.index .knack{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: hsla(248, 69%, 57%, 0.15);
    border: 1px solid hsla(248, 69%, 57%, 0.3);
    color: hsl(248, 80%, 75%);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
    }
    main.index .knack::before{
    content: "";
    width: 6px;
    height: 6px;
    background: hsl(140, 60%, 55%);
    border-radius: 50%;
    }
    main.index .fathom h1{
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    color: #fff;
    }
    main.index .fathom h1 span{
    background: var(--wps-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.index .coypu{
    font-size: 17px;
    line-height: 1.7;
    color: hsl(248, 8%, 65%);
    margin: 0 0 40px;
    max-width: 480px;
    }
    main.index .ratchet9{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.index .brindle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: var(--wps-gradient);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px hsla(248, 69%, 57%, 0.35);
    }
    main.index .brindle:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px hsla(248, 69%, 57%, 0.45);
    }
    main.index .brindle svg{
    width: 18px;
    height: 18px;
    }
    main.index .umbra_glow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: hsla(248, 20%, 100%, 0.08);
    border: 1px solid hsla(248, 20%, 100%, 0.15);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.index .umbra_glow:hover{
    background: hsla(248, 20%, 100%, 0.14);
    }
    main.index .cask_oil{
    position: relative;
    }
    main.index .aplomb{
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid hsla(248, 20%, 100%, 0.08);
    }
    main.index .aplomb img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    }
    main.index .lacquer{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, hsla(248, 12%, 10%, 0.6));
    pointer-events: none; color: #ffffff;}
    main.index .urchin{
    display: flex;
    gap: 40px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid hsla(248, 20%, 100%, 0.1);
    }
    main.index .haiku5{
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.index .xenon{
    font-size: 13px;
    color: hsl(248, 8%, 50%);
    margin-top: 4px;
    }
    
    main.index .parlance{
    padding: 100px 24px;
    background: var(--wps-bg);
    }
    main.index .whisk{
    max-width: 1200px;
    margin: 0 auto;
    }
    main.index .gumption{
    text-align: center;
    margin-bottom: 64px;
    }
    main.index .frond{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wps-primary);
    margin-bottom: 16px;
    }
    main.index .gumption h2{
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: var(--wps-text);
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    line-height: 1.2;
    }
    main.index .gumption p{
    font-size: 17px;
    color: var(--wps-text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
    }
    main.index .taffeta{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.index .husk{
    background: var(--wps-bg-card);
    padding: 40px 28px;
    text-align: center;
    border: 1px solid hsl(248, 8%, 90%);
    transition: transform 0.2s, box-shadow 0.2s;
    }
    main.index .husk:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 48px hsla(248, 20%, 20%, 0.08);
    }
    main.index .iridium{
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-surface);
    border-radius: 14px;
    }
    main.index .iridium svg{
    width: 28px;
    height: 28px;
    color: var(--wps-primary);
    }
    main.index .husk h3{
    font-size: 18px;
    font-weight: 700;
    color: var(--wps-text);
    margin: 0 0 8px;
    }
    main.index .husk p{
    font-size: 14px;
    color: var(--wps-text-muted);
    margin: 0 0 24px;
    line-height: 1.5;
    }
    main.index .sable{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--wps-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.index .sable:hover{
    background: var(--wps-primary-dark);
    }
    main.index .sable svg{
    width: 14px;
    height: 14px;
    }
    
    main.index .sluice{
    padding: 100px 24px;
    background: var(--wps-bg-dark);
    color: #fff;
    }
    main.index .sluice .frond{
    color: hsl(248, 80%, 75%);
    }
    main.index .sluice .gumption h2{
    color: #fff;
    }
    main.index .sluice .gumption p{
    color: hsl(248, 8%, 60%);
    }
    main.index .elixir{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.index .opaque{
    padding: 36px 28px;
    background: hsla(248, 20%, 100%, 0.04);
    border: 1px solid hsla(248, 20%, 100%, 0.08);
    transition: background 0.2s;
    }
    main.index .opaque:hover{
    background: hsla(248, 20%, 100%, 0.07);
    }
    main.index .yarrow{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-gradient);
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    }
    main.index .opaque h3{
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
    }
    main.index .opaque p{
    font-size: 14px;
    line-height: 1.65;
    color: hsl(248, 8%, 58%);
    margin: 0;
    }
    
    main.index .wps-showcase{
    padding: 100px 24px;
    background: var(--wps-bg);
    }
    main.index .wps-showcase-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.index .wps-showcase-item{
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(248, 8%, 90%);
    }
    main.index .wps-showcase-item img{
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.4s;
    }
    main.index .wps-showcase-item:hover img{
    transform: scale(1.03);
    }
    main.index .wps-showcase-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(transparent, hsla(248, 12%, 8%, 0.85));
    color: #fff;
    }
    main.index .wps-showcase-caption h3{
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    }
    main.index .wps-showcase-caption p{
    font-size: 13px;
    color: hsl(248, 8%, 70%);
    margin: 0;
    }
    
    main.index .wps-version{
    padding: 80px 24px;
    background: var(--wps-bg);
    }
    main.index .wps-version-box{
    max-width: 800px;
    margin: 0 auto;
    background: var(--wps-bg-card);
    border: 1px solid hsl(248, 8%, 90%);
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    }
    main.index .wps-version-info h2{
    font-size: 24px;
    font-weight: 800;
    color: var(--wps-text);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    }
    main.index .wps-version-meta{
    display: flex;
    gap: 24px;
    margin-top: 12px;
    }
    main.index .wps-version-meta span{
    font-size: 13px;
    color: var(--wps-text-muted);
    }
    main.index .wps-version-meta strong{
    color: var(--wps-text);
    font-weight: 600;
    }
    main.index .wps-version-dl{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: var(--wps-secondary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 20px hsla(344, 55%, 57%, 0.3);
    white-space: nowrap;
    }
    main.index .wps-version-dl:hover{
    background: var(--wps-secondary-dark);
    transform: translateY(-2px);
    }
    
    main.index .wps-cta{
    padding: 120px 24px;
    background: var(--wps-bg-dark);
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.index .wps-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 50% 80% at 50% 100%, hsla(248, 69%, 57%, 0.12), transparent);
    pointer-events: none; color: #ffffff;}
    main.index .wps-cta-inner{
    position: relative;
    z-index: 1;
    }
    main.index .wps-cta h2{
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    }
    main.index .wps-cta p{
    font-size: 17px;
    color: hsl(248, 8%, 58%);
    margin: 0 0 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.index .wps-cta .brindle{
    padding: 18px 48px;
    font-size: 17px;
    }
    main.index .wps-cta-links{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 32px;
    }
    main.index .wps-cta-links a{
    font-size: 14px;
    color: hsl(248, 8%, 50%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.index .wps-cta-links a:hover{
    color: hsl(248, 80%, 75%);
    }
    
    main.index .zinger{
    padding: 48px 24px;
    background: hsl(248, 14%, 7%);
    border-top: 1px solid hsla(248, 20%, 100%, 0.06); color: #ffffff;}
    main.index .quill{
    max-width: 1200px;
    margin: 0 auto;
  
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.index .xeric{
    font-size: 16px;
    font-weight: 700;
    color: hsl(248, 8%, 50%);
    letter-spacing: -0.01em;
    }
    main.index .wps-footer-copy{
    font-size: 13px;
    color: hsl(248, 8%, 35%);
    }
    main.index .wps-footer-links{

    gap: 24px;
    }
    main.index .wps-footer-links a{
    font-size: 13px;
    color: hsl(248, 8%, 42%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.index .wps-footer-links a:hover{
    color: hsl(248, 8%, 70%);
    }
    
    @media (max-width: 1024px) {main.index .novella{
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
    }
    main.index .coypu{
    margin-left: auto;
    margin-right: auto;
    }
    main.index .ratchet9{
    justify-content: center;
    }
    main.index .urchin{
    justify-content: center;
    }
    main.index .taffeta{
    grid-template-columns: repeat(2, 1fr);
    }
    main.index .elixir{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 768px) {main.index .fathom{
    min-height: auto;
    padding: 60px 20px 48px;
    }
    main.index .urchin{
    gap: 24px;
    flex-wrap: wrap;
    }
    main.index .haiku5{
    font-size: 22px;
    }
    main.index .parlance, main.index .sluice, main.index .wps-showcase{
    padding: 72px 20px;
    }
    main.index .elixir{
    grid-template-columns: 1fr;
    }
    main.index .wps-showcase-grid{
    grid-template-columns: 1fr;
    }
    main.index .wps-version-box{
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
    }
    main.index .wps-version-meta{
    justify-content: center;
    }
    main.index .quill{
    flex-direction: column;
    text-align: center;
    }}
    @media (max-width: 480px) {main.index .taffeta{
    grid-template-columns: 1fr;
    }
    main.index .ratchet9{
    flex-direction: column;
    align-items: center;
    }
    main.index .brindle, main.index .umbra_glow{
    width: 100%;
    justify-content: center;
    }
    main.index .wps-cta-links{
    flex-direction: column;
    gap: 12px;
    }}
    main.index .zinger{
    background: hsl(248, 14%, 10%);
    color: hsl(248, 10%, 72%);
    padding: 64px 24px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    }
    main.index .quill{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.index .riftZone{
    display: flex;
    gap: 48px;
    align-items: flex-start;
    }
    main.index .xeric{
    flex: 0 0 220px;
    }
    main.index .kindling{
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    }
    main.index .inkblot{
    color: hsl(248, 10%, 50%);
    font-size: 14px;
    margin: 0;
    }
    main.index .mirth_fox{
    display: flex;
    flex: 1 1 auto;
    gap: 48px;
    }
    main.index .waspNest{
    flex: 1 1 0;
    }
    main.index .tundra7{
    font-size: 13px;
    font-weight: 600;
    color: hsl(248, 10%, 56%);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
    }
    main.index .dapple{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    main.index .glintPop{
    margin-bottom: 10px;
    }
    main.index .jamb3{
    color: hsl(248, 10%, 72%);
    text-decoration: none;
    transition: color 0.2s ease;
    }
    main.index .jamb3:hover{
    color: #ffffff;
    }
    main.index .lozenge{
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    text-align: right;
    }
    main.index .deft_arc{
    color: hsl(248, 10%, 56%);
    font-size: 14px;
    margin: 0;
    }
    main.index .vivid_elm{
    display: inline-block;
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--primary-color, hsl(248, 69%, 57%)), var(--secondary-color, hsl(344, 55%, 57%)));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.35);
    }
    main.index .vivid_elm:hover{
    opacity: 0.9;
    transform: translateY(-1px);
    }
    main.index .zinc4{
    height: 1px;
    background: hsla(248, 20%, 60%, 0.12);
    margin: 48px 0 24px;
    }
    main.index .yoke{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    }
    main.index .velvet{
    color: hsl(248, 10%, 42%);
    font-size: 13px;
    flex: 0 0 auto;
    }
    main.index .jetsam{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.index .effigy{
    color: hsl(248, 10%, 50%);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
    }
    main.index .effigy:hover{
    color: #ffffff;
    }
    main.index .aq7blend{
    color: hsl(248, 10%, 30%);
    font-size: 13px;
    }
    @media (max-width: 768px) {main.index .zinger{
    padding: 48px 20px 28px;
    }
    main.index .riftZone{
    flex-direction: column;
    gap: 36px;
    }
    main.index .xeric{
    flex: 0 0 auto;
    }
    main.index .mirth_fox{
    flex-wrap: wrap;
    gap: 32px;
    }
    main.index .waspNest{
    flex: 1 1 120px;
    }
    main.index .lozenge{
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    }
    main.index .yoke{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }
    main.index .velvet{
    order: 1;
    }
    main.index .jetsam{
    order: 0;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.download *{ box-sizing: border-box; }
    main.download .squab{
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, hsl(248, 30%, 10%) 0%, hsl(248, 40%, 18%) 40%, hsl(344, 30%, 20%) 100%);
    padding: 100px 24px 80px;
    text-align: center;
    color: #fff;
    }
    main.download .squab::before{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(248, 69%, 57%, 0.15) 0%, transparent 70%);
    pointer-events: none; color: #ffffff;}
    main.download .squab::after{
    content: "";
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(344, 55%, 57%, 0.1) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .ulna{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.download .squab h1{
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    }
    main.download .quahog{
    font-size: 1.15rem;
    color: hsla(0, 0%, 100%, 0.72);
    margin: 0 0 40px;
    line-height: 1.6;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    }
    main.download .bevel_cut{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--dl-primary), var(--dl-accent));
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 18px 48px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 32px hsla(248, 69%, 57%, 0.35);
    letter-spacing: 0.01em;
    }
    main.download .bevel_cut:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 40px hsla(248, 69%, 57%, 0.45);
    }
    main.download .bevel_cut svg{
    width: 22px;
    height: 22px;
    fill: currentColor;
    }
    main.download .jib{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 28px;
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.5);
    }
    main.download .jib span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    }
    main.download .jib svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.7;
    }
    main.download .knurl{
    margin-top: 14px;
    font-size: 0.9rem;
    color: hsla(0, 0%, 100%, 0.55);
    }
    main.download .impel{
    background: var(--dl-bg, #f5f5f7);
    padding: 80px 24px;
    }
    main.download .latch5{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.download .impel h2{
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--dl-text, #1a1a2e);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.download .zenith3{
    text-align: center;
    color: var(--dl-text-muted, #666);
    font-size: 1rem;
    margin: 0 0 48px;
    line-height: 1.6;
    }
    main.download .tarn{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.download .floe{
    background: var(--dl-bg-card, #fff);
    border: 1px solid var(--dl-border, #e0e0e0);
    padding: 36px 24px 32px;
    text-align: center;
    transition: box-shadow 0.25s, transform 0.25s;
    }
    main.download .floe:hover{
    box-shadow: 0 12px 40px hsla(248, 20%, 20%, 0.08);
    transform: translateY(-4px);
    }
    main.download .irk{
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, hsla(248, 69%, 57%, 0.1), hsla(344, 55%, 57%, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.download .irk svg{
    width: 28px;
    height: 28px;
    fill: var(--dl-primary, #5b4cdb);
    }
    main.download .floe h3{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dl-text, #1a1a2e);
    margin: 0 0 8px;
    }
    main.download .dint{
    font-size: 0.82rem;
    color: var(--dl-text-muted, #666);
    margin: 0 0 6px;
    }
    main.download .clef{
    font-size: 0.78rem;
    color: var(--dl-text-muted, #888);
    margin: 0 0 20px;
    }
    main.download .woad{
    display: inline-block;
    background: var(--dl-primary, #5b4cdb);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 32px;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.download .woad:hover{
    background: var(--dl-primary-dark, #4a3cc0);
    }
    main.download .grist{
    display: block;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--dl-primary, #5b4cdb);
    text-decoration: none;
    }
    main.download .grist:hover{
    text-decoration: underline;
    }
    main.download .jounce{
    background: var(--dl-bg-dark, #1a1a2e);
    padding: 80px 24px;
    color: #fff;
    }
    main.download .pang{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.download .jounce h2{
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
    }
    main.download .phantom{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.download .phantom li{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: hsla(0, 0%, 100%, 0.78);
    }
    main.download .phantom li svg{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: var(--dl-accent, #d1547a);
    margin-top: 2px;
    }
    main.download .mote_spark{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0.9;
    }
    main.download .glacier{
    background: var(--dl-bg, #f5f5f7);
    padding: 80px 24px;
    }
    main.download .ogee{
    max-width: 900px;
    margin: 0 auto;
    }
    main.download .glacier h2{
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--dl-text, #1a1a2e);
    margin: 0 0 12px;
    }
    main.download .hew{
    text-align: center;
    color: var(--dl-text-muted, #666);
    margin: 0 0 40px;
    font-size: 1rem;
    }
    main.download .lilt9{
    width: 100%;
    border-collapse: collapse;
    background: var(--dl-bg-card, #fff);
    border: 1px solid var(--dl-border, #e0e0e0);
    }
    main.download .lilt9 th, main.download .lilt9 td{
    padding: 16px 20px;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--dl-border, #e0e0e0);
    }
    main.download .lilt9 th{
    background: hsla(248, 69%, 57%, 0.06);
    font-weight: 700;
    color: #ffffff;
    width: 180px;
    }
    main.download .lilt9 td{
    color: var(--dl-text-muted, #555);
    line-height: 1.5;
    }
    main.download .xyst{
    text-align: center;
    margin-top: 32px;
    font-size: 0.92rem;
    color: var(--dl-text-muted, #666);
    line-height: 1.7;
    }
    main.download .xyst a{
    color: var(--dl-primary, #5b4cdb);
    text-decoration: none;
    font-weight: 600;
    }
    main.download .xyst a:hover{
    text-decoration: underline;
    }
    main.download .vetch{
    background: linear-gradient(160deg, hsl(248, 30%, 10%) 0%, hsl(248, 35%, 15%) 100%);
    padding: 64px 24px;
    text-align: center;
    color: #fff;
    }
    main.download .epoch{
    max-width: 720px;
    margin: 0 auto;
    }
    main.download .vetch h2{
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 16px;
    }
    main.download .vetch p{
    color: hsla(0, 0%, 100%, 0.68);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 32px;
    }
    main.download .nib{
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    }
    main.download .yawl{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.download .yawl svg{
    width: 36px;
    height: 36px;
    fill: var(--dl-accent, #d1547a);
    }
    main.download .yawl span{
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.6);
    font-weight: 600;
    }
    main.download .dl-footer{
    background: hsl(248, 12%, 8%);
    padding: 40px 24px;
    text-align: center;
    color: hsla(0, 0%, 100%, 0.4);
    font-size: 0.82rem;
    }
    main.download .dl-footer-inner{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.download .dl-footer-brand{
    font-size: 1.1rem;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.7);
    margin: 0 0 8px;
    }
    main.download .dl-footer-links{
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 24px;
    }
    main.download .dl-footer-links a{
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    font-size: 0.82rem;
    }
    main.download .dl-footer-links a:hover{
    color: hsla(0, 0%, 100%, 0.7);
    }
    @media (max-width: 860px) {main.download .tarn{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .pang{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.download .squab h1{
    font-size: 2.2rem;
    }}
    @media (max-width: 540px) {main.download .tarn{
    grid-template-columns: 1fr;
    }
    main.download .squab{
    padding: 72px 20px 56px;
    }
    main.download .squab h1{
    font-size: 1.8rem;
    }
    main.download .jib{
    flex-direction: column;
    gap: 8px;
    }
    main.download .impel, main.download .glacier, main.download .jounce{
    padding: 56px 20px;
    }
    main.download .lilt9 th{
    width: 120px;
    }
    main.download .nib{
    gap: 24px;
    }}
    main.download .murkFin{
    background: var(--text-color, hsl(248, 10%, 8%));
    padding: 48px 24px 36px;
    border-top: 1px solid hsla(248, 20%, 80%, 0.08);
    }
    main.download .oxbow{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }
    main.download .nibs{
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.download .grotto{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.download .scrim7{
    font-size: 13px;
    color: hsla(248, 10%, 100%, 0.4);
    padding-left: 12px;
    border-left: 1px solid hsla(248, 10%, 100%, 0.15);
    }
    main.download .wren_call{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.download .fen_ash{
    font-size: 13px;
    color: hsla(248, 10%, 100%, 0.55);
    text-decoration: none;
    padding: 4px 8px;
    transition: var(--transition, all 0.2s ease);
    }
    main.download .fen_ash:hover{
    color: #fff;
    }
    main.download .morsel{
    width: 3px;
    height: 3px;
    background: hsla(248, 10%, 100%, 0.2);
    flex-shrink: 0;
    }
    main.download .trellis{
    font-size: 12px;
    color: hsla(248, 10%, 100%, 0.3);
    margin: 8px 0 0;
    text-align: center;
    }
    @media (max-width: 640px) {main.download .murkFin{
    padding: 36px 20px 28px;
    }
    main.download .nibs{
    flex-direction: column;
    gap: 6px;
    }
    main.download .scrim7{
    border-left: none;
    padding-left: 0;
    }
    main.download .wren_call{
    gap: 4px;
    }
    main.download .fen_ash{
    font-size: 12px;
    padding: 4px 6px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.features *{ box-sizing: border-box; }
    main.features .cedar{
    position: relative;
    overflow: hidden;
    background: var(--wps-bg-dark);
    padding: 100px 24px 80px;
    text-align: center;
    color: #fff;
    }
    main.features .cedar::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wps-gradient-warm);
    opacity: 0.15;
    }
    main.features .cedar::after{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: var(--wps-primary);
    opacity: 0.08;
    filter: blur(100px);
    }
    main.features .jade{
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    }
    main.features .cedar h1{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.features .vortex{
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: hsl(248, 20%, 72%);
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    }
    main.features .shard{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .haven{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--wps-gradient-warm);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.35);
    }
    main.features .haven:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(248, 69%, 57%, 0.45);
    }
    main.features .xenon{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: hsla(248, 40%, 80%, 0.1);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid hsla(248, 40%, 80%, 0.3);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    }
    main.features .xenon:hover{
    background: hsla(248, 40%, 80%, 0.18);
    border-color: hsla(248, 40%, 80%, 0.5);
    }
    main.features .delta{
    padding: 80px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .onyx{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.features .vivid{
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wps-primary);
    margin-bottom: 12px;
    }
    main.features .delta h2{
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--wps-text, #1a1a2e);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.25;
    }
    main.features .brine{
    font-size: 1.05rem;
    color: var(--wps-muted);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 0 48px;
    }
    main.features .etch{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    }
    main.features .ember{
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    border-radius: 6px;
    padding: 32px 24px;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    }
    main.features .ember::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--wps-gradient-warm);
    opacity: 0;
    transition: opacity 0.25s;
    }
    main.features .ember:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 40px hsla(248, 20%, 20%, 0.08);
    }
    main.features .ember:hover::before{
    opacity: 1;
    }
    main.features .zinc{
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 700;
    }
    main.features .yarrow{
    background: hsla(248, 69%, 57%, 0.1);
    color: #ffffff;
    }
    main.features .quill{
    background: hsla(150, 60%, 40%, 0.1);
    color: hsl(150, 60%, 35%);
    }
    main.features .wren{
    background: hsla(344, 55%, 57%, 0.1);
    color: var(--wps-secondary);
    }
    main.features .vale{
    background: hsla(20, 70%, 50%, 0.1);
    color: hsl(20, 70%, 45%);
    }
    main.features .ember h3{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wps-text, #1a1a2e);
    margin: 0 0 10px;
    }
    main.features .ember p{
    font-size: 0.92rem;
    color: var(--wps-muted);
    line-height: 1.65;
    margin: 0;
    }
    main.features .dusk{
    background: var(--wps-bg-dark);
    color: #fff;
    }
    main.features .dusk h2{
    color: #fff;
    }
    main.features .dusk .brine{
    color: hsl(248, 10%, 62%);
    }
    main.features .cirrus{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    }
    main.features .cirrus.grain{
    direction: rtl;
    }
    main.features .cirrus.grain > *{
    direction: ltr;
    }
    main.features .basalt{
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    }
    main.features .basalt img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    }
    main.features .forge h3{
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
    }
    main.features .forge p{
    font-size: 0.95rem;
    line-height: 1.7;
    color: hsl(248, 10%, 62%);
    margin: 0 0 20px;
    }
    main.features .plume{
    display: inline-block;
    padding: 4px 12px;
    background: hsla(248, 69%, 57%, 0.15);
    color: hsl(248, 69%, 72%);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    }
    main.features .alder{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.features .apex{
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    border-radius: 6px;
    padding: 28px 24px;
    transition: box-shadow 0.25s;
    }
    main.features .apex:hover{
    box-shadow: 0 8px 30px hsla(248, 20%, 20%, 0.07);
    }
    main.features .bolt{
    font-size: 2rem;
    font-weight: 800;
    background: var(--wps-gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1;
    }
    main.features .apex h3{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wps-text, #1a1a2e);
    margin: 0 0 8px;
    }
    main.features .apex p{
    font-size: 0.9rem;
    color: var(--wps-muted);
    line-height: 1.6;
    margin: 0;
    }
    main.features .opal{
    background: var(--wps-gradient-subtle);
    }
    main.features .ivory{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    }
    main.features .knoll{
    display: flex;
    gap: 16px;
    padding: 24px;
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    border-radius: 6px;
    transition: transform 0.2s;
    }
    main.features .knoll:hover{
    transform: translateY(-2px);
    }
    main.features .nimbus{
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    }
    main.features .quartz{ background: var(--wps-primary); }
    main.features .fable{ background: var(--wps-secondary); }
    main.features .ridge{ background: hsl(150, 60%, 40%); }
    main.features .haze{ background: hsl(40, 80%, 50%); }
    main.features .knoll h3{
    font-size: 1rem;
    font-weight: 700;
    color: var(--wps-text, #1a1a2e);
    margin: 0 0 6px;
    }
    main.features .knoll p{
    font-size: 0.88rem;
    color: var(--wps-muted);
    line-height: 1.6;
    margin: 0;
    }
    main.features .update-section{
    background: var(--wps-bg-dark);
    color: #fff;
    }
    main.features .update-section h2{
    color: #fff;
    }
    main.features .update-section .brine{
    color: hsl(248, 10%, 62%);
    }
    main.features .update-timeline{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    }
    main.features .update-entry{
    display: flex;
    gap: 20px;
    padding: 24px;
    background: hsla(248, 20%, 18%, 0.6);
    border: 1px solid hsla(248, 20%, 30%, 0.4);
    border-radius: 6px; color: #ffffff;}
    main.features .update-date{
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: hsl(248, 69%, 72%);
    min-width: 100px;
    padding-top: 2px;
    }
    main.features .update-content h3{
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    }
    main.features .update-content p{
    font-size: 0.88rem;
    color: hsl(248, 10%, 58%);
    line-height: 1.6;
    margin: 0;
    }
    main.features .cta-section{
    padding: 80px 24px;
    text-align: center;
    background: var(--wps-bg, hsl(248, 6%, 97%));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .cta-box{
    max-width: 640px;
    margin: 0 auto;
    }
    main.features .cta-box h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--wps-text, #1a1a2e);
    margin: 0 0 14px;
    }
    main.features .cta-box p{
    font-size: 1rem;
    color: var(--wps-muted);
    line-height: 1.7;
    margin: 0 0 32px;
    }
    main.features .cta-box .haven{
    font-size: 1.05rem;
    padding: 16px 40px;
    }
    main.features .feat-footer{
    background: var(--wps-bg-dark);
    color: hsl(248, 10%, 55%);
    padding: 40px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.88rem;
    border-top: 1px solid hsla(248, 20%, 30%, 0.3);
    }
    main.features .feat-footer-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.features .feat-footer-brand{
    font-weight: 700;
    color: hsl(248, 10%, 75%);
    font-size: 1rem;
    }
    main.features .feat-footer-links{
    display: flex;
    gap: 24px;
    }
    main.features .feat-footer-links a{
    color: hsl(248, 10%, 55%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.features .feat-footer-links a:hover{
    color: hsl(248, 69%, 72%);
    }
    main.features .feat-footer-copy{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid hsla(248, 20%, 30%, 0.2);
    font-size: 0.82rem;
    }
    main.features .husk{
    color: var(--wps-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
    }
    main.features .husk:hover{
    color: var(--wps-primary-dark);
    }
    main.features .dusk .husk, main.features .update-section .husk{
    color: hsl(248, 69%, 72%);
    }
    main.features .dusk .husk:hover, main.features .update-section .husk:hover{
    color: hsl(248, 69%, 82%);
    }
    @media (max-width: 900px) {main.features .etch{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .cirrus, main.features .cirrus.grain{
    grid-template-columns: 1fr;
    direction: ltr;
    }
    main.features .alder{
    grid-template-columns: 1fr;
    }
    main.features .ivory{
    grid-template-columns: 1fr;
    }}
    @media (max-width: 600px) {main.features .etch{
    grid-template-columns: 1fr;
    }
    main.features .cedar{
    padding: 72px 20px 60px;
    }
    main.features .delta{
    padding: 56px 20px;
    }
    main.features .update-entry{
    flex-direction: column;
    gap: 8px;
    }
    main.features .feat-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.features .feat-footer-links{
    justify-content: center;
    }}
    main.features .nebula{
    background: hsl(248, 14%, 10%);
    padding: 72px 24px 0;
    color: hsla(0, 0%, 100%, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.features .drift{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.features .thorn{
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    padding-bottom: 56px;
    }
    main.features .cobalt{
    flex: 1 1 240px;
    min-width: 200px;
    }
    main.features .glyph{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 12px;
    }
    main.features .loom{
    font-size: 14px;
    line-height: 1.6;
    color: hsla(0, 0%, 100%, 0.45);
    margin: 0;
    }
    main.features .pike{
    display: flex;
    flex: 2 1 400px;
    gap: 48px;
    }
    main.features .umber{
    flex: 1 1 120px;
    }
    main.features .prism{
    font-size: 13px;
    font-weight: 600;
    color: hsla(0, 0%, 100%, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 20px;
    }
    main.features .raven{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.features .cloak{
    line-height: 1;
    }
    main.features .dune{
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    }
    main.features .dune:hover{
    color: #fff;
    }
    main.features .slate{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 32px;
    background: hsla(248, 69%, 57%, 0.1);
    border: 1px solid hsla(248, 69%, 57%, 0.2);
    border-radius: var(--radius-md, 8px);
    align-self: flex-start; color: #ffffff;}
    main.features .falcon{
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.75);
    margin: 0;
    line-height: 1.4;
    }
    main.features .flint{
    display: inline-block;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, hsl(248, 69%, 57%), hsl(344, 55%, 57%));
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.35);
    }
    main.features .flint:hover{
    opacity: 0.9;
    transform: translateY(-1px);
    }
    main.features .alloy{
    height: 1px;
    background: hsla(0, 0%, 100%, 0.08);
    }
    main.features .latch{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.features .crest{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.35);
    flex: 0 0 auto;
    }
    main.features .moss{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.features .surge{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    transition: color 0.2s ease;
    }
    main.features .surge:hover{
    color: #fff;
    }
    main.features .wicker{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.2);
    }
    @media (max-width: 768px) {main.features .nebula{
    padding: 48px 20px 0;
    }
    main.features .thorn{
    flex-direction: column;
    gap: 36px;
    }
    main.features .pike{
    flex-wrap: wrap;
    gap: 32px;
    }
    main.features .umber{
    flex: 1 1 calc(50% - 16px);
    }
    main.features .slate{
    width: 100%;
    align-items: center;
    text-align: center;
    }
    main.features .latch{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.system-requirements *{ box-sizing: border-box; }
    main.system-requirements .zenith{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(248, 30%, 14%) 0%, hsl(248, 40%, 22%) 50%, hsl(344, 30%, 20%) 100%);
    padding: 100px 24px 80px;
    text-align: center;
    color: #fff;
    }
    main.system-requirements .zenith::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, hsla(248, 69%, 57%, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, hsla(344, 55%, 57%, 0.1) 0%, transparent 60%);
    pointer-events: none;
    }
    main.system-requirements .realm{
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    }
    main.system-requirements .zenith h1{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.system-requirements .cairn{
    font-size: 1.1rem;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.78);
    margin: 0 0 36px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    }
    main.system-requirements .mosaic{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.system-requirements .cipher{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--sr-primary), var(--sr-accent));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.35);
    }
    main.system-requirements .cipher:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(248, 69%, 57%, 0.45);
    }
    main.system-requirements .vapor{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: hsla(0, 0%, 100%, 0.1);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid hsla(0, 0%, 100%, 0.25);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.system-requirements .vapor:hover{
    background: hsla(0, 0%, 100%, 0.18);
    }
    main.system-requirements .flux{
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 24px;
    }
    main.system-requirements .cobalt{
    text-align: center;
    margin-bottom: 56px;
    }
    main.system-requirements .cobalt h2{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--sr-text, #1a1a2e);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .cobalt p{
    font-size: 1.05rem;
    color: var(--sr-text-light, #666);
    margin: 0;
    line-height: 1.6;
    }
    main.system-requirements .quartz{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    }
    main.system-requirements .bloom{
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sr-text-light, #666);
    background: transparent;
    border: 1px solid var(--sr-border, #ddd);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    }
    main.system-requirements .bloom:hover{
    border-color: var(--sr-primary);
    color: var(--sr-primary);
    }
    main.system-requirements .bloom.aurora{
    background: var(--sr-primary);
    color: #fff;
    border-color: var(--sr-primary);
    }
    main.system-requirements .phantom{
    display: none;
    }
    main.system-requirements .phantom.aurora{
    display: block;
    }
    main.system-requirements .karma{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.system-requirements .unity{
    background: var(--sr-card-bg, #fff);
    border: 1px solid var(--sr-border, #e5e5e5);
    padding: 32px;
    position: relative;
    overflow: hidden;
    }
    main.system-requirements .unity::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    }
    main.system-requirements .unity.frost::before{
    background: var(--sr-warning);
    }
    main.system-requirements .unity.whirl::before{
    background: var(--sr-success);
    }
    main.system-requirements .ember{
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    margin-bottom: 20px;
    }
    main.system-requirements .unity.frost .ember{
    background: hsla(38, 90%, 50%, 0.12);
    color: hsl(38, 80%, 38%);
    }
    main.system-requirements .unity.whirl .ember{
    background: hsla(152, 55%, 42%, 0.12);
    color: hsl(152, 55%, 35%);
    }
    main.system-requirements .unity h3{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sr-text, #1a1a2e);
    margin: 0 0 24px;
    }
    main.system-requirements .orbit{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.system-requirements .trove{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    }
    main.system-requirements .axiom{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(248, 69%, 57%, 0.08);
    color: #ffffff;
    font-size: 1rem;
    }
    main.system-requirements .glacier{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sr-text-light, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    }
    main.system-requirements .nexus{
    font-size: 0.95rem;
    color: var(--sr-text, #1a1a2e);
    line-height: 1.5;
    }
    main.system-requirements .sr-formats-section{
    background: hsl(248, 20%, 12%);
    color: #fff;
    }
    main.system-requirements .sr-formats-section .cobalt h2{
    color: #fff;
    }
    main.system-requirements .sr-formats-section .cobalt p{
    color: hsla(0, 0%, 100%, 0.65);
    }
    main.system-requirements .sr-formats-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.system-requirements .sr-format-card{
    background: hsla(0, 0%, 100%, 0.06);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    padding: 28px;
    text-align: center;
    transition: background 0.2s;
    }
    main.system-requirements .sr-format-card:hover{
    background: hsla(0, 0%, 100%, 0.1);
    }
    main.system-requirements .sr-format-icon{
    font-size: 2rem;
    margin-bottom: 16px;
    }
    main.system-requirements .sr-format-card h3{
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
    }
    main.system-requirements .sr-format-card p{
    font-size: 0.88rem;
    color: hsla(0, 0%, 100%, 0.6);
    margin: 0;
    line-height: 1.5;
    }
    main.system-requirements .sr-format-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
    }
    main.system-requirements .sr-format-tag{
    font-size: 0.75rem;
    padding: 3px 10px;
    background: hsla(0, 0%, 100%, 0.08);
    color: hsla(0, 0%, 100%, 0.75);
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.system-requirements .sr-visual-section{
    padding: 0 24px;
    }
    main.system-requirements .sr-visual-inner{
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.system-requirements .sr-visual-text h2{
    font-size: 2rem;
    font-weight: 700;
    color: var(--sr-text, #1a1a2e);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .sr-visual-text p{
    font-size: 1.05rem;
    color: var(--sr-text-light, #666);
    line-height: 1.7;
    margin: 0 0 28px;
    }
    main.system-requirements .sr-visual-img{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--sr-border, #e5e5e5);
    }
    main.system-requirements .sr-checklist{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .sr-checklist li{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--sr-text, #1a1a2e);
    }
    main.system-requirements .sr-check-icon{
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: hsla(152, 55%, 42%, 0.12);
    color: var(--sr-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    }
    main.system-requirements .sr-faq-section{
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px;
    }
    main.system-requirements .sr-faq-section h2{
    font-size: 2rem;
    font-weight: 700;
    color: var(--sr-text, #1a1a2e);
    text-align: center;
    margin: 0 0 48px;
    }
    main.system-requirements .sr-faq-item{
    border-bottom: 1px solid var(--sr-border, #e5e5e5);
    padding: 24px 0;
    }
    main.system-requirements .sr-faq-item:first-of-type{
    border-top: 1px solid var(--sr-border, #e5e5e5);
    }
    main.system-requirements .sr-faq-q{
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sr-text, #1a1a2e);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
    font-family: inherit;
    line-height: 1.5;
    }
    main.system-requirements .sr-faq-q::after{
    content: "+";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--sr-primary);
    transition: transform 0.2s;
    }
    main.system-requirements .sr-faq-item.open .sr-faq-q::after{
    content: "−";
    }
    main.system-requirements .sr-faq-a{
    font-size: 0.95rem;
    color: var(--sr-text-light, #666);
    line-height: 1.7;
    margin: 14px 0 0;
    padding-right: 44px;
    display: none;
    }
    main.system-requirements .sr-faq-item.open .sr-faq-a{
    display: block;
    }
    main.system-requirements .sr-cta-section{
    background: linear-gradient(135deg, hsl(248, 30%, 14%) 0%, hsl(248, 40%, 22%) 50%, hsl(344, 30%, 20%) 100%);
    padding: 80px 24px;
    text-align: center;
    color: #fff;
    }
    main.system-requirements .sr-cta-inner{
    max-width: 640px;
    margin: 0 auto;
    }
    main.system-requirements .sr-cta-inner h2{
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
    }
    main.system-requirements .sr-cta-inner p{
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.72);
    margin: 0 0 32px;
    line-height: 1.6;
    }
    main.system-requirements .sr-update-note{
    text-align: center;
    padding: 40px 24px 0;
    font-size: 0.85rem;
    color: var(--sr-text-light, #999);
    }
    main.system-requirements .sr-footer{
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px;
    border-top: 1px solid var(--sr-border, #e5e5e5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.system-requirements .sr-footer-brand{
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sr-text, #1a1a2e);
    }
    main.system-requirements .sr-footer-brand span{
    color: var(--sr-primary);
    }
    main.system-requirements .sr-footer-copy{
    font-size: 0.85rem;
    color: var(--sr-text-light, #999);
    }
    main.system-requirements .sr-footer-links{
    display: flex;
    gap: 24px;
    }
    main.system-requirements .sr-footer-links a{
    font-size: 0.85rem;
    color: var(--sr-text-light, #999);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.system-requirements .sr-footer-links a:hover{
    color: var(--sr-primary);
    }
    @media (max-width: 768px) {main.system-requirements .zenith{
    padding: 72px 20px 60px;
    }
    main.system-requirements .zenith h1{
    font-size: 1.75rem;
    }
    main.system-requirements .karma{
    grid-template-columns: 1fr;
    }
    main.system-requirements .sr-formats-grid{
    grid-template-columns: 1fr;
    }
    main.system-requirements .sr-visual-inner{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.system-requirements .sr-footer{
    flex-direction: column;
    text-align: center;
    }
    main.system-requirements .cobalt h2, main.system-requirements .sr-visual-text h2, main.system-requirements .sr-faq-section h2, main.system-requirements .sr-cta-inner h2{
    font-size: 1.5rem;
    }
    main.system-requirements .quartz{
    gap: 6px;
    }
    main.system-requirements .bloom{
    padding: 8px 16px;
    font-size: 0.85rem;
    }}
    @media (max-width: 480px) {main.system-requirements .mosaic{
    flex-direction: column;
    align-items: center;
    }
    main.system-requirements .cipher, main.system-requirements .vapor{
    width: 100%;
    justify-content: center;
    }}
    main.system-requirements .lunar{
    background: hsl(248, 14%, 10%);
    color: hsl(248, 10%, 72%);
    padding: 64px 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    }
    main.system-requirements .mirth{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid hsla(248, 20%, 80%, 0.1);
    }
    main.system-requirements .jewel{
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .elbow{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.system-requirements .helix{
    margin: 0;
    color: hsl(248, 10%, 50%);
    font-size: 14px;
    }
    main.system-requirements .grove{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    gap: 64px;
    }
    main.system-requirements .nebula{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.system-requirements .inlet{
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    }
    main.system-requirements .drape{
    color: hsl(248, 10%, 58%);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    }
    main.system-requirements .drape:hover{
    color: hsl(248, 69%, 74%);
    }
    main.system-requirements .onyx{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 16px;
    }
    main.system-requirements .pulse{
    flex: 0 1 auto;
    font-size: 13px;
    color: hsl(248, 8%, 40%);
    }
    main.system-requirements .vortex{
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.system-requirements .sigma{
    color: hsl(248, 8%, 44%);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
    }
    main.system-requirements .sigma:hover{
    color: hsl(248, 69%, 74%);
    }
    main.system-requirements .prism{
    color: hsl(248, 8%, 30%);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 768px) {main.system-requirements .lunar{
    padding: 48px 20px 0;
    }
    main.system-requirements .mirth{
    flex-direction: column;
    gap: 36px;
    padding-bottom: 36px;
    }
    main.system-requirements .jewel{
    flex: 0 0 auto;
    }
    main.system-requirements .grove{
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    }
    main.system-requirements .onyx{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.install-guide meta[property="og:title"]{ display: none; }
    main.install-guide .warp{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(248, 69%, 15%) 0%, hsl(248, 60%, 28%) 50%, hsl(300, 40%, 25%) 100%);
    padding: 100px 24px 80px;
    text-align: center;
    color: #fff;
    }
    main.install-guide .warp::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/img/install-guide-overview-3.jpg") center/cover no-repeat;
    opacity: 0.1;
    }
    main.install-guide .zinc{
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    }
    main.install-guide .warp h1{
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.install-guide .whisper{
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.88;
    max-width: 640px;
    margin: 0 auto 32px;
    }
    main.install-guide .crest{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.install-guide .thorn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    }
    main.install-guide .yonder{
    background: linear-gradient(135deg, var(--ig-primary), var(--ig-secondary));
    color: #fff;
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.4);
    }
    main.install-guide .yonder:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(248, 69%, 57%, 0.5);
    }
    main.install-guide .xenon{
    background: hsla(0, 0%, 100%, 0.12);
    color: #fff;
    border: 2px solid hsla(0, 0%, 100%, 0.35);
    }
    main.install-guide .xenon:hover{
    background: hsla(0, 0%, 100%, 0.2);
    transform: translateY(-2px);
    }
    main.install-guide .ripple{
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 24px;
    }
    main.install-guide .yield{
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ig-text, #1a1a2e);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.install-guide .summit{
    font-size: 1.05rem;
    color: var(--ig-muted);
    margin: 0 0 40px;
    line-height: 1.6;
    }
    
    main.install-guide .bramble{
    background: var(--ig-bg, #f5f5f7);
    }
    main.install-guide .cascade{
    display: flex;
    gap: 4px;
    background: var(--ig-border);
    padding: 4px;
    width: fit-content;
    margin: 0 auto 40px;
    }
    main.install-guide .basalt{
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ig-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    }
    main.install-guide .basalt.drift{
    background: var(--ig-surface, #fff);
    color: var(--ig-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    main.install-guide .basalt:hover:not(.active){
    color: var(--ig-text, #1a1a2e);
    }
    main.install-guide .ivory{
    display: none;
    }
    main.install-guide .ivory.drift{
    display: block;
    }
    
    main.install-guide .kindle{
    display: flex;
    flex-direction: column;
    gap: 24px;
    }
    main.install-guide .plume{
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    background: var(--ig-surface, #fff);
    padding: 28px;
    border: 1px solid var(--ig-border);
    transition: box-shadow 0.2s;
    }
    main.install-guide .plume:hover{
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    main.install-guide .abyss{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ig-primary), hsl(268, 60%, 55%));
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    flex-shrink: 0;
    }
    main.install-guide .plume h3{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ig-text, #1a1a2e);
    margin: 0 0 8px;
    }
    main.install-guide .plume p{
    font-size: 0.95rem;
    color: var(--ig-muted);
    line-height: 1.7;
    margin: 0;
    }
    main.install-guide .plume code{
    background: var(--ig-code-bg);
    color: hsl(150, 60%, 65%);
    padding: 2px 8px;
    font-size: 0.88rem;
    font-family: "SF Mono", "Fira Code", monospace;
    }
    
    main.install-guide .jubilee{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 36px;
    }
    main.install-guide .husk{
    overflow: hidden;
    border: 1px solid var(--ig-border);
    background: var(--ig-surface, #fff);
    }
    main.install-guide .husk img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    }
    main.install-guide .husk figcaption{
    padding: 14px 18px;
    font-size: 0.88rem;
    color: var(--ig-muted);
    font-weight: 500;
    }
    
    main.install-guide .jade{
    background: var(--ig-surface, #fff);
    }
    main.install-guide .epoch{
    background: var(--ig-code-bg);
    padding: 24px 28px;
    overflow-x: auto;
    margin: 20px 0;
    border-left: 4px solid var(--ig-primary);
    }
    main.install-guide .epoch code{
    color: hsl(0, 0%, 85%);
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 0.9rem;
    line-height: 1.8;
    white-space: pre;
    }
    main.install-guide .epoch .ignite{
    color: hsl(120, 30%, 55%);
    }
    main.install-guide .epoch .latch{
    color: hsl(30, 90%, 65%);
    }
    main.install-guide .urchin{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
    }
    main.install-guide .mythos{
    padding: 24px;
    border: 1px solid var(--ig-border);
    background: var(--ig-step-bg);
    }
    main.install-guide .mythos h3{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ig-text, #1a1a2e);
    margin: 0 0 10px;
    }
    main.install-guide .mythos p{
    font-size: 0.9rem;
    color: var(--ig-muted);
    line-height: 1.65;
    margin: 0;
    }
    
    main.install-guide .lantern{
    background: var(--ig-bg, #f5f5f7);
    }
    main.install-guide .xeno{
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.install-guide .mirage{
    background: var(--ig-surface, #fff);
    border: 1px solid var(--ig-border);
    overflow: hidden;
    }
    main.install-guide .glyph{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ig-text, #1a1a2e);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    }
    main.install-guide .glyph:hover{
    background: var(--ig-step-bg);
    }
    main.install-guide .glyph::after{
    content: "+";
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ig-primary);
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.2s;
    }
    main.install-guide .mirage.quarry .glyph::after{
    content: "−";
    }
    main.install-guide .tide{
    display: none;
    padding: 0 24px 20px;
    font-size: 0.93rem;
    color: var(--ig-muted);
    line-height: 1.7;
    }
    main.install-guide .mirage.quarry .tide{
    display: block;
    }
    
    main.install-guide .alchemy{
    padding: 16px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 16px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    }
    main.install-guide .dusk{
    background: var(--ig-warning-bg);
    border-left: 4px solid var(--ig-warning-border);
    color: hsl(30, 60%, 25%);
    }
    main.install-guide .riddle{
    background: var(--ig-success-bg);
    border-left: 4px solid var(--ig-success-border);
    color: hsl(150, 40%, 20%);
    }
    main.install-guide .nomad{
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
    }
    
    main.install-guide .ig-uninstall{
    background: var(--ig-surface, #fff);
    }
    main.install-guide .ig-uninstall-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    }
    main.install-guide .ig-uninstall-card{
    padding: 28px 24px;
    border: 1px solid var(--ig-border);
    background: var(--ig-bg, #f5f5f7);
    }
    main.install-guide .ig-uninstall-card h3{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ig-text, #1a1a2e);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.install-guide .ig-uninstall-card ol{
    margin: 0;
    padding-left: 18px;
    color: var(--ig-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    }
    
    main.install-guide .ig-cta{
    background: linear-gradient(135deg, hsl(248, 69%, 20%) 0%, hsl(280, 50%, 30%) 100%);
    padding: 64px 24px;
    text-align: center;
    color: #fff;
    }
    main.install-guide .ig-cta h2{
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 14px;
    }
    main.install-guide .ig-cta p{
    font-size: 1rem;
    opacity: 0.85;
    margin: 0 0 28px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    }
    
    main.install-guide .ig-footer{
    background: hsl(248, 15%, 10%);
    color: hsla(0, 0%, 100%, 0.55);
    padding: 40px 24px;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.8;
    }
    main.install-guide .ig-footer-brand{
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    }
    main.install-guide .ig-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
    }
    main.install-guide .ig-footer-links a{
    color: hsla(0, 0%, 100%, 0.55);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
    }
    main.install-guide .ig-footer-links a:hover{
    color: #fff;
    }
    
    @media (max-width: 768px) {main.install-guide .warp{
    padding: 80px 20px 60px;
    }
    main.install-guide .warp h1{
    font-size: 1.5rem;
    }
    main.install-guide .ripple{
    padding: 48px 20px;
    }
    main.install-guide .jubilee{
    grid-template-columns: 1fr;
    }
    main.install-guide .urchin{
    grid-template-columns: 1fr;
    }
    main.install-guide .ig-uninstall-grid{
    grid-template-columns: 1fr;
    }
    main.install-guide .plume{
    grid-template-columns: 44px 1fr;
    padding: 20px;
    gap: 14px;
    }
    main.install-guide .abyss{
    width: 44px;
    height: 44px;
    font-size: 1rem;
    }
    main.install-guide .basalt{
    padding: 10px 18px;
    font-size: 0.85rem;
    }
    main.install-guide .epoch{
    padding: 16px;
    }
    main.install-guide .epoch code{
    font-size: 0.8rem;
    }}
    @media (max-width: 480px) {main.install-guide .cascade{
    width: 100%;
    }
    main.install-guide .basalt{
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    }
    main.install-guide .crest{
    flex-direction: column;
    align-items: center;
    }
    main.install-guide .thorn{
    width: 100%;
    justify-content: center;
    }}
    main.install-guide .crux{
    background: hsl(248, 14%, 10%);
    padding: 56px 24px 32px;
    border-top: 1px solid hsla(248, 20%, 40%, 0.15); color: #ffffff;}
    main.install-guide .forge{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    }
    main.install-guide .delta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.install-guide .haven{
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, hsl(248, 69%, 67%), hsl(344, 55%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.install-guide .umbra{
    font-size: 13px;
    color: hsl(248, 8%, 52%);
    margin: 0;
    letter-spacing: 0.3px;
    }
    main.install-guide .vale{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.install-guide .fable{
    font-size: 13px;
    color: hsl(248, 8%, 62%);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
    transition: var(--transition, all 0.2s ease);
    }
    main.install-guide .fable:hover{
    color: #fff;
    background: hsla(248, 40%, 50%, 0.12);
    }
    main.install-guide .vivid{
    width: 1px;
    height: 14px;
    background: hsla(248, 20%, 50%, 0.2);
    flex-shrink: 0;
    }
    main.install-guide .blaze{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid hsla(248, 20%, 40%, 0.12);
    }
    main.install-guide .quiver{
    font-size: 12px;
    color: hsl(248, 6%, 42%);
    margin: 0;
    flex: 1;
    }
    main.install-guide .shard{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    }
    main.install-guide .opal{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 4px);
    color: hsl(248, 8%, 52%);
    background: hsla(248, 20%, 50%, 0.08);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    }
    main.install-guide .opal:hover{
    color: #fff;
    background: hsla(248, 40%, 50%, 0.18);
    }
    @media (max-width: 640px) {main.install-guide .crux{
    padding: 40px 16px 24px;
    }
    main.install-guide .forge{
    gap: 24px;
    }
    main.install-guide .vale{
    gap: 6px;
    }
    main.install-guide .fable{
    font-size: 12px;
    padding: 4px 6px;
    }
    main.install-guide .blaze{
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    }
    main.install-guide .quiver{
    flex: none;
    }
    main.install-guide .shard{
    flex-shrink: 1;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.getting-started *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.getting-started .hollow{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(248, 30%, 14%) 0%, hsl(248, 40%, 22%) 50%, hsl(344, 30%, 25%) 100%);
    padding: 100px 24px 80px;
    text-align: center;
    color: #fff;
    }
    main.getting-started .hollow::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, hsla(248, 69%, 57%, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, hsla(344, 55%, 57%, 0.1) 0%, transparent 40%);
    pointer-events: none;
    }
    main.getting-started .zenith{
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    }
    main.getting-started .cedar{
    display: inline-block;
    padding: 6px 18px;
    background: hsla(248, 69%, 57%, 0.25);
    border: 1px solid hsla(248, 69%, 57%, 0.4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 28px;
    color: hsl(248, 80%, 80%);
    }
    main.getting-started .hollow h1{
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.getting-started .hollow h1 span{
    background: linear-gradient(135deg, hsl(248, 80%, 75%), hsl(344, 70%, 72%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.getting-started .aurora{
    font-size: 17px;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.72);
    max-width: 580px;
    margin: 0 auto 36px;
    }
    main.getting-started .grove{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.getting-started .dusk{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--gs-primary, hsl(248, 69%, 57%));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.35);
    }
    main.getting-started .dusk:hover{
    background: var(--gs-primary-dark, hsl(248, 69%, 47%));
    transform: translateY(-1px);
    }
    main.getting-started .ember{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: hsla(255, 255, 255, 0.08);
    border: 1px solid hsla(0, 0%, 100%, 0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    }
    main.getting-started .ember:hover{
    background: hsla(0, 0%, 100%, 0.12);
    border-color: hsla(0, 0%, 100%, 0.35);
    }
    main.getting-started .ivory{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.getting-started .nectar{
    text-align: center;
    margin-bottom: 56px;
    }
    main.getting-started .nectar h2{
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 800;
    color: var(--gs-text, hsl(248, 10%, 8%));
    letter-spacing: -0.3px;
    margin-bottom: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    main.getting-started .nectar p{
    font-size: 16px;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
    }
    
    main.getting-started .delta{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    }
    main.getting-started .nimbus{
    background: var(--gs-bg-card, #fff);
    border: 1px solid var(--gs-border, hsl(248, 10%, 88%));
    padding: 36px 28px;
    position: relative;
    transition: box-shadow 0.25s, transform 0.2s;
    }
    main.getting-started .nimbus:hover{
    box-shadow: 0 12px 40px hsla(248, 30%, 20%, 0.08);
    transform: translateY(-3px);
    }
    main.getting-started .flint{
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gs-step-size);
    height: var(--gs-step-size);
    background: linear-gradient(135deg, var(--gs-primary), var(--gs-secondary));
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 22px;
    }
    main.getting-started .nimbus h3{
    font-size: 19px;
    font-weight: 700;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 10px;
    }
    main.getting-started .nimbus p{
    font-size: 14px;
    line-height: 1.7;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    }
    main.getting-started .nimbus a{
    color: var(--gs-primary, hsl(248, 69%, 57%));
    text-decoration: none;
    font-weight: 600;
    }
    main.getting-started .nimbus a:hover{
    text-decoration: underline;
    }
    
    main.getting-started .sapphire{
    background: var(--gs-bg, hsl(248, 6%, 97%));
    padding: 80px 24px;
    }
    main.getting-started .marble{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.getting-started .falcon{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.getting-started .knot{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--gs-border, hsl(248, 10%, 88%));
    box-shadow: 0 8px 32px hsla(248, 30%, 20%, 0.08);
    }
    main.getting-started .haze h2{
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 18px;
    letter-spacing: -0.3px;
    }
    main.getting-started .haze > p{
    font-size: 15px;
    line-height: 1.7;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    margin-bottom: 28px;
    }
    main.getting-started .prism{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.getting-started .prism li{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    }
    main.getting-started .glacier{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: hsla(248, 69%, 57%, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    }
    main.getting-started .prism li div h4{
    font-size: 15px;
    font-weight: 700;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 3px;
    }
    main.getting-started .prism li div p{
    font-size: 13px;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    line-height: 1.6;
    }
    
    main.getting-started .jade{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.getting-started .cobalt{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    }
    main.getting-started .pulse{
    background: var(--gs-bg-card, #fff);
    border: 1px solid var(--gs-border, hsl(248, 10%, 88%));
    padding: 32px;
    }
    main.getting-started .pulse h3{
    font-size: 17px;
    font-weight: 700;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gs-primary, hsl(248, 69%, 57%));
    }
    main.getting-started .bloom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid hsl(248, 6%, 93%);
    }
    main.getting-started .bloom:last-child{
    border-bottom: none;
    }
    main.getting-started .lumen{
    font-size: 14px;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    }
    main.getting-started .opal{
    display: inline-flex;
    gap: 6px;
    }
    main.getting-started .opal kbd{
    display: inline-block;
    padding: 4px 10px;
    background: hsl(248, 6%, 95%);
    border: 1px solid hsl(248, 8%, 85%);
    font-family: "SF Mono", "Consolas", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--gs-text, hsl(248, 10%, 8%));
    line-height: 1.4;
    }
    
    main.getting-started .gs-tutorials{
    background: var(--gs-bg, hsl(248, 6%, 97%));
    padding: 80px 24px;
    }
    main.getting-started .gs-tutorials-inner{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.getting-started .gs-tutorial-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    }
    main.getting-started .gs-tutorial-card{
    background: var(--gs-bg-card, #fff);
    border: 1px solid var(--gs-border, hsl(248, 10%, 88%));
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.2s;
    }
    main.getting-started .gs-tutorial-card:hover{
    box-shadow: 0 12px 40px hsla(248, 30%, 20%, 0.08);
    transform: translateY(-3px);
    }
    main.getting-started .gs-tutorial-img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    }
    main.getting-started .gs-tutorial-body{
    padding: 24px;
    }
    main.getting-started .gs-tutorial-tag{
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    }
    main.getting-started .gs-tag-doc{
    background: hsla(248, 69%, 57%, 0.1);
    color: #ffffff;
    }
    main.getting-started .gs-tag-sheet{
    background: hsla(160, 60%, 45%, 0.1);
    color: hsl(160, 60%, 35%);
    }
    main.getting-started .gs-tag-slide{
    background: hsla(344, 55%, 57%, 0.1);
    color: var(--gs-secondary, hsl(344, 55%, 57%));
    }
    main.getting-started .gs-tutorial-body h3{
    font-size: 17px;
    font-weight: 700;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 8px;
    line-height: 1.4;
    }
    main.getting-started .gs-tutorial-body p{
    font-size: 13px;
    line-height: 1.7;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    margin-bottom: 16px;
    }
    main.getting-started .gs-tutorial-link{
    font-size: 13px;
    font-weight: 700;
    color: var(--gs-primary, hsl(248, 69%, 57%));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
    }
    main.getting-started .gs-tutorial-link:hover{
    gap: 10px;
    }
    
    main.getting-started .gs-formats{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.getting-started .gs-format-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.getting-started .gs-format-card{
    background: var(--gs-bg-card, #fff);
    border: 1px solid var(--gs-border, hsl(248, 10%, 88%));
    padding: 28px 20px;
    text-align: center;
    transition: box-shadow 0.25s;
    }
    main.getting-started .gs-format-card:hover{
    box-shadow: 0 8px 28px hsla(248, 30%, 20%, 0.07);
    }
    main.getting-started .gs-format-ext{
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--gs-primary), var(--gs-secondary));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-family: "SF Mono", "Consolas", monospace;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    }
    main.getting-started .gs-format-card h4{
    font-size: 14px;
    font-weight: 700;
    color: var(--gs-text, hsl(248, 10%, 8%));
    margin-bottom: 6px;
    }
    main.getting-started .gs-format-card p{
    font-size: 12px;
    color: var(--gs-text-muted, hsl(248, 8%, 40%));
    line-height: 1.6;
    }
    
    main.getting-started .gs-cta{
    background: linear-gradient(135deg, hsl(248, 30%, 14%) 0%, hsl(248, 40%, 22%) 50%, hsl(344, 30%, 25%) 100%);
    padding: 72px 24px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    }
    main.getting-started .gs-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, hsla(248, 69%, 57%, 0.12) 0%, transparent 60%);
    pointer-events: none; color: #ffffff;}
    main.getting-started .gs-cta-inner{
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    }
    main.getting-started .gs-cta h2{
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -0.3px;
    }
    main.getting-started .gs-cta p{
    font-size: 16px;
    color: hsla(0, 0%, 100%, 0.7);
    line-height: 1.7;
    margin-bottom: 32px;
    }
    main.getting-started .gs-cta .dusk{
    padding: 16px 40px;
    font-size: 16px;
    background: linear-gradient(135deg, var(--gs-primary), var(--gs-secondary));
    box-shadow: 0 6px 24px hsla(248, 69%, 57%, 0.4);
    }
    main.getting-started .gs-cta .dusk:hover{
    box-shadow: 0 8px 32px hsla(248, 69%, 57%, 0.5);
    transform: translateY(-2px);
    }
    
    main.getting-started .gs-footer{
    background: var(--gs-bg-dark, hsl(248, 20%, 12%));
    color: hsla(0, 0%, 100%, 0.5);
    padding: 48px 24px;
    }
    main.getting-started .gs-footer-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.getting-started .gs-footer-brand{
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    }
    main.getting-started .gs-footer-brand span{
    color: var(--gs-primary, hsl(248, 69%, 57%));
    }
    main.getting-started .gs-footer-links{
    display: flex;
    gap: 28px;
    list-style: none;
    }
    main.getting-started .gs-footer-links a{
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    }
    main.getting-started .gs-footer-links a:hover{
    color: #fff;
    }
    main.getting-started .gs-footer-copy{
    font-size: 13px;
    width: 100%;
    text-align: center;
    padding-top: 28px;
    margin-top: 8px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    
    @media (max-width: 900px) {main.getting-started .delta, main.getting-started .gs-tutorial-grid{
    grid-template-columns: 1fr 1fr;
    }
    main.getting-started .falcon{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.getting-started .cobalt{
    grid-template-columns: 1fr;
    }
    main.getting-started .gs-format-grid{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 600px) {main.getting-started .delta, main.getting-started .gs-tutorial-grid{
    grid-template-columns: 1fr;
    }
    main.getting-started .hollow{
    padding: 72px 20px 56px;
    }
    main.getting-started .ivory, main.getting-started .jade{
    padding: 56px 20px;
    }
    main.getting-started .sapphire, main.getting-started .gs-tutorials{
    padding: 56px 20px;
    }
    main.getting-started .gs-format-grid{
    grid-template-columns: 1fr 1fr;
    }
    main.getting-started .gs-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.getting-started .gs-footer-links{
    justify-content: center;
    }}
    main.getting-started .grain{
    background: hsl(248, 14%, 10%);
    color: hsl(248, 10%, 78%);
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    }
    main.getting-started .marsh{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 64px 32px 40px;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    }
    main.getting-started .timber{
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.getting-started .vortex{
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.getting-started .basalt{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    }
    main.getting-started .vapor{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.getting-started .crest{
    color: hsl(248, 8%, 52%);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    }
    main.getting-started .mosaic{
    display: flex;
    gap: 8px;
    margin-top: 4px;
    }
    main.getting-started .quartz{
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 4px);
    background: hsla(248, 20%, 100%, 0.06);
    color: hsl(248, 8%, 56%);
    transition: var(--transition, all 0.2s ease);
    text-decoration: none;
    }
    main.getting-started .quartz:hover{
    background: hsla(248, 20%, 100%, 0.12);
    color: #fff;
    }
    main.getting-started .onyx{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    }
    main.getting-started .ridgeline{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.getting-started .elm{
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    }
    main.getting-started .tundra{
    color: hsl(248, 8%, 52%);
    text-decoration: none;
    font-size: 13px;
    transition: var(--transition, all 0.2s ease);
    line-height: 1.5;
    }
    main.getting-started .tundra:hover{
    color: #fff;
    }
    main.getting-started .wren{
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.getting-started .summit{
    color: hsl(248, 8%, 52%);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    }
    main.getting-started .loom{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--primary-color, hsl(248, 69%, 57%)), var(--secondary-color, hsl(344, 55%, 57%)));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.35);
    width: fit-content;
    }
    main.getting-started .loom:hover{
    box-shadow: 0 6px 24px hsla(248, 69%, 40%, 0.5);
    transform: translateY(-1px);
    }
    main.getting-started .umbra{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 0 32px;
    height: 1px;
    background: hsla(248, 20%, 100%, 0.08);
    }
    main.getting-started .axiom{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 24px 32px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    }
    main.getting-started .velvet{
    font-size: 12px;
    color: hsl(248, 8%, 40%);
    flex: 0 0 auto;
    }
    main.getting-started .crimson{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    }
    main.getting-started .phantom{
    font-size: 12px;
    color: hsl(248, 8%, 44%);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    }
    main.getting-started .phantom:hover{
    color: #fff;
    }
    main.getting-started .kelp{
    font-size: 12px;
    color: hsl(248, 8%, 30%);
    }
    @media (max-width: 900px) {main.getting-started .marsh{
    flex-wrap: wrap;
    gap: 32px;
    padding: 48px 24px 32px;
    }
    main.getting-started .timber{
    flex: 0 0 100%;
    }
    main.getting-started .ridgeline{
    flex: 1 1 140px;
    }
    main.getting-started .wren{
    flex: 0 0 100%;
    }
    main.getting-started .axiom{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 12px;
    }
    main.getting-started .umbra{
    padding: 0 24px;
    }}
    @media (max-width: 540px) {main.getting-started .marsh{
    padding: 40px 20px 28px;
    gap: 28px;
    }
    main.getting-started .ridgeline{
    flex: 0 0 calc(50% - 14px);
    }
    main.getting-started .wren{
    flex: 0 0 100%;
    }
    main.getting-started .loom{
    width: 100%;
    }
    main.getting-started .axiom{
    padding: 18px 20px 24px;
    }
    main.getting-started .umbra{
    padding: 0 20px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.changelog .phantom{
    position: relative;
    overflow: hidden;
    padding: 100px 24px 80px;
    background: hsl(248, 10%, 8%);
    color: hsl(0, 0%, 100%);
    text-align: center;
    }
    main.changelog .phantom::before{
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse, hsla(248, 69%, 57%, 0.18) 0%, transparent 70%);
    pointer-events: none; color: #ffffff;}
    main.changelog .phantom::after{
    content: "";
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, hsla(344, 55%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.changelog .xeno{
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    }
    main.changelog .nebula{
    display: inline-block;
    padding: 6px 18px;
    margin-bottom: 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(248, 69%, 72%);
    border: 1px solid hsla(248, 69%, 57%, 0.35);
    background: hsla(248, 69%, 57%, 0.1);
    }
    main.changelog .phantom h1{
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.changelog .phantom h1 span{
    background: linear-gradient(135deg, hsl(248, 69%, 67%), hsl(344, 55%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.changelog .yarn{
    font-size: 1.1rem;
    line-height: 1.7;
    color: hsl(248, 6%, 68%);
    margin: 0 0 36px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    }
    main.changelog .glacier{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.changelog .ignite{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, hsl(248, 69%, 57%), hsl(280, 60%, 52%));
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px hsla(248, 69%, 57%, 0.35);
    }
    main.changelog .ignite:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px hsla(248, 69%, 57%, 0.45);
    }
    main.changelog .nexus{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
    background: hsla(248, 10%, 100%, 0.08);
    border: 1px solid hsla(248, 10%, 100%, 0.15);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.changelog .nexus:hover{
    background: hsla(248, 10%, 100%, 0.14);
    }
    main.changelog .alcove{
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 56px;
    flex-wrap: wrap;
    }
    main.changelog .prism{
    text-align: center;
    }
    main.changelog .inlet{
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.changelog .fable{
    font-size: 13px;
    color: hsl(248, 6%, 55%);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    }
    main.changelog .karma{
    padding: 80px 24px;
    background: var(--bg-color, hsl(248, 6%, 97%));
    }
    main.changelog .mosaic{
    max-width: 860px;
    margin: 0 auto;
    }
    main.changelog .quiver{
    text-align: center;
    margin-bottom: 56px;
    }
    main.changelog .quiver h2{
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-color, hsl(248, 10%, 8%));
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    }
    main.changelog .quiver p{
    font-size: 1.05rem;
    color: hsl(248, 6%, 45%);
    margin: 0;
    line-height: 1.6;
    }
    main.changelog .helix{
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 48px;
    flex-wrap: wrap;
    }
    main.changelog .forge{
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid hsl(248, 10%, 85%);
    background: #fff;
    color: hsl(248, 10%, 40%);
    cursor: pointer;
    transition: all 0.2s;
    }
    main.changelog .forge:hover{
    border-color: hsl(248, 69%, 57%);
    color: hsl(248, 69%, 57%);
    }
    main.changelog .forge.drift{
    background: hsl(248, 69%, 57%);
    border-color: hsl(248, 69%, 57%);
    color: #fff;
    }
    main.changelog .cipher{
    position: relative;
    padding-left: 36px;
    margin-bottom: 56px;
    }
    main.changelog .cipher::before{
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: -56px;
    width: 2px;
    background: hsl(248, 10%, 88%);
    }
    main.changelog .cipher:last-child::before{
    display: none;
    }
    main.changelog .briar{
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border: 3px solid hsl(248, 69%, 57%);
    background: #fff;
    box-sizing: border-box;
    }
    main.changelog .cipher.glyph .briar{
    background: hsl(248, 69%, 57%);
    box-shadow: 0 0 0 4px hsla(248, 69%, 57%, 0.2); color: #ffffff;}
    main.changelog .kite{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    }
    main.changelog .etch{
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-color, hsl(248, 10%, 8%));
    letter-spacing: -0.01em;
    }
    main.changelog .sable{
    font-size: 13px;
    color: hsl(248, 6%, 50%);
    font-weight: 500;
    }
    main.changelog .vivid{
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    }
    main.changelog .nova{
    background: hsl(248, 69%, 57%);
    color: #fff;
    }
    main.changelog .cobalt{
    background: hsl(344, 55%, 57%);
    color: #fff;
    }
    main.changelog .oxide{
    background: hsl(152, 50%, 45%);
    color: #fff;
    }
    main.changelog .urchin{
    background: #fff;
    border: 1px solid hsl(248, 10%, 90%);
    padding: 28px 32px;
    box-shadow: 0 2px 12px hsla(248, 10%, 8%, 0.04);
    }
    main.changelog .lattice{
    margin-bottom: 20px;
    }
    main.changelog .lattice:last-child{
    margin-bottom: 0;
    }
    main.changelog .axiom{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    }
    main.changelog .axiom.wander{
    color: hsl(248, 69%, 57%);
    }
    main.changelog .axiom.orbit{
    color: hsl(36, 80%, 48%);
    }
    main.changelog .axiom.zenith{
    color: hsl(152, 50%, 40%);
    }
    main.changelog .axiom.epoch{
    color: hsl(344, 55%, 52%);
    }
    main.changelog .axiom svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    }
    main.changelog .totem{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.changelog .totem li{
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: hsl(248, 6%, 30%);
    }
    main.changelog .totem li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    background: hsl(248, 10%, 78%);
    }
    main.changelog .totem li strong{
    color: var(--text-color, hsl(248, 10%, 8%));
    font-weight: 600;
    }
    main.changelog .cl-banner-section{
    padding: 0 24px;
    margin-bottom: 80px;
    }
    main.changelog .cl-banner{
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    }
    main.changelog .cl-banner img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    }
    main.changelog .cl-banner-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(248, 69%, 20%, 0.88), hsla(344, 55%, 25%, 0.78));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    text-align: center; color: #ffffff;}
    main.changelog .cl-banner-overlay h2{
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.changelog .cl-banner-overlay p{
    font-size: 1rem;
    color: hsla(0, 0%, 100%, 0.8);
    margin: 0 0 28px;
    max-width: 480px;
    line-height: 1.6;
    }
    main.changelog .cl-subscribe-section{
    padding: 80px 24px;
    background: hsl(248, 10%, 8%);
    text-align: center; color: #ffffff;}
    main.changelog .cl-subscribe-inner{
    max-width: 560px;
    margin: 0 auto;
    }
    main.changelog .cl-subscribe-inner h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    }
    main.changelog .cl-subscribe-inner p{
    font-size: 1rem;
    color: hsl(248, 6%, 58%);
    margin: 0 0 32px;
    line-height: 1.6;
    }
    main.changelog .cl-subscribe-form{
    display: flex;
    gap: 0;
    max-width: 440px;
    margin: 0 auto;
    }
    main.changelog .cl-subscribe-form input{
    flex: 1;
    padding: 14px 18px;
    font-size: 14px;
    border: 1px solid hsla(248, 10%, 100%, 0.15);
    background: hsla(248, 10%, 100%, 0.06);
    color: #fff;
    outline: none;
    min-width: 0;
    }
    main.changelog .cl-subscribe-form input::placeholder{
    color: hsl(248, 6%, 50%);
    }
    main.changelog .cl-subscribe-form button{
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, hsl(248, 69%, 57%), hsl(344, 55%, 57%));
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    }
    main.changelog .cl-subscribe-form button:hover{
    opacity: 0.9;
    }
    main.changelog .cl-links-section{
    padding: 48px 24px;
    background: var(--bg-color, hsl(248, 6%, 97%));
    }
    main.changelog .cl-links-inner{
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    }
    main.changelog .cl-link-card{
    flex: 1;
    min-width: 240px;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid hsl(248, 10%, 90%);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    }
    main.changelog .cl-link-card:hover{
    border-color: hsl(248, 69%, 57%);
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.1);
    }
    main.changelog .cl-link-card-title{
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color, hsl(248, 10%, 8%));
    }
    main.changelog .cl-link-card-desc{
    font-size: 13px;
    color: hsl(248, 6%, 50%);
    line-height: 1.5;
    }
    main.changelog .cl-link-card-arrow{
    font-size: 13px;
    font-weight: 600;
    color: hsl(248, 69%, 57%);
    margin-top: auto;
    }
    main.changelog .cl-footer{
    padding: 48px 24px;
    background: hsl(248, 10%, 6%);
    text-align: center; color: #ffffff;}
    main.changelog .cl-footer-inner{
    max-width: 860px;
    margin: 0 auto;
    }
    main.changelog .cl-footer-brand{
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    }
    main.changelog .cl-footer-slogan{
    font-size: 13px;
    color: hsl(248, 6%, 45%);
    margin-bottom: 24px;
    line-height: 1.5;
    }
    main.changelog .cl-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
    }
    main.changelog .cl-footer-links a{
    font-size: 13px;
    color: hsl(248, 6%, 55%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.changelog .cl-footer-links a:hover{
    color: hsl(248, 69%, 67%);
    }
    main.changelog .cl-footer-copy{
    font-size: 12px;
    color: hsl(248, 6%, 35%);
    border-top: 1px solid hsla(248, 10%, 100%, 0.08);
    padding-top: 24px;
    }
    @media (max-width: 640px) {main.changelog .phantom{
    padding: 72px 20px 56px;
    }
    main.changelog .alcove{
    gap: 28px;
    }
    main.changelog .urchin{
    padding: 20px;
    }
    main.changelog .cl-subscribe-form{
    flex-direction: column;
    }
    main.changelog .cl-subscribe-form input, main.changelog .cl-subscribe-form button{
    width: 100%;
    }
    main.changelog .cl-banner img{
    height: 240px;
    }
    main.changelog .cl-links-inner{
    flex-direction: column;
    }}
    main.changelog .quartz{
    background: hsl(248, 12%, 10%);
    padding: 56px 24px 40px;
    margin-top: 120px;
    position: relative; color: #ffffff;}
    main.changelog .pebble{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    }
    main.changelog .shard{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid hsla(248, 20%, 80%, 0.1);
    }
    main.changelog .dune{
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    }
    main.changelog .flux{
    flex: 0 0 32px;
    display: block;
    }
    main.changelog .lantern{
    font-size: 18px;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.95);
    letter-spacing: -0.02em;
    font-family: system-ui, -apple-system, sans-serif;
    }
    main.changelog .onyx{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    }
    main.changelog .vortex{
    color: hsla(0, 0%, 100%, 0.55);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 8px;
    transition: color 0.2s ease;
    font-family: system-ui, -apple-system, sans-serif;
    }
    main.changelog .vortex:hover{
    color: hsla(0, 0%, 100%, 0.95);
    }
    main.changelog .jovial{
    width: 1px;
    height: 14px;
    background: hsla(248, 20%, 80%, 0.15);
    flex: 0 0 1px;
    }
    main.changelog .mirth{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.changelog .ember{
    color: hsla(0, 0%, 100%, 0.35);
    font-size: 13px;
    margin: 0;
    flex: 1 1 auto;
    font-family: system-ui, -apple-system, sans-serif;
    }
    main.changelog .plume{
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    }
    main.changelog .monolith{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: hsla(0, 0%, 100%, 0.4);
    transition: color 0.2s ease, background 0.2s ease;
    text-decoration: none;
    }
    main.changelog .monolith:hover{
    color: hsla(0, 0%, 100%, 0.9);
    background: hsla(248, 20%, 80%, 0.08);
    }
    @media (max-width: 640px) {main.changelog .quartz{
    padding: 40px 16px 32px;
    margin-top: 80px;
    }
    main.changelog .shard{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 28px;
    }
    main.changelog .onyx{
    gap: 4px;
    }
    main.changelog .mirth{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    }
    
    .blotch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    }
    .halcyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .dawnLit {
    flex-shrink: 0;
    }
    .kv9 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .cragTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    }
    .quilted {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .nectarVine {
    display: flex;
    }
    .quasar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .quasar:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    
    .vortex3 {
    flex-shrink: 0;
    }
    .crumble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transition: var(--transition);
    white-space: nowrap;
    }
    .crumble:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%));
    box-shadow: 0 4px 16px hsla(248, 69%, 40%, 0.45), inset 0 1px 0 hsla(0, 0%, 100%, 0.15);
    transform: translateY(-1px); color: #ffffff;}
    .crumble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px hsla(248, 69%, 40%, 0.3);
    }
    .obsidian {
    flex-shrink: 0;
    }
    
    .rune {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    }
    .jotForm {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: var(--transition);
    }
    
    .kelpie {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    }
    .kelpie.is-open {
    pointer-events: auto;
    }
    .lumina {
    position: absolute;
    inset: 0;
    background: hsla(248, 20%, 6%, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease; color: #ffffff;}
    .kelpie.is-open .lumina {
    opacity: 1;
    }
    .zephyr {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    }
    .kelpie.is-open .zephyr {
    transform: translateX(0);
    }
    .ember_silk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .prismArc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .prismArc:hover {
    color: var(--text-color);
    }
    .pixDuo {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
    }
    .smelt {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .smelt:hover {
    color: var(--text-color);
    background: var(--border-color);
    }
    .moxie5 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    }
    .fog_ray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-color), hsl(280, 60%, 52%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(248, 69%, 40%, 0.35);
    transition: var(--transition);
    }
    .fog_ray:hover {
    background: linear-gradient(135deg, hsl(248, 69%, 50%), hsl(280, 60%, 45%)); color: #ffffff;}
    
    @media (max-width: 960px) {.juniper {
    display: none;
    }
    .vortex3 {
    display: none;
    }
    .rune {
    display: flex;
    }
    .kelpie {
    display: block;
    }}
    @media (max-width: 480px) {.halcyon {
    padding: 0 16px;
    }}
    .quasar.active {color: var(--text-color); background: var(--border-color);}
    .smelt.active {color: var(--text-color); background: var(--border-color);}
    main.faq .crest{
    position: relative;
    overflow: hidden;
    padding: 100px 24px 80px;
    background: hsl(248, 10%, 8%);
    text-align: center; color: #ffffff;}
    main.faq .crest::before{
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse, hsla(248, 69%, 57%, 0.15) 0%, transparent 70%);
    pointer-events: none; color: #ffffff;}
    main.faq .crest::after{
    content: "";
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, hsla(344, 55%, 57%, 0.1) 0%, transparent 70%);
    pointer-events: none;
    }
    main.faq .crest h1{
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    max-width: 720px;
    margin: 0 auto 20px;
    letter-spacing: -0.02em;
    }
    main.faq .crest h1 span{
    background: linear-gradient(135deg, hsl(248, 69%, 67%), hsl(344, 55%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.faq .torque{
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.6);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.7;
    }
    main.faq .thorn{
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    }
    main.faq .thorn input{
    width: 100%;
    padding: 16px 56px 16px 24px;
    border: 1px solid hsla(248, 69%, 57%, 0.3);
    border-radius: 0;
    background: hsla(0, 0%, 100%, 0.06);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
    box-sizing: border-box;
    }
    main.faq .thorn input::placeholder{
    color: hsla(0, 0%, 100%, 0.35);
    }
    main.faq .thorn input:focus{
    border-color: hsl(248, 69%, 57%);
    background: hsla(0, 0%, 100%, 0.09);
    }
    main.faq .umbra{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: hsla(0, 0%, 100%, 0.4);
    pointer-events: none;
    }
    main.faq .spark{
    padding: 72px 24px;
    background: var(--bg-color, hsl(248, 6%, 97%));
    }
    main.faq .pulse{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.faq .spark h2{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color, hsl(248, 10%, 8%));
    text-align: center;
    margin: 0 0 48px;
    letter-spacing: -0.01em;
    }
    main.faq .knot{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.faq .delta{
    background: #fff;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid hsl(248, 6%, 90%);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
    cursor: pointer;
    }
    main.faq .delta:hover{
    border-color: hsl(248, 69%, 57%);
    box-shadow: 0 8px 32px hsla(248, 69%, 57%, 0.1);
    transform: translateY(-2px);
    }
    main.faq .nimbus{
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(248, 69%, 57%, 0.08);
    color: #ffffff;
    }
    main.faq .delta:nth-child(2) .nimbus{
    background: hsla(344, 55%, 57%, 0.08);
    color: hsl(344, 55%, 57%);
    }
    main.faq .delta:nth-child(3) .nimbus{
    background: hsla(28, 80%, 52%, 0.08);
    color: hsl(28, 80%, 52%);
    }
    main.faq .delta:nth-child(4) .nimbus{
    background: hsla(160, 55%, 42%, 0.08);
    color: hsl(160, 55%, 42%);
    }
    main.faq .delta h3{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color, hsl(248, 10%, 8%));
    margin: 0 0 8px;
    }
    main.faq .delta p{
    font-size: 0.88rem;
    color: hsl(248, 6%, 50%);
    line-height: 1.6;
    margin: 0;
    }
    main.faq .husk{
    padding: 72px 24px 80px;
    background: #fff;
    }
    main.faq .basalt{
    max-width: 820px;
    margin: 0 auto;
    }
    main.faq .riddle{
    margin-bottom: 56px;
    }
    main.faq .riddle:last-child{
    margin-bottom: 0;
    }
    main.faq .vertex{
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(248, 10%, 8%));
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid hsl(248, 69%, 57%);
    display: inline-block;
    }
    main.faq .quest{
    border-bottom: 1px solid hsl(248, 6%, 92%);
    }
    main.faq .quest:last-child{
    border-bottom: none;
    }
    main.faq .myth{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    font-family: inherit;
    }
    main.faq .latch{
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-color, hsl(248, 10%, 8%));
    line-height: 1.5;
    }
    main.faq .myth:hover .latch{
    color: hsl(248, 69%, 57%);
    }
    main.faq .slate{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: hsl(248, 6%, 60%);
    transition: transform 0.3s ease, color 0.25s;
    }
    main.faq .quest.active .slate{
    transform: rotate(180deg);
    color: hsl(248, 69%, 57%);
    }
    main.faq .wren{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    }
    main.faq .quest.active .wren{
    max-height: 600px;
    padding-bottom: 20px;
    }
    main.faq .fathom{
    font-size: 0.95rem;
    color: hsl(248, 6%, 38%);
    line-height: 1.8;
    padding-left: 0;
    }
    main.faq .fathom ol, main.faq .fathom ul{
    margin: 10px 0;
    padding-left: 20px;
    }
    main.faq .fathom li{
    margin-bottom: 6px;
    }
    main.faq .fathom a{
    color: hsl(248, 69%, 57%);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.faq .fathom a:hover{
    border-bottom-color: hsl(248, 69%, 57%);
    }
    main.faq .fathom code{
    background: hsl(248, 6%, 95%);
    padding: 2px 7px;
    font-size: 0.88em;
    color: hsl(344, 55%, 47%);
    }
    main.faq .faq-visual-section{
    padding: 64px 24px;
    background: var(--bg-color, hsl(248, 6%, 97%));
    }
    main.faq .faq-visual-inner{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.faq .faq-visual-img img{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid hsl(248, 6%, 90%);
    }
    main.faq .faq-visual-text h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color, hsl(248, 10%, 8%));
    margin: 0 0 16px;
    }
    main.faq .faq-visual-text p{
    font-size: 0.95rem;
    color: hsl(248, 6%, 42%);
    line-height: 1.8;
    margin: 0 0 28px;
    }
    main.faq .faq-visual-text .faq-cta-btn{
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, hsl(248, 69%, 57%), hsl(280, 60%, 55%));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.25s, transform 0.2s;
    box-shadow: 0 4px 20px hsla(248, 69%, 57%, 0.3);
    }
    main.faq .faq-visual-text .faq-cta-btn:hover{
    opacity: 0.9;
    transform: translateY(-1px);
    }
    main.faq .faq-contact-section{
    padding: 80px 24px;
    background: hsl(248, 10%, 8%);
    text-align: center; color: #ffffff;}
    main.faq .faq-contact-inner{
    max-width: 640px;
    margin: 0 auto;
    }
    main.faq .faq-contact-inner h2{
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    }
    main.faq .faq-contact-inner p{
    font-size: 1rem;
    color: hsla(0, 0%, 100%, 0.55);
    line-height: 1.7;
    margin: 0 0 36px;
    }
    main.faq .faq-contact-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.faq .faq-contact-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    }
    main.faq .faq-contact-btn.primary{
    background: hsl(344, 55%, 57%);
    color: #fff;
    box-shadow: 0 4px 20px hsla(344, 55%, 57%, 0.3);
    }
    main.faq .faq-contact-btn.primary:hover{
    background: hsl(344, 55%, 50%);
    transform: translateY(-1px);
    }
    main.faq .faq-contact-btn.secondary{
    background: hsla(0, 0%, 100%, 0.08);
    color: #fff;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    }
    main.faq .faq-contact-btn.secondary:hover{
    background: hsla(0, 0%, 100%, 0.14);
    }
    main.faq .faq-update-note{
    margin-top: 48px;
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.3);
    }
    main.faq .sigil{
    padding: 40px 24px;
    background: hsl(248, 12%, 6%);
    text-align: center;
    border-top: 1px solid hsla(0, 0%, 100%, 0.06); color: #ffffff;}
    main.faq .flint{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.faq .brink{
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    }
    main.faq .faq-footer-slogan{
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 0 0 20px;
    }
    main.faq .faq-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
    }
    main.faq .faq-footer-links a{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.faq .faq-footer-links a:hover{
    color: #fff;
    }
    main.faq .faq-footer-copy{
    font-size: 0.8rem;
    color: hsla(0, 0%, 100%, 0.25);
    margin: 0;
    }
    @media (max-width: 900px) {main.faq .knot{
    grid-template-columns: repeat(2, 1fr);
    }
    main.faq .faq-visual-inner{
    grid-template-columns: 1fr;
    gap: 32px;
    }}
    @media (max-width: 600px) {main.faq .crest{
    padding: 72px 20px 56px;
    }
    main.faq .knot{
    grid-template-columns: 1fr;
    }
    main.faq .husk{
    padding: 48px 20px 56px;
    }
    main.faq .faq-contact-actions{
    flex-direction: column;
    align-items: center;
    }}
    main.faq .sigil{
    background: hsl(248, 12%, 10%);
    padding: 64px 24px 32px;
    color: hsl(248, 10%, 72%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.faq .flint{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.faq .alloy{
    display: flex;
    justify-content: space-between;
    gap: 48px;
    }
    main.faq .brink{
    flex: 0 0 280px;
    }
    main.faq .aurora{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 14px;
    background: linear-gradient(135deg, hsl(248, 69%, 67%), hsl(344, 55%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.faq .grain{
    font-size: 14px;
    line-height: 1.7;
    color: hsl(248, 8%, 50%);
    margin: 0;
    }
    main.faq .crux{
    display: flex;
    flex: 1 1 auto;
    gap: 56px;
    justify-content: flex-end;
    }
    main.faq .reef{
    flex: 0 0 auto;
    min-width: 120px;
    }
    main.faq .bloom{
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 18px;
    }
    main.faq .mantle{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.faq .loom{
    line-height: 1;
    }
    main.faq .echo{
    font-size: 14px;
    color: hsl(248, 8%, 50%);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 2px 0;
    }
    main.faq .echo:hover{
    color: #fff;
    }
    main.faq .cairn{
    height: 1px;
    background: hsla(248, 20%, 80%, 0.1);
    margin: 48px 0 28px;
    }
    main.faq .vale{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    }
    main.faq .opal{
    font-size: 13px;
    color: hsl(248, 8%, 40%);
    flex: 0 1 auto;
    }
    main.faq .ivory{
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.faq .haze{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 4px);
    color: hsl(248, 8%, 46%);
    background: hsla(248, 20%, 80%, 0.06);
    transition: var(--transition, all 0.2s ease);
    text-decoration: none;
    }
    main.faq .haze:hover{
    color: #fff;
    background: hsla(248, 20%, 80%, 0.14);
    }
    main.faq .jade{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    }
    @media (max-width: 768px) {main.faq .sigil{
    padding: 48px 20px 28px;
    }
    main.faq .alloy{
    flex-direction: column;
    gap: 36px;
    }
    main.faq .brink{
    flex: 0 0 auto;
    }
    main.faq .crux{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px;
    }
    main.faq .reef{
    flex: 0 0 calc(50% - 16px);
    min-width: 0;
    }
    main.faq .vale{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    }
    main.faq .cairn{
    margin: 36px 0 24px;
    }}

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