:root {
  --primary-color: hsl(255, 57%, 53%);
  --secondary-color: hsl(90, 71%, 43%);
  --bg-color: hsl(90, 7%, 97%);
  --text-color: hsl(255, 12%, 16%);
  --text-muted: hsl(255, 8%, 48%);
  --border-color: hsla(255, 20%, 40%, 0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px hsla(255, 30%, 20%, 0.06);
  --shadow-md: 0 4px 14px hsla(255, 30%, 20%, 0.09);
  --shadow-lg: 0 10px 30px hsla(255, 30%, 20%, 0.12);
  --nav-height: 64px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
  --nav-bg: var(--bg-color);
  --nav-border: var(--border-color);
  --sc-primary: hsl(90, 71%, 53%);
  --sc-primary-dark: hsl(90, 71%, 40%);
  --sc-secondary: hsl(255, 57%, 53%);
  --sc-secondary-dark: hsl(255, 57%, 42%);
  --sc-text: hsl(90, 10%, 12%);
  --sc-text-light: hsl(90, 8%, 40%);
  --sc-bg: hsl(90, 7%, 95%);
  --sc-bg-white: #ffffff;
  --sc-bg-subtle: hsl(90, 5%, 92%);
  --sc-border: hsl(90, 5%, 85%);
  --sc-radius: 14px;
  --sc-radius-sm: 8px;
  --sc-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --sc-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --sc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --sc-transition: 0.25s ease;
  --dl-primary: hsl(90, 71%, 53%);
  --dl-primary-dark: hsl(90, 65%, 40%);
  --dl-secondary: hsl(255, 57%, 53%);
  --dl-secondary-dark: hsl(255, 57%, 45%);
  --dl-text: hsl(90, 10%, 12%);
  --dl-text-light: hsl(90, 5%, 40%);
  --dl-bg: hsl(90, 7%, 95%);
  --dl-white: #ffffff;
  --dl-border: hsl(90, 7%, 88%);
  --dl-radius: 14px;
  --dl-radius-sm: 8px;
  --dl-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --dl-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --feat-primary: hsl(90, 71%, 43%);
  --feat-primary-light: hsl(90, 60%, 92%);
  --feat-accent: hsl(255, 57%, 53%);
  --feat-accent-light: hsl(255, 50%, 95%);
  --feat-text: hsl(90, 10%, 12%);
  --feat-text-secondary: hsl(90, 5%, 40%);
  --feat-bg: hsl(90, 7%, 95%);
  --feat-white: #ffffff;
  --feat-border: hsl(90, 10%, 88%);
  --feat-radius-sm: 8px;
  --feat-radius-md: 14px;
  --feat-radius-lg: 20px;
  --feat-radius-xl: 28px;
  --feat-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --feat-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --feat-shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --feat-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --page-primary: hsl(90, 71%, 53%);
  --page-primary-dark: hsl(90, 71%, 40%);
  --page-secondary: hsl(255, 57%, 53%);
  --page-secondary-dark: hsl(255, 57%, 43%);
  --page-text: hsl(90, 10%, 12%);
  --page-text-muted: hsl(90, 5%, 40%);
  --page-bg: hsl(90, 7%, 95%);
  --page-surface: #ffffff;
  --page-border: hsl(90, 10%, 88%);
  --page-radius: 14px;
  --page-radius-sm: 8px;
  --page-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --page-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --page-text-light: hsl(90, 8%, 40%);
  --page-card-bg: #ffffff;
  --page-radius-md: 14px;
  --page-radius-lg: 20px;
  --page-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --page-shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --page-step-accent: hsl(255, 57%, 96%);
  --page-step-border: hsl(255, 57%, 88%);
  --qs-primary: hsl(90, 71%, 53%);
  --qs-primary-dark: hsl(90, 71%, 40%);
  --qs-secondary: hsl(255, 57%, 53%);
  --qs-secondary-light: hsl(255, 57%, 96%);
  --qs-text: hsl(90, 10%, 12%);
  --qs-text-muted: hsl(90, 5%, 42%);
  --qs-bg: hsl(90, 7%, 95%);
  --qs-white: #ffffff;
  --qs-border: hsl(90, 7%, 88%);
  --qs-radius: 14px;
  --qs-radius-sm: 8px;
  --qs-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --qs-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --qs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --qs-step-accent: hsl(255, 57%, 53%);
  --cl-primary: hsl(90, 71%, 53%);
  --cl-primary-dark: hsl(90, 71%, 40%);
  --cl-secondary: hsl(255, 57%, 53%);
  --cl-secondary-light: hsl(255, 57%, 96%);
  --cl-text: hsl(90, 10%, 12%);
  --cl-text-muted: hsl(90, 5%, 45%);
  --cl-bg: hsl(90, 7%, 95%);
  --cl-surface: #ffffff;
  --cl-border: hsl(90, 7%, 88%);
  --cl-radius: 14px;
  --cl-radius-sm: 8px;
  --cl-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --cl-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

*,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.index{
    font-family: var(--sc-font);
    color: var(--sc-text, #1a1d12);
    line-height: 1.6;
    overflow-x: hidden;
    }
    main.index *, main.index *::before, main.index *::after{
    box-sizing: border-box;
    }
    
    main.index .foldRune{
    position: relative;
    padding: 80px 24px 72px;
    background: linear-gradient(160deg, hsl(255, 50%, 98%) 0%, hsl(90, 20%, 96%) 50%, hsl(90, 30%, 93%) 100%);
    text-align: center;
    overflow: hidden;
    }
    main.index .foldRune::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.index .foldRune::after{
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(255, 57%, 53%, 0.08) 0%, transparent 70%);
    pointer-events: none; color: #ffffff;}
    main.index .cobalt_fin{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.index .nib{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--sc-bg-white);
    border: 1px solid var(--sc-border);
    border-radius: 100px;
    font-size: 13px;
    color: var(--sc-text-light);
    margin-bottom: 28px;
    }
    main.index .nib span{
    color: var(--sc-secondary);
    font-weight: 600;
    }
    main.index .foldRune h1{
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    color: var(--sc-text);
    }
    main.index .foldRune h1 .dross4{
    background: linear-gradient(135deg, var(--sc-secondary), hsl(280, 60%, 55%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.index .cleft{
    font-size: 17px;
    color: var(--sc-text-light);
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.7;
    }
    main.index .brackFog{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.index .dapple{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--sc-transition);
    cursor: pointer;
    border: none;
    }
    main.index .jolt_web{
    background: linear-gradient(135deg, var(--sc-secondary), hsl(270, 55%, 50%));
    color: #fff;
    box-shadow: 0 4px 16px hsla(255, 57%, 53%, 0.3);
    }
    main.index .jolt_web:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px hsla(255, 57%, 53%, 0.4);
    }
    main.index .dhole{
    background: var(--sc-bg-white);
    color: var(--sc-text);
    border: 1.5px solid var(--sc-border);
    box-shadow: var(--sc-shadow);
    }
    main.index .dhole:hover{
    border-color: var(--sc-secondary);
    color: var(--sc-secondary);
    transform: translateY(-2px);
    }
    main.index .dapple svg{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    }
    
    main.index .husk{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--sc-border);
    max-width: 900px;
    margin: -32px auto 0;
    position: relative;
    z-index: 2;
    border-radius: var(--sc-radius);
    overflow: hidden;
    box-shadow: var(--sc-shadow-lg);
    }
    main.index .fretwork{
    background: var(--sc-bg-white);
    padding: 28px 20px;
    text-align: center;
    }
    main.index .whimsy{
    font-size: 28px;
    font-weight: 800;
    color: var(--sc-secondary);
    line-height: 1;
    margin-bottom: 6px;
    }
    main.index .plinth{
    font-size: 13px;
    color: var(--sc-text-light);
    }
    
    main.index .ingot{
    padding: 80px 24px;
    }
    main.index .spurGem{
    background: var(--sc-bg-white);
    }
    main.index .glintSaw{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.index .snag_bolt{
    text-align: center;
    margin-bottom: 48px;
    }
    main.index .snag_bolt h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--sc-text);
    }
    main.index .snag_bolt p{
    font-size: 15px;
    color: var(--sc-text-light);
    max-width: 560px;
    margin: 0 auto;
    }
    
    main.index .pumice{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.index .helium{
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 32px 24px;
    transition: all var(--sc-transition);
    }
    main.index .helium:hover{
    border-color: hsla(255, 57%, 53%, 0.3);
    box-shadow: var(--sc-shadow);
    transform: translateY(-3px);
    }
    main.index .cairn{
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    }
    main.index .cumin{ background: hsla(255, 57%, 53%, 0.1); color: #ffffff; }
    main.index .rivulet{ background: hsla(90, 71%, 53%, 0.15); color: var(--sc-primary-dark); }
    main.index .jarKin{ background: hsla(200, 70%, 50%, 0.1); color: hsl(200, 70%, 42%); }
    main.index .quill_fox{ background: hsla(30, 80%, 50%, 0.1); color: hsl(30, 80%, 40%); }
    main.index .latch5{ background: hsla(160, 60%, 45%, 0.1); color: hsl(160, 60%, 35%); }
    main.index .grotto{ background: hsla(340, 60%, 50%, 0.1); color: #ffffff; }
    main.index .helium h3{
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--sc-text);
    }
    main.index .helium p{
    font-size: 14px;
    color: var(--sc-text-light);
    margin: 0;
    line-height: 1.6;
    }
    
    main.index .torque_ash{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    }
    main.index .cruxVine{
    border-radius: var(--sc-radius);
    overflow: hidden;
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    }
    main.index .cruxVine img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.index .waspNest h2{
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--sc-text);
    }
    main.index .waspNest p{
    font-size: 15px;
    color: var(--sc-text-light);
    margin: 0 0 12px;
    line-height: 1.7;
    }
    main.index .sable{
    list-style: none;
    padding: 0;
    margin: 20px 0 28px;
    }
    main.index .sable li{
    padding: 6px 0;
    font-size: 14px;
    color: var(--sc-text);
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.index .sable li::before{
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsla(90, 71%, 53%, 0.15);
    color: var(--sc-primary-dark);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    }
    
    main.index .strewn{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.index .mortar_vex{
    border-radius: var(--sc-radius);
    overflow: hidden;
    background: var(--sc-bg-white);
    border: 1px solid var(--sc-border);
    box-shadow: var(--sc-shadow);
    transition: all var(--sc-transition);
    text-decoration: none;
    color: inherit;
    display: block;
    }
    main.index .mortar_vex:hover{
    box-shadow: var(--sc-shadow-lg);
    transform: translateY(-3px);
    }
    main.index .crypt8{
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    }
    main.index .myrrh{
    padding: 24px;
    }
    main.index .talc{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    }
    main.index .oxide{
    background: hsla(255, 57%, 53%, 0.1);
    color: #ffffff;
    }
    main.index .barb{
    background: hsla(90, 71%, 53%, 0.15);
    color: var(--sc-primary-dark);
    }
    main.index .mortar_vex h3{
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--sc-text);
    }
    main.index .mortar_vex p{
    font-size: 14px;
    color: var(--sc-text-light);
    margin: 0;
    line-height: 1.6;
    }
    
    main.index .sc-cta{
    text-align: center;
    padding: 72px 24px;
    background: linear-gradient(160deg, hsl(255, 45%, 20%) 0%, hsl(260, 40%, 28%) 50%, hsl(270, 35%, 22%) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    }
    main.index .sc-cta::before{
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.08) 0%, transparent 60%);
    pointer-events: none;
    }
    main.index .sc-cta__inner{
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.index .sc-cta h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    }
    main.index .sc-cta p{
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.7);
    margin: 0 0 32px;
    line-height: 1.7;
    }
    main.index .sc-btn--cta{
    background: linear-gradient(135deg, var(--sc-primary), hsl(90, 65%, 48%));
    color: hsl(90, 10%, 12%);
    font-weight: 700;
    box-shadow: 0 4px 20px hsla(90, 71%, 53%, 0.35);
    }
    main.index .sc-btn--cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(90, 71%, 53%, 0.45);
    }
    main.index .sc-cta__note{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    margin-top: 16px;
    }
    
    main.index .gust9{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: var(--sc-bg-white);
    border-top: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
    font-size: 13px;
    color: var(--sc-text-light);
    }
    main.index .basalt{
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.index .basalt strong{
    color: var(--sc-text);
    font-weight: 600;
    }
    
    main.index .sc-footer{
    padding: 40px 24px;
    background: hsl(90, 8%, 12%);
    color: hsla(0, 0%, 100%, 0.5);
    font-size: 13px;
    }
    main.index .sc-footer__inner{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.index .sc-footer__brand{
    font-size: 16px;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.85);
    }
    main.index .sc-footer__links{
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.index .sc-footer__links a{
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color var(--sc-transition);
    }
    main.index .sc-footer__links a:hover{
    color: hsla(0, 0%, 100%, 0.85);
    }
    main.index .sc-footer__copy{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    
    @media (max-width: 768px) {main.index .foldRune{
    padding: 56px 20px 56px;
    }
    main.index .husk{
    grid-template-columns: repeat(2, 1fr);
    margin-top: -24px;
    }
    main.index .pumice{
    grid-template-columns: 1fr;
    gap: 14px;
    }
    main.index .torque_ash{
    grid-template-columns: 1fr;
    gap: 28px;
    }
    main.index .sc-preview--reverse .cruxVine{
    order: -1;
    }
    main.index .strewn{
    grid-template-columns: 1fr;
    }
    main.index .ingot{
    padding: 56px 20px;
    }
    main.index .sc-footer__inner{
    flex-direction: column;
    text-align: center;
    }}
    @media (max-width: 480px) {main.index .brackFog{
    flex-direction: column;
    align-items: center;
    }
    main.index .dapple{
    width: 100%;
    justify-content: center;
    }
    main.index .husk{
    grid-template-columns: 1fr 1fr;
    }}
    main.index .bevel{
    background: hsl(255, 16%, 13%);
    color: hsl(255, 10%, 72%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    }
    main.index .zenith{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: flex;
    gap: 48px;
    }
    main.index .quasar{
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.index .spore_den{
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    }
    main.index .verdigris{
    margin: 0;
    font-size: 13px;
    color: hsl(255, 8%, 52%);
    line-height: 1.5;
    }
    main.index .yawnKit{
    flex: 1 1 auto;
    display: flex;
    gap: 40px;
    justify-content: flex-end;
    }
    main.index .kelp{
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    }
    main.index .magpie{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: hsl(255, 10%, 86%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    main.index .pewter{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    }
    main.index .floe{
    margin: 0;
    padding: 0;
    }
    main.index .tundra{
    color: hsl(255, 8%, 52%);
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.2s ease;
    display: inline-block;
    }
    main.index .tundra:hover{
    color: hsl(90, 71%, 53%);
    }
    main.index .crankMop{
    border-top: 1px solid hsl(255, 12%, 20%);
    }
    main.index .pyre{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    }
    main.index .riptide{
    font-size: 13px;
    color: hsl(255, 8%, 42%);
    flex: 0 0 auto;
    }
    main.index .fluxOrb{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.index .gnaw{
    color: hsl(255, 8%, 48%);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
    }
    main.index .gnaw:hover{
    color: hsl(90, 71%, 53%);
    }
    main.index .anvil{
    color: hsl(255, 8%, 30%);
    font-size: 12px;
    user-select: none;
    }
    @media (max-width: 768px) {main.index .zenith{
    flex-direction: column;
    gap: 36px;
    padding: 40px 20px 32px;
    }
    main.index .quasar{
    flex: 0 0 auto;
    }
    main.index .yawnKit{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px;
    }
    main.index .kelp{
    flex: 0 0 calc(50% - 16px);
    }
    main.index .pyre{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.download .yoke{
    position: relative;
    background: linear-gradient(160deg, hsl(255, 50%, 98%) 0%, hsl(90, 20%, 95%) 50%, hsl(255, 30%, 95%) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    overflow: hidden;
    }
    main.download .yoke::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.download .yoke::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, hsla(255, 57%, 53%, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none; color: #ffffff;}
    main.download .whelk{
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.download .glyph{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--dl-text-light);
    margin-bottom: 24px;
    }
    main.download .iota{
    width: 8px;
    height: 8px;
    background: var(--dl-primary);
    border-radius: 50%;
    display: inline-block;
    }
    main.download .yoke h1{
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    }
    main.download .yoke h1 span{
    background: linear-gradient(135deg, var(--dl-secondary), hsl(280, 60%, 55%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.download .tuft{
    font-size: 17px;
    color: var(--dl-text-light);
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    }
    main.download .lapis{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    padding: 12px 24px;
    font-size: 14px;
    color: var(--dl-text-light);
    flex-wrap: wrap;
    justify-content: center;
    }
    main.download .lapis strong{
    color: var(--dl-text);
    font-weight: 600;
    }
    main.download .plume{
    width: 1px;
    height: 16px;
    background: var(--dl-border);
    }
    
    main.download .thaw{
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 24px;
    }
    main.download .thaw h2{
    text-align: center;
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 8px;
    }
    main.download .dreg{
    text-align: center;
    font-size: 15px;
    color: var(--dl-text-light);
    margin: 0 0 48px;
    }
    main.download .nixPulse{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.download .jib_knot{
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    padding: 32px 24px 28px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    main.download .jib_knot:hover{
    box-shadow: var(--dl-shadow-lg);
    transform: translateY(-3px);
    }
    main.download .bramble{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 26px;
    }
    main.download .bramble.hasp{
    background: linear-gradient(135deg, hsl(207, 90%, 95%), hsl(207, 80%, 88%));
    color: hsl(207, 80%, 48%);
    }
    main.download .bramble.urn_gale{
    background: linear-gradient(135deg, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
    color: hsl(0, 0%, 25%);
    }
    main.download .bramble.xeric{
    background: linear-gradient(135deg, hsl(130, 60%, 93%), hsl(130, 50%, 85%));
    color: hsl(130, 55%, 38%);
    }
    main.download .bramble.elfMoss{
    background: linear-gradient(135deg, hsl(220, 60%, 95%), hsl(220, 50%, 88%));
    color: hsl(220, 55%, 45%);
    }
    main.download .jib_knot h3{
    font-size: 18px;
    font-weight: 600;
    color: var(--dl-text);
    margin: 0 0 6px;
    }
    main.download .umber{
    font-size: 13px;
    color: var(--dl-text-light);
    margin: 0 0 4px;
    }
    main.download .cog_wisp{
    font-size: 12px;
    color: var(--dl-text-light);
    margin: 0 0 20px;
    opacity: 0.8;
    }
    main.download .quag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    width: 100%;
    }
    main.download .scrim{
    background: linear-gradient(135deg, var(--dl-secondary), hsl(270, 55%, 50%));
    color: #ffffff;
    box-shadow: 0 4px 16px hsla(255, 57%, 53%, 0.3);
    }
    main.download .scrim:hover{
    box-shadow: 0 6px 24px hsla(255, 57%, 53%, 0.4);
    transform: translateY(-1px);
    }
    main.download .siltVane{
    background: linear-gradient(135deg, var(--dl-primary-dark), hsl(100, 60%, 38%));
    color: var(--dl-white);
    box-shadow: 0 4px 16px hsla(90, 71%, 40%, 0.3);
    }
    main.download .siltVane:hover{
    box-shadow: 0 6px 24px hsla(90, 71%, 40%, 0.4);
    transform: translateY(-1px);
    }
    main.download .quag svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
    }
    main.download .mantis{
    font-size: 12px;
    color: var(--dl-text-light);
    margin-top: 14px;
    line-height: 1.5;
    opacity: 0.75;
    }
    
    main.download .frond{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 64px;
    }
    main.download .rusk{
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    }
    main.download .zinc3{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 280px;
    }
    main.download .dl-preview-content{
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    main.download .dl-preview-content h2{
    font-size: 24px;
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 16px;
    }
    main.download .dl-preview-content p{
    font-size: 15px;
    color: var(--dl-text-light);
    line-height: 1.7;
    margin: 0 0 24px;
    }
    main.download .dl-preview-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.download .dl-preview-links a{
    font-size: 14px;
    color: var(--dl-secondary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
    }
    main.download .dl-preview-links a:hover{
    gap: 10px;
    }
    main.download .dl-preview-links a::after{
    content: "→";
    }
    
    main.download .dl-sysreq{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 64px;
    }
    main.download .dl-sysreq h2{
    text-align: center;
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 8px;
    }
    main.download .dl-sysreq-sub{
    text-align: center;
    font-size: 15px;
    color: var(--dl-text-light);
    margin: 0 0 40px;
    }
    main.download .dl-req-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.download .dl-req-card{
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    padding: 28px 24px;
    }
    main.download .dl-req-card h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--dl-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.download .dl-req-card h3 span{
    font-size: 18px;
    }
    main.download .dl-req-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.download .dl-req-list li{
    font-size: 14px;
    color: var(--dl-text-light);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    }
    main.download .dl-req-list li::before{
    content: "✓";
    color: var(--dl-primary-dark);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
    }
    
    main.download .dl-security{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 64px;
    }
    main.download .dl-security-box{
    background: linear-gradient(135deg, hsl(255, 40%, 98%), hsl(90, 20%, 97%));
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    }
    main.download .dl-sec-item{
    text-align: center;
    }
    main.download .dl-sec-icon{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--dl-white);
    border: 1px solid var(--dl-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    }
    main.download .dl-sec-item h3{
    font-size: 15px;
    font-weight: 600;
    color: var(--dl-text);
    margin: 0 0 6px;
    }
    main.download .dl-sec-item p{
    font-size: 13px;
    color: var(--dl-text-light);
    line-height: 1.6;
    margin: 0;
    }
    
    main.download .dl-faq{
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 80px;
    }
    main.download .dl-faq h2{
    text-align: center;
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 700;
    color: var(--dl-text);
    margin: 0 0 36px;
    }
    main.download .dl-faq-item{
    border-bottom: 1px solid var(--dl-border);
    padding: 20px 0;
    }
    main.download .dl-faq-item:first-of-type{
    border-top: 1px solid var(--dl-border);
    }
    main.download .dl-faq-q{
    font-size: 15px;
    font-weight: 600;
    color: var(--dl-text);
    margin: 0 0 8px;
    }
    main.download .dl-faq-a{
    font-size: 14px;
    color: var(--dl-text-light);
    line-height: 1.7;
    margin: 0;
    }
    main.download .dl-faq-a a{
    color: var(--dl-secondary);
    text-decoration: none;
    font-weight: 500;
    }
    main.download .dl-faq-a a:hover{
    text-decoration: underline;
    }
    
    main.download .dl-footer{
    background: var(--dl-text);
    padding: 40px 24px;
    text-align: center;
    }
    main.download .dl-footer-brand{
    font-size: 18px;
    font-weight: 700;
    color: var(--dl-white);
    margin: 0 0 8px;
    }
    main.download .dl-footer-tagline{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    margin: 0 0 20px;
    }
    main.download .dl-footer-links{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    }
    main.download .dl-footer-links a{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.65);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-footer-links a:hover{
    color: var(--dl-white);
    }
    main.download .dl-footer-copy{
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 0;
    }
    
    @media (max-width: 900px) {main.download .nixPulse{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .rusk{
    grid-template-columns: 1fr;
    }
    main.download .zinc3{
    min-height: 220px;
    max-height: 280px;
    }
    main.download .dl-req-grid{
    grid-template-columns: 1fr;
    }
    main.download .dl-security-box{
    grid-template-columns: 1fr;
    padding: 28px;
    }}
    @media (max-width: 600px) {main.download .yoke{
    padding: 56px 20px 48px;
    }
    main.download .nixPulse{
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
    }
    main.download .lapis{
    flex-direction: column;
    gap: 8px;
    }
    main.download .plume{
    display: none;
    }
    main.download .dl-preview-content{
    padding: 28px 24px;
    }}
    main.download .nubLatch{
    background: var(--text-color, hsl(255, 12%, 16%));
    padding: 48px 24px 32px;
    margin-top: 80px;
    }
    main.download .ochre{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    }
    main.download .loom{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.download .kudzu{
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    }
    main.download .vetch{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.5);
    margin: 0;
    }
    main.download .molt{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    }
    main.download .pang{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.65);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    }
    main.download .pang:hover{
    color: #fff;
    background: hsla(0, 0%, 100%, 0.08);
    }
    main.download .quorum{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.2);
    flex-shrink: 0;
    }
    main.download .rosin{
    padding-top: 20px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    width: 100%;
    text-align: center;
    }
    main.download .opsin{
    font-size: 0.78rem;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 0;
    }
    @media (max-width: 640px) {main.download .nubLatch{
    padding: 36px 16px 24px;
    margin-top: 56px;
    }
    main.download .molt{
    gap: 4px;
    }
    main.download .pang{
    font-size: 0.8rem;
    padding: 4px 8px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.features .prism{
    background: linear-gradient(160deg, hsl(255, 57%, 53%) 0%, hsl(240, 50%, 40%) 40%, hsl(200, 60%, 25%) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    position: relative;
    overflow: hidden; color: #ffffff;}
    main.features .prism::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.features .prism::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(255, 57%, 70%, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.features .mosaic{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.features .dusk{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: hsla(255, 80%, 80%, 0.15);
    border: 1px solid hsla(255, 80%, 80%, 0.2);
    color: hsla(0, 0%, 100%, 0.9);
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    }
    main.features .prism h1{
    color: var(--feat-white);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
    }
    main.features .glacier{
    color: hsla(0, 0%, 100%, 0.8);
    font-size: clamp(15px, 2.2vw, 17px);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    }
    main.features .marble{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .opal{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--feat-primary), hsl(90, 65%, 38%));
    color: var(--feat-white);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 4px 16px hsla(90, 71%, 43%, 0.35);
    transition: var(--feat-transition);
    }
    main.features .opal:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px hsla(90, 71%, 43%, 0.45);
    }
    main.features .nectar{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: hsla(0, 0%, 100%, 0.12);
    border: 1px solid hsla(0, 0%, 100%, 0.25);
    color: var(--feat-white);
    font-size: 15px;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: 100px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: var(--feat-transition);
    }
    main.features .nectar:hover{
    background: hsla(0, 0%, 100%, 0.2);
    transform: translateY(-2px);
    }
    main.features .lumen{
    padding: 72px 24px;
    }
    main.features .obsidian{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.features .onyx{
    text-align: center;
    margin-bottom: 48px;
    }
    main.features .onyx h2{
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    color: var(--feat-text, #1a1c14);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
    }
    main.features .onyx p{
    color: var(--feat-text-secondary);
    font-size: 15px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
    }
    main.features .phantom{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.features .vale{
    background: var(--feat-white);
    border-radius: var(--feat-radius-lg);
    padding: 32px 28px;
    border: 1px solid var(--feat-border);
    transition: var(--feat-transition);
    position: relative;
    overflow: hidden;
    }
    main.features .vale:hover{
    box-shadow: var(--feat-shadow-md);
    transform: translateY(-3px);
    border-color: transparent;
    }
    main.features .sapphire{
    width: 48px;
    height: 48px;
    border-radius: var(--feat-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    }
    main.features .kelp{
    background: var(--feat-primary-light);
    color: var(--feat-primary);
    }
    main.features .tundra{
    background: var(--feat-accent-light);
    color: var(--feat-accent);
    }
    main.features .ridgeline{
    background: hsl(210, 60%, 93%);
    color: hsl(210, 60%, 45%);
    }
    main.features .vale h3{
    font-size: 17px;
    font-weight: 650;
    color: var(--feat-text, #1a1c14);
    margin: 0 0 10px;
    }
    main.features .vale p{
    font-size: 14px;
    line-height: 1.65;
    color: var(--feat-text-secondary);
    margin: 0;
    }
    main.features .vortex{
    background: var(--feat-white);
    }
    main.features .pulse{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
    }
    main.features .pulse:last-child{
    margin-bottom: 0;
    }
    main.features .cedar{
    direction: rtl;
    }
    main.features .cedar > *{
    direction: ltr;
    }
    main.features .falcon{
    border-radius: var(--feat-radius-xl);
    overflow: hidden;
    box-shadow: var(--feat-shadow-lg);
    border: 1px solid var(--feat-border);
    }
    main.features .falcon img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
    }
    main.features .nimbus h2{
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: var(--feat-text, #1a1c14);
    margin: 0 0 14px;
    letter-spacing: -0.2px;
    }
    main.features .nimbus p{
    font-size: 15px;
    line-height: 1.7;
    color: var(--feat-text-secondary);
    margin: 0 0 20px;
    }
    main.features .brinePod{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    }
    main.features .crimson{
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--feat-primary-light);
    color: hsl(90, 50%, 30%);
    }
    main.features .aurora{
    background: var(--feat-accent-light);
    color: hsl(255, 45%, 40%);
    }
    main.features .velvet{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--feat-accent);
    text-decoration: none;
    transition: var(--feat-transition);
    }
    main.features .velvet:hover{
    gap: 10px;
    }
    main.features .velvet svg{
    width: 16px;
    height: 16px;
    transition: var(--feat-transition);
    }
    main.features .zenith{
    background: linear-gradient(180deg, var(--feat-bg) 0%, var(--feat-white) 100%);
    }
    main.features .feat-proto-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    }
    main.features .feat-proto-item{
    background: var(--feat-white);
    border: 1px solid var(--feat-border);
    border-radius: var(--feat-radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: var(--feat-transition);
    }
    main.features .feat-proto-item:hover{
    border-color: var(--feat-accent);
    box-shadow: 0 2px 12px hsla(255, 57%, 53%, 0.1);
    }
    main.features .feat-proto-name{
    font-size: 16px;
    font-weight: 700;
    color: var(--feat-text, #1a1c14);
    margin: 0 0 6px;
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.features .feat-proto-desc{
    font-size: 13px;
    color: var(--feat-text-secondary);
    margin: 0;
    line-height: 1.5;
    }
    main.features .feat-comparison{
    background: var(--feat-white);
    }
    main.features .feat-table-wrap{
    overflow-x: auto;
    border-radius: var(--feat-radius-lg);
    border: 1px solid var(--feat-border);
    }
    main.features .feat-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    }
    main.features .feat-table thead{
    background: hsl(255, 57%, 53%); color: #ffffff;}
    main.features .feat-table thead th{
    color: var(--feat-white);
    font-weight: 600;
    padding: 16px 20px;
    text-align: left;
    white-space: nowrap;
    }
    main.features .feat-table tbody tr{
    border-bottom: 1px solid var(--feat-border);
    transition: var(--feat-transition);
    }
    main.features .feat-table tbody tr:last-child{
    border-bottom: none;
    }
    main.features .feat-table tbody tr:hover{
    background: hsl(90, 10%, 97%);
    }
    main.features .feat-table td{
    padding: 14px 20px;
    color: var(--feat-text-secondary);
    }
    main.features .feat-table td:first-child{
    font-weight: 600;
    color: var(--feat-text, #1a1c14);
    }
    main.features .feat-check{
    color: var(--feat-primary);
    font-weight: 700;
    font-size: 16px;
    }
    main.features .feat-version-banner{
    background: linear-gradient(135deg, hsl(90, 10%, 12%) 0%, hsl(255, 30%, 20%) 100%);
    padding: 48px 24px; color: #ffffff;}
    main.features .feat-version-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    }
    main.features .feat-version-info h2{
    color: var(--feat-white);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    }
    main.features .feat-version-meta{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    }
    main.features .feat-version-meta span{
    color: hsla(0, 0%, 100%, 0.65);
    font-size: 13px;
    }
    main.features .feat-version-meta strong{
    color: hsla(0, 0%, 100%, 0.9);
    }
    main.features .feat-cta-section{
    background: linear-gradient(160deg, var(--feat-bg) 0%, hsl(255, 20%, 93%) 100%);
    padding: 72px 24px;
    text-align: center;
    }
    main.features .feat-cta-inner{
    max-width: 600px;
    margin: 0 auto;
    }
    main.features .feat-cta-inner h2{
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: var(--feat-text, #1a1c14);
    margin: 0 0 14px;
    }
    main.features .feat-cta-inner p{
    color: var(--feat-text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 28px;
    }
    main.features .feat-cta-buttons{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .feat-btn-accent{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--feat-accent), hsl(265, 55%, 48%));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 4px 16px hsla(255, 57%, 53%, 0.35);
    transition: var(--feat-transition);
    }
    main.features .feat-btn-accent:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px hsla(255, 57%, 53%, 0.45);
    }
    main.features .feat-btn-outline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--feat-white);
    border: 2px solid var(--feat-border);
    color: var(--feat-text, #1a1c14);
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 100px;
    text-decoration: none;
    transition: var(--feat-transition);
    }
    main.features .feat-btn-outline:hover{
    border-color: var(--feat-accent);
    color: var(--feat-accent);
    transform: translateY(-2px);
    }
    main.features .feat-footer{
    background: hsl(90, 10%, 12%);
    padding: 40px 24px; color: #ffffff;}
    main.features .feat-footer-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.features .feat-footer-brand{
    font-size: 18px;
    font-weight: 700;
    color: var(--feat-white);
    letter-spacing: -0.3px;
    }
    main.features .feat-footer-brand span{
    color: var(--feat-primary);
    }
    main.features .feat-footer-copy{
    color: hsla(0, 0%, 100%, 0.45);
    font-size: 13px;
    }
    main.features .feat-footer-links{
    display: flex;
    gap: 24px;
    }
    main.features .feat-footer-links a{
    color: hsla(0, 0%, 100%, 0.55);
    font-size: 13px;
    text-decoration: none;
    transition: var(--feat-transition);
    }
    main.features .feat-footer-links a:hover{
    color: var(--feat-white);
    }
    @media (max-width: 900px) {main.features .phantom{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .feat-proto-grid{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .pulse, main.features .cedar{
    grid-template-columns: 1fr;
    gap: 28px;
    direction: ltr;
    }}
    @media (max-width: 600px) {main.features .prism{
    padding: 60px 20px 48px;
    }
    main.features .lumen{
    padding: 48px 16px;
    }
    main.features .phantom{
    grid-template-columns: 1fr;
    }
    main.features .feat-proto-grid{
    grid-template-columns: 1fr 1fr;
    }
    main.features .feat-version-inner{
    flex-direction: column;
    text-align: center;
    }
    main.features .feat-version-meta{
    justify-content: center;
    }
    main.features .feat-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.features .feat-footer-links{
    justify-content: center;
    }}
    main.features .xylol{
    background: hsl(255, 20%, 13%);
    color: hsl(255, 10%, 72%);
    padding: 48px 24px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    }
    main.features .ivory{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    }
    main.features .wraith{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.features .flint{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    }
    main.features .quartz{
    margin: 0;
    font-size: 13px;
    color: hsl(255, 10%, 52%);
    }
    main.features .haze{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 0 0 auto;
    }
    main.features .zag5{
    color: hsl(255, 10%, 72%);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    font-size: 13px;
    }
    main.features .zag5:hover{
    color: #fff;
    background: hsla(255, 40%, 60%, 0.12);
    }
    main.features .clave{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: hsl(255, 10%, 32%);
    flex: 0 0 auto; color: #ffffff;}
    main.features .jade{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid hsla(255, 20%, 50%, 0.1);
    flex: 0 0 auto;
    }
    main.features .yurt{
    margin: 0;
    font-size: 12px;
    color: hsl(255, 10%, 42%);
    flex: 1 1 auto;
    }
    main.features .cobalt{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.features .grove{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    color: hsl(255, 10%, 52%);
    transition: var(--transition, all 0.2s ease);
    }
    main.features .grove:hover{
    color: #fff;
    background: hsla(255, 40%, 60%, 0.12);
    }
    main.features .basalt{
    width: 18px;
    height: 18px;
    }
    @media (max-width: 640px) {main.features .xylol{
    padding: 36px 16px 24px;
    }
    main.features .haze{
    gap: 4px;
    }
    main.features .jade{
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    }
    main.features .yurt{
    flex: 0 0 auto;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.system-requirements .fable{
    position: relative;
    overflow: hidden;
    padding: 72px 24px 56px;
    background: linear-gradient(135deg, hsl(255, 50%, 98%) 0%, hsl(90, 15%, 96%) 50%, hsl(255, 30%, 96%) 100%);
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .fable::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(255, 57%, 53%, 0.06) 0%, transparent 70%);
    pointer-events: none; color: #ffffff;}
    main.system-requirements .fable::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.system-requirements .inlet{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    }
    main.system-requirements .orbit{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: hsla(255, 57%, 53%, 0.08);
    color: #ffffff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
    }
    main.system-requirements .fable h1{
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--page-text, #1a1a1a);
    line-height: 1.3;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    }
    main.system-requirements .fable h1 span{
    background: linear-gradient(135deg, var(--page-secondary), hsl(255, 57%, 65%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.system-requirements .summit{
    font-size: 16px;
    color: var(--page-text-muted);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 28px;
    }
    main.system-requirements .karma{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--page-text-muted);
    }
    main.system-requirements .karma span{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    }
    main.system-requirements .karma svg{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    }
    main.system-requirements .crest{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.system-requirements .monolith{
    padding: 56px 0;
    }
    main.system-requirements .quiver{
    font-size: 22px;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .rune{
    font-size: 14px;
    color: var(--page-text-muted);
    margin: 0 0 32px;
    line-height: 1.6;
    }
    main.system-requirements .yarn{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    @media (max-width: 860px) {main.system-requirements .yarn{
    grid-template-columns: 1fr;
    gap: 16px;
    }}
    main.system-requirements .alcove{
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius);
    padding: 28px 24px;
    box-shadow: var(--page-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    main.system-requirements .alcove:hover{
    box-shadow: var(--page-shadow-md);
    transform: translateY(-2px);
    }
    main.system-requirements .delta{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .plume{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    }
    main.system-requirements .plume svg{
    width: 24px;
    height: 24px;
    }
    main.system-requirements .vivid{
    background: linear-gradient(135deg, hsl(210, 80%, 55%), hsl(210, 80%, 45%));
    color: #fff;
    }
    main.system-requirements .epoch{
    background: linear-gradient(135deg, hsl(0, 0%, 25%), hsl(0, 0%, 15%));
    color: #fff;
    }
    main.system-requirements .urchin{
    background: linear-gradient(135deg, hsl(40, 90%, 55%), hsl(30, 85%, 50%));
    color: #fff;
    }
    main.system-requirements .helix{
    font-size: 17px;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 2px;
    }
    main.system-requirements .axiom{
    font-size: 12px;
    color: var(--page-text-muted);
    }
    main.system-requirements .lattice{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .shard{
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--page-text, #1a1a1a);
    }
    main.system-requirements .jovial{
    flex-shrink: 0;
    width: 64px;
    font-weight: 600;
    color: var(--page-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 1px;
    }
    main.system-requirements .nexus{
    flex: 1;
    }
    main.system-requirements .nexus code{
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--page-secondary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.system-requirements .sr-recommended{
    background: linear-gradient(135deg, hsl(90, 20%, 97%), hsl(255, 15%, 97%));
    border-top: 1px solid var(--page-border);
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .sr-rec-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    }
    @media (max-width: 700px) {main.system-requirements .sr-rec-grid{
    grid-template-columns: 1fr;
    }}
    main.system-requirements .sr-rec-card{
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius);
    padding: 24px;
    box-shadow: var(--page-shadow);
    }
    main.system-requirements .sr-rec-card h3{
    font-size: 15px;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 4px;
    }
    main.system-requirements .sr-rec-card p{
    font-size: 13px;
    color: var(--page-text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
    }
    main.system-requirements .sr-rec-specs{
    display: flex;
    flex-direction: column;
    gap: 8px;
    }
    main.system-requirements .sr-rec-spec{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--page-text, #1a1a1a);
    }
    main.system-requirements .sr-rec-spec svg{
    width: 16px;
    height: 16px;
    color: var(--page-primary-dark);
    flex-shrink: 0;
    }
    main.system-requirements .sr-compat{
    padding: 56px 0;
    }
    main.system-requirements .sr-compat-img-wrap{
    margin-bottom: 32px;
    border-radius: var(--page-radius);
    overflow: hidden;
    box-shadow: var(--page-shadow-md);
    max-height: 320px;
    }
    main.system-requirements .sr-compat-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    main.system-requirements .sr-table-wrap{
    overflow-x: auto;
    border-radius: var(--page-radius);
    border: 1px solid var(--page-border);
    box-shadow: var(--page-shadow);
    }
    main.system-requirements .sr-table{
    width: 100%;
    border-collapse: collapse;
    background: var(--page-surface);
    font-size: 13.5px;
    }
    main.system-requirements .sr-table thead{
    background: hsl(255, 30%, 97%);
    }
    main.system-requirements .sr-table th{
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--page-border);
    }
    main.system-requirements .sr-table td{
    padding: 11px 16px;
    border-bottom: 1px solid var(--page-border);
    color: var(--page-text, #1a1a1a);
    line-height: 1.5;
    }
    main.system-requirements .sr-table tbody tr:last-child td{
    border-bottom: none;
    }
    main.system-requirements .sr-table tbody tr:hover{
    background: hsla(90, 20%, 50%, 0.03);
    }
    main.system-requirements .sr-check{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: hsla(90, 71%, 53%, 0.12);
    color: var(--page-primary-dark);
    }
    main.system-requirements .sr-check svg{
    width: 12px;
    height: 12px;
    }
    main.system-requirements .sr-dash{
    color: var(--page-border);
    font-weight: 600;
    }
    main.system-requirements .sr-notes{
    padding: 56px 0;
    border-top: 1px solid var(--page-border);
    }
    main.system-requirements .sr-notes-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    }
    @media (max-width: 700px) {main.system-requirements .sr-notes-grid{
    grid-template-columns: 1fr;
    }}
    main.system-requirements .sr-note-card{
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius);
    padding: 24px;
    box-shadow: var(--page-shadow);
    }
    main.system-requirements .sr-note-card h3{
    font-size: 14px;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.system-requirements .sr-note-card h3 svg{
    width: 18px;
    height: 18px;
    color: var(--page-secondary);
    flex-shrink: 0;
    }
    main.system-requirements .sr-note-card p, main.system-requirements .sr-note-card ul{
    font-size: 13px;
    color: var(--page-text-muted);
    line-height: 1.65;
    margin: 0;
    }
    main.system-requirements .sr-note-card ul{
    padding-left: 18px;
    margin-top: 6px;
    }
    main.system-requirements .sr-note-card ul li{
    margin-bottom: 4px;
    }
    main.system-requirements .sr-note-card a{
    color: var(--page-secondary);
    text-decoration: none;
    font-weight: 500;
    }
    main.system-requirements .sr-note-card a:hover{
    text-decoration: underline;
    }
    main.system-requirements .sr-cta-section{
    padding: 48px 0 56px;
    }
    main.system-requirements .sr-cta-box{
    background: linear-gradient(135deg, hsl(255, 50%, 50%), hsl(255, 57%, 42%));
    border-radius: 18px;
    padding: 48px 32px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    }
    main.system-requirements .sr-cta-box::before{
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: hsla(90, 71%, 53%, 0.1);
    pointer-events: none;
    }
    main.system-requirements .sr-cta-box h2{
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
    position: relative;
    }
    main.system-requirements .sr-cta-box p{
    font-size: 14px;
    opacity: 0.85;
    margin: 0 0 28px;
    line-height: 1.6;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }
    main.system-requirements .sr-cta-buttons{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    }
    main.system-requirements .sr-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: none;
    }
    main.system-requirements .sr-btn:hover{
    transform: translateY(-1px);
    }
    main.system-requirements .sr-btn--primary{
    background: var(--page-primary);
    color: var(--page-text, #1a1a1a);
    box-shadow: 0 2px 8px hsla(90, 71%, 40%, 0.3);
    }
    main.system-requirements .sr-btn--primary:hover{
    box-shadow: 0 4px 16px hsla(90, 71%, 40%, 0.4);
    }
    main.system-requirements .sr-btn--ghost{
    background: hsla(0, 0%, 100%, 0.15);
    color: #fff;
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    }
    main.system-requirements .sr-btn--ghost:hover{
    background: hsla(0, 0%, 100%, 0.22);
    }
    main.system-requirements .sr-footer{
    border-top: 1px solid var(--page-border);
    padding: 32px 24px;
    text-align: center;
    }
    main.system-requirements .sr-footer-inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    }
    main.system-requirements .sr-footer-brand{
    font-size: 15px;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    letter-spacing: -0.01em;
    }
    main.system-requirements .sr-footer-copy{
    font-size: 12.5px;
    color: var(--page-text-muted);
    line-height: 1.5;
    }
    main.system-requirements .sr-footer-links{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.system-requirements .sr-footer-links a{
    font-size: 12.5px;
    color: var(--page-text-muted);
    text-decoration: none;
    transition: color 0.15s;
    }
    main.system-requirements .sr-footer-links a:hover{
    color: var(--page-secondary);
    }
    @media (max-width: 480px) {main.system-requirements .fable{
    padding: 48px 16px 40px;
    }
    main.system-requirements .crest{
    padding: 0 16px;
    }
    main.system-requirements .monolith{
    padding: 40px 0;
    }
    main.system-requirements .alcove{
    padding: 22px 18px;
    }
    main.system-requirements .sr-cta-box{
    padding: 36px 20px;
    }}
    main.system-requirements .umbra{
    background: hsl(255, 16%, 14%);
    padding: 40px 24px 32px;
    margin-top: 80px; color: #ffffff;}
    main.system-requirements .xeno{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }
    main.system-requirements .timber{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }
    main.system-requirements .totem{
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    }
    main.system-requirements .glyph{
    font-size: 0.85rem;
    color: hsla(255, 20%, 80%, 0.7);
    margin: 0;
    }
    main.system-requirements .wander{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    }
    main.system-requirements .wren{
    font-size: 0.875rem;
    color: hsla(255, 20%, 85%, 0.85);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    }
    main.system-requirements .wren:hover{
    color: #fff;
    background: hsla(255, 40%, 60%, 0.15);
    }
    main.system-requirements .bloom{
    width: 1px;
    height: 14px;
    background: hsla(255, 20%, 70%, 0.2);
    flex-shrink: 0;
    }
    main.system-requirements .vapor{
    font-size: 0.8rem;
    color: hsla(255, 15%, 70%, 0.5);
    margin: 8px 0 0;
    }
    @media (max-width: 600px) {main.system-requirements .umbra{
    padding: 32px 16px 24px;
    margin-top: 48px;
    }
    main.system-requirements .wander{
    flex-direction: column;
    gap: 4px;
    }
    main.system-requirements .bloom{
    display: none;
    }
    main.system-requirements .wren{
    padding: 6px 12px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.install-guide *{ box-sizing: border-box; }
    main.install-guide .kite{
    background: linear-gradient(160deg, hsl(255, 57%, 53%) 0%, hsl(240, 50%, 40%) 50%, hsl(220, 55%, 30%) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    }
    main.install-guide .kite::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.install-guide .kite::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(255, 57%, 70%, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.install-guide .kite h1{
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.install-guide .nova{
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 28px;
    opacity: 0.92;
    position: relative;
    z-index: 1;
    }
    main.install-guide .falcon{
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    }
    main.install-guide .falcon span{
    font-size: 0.85rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.install-guide .falcon svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    }
    main.install-guide .nebula{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.install-guide .ig-toc{
    background: var(--page-card-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius-lg);
    padding: 32px 36px;
    margin: -32px auto 48px;
    max-width: 960px;
    position: relative;
    z-index: 2;
    box-shadow: var(--page-shadow-md);
    }
    main.install-guide .ig-toc h2{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.install-guide .ig-toc-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 24px;
    }
    main.install-guide .ig-toc-grid a{
    color: var(--page-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
    }
    main.install-guide .ig-toc-grid a:hover{
    color: var(--page-secondary-dark);
    text-decoration: underline;
    }
    main.install-guide .ig-toc-grid a::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--page-primary);
    flex-shrink: 0;
    }
    main.install-guide .quartz{
    margin-bottom: 56px;
    }
    main.install-guide .quartz h2{
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.install-guide .quartz h2 .opal{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--page-secondary), hsl(255, 57%, 63%));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    }
    main.install-guide .forge{
    color: var(--page-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 24px;
    padding-left: 46px;
    }
    main.install-guide .phantom{
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.install-guide .dune{
    background: var(--page-card-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius-md);
    padding: 24px 28px;
    position: relative;
    transition: box-shadow 0.25s, border-color 0.25s;
    }
    main.install-guide .dune:hover{
    box-shadow: var(--page-shadow-md);
    border-color: var(--page-step-border);
    }
    main.install-guide .vortex{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    }
    main.install-guide .mirth{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--page-step-accent);
    color: var(--page-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    }
    main.install-guide .dune h3{
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    margin: 0;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.install-guide .raven{
    padding-left: 42px;
    color: var(--page-text-light);
    font-size: 0.92rem;
    line-height: 1.7;
    }
    main.install-guide .raven p{
    margin: 0 0 10px;
    }
    main.install-guide .raven p:last-child{
    margin-bottom: 0;
    }
    main.install-guide .raven code{
    background: hsl(90, 7%, 92%);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: "SF Mono", "Fira Code", monospace;
    color: var(--page-text);
    }
    main.install-guide .raven a{
    color: var(--page-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    }
    main.install-guide .raven a:hover{
    text-decoration: underline;
    color: var(--page-secondary-dark);
    }
    main.install-guide .drift{
    border-radius: var(--page-radius-md);
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid var(--page-border);
    box-shadow: var(--page-shadow-sm);
    }
    main.install-guide .drift img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.install-guide .oxide{
    padding: 10px 16px;
    background: hsl(90, 7%, 97%);
    font-size: 0.82rem;
    color: var(--page-text-light);
    text-align: center;
    }
    main.install-guide .pebble{
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    }
    main.install-guide .glacier{
    padding: 10px 20px;
    border-radius: var(--page-radius-sm);
    border: 1px solid var(--page-border);
    background: var(--page-card-bg);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--page-text-light);
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    }
    main.install-guide .glacier.prism{
    background: var(--page-secondary);
    color: #fff;
    border-color: var(--page-secondary);
    }
    main.install-guide .glacier svg{
    width: 18px;
    height: 18px;
    }
    main.install-guide .ignite{
    background: hsl(45, 80%, 96%);
    border-left: 3px solid hsl(45, 80%, 55%);
    border-radius: 0 var(--page-radius-sm) var(--page-radius-sm) 0;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: hsl(45, 30%, 25%);
    }
    main.install-guide .ignite strong{
    color: hsl(45, 50%, 20%);
    }
    main.install-guide .ig-tip{
    background: hsl(200, 70%, 96%);
    border-left: 3px solid hsl(200, 70%, 55%);
    border-radius: 0 var(--page-radius-sm) var(--page-radius-sm) 0;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: hsl(200, 40%, 22%);
    }
    main.install-guide .ig-cta-section{
    background: linear-gradient(135deg, hsl(255, 57%, 53%), hsl(240, 50%, 42%));
    border-radius: var(--page-radius-lg);
    padding: 48px 36px;
    text-align: center;
    color: #fff;
    margin: 56px 0 0;
    }
    main.install-guide .ig-cta-section h2{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    justify-content: center;
    color: #fff;
    }
    main.install-guide .ig-cta-section p{
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0 0 28px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    }
    main.install-guide .ig-cta-btns{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.install-guide .ig-btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--page-primary);
    color: var(--page-text, #1a1a1a);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--page-radius-sm);
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px hsla(90, 71%, 53%, 0.35);
    }
    main.install-guide .ig-btn-primary:hover{
    background: var(--page-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px hsla(90, 71%, 53%, 0.45);
    }
    main.install-guide .ig-btn-outline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--page-radius-sm);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background 0.2s, transform 0.15s;
    }
    main.install-guide .ig-btn-outline:hover{
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
    }
    main.install-guide .ig-faq{
    margin-top: 56px;
    }
    main.install-guide .ig-faq h2{
    margin-bottom: 20px;
    }
    main.install-guide .ig-faq-item{
    background: var(--page-card-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius-md);
    padding: 20px 24px;
    margin-bottom: 12px;
    }
    main.install-guide .ig-faq-item h3{
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.install-guide .ig-faq-item p{
    font-size: 0.9rem;
    color: var(--page-text-light);
    line-height: 1.65;
    margin: 0;
    }
    main.install-guide .ig-faq-item a{
    color: var(--page-secondary);
    text-decoration: none;
    font-weight: 500;
    }
    main.install-guide .ig-faq-item a:hover{
    text-decoration: underline;
    }
    main.install-guide .ig-footer{
    margin-top: 64px;
    padding: 32px 24px;
    text-align: center;
    border-top: 1px solid var(--page-border);
    color: var(--page-text-light);
    font-size: 0.84rem;
    }
    main.install-guide .ig-footer-brand{
    font-weight: 600;
    color: var(--page-text, #1a1a1a);
    }
    main.install-guide .ig-footer-links{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
    }
    main.install-guide .ig-footer-links a{
    color: var(--page-text-light);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
    }
    main.install-guide .ig-footer-links a:hover{
    color: var(--page-secondary);
    }
    @media (max-width: 640px) {main.install-guide .kite{
    padding: 60px 20px 48px;
    }
    main.install-guide .ig-toc{
    padding: 24px 20px;
    margin: -24px 16px 36px;
    }
    main.install-guide .ig-toc-grid{
    grid-template-columns: 1fr;
    }
    main.install-guide .quartz h2{
    font-size: 1.25rem;
    }
    main.install-guide .forge{
    padding-left: 0;
    }
    main.install-guide .dune{
    padding: 18px 20px;
    }
    main.install-guide .raven{
    padding-left: 0;
    }
    main.install-guide .ig-cta-section{
    padding: 36px 24px;
    }
    main.install-guide .nebula{
    padding: 0 16px;
    }}
    main.install-guide .cipher{
    background: var(--text-color, hsl(255, 12%, 16%));
    padding: 48px 24px 32px;
    color: hsla(0, 0%, 100%, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.install-guide .flint{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    }
    main.install-guide .briar{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.install-guide .cobalt{
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    }
    main.install-guide .lantern{
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.5);
    margin: 0;
    line-height: 1.5;
    }
    main.install-guide .dusk{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    }
    main.install-guide .grain{
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.65);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    line-height: 1.4;
    }
    main.install-guide .grain:hover{
    color: #fff;
    background: hsla(0, 0%, 100%, 0.08);
    }
    main.install-guide .hollow{
    width: 1px;
    height: 14px;
    background: hsla(0, 0%, 100%, 0.15);
    flex-shrink: 0;
    }
    main.install-guide .cedar{
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    text-align: center;
    }
    main.install-guide .etch{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.4);
    margin: 0;
    line-height: 1.5;
    }
    @media (max-width: 600px) {main.install-guide .cipher{
    padding: 36px 16px 24px;
    }
    main.install-guide .flint{
    gap: 20px;
    }
    main.install-guide .dusk{
    flex-direction: column;
    gap: 4px;
    }
    main.install-guide .hollow{
    display: none;
    }
    main.install-guide .grain{
    padding: 8px 16px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.quick-start *{ box-sizing: border-box; }
    main.quick-start .xenon{
    background: linear-gradient(160deg, hsl(255, 57%, 53%) 0%, hsl(220, 60%, 45%) 50%, hsl(190, 55%, 40%) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.quick-start .xenon::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    }
    main.quick-start .xenon::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139,195,74,0.12) 0%, transparent 70%);
    border-radius: 50%;
    }
    main.quick-start .clamp{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.quick-start .helix{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 20px;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    font-family: var(--qs-font);
    }
    main.quick-start .xenon h1{
    color: #fff;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 18px;
    font-family: var(--qs-font);
    }
    main.quick-start .frost{
    color: rgba(255,255,255,0.88);
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.7;
    margin: 0 auto 32px;
    max-width: 640px;
    font-family: var(--qs-font);
    }
    main.quick-start .husk{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.quick-start .epoch{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qs-primary);
    color: hsl(90, 10%, 12%);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--qs-font);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(139,195,74,0.3);
    }
    main.quick-start .epoch:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(139,195,74,0.4);
    }
    main.quick-start .nimbus{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--qs-font);
    border: 1.5px solid rgba(255,255,255,0.25);
    transition: background 0.2s;
    }
    main.quick-start .nimbus:hover{
    background: rgba(255,255,255,0.2);
    }
    main.quick-start .shard{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.quick-start .slate{
    padding: 72px 24px;
    background: var(--qs-bg);
    }
    main.quick-start .haze{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    }
    main.quick-start .realm{
    background: var(--qs-white);
    border-radius: var(--qs-radius);
    padding: 32px 28px;
    box-shadow: var(--qs-shadow);
    border: 1px solid var(--qs-border);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    }
    main.quick-start .realm:hover{
    transform: translateY(-3px);
    box-shadow: var(--qs-shadow-lg);
    }
    main.quick-start .alder{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    }
    main.quick-start .alder.ivory{
    background: hsl(90, 60%, 92%);
    color: hsl(90, 71%, 35%);
    }
    main.quick-start .alder.knoll{
    background: hsl(255, 50%, 93%);
    color: hsl(255, 57%, 53%);
    }
    main.quick-start .alder.sigma{
    background: hsl(200, 50%, 92%);
    color: hsl(200, 60%, 40%);
    }
    main.quick-start .realm h3{
    font-size: 15px;
    font-weight: 700;
    color: var(--qs-text);
    margin: 0 0 8px;
    font-family: var(--qs-font);
    }
    main.quick-start .realm p{
    font-size: 14px;
    color: var(--qs-text-muted);
    margin: 0;
    line-height: 1.5;
    font-family: var(--qs-font);
    }
    main.quick-start .orbit{
    text-align: center;
    margin-bottom: 48px;
    }
    main.quick-start .orbit h2{
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    color: var(--qs-text);
    margin: 0 0 12px;
    font-family: var(--qs-font);
    }
    main.quick-start .orbit p{
    font-size: 16px;
    color: var(--qs-text-muted);
    margin: 0;
    line-height: 1.6;
    font-family: var(--qs-font);
    }
    main.quick-start .quill{
    padding: 72px 24px;
    background: var(--qs-white);
    }
    main.quick-start .vivid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto 64px;
    }
    main.quick-start .vivid:last-child{
    margin-bottom: 0;
    }
    main.quick-start .vivid.delta .apex{
    order: 2;
    }
    main.quick-start .vivid.delta .lunar{
    order: 1;
    }
    main.quick-start .jade{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--qs-secondary-light);
    color: var(--qs-step-accent);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    font-family: var(--qs-font);
    }
    main.quick-start .apex h2{
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: var(--qs-text);
    margin: 0 0 14px;
    font-family: var(--qs-font);
    }
    main.quick-start .apex p{
    font-size: 15px;
    color: var(--qs-text-muted);
    line-height: 1.7;
    margin: 0 0 20px;
    font-family: var(--qs-font);
    }
    main.quick-start .notch{
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    }
    main.quick-start .notch li{
    font-size: 14px;
    color: var(--qs-text);
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    line-height: 1.6;
    font-family: var(--qs-font);
    }
    main.quick-start .notch li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 8px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: hsl(90, 60%, 92%);
    color: hsl(90, 71%, 35%);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    }
    main.quick-start .lunar{
    border-radius: var(--qs-radius);
    overflow: hidden;
    box-shadow: var(--qs-shadow-lg);
    border: 1px solid var(--qs-border);
    }
    main.quick-start .lunar img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.quick-start .vale{
    background: hsl(220, 20%, 16%);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 16px 0 0;
    overflow-x: auto; color: #ffffff;}
    main.quick-start .vale code{
    color: hsl(90, 60%, 70%);
    font-size: 13px;
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    line-height: 1.7;
    white-space: pre;
    }
    main.quick-start .vale .zinc{
    color: hsl(220, 10%, 50%);
    }
    main.quick-start .vale .thorn{
    color: hsl(200, 70%, 70%);
    }
    main.quick-start .pulse{
    padding: 72px 24px;
    background: var(--qs-bg);
    }
    main.quick-start .moss{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    }
    main.quick-start .crest{
    background: var(--qs-white);
    border-radius: var(--qs-radius);
    padding: 28px;
    box-shadow: var(--qs-shadow);
    border: 1px solid var(--qs-border);
    display: flex;
    gap: 18px;
    align-items: flex-start;
    }
    main.quick-start .basalt{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    }
    main.quick-start .basalt.plume{ background: hsl(255, 50%, 93%); }
    main.quick-start .basalt.birch{ background: hsl(90, 60%, 92%); }
    main.quick-start .basalt.alloy{ background: hsl(200, 50%, 92%); }
    main.quick-start .basalt.wren{ background: hsl(30, 60%, 92%); }
    main.quick-start .crest h3{
    font-size: 15px;
    font-weight: 700;
    color: var(--qs-text);
    margin: 0 0 6px;
    font-family: var(--qs-font);
    }
    main.quick-start .crest p{
    font-size: 14px;
    color: var(--qs-text-muted);
    margin: 0;
    line-height: 1.6;
    font-family: var(--qs-font);
    }
    main.quick-start .latch{
    display: inline-block;
    background: var(--qs-bg);
    border: 1px solid var(--qs-border);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 12px;
    font-family: "SF Mono", monospace;
    color: var(--qs-text);
    margin: 0 2px;
    }
    main.quick-start .ridge{
    padding: 72px 24px;
    background: var(--qs-white);
    }
    main.quick-start .yarn{
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.quick-start .cirrus{
    background: var(--qs-bg);
    border-radius: var(--qs-radius-sm);
    overflow: hidden;
    border: 1px solid var(--qs-border);
    }
    main.quick-start .cirrus summary{
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--qs-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--qs-font);
    transition: background 0.15s;
    }
    main.quick-start .cirrus summary:hover{
    background: hsl(90, 7%, 92%);
    }
    main.quick-start .cirrus summary::after{
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: var(--qs-text-muted);
    transition: transform 0.2s;
    }
    main.quick-start .cirrus[open] summary::after{
    content: "−";
    }
    main.quick-start .cirrus summary::-webkit-details-marker{
    display: none;
    }
    main.quick-start .umber{
    padding: 0 24px 18px;
    font-size: 14px;
    color: var(--qs-text-muted);
    line-height: 1.7;
    font-family: var(--qs-font);
    }
    main.quick-start .umber a{
    color: var(--qs-secondary);
    text-decoration: none;
    font-weight: 500;
    }
    main.quick-start .umber a:hover{
    text-decoration: underline;
    }
    main.quick-start .qs-cta{
    padding: 72px 24px;
    background: linear-gradient(160deg, hsl(255, 57%, 53%) 0%, hsl(220, 60%, 45%) 100%);
    text-align: center; color: #ffffff;}
    main.quick-start .qs-cta-inner{
    max-width: 600px;
    margin: 0 auto;
    }
    main.quick-start .qs-cta h2{
    color: #fff;
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    margin: 0 0 14px;
    font-family: var(--qs-font);
    }
    main.quick-start .qs-cta p{
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
    font-family: var(--qs-font);
    }
    main.quick-start .qs-cta-actions{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.quick-start .qs-footer{
    background: hsl(220, 20%, 14%);
    padding: 40px 24px;
    text-align: center; color: #ffffff;}
    main.quick-start .qs-footer-brand{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    font-family: var(--qs-font);
    }
    main.quick-start .qs-footer-tagline{
    font-size: 13px;
    color: hsl(220, 10%, 55%);
    margin: 0 0 20px;
    font-family: var(--qs-font);
    }
    main.quick-start .qs-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
    }
    main.quick-start .qs-footer-links a{
    font-size: 13px;
    color: hsl(220, 10%, 60%);
    text-decoration: none;
    font-family: var(--qs-font);
    transition: color 0.15s;
    }
    main.quick-start .qs-footer-links a:hover{
    color: #fff;
    }
    main.quick-start .qs-footer-copy{
    font-size: 12px;
    color: hsl(220, 10%, 45%);
    margin: 0;
    font-family: var(--qs-font);
    }
    @media (max-width: 768px) {main.quick-start .haze{
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
    }
    main.quick-start .vivid{
    grid-template-columns: 1fr;
    gap: 28px;
    }
    main.quick-start .vivid.delta .apex, main.quick-start .vivid.delta .lunar{
    order: unset;
    }
    main.quick-start .moss{
    grid-template-columns: 1fr;
    }
    main.quick-start .xenon{
    padding: 60px 20px 48px;
    }}
    main.quick-start .karma{
    background: var(--text-color, hsl(255, 12%, 16%));
    padding: 40px 24px 32px;
    margin-top: 80px;
    }
    main.quick-start .inlet{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    }
    main.quick-start .surge{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }
    main.quick-start .weld{
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    }
    main.quick-start .glyph{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    letter-spacing: 0.2px;
    }
    main.quick-start .jewel{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.quick-start .loom{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.65);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    }
    main.quick-start .loom:hover{
    color: #ffffff;
    background: hsla(0, 0%, 100%, 0.08);
    }
    main.quick-start .pike{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.2);
    flex-shrink: 0;
    }
    main.quick-start .bolt{
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.35);
    padding-top: 16px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    width: 100%;
    max-width: 480px;
    text-align: center;
    }
    @media (max-width: 640px) {main.quick-start .karma{
    padding: 32px 16px 24px;
    margin-top: 48px;
    }
    main.quick-start .jewel{
    gap: 4px;
    }
    main.quick-start .loom{
    font-size: 12px;
    padding: 4px 6px;
    }
    main.quick-start .bolt{
    font-size: 11px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.changelog *{ box-sizing: border-box; }
    main.changelog .dusk{
    background: linear-gradient(135deg, hsl(255, 57%, 53%) 0%, hsl(255, 50%, 42%) 50%, hsl(240, 45%, 35%) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    position: relative;
    overflow: hidden; color: #ffffff;}
    main.changelog .dusk::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    }
    main.changelog .dusk::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(255, 80%, 70%, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    }
    main.changelog .mosaic{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.changelog .dusk h1{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.35;
    }
    main.changelog .vortex{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.82);
    margin: 0 0 28px;
    line-height: 1.6;
    }
    main.changelog .whirl{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.changelog .cedar{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--cl-primary);
    color: hsl(90, 10%, 12%);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px hsla(90, 71%, 53%, 0.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.changelog .cedar:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px hsla(90, 71%, 53%, 0.45);
    }
    main.changelog .sapphire{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: transparent;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid hsla(0, 0%, 100%, 0.4);
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.changelog .sapphire:hover{
    background: hsla(0, 0%, 100%, 0.1);
    border-color: hsla(0, 0%, 100%, 0.7);
    }
    main.changelog .nectar{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.changelog .phantom{
    background: var(--cl-surface, #ffffff);
    border-bottom: 1px solid var(--cl-border);
    padding: 20px 24px;
    }
    main.changelog .kelp{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    }
    main.changelog .depot{
    text-align: center;
    }
    main.changelog .obsidian{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-secondary);
    }
    main.changelog .fable{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem;
    color: var(--cl-text-muted);
    margin-top: 2px;
    }
    main.changelog .aurora{
    padding: 48px 24px 64px;
    background: var(--cl-bg);
    }
    main.changelog .opal{
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    }
    main.changelog .quartz{
    padding: 8px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--cl-border);
    border-radius: 50px;
    background: var(--cl-surface, #ffffff);
    color: var(--cl-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    }
    main.changelog .quartz:hover{
    border-color: var(--cl-secondary);
    color: var(--cl-secondary);
    }
    main.changelog .quartz.grove{
    background: var(--cl-secondary);
    color: #ffffff;
    border-color: var(--cl-secondary);
    }
    main.changelog .basalt{
    position: relative;
    padding-left: 32px;
    }
    main.changelog .basalt::before{
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--cl-secondary), var(--cl-border));
    border-radius: 2px;
    }
    main.changelog .pulse{
    position: relative;
    margin-bottom: 36px;
    }
    main.changelog .pulse::before{
    content: "";
    position: absolute;
    left: -29px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cl-secondary);
    border: 3px solid var(--cl-bg);
    z-index: 1;
    }
    main.changelog .pulse.flint::before{
    width: 16px;
    height: 16px;
    left: -31px;
    top: 22px;
    background: var(--cl-primary);
    box-shadow: 0 0 0 4px hsla(90, 71%, 53%, 0.25);
    }
    main.changelog .elbow{
    background: var(--cl-surface, #ffffff);
    border-radius: var(--cl-radius);
    border: 1px solid var(--cl-border);
    overflow: hidden;
    transition: box-shadow 0.2s;
    }
    main.changelog .elbow:hover{
    box-shadow: var(--cl-shadow-md);
    }
    main.changelog .velvet{
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cl-border);
    }
    main.changelog .summit{
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cl-text, #1a1a1a);
    }
    main.changelog .zenith{
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.changelog .marble{
    background: hsla(90, 71%, 53%, 0.15);
    color: hsl(90, 71%, 35%);
    }
    main.changelog .tundra{
    background: hsla(210, 70%, 55%, 0.12);
    color: hsl(210, 70%, 42%);
    }
    main.changelog .haze{
    background: hsla(0, 70%, 55%, 0.1);
    color: hsl(0, 60%, 45%);
    }
    main.changelog .cobalt{
    margin-left: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    color: var(--cl-text-muted);
    }
    main.changelog .ridgeline{
    padding: 20px 24px 24px;
    }
    main.changelog .nimbus{
    margin-bottom: 18px;
    }
    main.changelog .nimbus:last-child{
    margin-bottom: 0;
    }
    main.changelog .nimbus h3{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-text, #1a1a1a);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.changelog .crimson{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.72rem;
    flex-shrink: 0;
    }
    main.changelog .falcon{
    background: hsla(90, 71%, 53%, 0.15);
    color: hsl(90, 71%, 35%);
    }
    main.changelog .vapor{
    background: hsla(210, 70%, 55%, 0.12);
    color: hsl(210, 70%, 42%);
    }
    main.changelog .glacier{
    background: hsla(30, 90%, 55%, 0.12);
    color: hsl(30, 70%, 40%);
    }
    main.changelog .lumen{
    background: hsla(0, 70%, 55%, 0.1);
    color: hsl(0, 60%, 45%);
    }
    main.changelog .onyx{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    main.changelog .onyx li{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    color: var(--cl-text, #1a1a1a);
    line-height: 1.6;
    padding: 4px 0 4px 28px;
    position: relative;
    }
    main.changelog .onyx li::before{
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cl-border);
    }
    main.changelog .cl-screenshot-section{
    padding: 48px 24px;
    background: var(--cl-surface, #ffffff);
    border-top: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
    }
    main.changelog .cl-screenshot-section h2{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cl-text, #1a1a1a);
    text-align: center;
    margin: 0 0 8px;
    }
    main.changelog .cl-screenshot-subtitle{
    text-align: center;
    font-size: 0.95rem;
    color: var(--cl-text-muted);
    margin: 0 0 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.changelog .cl-screenshot-wrap{
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--cl-radius);
    overflow: hidden;
    box-shadow: var(--cl-shadow-md);
    border: 1px solid var(--cl-border);
    }
    main.changelog .cl-screenshot-wrap img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.changelog .cl-cta-section{
    padding: 56px 24px;
    background: var(--cl-bg);
    text-align: center;
    }
    main.changelog .cl-cta-card{
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(135deg, hsl(255, 57%, 53%), hsl(255, 50%, 42%));
    border-radius: var(--cl-radius);
    padding: 40px 32px;
    box-shadow: 0 8px 32px hsla(255, 57%, 53%, 0.25); color: #ffffff;}
    main.changelog .cl-cta-card h2{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
    }
    main.changelog .cl-cta-card p{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    color: hsla(0, 0%, 100%, 0.8);
    margin: 0 0 24px;
    line-height: 1.6;
    }
    main.changelog .cl-cta-actions{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.changelog .cl-footer{
    background: hsl(90, 10%, 12%);
    padding: 40px 24px;
    text-align: center; color: #ffffff;}
    main.changelog .cl-footer-brand{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    }
    main.changelog .cl-footer-tagline{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.5);
    margin: 0 0 20px;
    }
    main.changelog .cl-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    }
    main.changelog .cl-footer-links a{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.6);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.changelog .cl-footer-links a:hover{
    color: var(--cl-primary);
    }
    main.changelog .cl-footer-copy{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.78rem;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 0;
    }
    @media (max-width: 640px) {main.changelog .dusk{
    padding: 60px 20px 48px;
    }
    main.changelog .kelp{
    gap: 24px;
    }
    main.changelog .velvet{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    }
    main.changelog .cobalt{
    margin-left: 0;
    }
    main.changelog .basalt{
    padding-left: 24px;
    }
    main.changelog .pulse::before{
    left: -21px;
    }
    main.changelog .pulse.flint::before{
    left: -23px;
    }
    main.changelog .opal{
    gap: 6px;
    }
    main.changelog .quartz{
    padding: 6px 14px;
    font-size: 0.8rem;
    }}
    main.changelog .unity{
    width: 100%;
    background: var(--text-color, hsl(255, 12%, 16%));
    border-top: 1px solid hsla(255, 20%, 60%, 0.12);
    padding: 28px 24px;
    box-sizing: border-box;
    }
    main.changelog .jade{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.changelog .axiom{
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    }
    main.changelog .torch{
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    }
    main.changelog .prism{
    font-size: 13px;
    color: hsla(255, 10%, 80%, 0.6);
    white-space: nowrap;
    }
    main.changelog .ivory{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.changelog .bloom{
    font-size: 13px;
    color: hsla(255, 10%, 80%, 0.72);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 0.2s ease);
    white-space: nowrap;
    }
    main.changelog .bloom:hover{
    color: #fff;
    background: hsla(255, 40%, 70%, 0.1);
    }
    main.changelog .coral{
    width: 1px;
    height: 14px;
    background: hsla(255, 20%, 70%, 0.2);
    flex: 0 0 1px;
    }
    @media (max-width: 600px) {main.changelog .jade{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    }
    main.changelog .axiom{
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    }
    main.changelog .ivory{
    gap: 4px;
    }}

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body {
    padding-top: var(--nav-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .cask7 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: hsla(90, 7%, 97%, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    }
    
    .galvanic {
    flex-shrink: 0;
    }
    .zephyr {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    }
    .saxo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    }
    .blotch {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    }
    
    .juniper {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
    .ember {
    position: relative;
    }
    .fog_ray {
    display: block;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .fog_ray:hover {
    color: var(--text-color);
    background: hsla(255, 30%, 50%, 0.07);
    }
    
    .crumble {
    flex-shrink: 0;
    }
    .prong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    }
    .prong:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    background: linear-gradient(135deg, hsl(255, 60%, 48%), hsl(270, 64%, 42%)); color: #ffffff;}
    .quilted {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    }
    
    .tremolo {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .tremolo:hover {
    background: hsla(255, 30%, 50%, 0.07);
    }
    .orc {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
    }
    
    .ratchet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: hsla(255, 20%, 10%, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease; color: #ffffff;}
    .ratchet.is-visible {
    display: block;
    opacity: 1;
    }
    
    .vortex3 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .vortex3.is-open {
    transform: translateX(0);
    }
    .fizzPop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .sluice {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }
    .pixel_hum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    }
    .pixel_hum:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--text-color);
    }
    .kv9 {
    list-style: none;
    padding: 8px 12px;
    flex: 1;
    }
    .lignite {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .lignite:hover {
    background: hsla(255, 30%, 50%, 0.07);
    color: var(--primary-color);
    }
    .dawnLit {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--border-color);
    }
    .duskMeld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), hsl(270, 60%, 46%));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(255, 57%, 40%, 0.3);
    transition: var(--transition);
    cursor: pointer;
    }
    .duskMeld:hover {
    box-shadow: 0 4px 16px hsla(255, 57%, 40%, 0.38);
    }
    
    @media (max-width: 900px) {.juniper,
    .crumble {
    display: none;
    }
    .tremolo {
    display: flex;
    }}
    @media (min-width: 901px) {.ratchet,
    .vortex3,
    .tremolo {
    display: none !important;
    }}
    .fog_ray.active {color: var(--text-color); background: hsla(255, 30%, 50%, 0.07);}
    .lignite.active {background: hsla(255, 30%, 50%, 0.07); color: var(--primary-color);}
    main.faq .nexus{
    position: relative;
    overflow: hidden;
    padding: 72px 24px 64px;
    background: linear-gradient(135deg, hsl(255, 57%, 53%) 0%, hsl(255, 47%, 42%) 50%, hsl(260, 50%, 35%) 100%);
    text-align: center;
    color: #fff;
    }
    main.faq .nexus::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.faq .nexus::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(90, 71%, 53%, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    }
    main.faq .nexus h1{
    position: relative;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 auto 16px;
    max-width: 700px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.faq .orbit{
    position: relative;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 32px;
    max-width: 620px;
    opacity: 0.9;
    }
    main.faq .shard{
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    }
    main.faq .shard input{
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid hsla(0, 0%, 100%, 0.25);
    border-radius: 14px;
    background: hsla(0, 0%, 100%, 0.12);
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    }
    main.faq .shard input::placeholder{
    color: hsla(0, 0%, 100%, 0.6);
    }
    main.faq .shard input:focus{
    border-color: hsl(90, 71%, 53%);
    background: hsla(0, 0%, 100%, 0.18);
    }
    main.faq .vale{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0.6;
    pointer-events: none;
    }
    main.faq .faq-categories{
    padding: 48px 24px 8px;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    }
    main.faq .faq-cat-btn{
    padding: 8px 20px;
    border-radius: 100px;
    border: 1.5px solid hsl(90, 10%, 82%);
    background: #fff;
    color: var(--text-color, hsl(90, 10%, 12%));
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    }
    main.faq .faq-cat-btn:hover, main.faq .faq-cat-btn.active{
    background: hsl(255, 57%, 53%);
    border-color: hsl(255, 57%, 53%);
    color: #fff;
    }
    main.faq .umbra{
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    }
    main.faq .kite{
    margin-bottom: 40px;
    }
    main.faq .kite h2{
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color, hsl(90, 10%, 12%));
    margin: 0 0 20px;
    padding-left: 14px;
    border-left: 4px solid hsl(255, 57%, 53%);
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.faq .jovial{
    background: #fff;
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.05);
    overflow: hidden;
    border: 1px solid hsl(90, 7%, 90%);
    transition: box-shadow 0.2s;
    }
    main.faq .jovial:hover{
    box-shadow: 0 4px 16px hsla(255, 57%, 53%, 0.08);
    }
    main.faq .glyph{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, hsl(90, 10%, 12%));
    line-height: 1.5;
    gap: 12px;
    font-family: inherit;
    transition: color 0.2s;
    }
    main.faq .glyph:hover{
    color: hsl(255, 57%, 53%);
    }
    main.faq .xeno{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    color: hsl(255, 57%, 53%);
    }
    main.faq .jovial.open .xeno{
    transform: rotate(180deg);
    }
    main.faq .monolith{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    }
    main.faq .jovial.open .monolith{
    max-height: 600px;
    }
    main.faq .wren{
    padding: 0 20px 20px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: hsl(90, 8%, 35%);
    }
    main.faq .wren p{
    margin: 0 0 10px;
    }
    main.faq .wren p:last-child{
    margin-bottom: 0;
    }
    main.faq .wren code{
    background: hsl(90, 7%, 93%);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.85rem;
    color: hsl(255, 50%, 45%);
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.faq .wren ol, main.faq .wren ul{
    margin: 8px 0;
    padding-left: 20px;
    }
    main.faq .wren li{
    margin-bottom: 4px;
    }
    main.faq .wren a{
    color: hsl(255, 57%, 53%);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.faq .wren a:hover{
    border-bottom-color: hsl(255, 57%, 53%);
    }
    main.faq .faq-banner{
    max-width: 840px;
    margin: 0 auto 64px;
    padding: 0 24px;
    }
    main.faq .faq-banner-inner{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    align-items: center;
    }
    main.faq .faq-banner-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    main.faq .faq-banner-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(255, 57%, 30%, 0.88) 0%, hsla(255, 50%, 45%, 0.82) 100%); color: #ffffff;}
    main.faq .faq-banner-content{
    position: relative;
    padding: 40px 36px;
    color: #fff;
    max-width: 520px;
    }
    main.faq .faq-banner-content h2{
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.4;
    }
    main.faq .faq-banner-content p{
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0 0 24px;
    opacity: 0.9;
    }
    main.faq .faq-cta-btn{
    display: inline-block;
    padding: 12px 32px;
    background: hsl(90, 71%, 53%);
    color: hsl(90, 10%, 12%);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px hsla(90, 71%, 53%, 0.35);
    }
    main.faq .faq-cta-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsla(90, 71%, 53%, 0.45);
    }
    main.faq .faq-contact{
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px 72px;
    text-align: center;
    }
    main.faq .faq-contact h2{
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color, hsl(90, 10%, 12%));
    margin: 0 0 12px;
    }
    main.faq .faq-contact p{
    font-size: 0.92rem;
    color: hsl(90, 8%, 45%);
    line-height: 1.7;
    margin: 0 0 28px;
    }
    main.faq .faq-contact-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    }
    main.faq .faq-contact-card{
    background: #fff;
    border-radius: 14px;
    padding: 28px 20px;
    border: 1px solid hsl(90, 7%, 90%);
    transition: box-shadow 0.2s, transform 0.2s;
    }
    main.faq .faq-contact-card:hover{
    box-shadow: 0 6px 20px hsla(255, 57%, 53%, 0.08);
    transform: translateY(-2px);
    }
    main.faq .faq-contact-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    background: hsla(255, 57%, 53%, 0.08);
    color: #ffffff;
    }
    main.faq .faq-contact-card h3{
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-color, hsl(90, 10%, 12%));
    }
    main.faq .faq-contact-card p{
    font-size: 0.82rem;
    color: hsl(90, 8%, 50%);
    margin: 0;
    line-height: 1.6;
    }
    main.faq .plume{
    background: hsl(90, 10%, 12%);
    color: hsla(0, 0%, 100%, 0.65);
    padding: 40px 24px;
    text-align: center;
    }
    main.faq .helix{
    max-width: 840px;
    margin: 0 auto;
    }
    main.faq .totem{
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    }
    main.faq .faq-footer-slogan{
    font-size: 0.8rem;
    margin: 0 0 20px;
    opacity: 0.6;
    }
    main.faq .epoch{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    }
    main.faq .epoch a{
    color: hsla(0, 0%, 100%, 0.6);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
    }
    main.faq .epoch a:hover{
    color: hsl(90, 71%, 53%);
    }
    main.faq .faq-footer-copy{
    font-size: 0.78rem;
    opacity: 0.5;
    margin: 0;
    }
    @media (max-width: 768px) {main.faq .nexus{
    padding: 56px 20px 48px;
    }
    main.faq .nexus h1{
    font-size: 1.65rem;
    }
    main.faq .faq-contact-cards{
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
    }
    main.faq .faq-banner-content{
    padding: 28px 24px;
    }
    main.faq .faq-banner-content h2{
    font-size: 1.15rem;
    }
    main.faq .faq-categories{
    padding: 32px 16px 8px;
    }}
    @media (max-width: 480px) {main.faq .nexus h1{
    font-size: 1.4rem;
    }
    main.faq .orbit{
    font-size: 0.92rem;
    }
    main.faq .glyph{
    padding: 14px 16px;
    font-size: 0.88rem;
    }
    main.faq .wren{
    padding: 0 16px 16px;
    font-size: 0.85rem;
    }}
    main.faq .plume{
    background: hsl(255, 16%, 14%);
    padding: 48px 24px 32px;
    color: hsla(0, 0%, 100%, 0.75);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    main.faq .helix{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.faq .timber{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    }
    main.faq .totem{
    flex: 0 0 auto;
    }
    main.faq .urchin{
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    }
    main.faq .delta{
    margin: 8px 0 0;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    line-height: 1.5;
    }
    main.faq .epoch{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 auto;
    }
    main.faq .inlet{
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.65);
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    background: hsla(255, 30%, 50%, 0.1);
    transition: var(--transition, all 0.2s ease);
    line-height: 1.4;
    }
    main.faq .inlet:hover{
    color: #fff;
    background: hsla(255, 30%, 50%, 0.22);
    }
    main.faq .wicker{
    height: 1px;
    background: hsla(255, 20%, 60%, 0.12);
    margin: 32px 0 24px;
    }
    main.faq .yarn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    }
    main.faq .rune{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.38);
    margin: 0;
    flex: 1 1 auto;
    }
    main.faq .crest{
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    }
    main.faq .lattice{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 6px);
    color: hsla(0, 0%, 100%, 0.45);
    transition: var(--transition, all 0.2s ease);
    }
    main.faq .lattice:hover{
    color: #fff;
    background: hsla(255, 30%, 50%, 0.18);
    }
    main.faq .quarry{
    width: 18px;
    height: 18px;
    }
    @media (max-width: 640px) {main.faq .plume{
    padding: 36px 20px 28px;
    }
    main.faq .timber{
    flex-direction: column;
    gap: 24px;
    }
    main.faq .epoch{
    gap: 6px;
    }
    main.faq .yarn{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    }
    main.faq .crest{
    align-self: flex-start;
    }}

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