:root {
  --primary-color: hsl(87, 52%, 46%);
  --secondary-color: hsl(184, 44%, 42%);
  --bg-color: hsl(87, 6%, 96%);
  --text-color: hsl(87, 10%, 9%);
  --text-muted: hsl(87, 4%, 46%);
  --border-color: rgba(0, 0, 0, 0.08);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --nav-height: 60px;
  --max-width: 1140px;
  --transition: all 0.25s ease;
  --nav-bg: var(--bg-color);
  --btn-text: #ffffff;
  --wps-primary: hsl(87, 62%, 45%);
  --wps-primary-dark: hsl(87, 62%, 38%);
  --wps-secondary: hsl(184, 50%, 45%);
  --wps-secondary-dark: hsl(184, 50%, 38%);
  --wps-text: hsl(87, 10%, 9%);
  --wps-text-muted: hsl(87, 5%, 42%);
  --wps-bg: hsl(87, 6%, 96%);
  --wps-bg-alt: hsl(87, 6%, 92%);
  --wps-surface: #ffffff;
  --wps-border: hsl(87, 6%, 88%);
  --wps-radius-sm: 8px;
  --wps-radius-md: 14px;
  --wps-radius-lg: 20px;
  --wps-radius-xl: 28px;
  --wps-font-display: "Playfair Display", Georgia, serif;
  --wps-font-body: "Inter", -apple-system, sans-serif;
  --dl-primary: hsl(87, 62%, 45%);
  --dl-primary-dark: hsl(87, 62%, 38%);
  --dl-secondary: hsl(184, 50%, 45%);
  --dl-secondary-dark: hsl(184, 50%, 38%);
  --dl-text: hsl(87, 10%, 9%);
  --dl-text-muted: hsl(87, 5%, 42%);
  --dl-bg: hsl(87, 6%, 96%);
  --dl-surface: hsl(0, 0%, 100%);
  --dl-border: hsl(87, 6%, 88%);
  --dl-radius: 14px;
  --dl-radius-sm: 8px;
  --feat-primary: hsl(87, 62%, 45%);
  --feat-primary-light: hsl(87, 50%, 92%);
  --feat-secondary: hsl(184, 50%, 45%);
  --feat-secondary-light: hsl(184, 40%, 92%);
  --feat-text: hsl(87, 10%, 9%);
  --feat-text-muted: hsl(87, 5%, 40%);
  --feat-bg: hsl(87, 6%, 96%);
  --feat-surface: hsl(0, 0%, 100%);
  --feat-border: hsl(87, 6%, 88%);
  --feat-radius: 16px;
  --feat-radius-sm: 10px;
  --feat-serif: "Playfair Display", Georgia, "Songti SC", serif;
  --feat-sans: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --page-primary: hsl(87, 62%, 55%);
  --page-primary-dark: hsl(87, 62%, 42%);
  --page-secondary: hsl(184, 50%, 55%);
  --page-secondary-dark: hsl(184, 50%, 40%);
  --page-text: hsl(87, 10%, 9%);
  --page-text-muted: hsl(87, 6%, 40%);
  --page-bg: hsl(87, 6%, 96%);
  --page-surface: hsl(0, 0%, 100%);
  --page-border: hsl(87, 6%, 88%);
  --page-radius: 14px;
  --page-radius-sm: 8px;
  --page-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --page-shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --guide-primary: hsl(87, 62%, 45%);
  --guide-primary-light: hsl(87, 50%, 92%);
  --guide-secondary: hsl(184, 50%, 45%);
  --guide-secondary-light: hsl(184, 40%, 92%);
  --guide-text: hsl(87, 10%, 9%);
  --guide-text-muted: hsl(87, 6%, 40%);
  --guide-bg: hsl(87, 6%, 96%);
  --guide-surface: #ffffff;
  --guide-border: hsl(87, 6%, 88%);
  --guide-radius: 14px;
  --guide-radius-sm: 8px;
  --guide-serif: "Playfair Display", Georgia, serif;
  --guide-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --cl-primary: hsl(87, 62%, 55%);
  --cl-primary-dark: hsl(87, 62%, 42%);
  --cl-secondary: hsl(184, 50%, 55%);
  --cl-secondary-dark: hsl(184, 50%, 40%);
  --cl-text: hsl(87, 10%, 9%);
  --cl-text-muted: hsl(87, 6%, 42%);
  --cl-bg: hsl(87, 6%, 96%);
  --cl-surface: hsl(0, 0%, 100%);
  --cl-border: hsl(87, 6%, 88%);
  --cl-tag-new: hsl(87, 62%, 55%);
  --cl-tag-fix: hsl(184, 50%, 55%);
  --cl-tag-improve: hsl(260, 40%, 62%);
  --cl-tag-remove: hsl(0, 0%, 58%);
  --faq-primary: hsl(87, 62%, 55%);
  --faq-primary-dark: hsl(87, 62%, 40%);
  --faq-secondary: hsl(184, 50%, 55%);
  --faq-secondary-dark: hsl(184, 50%, 40%);
  --faq-text: hsl(87, 10%, 9%);
  --faq-text-light: hsl(87, 8%, 35%);
  --faq-bg: hsl(87, 6%, 96%);
  --faq-card-bg: #ffffff;
  --faq-border: hsl(87, 6%, 88%);
  --faq-radius: 14px;
  --faq-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --faq-shadow-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  --faq-max-width: 860px;
}

*,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;800&family=Inter:wght@400;500;600&display=swap");
    main.index{
    font-family: var(--wps-font-body);
    color: var(--wps-text);
    background: var(--wps-bg);
    line-height: 1.6;
    overflow-x: hidden;
    }
    main.index *, main.index *::before, main.index *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    
    main.index .basalt{
    position: relative;
    padding: 100px 24px 80px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 12%, 97%) 0%, hsl(184, 14%, 94%) 100%);
    overflow: hidden;
    }
    main.index .basalt::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(87, 62%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.index .basalt::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(184, 50%, 55%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.index .cascade{
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.index .basalt h1{
    font-family: var(--wps-font-display);
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--wps-text);
    margin-bottom: 20px;
    }
    main.index .basalt h1 span{
    display: inline;
    background: linear-gradient(135deg, var(--wps-primary), var(--wps-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.index .bloom_arc{
    font-size: 1.1rem;
    color: var(--wps-text-muted);
    max-width: 540px;
    margin: 0 auto 36px;
    line-height: 1.7;
    }
    main.index .crestNova{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.index .trellis{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--wps-radius-md);
    font-family: var(--wps-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }
    main.index .trellis:hover{
    transform: translateY(-1px);
    }
    main.index .echo_pine{
    background: linear-gradient(135deg, var(--wps-primary), var(--wps-primary-dark));
    color: #fff;
    box-shadow: 0 4px 18px hsla(87, 62%, 45%, 0.3);
    }
    main.index .echo_pine:hover{
    box-shadow: 0 6px 24px hsla(87, 62%, 45%, 0.4);
    }
    main.index .qm6{
    background: var(--wps-surface);
    color: var(--wps-text);
    border: 1.5px solid var(--wps-border);
    }
    main.index .qm6:hover{
    border-color: var(--wps-primary);
    color: var(--wps-primary-dark);
    }
    main.index .rx2m{
    font-size: 1.15em;
    }
    main.index .quarry{
    margin-top: 18px;
    font-size: 0.8rem;
    color: var(--wps-text-muted);
    }
    
    main.index .rune_spark{
    padding: 0 24px 80px;
    margin-top: -10px;
    position: relative;
    z-index: 1;
    }
    main.index .yt7{
    max-width: 920px;
    margin: 0 auto;
    border-radius: var(--wps-radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px hsla(87, 10%, 9%, 0.1), 0 2px 8px hsla(87, 10%, 9%, 0.05);
    border: 1px solid var(--wps-border);
    background: var(--wps-surface);
    }
    main.index .osprey{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: hsl(87, 6%, 94%);
    border-bottom: 1px solid var(--wps-border);
    }
    main.index .shard_veil{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hsl(87, 6%, 80%);
    }
    main.index .peakIron{
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    }
    
    main.index .mosaic{
    padding: 80px 24px;
    }
    main.index .bz3w{
    background: var(--wps-surface);
    }
    main.index .thornDew{
    text-align: center;
    max-width: 600px;
    margin: 0 auto 52px;
    }
    main.index .thornDew h2{
    font-family: var(--wps-font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    color: var(--wps-text);
    }
    main.index .thornDew p{
    color: var(--wps-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    }
    
    main.index .marrow{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
    }
    main.index .fathom{
    padding: 32px 28px;
    border-radius: var(--wps-radius-lg);
    background: var(--wps-bg);
    border: 1px solid var(--wps-border);
    transition: box-shadow 0.25s, transform 0.25s;
    }
    main.index .fathom:hover{
    box-shadow: 0 8px 30px hsla(87, 10%, 9%, 0.06);
    transform: translateY(-3px);
    }
    main.index .wyvern{
    width: 44px;
    height: 44px;
    border-radius: var(--wps-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 18px;
    color: #fff;
    }
    main.index .glintSky{ background: var(--wps-primary); }
    main.index .fable{ background: var(--wps-secondary); }
    main.index .quirk{ background: hsl(260, 45%, 58%); }
    main.index .vapor_knot{ background: hsl(350, 50%, 55%); }
    main.index .jn4{ background: hsl(210, 50%, 55%); }
    main.index .aurora{ background: hsl(40, 60%, 52%); }
    main.index .fathom h3{
    font-family: var(--wps-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    }
    main.index .fathom p{
    font-size: 0.88rem;
    color: var(--wps-text-muted);
    line-height: 1.65;
    }
    
    main.index .kindleRay{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
    }
    main.index .dp4k{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    border-radius: var(--wps-radius-lg);
    background: var(--wps-bg);
    border: 1px solid var(--wps-border);
    text-decoration: none;
    color: var(--wps-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.index .dp4k:hover{
    border-color: var(--wps-primary);
    box-shadow: 0 4px 16px hsla(87, 62%, 45%, 0.1);
    }
    main.index .riddle{
    font-size: 1.8rem;
    }
    main.index .ember_drift{
    font-weight: 600;
    font-size: 0.9rem;
    }
    main.index .pixel_fen{
    font-size: 0.75rem;
    color: var(--wps-text-muted);
    }
    
    main.index .flux_gem{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    }
    main.index .uw8{
    border-radius: var(--wps-radius-lg);
    overflow: hidden;
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    text-decoration: none;
    color: var(--wps-text);
    transition: box-shadow 0.25s, transform 0.25s;
    }
    main.index .uw8:hover{
    box-shadow: 0 10px 30px hsla(87, 10%, 9%, 0.08);
    transform: translateY(-2px);
    }
    main.index .lx5{
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    }
    main.index .nimbus{
    padding: 22px 24px;
    }
    main.index .nimbus h3{
    font-family: var(--wps-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    }
    main.index .nimbus p{
    font-size: 0.85rem;
    color: var(--wps-text-muted);
    line-height: 1.6;
    }
    
    main.index .hk9{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 720px;
    margin: 0 auto;
    }
    main.index .granite{
    text-align: center;
    padding: 28px 16px;
    }
    main.index .duskOrb{
    font-family: var(--wps-font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--wps-primary), var(--wps-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    }
    main.index .gossamer{
    font-size: 0.85rem;
    color: var(--wps-text-muted);
    margin-top: 6px;
    }
    
    main.index .cruxFold{
    max-width: 860px;
    margin: 0 auto 80px;
    padding: 56px 40px;
    border-radius: var(--wps-radius-xl);
    background: linear-gradient(135deg, var(--wps-text) 0%, hsl(87, 10%, 18%) 100%);
    text-align: center;
    color: #fff;
    }
    main.index .cruxFold h2{
    font-family: var(--wps-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 12px;
    }
    main.index .cruxFold p{
    font-size: 0.95rem;
    opacity: 0.75;
    margin-bottom: 28px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    }
    main.index .blazeThorn{
    background: linear-gradient(135deg, var(--wps-primary), hsl(120, 50%, 48%));
    color: #fff;
    box-shadow: 0 4px 20px hsla(87, 62%, 45%, 0.35);
    padding: 16px 40px;
    font-size: 1rem;
    }
    main.index .blazeThorn:hover{
    box-shadow: 0 6px 28px hsla(87, 62%, 45%, 0.5);
    }
    
    main.index .cipher{
    padding: 40px 24px;
    text-align: center;
    border-top: 1px solid var(--wps-border);
    background: var(--wps-surface);
    }
    main.index .velvet_ash{
    font-family: var(--wps-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wps-text);
    margin-bottom: 10px;
    }
    main.index .wps-footer__links{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    }
    main.index .wps-footer__links a{
    font-size: 0.82rem;
    color: var(--wps-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.index .wps-footer__links a:hover{
    color: var(--wps-primary);
    }
    main.index .summit{
    font-size: 0.78rem;
    color: var(--wps-text-muted);
    }
    
    @media (max-width: 768px) {main.index .basalt{ padding: 72px 20px 60px; }
    main.index .marrow{ grid-template-columns: 1fr; gap: 14px; }
    main.index .kindleRay{ grid-template-columns: repeat(2, 1fr); }
    main.index .flux_gem{ grid-template-columns: 1fr; }
    main.index .hk9{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
    main.index .cruxFold{ margin: 0 16px 60px; padding: 40px 24px; }
    main.index .mosaic{ padding: 60px 20px; }}
    @media (max-width: 480px) {main.index .kindleRay{ grid-template-columns: 1fr 1fr; }
    main.index .hk9{ grid-template-columns: 1fr; }
    main.index .crestNova{ flex-direction: column; align-items: center; }
    main.index .trellis{ width: 100%; max-width: 280px; justify-content: center; }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;800&family=Inter:wght@400;500;600&display=swap");
    main.download .frond_hex{
    position: relative;
    padding: 80px 24px 60px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 15%, 94%) 0%, hsl(184, 12%, 93%) 100%);
    overflow: hidden;
    }
    main.download .frond_hex::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(87, 62%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .frond_hex h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--dl-text, #161a11);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    }
    main.download .kp3{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    color: var(--dl-text-muted, #646856);
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.65;
    }
    main.download .xw2{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 44px;
    background: var(--dl-primary, hsl(87, 62%, 45%));
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px hsla(87, 62%, 45%, 0.35);
    transition: all 0.25s ease;
    }
    main.download .xw2:hover{
    background: var(--dl-primary-dark, hsl(87, 62%, 38%));
    box-shadow: 0 6px 28px hsla(87, 62%, 45%, 0.45);
    transform: translateY(-1px);
    }
    main.download .xw2 svg{
    width: 20px;
    height: 20px;
    fill: currentColor;
    }
    main.download .hazeRoot{
    display: inline-block;
    margin-top: 20px;
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: #ffffff;
    background: hsla(87, 10%, 9%, 0.05);
    padding: 6px 16px;
    border-radius: 20px;
    }
    main.download .driftElm{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.download .stratum{
    padding: 72px 24px;
    background: var(--dl-bg, hsl(87, 6%, 96%));
    }
    main.download .zenith{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--dl-text, #161a11);
    text-align: center;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.download .garnet{
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    color: var(--dl-text-muted, #646856);
    text-align: center;
    margin: 0 auto 48px;
    max-width: 480px;
    line-height: 1.6;
    }
    main.download .latch{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    }
    main.download .mantle{
    background: var(--dl-surface, #fff);
    border: 1px solid var(--dl-border, hsl(87, 6%, 88%));
    border-radius: var(--dl-radius, 14px);
    padding: 36px 24px 28px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    main.download .mantle:hover{
    box-shadow: 0 8px 32px hsla(87, 10%, 9%, 0.07);
    transform: translateY(-3px);
    }
    main.download .wisp_cog{
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(87, 62%, 55%, 0.08);
    border-radius: 14px;
    }
    main.download .wisp_cog svg{
    width: 26px;
    height: 26px;
    fill: var(--dl-primary, hsl(87, 62%, 45%));
    }
    main.download .mantle h3{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dl-text, #161a11);
    margin: 0 0 6px;
    }
    main.download .rustGale{
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: var(--dl-text-muted, #646856);
    margin: 0 0 20px;
    }
    main.download .brackFern{
    display: inline-block;
    padding: 10px 28px;
    background: var(--dl-primary, hsl(87, 62%, 45%));
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s ease;
    }
    main.download .brackFern:hover{
    background: var(--dl-primary-dark, hsl(87, 62%, 38%));
    }
    main.download .caldera{
    background: var(--dl-secondary, hsl(184, 50%, 45%));
    }
    main.download .caldera:hover{
    background: var(--dl-secondary-dark, hsl(184, 50%, 38%));
    }
    main.download .claspMoor{
    padding: 64px 24px;
    background: var(--dl-surface, #fff);
    }
    main.download .dz7{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    }
    main.download .pivot_elm{
    width: 100%;
    border-radius: var(--dl-radius, 14px);
    border: 1px solid var(--dl-border, hsl(87, 6%, 88%));
    }
    main.download .anvil h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dl-text, #161a11);
    margin: 0 0 16px;
    }
    main.download .anvil p{
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    color: var(--dl-text-muted, #646856);
    line-height: 1.7;
    margin: 0 0 24px;
    }
    main.download .anvil a{
    color: var(--dl-primary, hsl(87, 62%, 45%));
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.download .anvil a:hover{
    border-bottom-color: var(--dl-primary, hsl(87, 62%, 45%));
    }
    main.download .slateVow{
    padding: 64px 24px;
    background: var(--dl-bg, hsl(87, 6%, 96%));
    }
    main.download .fossil_bay{
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.download .quilt_dye{
    background: var(--dl-surface, #fff);
    border: 1px solid var(--dl-border, hsl(87, 6%, 88%));
    border-radius: var(--dl-radius, 14px);
    padding: 32px;
    }
    main.download .quilt_dye h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dl-text, #161a11);
    margin: 0 0 20px;
    }
    main.download .quilt_dye h3{
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dl-text, #161a11);
    margin: 16px 0 4px;
    }
    main.download .quilt_dye h3:first-of-type{
    margin-top: 0;
    }
    main.download .quilt_dye p, main.download .quilt_dye li{
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    color: var(--dl-text-muted, #646856);
    line-height: 1.65;
    margin: 0;
    }
    main.download .quilt_dye ul{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.download .quilt_dye li{
    padding: 6px 0;
    padding-left: 18px;
    position: relative;
    }
    main.download .quilt_dye li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--dl-primary, hsl(87, 62%, 45%));
    border-radius: 50%;
    }
    main.download .bq4{
    padding: 56px 24px;
    background: var(--dl-surface, #fff);
    }
    main.download .sprig{
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    }
    main.download .vf6{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 36px;
    flex-wrap: wrap;
    }
    main.download .obelisk{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    color: var(--dl-text, #161a11);
    font-weight: 500;
    }
    main.download .plume{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(87, 62%, 55%, 0.08);
    border-radius: 10px;
    }
    main.download .plume svg{
    width: 20px;
    height: 20px;
    fill: var(--dl-primary, hsl(87, 62%, 45%));
    }
    main.download .nexus{
    padding: 40px 24px;
    background: var(--dl-text, hsl(87, 10%, 9%));
    text-align: center;
    }
    main.download .morph{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.9);
    margin: 0 0 6px;
    }
    main.download .crumb_sol{
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: hsla(0, 0%, 100%, 0.45);
    margin: 0 0 16px;
    }
    main.download .wt5{
    display: flex;
    justify-content: center;
    gap: 24px;
    }
    main.download .wt5 a{
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .wt5 a:hover{
    color: hsla(0, 0%, 100%, 0.8);
    }
    @media (max-width: 860px) {main.download .latch{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .dz7{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.download .fossil_bay{
    grid-template-columns: 1fr;
    }}
    @media (max-width: 520px) {main.download .latch{
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
    }
    main.download .frond_hex{
    padding: 56px 20px 44px;
    }
    main.download .vf6{
    flex-direction: column;
    align-items: center;
    gap: 20px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;800&family=Inter:wght@400;500;600&display=swap");
    main.features .haze{
    padding: 100px 24px 80px;
    background: var(--feat-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.features .haze::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(87, 62%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .haze::after{
    content: "";
    position: absolute;
    bottom: -60px;
    left: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, hsla(184, 50%, 55%, 0.06) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .bolt{
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.features .rw3{
    display: inline-block;
    font-family: var(--feat-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--feat-primary);
    background: var(--feat-primary-light);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 28px;
    }
    main.features .haze h1{
    font-family: var(--feat-serif);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--feat-text, #1a1a1a);
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    }
    main.features .quartz{
    font-family: var(--feat-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--feat-text-muted, #555);
    max-width: 620px;
    margin: 0 auto 36px;
    }
    main.features .glacier{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.features .grove_tin{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--feat-sans);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--feat-primary);
    padding: 14px 32px;
    border-radius: var(--feat-radius-sm);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px hsla(87, 62%, 45%, 0.3);
    }
    main.features .grove_tin:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 24px hsla(87, 62%, 45%, 0.4);
    }
    main.features .axiom{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--feat-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--feat-text, #1a1a1a);
    background: var(--feat-surface);
    border: 1.5px solid var(--feat-border);
    padding: 14px 32px;
    border-radius: var(--feat-radius-sm);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    }
    main.features .axiom:hover{
    border-color: var(--feat-primary);
    background: var(--feat-primary-light);
    }
    
    main.features .pelican{
    padding: 0 24px 80px;
    background: var(--feat-bg);
    }
    main.features .raven{
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--feat-radius);
    overflow: hidden;
    box-shadow: 0 8px 40px hsla(87, 10%, 9%, 0.08);
    }
    main.features .raven img{
    width: 100%;
    height: auto;
    display: block;
    }
    
    main.features .beacon{
    padding: 80px 24px;
    background: var(--feat-surface);
    }
    main.features .gm8{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.features .dawnKelp{
    text-align: center;
    margin-bottom: 56px;
    }
    main.features .dawnKelp h2{
    font-family: var(--feat-serif);
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 700;
    color: var(--feat-text, #1a1a1a);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    }
    main.features .dawnKelp p{
    font-family: var(--feat-sans);
    font-size: 16px;
    color: var(--feat-text-muted, #555);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
    }
    main.features .crest{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    }
    main.features .tuft_rime{
    background: var(--feat-bg);
    border-radius: var(--feat-radius);
    padding: 36px 32px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    }
    main.features .tuft_rime:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 32px hsla(87, 10%, 9%, 0.06);
    border-color: var(--feat-border);
    }
    main.features .kernel{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    }
    main.features .apex{
    background: hsla(87, 62%, 55%, 0.12);
    color: var(--feat-primary);
    }
    main.features .delta{
    background: hsla(160, 50%, 50%, 0.12);
    color: hsl(160, 50%, 38%);
    }
    main.features .vexSilt{
    background: hsla(30, 70%, 55%, 0.12);
    color: hsl(30, 70%, 42%);
    }
    main.features .flint{
    background: hsla(0, 55%, 55%, 0.12);
    color: hsl(0, 55%, 45%);
    }
    main.features .tuft_rime h3{
    font-family: var(--feat-serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--feat-text, #1a1a1a);
    margin: 0 0 10px;
    }
    main.features .tuft_rime p{
    font-family: var(--feat-sans);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--feat-text-muted, #555);
    margin: 0;
    }
    
    main.features .moldCrest{
    padding: 80px 24px;
    background: var(--feat-bg);
    }
    main.features .cedar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    }
    main.features .plank_orb{
    direction: rtl;
    }
    main.features .plank_orb > *{
    direction: ltr;
    }
    main.features .falcon{
    border-radius: var(--feat-radius);
    overflow: hidden;
    box-shadow: 0 4px 24px hsla(87, 10%, 9%, 0.06);
    }
    main.features .falcon img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.features .rampart h2{
    font-family: var(--feat-serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: var(--feat-text, #1a1a1a);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    }
    main.features .rampart p{
    font-family: var(--feat-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--feat-text-muted, #555);
    margin: 0 0 24px;
    }
    main.features .fjord{
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.features .fjord li{
    font-family: var(--feat-sans);
    font-size: 14.5px;
    color: var(--feat-text, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.features .fjord li::before{
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--feat-primary-light);
    color: var(--feat-primary);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    }
    
    main.features .opal{
    padding: 80px 24px;
    background: var(--feat-surface);
    }
    main.features .ember{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.features .creedJaw{
    text-align: center;
    padding: 40px 28px;
    background: var(--feat-bg);
    border-radius: var(--feat-radius);
    transition: transform 0.2s;
    }
    main.features .creedJaw:hover{
    transform: translateY(-2px);
    }
    main.features .dusk{
    font-family: var(--feat-serif);
    font-size: 40px;
    font-weight: 800;
    color: var(--feat-primary);
    line-height: 1;
    margin-bottom: 8px;
    }
    main.features .ht6{
    font-family: var(--feat-sans);
    font-size: 13px;
    color: var(--feat-text-muted);
    margin-bottom: 16px;
    }
    main.features .creedJaw h3{
    font-family: var(--feat-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--feat-text, #1a1a1a);
    margin: 0 0 8px;
    }
    main.features .creedJaw p{
    font-family: var(--feat-sans);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--feat-text-muted, #555);
    margin: 0;
    }
    
    main.features .alloy{
    padding: 80px 24px;
    background: var(--feat-bg);
    }
    main.features .patina{
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--feat-radius);
    overflow: hidden;
    background: var(--feat-surface);
    border: 1px solid var(--feat-border);
    }
    main.features .jx9{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--feat-sans);
    font-size: 14.5px;
    }
    main.features .jx9 thead{
    background: var(--feat-text, #1a1a1a);
    color: #fff;
    }
    main.features .jx9 th{
    padding: 16px 24px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    }
    main.features .jx9 td{
    padding: 14px 24px;
    border-bottom: 1px solid var(--feat-border);
    color: var(--feat-text, #1a1a1a);
    }
    main.features .jx9 tbody tr:last-child td{
    border-bottom: none;
    }
    main.features .jx9 tbody tr:hover{
    background: hsla(87, 6%, 96%, 0.6);
    }
    main.features .phantom{
    color: var(--feat-primary);
    font-weight: 700;
    }
    main.features .feat-cross{
    color: hsl(0, 0%, 75%);
    }
    
    main.features .feat-cta{
    padding: 80px 24px;
    background: var(--feat-surface);
    text-align: center;
    }
    main.features .feat-cta-inner{
    max-width: 640px;
    margin: 0 auto;
    background: var(--feat-text, #1a1a1a);
    border-radius: var(--feat-radius);
    padding: 56px 40px;
    position: relative;
    overflow: hidden;
    }
    main.features .feat-cta-inner::before{
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, hsla(87, 62%, 55%, 0.15) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .feat-cta-inner h2{
    font-family: var(--feat-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    position: relative;
    }
    main.features .feat-cta-inner p{
    font-family: var(--feat-sans);
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.65);
    line-height: 1.6;
    margin: 0 0 32px;
    position: relative;
    }
    main.features .feat-btn-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--feat-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--feat-text, #1a1a1a);
    background: hsl(87, 62%, 55%);
    padding: 15px 36px;
    border-radius: var(--feat-radius-sm);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(87, 62%, 55%, 0.35);
    position: relative;
    }
    main.features .feat-btn-cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 28px hsla(87, 62%, 55%, 0.5);
    }
    
    main.features .feat-footer{
    padding: 48px 24px;
    background: var(--feat-text, #1a1a1a);
    text-align: center;
    }
    main.features .feat-footer-brand{
    font-family: var(--feat-serif);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    }
    main.features .feat-footer-slogan{
    font-family: var(--feat-sans);
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.4);
    margin-bottom: 20px;
    }
    main.features .feat-footer-links{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    }
    main.features .feat-footer-links a{
    font-family: var(--feat-sans);
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.55);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.features .feat-footer-links a:hover{
    color: hsl(87, 62%, 55%);
    }
    main.features .feat-footer-copy{
    font-family: var(--feat-sans);
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.3);
    }
    
    @media (max-width: 768px) {main.features .crest{
    grid-template-columns: 1fr;
    }
    main.features .cedar, main.features .plank_orb{
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
    }
    main.features .ember{
    grid-template-columns: 1fr;
    }
    main.features .patina{
    overflow-x: auto;
    }
    main.features .feat-cta-inner{
    padding: 40px 24px;
    }
    main.features .haze{
    padding: 72px 20px 56px;
    }}
    @media (max-width: 480px) {main.features .tuft_rime{
    padding: 28px 24px;
    }
    main.features .glacier{
    flex-direction: column;
    align-items: center;
    }}
    main.features .saga{
    background: var(--text-color, #161816);
    padding: 48px 24px 32px;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.features .nebula{
    max-width: var(--max-width, 1140px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }
    main.features .surge{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.features .notch_vim{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    }
    main.features .spool_dun{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    letter-spacing: 0.3px;
    }
    main.features .cliffRune{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    }
    main.features .trove{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: var(--transition, all 0.25s ease);
    padding: 4px 6px;
    border-radius: var(--radius-sm, 4px);
    }
    main.features .trove:hover{
    color: var(--primary-color, hsl(87, 52%, 46%));
    }
    main.features .ny5{
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    }
    main.features .drift{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin: 8px 0 0;
    letter-spacing: 0.2px;
    }
    @media (max-width: 640px) {main.features .saga{
    padding: 36px 16px 24px;
    }
    main.features .cliffRune{
    gap: 8px;
    }
    main.features .trove{
    font-size: 12px;
    }
    main.features .ny5{
    display: none;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@400;500;600&display=swap");
    main.system-requirements *{ margin: 0; padding: 0; box-sizing: border-box; }
    main.system-requirements .nimbus{
    position: relative;
    overflow: hidden;
    padding: 80px 24px 64px;
    background: linear-gradient(168deg, hsl(87, 10%, 9%) 0%, hsl(210, 12%, 16%) 100%);
    color: #fff;
    text-align: center;
    }
    main.system-requirements .nimbus::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(87, 62%, 55%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.system-requirements .nimbus::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(184, 50%, 55%, 0.1) 0%, transparent 70%);
    pointer-events: none;
    }
    main.system-requirements .ridge{
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.system-requirements .basalt{
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: hsla(87, 62%, 55%, 0.15);
    color: var(--page-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    }
    main.system-requirements .nimbus h1{
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    }
    main.system-requirements .wren{
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.7);
    max-width: 560px;
    margin: 0 auto 32px;
    }
    main.system-requirements .alder{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-primary-dark) 100%);
    color: hsl(87, 10%, 9%);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px hsla(87, 62%, 55%, 0.3);
    }
    main.system-requirements .alder:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 24px hsla(87, 62%, 55%, 0.4);
    }
    main.system-requirements .alder svg{
    width: 16px;
    height: 16px;
    }
    main.system-requirements .loom{
    margin-top: 20px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.4);
    }
    
    main.system-requirements .sr-quicknav{
    max-width: 960px;
    margin: -28px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    }
    main.system-requirements .sr-quicknav-inner{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    background: var(--page-surface);
    border-radius: var(--page-radius);
    padding: 16px;
    box-shadow: var(--page-shadow-md);
    }
    main.system-requirements .sr-quicknav-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--page-radius-sm);
    text-decoration: none;
    color: var(--page-text, #333);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
    text-align: center;
    }
    main.system-requirements .sr-quicknav-item:hover{
    background: var(--page-bg);
    }
    main.system-requirements .sr-quicknav-icon{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    }
    main.system-requirements .sr-quicknav-icon.pike{ background: hsla(210, 70%, 50%, 0.1); color: hsl(210, 70%, 50%); }
    main.system-requirements .sr-quicknav-icon.mac{ background: hsla(0, 0%, 20%, 0.08); color: #ffffff; }
    main.system-requirements .sr-quicknav-icon.android{ background: hsla(140, 60%, 45%, 0.1); color: hsl(140, 60%, 40%); }
    main.system-requirements .sr-quicknav-icon.ios{ background: hsla(0, 0%, 40%, 0.08); color: #ffffff; }
    main.system-requirements .sr-quicknav-icon.linux{ background: hsla(40, 80%, 50%, 0.1); color: hsl(40, 80%, 40%); }
    
    main.system-requirements .aurora{
    max-width: 960px;
    margin: 0 auto;
    padding: 64px 24px 0;
    }
    main.system-requirements .wicker{
    margin-bottom: 32px;
    }
    main.system-requirements .wicker h2{
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--page-text, #333);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    }
    main.system-requirements .wicker p{
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--page-text-muted);
    line-height: 1.6;
    }
    
    main.system-requirements .husk{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    }
    main.system-requirements .quill{
    background: var(--page-surface);
    border-radius: var(--page-radius);
    border: 1px solid var(--page-border);
    overflow: hidden;
    transition: box-shadow 0.25s;
    }
    main.system-requirements .quill:hover{
    box-shadow: var(--page-shadow-md);
    }
    main.system-requirements .umber{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .zinc{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    }
    main.system-requirements .zinc.pike{ background: hsla(210, 70%, 50%, 0.1); color: hsl(210, 70%, 50%); }
    main.system-requirements .zinc.mac{ background: hsla(270, 40%, 50%, 0.1); color: hsl(270, 40%, 50%); }
    main.system-requirements .zinc.android{ background: hsla(140, 60%, 45%, 0.1); color: hsl(140, 60%, 40%); }
    main.system-requirements .zinc.ios{ background: hsla(210, 50%, 55%, 0.1); color: hsl(210, 50%, 55%); }
    main.system-requirements .zinc.linux{ background: hsla(40, 80%, 50%, 0.1); color: hsl(40, 80%, 40%); }
    main.system-requirements .forge{
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 17px;
    color: var(--page-text, #333);
    }
    main.system-requirements .slate{
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--page-text-muted);
    margin-top: 2px;
    }
    main.system-requirements .vivid{
    padding: 0;
    }
    main.system-requirements .jade{
    display: grid;
    grid-template-columns: 1fr 1fr;
    }
    main.system-requirements .cirrus{
    padding: 20px 24px;
    }
    main.system-requirements .cirrus:first-child{
    border-right: 1px solid var(--page-border);
    }
    main.system-requirements .latch{
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--page-text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.system-requirements .latch .thorn{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    }
    main.system-requirements .thorn.glyph{ background: var(--page-secondary); }
    main.system-requirements .thorn.rec{ background: var(--page-primary); }
    main.system-requirements .onyx{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.system-requirements .onyx li{
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--page-text, #333);
    line-height: 1.5;
    display: flex;
    gap: 10px;
    }
    main.system-requirements .onyx .knoll{
    flex-shrink: 0;
    width: 64px;
    font-size: 12px;
    font-weight: 500;
    color: var(--page-text-muted);
    padding-top: 1px;
    }
    main.system-requirements .onyx .vale{
    flex: 1;
    }
    
    main.system-requirements .sr-visual{
    max-width: 960px;
    margin: 64px auto 0;
    padding: 0 24px;
    }
    main.system-requirements .sr-visual-inner{
    position: relative;
    border-radius: var(--page-radius);
    overflow: hidden;
    aspect-ratio: 21/9;
    }
    main.system-requirements .sr-visual-inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    main.system-requirements .sr-visual-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(87, 10%, 9%, 0.75) 0%, hsla(87, 10%, 9%, 0.3) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px; color: #ffffff;}
    main.system-requirements .sr-visual-overlay h3{
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
    }
    main.system-requirements .sr-visual-overlay p{
    font-family: var(--font-sans);
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.6;
    max-width: 400px;
    }
    
    main.system-requirements .sr-compat{
    max-width: 960px;
    margin: 0 auto;
    padding: 64px 24px 0;
    }
    main.system-requirements .sr-compat h2{
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--page-text, #333);
    margin-bottom: 8px;
    }
    main.system-requirements .sr-compat > p{
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--page-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
    }
    main.system-requirements .sr-table-wrap{
    background: var(--page-surface);
    border-radius: var(--page-radius);
    border: 1px solid var(--page-border);
    overflow: hidden;
    }
    main.system-requirements .sr-table{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 14px;
    }
    main.system-requirements .sr-table thead{
    background: var(--page-bg);
    }
    main.system-requirements .sr-table th{
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--page-text-muted);
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .sr-table td{
    padding: 14px 20px;
    color: var(--page-text, #333);
    border-bottom: 1px solid var(--page-border);
    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(87, 6%, 96%, 0.5);
    }
    main.system-requirements .sr-check{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsla(87, 62%, 55%, 0.12);
    color: var(--page-primary-dark);
    font-size: 12px;
    }
    main.system-requirements .sr-partial{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsla(40, 80%, 50%, 0.12);
    color: hsl(40, 80%, 40%);
    font-size: 12px;
    }
    
    main.system-requirements .sr-faq{
    max-width: 960px;
    margin: 0 auto;
    padding: 64px 24px 0;
    }
    main.system-requirements .sr-faq h2{
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--page-text, #333);
    margin-bottom: 28px;
    }
    main.system-requirements .sr-faq-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .sr-faq-item{
    background: var(--page-surface);
    border-radius: var(--page-radius-sm);
    border: 1px solid var(--page-border);
    overflow: hidden;
    }
    main.system-requirements .sr-faq-item summary{
    padding: 18px 24px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--page-text, #333);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    }
    main.system-requirements .sr-faq-item summary:hover{
    background: var(--page-bg);
    }
    main.system-requirements .sr-faq-item summary::-webkit-details-marker{ display: none; }
    main.system-requirements .sr-faq-item summary::after{
    content: "+";
    font-size: 20px;
    color: var(--page-text-muted);
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.2s;
    }
    main.system-requirements .sr-faq-item[open] summary::after{
    content: "−";
    }
    main.system-requirements .sr-faq-answer{
    padding: 0 24px 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--page-text-muted);
    line-height: 1.7;
    }
    main.system-requirements .sr-faq-answer a{
    color: var(--page-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    }
    
    main.system-requirements .sr-bottom-cta{
    max-width: 960px;
    margin: 64px auto 0;
    padding: 0 24px;
    }
    main.system-requirements .sr-bottom-cta-inner{
    background: linear-gradient(135deg, hsl(87, 10%, 9%) 0%, hsl(210, 12%, 18%) 100%);
    border-radius: var(--page-radius);
    padding: 48px 40px;
    text-align: center;
    color: #fff;
    }
    main.system-requirements .sr-bottom-cta-inner h2{
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 12px;
    }
    main.system-requirements .sr-bottom-cta-inner p{
    font-family: var(--font-sans);
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.65);
    margin-bottom: 28px;
    line-height: 1.6;
    }
    main.system-requirements .sr-bottom-cta-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-primary-dark) 100%);
    color: hsl(87, 10%, 9%);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px hsla(87, 62%, 55%, 0.3);
    }
    main.system-requirements .sr-bottom-cta-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 24px hsla(87, 62%, 55%, 0.4);
    }
    
    main.system-requirements .ivory{
    max-width: 960px;
    margin: 64px auto 0;
    padding: 32px 24px;
    border-top: 1px solid var(--page-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    }
    main.system-requirements .yarn{
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--page-text, #333);
    }
    main.system-requirements .moss{
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--page-text-muted);
    }
    main.system-requirements .dune{
    display: flex;
    gap: 20px;
    list-style: none;
    }
    main.system-requirements .dune a{
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--page-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.system-requirements .dune a:hover{
    color: var(--page-text, #333);
    }
    
    main.system-requirements .sr-mobile-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    }
    main.system-requirements .sr-mobile-card{
    background: var(--page-surface);
    border-radius: var(--page-radius);
    border: 1px solid var(--page-border);
    padding: 24px;
    transition: box-shadow 0.25s;
    }
    main.system-requirements .sr-mobile-card:hover{
    box-shadow: var(--page-shadow-md);
    }
    main.system-requirements .sr-mobile-card-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    }
    main.system-requirements .sr-mobile-card h3{
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--page-text, #333);
    }
    main.system-requirements .sr-mobile-card-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.system-requirements .sr-mobile-card-list li{
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--page-text, #333);
    line-height: 1.5;
    display: flex;
    gap: 8px;
    }
    main.system-requirements .sr-mobile-card-list .knoll{
    flex-shrink: 0;
    width: 56px;
    font-size: 12px;
    font-weight: 500;
    color: var(--page-text-muted);
    padding-top: 1px;
    }
    
    @media (max-width: 768px) {main.system-requirements .sr-quicknav-inner{
    grid-template-columns: repeat(5, 1fr);
    padding: 12px;
    gap: 4px;
    }
    main.system-requirements .sr-quicknav-item{
    padding: 10px 4px;
    font-size: 11px;
    }
    main.system-requirements .sr-quicknav-icon{
    width: 34px;
    height: 34px;
    font-size: 15px;
    }
    main.system-requirements .jade{
    grid-template-columns: 1fr;
    }
    main.system-requirements .cirrus:first-child{
    border-right: none;
    border-bottom: 1px solid var(--page-border);
    }
    main.system-requirements .sr-mobile-grid{
    grid-template-columns: 1fr;
    }
    main.system-requirements .sr-table-wrap{
    overflow-x: auto;
    }
    main.system-requirements .sr-table{
    min-width: 580px;
    }
    main.system-requirements .sr-visual-overlay{
    padding: 24px;
    }
    main.system-requirements .sr-bottom-cta-inner{
    padding: 36px 24px;
    }
    main.system-requirements .ivory{
    flex-direction: column;
    text-align: center;
    }}
    @media (max-width: 480px) {main.system-requirements .sr-quicknav-inner{
    grid-template-columns: repeat(3, 1fr);
    }
    main.system-requirements .nimbus{
    padding: 60px 20px 48px;
    }}
    main.system-requirements .ivory{
    width: 100%;
    background: var(--text-color, hsl(87, 10%, 9%));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 28px 24px;
    box-sizing: border-box;
    }
    main.system-requirements .plume{
    max-width: var(--max-width, 1140px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.system-requirements .yarn{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    }
    main.system-requirements .etch{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    }
    main.system-requirements .moss{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
    white-space: nowrap;
    }
    main.system-requirements .dune{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.system-requirements .shard{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    }
    main.system-requirements .shard:hover{
    color: var(--primary-color, hsl(87, 52%, 46%));
    }
    main.system-requirements .xenon{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    user-select: none;
    }
    @media (max-width: 640px) {main.system-requirements .plume{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    }
    main.system-requirements .yarn{
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    }
    main.system-requirements .dune{
    flex-wrap: wrap;
    justify-content: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@400;500;600&display=swap");
    main.guide .ember{
    padding: 80px 24px 64px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 20%, 94%) 0%, hsl(184, 18%, 94%) 100%);
    border-bottom: 1px solid var(--guide-border);
    }
    main.guide .ember h1{
    font-family: var(--guide-serif);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--guide-text);
    max-width: 720px;
    margin: 0 auto 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    }
    main.guide .grotto{
    font-family: var(--guide-sans);
    font-size: 1.05rem;
    color: var(--guide-text-muted);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.65;
    }
    main.guide .haze{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.guide .dewdrop{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--guide-primary);
    color: #fff;
    font-family: var(--guide-sans);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px hsla(87, 62%, 45%, 0.3);
    }
    main.guide .dewdrop:hover{
    background: hsl(87, 62%, 38%);
    transform: translateY(-1px);
    }
    main.guide .clover{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--guide-surface);
    color: var(--guide-text);
    font-family: var(--guide-sans);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1.5px solid var(--guide-border);
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    }
    main.guide .clover:hover{
    border-color: var(--guide-primary);
    background: var(--guide-primary-light);
    }
    main.guide .guide-container{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.guide .zenith{
    padding: 56px 24px;
    background: var(--guide-bg);
    }
    main.guide .dusk{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.guide .orchid{
    font-family: var(--guide-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--guide-secondary);
    margin-bottom: 8px;
    }
    main.guide .zenith h2{
    font-family: var(--guide-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--guide-text);
    margin: 0 0 32px;
    }
    main.guide .glacier{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    }
    main.guide .nutmeg{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--guide-surface);
    border: 1px solid var(--guide-border);
    border-radius: var(--guide-radius-sm);
    text-decoration: none;
    color: var(--guide-text);
    font-family: var(--guide-sans);
    font-size: 0.92rem;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
    }
    main.guide .nutmeg:hover{
    border-color: var(--guide-primary);
    box-shadow: 0 2px 12px hsla(87, 62%, 45%, 0.1);
    }
    main.guide .brine{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--guide-primary-light);
    color: var(--guide-primary);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 50%;
    flex-shrink: 0;
    }
    main.guide .timber{
    padding: 64px 24px;
    background: var(--guide-surface);
    }
    main.guide .indigo{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.guide .nebula{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--guide-border);
    }
    main.guide .nebula:last-child{
    border-bottom: none;
    }
    main.guide .nebula.bastion .drift{
    order: -1;
    }
    main.guide .apex .orchid{
    margin-bottom: 6px;
    }
    main.guide .apex h2{
    font-family: var(--guide-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--guide-text);
    margin: 0 0 16px;
    line-height: 1.3;
    }
    main.guide .apex p{
    font-family: var(--guide-sans);
    font-size: 0.95rem;
    color: var(--guide-text-muted);
    line-height: 1.7;
    margin: 0 0 20px;
    }
    main.guide .yarrow{
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    }
    main.guide .yarrow li{
    font-family: var(--guide-sans);
    font-size: 0.9rem;
    color: var(--guide-text);
    padding: 8px 0 8px 28px;
    position: relative;
    line-height: 1.55;
    }
    main.guide .yarrow li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 16px;
    height: 16px;
    background: var(--guide-primary-light);
    border: 2px solid var(--guide-primary);
    border-radius: 50%;
    }
    main.guide .drift{
    border-radius: var(--guide-radius);
    overflow: hidden;
    border: 1px solid var(--guide-border);
    }
    main.guide .drift img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.guide .quarry{
    padding: 64px 24px;
    background: var(--guide-bg);
    }
    main.guide .pebble{
    max-width: 1080px;
    margin: 0 auto;
    }
    main.guide .quarry h2{
    font-family: var(--guide-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--guide-text);
    margin: 0 0 12px;
    }
    main.guide .quarry > .pebble > p{
    font-family: var(--guide-sans);
    font-size: 0.95rem;
    color: var(--guide-text-muted);
    margin: 0 0 36px;
    line-height: 1.6;
    }
    main.guide .juniper{
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--guide-surface);
    border: 1px solid var(--guide-border);
    border-radius: 50px;
    padding: 4px;
    width: fit-content;
    }
    main.guide .flint{
    padding: 10px 24px;
    font-family: var(--guide-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--guide-text-muted);
    background: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    }
    main.guide .flint.crest{
    background: var(--guide-primary);
    color: #fff;
    }
    main.guide .spruce{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    }
    main.guide .ripple{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--guide-surface);
    border: 1px solid var(--guide-border);
    border-radius: var(--guide-radius-sm);
    }
    main.guide .fennel{
    font-family: var(--guide-sans);
    font-size: 0.88rem;
    color: var(--guide-text);
    }
    main.guide .helix{
    display: flex;
    gap: 4px;
    }
    main.guide .velvet{
    display: inline-block;
    padding: 4px 10px;
    background: var(--guide-bg);
    border: 1px solid var(--guide-border);
    border-radius: 6px;
    font-family: var(--guide-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--guide-text);
    line-height: 1.4;
    }
    main.guide .kelp{
    padding: 64px 24px;
    background: var(--guide-surface);
    }
    main.guide .marble{
    max-width: 760px;
    margin: 0 auto;
    }
    main.guide .kelp h2{
    font-family: var(--guide-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--guide-text);
    margin: 0 0 36px;
    text-align: center;
    }
    main.guide .opal{
    border-bottom: 1px solid var(--guide-border);
    }
    main.guide .surge{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--guide-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--guide-text);
    text-align: left;
    gap: 16px;
    }
    main.guide .phantom{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--guide-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--guide-primary);
    transition: transform 0.25s;
    }
    main.guide .opal.open .phantom{
    transform: rotate(45deg);
    }
    main.guide .quartz{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    }
    main.guide .opal.open .quartz{
    max-height: 200px;
    }
    main.guide .quartz p{
    font-family: var(--guide-sans);
    font-size: 0.9rem;
    color: var(--guide-text-muted);
    line-height: 1.7;
    padding: 0 0 20px;
    margin: 0;
    }
    main.guide .quartz a{
    color: var(--guide-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    }
    main.guide .guide-cta{
    padding: 72px 24px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 20%, 94%) 0%, hsl(184, 18%, 94%) 100%);
    }
    main.guide .guide-cta h2{
    font-family: var(--guide-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--guide-text);
    margin: 0 0 14px;
    }
    main.guide .guide-cta p{
    font-family: var(--guide-sans);
    font-size: 1rem;
    color: var(--guide-text-muted);
    margin: 0 0 32px;
    line-height: 1.6;
    }
    main.guide .cipher{
    padding: 40px 24px;
    background: hsl(87, 10%, 9%);
    color: hsl(87, 6%, 70%);
    font-family: var(--guide-sans);
    font-size: 0.82rem;
    }
    main.guide .walnut{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.guide .footer-brand{
    font-family: var(--guide-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    }
    main.guide .footer-links{
    display: flex;
    gap: 24px;
    }
    main.guide .footer-links a{
    color: hsl(87, 6%, 60%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.guide .footer-links a:hover{
    color: #fff;
    }
    main.guide .footer-copy{
    width: 100%;
    text-align: center;
    padding-top: 24px;
    margin-top: 8px;
    border-top: 1px solid hsl(87, 6%, 18%);
    color: hsl(87, 6%, 45%);
    }
    main.guide .falcon{
    display: inline-block;
    font-family: var(--guide-sans);
    font-size: 0.78rem;
    color: var(--guide-text-muted);
    background: var(--guide-primary-light);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 20px;
    }
    @media (max-width: 768px) {main.guide .nebula{
    grid-template-columns: 1fr;
    gap: 28px;
    }
    main.guide .nebula.bastion .drift{
    order: 0;
    }
    main.guide .ember{
    padding: 56px 20px 48px;
    }
    main.guide .spruce{
    grid-template-columns: 1fr;
    }
    main.guide .glacier{
    grid-template-columns: 1fr 1fr;
    }
    main.guide .walnut{
    flex-direction: column;
    text-align: center;
    }
    main.guide .footer-copy{
    text-align: center;
    }}
    @media (max-width: 480px) {main.guide .glacier{
    grid-template-columns: 1fr;
    }
    main.guide .juniper{
    width: 100%;
    overflow-x: auto;
    }}
    main.guide .cipher{
    width: 100%;
    background: var(--text-color, hsl(87, 10%, 9%));
    padding: 32px 24px;
    box-sizing: border-box;
    }
    main.guide .walnut{
    max-width: var(--max-width, 1140px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.guide .cedar{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    }
    main.guide .raven{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    }
    main.guide .lantern{
    font-size: 13px;
    color: hsl(87, 4%, 56%);
    letter-spacing: 0.01em;
    }
    main.guide .xylem{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    }
    main.guide .bolt{
    font-size: 13px;
    color: hsl(87, 4%, 62%);
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
    }
    main.guide .bolt:hover{
    color: var(--primary-color, hsl(87, 52%, 46%));
    }
    main.guide .urchin{
    font-size: 13px;
    color: hsl(87, 4%, 36%);
    user-select: none;
    }
    @media (max-width: 640px) {main.guide .walnut{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    }
    main.guide .cedar{
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    }
    main.guide .xylem{
    justify-content: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@400;500;600&display=swap");
    main.changelog .cirrus{
    padding: 80px 24px 60px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 6%, 96%) 0%, hsl(184, 12%, 92%) 100%);
    border-bottom: 1px solid var(--cl-border);
    }
    main.changelog .cirrus h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--cl-text);
    max-width: 720px;
    margin: 0 auto 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    }
    main.changelog .zinc{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: var(--cl-text-muted);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
    }
    main.changelog .wren{
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.changelog .shard{
    padding: 60px 0 40px;
    }
    main.changelog .shard h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-text);
    margin-bottom: 36px;
    letter-spacing: -0.01em;
    }
    main.changelog .nimbus{
    position: relative;
    padding-left: 32px;
    margin-bottom: 48px;
    }
    main.changelog .nimbus::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: -48px;
    width: 2px;
    background: var(--cl-border);
    }
    main.changelog .nimbus:last-child::before{
    bottom: 0;
    }
    main.changelog .nimbus::after{
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cl-primary);
    border: 2px solid var(--cl-surface);
    box-shadow: 0 0 0 2px var(--cl-primary);
    }
    main.changelog .quill{
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    }
    main.changelog .dune{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-text);
    }
    main.changelog .jade{
    font-family: "Inter", sans-serif;
    font-size: 0.8125rem;
    color: var(--cl-text-muted);
    letter-spacing: 0.02em;
    }
    main.changelog .latch{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--cl-primary);
    color: hsl(87, 10%, 9%);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    }
    main.changelog .onyx{
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: 16px;
    padding: 28px;
    }
    main.changelog .knoll{
    margin-bottom: 20px;
    }
    main.changelog .knoll:last-child{
    margin-bottom: 0;
    }
    main.changelog .knoll h3{
    font-family: "Inter", sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cl-text-muted);
    margin-bottom: 10px;
    }
    main.changelog .vivid{
    list-style: none;
    padding: 0;
    margin: 0;
    }
    main.changelog .vivid li{
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
    color: var(--cl-text);
    line-height: 1.65;
    padding: 6px 0 6px 24px;
    position: relative;
    border-bottom: 1px solid hsl(87, 6%, 94%);
    }
    main.changelog .vivid li:last-child{
    border-bottom: none;
    }
    main.changelog .vivid li::before{
    content: "";
    position: absolute;
    left: 4px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    }
    main.changelog .glyph .vivid li::before{
    background: var(--cl-tag-new);
    }
    main.changelog .etch .vivid li::before{
    background: var(--cl-tag-fix);
    }
    main.changelog .ivory .vivid li::before{
    background: var(--cl-tag-improve);
    }
    main.changelog .cl-group-remove .vivid li::before{
    background: var(--cl-tag-remove);
    }
    main.changelog .plume{
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
    }
    main.changelog .pike{
    background: hsla(87, 62%, 55%, 0.15);
    color: hsl(87, 62%, 32%);
    }
    main.changelog .moss{
    background: hsla(184, 50%, 55%, 0.15);
    color: hsl(184, 50%, 30%);
    }
    main.changelog .wicker{
    background: hsla(260, 40%, 62%, 0.12);
    color: hsl(260, 40%, 42%);
    }
    main.changelog .ridge{
    padding: 0 0 60px;
    }
    main.changelog .ridge h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-text);
    margin-bottom: 24px;
    }
    main.changelog .umber{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--cl-border);
    background: var(--cl-surface);
    }
    main.changelog .umber img{
    display: block;
    width: 100%;
    height: auto;
    }
    main.changelog .forge{
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid var(--cl-border);
    }
    main.changelog .forge h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-text);
    margin-bottom: 12px;
    }
    main.changelog .forge p{
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
    color: var(--cl-text-muted);
    margin-bottom: 28px;
    line-height: 1.6;
    }
    main.changelog .vale{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 14px 40px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-dark) 100%);
    color: hsl(87, 10%, 9%);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px hsla(87, 62%, 55%, 0.3);
    }
    main.changelog .vale:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px hsla(87, 62%, 55%, 0.4);
    }
    main.changelog .basalt{
    margin-top: 16px;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    }
    main.changelog .basalt a{
    color: var(--cl-secondary-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.changelog .basalt a:hover{
    border-bottom-color: var(--cl-secondary-dark);
    }
    main.changelog .loom{
    border-top: 1px solid var(--cl-border);
    padding: 40px 24px;
    text-align: center;
    }
    main.changelog .husk{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cl-text);
    margin-bottom: 6px;
    }
    main.changelog .slate{
    font-family: "Inter", sans-serif;
    font-size: 0.8125rem;
    color: var(--cl-text-muted);
    margin-bottom: 16px;
    }
    main.changelog .alder{
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    color: var(--cl-text-muted);
    }
    main.changelog .thorn{
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 24px;
    }
    main.changelog .thorn a{
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    color: var(--cl-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.changelog .thorn a:hover{
    color: var(--cl-text);
    }
    @media (max-width: 640px) {main.changelog .cirrus{
    padding: 60px 20px 44px;
    }
    main.changelog .nimbus{
    padding-left: 24px;
    }
    main.changelog .onyx{
    padding: 20px;
    }
    main.changelog .quill{
    gap: 8px;
    }
    main.changelog .wren{
    padding: 0 16px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .pylon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(6px);
    }
    .sable {
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    }
    
    .gn2p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    }
    
    .kv3 {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }
    .cragMist {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .cragMist:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    
    .blotch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--btn-text);
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    white-space: nowrap;
    }
    .blotch:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    .prism {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    }
    .prism:hover {
    background: rgba(0, 0, 0, 0.04); color: #ffffff;}
    .xr9 {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .rumble_fox {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; color: #ffffff;}
    .rumble_fox.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    .joltWave {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 280px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    }
    .joltWave.is-open {
    transform: translateX(0);
    }
    .tandem_hue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    }
    .vortex {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    }
    .dwq8 {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #ffffff;
    }
    .zephyr {
    list-style: none;
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .flicker {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    }
    .flicker:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.04);
    }
    .cobalt {
    display: block;
    margin: auto 16px 24px;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    }
    .cobalt:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    }
    
    @media (max-width: 860px) {.kv3,
    .blotch {
    display: none;
    }
    .prism {
    display: flex;
    }}
    .flicker.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    .cragMist.active {color: #ffffff; background: rgba(0, 0, 0, 0.04);}
    @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@400;500;600&display=swap");
    main.faq .quartz{
    background: var(--faq-bg);
    color: var(--faq-text, #1a1c14);
    font-family: "Inter", "Noto Serif SC", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    min-height: 100vh;
    }
    main.faq .crest{
    position: relative;
    overflow: hidden;
    padding: 72px 24px 56px;
    text-align: center;
    background: linear-gradient(168deg, hsl(87, 20%, 14%) 0%, hsl(184, 25%, 18%) 100%);
    color: #fff;
    }
    main.faq .crest::after{
    content: "";
    position: absolute;
    inset: 0;
    background: url("static/img/faq-demo-1.jpg") center/cover no-repeat;
    opacity: 0.08;
    pointer-events: none;
    }
    main.faq .flint{
    position: relative;
    z-index: 1;
    max-width: var(--faq-max-width);
    margin: 0 auto;
    }
    main.faq .crest h1{
    font-family: "Noto Serif SC", serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    }
    main.faq .drift{
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.72);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.65;
    }
    main.faq .opal{
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    background: hsla(0, 0%, 100%, 0.1);
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.2s;
    }
    main.faq .opal:focus-within{
    border-color: var(--faq-primary);
    }
    main.faq .opal input{
    flex: 1;
    padding: 14px 24px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    }
    main.faq .opal input::placeholder{
    color: hsla(0, 0%, 100%, 0.4);
    }
    main.faq .opal button{
    padding: 14px 28px;
    background: var(--faq-primary);
    color: var(--faq-text);
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    }
    main.faq .opal button:hover{
    background: var(--faq-primary-dark);
    }
    main.faq .faq-categories{
    max-width: 960px;
    margin: -28px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    }
    main.faq .faq-cat-card{
    background: var(--faq-card-bg);
    border-radius: var(--faq-radius);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--faq-shadow);
    transition: box-shadow 0.25s, transform 0.25s;
    cursor: pointer;
    border: 1px solid var(--faq-border);
    }
    main.faq .faq-cat-card:hover{
    box-shadow: var(--faq-shadow-hover);
    transform: translateY(-2px);
    }
    main.faq .faq-cat-icon{
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    }
    main.faq .faq-cat-icon--install{ background: hsl(87, 40%, 90%); color: hsl(87, 50%, 35%); }
    main.faq .faq-cat-icon--activate{ background: hsl(184, 35%, 90%); color: hsl(184, 45%, 32%); }
    main.faq .faq-cat-icon--compat{ background: hsl(45, 50%, 90%); color: hsl(45, 55%, 35%); }
    main.faq .faq-cat-icon--feature{ background: hsl(260, 30%, 92%); color: hsl(260, 35%, 42%); }
    main.faq .faq-cat-card h3{
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--faq-text);
    }
    main.faq .faq-cat-card span{
    font-size: 0.78rem;
    color: var(--faq-text-light);
    }
    main.faq .surge{
    max-width: var(--faq-max-width);
    margin: 0 auto;
    padding: 56px 24px 80px;
    }
    main.faq .glacier{
    margin-bottom: 48px;
    }
    main.faq .ember{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--faq-border);
    }
    main.faq .dusk{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    }
    main.faq .yarn{ background: hsl(87, 55%, 50%); }
    main.faq .pike{ background: hsl(184, 50%, 48%); }
    main.faq .aurora{ background: hsl(45, 55%, 50%); }
    main.faq .nebula{ background: hsl(260, 35%, 55%); }
    main.faq .glacier h2{
    font-family: "Noto Serif SC", serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: var(--faq-text);
    }
    main.faq .vale{
    background: var(--faq-card-bg);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    }
    main.faq .vale:hover{
    box-shadow: var(--faq-shadow);
    }
    main.faq .bolt{
    display: none;
    }
    main.faq .apex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    gap: 16px;
    transition: background 0.15s;
    }
    main.faq .apex:hover{
    background: hsl(87, 6%, 97.5%);
    }
    main.faq .apex span{
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--faq-text);
    line-height: 1.5;
    }
    main.faq .alder{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    }
    main.faq .alder svg{
    width: 14px;
    height: 14px;
    stroke: var(--faq-text-light);
    stroke-width: 2;
    fill: none;
    }
    main.faq .bolt:checked ~ .apex .alder{
    transform: rotate(180deg);
    }
    main.faq .haze{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    }
    main.faq .bolt:checked ~ .haze{
    max-height: 600px;
    }
    main.faq .phantom{
    padding: 0 24px 20px;
    font-size: 0.9rem;
    color: var(--faq-text-light);
    line-height: 1.75;
    }
    main.faq .phantom p{
    margin: 0 0 10px;
    }
    main.faq .phantom p:last-child{
    margin-bottom: 0;
    }
    main.faq .phantom ol, main.faq .phantom ul{
    margin: 8px 0;
    padding-left: 20px;
    }
    main.faq .phantom li{
    margin-bottom: 6px;
    }
    main.faq .phantom code{
    background: hsl(87, 6%, 93%);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: "SF Mono", "Fira Code", monospace;
    }
    main.faq .phantom a{
    color: var(--faq-secondary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    }
    main.faq .phantom a:hover{
    color: var(--faq-primary-dark);
    }
    main.faq .faq-cta-banner{
    background: linear-gradient(135deg, hsl(87, 20%, 16%), hsl(184, 22%, 20%));
    border-radius: var(--faq-radius);
    padding: 40px 32px;
    text-align: center;
    color: #fff;
    margin-top: 56px;
    }
    main.faq .faq-cta-banner h2{
    font-family: "Noto Serif SC", serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
    }
    main.faq .faq-cta-banner p{
    color: hsla(0, 0%, 100%, 0.65);
    font-size: 0.92rem;
    margin: 0 0 24px;
    }
    main.faq .faq-cta-btn{
    display: inline-block;
    padding: 14px 40px;
    background: var(--faq-primary);
    color: var(--faq-text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px hsla(87, 62%, 55%, 0.3);
    }
    main.faq .faq-cta-btn:hover{
    background: var(--faq-primary-dark);
    transform: translateY(-1px);
    }
    main.faq .faq-update-note{
    text-align: center;
    margin-top: 32px;
    font-size: 0.8rem;
    color: var(--faq-text-light);
    }
    main.faq .cedar{
    background: hsl(87, 8%, 12%);
    color: hsla(0, 0%, 100%, 0.5);
    padding: 40px 24px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.8;
    }
    main.faq .loom{
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.8);
    margin-bottom: 4px;
    }
    main.faq .faq-footer-slogan{
    font-size: 0.8rem;
    color: hsla(0, 0%, 100%, 0.35);
    margin-bottom: 16px;
    }
    main.faq .falcon{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    }
    main.faq .falcon a{
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
    }
    main.faq .falcon a:hover{
    color: var(--faq-primary);
    }
    main.faq .faq-footer-copy{
    font-size: 0.78rem;
    color: hsla(0, 0%, 100%, 0.3);
    }
    @media (max-width: 768px) {main.faq .faq-categories{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    }
    main.faq .crest{
    padding: 56px 20px 44px;
    }
    main.faq .surge{
    padding: 40px 16px 60px;
    }
    main.faq .apex{
    padding: 16px 18px;
    }
    main.faq .phantom{
    padding: 0 18px 16px;
    }
    main.faq .faq-cta-banner{
    padding: 32px 20px;
    }}
    @media (max-width: 480px) {main.faq .faq-categories{
    grid-template-columns: 1fr 1fr;
    margin-top: -20px;
    }
    main.faq .faq-cat-card{
    padding: 18px 12px;
    }
    main.faq .opal{
    flex-direction: column;
    border-radius: var(--faq-radius);
    }
    main.faq .opal input{
    padding: 12px 18px;
    }
    main.faq .opal button{
    padding: 12px;
    border-radius: 0;
    }}
    main.faq .cedar{
    background-color: var(--text-color, hsl(87, 10%, 9%));
    padding: 48px 24px 36px;
    margin-top: 80px;
    }
    main.faq .xenon{
    max-width: var(--max-width, 1140px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    }
    main.faq .loom{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }
    main.faq .raven{
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-family: Georgia, "Times New Roman", serif;
    }
    main.faq .zinc{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    margin: 0;
    letter-spacing: 0.3px;
    }
    main.faq .falcon{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 16px 0 4px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    width: 100%;
    max-width: 480px;
    }
    main.faq .wren{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.6);
    text-decoration: none;
    transition: var(--transition, all 0.25s ease);
    padding: 2px 4px;
    border-radius: var(--radius-sm, 4px);
    }
    main.faq .wren:hover{
    color: var(--primary-color, hsl(87, 52%, 46%));
    }
    main.faq .shard{
    color: hsla(0, 0%, 100%, 0.2);
    font-size: 14px;
    user-select: none;
    }
    main.faq .alloy{
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 8px 0 0;
    letter-spacing: 0.2px;
    }
    @media (max-width: 600px) {main.faq .cedar{
    padding: 36px 16px 28px;
    margin-top: 48px;
    }
    main.faq .falcon{
    gap: 6px;
    max-width: 100%;
    }
    main.faq .wren{
    font-size: 12px;
    }
    main.faq .alloy{
    font-size: 11px;
    }}

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